JavaScript Basic 2020

Learn what's new with JavaScript in 2020. It has changed a lot from the JavaScript you know.

• JavaScript is interpreted as opposed to compiled
• C is compiled
• No need to declare variable types
• Allows dynamic typing : given a variable there is no type associated with it until it is filled with value, it can be changed later. Some languages are not 
• ES6 is the latest version of JavaScript full name is ECMAScript 6
• Symbol

• In new JavaScript languages semicolon ; is likely optional
• JavaScript can check equality using double equal sign ==  , or triple equal sign  ===
• == coerces the type
• === requires to be exact, doesn't coerce the type 
• Node command line runtime for JavaScript is built on V8 engine
• typeof null --> returns object - one of those strange behaviors of JavaScript
• JavaScript development is guided by ECMAScript standard. ECMA is pronounced Ehk-MA. E stands for Europe
• You can think : the spec for JavaScript is written by ECMA
• Each browser can have its own JavaScript engine, for example Chrome uses V8
• Event Listener
• Listening or subscribing events such as keydown 
• aka the =Event handler
• Modern JavaScript variations include Typescript, frequently used in Angular 
• npm is the popular package manager for JavaScript
• Has joined Github
• In order words both Github and npm is now owned by Microsoft
• Define a constant : const CONSTANT = 0.5
• Enclose strings in double quotes or single quotes
• Arrays can contain values as well as functions
• const arr = ["value1",5, function(){console.log("Hello World")}]
• Run the function arr[2]()
• Can contain different types
• Can access using indexing, starting from position zero
• use array with for loop

for (let i = 0; i < arry.length : i++) {

    console.log(arr[i])

}

• JavaScript allows trailing comma
• Types
• primitives: 
• no methods attached?  immutable
• boolean, string, null, number, symbol, undefined
• Number includes both float and integer, there is no separate type

• Sudden differences between undefined and null
• JavaScript string
• concatenation is implicit coercion or type casting, if we use str(variable) then that's explicit coercion
• checking types of input using typeof, e.g. typeof undefined // --> undefined, type 5 // --> number
• Try out JavaScript interactively using Chrome browser inspect element mode, or install node and call interactive JavaScript prompt. Use those two as a JavaScript interpreter
• In general, undefined is returned if nothing specific is returned
• JavaScript documentation by Mozilla https://developer.mozilla.org/en-US/docs/Web/javascript

Bootstrap Basics

• Bootstrap is a front end framework used to quickly design, organize and beautify a modern website. It generates css fast for common front end patterns and UI elements
• Each UI element or group of elements is called a component
• Horizontal containers are called row s
• Vertical containers are called col s , short for column, can be used in designing grid system
• Bootstrap allows you to focus more on the html file rather than CSS file, write a bit less CSS
• And no need to reinvent the wheel : writing common UIs and interactions from scratch
• Concept : bootstrap requires using specific class names to generate desired design 
• Pro tip: use margin to organize layout, example: can do margin left auto to push things all the way to the right  mt-3 margin top 3
• Pro tip : use chrome inspector on Bootstrap sample and tutorial page to see what class, and configurations are used.

Grid system

Bootstrap organizes html contents into grids. Each row of the grid is called a row, each column a column. Each row has 12 columns. 

Make the website responsive

Use media query to query screen size and type. Specify the content parameter to change html content. 

Viewport is the visible area. Be sure to utilize the actual size of the phone, prevent rendering websites as desktop version on mobile device, not pretending it s desktop load. 

<meta name="viewport" content="width=Device-width, initial-scale=1.0">

Bootstrap can detect screen size and label it as lg for large, sm for small. If we use the lg and sm parameter in the class of the html element, we can specify how much space a grid column will take if the screen is small versus large (based on screen size).

<div class="row">
<div class="col-lg-3 col-sm-6"> This is a section.
</div>

<div class="col-lg-3 col-sm-6"> This is another section.
<div>
<div class="col-lg-3 col-sm-6"> This is a third section.
</div>
<div class="col-19-3 col-sm-6"> This is a fourth section.
</div>
</div>

CSS review

Pseudo class : 

selector:pseudo-class {

  property: value;

}

w3schools

example 

a:link {

  color: #FF0000;

}

but more importantly in modern css

::after

::before

are two important pseudo class

p::after { 

  content: " - add a foot note";

}