> For the complete documentation index, see [llms.txt](https://dtian.gitbook.io/daily-report-1/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://dtian.gitbook.io/daily-report-1/day-37-16-10.md).

# 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:

## <mark style="color:blue;">**Bitwise**</mark>

* Js uses 32 bits bitwise operands
* Decimal to Binary

`function dec2bin(dec){`&#x20;

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

&#x20;`}`

<mark style="background-color:orange;">`dec >>> 0`</mark> <mark style="background-color:orange;"></mark><mark style="background-color:orange;">: doesn't shift the number, just convert the dec value to number and set the sign bit to 0 (always positive)</mark>

* Binary to Decimal

`function bin2dec(bin){`&#x20;

`return parseInt(bin, 2).toString(10);`&#x20;

`}`

## <mark style="color:blue;">Regular Expressions</mark>

`.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&#x20;

A regular expression is a sequence of characters that forms a <mark style="color:red;">**search pattern**</mark>.

* / /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*

## <mark style="color:blue;">Error</mark>

* 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

*<mark style="color:red;">Use "try" and "catch" in pair</mark>*

Error Object properties&#x20;

* 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

## <mark style="color:blue;">Scope</mark>

In JavaScript, objects and functions are also variables.

Types:&#x20;

* 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&#x20;

<mark style="color:orange;">When assign a value to a variable that has not been declared, it will automatically become a GLOBAL variable</mark>

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

## <mark style="color:blue;">Hoisting</mark>

Means a variable can be used before be declared

Only "var" has hoisting

## <mark style="color:blue;">Strict mode</mark>

`"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
* ...

## <mark style="color:blue;">this Keyword</mark>

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

\ <mark style="color:orange;">In Arrow function, this keyword represents the object owns the function no matter who calls the function</mark>

## <mark style="color:blue;">Class</mark>

`class ClassName {`&#x20;

`constructor(element1, element2, ...) {`&#x20;

`this.element1 = x;`&#x20;

`this.element2 = y;`&#x20;

`...`

`}`&#x20;

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