Chuỗi mẫu Internalhtml

Question

Kể từ khi được phát hành vào ngày 4 tháng 12 năm 1995 (sáu tháng sau Java, được phát hành vào ngày 23 tháng 5 năm 1995), JavaScript đã trải qua nhiều thay đổi. JavaScript bắt đầu là ngôn ngữ lập trình phía máy khách (chạy bên trong trình duyệt web thông qua công cụ JavaScript tích hợp) để thêm nội dung tương tác vào trang web. Nó trở nên mạnh mẽ hơn với DHTML (1997) và Ajax (1999). với nút. js (phát hành vào ngày 27 tháng 5 năm 2009), JavaScript có thể được sử dụng để lập trình phía máy chủ và xây dựng các ứng dụng web đầy đủ, cũng như các tập lệnh tiện ích độc lập. Vào năm 2015, ECMAScript 6 (ES6 hoặc ES2015) giới thiệu bản cập nhật lớn cho ngôn ngữ, chẳng hạn như các lớp và mô-đun, đồng thời biến JavaScript thành ngôn ngữ lập trình đa năng có khả năng thực hiện các tác vụ phần mềm phức tạp

Nội dung chính Show

Giới thiệu
Testing Loop
Testing Loop
Testing Loop
Testing Loop
Testing Loop
Testing Loop
Testing Loop
Testing Loop
Testing Loop
Testing Loop
Ví dụ JavaScript phía máy khách
Example on event and user-defined function
Example on event and user-defined function
Example on event and user-defined function
Example on event and user-defined function
Example on event and user-defined function
Example on event and user-defined function
Example on event and user-defined function
Example on event and user-defined function
Example on event and user-defined function
Example on event and user-defined function
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Testing Loop
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Example on event and user-defined function
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Example on event and user-defined function
Example on event and user-defined function
Example on event and user-defined function
Example on event and user-defined function
Example on event and user-defined function
Hello world, again!
yếu tố, baphần tử với alert('hello, world') document.write('hello world, again') console.log('hello world, again and again')17 và ba phần tử JavaScript Example: User-defined function and onclick Event Handler Example on event and user-defined function
các phần tử trong một mảng alert('hello, world') document.write('hello world, again') console.log('hello world, again and again')25. Sau đó, chúng tôi sử dụng vòng lặp for để lặp qua tất cả các phần tử trong mảng. Thuộc tính alert('hello, world') document.write('hello world, again') console.log('hello world, again and again')26 giữ độ dài của mảng
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Example on event and user-defined function
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Example on event and user-defined function
Hello world, again!
Hello world, again!
Example on event and user-defined function
Hello world, again!
Hello world, again!
Hello world, again!
Example on event and user-defined function
Example on event and user-defined function
Example on event and user-defined function
Ví dụ JavaScript phía máy chủ
Cú pháp cơ bản JavaScript
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Example on event and user-defined function
Example on event and user-defined function
Example on event and user-defined function
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Testing Loop
Testing Loop
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Example on event and user-defined function
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Testing Loop
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Testing Loop
Testing Loop
Testing Loop
Testing Loop
Testing Loop
Testing Loop
Testing Loop
Testing Loop
Testing Loop
Testing Loop
Testing Loop
Testing Loop
Testing Loop
Testing Loop
Testing Loop
Testing Loop
Testing Loop
Testing Loop
Testing Loop
Testing Loop
Testing Loop
Testing Loop
Testing Loop
Testing Loop
Testing Loop
Testing Loop
Testing Loop
Testing Loop
Hello world, again!
Hello world, again!
Testing Loop
Hello world, again!
Hello world, again!
Testing Loop
Hello world, again!
Testing Loop
Testing Loop
Hello world, again!
Testing Loop
Testing Loop
Testing Loop
Example on event and user-defined function
Testing Loop
Testing Loop
Testing Loop
Testing Loop
Hello world, again!
Testing Loop
Hello world, again!
Hello world, again!
Hello world, again!
Testing Loop
Testing Loop
Testing Loop
Testing Loop
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Testing Loop
Testing Loop
Testing Loop
Hello world, again!
Hello world, again!
Hello world, again!
Testing Loop
Testing Loop
Hello world, again!
Testing Loop
Testing Loop
Testing Loop
Testing Loop
Testing Loop
Testing Loop
Hello world, again!
Hello world, again!
Các đối tượng
Hello world, again!
Testing Loop
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Built-in JavaScript Objects
Testing Loop
Hello world, again!
Testing Loop
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Testing Loop
Testing Loop
Hello world, again!
Testing Loop
Testing Loop
Testing Loop
Testing Loop
Example on event and user-defined function
Example on event and user-defined function
Testing Loop
Testing Loop
Testing Loop
Testing Loop
Testing Loop
Testing Loop
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Example on event and user-defined function
Example on event and user-defined function
Example on event and user-defined function
Example on event and user-defined function
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Example on event and user-defined function
Example on event and user-defined function
Example on event and user-defined function
Example on event and user-defined function
Example on event and user-defined function
Example on event and user-defined function
Hello world, again!
Hello world, again!
Example on event and user-defined function
Example on event and user-defined function
Hello world, again!
Example on event and user-defined function
Hello world, again!
Example on event and user-defined function
Example on event and user-defined function
Example on event and user-defined function
Hello world, again!
Example on event and user-defined function
Example on event and user-defined function
Example on event and user-defined function
More on Objects
Example on event and user-defined function
Example on event and user-defined function
Example on event and user-defined function
Example on event and user-defined function
Example on event and user-defined function
Example on event and user-defined function
Example on event and user-defined function
Example on event and user-defined function
Example on event and user-defined function
Example on event and user-defined function
Example on event and user-defined function
Example on event and user-defined function
Hello world, again!
Example on event and user-defined function
Example on event and user-defined function
Example on event and user-defined function
Example on event and user-defined function
Example on event and user-defined function
Example on event and user-defined function
Example on event and user-defined function
Example on event and user-defined function
Hello world, again!
Example on event and user-defined function
Example on event and user-defined function
Example on event and user-defined function
Example on event and user-defined function
Example on event and user-defined function
Example on event and user-defined function
Example on event and user-defined function
Example on event and user-defined function
Hello world, again!
Example on event and user-defined function
Hello world, again!
Example on event and user-defined function
Example on event and user-defined function
Example on event and user-defined function
Example on event and user-defined function
Example on event and user-defined function
Hello world, again!
Hello world, again!
Hello world, again!
Example on event and user-defined function
Hello world, again!
Example on event and user-defined function
Example on event and user-defined function
Hello world, again!
Example on event and user-defined function
Example on event and user-defined function
Example on event and user-defined function
Example on event and user-defined function
Example on event and user-defined function
Example on event and user-defined function
Hello world, again!
Example on event and user-defined function
Example on event and user-defined function
Example on event and user-defined function
Example on event and user-defined function
Example on event and user-defined function
Example on event and user-defined function
Example on event and user-defined function
Hello world, again!
Example on event and user-defined function
API mô hình đối tượng tài liệu (DOM) cho JavaScript
Example on event and user-defined function
Example on event and user-defined function
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Hello world, again!
Bạn có thể sử dụng chuỗi mẫu trong HTML không?
Có các chuỗi mẫu trong Java không?
Chuỗi mẫu ES6 là gì?
Làm cách nào để tạo một chuỗi HTML?

Giới thiệu

Nó bắt đầu dưới dạng Ngôn ngữ lập trình phía máy khách chạy bên trong trình duyệt web thông qua Công cụ JavaScript tích hợp

JavaScript là ngôn ngữ lập trình phía máy khách được sử dụng rộng rãi nhất cho phép bạn nâng cấp HTML của mình bằng tính tương tác, hoạt ảnh và hiệu ứng hình ảnh động để có Giao diện người dùng và Trải nghiệm người dùng (UI/UX) tốt hơn. Nó là

một ngôn ngữ kịch bản nhỏ, nhẹ, hướng đối tượng, đa nền tảng, có mục đích đặc biệt được chạy trong môi trường máy chủ (thường là trình duyệt web)
ngôn ngữ kịch bản phía máy khách để làm phong phú thêm giao diện người dùng web và tạo các trang web động (e. g. , vì. xác thực đầu vào và phản hồi ngay lập tức cho hành động của người dùng)
công cụ hỗ trợ AJAX (JavaScript và XML không đồng bộ - có thể được sử dụng để cập nhật một phần của trang web một cách không đồng bộ), tạo ra sự quan tâm mới đối với JavaScript

JavaScript hoạt động cùng với HTML/CSS. HTML cung cấp nội dung; . Cùng nhau, chúng làm phong phú UI/UX của người dùng web

JavaScript hiện có ở mọi nơi với Node. js

JavaScript đã phát triển vượt ra ngoài lập trình phía máy khách. Với sự ra đời của Node. js vào năm 2009 (môi trường thời gian chạy JavaScript đa nền tảng, mã nguồn mở), bạn có thể chạy JavaScript độc lập hoặc bên trong máy chủ (thay vì trình duyệt). Điều này cho phép bạn sử dụng một ngôn ngữ duy nhất cho cả lập trình phía máy chủ và phía máy khách

Lịch sử và Phiên bản

JavaScript, ban đầu được gọi là LiveScript, được tạo bởi Brendan Eich tại Netscape vào năm 1995. Ngay sau đó, Microsoft đã tung ra phiên bản JavaScript của riêng mình có tên là JScript. Sau đó, Netscape gửi nó lên ECMA (trước đây là "Hiệp hội các nhà sản xuất máy tính châu Âu", nay là "Ecma International - hiệp hội tiêu chuẩn hóa hệ thống thông tin và truyền thông châu Âu") để chuẩn hóa, cùng với JScript của Microsoft.

Đặc tả ECMA được gọi là "Đặc tả ngôn ngữ ECMA-262 ECMAScript" @ http. //www. ecma-quốc tế. org/ấn phẩm/tiêu chuẩn/Ecma-262. htm (cũng được phê duyệt là "ISO/IEC 16262")

ECMA-262 phiên bản 1 (tháng 6 năm 1997). Ấn bản đầu tiên
ECMA-262 phiên bản 2 (tháng 8 năm 1998)
ECMA-262 phiên bản 3 (12/1999). Đã thêm biểu thức chính quy, thử/bắt, chuyển đổi, do-while, v.v.
ECMA-262 phiên bản 4 - Bị bỏ rơi do sự khác biệt về chính trị. Vào năm 2007, TC-39 (ủy ban chịu trách nhiệm về ECMAScript) đã đưa ra một đặc điểm kỹ thuật dự thảo cho ECMAScript 4, có quy mô lớn và giới thiệu nhiều cú pháp và tính năng mới. Nhưng một nhóm các nhà phát triển từ Yahoo, Google và Microsoft cảm thấy như vậy là quá nhiều và đã tạo ra một đề xuất thay thế có tên là ECMAScript 3. 1. ECMAScript 4 chưa bao giờ được hoàn thiện
ECMA-262 phiên bản 5 và 5. 1 (tháng 6 năm 2011). ECMAScript 3. 1 cuối cùng đã được chuẩn hóa thành ECMAScript 5. Đã thêm "chế độ nghiêm ngặt", phương thức lặp JSON, Array, v.v.
ECMA-262 2015. phổ biến nhất được gọi là ECMAScript 6 hoặc ES6
Phiên bản này đã thêm cú pháp mới quan trọng để viết ứng dụng phức tạp, bao gồm khai báo lớp,
```
if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}
```
7 cho khai báo cục bộ,
```
if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}
```
8 cho khai báo hằng cục bộ, giá trị tham số mặc định, bộ lặp và cho. của các vòng lặp, trình tạo kiểu Python, biểu thức hàm mũi tên (_______0_______9), dữ liệu nhị phân, mảng đã nhập, bộ sưu tập mới (bản đồ, tập hợp và Bản đồ yếu), lời hứa, sự phản chiếu, proxy, chữ mẫu cho chuỗi, v.v.
ECMAScript 2016 (ES7). Kể từ ES6, các tiêu chuẩn ECMAScript sẽ có chu kỳ phát hành hàng năm vào tháng 6
Phiên bản này đã thêm toán tử hàm mũ (
```
  
  JavaScript Example: Loop


  Testing Loop
  
```
0), phạm vi khối của các biến và hàm, từ khóa
```
  
  JavaScript Example: Loop


  Testing Loop
  
```
1 và
```
  
  JavaScript Example: Loop


  Testing Loop
  
```
2 cho lập trình không đồng bộ, v.v.
ECMAScript 2017 (ES8). Đã thêm phần đệm chuỗi, các hàm không đồng bộ sử dụng trình tạo và lời hứa,
```
  
  JavaScript Example: Loop


  Testing Loop
  
```
3,
```
  
  JavaScript Example: Loop


  Testing Loop
  
```
4 để thao tác đối tượng dễ dàng, v.v.
ECMAScript 2018 (ES9). Đã thêm tham số phần còn lại (
```
  
  JavaScript Example: Loop


  Testing Loop
  
```
5), toán tử trải rộng, phép lặp không đồng bộ, bổ sung cho biểu thức chính quy

ECMAScript 2019 (ES10). Đã thêm





  
  JavaScript Example: Loop


  Testing Loop

6,





  
  JavaScript Example: Loop


  Testing Loop

7, thay đổi





  
  JavaScript Example: Loop


  Testing Loop

8 và





  
  JavaScript Example: Loop


  Testing Loop

9, ràng buộc bắt trở thành tùy chọn, v.v.

ECMAScript 2020 (ES11). giới thiệu một kiểu nguyên thủy

for ( initialization ; test ; post-processing ) {
   body ;
}

0 cho các số nguyên có kích thước tùy ý, toán tử kết hợp nullish (

for ( initialization ; test ; post-processing ) {
   body ;
}

1) và đối tượng

for ( initialization ; test ; post-processing ) {
   body ;
}

2

ECMAScript 2021 (ES12). Đã thêm tính năng nâng cao cho chuỗi (

for ( initialization ; test ; post-processing ) {
   body ;
}

3), lời hứa (

for ( initialization ; test ; post-processing ) {
   body ;
}

4) và tham chiếu đối tượng. Toán tử gán logic (

for ( initialization ; test ; post-processing ) {
   body ;
}

5,

for ( initialization ; test ; post-processing ) {
   body ;
}

6,

for ( initialization ; test ; post-processing ) {
   body ;
}

7,)

JavaScript so với. Java

Java là một ngôn ngữ lập trình đa năng chính thức. Nó được tạo ra bởi James Gosling tại Sun Microsystems (nay là một phần của Oracle) và phát hành vào tháng 8 năm 1995

JavaScript được tạo bởi Brendan Eich tại Netscape, cũng vào năm 1995. Ban đầu được gọi là LiveScript, nó là một ngôn ngữ chuyên dụng nhỏ và nhẹ để viết chương trình phía máy khách chạy bên trong trình duyệt để tạo giao diện người dùng hoạt động và tạo các trang web động. Nó được đổi tên thành JavaScript trong một quyết định tiếp thị tồi tệ nhằm cố gắng tận dụng sự phổ biến của ngôn ngữ Java, khi Netscape phát hành Navigator 2 vào năm 1996

Java và JavaScript là các ngôn ngữ hoàn toàn khác nhau cho các mục đích lập trình khác nhau. Tuy nhiên, trong những ngày đầu, một số nỗ lực đã được thực hiện để áp dụng cú pháp và quy ước của Java vào JavaScript, vì vậy JavaScript dường như là một tập hợp con của Java. Trên thực tế, chúng có rất ít điểm chung

JavaScript phía máy khách KHÔNG THỂ làm gì?

Hãy nhớ rằng JavaScript là chương trình phía máy khách mà bạn đã tải xuống từ máy chủ và chạy bên trong trình duyệt của máy (máy khách) của bạn. Làm gì để ngăn ai đó viết JavaScript xóa sạch đĩa cứng của bạn hoặc kích hoạt một cuộc tấn công từ chối dịch vụ tới một máy chủ khác?

Nó không thể đọc tệp từ máy của khách hàng
Nó chỉ có thể kết nối với máy chủ mà nó đến từ đó. Nó có thể đọc tệp từ máy chủ mà nó đến từ. Nó không thể ghi tập tin vào máy chủ
Nó không thể kết nối với máy chủ khác
Nó không thể đóng một cửa sổ mà nó không mở

jQuery

jQuery là một thư viện JavaScript đa trình duyệt phổ biến. jQuery là JavaScript (nhưng có cú pháp mở rộng riêng), do đó, bạn cần hiểu JavaScript. Tôi khuyên bạn nên đọc qua cú pháp JavaScript (và đặc biệt chú ý đến các đối tượng), sau đó chuyển sang jQuery để sản xuất. Đọc "Thông tin cơ bản về jQuery"

JavaScript độc lập và phía máy chủ với nút. Công cụ JavaScript js

[LÀM]

Trình chỉnh sửa mã nguồn JavaScript và IDE

Bạn cần một trình soạn thảo văn bản để viết JavaScript của mình. Bạn có thể sử dụng trình soạn thảo văn bản thuần túy như NotePad của Windows hoặc TextEdit của macOS (KHÔNG được khuyến nghị nghiêm ngặt vì chúng không thể tô sáng cú pháp). Để cải thiện năng suất của bạn, một trình chỉnh sửa mã nguồn tốt (cung cấp tính năng đánh dấu cú pháp, tự động hoàn tất mã, đoạn mã, tài liệu, điều hướng biểu tượng, tái cấu trúc, v.v. ) là điều cần thiết. Có rất nhiều phần mềm miễn phí/phần mềm chia sẻ, chẳng hạn như Visual Studio Code (VS Code), Sublime Text, Atom, Brackets, Komodo Edit, Emacs, Vim, BBEdit, TextMate, NotePad++ (Windows), v.v. Bạn cũng có thể sử dụng IDE quy mô đầy đủ như Eclipse, NetBeans, IntelliJ IDEA. Ngoài ra còn có nhiều trình soạn thảo và trình biên dịch "trực tuyến" (e. g. , Programiz, JSFiddle, Playcode), nhưng tôi nghĩ rằng bạn nên cài đặt của riêng mình

Ví dụ JavaScript phía máy khách

Tôi sẽ cho rằng bạn biết HTML và CSS (hãy đọc các bài viết về HTML/CSS của tôi nếu không). Tôi cũng sẽ giả định rằng bạn hiểu một số điều cơ bản về lập trình (tư duy tính toán) chẳng hạn như biến, cấu trúc if-else và vòng lặp for

JavaScript phía máy khách chạy bên trong trình duyệt thông qua công cụ JavaScript tích hợp. Có các tiêu chuẩn về JavaScript. Nhưng Big-5 (Chrome, Firefox, IE/Edge, Safari và Opera), đặc biệt là IE, không tuân thủ nghiêm ngặt tất cả các tiêu chuẩn. Hơn nữa, họ tạo tiện ích mở rộng của riêng mình. Do đó, hành vi của JavaScript có thể khác nhau trong các trình duyệt khác nhau. Bạn có thể cần kiểm tra JavaScript của mình trên nhiều trình duyệt

JavaScript cũng chạy độc lập (và trong máy chủ). Để chạy JavaScript độc lập, bạn cần cài đặt Node. js, một công cụ JavaScript. Tôi sẽ trình bày các ví dụ trong phần tiếp theo

JS phía máy khách EG 1. Hàm

for ( initialization ; test ; post-processing ) {
   body ;
}

8 và

for ( initialization ; test ; post-processing ) {
   body ;
}

9

Hãy để chúng tôi viết JavaScript phía máy khách đầu tiên của chúng tôi để in thông báo "Xin chào, thế giới"

Bắt đầu với một tệp mới và nhập các mã sau. Không nhập số dòng, được sử dụng để hỗ trợ giải thích. lưu ý rằng

JavaScript phân biệt chữ hoa chữ thường. Một





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

0 KHÔNG phải là một





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

1 và KHÔNG phải là một





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

2

Khoảng trắng "thêm" (khoảng trống, tab và dòng mới) bị bỏ qua. Nghĩa là, nhiều khoảng trắng được coi là một ký tự trống. Bạn có thể sử dụng chúng một cách tự do để làm cho chương trình của bạn dễ đọc hơn

Lưu tệp dưới dạng "





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

3" (hoặc bất kỳ tên tệp nào bạn thích, với phần mở rộng tệp là "





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

4" hoặc "





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

5"). Chạy tập lệnh bằng cách tải tệp HTML vào trình duyệt hỗ trợ JavaScript (e. g. , Một trong BIG FIVE - Chrome, Firefox, Internet Explorer/Edge, Safari hoặc Opera)





  
  JavaScript Example: Functions alert() and document.write()
  


  My first JavaScript says:

Làm thế nào nó hoạt động?

JavaScript là mã lập trình được nhúng bên trong tài liệu HTML. Các mã được chứa giữa một cặp thẻ





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

6, như sau. GHI CHÚ. Trong HTML4/XHTML, bạn cần thêm thuộc tính





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

7 vào phần tử





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

6. Dòng 7-9 và Dòng 13-17 là hai đoạn mã JavaScript, được đặt lần lượt trong phần





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

9 và





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

0

Các câu lệnh JavaScript được kết thúc bằng dấu chấm phẩy





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

1 (như Java/C/C++/C#)

Hàm





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

2 (Dòng 8) bật ra một hộp thoại hiển thị





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

3 và một nút OK. Các chuỗi được đặt trong cặp dấu nháy kép hoặc nháy đơn, e. g. ,





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

4 hoặc





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

5

Trang web hiện tại được đại diện bởi cái gọi là đối tượng





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

6 trong JavaScript. Thuộc tính





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

7 (Dòng 16) lưu trữ ngày sửa đổi cuối cùng của tài liệu hiện tại. Hàm





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

8 (Dòng 14 đến 16) có thể được sử dụng để ghi





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

3 đã chỉ định vào tài liệu hiện tại, như một phần của tài liệu HTML hiện tại

Toán tử

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

00 (Dòng 16) có thể được sử dụng để nối hai chuỗi (như Java)

Theo kết quả của

for ( initialization ; test ; post-processing ) {
   body ;
}

9, phần





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

0 của tài liệu này chứa.

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

2 và





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

8 là một số hàm tích hợp thường được sử dụng được cung cấp trong JavaScript

CỐ GẮNG. In tiêu đề của tài liệu và vị trí URL. (Gợi ý. sử dụng thuộc tính

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

05 và

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

06. )

Không bị bộ nhớ cache bắt - Thực hiện Control-Refresh (hoặc Control-F5)

Nếu bạn sửa đổi mã và tải lại trang web, mã mới có thể không được thực thi vì trình duyệt lưu phiên bản đã tải trước đó vào bộ đệm. Bạn có thể sử dụng Control-F5 (Control-Refresh) để yêu cầu trình duyệt loại bỏ bộ đệm và tìm nạp một trang mới

Không sử dụng

for ( initialization ; test ; post-processing ) {
   body ;
}

8

Bởi vì không ai thích nó

"Việc sử dụng cảnh báo thường không được khuyến khích để ủng hộ các phương pháp khác không chặn người dùng tương tác với trang - nhằm tạo trải nghiệm người dùng tốt hơn. Tuy nhiên, nó có thể hữu ích để gỡ lỗi. "

for ( initialization ; test ; post-processing ) {
   body ;
}

8 về mặt kỹ thuật là tài sản của đối tượng

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

09 và sẽ được gọi là

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

10. Nhưng vì

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

09 là một đối tượng toàn cục nên tất cả các biến của nó đều là biến toàn cục và có thể được tham chiếu mà không cần tên đối tượng

Công cụ gỡ lỗi và công cụ phát triển web F12 của trình duyệt

Trước khi chúng tôi chuyển sang ví dụ tiếp theo, bạn nên dùng thử Công cụ phát triển web, có sẵn trong hầu hết các trình duyệt để gỡ lỗi HTML/CSS/JavaScript/ứng dụng web

Khởi chạy trình duyệt của bạn và nhấn F12 để kích hoạt Công cụ phát triển web (Tôi đã thử trên Firefox, Chrome, Edge)
Chọn ngăn "Bảng điều khiển". Bạn có thể nhập các câu lệnh JavaScript trong bảng điều khiển. Ví dụ: nhập từng câu lệnh JavaScript sau và quan sát kết quả.
```
alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')
```

ghi chú.

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

12 ghi thông điệp vào bảng điều khiển, thường được sử dụng để gỡ lỗi (như

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

13 trong Java hoặc

My First JavaScript says

This document was last modified on mm/dd/yyyy hh:mm:ss.

16

Tập lệnh này nhắc người dùng nhập tên của họ, xác nhận tên và in thông báo chào mừng

Có ba loại hộp thoại bật lên để tương tác với người dùng

Hàm





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

2 đặt





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

3 trên hộp bật lên có nút OK. Người dùng cần nhấp vào nút OK để tiếp tục

Hàm

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

19 hiển thị hộp bật lên đầu vào với

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

20 với các nút OK và Hủy. Nó trả về đầu vào do người dùng nhập dưới dạng một chuỗi; . Tham số tùy chọn

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

22 chỉ định chuỗi ban đầu sẽ được hiển thị. Trong bài viết này mình sẽ chỉ ra các tham số chức năng tùy chọn có đuôi

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

This document was last modified on mm/dd/yyyy hh:mm:ss.

28. Hàm

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

15 tương tự như hàm

for ( initialization ; test ; post-processing ) {
   body ;
}

8, nhưng nó chấp nhận đầu vào của người dùng

Ở Dòng 10, hàm

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

24 hiển thị thông báo và trả về

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

26 hoặc

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

27, tùy thuộc vào việc người dùng nhấn nút OK hay Cancel

Nếu kết quả là

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

26, Dòng 11 in ra

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

39. Nếu không, Dòng 13 in ra _______44_______40

CỐ GẮNG. Thay vì in tin nhắn chúc mừng bằng cách sử dụng

for ( initialization ; test ; post-processing ) {
   body ;
}

9, hãy thực hiện điều đó thông qua một

for ( initialization ; test ; post-processing ) {
   body ;
}

8

JS phía máy khách EG 3. Đối tượng

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

43

Tập lệnh sau tạo một đối tượng

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

43 biểu thị ngày giờ hiện tại và in thời gian hiện tại





  
  JavaScript Example: The Date object

This document was last modified on mm/dd/yyyy hh:mm:ss.

45

"______44_______49" bắt đầu chú thích cuối dòng (Dòng 8 và 9). Nhận xét bị công cụ JavaScript bỏ qua nhưng quan trọng trong việc giải thích mã của bạn cho người khác (và cho chính bạn ba ngày sau)

50. Dòng 9 và 10, tương tự, xử lý phút và giây

Dòng 12 đến 14 sử dụng

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

56 để ghi vào tài liệu hiện tại.

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

57 (write-line) viết một dòng mới (

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

58) sau chuỗi đã cho. Hãy lưu ý rằng trình duyệt bỏ qua khoảng trắng thừa (dòng mới, khoảng trống, tab) trong tài liệu HTML;

Dòng 16-20 chứa câu lệnh if-then-else có điều kiện. Tùy thuộc vào giá trị của
```
My First JavaScript says
Hello world, again!
This document was last modified on mm/dd/yyyy hh:mm:ss.
```
50, một trong các thông báo sẽ được hiển thị

This document was last modified on mm/dd/yyyy hh:mm:ss.

65 trả về 0 đến 6 cho Chủ Nhật đến Thứ Bảy)

Sử dụng câu lệnh điều kiện để in ngày trong tuần trong word (i. e. , 0 cho Chủ Nhật, 1 cho Thứ Hai, v.v. ). (Gợi ý. Sử dụng cấu trúc

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

71 như sau. )

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

JS phía máy khách EG 4. vòng lặp

Tập lệnh sau nhắc người dùng về hệ số nhân và in bội số từ 1 đến 100 bằng vòng lặp for





  
  JavaScript Example: Loop


  Testing Loop

Làm thế nào nó hoạt động?

Dòng 11 nhắc người dùng nhập một số và gán nó cho biến

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

72

Dòng 12-14 chứa vòng lặp for. Một vòng lặp for có cú pháp sau.
```
for ( initialization ; test ; post-processing ) {
   body ;
}
```
Có bốn phần trong vòng lặp for. Ba trong số đó, khởi tạo, kiểm tra và xử lý hậu kỳ, được đặt trong ngoặc _______44_______73 và được phân tách bằng 2 dấu chấm phẩy. Phần thân chứa nhiệm vụ lặp đi lặp lại sẽ được thực hiện. Câu lệnh khởi tạo được thực thi đầu tiên. Bài kiểm tra sau đó được đánh giá. Nếu kiểm tra trả về true, phần thân được thực thi; . Thử nghiệm được đánh giá lại và quá trình lặp lại cho đến khi thử nghiệm trả về sai. Khi kiểm tra là sai, vòng lặp for hoàn thành và việc thực thi chương trình tiếp tục đến câu lệnh tiếp theo sau vòng lặp for. Lưu đồ sau đây minh họa quy trình vòng lặp for.
Trong ví dụ này, biến
```
My First JavaScript says
Hello world, again!
This document was last modified on mm/dd/yyyy hh:mm:ss.
```
74 được khởi tạo thành 1. Nếu
```
My First JavaScript says
Hello world, again!
This document was last modified on mm/dd/yyyy hh:mm:ss.
```
74 nhỏ hơn hoặc bằng 100, phần thân của vòng lặp sẽ thực thi, tiếp theo là câu lệnh xử lý hậu kỳ, làm tăng giá trị của
```
My First JavaScript says
Hello world, again!
This document was last modified on mm/dd/yyyy hh:mm:ss.
```
74 lên 1. Vòng lặp lặp lại cho đến khi giá trị của
```
My First JavaScript says
Hello world, again!
This document was last modified on mm/dd/yyyy hh:mm:ss.
```
74 KHÔNG nhỏ hơn hoặc bằng 100 (i. e. , nhiều hơn 100)

CỐ GẮNG

Sửa đổi tập lệnh trên để nhắc người dùng về số nhân cũng như số bội số được in (trong hai câu lệnh
```
My First JavaScript says
Hello world, again!
This document was last modified on mm/dd/yyyy hh:mm:ss.
```
15)

Sửa đổi tập lệnh trên để chỉ in các bội số là số lẻ. (Gợi ý. Toán tử modulo "

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

79" có thể được sử dụng để tính toán phần còn lại, e. g. ,

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

80 tính phần còn lại của

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

81 chia cho 2, kết quả là 0 hoặc 1. )

JS phía máy khách EG 5. Hàm do người dùng định nghĩa và Trình xử lý sự kiện

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

82

Bên cạnh các hàm có sẵn trong JavaScript như

for ( initialization ; test ; post-processing ) {
   body ;
}

8,

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

15,

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

85 và

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

57, bạn có thể xác định các hàm của riêng mình. Một hàm có tên và phần thân bao gồm một tập hợp các câu lệnh JavaScript cùng thực hiện một nhiệm vụ nhất định. Nó có thể lấy 0 hoặc nhiều đối số từ người gọi và trả lại 0 hoặc một giá trị cho người gọi





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

This document was last modified on mm/dd/yyyy hh:mm:ss.

90"

Dòng 15-16 tạo nút HTML. Nhấp vào nút sẽ kích hoạt trình xử lý sự kiện

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

82, tôi. e. ,

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

87 được xác định trước đó

CỐ GẮNG. Bao gồm một nút khác, mở ra "______44_______93"

JS phía máy khách EG 6. Thêm Trình xử lý sự kiện.

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

94,

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

95 và

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

96

JavaScript có thể được sử dụng để xử lý nhiều loại sự kiện, để phản hồi hành động của người dùng hoặc hành động của trình duyệt. Ví dụ,

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

94. kích hoạt sau khi trình duyệt tải trang

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

95 và

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

96. kích hoạt khi người dùng trỏ con trỏ chuột vào/ra khỏi phần tử HTML





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

Phân tích chương trình

Dòng 8 định nghĩa một biến

alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')

00, chứa các chuỗi sẽ được hiển thị trong trình xử lý sự kiện

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

94

Trong thẻ mở (Dòng 12), chúng tôi xác định trình xử lý sự kiện

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

94 cho sự kiện

alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')

03. Nó gọi

for ( initialization ; test ; post-processing ) {
   body ;
}

8 với thông báo được xác định trước đó

Dòng 13 và 14 xác định trình xử lý sự kiện
```
My First JavaScript says
Hello world, again!
This document was last modified on mm/dd/yyyy hh:mm:ss.
```
95 và
```
My First JavaScript says
Hello world, again!
This document was last modified on mm/dd/yyyy hh:mm:ss.
```
96 cho phần tử HTML
Màu của văn bản sẽ được thay đổi thành màu đỏ khi người dùng trỏ con trỏ chuột vào phần tử (bằng cách đặt thuộc tính kiểu CSS
```
alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')
```
07 thành màu đỏ) và trở lại màu ban đầu khi con trỏ chuột được di chuyển ra xa (bằng cách đặt lại kiểu CSS . Từ khóa đặc biệt
```
alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')
```
09 đề cập đến đối tượng này

JS phía máy khách EG 7. Tách HTML, CSS và JavaScript

Ví dụ trước hoạt động tốt. Bạn sẽ tìm thấy nhiều ví dụ như vậy trong sách giáo khoa, đặc biệt là sách giáo khoa cũ. Tuy nhiên, nó có một vấn đề lớn. Tất cả nội dung HTML, kiểu trình bày CSS và mã lập trình JavaScript được đặt trong một tệp duy nhất. Đối với một chương trình đồ chơi nhỏ, vấn đề không nghiêm trọng. Nhưng khi chương trình của bạn phát triển và nếu HTML, CSS và JavaScript được viết bởi những người khác nhau, bạn sẽ gặp thách thức thực sự trong việc duy trì chương trình. Hãy nhớ rằng HTML dành cho nội dung, CSS dành cho trình bày và JavaScript dành cho hành vi

Hãy viết lại ví dụ để đặt HTML, CSS và JavaScript vào ba tệp khác nhau

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

0

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

1

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

2

Làm thế nào nó hoạt động?

Đặt mã kịch bản bên trong trang HTML không phải là một thực hành kỹ thuật phần mềm tốt. Thay vào đó, cách tiếp cận được ưa thích hiện nay là đặt các tập lệnh, cũng như các kiểu CSS, trong các tệp bên ngoài, sau đó có thể áp dụng thống nhất cho tất cả các trang trong trang web của bạn

Hãy bắt đầu với tệp HTML. Bây giờ, tệp HTML chỉ giữ nội dung, không có kiểu trình bày và logic lập trình

Biểu định kiểu CSS được lưu trong một tệp bên ngoài, được tham chiếu qua thẻ





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

6 ở trên
Ghi chú. Trong HTML4/XHTML1. 0 bạn cần đưa thuộc tính

alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')

11 vào thẻ mở





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

6

Ngoài ra, mã lập trình JavaScript được giữ trong một tệp bên ngoài, cần được tham chiếu qua
```
  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function
  
```
6 ở trên, mặc dù không có nội dung
Ghi chú. Trong HTML4/XHTML1. 0, bạn cần bao gồm thuộc tính
```
  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function
  
```
7 trong
```
  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function
  
```
6
```
My First JavaScript says
Hello world, again!
This document was last modified on mm/dd/yyyy hh:mm:ss.
```
3
Làm thế nào nó hoạt động?
1. Tài liệu HTML này chứa một phần tử với một
```
alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')
```
  16 duy nhất, hai
  yếu tố, ba
  phần tử với
```
alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')
```
  17 và ba phần tử
```
  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function
  
```
  6 với phần tử duy nhất là
```
alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')
```
  19
2. Trong hàm do người dùng định nghĩa
```
alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')
```
  20, chúng tôi sử dụng
```
alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')
```
  21 để chọn phần tử, sau đó sửa đổi thuộc tính
```
alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')
```
  22 của nó
3. Trong hàm
```
alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')
```
  23, chúng tôi sử dụng
```
alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')
```
  24 để chọn tất cả
  các phần tử trong một mảng alert('hello, world') document.write('hello world, again') console.log('hello world, again and again')25. Sau đó, chúng tôi sử dụng vòng lặp for để lặp qua tất cả các phần tử trong mảng. Thuộc tính alert('hello, world') document.write('hello world, again') console.log('hello world, again and again')26 giữ độ dài của mảng
4. Trong hàm
```
alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')
```
  27, chúng tôi sử dụng
```
alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')
```
  28 để chọn tất cả
  yếu tố. Chúng tôi sử dụng vòng lặp
```
alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')
```
  29 của JavaScript để lặp qua tất cả các phần tử. Chúng tôi sử dụng biến
```
if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}
```
  8 an toàn nhất, vì vòng lặp
```
alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')
```
  29 tạo một biến phạm vi khối mới cho mỗi lần lặp;
5. Trang chứa ba nút để kích hoạt các chức năng được xác định
6. để thao tác các phần tử trong DOM bằng JavaScript, mã JavaScript phải được chạy sau khi phần tử liên quan đã được tạo trong tài liệu. Điều này có thể được thực hiện bằng cách đặt JavaScript ngay trước thẻ kết thúc
7. Tập lệnh chứa một hàm
```
alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')
```
  33, được chỉ định làm trình xử lý
```
My First JavaScript says
Hello world, again!
This document was last modified on mm/dd/yyyy hh:mm:ss.
```
  94 thông qua
```
alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')
```
  35. Tức là,
```
alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')
```
  33 sẽ được kích hoạt sau khi trang được tải. Hàm
```
alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')
```
  33 gán trình xử lý sự kiện
```
My First JavaScript says
Hello world, again!
This document was last modified on mm/dd/yyyy hh:mm:ss.
```
  82 cho các nút, được chọn thông qua
```
alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')
```
  39 bằng cách sử dụng các nút duy nhất '_________19
8. Thay vì thuộc tính
```
alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')
```
  22, các phiên bản JavaScript cũ hơn sử dụng
```
alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')
```
  42 (bao gồm cả văn bản và phần đánh dấu) để sửa đổi nội dung của phần tử được chọn. Theo MDN. "_______57_______22 nên được sử dụng thay thế. Do văn bản không được phân tích cú pháp dưới dạng HTML, nên văn bản có thể có hiệu suất tốt hơn. Hơn nữa, điều này tránh được vectơ tấn công XSS (Cross-Site Scripting). "
JS phía máy khách EG 9. Chặn một siêu liên kết
Ví dụ này sử dụng tập lệnh chặn siêu liên kết để đưa ra thông báo cảnh báo, sau đó tiếp tục truy cập liên kết
```
My First JavaScript says
Hello world, again!
This document was last modified on mm/dd/yyyy hh:mm:ss.
```
4
```
My First JavaScript says
Hello world, again!
This document was last modified on mm/dd/yyyy hh:mm:ss.
```
5
Làm thế nào nó hoạt động?
1. Trang HTML có một siêu liên kết
```
  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function
  
```
  6với một
```
alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')
```
  19 duy nhất
2. Hàm
```
alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')
```
  33 chỉ định trình xử lý
```
My First JavaScript says
Hello world, again!
This document was last modified on mm/dd/yyyy hh:mm:ss.
```
  82 cho siêu liên kết, được chọn qua
```
alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')
```
  39
3. Khi nhấp vào siêu liên kết, trình xử lý
```
My First JavaScript says
Hello world, again!
This document was last modified on mm/dd/yyyy hh:mm:ss.
```
  82
```
alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')
```
  50 được kích hoạt. Nếu
```
My First JavaScript says
Hello world, again!
This document was last modified on mm/dd/yyyy hh:mm:ss.
```
  16 trả về true, trang mới sẽ được tải;
Các ví dụ JavaScript nâng cao khác
Thêm "Ví dụ JavaScript nâng cao"
Gỡ lỗi JavaScript
Một trình gỡ lỗi đồ họa là PHẢI trong lập trình. Đặc biệt, lập trình bằng JavaScript yêu cầu một trình sửa lỗi tốt. Đó là bởi vì JavaScript được giải thích và không cần phải biên dịch. Do đó, không có trình biên dịch nào chỉ cho bạn các lỗi cú pháp. Một lỗi cú pháp đơn giản và tầm thường (e. g. , thiếu dấu ngoặc, viết sai chính tả) sẽ khiến toàn bộ tập lệnh không thể thực hiện được. Tệ nhất là bạn sẽ không thấy bất kỳ thông báo lỗi nào khi tập lệnh không hoạt động. Bạn có thể gỡ lỗi mà không có bất kỳ thông báo lỗi hoặc manh mối nào không?
Nếu không có gỡ lỗi đồ họa, cách duy nhất để gỡ lỗi JavaScript là chèn
```
for ( initialization ; test ; post-processing ) {
   body ;
}
```
8 vào các vị trí chiến lược để in ra dữ liệu đã chọn
Sau khi sửa đổi JavaScript, tôi khuyên bạn nên sử dụng Ctrl-F5 để làm mới trang, thao tác này sẽ tải một bản sao mới thay vì tải từ bộ đệm. Bạn có thể cần xóa bộ nhớ cache của trình duyệt hoặc khởi động lại trình duyệt nếu sửa đổi của bạn không có hiệu lực
Công cụ dành cho nhà phát triển web F12
Trong Chrome và Firefox, bạn có thể nhấn F12 để kích hoạt Công cụ dành cho nhà phát triển (do đó được gọi là Công cụ dành cho nhà phát triển F12)
Nó cung cấp các tính năng này
1. Bảng điều khiển. Xem thông báo lỗi JavaScript. Bắt đầu firebug và chuyển sang bảng điều khiển "Bảng điều khiển"
2. Script. Xem và gỡ lỗi JavaScript. Bắt đầu con bọ lửa. Chuyển sang bảng "Script". "Bật" hoặc "Tải lại" nếu cần. Bạn có thể đặt điểm dừng bằng cách nhấp vào số câu lệnh, thực hiện một bước qua các câu lệnh JavaScript, xem biểu thức, v.v.
3. DOM. Xem DOM HTML của tài liệu hiện tại
4. HTML và CSS
Để gỡ lỗi JavaScript
1. Khởi chạy Firebug ⇒ Chọn bảng "Tập lệnh" để xem JavaScript của bạn, được hiển thị bằng số dòng in đậm màu xanh lá cây
2. Làm mới (Ctrl-F5) trang và kiểm tra bảng điều khiển lỗi (Trong "Bảng điều khiển" ⇒ "Lỗi") để biết các lỗi cú pháp. Sửa tất cả các lỗi cú pháp
3. Để theo dõi chương trình, hãy đặt các điểm dừng tại các câu lệnh JavaScript đã chọn, bằng cách nhấp vào lề phải (ở bên trái của số dòng). Một vòng tròn màu đỏ xuất hiện biểu thị một điểm dừng. Lưu ý rằng bạn chỉ có thể đặt điểm dừng trên các câu lệnh có số dòng in đậm màu xanh lá cây. [Nếu các câu lệnh JavaScript của bạn không có số dòng in đậm màu xanh lá cây, thì có lỗi cú pháp trên các câu lệnh này. Bạn cần sửa lỗi cú pháp và tải lại trang. ]
4. Kích hoạt tập lệnh (thông qua nhấp vào nút/liên kết hoặc tải lại trang). Việc thực hiện dừng tại điểm dừng đầu tiên. Sau đó, bạn có thể chuyển qua câu lệnh (hoặc bước vào chức năng) và kiểm tra các biến bằng cách định vị con trỏ chuột trên biến;
5. Bạn có thể tiếp tục thực hiện (thông qua nút tiếp tục)
```
alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')
```
53
Thay vì sử dụng
```
for ( initialization ; test ; post-processing ) {
   body ;
}
```
8 và
```
for ( initialization ; test ; post-processing ) {
   body ;
}
```
9 để hiển thị kết quả trung gian, bạn cũng có thể sử dụng
```
alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')
```
56, viết
```
alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')
```
57 và giá trị của
```
alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')
```
58 vào bảng điều khiển lỗi. Nó không can thiệp vào sự xuất hiện của trang web cũng như hoạt động bình thường của bạn
Ví dụ: sửa đổi JavaScript trong Ví dụ 8 để in các giá trị của InternalHTML trước khi sửa đổi. Bạn cần bật bàn điều khiển (nhấn F12) để xem đầu ra
```
My First JavaScript says
Hello world, again!
This document was last modified on mm/dd/yyyy hh:mm:ss.
```
6
JavaScript và HTML
Như đã thấy từ các ví dụ trước, JavaScript được nhúng bên trong tài liệu HTML và được trình duyệt thực thi. Có hai trường hợp mà trình duyệt thực thi các lệnh JavaScript
1. JavaScript đính kèm trong
```
  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function
  
```
  6 chạy trong khi tải trang
2. Một số JavaScript, được gọi là trình xử lý sự kiện, chạy do hành động (hoặc sự kiện) của người dùng hoặc trình duyệt. Ví dụ: nhấp vào nút (
```
My First JavaScript says
Hello world, again!
This document was last modified on mm/dd/yyyy hh:mm:ss.
```
  82) hoặc tải trang (
```
My First JavaScript says
Hello world, again!
This document was last modified on mm/dd/yyyy hh:mm:ss.
```
  94)
Do đó, có hai nơi để đặt JavaScript của bạn
1. giữa các thẻ chứa
```
  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function
  
```
  6;
2. bên trong các thẻ HTML dưới dạng trình xử lý sự kiện (chẳng hạn như
```
My First JavaScript says
Hello world, again!
This document was last modified on mm/dd/yyyy hh:mm:ss.
```
  82,
```
My First JavaScript says
Hello world, again!
This document was last modified on mm/dd/yyyy hh:mm:ss.
```
  95,
```
My First JavaScript says
Hello world, again!
This document was last modified on mm/dd/yyyy hh:mm:ss.
```
  94), e. g. ,
```
alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')
```
  66
Phần tử
```
  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function
  
```
6 chứa các câu lệnh lập trình JavaScript. Ví dụ,
Trong HTML4/XHTML1. 0, bạn cần thêm thuộc tính
```
alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')
```
68 vào
```
  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function
  
```
6 là cần thiết mặc dù không có nội dung. ?
Trong HTML4/XHTML1. 0, bạn cần bao gồm
```
alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')
```
68 trong các thẻ
```
  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function
  
```
6 và chạy nó dưới trình duyệt web, bạn sẽ cần kích hoạt trình gỡ lỗi (Công cụ dành cho nhà phát triển web) để xem kết quả. Xem phần trên về các ví dụ phía máy khách

JS độc lập Ví dụ 2. [LÀM]

[TODO] Kiểm tra các Hạn chế như Tệp IO, Mạng, v.v. So sánh với Shell Script và Python script để tự động hóa

Ví dụ JavaScript phía máy chủ

Bạn cũng có thể sử dụng JavaScript để lập trình ứng dụng web phía máy chủ, giống như Java Servlet/JSP, Microsoft ASP, PHP, Python, v.v. Điểm hấp dẫn là bạn có thể sử dụng một ngôn ngữ duy nhất để lập trình cả phía máy khách và phía máy chủ trong ứng dụng web

Xem nút. bài viết js

Cú pháp cơ bản JavaScript

Bình luận

Comments are ignored by the JavaScript runtime but greatly useful in explaining your codes to others (and also to yourself three days later). You should use comments liberally to explain or document your codes

An end-of-line comment begins with

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')

alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')

Take note that

HTML comments are enclosed inside

CSS supports multi-line comment

alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')

75, but NOT end-of-line comment

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

49

JavaScript supports both

alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')

75 and

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

49, like Java/C/C++/C#

Whitespaces (blank, tab, newline)

Like C/C++/Java, JavaScript ignores additional whitespaces (blanks, tabs, and newlines). I strongly recommend that you use additional whitespaces to format your program to make your code easier to read and understand

Expressions

An expression is a combination of variables, literals, operators, and sub-expressions that can be evaluated to produce a single value

Statements, Semicolon and Blocks

A statement is a single programming instruction. Unlike C/C++/Java, where you need to end a statement with a semicolon (

alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')

Semicolons in JavaScript divide the community. Some prefer to use them always, no matter what. Others like to avoid them for brevity. I shall leave it to you

A block consists of zero or more statements enclosed in a pair of curly braces

alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')

Variables, Literals & Types

Variable declarations (

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

29,

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

7,

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

8) and Assignment Operator (

alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')

84)

A variable is a named storage location that holds a value. Prior to ES6, you can only use

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

You should try

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

You can assign (and re-assign) a value to a variable using the assignment (

alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')

Identifiers

Identifiers are names given to identify entities (such as variables and functions). The rules for valid identifiers are

An identifier can contain letters (

alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')

92,

alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')

93), digits (

alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')

94), underscore (

alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')

95) and dollar sign (

alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')

96). But it cannot begin with a digit (

alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')

94)

Identifiers are case-sensitive. A





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

0 is NOT a





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

2, and is NOT a





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

1

Identifiers cannot be keywords

Hãy lưu ý rằng KHÔNG được phép có dấu gạch ngang (





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

01) và khoảng trắng. Hence,





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

02,





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

03, are NOT valid identifiers. You should use underscore (

alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')

95) instead of hyphen (





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

01)

Literals

A literal is a fixed value, e. g. ,





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

Types

JavaScript is object-oriented. But, It supports both primitive types and objects

Primitives are not objects and do not possess properties and methods. JavaScript supports these primitive types

string. a sequence of characters. Strings literals are enclosed in a pair of single quotes or double quotes (e. g. ,





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

08,





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

13)

number. takes both integer (e. g. ,





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

06) or floating-point (e. g. ,





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

15)

boolean. takes boolean literal of either

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

26 or

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

27 (in lowercase)

undefined. takes a special literal value called





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

18. Take note that





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

18 is both a type and a literal value

symbol (ES6). A data type whose instances are unique and immutable
bigint (ES2020/ES11). integers with arbitrary precision

JavaScript also supports these object types and value (we shall discuss object later)

object. for general objects
function. for function objects. Unlike Java, function is a first class object in JavaScript, e. g. , you can assign a function to a variable

null. A special literal value for unallocated (unconstructed)





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

20. Take note that

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

21 is NOT





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

22. The





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

23 is





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

20.

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

21 is meant to represent an absence of a constructed object.

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

21 is actually considered to be a primitive as it has no properties and methods

Unlike most of the general programming languages (such as Java/C/C++/C#) which are strongly type, JavaScript is loosely type (similar to most of the scripting languages such as UNIX Shell Script, Perl, Python). You do not have to explicitly declare the type of a variable (such as





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

Operator





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

31

You can use the operator





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

Ví dụ,

The





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

18 Type and





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

18 Literal Value

An undeclared variable (via

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

Khi một biến được khai báo (thông qua từ khóa

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

Ví dụ như,

(ES6) Hằng số

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

8-khai báo

Bạn có thể tạo một hằng số chỉ đọc, được đặt tên với từ khóa

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

The

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

74 Type, Literals & Operations

A variable of type

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

Integer literals can be expressed in

Decimal. begins with a digit





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

47 to





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

48 (not





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

49), e. g. ,





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

50 or





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

51,

Octal. begins with a digit





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

49, e. g. ,





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

53 or





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

54,

Hexadecimal. begins with





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

55 (or





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

56), e. g. ,





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

57 or





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

58

Binary. begins with





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

59 (or





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

60), e. g. ,





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

61 or





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

62. [Binary may not be supported in some browsers. ]

Floating-point literals can be expressed in the usual form (e. g. ,





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

JavaScript also provides some special

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

infinity. e. g. ,





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

67

-infinity. e. g. ,





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

68

NaN (Not-a-Number). e. g. ,





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

69, or converting the string





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

70 to a number

Arithmetic Operations

Arithmetic operations, as tabulated below, can be applied to numbers. The following results are obtained assuming that





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

In JavaScript, arithmetic operations are always performed in double-precision floating-points (NOT integers). That is,





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

Exponent Operator (





  
  JavaScript Example: Loop


  Testing Loop

0)

ECMAScript 2016 (ES7) introduces exponent operator (





  
  JavaScript Example: Loop


  Testing Loop





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

Before ES7, you have to use built-in function





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

Arithmetic cum Assignment Operators

These are short-hand operators to combine two operations

Some frequently-used





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

89 built-in Functions

parseInt(str), parseFloat(str). Parse the





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

3 until the first non-digit, and return the number; or





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

91

Math. round(num), Math. floor(num), Math. ceil(num)
Math. random(). Generate a random number between 0 (inclusive) and 1 (exclusive)

isNaN(str). return true if the





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

3 is not a number. For example, It is interesting to note that JavaScript does not have counterpart functions like





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

93,





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

94

Number(str). Return the number represented by

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

25, or





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

91. Take that that this function name begins with uppercase, because this is a type casting operation

toFixed(decimalPlaces). Return this number/string to the given number of decimal places. For example,

The





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

30 Type, Literals & Operations

A





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!





  
  JavaScript Example: The Date object





  
  JavaScript Example: The Date object

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.





  
  JavaScript Example: The Date object





  
  JavaScript Example: The Date object





  
  JavaScript Example: The Date object





  
  JavaScript Example: The Date object





  
  JavaScript Example: The Date object

Không giống như Java/C/C++, nhưng giống như các thuộc tính của HTML/CSS, bạn có thể sử dụng dấu ngoặc đơn hoặc dấu ngoặc kép cho





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!





  
  JavaScript Example: The Date object





  
  JavaScript Example: The Date object





  
  JavaScript Example: The Date object

JavaScript is dynamically-type, and performs type conversion automatically. When a





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

This document was last modified on mm/dd/yyyy hh:mm:ss.





  
  JavaScript Example: The Date object





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

Converting a numeric





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

30 to

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

74.





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

77,





  
  JavaScript Example: The Date object

29 and





  
  JavaScript Example: The Date object

30

To convert a numeric





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!





  
  JavaScript Example: The Date object

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

Take note that





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

You can also use the function





  
  JavaScript Example: The Date object





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

Constructing/Converting to





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

30.





  
  JavaScript Example: The Date object

42 and





  
  JavaScript Example: The Date object

43

You can construct a





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!





  
  JavaScript Example: The Date object

You can use





  
  JavaScript Example: The Date object





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

You can also convert a number to string by concatenating with an empty string, e. g. ,

String's Properties

length. E. g. ,





  
  JavaScript Example: The Date object

48 returns the length of the string

String's Operations

toUpperCase(). returns the uppercase string
toLowerCase(). returns the lowercase string
charAt(idx). returns the character at the
```
  
  JavaScript Example: The Date object
  
```
49 position. Index begins from 0. Negative index can be used, which counts from the end of the string

substring(beginIdx, endIdx). returns the substring from





  
  JavaScript Example: The Date object

50 (inclusive) to





  
  JavaScript Example: The Date object

51 (exclusive)

substr(beginIdx, length). returns the substring from





  
  JavaScript Example: The Date object

50 of





  
  JavaScript Example: The Date object

53

indexOf(searchStr, fromIdx?). Return the beginning index of the first occurrence of





  
  JavaScript Example: The Date object

54, starting from an optional





  
  JavaScript Example: The Date object

55 (default of 0); or





  
  JavaScript Example: The Date object

56 if not found

lastIndexOf(searchStr, fromIdx?). Return the beginning index of the last occurrence of





  
  JavaScript Example: The Date object

54





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

6, starting from an optional





  
  JavaScript Example: The Date object

55 (default of





  
  JavaScript Example: The Date object

60); or





  
  JavaScript Example: The Date object

56 if not found

lát cắt (bắt đầuIdx, endIdx). Return the substring from





  
  JavaScript Example: The Date object

62 (inclusive) to





  
  JavaScript Example: The Date object

63 (exclusive)

repeat(count) (ES6). repeat the string
chia (dấu phân cách), mảng. join(delimiter). returns an array by splitting the string using
```
  
  JavaScript Example: The Date object
  
```
64, e. g. ,
Searching/Modifying Strings using Regular Expression. See ""

Character Type?

JavaScript does not have a dedicated character type, but treats it as a one-character single. To get an individual character from a string, you can use

charAt(idx). For example,
Array Bracket Operator []. You can treat a string as a character array, and access individual character via array bracket operator
```
  
  JavaScript Example: The Date object
  
```
65, e. g. ,

(ES6) Multi-line Back-Quoted Template String and Substitution

Prior to ES6, You can enclosed a string literal using either single or double quotes (e. g. ,





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!





  
  JavaScript Example: The Date object





  
  JavaScript Example: The Date object

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.





  
  JavaScript Example: The Date object





  
  JavaScript Example: The Date object





  
  JavaScript Example: The Date object





  
  JavaScript Example: The Date object

ES6 introduces template string, delimited by back-quotes, for example,

There is no need to escape single or double quote inside a template string (because there is no conflicts). But you need to use escape sequence for back-quote, i. e. ,





  
  JavaScript Example: The Date object

Template strings support multi-line strings. All whitespaces (blank, tab, newline) within the back-quotes are part of the multi-line string. For example,

Substitution





  
  JavaScript Example: The Date object

76

Template strings support substitution, which allow you to embed any valid JavaScript expression as part of the string in the form of





  
  JavaScript Example: The Date object

Multi-line template string with substitution provides a more convenient way to write out formatted HTML fragment. For example,

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.





  
  JavaScript Example: The Date object

78 Loại, Nghĩa đen & Hoạt động

Một biến kiểu





  
  JavaScript Example: The Date object

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

Như đã đề cập, JavaScript thực hiện chuyển đổi kiểu tự động nếu cần thiết. Trong quá trình chuyển đổi loại, 6 giá trị sau được chuyển đổi thành

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

số





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

49

số





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

91 (Không phải là số),

chuỗi rỗng (





  
  JavaScript Example: The Date object

13,





  
  JavaScript Example: The Date object

88),

Giá trị





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

18,

boolean

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

27,

Đối tượng

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

21 (chưa phân bổ)

Tất cả các giá trị khác được chuyển đổi thành

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

Bạn cần ghi nhớ điều này.





  
  JavaScript Example: The Date object

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.





  
  JavaScript Example: The Date object





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!





  
  JavaScript Example: The Date object





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

Toán tử so sánh (quan hệ)

Các toán tử quan hệ sau, tạo ra kết quả





  
  JavaScript Example: The Date object

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')

alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')

alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

07 so với.

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

08

Toán tử đẳng thức hoàn toàn (

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

07) trả về

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

26 nếu cả hai toán hạng có cùng loại và cùng giá trị; . e. , == chuyển đổi toán hạng của nó nếu kiểu toán hạng không khớp

JavaScript cần cung cấp hai toán tử đẳng thức khác nhau, vì nó là kiểu lỏng lẻo và thực hiện chuyển đổi kiểu tự động trong nhiều tình huống. Ví dụ,

Khi một số được so sánh với một chuỗi, chuỗi đó được chuyển đổi thành một số (hoặc





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

91 nếu nó không chứa một số hợp lệ). Do đó,

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

14 trả về

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

26. Nhưng,

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

16 trả về

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

27, vì các toán hạng không cùng kiểu

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

07,

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

19,

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

08,

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

21 có thể được áp dụng cho boolean (và tất cả các loại JavaScript), e. g. ,

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

22 mang lại cho

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

26 (vì chuỗi rỗng được chuyển đổi thành

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

27);

KHUYẾN NGHỊ sử dụng

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

07 (hoặc

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

19), thay vì

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

08 (hoặc

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

21), trừ khi bạn chắc chắn rằng loại đó không quan trọng

Thứ tự sắp xếp (đối chiếu) chuỗi

Khi so sánh hai chuỗi, thứ tự mã hóa (bảng ASCII/Unicode) được sử dụng. Do đó, chuỗi

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

31 lớn hơn chuỗi

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

32

Ví dụ,

Để so sánh hai chuỗi theo thứ tự bảng chữ cái, hãy sử dụng

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

33, e. g. , [LÀM]

Toán tử logic (Boolean)

Các toán tử boolean (hoặc logic) sau đây được cung cấp trong JavaScript

Toán tửMô tảVí dụKết quả&&Logical AND. logic HOẶC. Logic NOT&&=Logical AND kiêm gán (ES12). =Logical OR kiêm nhiệm vụ (ES12)

ghi chú.

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

34 trong JavaScript là toán tử XOR bitwise, không thực sự là XOR boolean (hiếm khi cần thiết)

Đánh giá ngắn mạch cho các biểu thức Boolean

Đánh giá các hoạt động logic luôn bị ngắn mạch. Nghĩa là, hoạt động kết thúc ngay khi kết quả là chắc chắn, e. g. , (

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

35) bị đoản mạch để cung cấp cho

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

27, (

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

37) cho

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

26,





  
  JavaScript Example: Loop


  Testing Loop

5 sẽ không được đánh giá

Chuyển đổi loại rõ ràng

Thời gian chạy JavaScript tự động thực hiện chuyển đổi loại. Tuy nhiên, đôi khi, bạn có thể cần chuyển đổi từ loại này sang loại khác một cách rõ ràng

Chuyển đổi một

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

74 thành một





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

30. Đơn giản chỉ cần nối

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

74 với một

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

43 trống, e. g. ,

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

44 mang lại cho

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

45

Chuyển đổi một





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

30 thành một

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

74. Sử dụng các hàm tích hợp sẵn

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

48,

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

49 hoặc

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

50 để chuyển đổi một





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

3 chứa một giá trị

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

74. Ví dụ:

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

53 cho





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

80,





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

78 cho





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

80,





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

79 cho





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

80,

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

59 cho

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

60,

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

61 cho





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

80, nhưng

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

63 cho





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

91

Chuyển đổi số float thành số nguyên. Use





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

77 (e. g. ,





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

78 cho ______74_______80) hoặc các hàm toán học tích hợp sẵn chẳng hạn như ______74_______81, _





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

83 hoặc





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

82

Kiểm soát luồng - Quyết định (Có điều kiện)

JavaScript cung cấp các cấu trúc điều khiển luồng này. Cú pháp giống như Java/C/C++

SyntaxExample

alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')

3

alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')

4

alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')

5

alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')

6

alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')

7

ghi chú. JavaScript, giống như C/Java, không hỗ trợ

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

71 gốc, mà hỗ trợ

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

72 lồng nhau

[ES12] Toán tử gán nullish logic (

for ( initialization ; test ; post-processing ) {
   body ;
}

5)

Hàm gán nullish logic

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

74 chỉ gán nếu x là

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

21 (đối tượng chưa được phân bổ) hoặc





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

18 (biến chưa được khởi tạo) i. e. , vô hiệu. Ví dụ,

Kiểm soát luồng - Vòng lặp (Lặp lại)

JavaScript cung cấp các cấu trúc vòng lặp sau. Cú pháp giống như Java/C/C++

JavaScript cũng giới thiệu các vòng lặp

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

77 và

alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')

29 (sẽ được thảo luận sau)

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

79,

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

80 và Nhãn tuyên bố

Các câu lệnh điều khiển vòng lặp sau đây được cung cấp (cùng cú pháp với Java/C/C++)

nghỉ. thoát khỏi vòng lặp trong cùng
tiếp tục. hủy bỏ lần lặp hiện tại và tiếp tục với lần lặp tiếp theo

label. provides an identifier for a statement, which can be used by

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

81 and

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

82

Try to avoid these statements, as they are hard to trace and maintain

Arrays

An array is an indexed collection. An array can be used to store a list of items (elements) under a single name with an running integer index. You can reference individual element via the integral index in the form of

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

83. Furthermore, you can conveniently process all the elements of an array collectively via a loop with a varying index

Creating an Array via "Array Initializer

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

84"

You can create an array by assigning an array literal to a variable, known as Array Initializer, in the form of

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

84. For examples,

Take note that JavaScript's array literal is enclosed in square bracket

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

86, instead of

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

87 in Java/C/C++. JavaScript uses

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

87 for object literal (to be discussed later)

You can also use an Array Initializer to create an array with missing indexes. For example,

Accessing an Item

You can access individual element of an array via an integral index, in the form of

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

83. The index of the array begins at 0, and shall be a non-negative integer

Array's Property

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

90

The length of the array is maintained in a variable (property) called

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

90, which can be accessed via

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

92. In fact, the property

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

93 returns the last integral index plus 1, as JavaScript's array index is 0-based. Nonetheless, you are allow to manipulate (write) the

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

93. For example,

Dynamic Arrays

Unlike Java/C/C++, the JavaScript array is dynamically allocated. You can add more elements to an array. You can also remove the content of an element using keyword

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

95. For examples,

Accessing All Items using for-loop with index

Array is usually processed collectively using a loop, e. g. ,

The JavaScript's

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

77 loop

JavaScript provides a special

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

97 loop to process all the elements in an array. The syntax is as follows, where

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

98 takes on the each of the index number of element which are not





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

18

alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')

8

Ví dụ,

The JavaScript's

alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')

29 loop

JavaScript provides a special





  
  JavaScript Example: Loop


  Testing Loop

01 loop to process all the elements in an array. The syntax is as follows, where





  
  JavaScript Example: Loop


  Testing Loop

02 takes on the each of the element including the





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

18

alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')

9

Add/Remove item(s)

You can

Use index





  
  JavaScript Example: Loop


  Testing Loop

04 to add one item to the end of an array

Use

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

95 to remove a particular index (set it to





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

18)

Use





  
  JavaScript Example: Loop


  Testing Loop

07 to add one or more items to the end of an array.





  
  JavaScript Example: Loop


  Testing Loop

08 trả về độ dài kết quả của mảng

Use





  
  JavaScript Example: Loop


  Testing Loop

09 to add one or more items to the beginning of an array.





  
  JavaScript Example: Loop


  Testing Loop

10 returns the resultant length of the array

Use





  
  JavaScript Example: Loop


  Testing Loop

11 to remove and return the last item of an array

Use





  
  JavaScript Example: Loop


  Testing Loop

12 to remove and return the first item of an array

Ví dụ như,

PurposeExampleAdd one item to the end of an array using index





  
  JavaScript Example: Loop


  Testing Loop

13Add one or items to the end of an array using





  
  JavaScript Example: Loop


  Testing Loop

07





  
  JavaScript Example: Loop


  Testing Loop

08 returns the resultant length of the array. Add one or items to the beginning of an array using





  
  JavaScript Example: Loop


  Testing Loop

09





  
  JavaScript Example: Loop


  Testing Loop

10 returns the resultant length of the array. Remove and return the last item from an array using





  
  JavaScript Example: Loop


  Testing Loop

11Remove and return the first item of an array using





  
  JavaScript Example: Loop


  Testing Loop

12

Thuộc tính của mảng (Biến) và Hoạt động (Hàm)

Đối tượng





  
  JavaScript Example: Loop


  Testing Loop

20 có các thuộc tính thường được sử dụng này

chiều dài. số lượng mặt hàng bao gồm





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

18 mặt hàng. Trên thực tế,

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

93 được đặt thành chỉ số cuối cùng cộng với 1

It has these commonly-used methods

array. join([separator]). join the elements of an array together into a single string, separated by the





  
  JavaScript Example: Loop


  Testing Loop

23 (defaulted to





  
  JavaScript Example: Loop


  Testing Loop

24). For example,

str. split([separator, limit]). Reverse of





  
  JavaScript Example: Loop


  Testing Loop

25. Take a string and split into an array based on the





  
  JavaScript Example: Loop


  Testing Loop

26. For example,

array. concat(value1, value2, . , valueN). returns a new array composing of this array and the given arrays or values. For example,

array. reverse(). reverses the order of elements in the array, the first becomes last. For example,





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

0

array. sort(). sorts the elements in the array. For example, Take note take, by default, number are also sorted based on ASCII/Unicode order. To sort numbers numerically, you can supply a callback comparison function. The function shall take 2 arguments, say





  
  JavaScript Example: Loop


  Testing Loop

27 and





  
  JavaScript Example: Loop


  Testing Loop

28, and return a negative number if





  
  JavaScript Example: Loop


  Testing Loop

29; a positive number if





  
  JavaScript Example: Loop


  Testing Loop

30; and 0 if





  
  JavaScript Example: Loop


  Testing Loop

31

array. slice(beginIdx, endIdx). extracts and returns a section of an array from





  
  JavaScript Example: The Date object

62 (inclusive) to





  
  JavaScript Example: The Date object

63 (exclusive). For example,

mảng. splice(startIdx, countToRemove, insertItem1, insertItem2, . ). removes elements from an array, and insert elements at its place. For example,
array. indexOf(searchItem[, startIdx]) and array. lastIndexOf(searchItem[, startIdx]). search for the index of the item forward or backward. It returns -1 if item cannot be found. For example,
push(). adds one or more elements to the end of an array and returns the resultant length of the array
pop(). removes and return the last element from an array
shift(). removes and returns the first element from an array
unshift(). adds one or more elements to the front of an array and returns the resultant length of the array

Functional Programming in Filter-Map-Reduce pattern

Arrays also support these iterative methods that iterate through each item of the array, to support functional programming of filter-map-reduce pattern

array. forEach(callback). takes a function with an argument which iterates through all the items in the array. NOTE. This syntax is meant to support functional programming of filter-map-reduce pattern
array. map(callback). return a new array, which contains all the return value from executing
```
  
  JavaScript Example: Loop


  Testing Loop
  
```
34 on each item. For example,

filter(callback). return a new array, containing the items for which





  
  JavaScript Example: Loop


  Testing Loop

34 returned

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

26. For example,

array. every(callback). return

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

26 if





  
  JavaScript Example: Loop


  Testing Loop

34 returns

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

26 for ALL items

array. some(callback). return

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

26 if





  
  JavaScript Example: Loop


  Testing Loop

34 returns

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

26 for at least one item in the array

For detailed specification and examples about a built-in object, check "Core JavaScript References"

Associative Arrays of Key-Value Pairs

An associative array is an array of key-value pair. Instead of using numbers 0, 1, 2,. as keys as in the regular array, you can use anything as key in an associative array. Associative arrays are used extensively in JavaScript and jQuery

JavaScript does not support native associative array (it actually does not support native array too). In JavaScript, associative arrays (and arrays) are implemented as objects (to be elaborate later)

You can create an associative array via the Object Initializer. For example,

Take note that Array initializer uses square brackets





  
  JavaScript Example: Loop


  Testing Loop

43; while object initializer (for associative array) uses curly brackets





  
  JavaScript Example: Loop


  Testing Loop

44

Chức năng

Functions are useful

when you have to use the same codes several times
as the JavaScript event handler
make your program easier to read and understood

A function accepts zero or more arguments from the caller, performs the operations defined in the body, and returns zero or a single result to the caller

Functions are objects in JavaScript (to be discussed later)

The syntax for user-defined function is





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

1

Functions are declared using the keyword

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

88. Unlike Java/C/C++, you do not have to specify the return-type and the types of the arguments because JavaScript is loosely typed. You can use a





  
  JavaScript Example: Loop


  Testing Loop

46 statement to return a single piece of result to the caller anywhere inside the function body. If no





  
  JavaScript Example: Loop


  Testing Loop

46 statement is used (or a





  
  JavaScript Example: Loop


  Testing Loop

46 with no value), JavaScript returns





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

18

For client-side JavaScript, functions are generally defined in the





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

9 section, so that it is always loaded before being invoked

To invoke a function





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

2

Client-Side JavaScript Function Examples





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

3

Function's





  
  JavaScript Example: Loop


  Testing Loop

51

Function has access to an additional built-in variable called





  
  JavaScript Example: Loop


  Testing Loop

51 inside its body, which is an array containing all the arguments. For example,

Pass by Value vs. Pass by Reference

In JavaScript, primitive arguments are passed by value. That is, a copy of the variable is made and passed into the function. On the other hand, objects (including array and associative array) are passed by references. That is, if you modify the content of an object inside the function, the "copy" outside the function is also affected

Các đối số chức năng mặc định

JavaScript cho phép bạn gọi một hàm bỏ qua một số đối số ở cuối. Nó đặt các đối số bị bỏ qua thành giá trị





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

18. For example,

You can use this feature to provide default value to function argument, for example,

In the above example, we allow caller to omit the trailing arguments (





  
  JavaScript Example: Loop


  Testing Loop

54,





  
  JavaScript Example: Loop


  Testing Loop

55) or pass a

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

21 value (which is a special literal for unallocated object)

The common idiom in practice today is to use the short-circuited OR expression (as in





  
  JavaScript Example: Loop


  Testing Loop

55) to provide default value if no value (





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

18 or

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

21) is passed, provided the valid inputs cannot be

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

27,





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

49,





  
  JavaScript Example: The Date object

88, and





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

91 that evaluate to

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

27

(ES6) Function with Default Parameter Values

ES6 greatly simplify the above by introducing default parameter value in the form of





  
  JavaScript Example: Loop


  Testing Loop

65. For example,

(ES6) Rest/Spread Operator (





  
  JavaScript Example: Loop


  Testing Loop

5) and Arrow-Function Notation

ES6 also introduces rest/spread operator (





  
  JavaScript Example: Loop


  Testing Loop

5) and arrow-function notation. See ES6 article

Anonymous (Inline) Functions

In JavaScript, you can define an anonymous function (without a function name) using the following syntax





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

4

Anonymous function is often used in event handlers and others

Function Variables

In JavaScript, a variable can hold a primitive (number, string, boolean) or an object

In JavaScript, functions are first-class object. Hence, a variable can also hold a function object. For example,

Two Ways in defining a function

As seen in the above example, there are two ways to define a function

Use a function declaration statement in the form of.





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

5

Use a function expression by assigning an anonymous function to a variable.





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

6

Chức năng như đối số

Recall that a function takes zero or more arguments from the caller. In JavaScript, arguments can be a primitive or object. Since functions are first-class objects in JavaScript, a function may take another function as its argument

For example, the following function take a function and an array as its arguments, and apply the function to the array

Nested Functions

In JavaScript, you can define a function inside a function. For example,

Function as the return value

You can return a function from a function. For example,

Interacting with Users

Client-side JavaScript provides these built-in top-level functions for interacting with the user

alert(str). Pop-up a box to alert user for important information. The user will have to click "OK" to proceed. The

for ( initialization ; test ; post-processing ) {
   body ;
}

8 returns nothing (or





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

18)

prompt(str, defaultValue). Pop-up a box to prompt user for input, with an optional





  
  JavaScript Example: Loop


  Testing Loop

70. The

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

15 returns the user's input as a string. For example,

confirm(str). Pop-up a box and ask user to confirm some information. The user will have to click on "OK" or "Cancel" to proceed. The
```
My First JavaScript says
Hello world, again!
This document was last modified on mm/dd/yyyy hh:mm:ss.
```
16 which returns a boolean value. For example,

document. write(str), document. writeln(str). Write the specified string to the current document. The

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

57 (write-line) writes a newline after the string, while

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

85 does not. Take note that browsers ignores extra white spaces, including newlines, in an HTML document, and treat newline as a single blank character. You need to write a

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

60 or

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

59 tag to ask the browser to display a line break

The following top-level built-in functions are available to client-side as well as server-side (or standalone)

console. log(value). write to the system (or error) console, used mainly for debugging

Other Top-level Built-in Functions

JavaScript also pre-defines the following top-level global functions

parseInt(str), parseFloat(str). parses the given





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

3 and returns the numeric value or





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

91 (Not-A-Number). The





  
  JavaScript Example: Loop


  Testing Loop

79 accepts an optional





  
  JavaScript Example: Loop


  Testing Loop

80 (or base). For example,

Number(object). returns the number representation of the object. It works for





  
  JavaScript Example: Loop


  Testing Loop

81 object, as well as many objects such as

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

43

isFinite(number). returns

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

26 if

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

74 is not





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

91,





  
  JavaScript Example: Loop


  Testing Loop

86 or





  
  JavaScript Example: Loop


  Testing Loop

87

isNaN(number). trả về

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

26 nếu số là





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

91. Useful for checking the output of





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

77 and





  
  JavaScript Example: The Date object

29

eval(codes). evaluate the given JavaScript codes, which could be an expression or a sequence of statements. For example. [TODO]
encodeURI(), decodeURI(), encodeURIComponent(), decodeURIComponent(). encode or decode name-value pairs for the HTTP request, by replacing special characters with
```
  
  JavaScript Example: Loop


  Testing Loop
  
```
92. For example. [TODO]

An Introduction to Events (for Client-side JavaScript)

Client-side JavaScript are often event-driven. That is, a function (called event handler) will be fired in response to a certain user's or browser's action that generates an event

The commonly-used events are





  
  JavaScript Example: Loop


  Testing Loop

93. generated when the user clicks on an HTML element





  
  JavaScript Example: Loop


  Testing Loop

94,





  
  JavaScript Example: Loop


  Testing Loop

95. generated when the user positions the mouse pointer inside/away from the HTML element

alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')

03,





  
  JavaScript Example: Loop


  Testing Loop

97. generated after the browser loaded a document, and before the next document is loaded, respectively

Trình xử lý sự kiện, được gọi là





  
  JavaScript Example: Loop


  Testing Loop

98 (chẳng hạn như

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

82,

for ( initialization ; test ; post-processing ) {
   body ;
}

00,

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

94), là hàm phản hồi một sự kiện. Trình xử lý sự kiện thường được gắn vào thẻ HTML đích, e. g. ,





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

7

Thông tin thêm về các sự kiện trong các phần sau

Các đối tượng

Đối tượng ở khắp mọi nơi

JavaScript is object-oriented (OO), and objects are everywhere in JavaScript. Arrays are objects. Functions are also objects. Primitives like string and number are auto-box to objects in many operations. Almost everything in JavaScript can be an object, possibly except the





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

18 and

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

21 (unallocated object)

It is crucial to understanding objects to be proficient in JavaScript, as they are everywhere, and they are used extensively in JavaScript plug-ins like jQuery, AngularJS, React, and etc

JavaScript, however, does not support all the OO features, so as to keep the language simple

Properties and Methods

In conventional object-oriented programming languages (like Java/C++/C#), an object is a collection of properties and methods under a common name

Thuộc tính (hay còn gọi là biến, thuộc tính). contains values associated with the object
Methods (also called operations, functions). contains actions that the object can perform

For example, a

for ( initialization ; test ; post-processing ) {
   body ;
}

04 object has properties such as

for ( initialization ; test ; post-processing ) {
   body ;
}

05,

for ( initialization ; test ; post-processing ) {
   body ;
}

06,

for ( initialization ; test ; post-processing ) {
   body ;
}

07,

for ( initialization ; test ; post-processing ) {
   body ;
}

08; and methods such as

for ( initialization ; test ; post-processing ) {
   body ;
}

09,

for ( initialization ; test ; post-processing ) {
   body ;
}

10,

for ( initialization ; test ; post-processing ) {
   body ;
}

11,

for ( initialization ; test ; post-processing ) {
   body ;
}

12

Unlike full-fledged OO languages, JavaScript is designed on a simple OO paradigm. A JavaScript object is simply a collection of properties. A property is an association between a key (or name) and value (i. e. , key-value pair or name-value pair). If the value is a function (recall that JavaScript functions are first-class objects that can be assigned to variables), the property is known as a method. In other words, JavaScript does not differentiate between properties and methods like conventional OO languages. A method is simply a property holding a function

Creating Objects via Object Initializer with Object Literal

You can create a new object by directly assign an object literal to a variable, known as Object Initializer. The syntax is as follows





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

8

A JavaScript object is a collection of properties. Each property is an association of a name (key) and value pair

The name and value are separated by a colon

for ( initialization ; test ; post-processing ) {
   body ;
}

13

The name-value pairs are separated by commas
```
  
  JavaScript Example: Loop


  Testing Loop
  
```
24. No comma is needed after the last name-value pair
The property name could be a string or a number. For string name which is NOT a valid identifier (an valid identifier begins with an alphabet, underscore or dollar sign; and does not containing special characters like blank or
```
for ( initialization ; test ; post-processing ) {
   body ;
}
```
15), you need to enclose the name with single or double quotes. Otherwise, the quotes are optional. For example, Take note that if the property name's string is a proper identifier, you can omit the quotes. This is commonly practiced by the developers
The property value could be a literal, a variable or an expression
A property's value could take all JavaScript types, including primitives (string, number, boolean), object or function. The property is known as a method, if it holds a function. JavaScript does not differentiate between variables and methods like conventional OO languages (Java/C++/C#). A method is simply a property holding a function

Objects created via Object Initializer are instances of class

for ( initialization ; test ; post-processing ) {
   body ;
}

16

Trailing Commas

Trailing commas (sometimes called "final commas") can be useful when adding new elements, parameters, or properties to JavaScript code. If you want to add a new property, you can add a new line without modifying the previously last line if that line already uses a trailing comma. This makes version-control diffs cleaner and editing code might be less troublesome. JavaScript has allowed trailing commas in array literals since the beginning, and later added them to object literals (ES?), and more recently, to function parameters (ES?) and to named imports and named exports (ES?)

Property Accessors. The Dot and Index (Square Bracket) operator

In JavaScript, you can access an object's properties via either

The dot (

for ( initialization ; test ; post-processing ) {
   body ;
}

17) operator. in the form of

for ( initialization ; test ; post-processing ) {
   body ;
}

18 or

for ( initialization ; test ; post-processing ) {
   body ;
}

19, just like Java/C++

The index
```
  
  JavaScript Example: The Date object
  
```
65 operator (or bracket notation). In JavaScript, you can also use the index operator to access the object properties, in the form
```
for ( initialization ; test ; post-processing ) {
   body ;
}
```
21, just like accessing an array item

The

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

95 operator

You can remove a property (including method) via "

for ( initialization ; test ; post-processing ) {
   body ;
}

23"

Operator

for ( initialization ; test ; post-processing ) {
   body ;
}

24

You can use the

for ( initialization ; test ; post-processing ) {
   body ;
}

24 operator to check if a particular instance belongs to a particular class of objects, e. g. ,

The

for ( initialization ; test ; post-processing ) {
   body ;
}

26 method

The

for ( initialization ; test ; post-processing ) {
   body ;
}

27 returns

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

26 if

for ( initialization ; test ; post-processing ) {
   body ;
}

29 has the specific

for ( initialization ; test ; post-processing ) {
   body ;
}

30

Operator

for ( initialization ; test ; post-processing ) {
   body ;
}

31

You can use the

for ( initialization ; test ; post-processing ) {
   body ;
}

31 operator to check if a particular property belongs to an object, for example,

Example 1. A Simple Object, Deleting and Adding Properties

Unlike Java/C++, you can delete or add new properties to an existing JavaScript object

ví dụ 2. An Object having Object Properties

An object's property can hold primitives (number, string). It can also hold an object

Example 3. An object with function

A JavaScript object's property can also hold a function (or method). You can assign to an anonymous function or a named function as shown in the following example

To quote or not to quote the name in name-value pair?

The

for ( initialization ; test ; post-processing ) {
   body ;
}

33 (of the

for ( initialization ; test ; post-processing ) {
   body ;
}

34 pair) can take a string or a number, e. g. ,

for ( initialization ; test ; post-processing ) {
   body ;
}

35

Many developers do not enquote the string

for ( initialization ; test ; post-processing ) {
   body ;
}

33, if it is a valid identifier (a valid identifier begins with an alphabet,

for ( initialization ; test ; post-processing ) {
   body ;
}

37 or

for ( initialization ; test ; post-processing ) {
   body ;
}

38; and does not contain special characters like blank and

for ( initialization ; test ; post-processing ) {
   body ;
}

15). For example,

for ( initialization ; test ; post-processing ) {
   body ;
}

40 is the same as

for ( initialization ; test ; post-processing ) {
   body ;
}

41. However, you need to enquote a string

for ( initialization ; test ; post-processing ) {
   body ;
}

33 if it is NOT a valid identifier, e. g. ,

for ( initialization ; test ; post-processing ) {
   body ;
}

43

The string





  
  JavaScript Example: The Date object

95 must be enquoted; otherwise, it will be treated as a variable name

Dot Operator vs. Index (Square Bracket) Operator

You can access an object's property via either dot operator or index operator. Dot operator is commonly used as it is more concise and used in conventional OO languages. But index operator allows access to properties containing special characters and selection of properties using variables, which is not feasible with dot operator. For example,

Iterate through all the properties of an Object

There are three ways to iterate through all properties of an object

vì. in. traverses all enumerable properties of an object and its prototype chain
Object. keys(obj). return an array of all enumerable property names
Object. getOwnPropertyNames(obj). return an array of all property names

Ví dụ,

Operator

for ( initialization ; test ; post-processing ) {
   body ;
}

45

Establishes the default object for a set of statements. The syntax is





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

9

The

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

21 vs





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

18 Literal Values

As discussed earlier

An undeclared variable has type of





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

18, and its value cannot be referenced

A declared but uninitialized variable has type of





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

18, with a special literal value of





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

18 too. [





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

18 is both a type and a literal value. ]

A unallocated object has a special literal value of

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

21. Take note that

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

21 is an object

In boolean expressions, both the

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

21 and





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

18 evaluate to

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

27 (together with empty-string





  
  JavaScript Example: The Date object

13, number





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

49 and





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

91, and boolean

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

27). To check for

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

21 value, use

for ( initialization ; test ; post-processing ) {
   body ;
}

62, as

for ( initialization ; test ; post-processing ) {
   body ;
}

63 (or





  
  JavaScript Example: The Date object

93) returns

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

26 for

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

21,





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

18,





  
  JavaScript Example: The Date object

13,





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

49,





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

91, and

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

27

Built-in JavaScript Objects

JavaScript provides many useful global objects, such as





  
  JavaScript Example: Loop


  Testing Loop

20,

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

43,





  
  JavaScript Example: Loop


  Testing Loop

81, and





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

89

I shall discuss some commonly used objects here. For detailed specification and examples about a built-in object, check "Core JavaScript References"

Creating an Object via Constructor and the

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

47 Operator

All the built-in objects define a so-called constructor, which is a special method having the same name as the object, for creating new instances. Để gọi hàm tạo, bạn cần sử dụng toán tử đặc biệt

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

47

For example, the

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

43 object has a constructor method called

for ( initialization ; test ; post-processing ) {
   body ;
}

79. To construct a new instance of

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

43 object

The





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

31 and

for ( initialization ; test ; post-processing ) {
   body ;
}

24 Operators

As seen from the above examples, the





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

31 operator returns the type of a value, which can be a primitive type (such as number, string, boolean) or object (including function)

The

for ( initialization ; test ; post-processing ) {
   body ;
}

24 operator check if the value is an instance of a class

The





  
  JavaScript Example: The Date object

43 and

for ( initialization ; test ; post-processing ) {
   body ;
}

86 Methods

The following methods are available to all built-in JavaScript objects

toString(). returns a string description about this object

valueOf(). converts this object to a primitive value such as

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

74

The





  
  JavaScript Example: Loop


  Testing Loop

20 Object and Associative Arrays

For an introduction to arrays, read the "" section

Nowadays, we usually create an array via Array Initializer in the form of

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

84. Nonetheless, as arrays are objects of class





  
  JavaScript Example: Loop


  Testing Loop

20, we could also construct an array by invoking the

for ( initialization ; test ; post-processing ) {
   body ;
}

91 constructor with the

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

47 operator. This is more complex and, hence, less commonly used today (but may show up in old codes and books)

Ví dụ,

An Associative Array is a Generic "Object", not an "Array" Object

For an introduction to arrays, read the "" section

JavaScript does not really support associative array, but allow you to add properties to an object, using the associative array syntax and index operator. In other words,

Using an Array Object for Associative Array

In JavaScript, we usually create an associative array using a generic object (via the Object Initializer). You can also create an associative array via





  
  JavaScript Example: Loop


  Testing Loop

20 constructor. For examples,

In this case, additional properties are added into an





  
  JavaScript Example: Loop


  Testing Loop

20 object as object's properties. The array has

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

93 of 0, as

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

93 reflects only the numerical indexes. Using an array object for associative array is not recommended. I describe here for completeness

The





  
  JavaScript Example: Loop


  Testing Loop

81 Object vs





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

30 Primitive Type

JavaScript provides primitive





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

30 type. It also provide a





  
  JavaScript Example: Loop


  Testing Loop

81 class as a wrapper class for primitive





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

30. Read "" for primitive





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

30

A string can be created in two ways

directly assigned a string literal in the form of





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

03 or





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

04 to a variable, resulted in a





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

30 primitive

invoke the





  
  JavaScript Example: Loop


  Testing Loop

81 object constructor to construct a





  
  JavaScript Example: Loop


  Testing Loop

81 object

Ví dụ như,

The former is a primitive





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

30, while the latter is a





  
  JavaScript Example: Loop


  Testing Loop

81 object





  
  JavaScript Example: Loop


  Testing Loop

81 object is a wrapper for primitive string, which provides many useful methods for manipulating strings. See ""

A





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

30 primitive is "auto-box" to a





  
  JavaScript Example: Loop


  Testing Loop

81 object, when you invoke a





  
  JavaScript Example: Loop


  Testing Loop

81 object's methods. For example,

The





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

89 Object vs

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

74 Primitive Type

JavaScript provides primitive

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

74 type. It also provide a





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

89 class as a wrapper class for primitive

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

74. Read "" for primitive

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

74

The





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

89 object is a wrapper object for primitive

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

74, which provides many properties and methods. Again, a

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

74 primitive is auto-box to a





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

89 object, when you invoke a





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

89 object's operation. See ""

The





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

25 Object vs boolean





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

26 Type

JavaScript provides primitive





  
  JavaScript Example: The Date object

78 type. Nó cũng cung cấp một lớp





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

25 như một lớp bao bọc cho nguyên hàm





  
  JavaScript Example: The Date object

78. Read "" for primitive





  
  JavaScript Example: The Date object

78

The





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

25 object is a wrapper object for primitive





  
  JavaScript Example: The Date object

78, which provides many properties and methods

The

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

43 Object

Commonly-used constructors

new Date(). constructs a

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

43 object with the current date and time

new Date(dateTimeStr). constructs a
```
My First JavaScript says
Hello world, again!
This document was last modified on mm/dd/yyyy hh:mm:ss.
```
43 object with the given date-time string in an acceptable form (e. g. , "Month, day, year, hours. minutes. seconds")
new Date(year, Month, day). where month is 0-11 for Jan to Dec
ngày mới (năm, tháng, ngày, giờ, phút, giây, mili giây)

Các phương pháp thường dùng

```
My First JavaScript says
Hello world, again!
This document was last modified on mm/dd/yyyy hh:mm:ss.
```
62, setDate(), getMonth(), setMonth(), getFullYear(), setFullYear(). lấy/đặt ngày (1-31), tháng (0-11 từ tháng 1 đến tháng 12), năm (năm có 4 chữ số)
getDay(). lấy ngày trong tuần (0-6 cho Chủ Nhật đến Thứ Bảy)

getHours(), setHours(), getMinutes(), setMinutes(), getSeconds(),





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

37. lấy/đặt giờ/phút/giây

getTime(), setTime(). lấy/đặt số mili giây kể từ ngày 1 tháng 1 năm 1970, 00. 00. 00

Đối tượng





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

38

Thuộc tính thường dùng

E, PI. Euler’s constant and





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

39

LN2, LN10, LOG2E, LOG10E. ln(2), ln(10), log2(e), log10(e)
SQRT2, SQRT1_2. square root of 2 and one-half

Các phương pháp thường dùng

abs(x)
sin(a), cos(a), tan(a), asin(x), acos(x), atan(x), atan2(x,y)
cell(x), floor(x), round(x)
exp(x), log(x), pow(base,exp), sqrt(x)
max(x,y), min(x,y)
random(). returns a pseudo-random number between 0 and 1

The





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

40 Object

For an introduction to functions, read "" section

Every function in JavaScript is actually a





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

40 object

Function Variable

A variable can be assigned a





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

40 object (called function variable), which takes a special object type called

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

88. [In JavaScript, an object's type is either

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

88 (for





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

40 object) or





  
  JavaScript Example: Variables and functions prompt() and confirm()
  


  Welcome to JavaScript!

20 (for any object not a





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

40). ]

Ví dụ,

Anonymous Function

If a function is called only once, you can use an anonymous function, omitting the function name. Anonymous functions are commonly-used as event handler, e. g. ,

You can define a inline (anonymous) function and assign it to a variable as follows

Function Constructor

Bên cạnh việc sử dụng từ khóa

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

88, bạn cũng có thể sử dụng hàm tạo





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

40 (với toán tử

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

47) để xác định đối tượng





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

40. This is not easily understood and, hence, not recommended

The syntax for





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

40 constructor is





  
  JavaScript Example: The Date object

0

The





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

53 object

Formatting Console Output

console. log('formattingStr', arg1, arg2, . ). You can use C's

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

14-like syntax with format specifiers (such as





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

55,





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

56,





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

57) to format the output string

You can use %c to apply CSS rules, e. g. ,





  
  JavaScript Example: The Date object

1

Logging Methods

JavaScript supprots 5 levels of logging, in the order of severity

console. error()
console. warn()
console. log()
console. info()
console. debug()

More Debugging Methods

console. trace(). print the current stack trace
console. dir(). displays an interactive list of the properties of the specified JavaScript object
console. dirxml(). displays in XML the properties of the specified JavaScript object
console. assert(). writes an error message to the console if the assertion is false; otherwise do nothing

Time Measurements

console. time([label]). starts a new timer
console. timeEnd([label]). ends the timer and returns the time in milliseconds since the timer starts
console. timeLog([label]). returns the elapsed time since the timer started

More on Objects

Prototype-based vs. Class-based OO

JavaScript's OO is prototype-based, instead of class-based like Java/C++/C#

Ngôn ngữ OO dựa trên lớp (chẳng hạn như Java/C++/C#) được thành lập dựa trên các khái niệm về lớp và thể hiện. A class is a blue-print or template of things of the same kind. An instance is a particular realization of a class. For example, "





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

58" is a class; and "





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

59" and "





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

60" are instances of the "





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

58" class. In a class-based OO language, you must first write a class definition, before you can create instances based on the class definition. The instances created have exactly the same properties and methods as the class - no more, and no less

On the other hand, a prototype-based OO language (such as JavaScript) simply has objects (or instances). A new object can be constructed based on an existing object as prototype. There is no class definition, and hence, they are also called class-less OO languages

In JavaScript

Every JavaScript object has a prototype. The prototype is also an object. A JavaScript object is created from a prototype object and gets its initial properties from the prototype

Every JavaScript object has an internal property called





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

62, which holds its prototype object. Khi bạn xác định một đối tượng mới,





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

62 của nó được đặt thành một đối tượng tích hợp có tên là





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

64. In other words, the new object uses





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

64 as its prototype, and gets its initial properties from





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

64. The





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

62 property is not enumerable, i. e. , it would not shown up in the

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

77 loop

Thí dụ. Object Prototype

Notes

Prototype Chain. In the above example,





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

69's prototype is





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

64, whose prototype is

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

21. This form a prototype chain of





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

72.





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

69 defines two own properties.





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

74 and





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

75. When you invoke





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

76, which cannot be found in





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

69, but found in its prototype

Object. getPrototypeOf(obj). Instead of using





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

78 property used in above example, which is NOT in the official JavaScript specification, you should use





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

79 method to get the prototype of an object

Defining Your Own Custom Objects via a Constructor

In JavaScript, you can create your own custom objects by defining a constructor. A constructor is simply a function, which can be invoked via the

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

47 operator to create and initialize new objects. Recall that JavaScript is prototype-based and class-less. A new object is created from a prototype object, and gets its initial properties from this prototype object. The constructor function provides the prototype to create and initialize new instances (to be explained later)

By convention, a constructor name begins with an uppercase letter

Keyword

alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')

09

"

alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')

09" refers to the current object.





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

83 refers to the property of this object

Example. Object Constructor Function

Let us define a constructor for our custom





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

84 objects, with properties





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

74,





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

86,





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

87 and





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

88

Làm thế nào nó hoạt động?

Properties (including methods) are declared inside the constructor via





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

83, which can then be initialized

Methods can be declared inside the constructor via





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

90. There are a few ways to provide the method's definition

Define an ordinary

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

88, and assign the





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

92 (without parentheses, which is a

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

88 type) to





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

90, as in the





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

88

Assign





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

90 to an inline function, as in the





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

87

Invoke the





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

40 constructor with

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

47 operator (rarely-used).





  
  JavaScript Example: The Date object

2

To invoke a method, use





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

00

The





  
  JavaScript Example: The Date object

43 is a special method, which returns a string description of this object. The





  
  JavaScript Example: The Date object

43 will be implicitly invoked if an object is passed into the

for ( initialization ; test ; post-processing ) {
   body ;
}

9,

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

56 or

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

00 operator (like Java)





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

62 and





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

07

Revisit the

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

47 Operator

In JavaScript, the new constructor(args) call does the followings

Create a new generic object using built-in root

for ( initialization ; test ; post-processing ) {
   body ;
}

16 as prototype

Gán đối tượng mới được tạo này cho biến

alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')

09

Run the constructor function, which typically adds properties to

alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')

09

Set the internal property





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

62 to





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

13 (in the above example,





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

14). The





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

62 property is not enumerable (i. e. , it would not shown up in the

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

77 loop). It is used to maintain the so called "prototype chain" of the objects

Return the newly created object

Take note that you can invoke the constructor function WITHOUT the

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

47 operator, e. g. ,





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

18. In this case, the constructor will be run as per ordinary function. There will not be any association of

alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')

09 and





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

62 properties; and the return value will depend on the function codes

Try tracing the object created in the above example via Chrome's Developer Tools, which could display the





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

62 internal property

Another Example

Constructor's





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

07 Property

All the JavaScript constructor function objects (in fact, all function objects) have a special property called





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

07. By default, it holds an object that can be used as a prototype for creating new objects

In the





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

84 example, the





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

84 constructor function has a





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

14, which holds a





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

84 object to be used as a prototyping object. When a new





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

84 object is constructed via the

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

47 operator, the newly constructed object's





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

62 property is set to





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

14

Adding Shared properties to Constructor's





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

07 Property

The constructor's





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

07 is used to implement shared properties (typically shared methods) for all the objects it prototyped. In JavaScript, you can add properties dynamically during runtime into





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

07. The added properties/methods will be available to all the objects (new as well as existing objects). For example,

When you reference a property, JavaScript first checks if the property exists locally (or own property); otherwise, it checks the prototype chain through the





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

62 property. Recall that the





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

36 call sets the





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

62 to





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

13. Hence, properties added into





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

13 are available to (and shared by) all the objects prototyped by this constructor

In practice, we defines methods (and static variables) in





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

13 to be shared by all objects; while each object maintains its own properties (instance variables)

Looking up the Prototype Chain

Objects in JavaScipt form prototype chains. In the above example, a prototype chain is





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

41

When you reference an object property, JavaScript follow these steps to locate the property

Check if the property exists locally (i. e. , own property)

Otherwise, check the





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

62 property. This continues recursively up the prototype chain. The process is called "lookup in the prototype chain"

Hence, in the above example, all the properties in





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

14 and





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

64 are inherited by





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

45

for ( initialization ; test ; post-processing ) {
   body ;
}

24 Operator

Every object has a





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

62 object property (except

for ( initialization ; test ; post-processing ) {
   body ;
}

16); every constructor function has a





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

07 property. So objects can be related by 'prototype inheritance' to other objects. You can test for inheritance by comparing an object's





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

62 to the constructor's





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

07. JavaScript provides a shortcut. the

for ( initialization ; test ; post-processing ) {
   body ;
}

24 operator tests an object against a function and returns

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

26 if the object inherits from the function prototype. For example,

[LÀM]





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

54





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

54 cho phép bạn tạo một đối tượng mới dựa trên đối tượng nguyên mẫu đã cho. It simply sets the





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

62 to the given prototype object, so that all properties of the prototype are available to the new object. Using





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

54, You do NOT need to define a constructor function and run





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

58 to create new objects

Inheritance via Prototype Chain

You can implement inheritance in JavaScript via the prototype chain. For example,

How It Works

[LÀM]

Getter and Setter

In languages like Java, you can declare a variable to be





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

59 and define





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

60 getter/setter to access the





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

59 variable. JavaScript does not really support





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

59 access?. But you can also define ordinary methods





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

63 or





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

64 as getter/setter like Java

Moreover, in JavaScript, you can define getter/setter as properties instead of methods in one of the following two ways

via built-in functions





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

65 or





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

66;

inside the "object initializer" via keywords





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

67 and





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

68

Example 1. Define Getters/Setters via





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

65 or





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

66

Notes

The





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

71 allows you to define multiple properties; while





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

72 for a single property

You invoke the getters/setters like properties with assignment operator, instead of via function call

Example 2. Define Getter/Setter inside the Object Initializer

Notes

The getter/setter are defined inside Object Initializer via keywords





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

67 and





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

68 with a rather strange syntax, as shown in the example

Thuộc tính của

for ( initialization ; test ; post-processing ) {
   body ;
}

16





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

76

Tất cả các đối tượng JavaScript được thừa hưởng một thuộc tính đặc biệt có tên là





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

77, thuộc tính này chứa tham chiếu đến hàm đã tạo đối tượng. Ví dụ,

[TODO] thêm thuộc tính của đối tượng

API mô hình đối tượng tài liệu (DOM) cho JavaScript

Mô hình đối tượng tài liệu (DOM), là một API tiêu chuẩn cho phép các lập trình viên truy cập và thao tác nội dung của tài liệu HTML/XHTML/XML một cách linh hoạt bên trong chương trình của họ. Nó mô hình hóa tài liệu HTML/XHTML/XML dưới dạng cấu trúc dạng cây, hướng đối tượng, được gọi là cây DOM, bao gồm các nút giống như thẻ (phần tử) và nội dung. DOM cũng cung cấp giao diện để xử lý sự kiện, cho phép bạn phản hồi hành động của người dùng hoặc trình duyệt

API DOM được triển khai bằng nhiều ngôn ngữ như Java, JavaScript, Perl và ActiveX. Đặc tả DOM API được duy trì bởi W3C. DOM has various levels

DOM Level 0 (DOM0) (Pre-W3C). obsolete
DOM Level 1 (DOM1) (W3C Oct 1998). obsolete
DOM Level 2 (DOM2) (W3C Nov 2000) and DOM Level 2 HTML (HTML DOM2) (W3C Jan 2003)
DOM Level 3 (DOM3) (W3C Apr 2004). yet to be fully supported by browsers

jQuery is much better in selecting and manipulating DOM element. You should use jQuery in production. I keep these sections here for completeness

Finding and Selecting Elements

In JavaScript, we often use DOM API to select elements within the current document, so as to access or manipulate their contents. The most commonly-used functions are

FunctionDescriptionExample





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

78Returns the element with the given unique

alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')

19.





  
  JavaScript Example: The Date object

3





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

80Returns an array of elements with the given tag name.





  
  JavaScript Example: The Date object

4





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

81Returns an array of elements with the given





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

82 attribute name.





  
  JavaScript Example: The Date object

5





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

83Returns an array of elements with the given

for ( initialization ; test ; post-processing ) {
   body ;
}

33 attribute.





  
  JavaScript Example: The Date object

6

You can use wildcard





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

85 in





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

86 to select all the elements, e. g. ,





  
  JavaScript Example: The Date object

7

The above functions select element(s) based on the unique

alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')

19,

for ( initialization ; test ; post-processing ) {
   body ;
}

33 attribue and tag-name. HTML 5 further defines two function that can select elements based on





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

82 attribute (which is used extensively by CSS in the class-selector)

FunctionDescriptionExample





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

90Returns the first element with the given





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

82 attribute.





  
  JavaScript Example: The Date object

8





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

92Returns an array of elements with the given





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

82 attribute.





  
  JavaScript Example: The Date object

8

Beside the above selection functions, there are many other selection functions available. However, I strongly recommend that you stick to the above functions. I listed below the other function below for completeness





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

94 returns an array of all





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

95 elements, same as





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

96





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

97. return an array of allelements





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

98 and





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

99. return all the hyperlinks





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

6and anchors





  
  JavaScript Example: User-defined function and onclick Event Handler
  


  Example on event and user-defined function

6elements. [To confirm. ]

Manipulating Element's Content through the

alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')

42 Property

You can access and modify the content of an element via the "

alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')

42" property, which contains all the texts (includes nested tags) within this element

Ví dụ,

"

alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')

42" is the most convenient way to access and manipulate an element's content. However, it is not a W3C standard, but it is supported by most of the browsers

DOM Tree & Nodes

W3C recommends that you access and manipulate HTML elements via the DOM tree and nodes. However, it is really an overkill for writing simple JavaScripts. I present them here again for completeness

When a browser loads an HTML page, it builds DOM models a web page in a hierarchical tree-like structure composing of nodes, resembling its HTML structure

An example of an HTML document with the corresponding DOM-tree is given follow. Take note that the text content of an element is stored in a separate Text node

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

0

Load the web page onto Firefox, and use the firebug to inspect the DOM tree.

A DOM-tree comprises the following types of nodes

Document Node. the root node representing the entire HMTL document
Element node. represents an HTML element (or tag). An element node may have child nodes, which can be either element or text node. Element node may also have attributes
Text Node. contains the text content of an element
Others. such as comment, attribute

011 for Text node is the text contained;

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

011 for Element node is undefined

```
My First JavaScript says
Hello world, again!
This document was last modified on mm/dd/yyyy hh:mm:ss.
```
014. an integer indicating the type of the node, e. g. , Phần tử (1), Thuộc tính (2), Văn bản (3), Nhận xét (8), Tài liệu (9)

Lưu ý sự khác biệt giữa thuật ngữ số ít và số nhiều. For example,

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

015 refer to the parent node (each node except root has one and only one parent node),

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

016 holds an array of all the children nodes

Nút gốc của cây DOM được gọi là





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

6. Nút gốc





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

6 chỉ có một nút con, được gọi là

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

025, đại diện cho thẻ và nó đóng vai trò là nút cha cho hai nút con đại diện và thẻ, từ đó sẽ có các nút con khác. Bạn cũng có thể sử dụng thuộc tính đặc biệt có tên là

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

026 để truy cập trực tiếp vào thẻ

Ví dụ: bạn có thể sử dụng thuộc tính nút sau để truy cập nút Văn bản

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

027 trong ví dụ trên

Thí dụ

JavaScript sau liệt kê tất cả các nút trong phần, theo cách tìm kiếm chuyên sâu, thông qua hàm đệ quy

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

1

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

2

Việc truy cập phần tử HTML thông qua giao diện Node có thể không quá hữu ích cũng như không thực tế đối với các ứng dụng JavaScript, vì bạn cần biết cấu trúc tô pô thực tế của cây DOM. Hơn nữa, một số trình duyệt (e. g. , firefox) có thể tạo thêm các nút Văn bản để chứa khoảng trắng giữa các thẻ

nút văn bản

DOM mô hình hóa các văn bản được bao quanh bởi các thẻ HTML dưới dạng một nút văn bản riêng biệt. Nó không thể có nút con. Để truy xuất nội dung văn bản, bạn có thể thuộc tính

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

011. Ví dụ,

thuộc tính thuộc tính

To access an attribute of an Element node called

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

029, you could either use

thuộc tính

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

030, trong đó

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

031 là tên của thuộc tính, hoặc

phương pháp

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

032 và

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

033

Ví dụ,

Thuộc tính

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

034 (đối với CSS)

Phần tử có một thuộc tính được gọi là kiểu, mô hình hóa kiểu CSS với các thuộc tính CSS như

alert('hello, world')
document.write('hello world, again')
console.log('hello world, again and again')

07 và

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

036. Ví dụ,

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

3

Thao túng các nút

Một đối tượng Node có các chức năng này

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

037. trả về

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

046), Nối một nút (

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

047)

Để tạo nút văn bản mới, bạn có thể sử dụng

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

048 để tạo một nút văn bản độc lập, tiếp theo là một

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

049

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

050 để nối thêm nút văn bản vào một phần tử

Tương tự, bạn có thể sử dụng

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

051 để tạo một phần tử độc lập, theo sau là một

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

052 để nối phần tử đã tạo vào một phần tử hiện có

Ví dụ, chúng ta sẽ tạo một nút văn bản mới, như một nút con của một nút mới.

yếu tố. Sau đó chúng ta sẽ nối cái mới

phần tử là phần tử con cuối cùng của

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

4

Chèn một nút mới (

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

053)

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

4

Thay thế một nút (

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

054)

Thay đổi dòng cuối cùng thành

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

055

Xóa một nút (

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

056)

Bạn có thể xóa nút con khỏi nút cha thông qua

My First JavaScript says

Hello world, again!

This document was last modified on mm/dd/yyyy hh:mm:ss.

057

Ví dụ: hãy loại bỏ cuối cùng

từ

if ( condition-1 ) {
   block-1 ;
} else if ( condition-2 ) {
   block-2 ;
} else if ( condition-3 ) {
   block-3 ;
......
......
} else {
   block-n ;
}

6

Đối tượng





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

6

Đối tượng





  
  JavaScript Example: Events onload, onmouseover and onmouseout
  


  "Hello" alert Box appears after the page is loaded.
  Point your mouse pointer here!!!

6 là nút gốc của cây DOM. Nó có thể được sử dụng để truy cập tất cả các phần tử trong trang HTML

Bạn có thể sử dụng chuỗi mẫu trong HTML không?

Trong ES6, giờ đây chúng ta có thể sử dụng chuỗi mẫu . I like to use these multiline strings when I'm creating HTML markup as a string. Bạn có thể sử dụng backticks tại đây và sử dụng các thuộc tính đối tượng làm biến. Chúng trông quen thuộc vì chúng có cùng định dạng như tôi đã sử dụng trong một số bài viết trước.

Có các chuỗi mẫu trong Java không?

Tóm tắt. Nâng cao ngôn ngữ lập trình Java với mẫu chuỗi . Các mẫu chuỗi bổ sung cho các khối văn bản và chuỗi ký tự hiện có của Java bằng cách ghép nối văn bản theo nghĩa đen với các biểu thức và bộ xử lý được nhúng để tạo ra các kết quả chuyên biệt.

Chuỗi mẫu ES6 là gì?

ES6 giới thiệu một loại cú pháp chuỗi ký tự mới được gọi là chuỗi mẫu. Chúng trông giống như các chuỗi thông thường, ngoại trừ việc sử dụng ký tự backtick ` chứ không phải là dấu ngoặc kép thông thường ' hoặc " .

Làm cách nào để tạo một chuỗi HTML?

Bạn có thể tạo một thể hiện Chuỗi bằng cách sử dụng văn bản thuần túy hoặc HTML, chẳng hạn cả hai câu lệnh này đều hợp lệ. // Từ văn bản thuần túy var helloWorld = new HTMLString. String('Hello World'); // From HTML var helloWorldBold = new HTMLString.

programming html

Chuỗi mẫu Internalhtml

Giới thiệu

Nó bắt đầu dưới dạng Ngôn ngữ lập trình phía máy khách chạy bên trong trình duyệt web thông qua Công cụ JavaScript tích hợp

JavaScript hiện có ở mọi nơi với Node. js

Lịch sử và Phiên bản

Testing Loop

Testing Loop

Testing Loop

Testing Loop

Testing Loop

Testing Loop

Testing Loop

Testing Loop

Testing Loop

Testing Loop

JavaScript so với. Java

JavaScript phía máy khách KHÔNG THỂ làm gì?

jQuery

JavaScript độc lập và phía máy chủ với nút. Công cụ JavaScript js

Trình chỉnh sửa mã nguồn JavaScript và IDE

Ví dụ JavaScript phía máy khách

JS phía máy khách EG 1. Hàm for ( initialization ; test ; post-processing ) { body ; }8 và for ( initialization ; test ; post-processing ) { body ; }9

Example on event and user-defined function

Example on event and user-defined function

Example on event and user-defined function

Example on event and user-defined function

Example on event and user-defined function

Example on event and user-defined function

Làm thế nào nó hoạt động?

Example on event and user-defined function

Example on event and user-defined function

Example on event and user-defined function

Example on event and user-defined function

Hello world, again!

Hello world, again!

Hello world, again!

Hello world, again!

Không bị bộ nhớ cache bắt - Thực hiện Control-Refresh (hoặc Control-F5)

Không sử dụng for ( initialization ; test ; post-processing ) { body ; }8

Hello world, again!

Hello world, again!

Hello world, again!

Công cụ gỡ lỗi và công cụ phát triển web F12 của trình duyệt

Hello world, again!

Hello world, again!

Hello world, again!

Các thông báo lỗi ở đâu?

JS phía máy khách EG 2. Biến và Hàm My First JavaScript says Hello world, again!This document was last modified on mm/dd/yyyy hh:mm:ss.15, My First JavaScript says Hello world, again!This document was last modified on mm/dd/yyyy hh:mm:ss.16

Hello world, again!

Hello world, again!

Hello world, again!

Hello world, again!

Hello world, again!

Hello world, again!

Hello world, again!

Hello world, again!

Hello world, again!

Làm thế nào nó hoạt động?

Hello world, again!

Hello world, again!

Hello world, again!

Hello world, again!

Hello world, again!

Hello world, again!

Hello world, again!

Hello world, again!

Hello world, again!

Hello world, again!

Hello world, again!

JS phía máy khách EG 3. Đối tượng My First JavaScript says Hello world, again!This document was last modified on mm/dd/yyyy hh:mm:ss.43

Hello world, again!

Hello world, again!

Làm thế nào nó hoạt động?

Hello world, again!

Hello world, again!

Hello world, again!

Hello world, again!

Hello world, again!

Hello world, again!

Hello world, again!

JS phía máy khách EG 1. Hàm
for ( initialization ; test ; post-processing ) { body ; }
8 và
for ( initialization ; test ; post-processing ) { body ; }
9

Không sử dụng
for ( initialization ; test ; post-processing ) { body ; }
8

JS phía máy khách EG 2. Biến và Hàm
My First JavaScript says
Hello world, again!
This document was last modified on mm/dd/yyyy hh:mm:ss.
15,
My First JavaScript says
Hello world, again!
This document was last modified on mm/dd/yyyy hh:mm:ss.
16

JS phía máy khách EG 3. Đối tượng
My First JavaScript says
Hello world, again!
This document was last modified on mm/dd/yyyy hh:mm:ss.
43

JS phía máy khách EG 5. Hàm do người dùng định nghĩa và Trình xử lý sự kiện
My First JavaScript says
Hello world, again!
This document was last modified on mm/dd/yyyy hh:mm:ss.
82