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
      • Installing & Exploring
      • Loading Modules
      • npm - Get Command Input
      • Web Server
        • Express Web Server
        • Template Engine & MVC
      • Authentication
      • 7. Databases
      • 8. Rest API
      • Errors
      • Sequelize
        • Sequelize Transactions: Đảm Bảo Tính Toàn Vẹn Dữ Liệu
        • 7 loại Data Types phổ biến Trong Sequelize
        • Phân Trang (Pagination) Trong Express.js Với Sequelize/MySQL
      • File Upload with Multer, Express.js
      • Hướng dẫn Cơ bản về Rest API
      • Server-Side Validation Với Express-Validator
      • Authentication Trong REST API Với JWT
      • Node-cron Simple to Complex Setup with PM2
      • HTMx Form: Gửi request, nhận response, và swap DOM
    • 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
    • Authentication

Vào học

The Modern JavaScript Bootcamp
<p><strong>Have you tried to learn JavaScript before?</strong></p> <p>JavaScript is the most popular programming language out there, but that doesn’t mean it’s easy to learn. You end up wasting time on out-of-date courses and incomplete YouTube tutorials that talk about a JavaScript features without showing how to use them when building real-world applications.</p> <p>Sound familiar?</p> <p><strong>I built this course to teach you how to build and launch your own JavaScript web applications. </strong></p> <p>The Modern JavaScript Bootcamp starts from scratch and builds up your knowledge of the JavaScript language. Yes, you’ll learn all the features of the language, but you’ll also learn how to use those features together to create a complete application.</p> <p>This comprehensive course covers the modern ES6 and ES7 JavaScript features used in the real world. You’ll gain an understanding of the latest cutting-edge language features. </p> <p>Getting experience writing code on your own is a big part of learning JavaScript. <strong>That’s why I’ve included over 80 challenges designed to get you writing code, adding app features, and solving a wide range of problems.</strong> These challenges will give you the skills and confidence needed to create your own web application.</p> <p>There are no starter projects here. You’ll see what it takes to launch a JavaScript application, from the first line of code to the final deployed application.</p> <p><strong>Who’s this course for?</strong></p> <p><strong>1. People who are brand new to JavaScript. </strong>You want to dive into the world of programming and learn JavaScript. This might be your first programming course, or maybe you’ve worked with other languages before. Either way, you’re ready for this bootcamp.</p> <p><strong>2. People who currently use JavaScript but want a better sense of mastery over the language. </strong>You picked up little tricks and snippets of code because you needed to solve a problem. Now you’re ready to master JavaScript as well as explore the latest from ES6 and ES7.</p> <p><strong>You’ll learn JavaScript by doing, not watching.</strong></p> <p>This course is not about watching videos, it’s about writing code. From the start, you’ll be building out each project from scratch as well as completing over 80 challenges designed to test and reinforce what you’ve learned.</p> <p>During the class, you’ll build three JavaScript applications:</p> <p>1. The first app, a note-taking app, is our starter application. You’ll learn the fundamentals of JavaScript and see exactly what it takes to build a program that allows users to add, edit, delete, and save their notes.</p> <p>2. The second app, a to-do application, you’ll be building on your own. This will test your skills and ensure that you have the real-world experience and problem-solving skills that are essential for writing JavaScript code.</p> <p>3. The last app, a hangman word game, is used to explore the world of asynchronous JavaScript. You’ll learn how to set up applications that rely on data from third-party services that can offer up dynamic, real-time information such as the user’s current location.</p> <p><strong>Stay current in an ever changing world.</strong></p> <p>The world of JavaScript is always changing, and that’s why I work to keep this course as up-to-date as possible. You can join knowing you’ll be learning the fundamentals of the language as well as the new language features that keep coming out.</p> <p>This course uses the latest language features from ES6 and ES7.</p> <p><strong>Everything you need comes in one easy-to-use package.</strong></p> <p>There’s no need to worry if you’re learning the right skills to land that JavaScript job or launch that JavaScript app. I’ve mapped out everything you need to know in an interactive, easy-to-follow package designed to get you up and running in a couple of weeks.</p> <p>By the end, you’ll be able to build and launch your own applications.</p> <p><strong>There’s no better time to learn JavaScript.</strong></p> <p>You’ve made a smart choice, because JavaScript is the most popular programming language out there. This is no exaggeration. This popularity and growth means more jobs and opportunities than ever before.</p> <p>JavaScript powers the web. That means every company out there uses JavaScript, and the demand for JavaScript developers is only increasing. Companies from Google and Apple to Udemy itself all use JavaScript extensively. </p> <p>JavaScript doesn’t stop with the web. It has quickly become a universal programming language capable of anything. JavaScript can be used to create desktop apps, server-side applications, native iOS/Android applications, and so much more. This course is your ticket into that ecosystem. </p> <p><strong>Get access to fast support if you get stuck.</strong></p> <p>There’s nothing worse than getting stuck ten hours into a course and not getting the help you need to continue. Getting stuck is part of the learning process. That’s why I’m here to answer every single question that comes my way.</p> <p>I’ll work with you to get you unstuck and back on track. It’s one of the reasons students love taking my courses. Don’t take my word for it. Check out the student reviews below.</p> <p><em>“This is the absolute best course I've taken on Udemy. Andrew is amazing at explaining things concisely, and the flow of the course is perfect. He doesn't skip over anything and he doesn't over-explain anything. On top of all that, he responds to questions so quickly that you won't be stuck at any point."</em> - Tanya Gamarian</p> <p><em>"The lessons are of high quality and even more important, he actually takes time to answer your questions!"</em> - Thomas Vercamer</p> <p>I guarantee that this is the most up-to-date and engaging JavaScript course available, and it comes with a Udemy 30-day money-back guarantee.</p> <p>I can’t wait to see you on the inside!</p> <p>- Andrew</p>
www.udemy.com

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 ··· in the right corner or using a keyboard shortcut (
CtrlP
) instead.