Web Dev Notes

JavaScript

Variable Declaration

Data Types

Primitive types

1. number

2. string

3. bigInt

4. boolean

5. undefined

6. symbol

Structural Types

1. null

2. object

3. function

Loops / control structures

for ... in loop:

• array indices

• object property names

const arr = ["a", "b", "c"];
arr.prop = "some prop";
for (let i in arr) {
  console.log(i);
}
// 0 1 2 prop

for ... of loop:

• array entries

• object property values

const arr = ["a", "b", "c"];
arr.prop = "some prop";
for (let i of arr) {
  console.log(i);
}
// a b c

Higher-order Functions

ForEach

arr.forEach(callback(currentValue[, index[, array]]) {
// execute something
}[, this]);

Map

let newArray = arr.map(callback(currentValue[, index[, array]]) {
// return element for newArray, after executing something
}[, this]);

Filter

let newArray = arr.filter(callback(currentValue[, index[, array]]) {
// return element for newArray, if true
}[, this]);

• currentValue - The current element being processed in the array

• index (optional) - The index of the current element being processed in the array

• array (optional) - The array filter was called upon

Reduce

arr.reduce(callback(accumulator, currentValue, [, index[, array]] )[, initialValue])

• accumulatoraccumulates callback’s return values; initialized to the 1st element

• currentValue - The current element being processed in the array

Object-Oriented Programming

Reference of this

Object Accessor

var person = {
	language : "",
	set lang(lang) { this.language = lang }
	get lang() { return this.language }
		getLang: function() { return this.language }
};
person.lang = "en"; // invokes the setter -> set property
console.log(person.lang); // invokes the getter -> property
console.log(person.getLang()); // called as a function

Why Using Getters and Setters?

• Simpler syntax

• Equal syntax for properties and methods

• Secure better data quality

• Doing things behind-the-scenes

Object.defineProperty()

var obj = { counter: 0 };
Object.defineProperty(obj, "increment", {
  get: function () {
    this.counter++;
  },
});
Object.defineProperty(obj, "subtract", {
  set: function (value) {
    this.counter -= value;
  },
});
obj.increment; // obj.counter == 1
obj.subtract = 2; // obj.counter == -1

Object Constructor

function Person(first, last, age, eyecolor) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eyecolor;
}
var myFather = new Person("John", "Doe", 50, "blue");
var myMother = new Person("Sally", "Rally", 48, "green");

Person.nationality = "English";

• Does not affect instantiated objects

new Operator

const foo = new Foo();

Object.create() vs new

const foo = Object.create(Foo.prototype);

Object Prototype

foo.__proto__ === Foo.prototype;
foo.prototype === undefined; // does not exist on an instantance

• Properties defined on an object’s prototype do not exist on the object itself

• Modifying an object’s prototype affect all of its instances;

Prototype Chain

foo.__proto__.__proto__ === Object.prototype; // chaining
foo instanceof Foo;
foo instanceof Object;
Object.prototype.__proto__ === null; // end of the chain

ES5 Syntax

Object.getPrototypeOf(obj);
Object.setPrototypeOf(obj, prototype);

Functions defined on the prototype

• When called w/ a instance: this points to the instance

• When called on its own (on the prototype): this points to the global object

Classes (ES6 Syntax)

// Declaration
class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
  get area() {
    // Getter
    return this.calcArea();
  }
  calcArea() {
    // Method
    return this.height * this.width;
  }
  static displayName = "rect"; // static property
  static calcArea(height, width) {
    return height * width;
  }
}

class Button extends Rectangle {
  constructor(height, width, func) {
    super(height, width);
    this.func = func;
  }
  click() {
    this.func();
  }
}

Closure / Scope in JS

• Inner functions have access to variables in the outer function even after the outer function terminated

• Create private scopes w/ true private variables
• Variables in a closure can only be modified by functions in the same scope

• Access outer variable in a callback function

const getData = (url) => {
  return fetch(url).then(() => console.log(url));
};

Functions

Decorators

function decorator(func) {
  return function (...args) {
    doSomething(func(...args));
  };
}

Hoisting

Using Callback Functions

Methods on Functions

Arrow Functions

const f1 = cb => x => cb(x) + 1
// equivalent to
function f1(cb) {
	return function f2(x) {
		return cb(x) + 1
	}
}
// call
f1(Math.sqrt)(4) = Math.sqrt(4) + 1 = 3

Modules

Async in JS

Using Callback Functions

fs.readFile("foo.txt", "utf8", function (err, data) {
  console.log(data);
});

• 返回后会通知callback进行接下来的操作

• 非阻塞：拿到结果前不会阻塞其他代码的运行

• 工作线程在异步操作完成后需要通知主线程

消息队列和事件循环

• 一次循环 = 主线程从消息队列取一个消息并执行的过程

button.addEventListener("click", callback);

Promise

const calculate = (a, b) =>
  new Promise((resolve, reject) => {
    let sum = a + b;
    if (isNaN(sum)) {
      reject("failed");
    } else {
      resolve("success");
    }
  });
calculate
  .then((number) => {
    console.log("Then", number);
  })
  .catch((number) => {
    console.log("Catched", number);
  });

Promise.all([promise1, promise2])

Promise.race([promise1, promise2])

A+规范

async/await 语法糖

async function logSum(a, b) {
  const sum = await calculate(a, b);
  console.log(sum);
}

消息范式：观察者/订阅-发布

Front-End

浏览器事件

开发模式

MVVM

MVC

graph LR
C(Controller<br/>业务逻辑)
M(Model<br/>数据持久)
V(View<br/>用户界面)
U(["用户"])

U--输入-->V
V--传输指令--> C
C --"选取&处理数据"--> M
M --提供数据--> V

HTML

Elements

Void elements

The template element

Raw text elements

Escapable raw text elements

Foreign elements

Normal elements

Form

<form method="POST" action="/path">
  <input type="hidden" value="{crsf_token}" /> hidden from views
  <input type="text" value="" /> text input field <input type="submit" /> the
  submit button
</form>

CSS

Units

Pseudo Elements

::before, ::after

Web

URL

TCP/IP

1. Application Layer: application level (HTTP, SMTP, etc.)

2. Transport Layer: communication between applications (TCP, UDP)

3. Network Layer: routing packets of data across network boundaries (IP)

4. Physical / Link Layer: convert data to network signal & v.v.

TCP vs UDP

连接建立阶段：三次握手

连接释放阶段：四次挥手

Connection / Disconnection Diagram

OIS Model

HTTP

Request

Methods

Form

Response

Status Code

Headers

• Content-Type

• Set-Cookie

• Cookie

• Location

Demo HTTP Server

const net = require(`net`);
const server = net.createServer(handleConenct);
function handleConnect(data) {}
function handleData(sock, data) {}
server.listen(PORT);

Storage

Cookie

Cookie Creation

Content

• Data: name1=value pairs desperate by ;

• Expiration: how long the cookie is valid for

Properties

• Multiple Set-Cookie is allowed in one response

• Only data will be sent back to the server in a http request

• A server cannot force the browser to delete cookies; expiration is only expected to work

Cookie Types

Session Cookies

Permanent Cookies

Expires(date)

Max-Age

Session

Usage

Maintain “state” between requests

• Authentication

• Store persistent data

• Visits, user preference, tracking, etc.

Store data on the server about a user

• Use session ID to identify / represent the user

Link the data to the requests from a particular client

• Session ID retransmitted on every request from the same client

Session ID

Security Issue: Owning session ID = Owning the session

Session Creation & Use

1. Server generates session id for an http request

2. Server sets client’s cookie with the session ID in the http response

3. Client creates / updates a cookie tied to the domain

4. Client sends the cookie w/ every request

5. Server finds the session according to the ID received

Session Store

Cache

Cross-origin

Same Origin Policy 同源策略

• DOM 同源策略：禁止对不同源页面进行 DOM 操作

• XMLHttpRequest 同源策略：拦截向不同源服务器地址的请求的回应

• 访问 iframe 内容

• CRSF

• JavaScript: <script> 标签

• CSS: <link rel="stylesheet" href="styles.css">

• 图片：<img src="pic.png">

1. JSONP: 跨域 GET 请求

• HTML 中的<script scr="">, <img src="">, <link rel="a.css">标签可以发送跨域请求

<script>
  function jsonpCallback(response) {
    console.log("jsonp response", response);
  }
</script>
<script type="text/javascript" src="/api?callback=jsonpCallback"></script>

jsonpCallback(JSON.stringify(data));

2. 空iframe加form: 跨域 POST 请求

1. 创建一个 POST form，target设置为‘some-target’

2. 创建一个name和form的target一致的iframe，src可以留空

<form id="form1" action="" target="target1" method="post"></form>
<iframe id="xxx" name="target1" src=""></iframe>

3. 通过 JS 来 submit 这个 form

$("#form1").attr("action", "url");
$("#form1").submit();

3. Cross-Origin Resource Sharing 跨域资源共享 (CORS)

简单请求

• Accept

• Accept-Language

• Content-Language

• Last-Event-ID

• Content-Type：只限于 application/x-www-form-urlencoded、multipart/form-data、text/plain

流程

1. Client 发送请求

2. Server 判断请求源是否安全

• 安全：发送响应头包含Access-Control-Allow-Origin: origin-of-request的响应

• 不安全：发送普通的响应

3. Client 浏览器会拦截没有Access-Control-Allow-Origin的响应

非简单请求

流程

1. Client 发送OPTIONS预检请求

OPTIONS /resources/post-here/ HTTP/1.1
...
Origin: http://foo.example
Access-Control-Request-Method: POST (实际请求的方法)
Access-Control-Request-Headers: X-PINGOTHER, Content-Type (自定义的请求头)

2. Server 回复预检请求

HTTP/1.1 200 OK
...
Access-Control-Allow-Origin: http://foo.example
Access-Control-Allow-Methods: POST, GET, OPTIONS
Access-Control-Allow-Headers: X-PINGOTHER, Content-Type
Access-Control-Max-Age: 86400 (表明该响应的有效时间为86400秒 / 24小时)

3. Client 发送实际请求：包含自定义的请求头和 payload

4. Server 响应实际请求

HTTP/1.1 200 OK
...
Access-Control-Allow-Origin: http://foo.example

[payload]

附带身份凭证的请求

4. 代理

Back-end

Express

Routing

app.all("/"); // handle all request methods

Path Matching

Route Parameters

app.get("/users/:userId/books/:bookId", function (req, res) {  res.send(req.params);});

Middlewares

Serving Static files

function serveStatic(req, res, next) {
  fs.readFile(`public/${req.path}`, (err, data) => {
    if (err) {
      next();
    } else {
      res.send(data);
    }
  });
}

Body Parsers

express.json([options]);

• parses incoming requests with JSON payloads

express.urlencoded({ extended: false });

• parses incoming requests with urlencoded payloads
• Original Body: field1=value1&field2=value2
• Parsed Body:req.body = { field1: value1, field2: value2

Session middleware

const session = require(`express-session`);
app.use(
  session({
    secret: `string`, // encrypt the session ids -> long & complex
    saveUninitialized: false, // don't save new empty session
    resave: false, // not to resave unmodified session data
  })
);

Form handling

GET form

app.get(`/form`, (req, res) => {
  console.log(req.query);
});

POST form

app.use(express.urlencoded({ extended: false })); // body parser middleware to decode
app.post(`/form`, (req, res) => {
  req.body;
});

Request Object

app.get(`/foo/:bar`, (req, res) => {
  console.log(req.params.bar);
});

Response Object

Handlebars (hbs) templating

Loop

<ul>
  {{#each people}}
  <li>{{this}}</li>
  {{/each}}
</ul>

Condition

<div>
  {{#if author}}
  <h1>{{firstName}} {{lastName}}</h1>
  {{/if}} {{#unless license}}
  <h1>WARNING: No license!</h1>
  {{/unless}}
</div>

Files Structure

REST API

koa.js

• Pre-processing

• Post-processing

Database

Types of Database

Relational

• Rows & columns

• Can have customizable & complicated constraints

• A bit rigid

• Tables can link / refer to each other

Non-relational

• Constraints are not implemented by default

• Doesn’t model data using tables & relations

• Document-Object Mapper

MongoDB

• A lot more flexible

Properties

• Logic for constraints, data integrity rules should go in application layer

Structure

• DBMS -> DB -> Collection -> Document -> key:value pairs

• Relational vs nonrelational DB

Query

• Empty query (document) {}: gets all if querying multiple docs / get the 1st one if querying one

Projection

• Include item, status

• Exclude _id, instock.qty (from embedded doc)

Query Selectors

Other: Bitwise, Geospatial, $rand

Shell Commands

Mongoose

Schema

Use

const mongoose = require("mongoose");
const URLSlugs = require("mongoose-url-slugs");
mongoose.model("Pizza", Pizza);
mongoose.model("Topping", Topping);
mongoose.connect("mongodb://localhost/pizzadb");

Query

User.findOne({ username }, (err, user) => {
  if (!err && user) {
    console.log(user);
  } else {
    console.log("USER NOT FOUND");
  }
});

• Model

• Embedded docs

• Connect

• Find

• Write

• Mongoose - Validation

Create Entry

new User({ username, email, password }).save((err, user) => {
  if (err) {
    console.log("DOCUMENT SAVE ERROR");
  } else {
    console.log("User saved successfully: ", user.username);
  }
});

DevOps

Docker

Misc

• Node, NPM, Git

• Export & import modules

• Router Objects

• URL Parameters

• Validation

Excluded Topics

• Scaffolding

• Route objects

• Passport