# collaboratory notes for javascript

## 2/25
Hello class

Javascript is also called "ECMA script"
When JavaScript was created, it initially had another name: “LiveScript”.

Javascript is commonly used for making the website *'alive'*

Lynx is another way to see the content of website but rather using ***GUI*** it based on ***TEXT***

how to use Lynx: **`lynx website_name`**, to quit Lynx you can press 'q' and press 'y' (if asked)

most of website that require interaction it's commonly using javascript

to switch to ***virtual-terminal*** you can press **`ctr+alt+[f1~f6]`**

to switch back to ***GUI*** mode you can press **`ctr+alt+f7`**

How webs flow work:

Browser -> WebServer -> Browser

Front-end is how the user programm their ***web-design***

Back-end is how the programmer programm their ***website-system***, mean hows the web supposed to work

Basically web-browser sending ***request*** to the web-server then the web-server will send the ***answer*** based on what the web-browser requested and the browser will display it as .html format

For back-end development the most commonly used languages are php and asp.
"php" is from open sourcing
"asp" is from Microsoft

node.js is basically javascript on the back-end side

Nodejs executes JS outside a web-browser
nodejs:
alert<=(similar to console.log)
esc+a,e,b;backspace
camelCase-are upper case letters
reserved keywords-you can't use to name var
const-(similar to let, but value can't be changed)
JS number range: 2^53-1 to -2^53-1
BigInt-integers of arbitrary length(out of the range)

Simple quotes:
double quotes: "Hello"
single quotes: 'Hello'
Extended functionality:
backticks: `Hello`

typeof x - operator
typeof(x) - function

"empty" values = 0;null;undefined;NaN
(in boolean they're treated as FALSE)

**Node.js** is an ***open-source***, cross-platform, back-end *JavaScript runtime environment* that runs on the ***V8 engine*** and executes JavaScript code outside a web browser.

In single `if` statement it will be treated as ***boolean***,, an empty string will treated as false and vice versa

VIM shortcuts/cheatsheet:
esc-visual mode
i-insert mode
:q-quit
:q!-forced quit
:w-save
:wq-save and exit
h,j,k,l-arrows

##### **precedence** is a key word, for example 5 + 2 * 8 = 5 + 16 = 21 for this example (both +,* signs are **operators** and 5, 2, 8 are **operands

((code beautifier)https://beautifier.io/)

---

> Precedence, Operator, Operand, Expression Tree, Expression, Strict Equality, Short-Cicruit evaluation, Lexical-Scoping

> Most operator are left associative

Primitive data types - boolean, byte, char, short, int, long, float and double
Reference data types - Array and Object

> Exponentiation

> Code obfuscation

[The ternary operator](https://www.javascripttutorial.net/javascript-ternary-operator/) "?:" works like an "if" statement

> Function_Defination_Invocation

---

^Right associative (**)
^short circuit evaluation - is the another feature of OR
^(Let) - has a function called "lexical scoping".
^

left associative (-(+)

a=b=c=2+2 -"this is exponentiation tree"

y=x++; -"Code obfuscation"

== regular equality check
=== strict equality check

:ternary operator - has three operands
eg. y= x>5?3:7 (>, ?, ;)

:let is a newer(than var, which is tricky and confusing) way to define a variable

&& ||

"short circuit evaluation" - So when Java finds the value on the left side of an && operator to be false, then Java gives up and declares the entire expression to be false. That's called short circuit expression evaluation.

Shallow copy - points to the reference address of the original collection structure (object or array) which holds the value in the new variable

Deep copy - creates a duplicate of all the properties of the source object into the target object

definition
invocation

"callback function" - is a function passed into another function as an argument to be executed later. When you pass a callback function into another function, you just pass the reference of the function, the function name without the parentheses.

---

**Keyword:**

> Pretty_printing_javascript, [padding_number_javascript](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/padStart), Destructive, Un-destructive, Concatenation

---

destructive (modification in place)
non-destructive (returns a new copy)

Destructive:
pop();
push();
shift();
unshift();
splice()
Non-destructive:
concat();
filter();
map();
slice()

----
concatention - in JavaScript, we can assign strings to a variable and use concatenation to combine the variable to another string. To concatenate a string, you add a plus sign+ between the strings or string variables you want to connect.

---
concatenation - putting two things end-to-end/join two or more strings =>.concat([''])
nested array - has one or many arrays as the element of an array (arrays inside an array)
json.stringify - converts a deeply nested object or value into a string

Null string
CSV - an open file format for spreadsheet
Nested Array
[] - ordinary
{} - associative array

object (only in JS) = Phyton Dictionary,Associative arrays,map , hash table

for...in :used in dictionary and object
for...of :used in ordinary array indexed by 0, 1, 3...

LINTER tells your mistakes

tar cvzf => create
tar tvzf => table of content
tar xvzf => extract

meta data

content delivery network(CDN) - jQuery library

### hints for the visualization exercise

**It's ok to ask for classmates' help and even look at some small pieces of their code, but it is not ok to take a screenshot or even copy files directly.**

[jquery "$.get" example](https://www.w3schools.com/jquery/jquery_ajax_get_post.asp)
[papaparse](https://www.papaparse.com/) (search for cdn)
[datatables examples](https://datatables.net/examples/) "Javascript sourced data"
[plotly javascript getting started](https://plotly.com/javascript/getting-started/)
[plotly javascript scatter plot example](https://plotly.com/javascript/line-and-scatter/)
https://plotly.com/javascript/marker-style/
https://cdn.datatables.net/plug-ins/1.10.25/sorting/natural.js(treat as numbers)