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);

Last updated