Day 37 - 16/10

Plan:

Morning - 15h30: Learning Js: Bit wise, Regular expression, Precedence, Error, Scope, Hoisting, Strict mode, this Keyword, Arrow function, Class

>15h30: Converting web to html:

Progress:

Bitwise

• Js uses 32 bits bitwise operands

• Decimal to Binary

function dec2bin(dec){

return (dec >>> 0).toString(2);

}

dec >>> 0 : doesn't shift the number, just convert the dec value to number and set the sign bit to 0 (always positive)

• Binary to Decimal

function bin2dec(bin){

return parseInt(bin, 2).toString(10);

}

Regular Expressions

.search(" "); : return first position

.match(" "); : return every matches posible

.replace("one", "other"); : consecutively replace words "one" with word "other" each time activate

pattern.test("string"); : check if string contains pattern

pattern.exec("string"); : search for the first pattern matches in string and return it as object

A regular expression is a sequence of characters that forms a search pattern.

• / /i : case-insensitive matching

• / /g : global match (find all matches)

• / /m : multiline matching

• [abc] : Find any of the characters between the brackets (case-sensitive)

• [0-9] : Find any of the digits between the brackets

• (x|y) : Find any of the word or letter

• \d : Find a digit

• \s : Find a whitespace

• \b : Find a match starts with WORD ( \bWORD ), or ends with WORD ( WORD\b )

• \uxxxx : Find the Unicode character specified by the hexadecimal number xxxx

• n+ : Matches any string that contains at least one n

• n* : Matches any string that contains or not contains n

• n? : Matches any string that contains zero or one n

Error

• try {} : define a code block to run

• catch(err) {} : define a code block to handle any error

• finally {} : define a code block to run regardless of the result

• throw {} : define a custom error

Use "try" and "catch" in pair

Error Object properties

• name : set or return an error name

• message : set or return an error message

Error Name value

• RangeError : A number "out of range" has occurred

• ReferenceError : An illegal reference has occurred

• SyntaxError : A syntax error has occurred

• TypeError : A type error has occurred

• URIError : An error in encodeURI() has occurred

Scope

In JavaScript, objects and functions are also variables.

Types:

• block scope: provided when "let" or "const" is used inside a block. "var" doesn't have block scope

• function scope: each function creates a new scope, variables can not be accessed from outside

• global scope: a variable declared outside a function become global; can be accessed by all script and function on the web page

When assign a value to a variable that has not been declared, it will automatically become a GLOBAL variable

Lifetime of Js variables

• start when it is declared

• local var are deleted when the function completed

• in web browser, global var deleted when close browser window

Hoisting

Means a variable can be used before be declared

Only "var" has hoisting

Strict mode

"use strict"

Help writing cleaner code, preventing from using undeclared variables.

Not allowed:

• Using a variable (or object) without declaring

• Deleting a variable (or object), a function, an undeletable property

• Duplicating a parameter name

• Writing to a read-only (or get-only) property

• ...

this Keyword

this refer to:

• the object when used in an object method

• the global object when used alone ( in a browser window the global object is [object Window])

• the global object when used in a function

• undefined when used in a function in strict mode

• the element that receive the event in event handler

• .call() and .apply() method can be used to call an object method with another object as argument

• .bind() method is for an object to borrow a method from another object

Arrow function

Allow us to write shorter function syntax

From

hello = function() { return "Hello World!"; }

to

hello = () => { return "Hello World!"; }

to ( if function only have 1 statement )

hello = () => "Hello World!";

( if function has parameters)

hello = (val) => "Hello " + val;

to ( if there is only 1 parameter )

hello = val => "Hello " + val;

In Arrow function, this keyword represents the object owns the function no matter who calls the function

Class

class ClassName {

constructor(element1, element2, ...) {

this.element1 = x;

this.element2 = y;

...

}

method1() { }

method2() { }

}

• Class is not an object. It's a template for objects

• Can use class to create objects:

const elementN = new ClassName("Ford", 2014);