ricklopez
7/20/2018 - 9:18 PM

js_the_very_basics_public.md

js_the_very_basics_public.md
content_copyfile_download
  • Rendered
  • Source

demo repl.it

This course is designed as a primer for our JS In-Depth Series of Group Sessions. This is ideal for Design Track students, Developer students struggling to understand JavaScript or students with limited programming experience. We will cover the building blocks of programming with JavaScript. This course assumes little or no experience with JavaScript.First

We have three primary goals today.

1. Walk away with a new mental model for learning and understanding JavaScript or any programming language for that matter.
2. Understand what is a variable
3. Understand what the heck is a function

  1. What is a programming Language?

    1. A new mental model for a programming language

      • It's just a piece of software loaded onto a computer
        • this software knows how to respond to specific commands. Just like most pieces of software we use every day.
        • Difference is we don't use buttons and mouse clicks to control this software. Instead, we use what's known as a programming language that the piece of software understands
        • This is commonly referred to as code
      • Image for your new mental model

  1. What is JavaScript?

    • JavaScript the Engine aka a Virtual Machine

    • *Virtual Machine, a fancy word for a piece of Software that can understand a programming language and control a computer hardware functionality

    • Ecma Script the rules for a JavaScript Runtime / Engine

    • The V8 JavaSctipt Engine ()

  • JavaScript the programming language

    • think of it as English but for Human to Computer communication

    • we can control the JavaScript Engine / Machine with JS the programming language

      *

  • Let's learn this new language so we can talk to the JavaScript runtime

    • Your first chat with the JS runtime.

      • Error: Undefined
      • Error: Not Defined

    • The more we know the language, the more we control the conversation, and what this piece of software called a JavaScript Engine will do in the environment it's running on.

  • Different JavaScript Environments

    • The Browser (Chrome with V8 engine)
    • The Server (Node with the V8 engine
    • Other Software ()

JavaScript Basics?

Two Main Rules

  • Variables: Are used to create and represent data in our applications
  • Functions Are used to create custom actions that the JS Engine can understand with just one word.

Data

When we code, we need to represent, reason and work with data.

So what is data? data type + data value = data in our code;

How do we create and use data in JS?

JavaScript, like most programming languages, give us a predefined set of data types

Data Types (Basic)

https://javascript.info/types There are 7 basic types in JavaScript.

  • number: for numbers of any kind: integer or floating-point.
  • string: for strings. A string may have one or more characters; there’s no separate single-character type. boolean: for true/false. null: for unknown values – a standalone type that has a single value null. undefined: for unassigned values – a standalone type that has a single value undefined. object: for more complex data structures. symbol: for unique identifiers.

The typeof operator allows us to see which type is stored in the variable.

Important Built-In Complex Types

  • function
  • arrays
  • We can create custom types too.

Why do we need data types?

Data types to take up memory? Some data types take up more than others. The JS engine can leverage this info to help us efficiently manage the computer memory our data is using. Also, by having specific types, it allows us to have predefined actions for each type. When we have a particular data type in JavaScript, we know there are particular actions the JavaScript engine knows how to take on this data type.

Example (data tpye | common actions):

  • strings: toLowerCase(),includes(), charAt(), replace()
  • number: isNaN(), toString(), toFixed()
  • arrary: indexOf(), push(), slice(), map(), filter(), each()
  • object: assign(), create(), keys(), values(), assign()

Variables

The last piece we need to create data for our JS Machine to use.

The var statement declares a variable, optionally initializing it to a value. Learn More

Manipulating and changing data

Operators, Conditionals and Loops

Actions

Teaching our JS Machine new things.

How do we perform custom actions in JavaScript? - we create and call functions

Functions

Functions are one of the fundamental building blocks in JavaScript. A function is a JavaScript procedure—a set of statements that performs a task or calculates a value. To use a function, you must define it somewhere in the scope from which you wish to call it. Learn More

  1. Defining a Function (creating a function)
    [keyword:function][identifier: someName][parameters:()]{
        //code goes here
    }

    function kick(){
        console.log("Kick Action")
    }
  1. Calling the function = telling the JS engine to perform the custom action kick
    kick();
    
    /* OUTPUT TO CONSOLE
        Kick Action
    */

Demo

Resources