JavaScript foundation

Different Data Types:

  • Stings in quote
  • Numbers
  • Boolean is true or false
  • Null is the absence of value

Math Operators:

  • + “add”
  • –  “subtract”
  • *  “multiply”
  • / “divide”

Properties:

When you introduce a new piece of data into a JavaScript program, the browser saves it as an instance of the data type. An instance is an object of a data type.

Each data type has built-in methods: like string.toUpperCase(); etc.

Libraries:

Call a method without an instance – that’s a library like Math.random(); which returns a random number between 0 and 1 in order to do 0 and 100 we need to multiply it by 100.

Comments:

we use:

//code

or

/*  code */

 

Variables

Programmers use variables to write code that is easy to repurpose. When naming variables make sure you use camelCase

var: holds a value that can change.

cont: hols a value that cannot change or be rewritten

let: variable can be reassigned

 

Undefined

happens when you create a variable and you don’t assign it a value. JS create space for this variable in memory and sets it to undefined. Undefined is a primitive data type.

 

Math operators: you can use variable with math operators such as:

var lopez = 3;

lopez = lopez + 10;

shorthands:

lopez += 10 (13)

lopez -= 10 (-7)

lopez *=3 (9)

lopez++ (increase number by one)

lopez– (decrease number by one)

 

String Interpolation

we use + to add two string in javascript.

‘lopez is ‘+ lopez + ‘ years old’; (lopez is 3 years old)

you can also use ${myVariable} instead of the + sign like:

`lopez is ${lopez} years old`;

 

 

Browser support:

  • canisue.com to refer to support for HTML, CSS & JS
  • Babel a javascript library to convert new unsupported JS (ES6) to older supported by most browsers.
  • why ES6? less friction, more attractive because of its object-oriented, readable, economy of code, easier to understand, mitigate some of the common pitfalls

Transpilation with babel

npm install babel-cli

npm install babel-preset-env

npm run build

 

 

Project structure: with npm & gulp

npm install babel-cli -D
npm install babel-preset-env -D

The babel-cli package includes command line Babel tools, and the babel-preset-env package has the code that maps any JavaScript feature

-D for devDependencies

in package.json under scripts write: “build”: “babel src -d lib”

  • babel — The Babel command call responsible for transpiling code.
  • src — Instructs Babel to transpile all JavaScript code inside the srcdirectory.
  • -d — Instructs Babel to write the transpiled code to a directory.
  • lib — Babel writes the transpiled code to a directory called lib.