Skip to content
youhoc
  • Pages
    • Home
    • Modern App Guidelines
    • Linux
      • Day 1: Linux Distributions & Navigation
      • Day 2: User Management
      • Day 3: File Permission & Ownership
      • Day 4: Package Management
      • Day 5: Services Management
    • Javascript
      • JS The Weird Part
        • Execution Context
        • Types & Operators
        • Objects & Functions
        • Error Handling & Strict Mode
        • Typescript, ES6, Tra
      • icon picker
        Modern JS
        • JS in the Browser
        • Data Storage JSON
        • Modern JS
        • Advanced Objects & Methods
        • Webpack & Babel
        • Async
      • jQuery
        • In-depth Analysis of jQuery
      • React-ready JS
        • Arrow Function
        • Template Literals
        • Logical AND, OR, Ternary, Nullish Operators
        • Destructuring & Rest Operator
        • Array Method
        • Immutability and Spread Operator
        • Promises, Async/Await, Callback
    • PHP
      • gruntJS
      • composer
      • MySQL
    • Docker
      • Container Basics
      • Container Networking
      • Container Image
      • Container Volume & Persistent Data
      • Dockerfile
      • Docker Compose
      • Docker Registry
    • Node.js
      • 1. Installing & Exploring
      • 2. Core Modules
      • 3. Get User Input
      • File System & Input Arguments
      • 5. Express Web Server
      • 6. Deploy to Heroku & Github
      • Authentication
      • 7. Databases
      • 8. Rest API
    • ReactJS
      • React from Andrew
        • Summary from Next
        • 1. Basics
        • 2. React Components
        • 3. Webpack
        • 4. Styling with SCSS
        • 5. React Router
        • 6. React Hook
      • Modern React From The Beginning
        • Intro to JSX
        • Vite Build Tools
        • Basic Component Creation
        • Component State
        • Props & Component Composition
        • useState with Inputs & Form Submission
        • useEffect, useRef & Local Storage
        • Async / Await and Http Request in React
        • React Router: Declarative Mode
        • ContextAPI
        • React Router: Framework Mode
          • File-routing & HTML Layouts
          • Server-side Data Query
          • Links & Navigation
          • Loaders
    • Typescript
      • Type User vs UserProp
    • Payload CMS

Vào học

1. Installing & Exploring

Cài đặt tại website

Kiểm tra cài đặt

Chạy Terminal
Kiểm tra node version

Chọn thư mục thực thi

Kiểm tra thư mục hiện tại
Chuyển đến thư mục làm việc

Chạy file Node đầu tiên

Thực thi bằng cách gọi tên node trước file JS
Tạo hi.js:
Thực thi hi.js

2. Variables & Control Flow

Strings

Create a var

no dollar sign like PHP :)))
semicolon is optional (wow) - only when needed
no space between var
camelCase for var (like nghiNguyen)

Read a error

Screen Shot 2022-01-20 at 3.17.08 PM.png
Read the first line and the arrow

Combine strings

Numbers

We can perform maths

Update value for a var

You can’t declare a var more than once

A var MUST start with either (and can contain)...

a letter
a underscore _
a dollar sign $

A var CAN’T start with...

number (but can contain)
no symbol, special characters
no spacing

Booleen and Comparison

IF condition

Normal IF
Shorthand for simple IF

Comparison Operators

=== exactly match type and value
!== not equally matched
‘>’ or ‘>=’ more than
‘<’ or ‘<=’ less than

Logical Operators

AND
OR

Variable Scope

Lexical Scope
GLOBAL SCOPE - defined outside of all code blocks
var1
LOCAL SCOPE - defined inside a code block
var2
A var is accessible where it is created, or in any parent / ancestor scopes
Fix limited scope: Define global scope before manupulating it in local scopes
Shadowing Var
It’s legal to declare the same var for different scope
Var will take the closet value
Be careful to use LET to declare var
OTHERWISE, that var will be created in global scope,

Ôn tập từ Mimo

3. Functions

Define a function

Execute a function

States of a var / function


Error = no var defined
Undefined = var with no value
Undefined = function missing param
Null is an assigned value

Default value for params / arguments

Template Strings

The Rest Parameters

infinite param

The Spread Syntax

4. Objects

Defintion & Basics

Store all pieces of info in a var
A note object: title, body, user, date
A user object: name, email, phone

Create an object

Just like a JSON object ha...

Get object property

Change object property

Manipulate object value

Ý nghĩa của việc sử dụng object là thay đổi các giá trị bên trong của nó, ví dụ

Advanced Objects Methods

Functions as an object properties

this = the object that contains the method / function

Execute a function from inside an object

Default STRING objects and methods

A string var is an object, too. With following properties and methods...
Documentation for STRING object

Default NUMBER objects and methods

Documentation for NUMBER object
Documentation for MATH methods

Constant Variable

Biến - variable - let

If you want to RE-ASSIGN its value
For ex, get Saved Notes from a local storage or create a new one

Biến - variable - var

Tại sao?
Cách này đã cũ rồi.
Thứ 2, VAR SẼ CHẤP NHẬN NHỮNG TÊN BIẾN ĐÃ DECLARE, KHÔNG NHƯ LET.
Dễ bị trùng tên biến, trùng giá trị, sai giá trị.
Thứ 3, VAR KHÔNG CÓ SCOPE NHƯ LET BÊN TRONG CÁC CONDITION STATEMENT (NHU IF).
Các biến dễ bị expose, trùng lặp nếu sử dụng bên trong các hàm IF.
VAR VẪN CÓ SCOPE BÊN TRONG FUNCTION.
VAR KHÔNG CÓ THỨ TỰ.
DÙNG LET, CONST, KHÔNG DÙNG VAR

Hằng - constant - const

Thường dùng để define các thông số quan trọng, không thay đổi giá trị
Thường đặt làm các kết quả của các hàm (không bị ảnh hưởng bởi các hàm khác, thông số khác)

TUY NHIÊN, NẾU HẰNG LÀ MỘT OBJECT THÌ CÓ THỂ THAY ĐỔI CÁC PROPERTY VÀ METHOD BÊN TRONG.

5. Array

Create an Array

Just like PHP
Get array length
Documentation of ARRAY

Array Method

Ôn tập Array

Looping over Arrays

Go through a list of items and run code on it

The For Loop

Not necesarily use for an Array, but anything that needs looping

Search Array

In PHP we use in_array(search,array)
ONLY work with strings and numbers
But how do we search in objects?
use toLowerCase() to normalize all search terms

Filtering Arrays

For ex, todo that has completed.
Create a new array with conditions
Bài này hay. Xem lúc xỉn, nên cần xem lại.

Sorting Arrays

Documentation
Sort:
A-Z đối với Strings
Nhỏ đến lớn đối với số

Quan trọng nhất là [compareFunction] dùng cho objects
a < b
Jan < Mar
a < A
1 < 3

Ôn tập

Một số chức năng cơ bản của JS

Nhìn chung thì ông này nói cũng hay.
IMG_3180.jpeg
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.