Tổng quan về Javascript

Danh Hoàng Hiếu Nghị

Danh Hoàng Hiếu Nghị

January 23, 2024

Tổng quan về Javascript

- Javascript là ngôn ngữ lập trình phổ biến nhất thế giới.

- Javascript là ngôn ngữ lập trình cho website

- Javascript dễ học.

Tại sao nên học Javascript?

Javascript là một trong 3 ngôn ngữ mà mọi lập trình viên web đều phải học:

1. HTML dùng để định ra nội dung của một trang web.

2. CSS dùng để tùy chỉnh, trang trí giao diện của một trang web.

3. Javascript dùng để lập trình ra các hoạt động, hành vi các tương tương của một website

Một số câu hỏi thường gặp:

1. Làm sao để có được Javascript?

2. Tôi có thể tải Javascript ở đâu?

3. Javascript có tốn phí không?

Javascript có thể thay đổi nội dung của HTML

- Một trong các phương thức Javascript HTML là getElementById().

Ví dụ:

document.getElementById("demo").innerHTML = "Hello JavaScript";

Javascript sử dụng cả hai dấu: nháy đơn ‘ ‘ và nháy đôi “ ”:

Ví dụ:

document.getElementById('demo').innerHTML = 'Hello JavaScript';

JavaScript có thể thay đổi các thuộc tính của thành phần HTML

Bạn có biết rằng?

1. Javascript và Java là hai ngôn ngữ khác nhau hoàn toàn, về các khái niệm và thiết kế.

2. Javascript được phát mình ra bởi Brendan Eich vào năm 1995 và trở thành một tiêu chuẩn ECMA vào năm 1997.

3. ECMA – 262 là một trong các tên chính thức của tiêu chuẩn.

4. ECMAScript là tên tiêu chuẩn cho ngôn ngữ này.

Thẻ <script>của Javascript trong HTML.

Trong HTML, code Javascript thường được chèn vào giữa cặp tag <script> và </script>.

Ví dụ:

Trong một số ví dụ cũ về Javascript có thêm thuộc tính “type” :

<script type="text/javascript">.

Thuộc tính “type” là không bắt buộc phải có. Javascript là một trong các ngôn ngữ “kịch bản”, lập trình trong HTML.

Javascript trong thẻ <head> và thẻ <body>.

Bạn có thể đặt bao nhiêu thẻ script tùy ý vào trong 1 file HTML đều được.
Script có thể đặt trong thẻ <body> hoặc trong phần <head> của một file HTML hoặc đặt cả 2 cùng lúc đều được.

Javascript trong thẻ <head>

Trong ví dụ này, một hàm Javascript được đặt trong phần <head> của một trang HTML.

Một hàm được gọi khi 1 nút được kích hoạt.

Ví dụ:

Javascript trong thẻ <body>

Trong ví dụ này, một hàm Javascript được đặt trong phần body của một HTML.

Một hàm được gọi khi nút được nhấn:

Ví dụ:

Nên đặt các script ở gần cuối file sát bên thẻ đóng </body> để tăng tóc độ hiển thị, vì thường để định nghĩa ra các thẻ script sẽ làm chậm tốc độ hiển thị.

External Javascript (File Javascript)

Script có thể được đặt riêng ra một file thay vì đặt trực tiếp vào trong trang HTML.

External file: myScript.js

Việc đặt riêng các thành phần Javascript này thành một file riêng rất là tiện lợi vì nó giúp có việc sử dụng lại các code ở nhiều trang HTMl khác nhau.
Javascript file có phần đuôi là .js
Để sử dụng file javascript ta phải liên kết tới file đó bằng cách thêm thuộc tính src (source) vào trong thẻ <script>:

Bạn có thể đặt liên kết này ở bất cứ đâu. Ở <head> hay <body> cũng được.
Code sẽ được chạy nếu nó được đặt vị trí chính xác nơi mà thẻ <script> được đặt.
Các file javascript này không thể chứa các thẻ <script>.

Các lợi ích khi tách Javasript thành một file riêng:

Phân tách code javascript và các thẻ HTML.
Giúp đọc file Javasript dễ hiểu hơn và làm file HTML gọn ràng hơn.
Giúp tăng tốc độ tải trang web.

Ví dụ:

Thông tin bổ sung:

- Một file Javascript có thể được tích hợp thêm vào trang HTML bằng 3 cách:

1. Nhúng 1 đường link dẫn tới file Javascript đó trên internet:

2. Dùng một đường dẫn tới nơi đặt file Javascript.

3. Không cần đường dẫn vì file Javascript nằm chung cấp với 1 thư mục Javascript.

Cách Thấy Được Javascript

Các cách hiển thị ra Javascript.

Javascript có thể hiển thị dữ liệu bằng nhiều cách:

Viết vào trong một thành phần HTML, sử dụng innerHTML.
Viết vào trong phần output của HTML, sử dụng document.write().
Viết vào trong hộp cảnh báo alert box, using window.alert().
Viết vào trong cửa sổ console của trình duyệt, sử dụng console.log().

Sử dụng innerHTML:

Để truy cập vào một phần tử HTML, Javascript có thể dùng phương thức document.getElementById(id).
Thuộc tính id định nghĩa ra thành phần HTML. Thuộc tính innerHTML định nghĩa ra nội dụng của HTML

Ví dụ:

Thay đổi thuộc tích innerHTML của một thành phần HTML là một cách thông thường để hiển thị nội dung trong HTML

Sử dụng document.write()

Để test chương trình, rất tiện nếu chúng ta sử dụng document.write():

Ví dụ:

Sử dụng document.write() sau khi file HTML được load, sẽ xóa toàn bộ các HTML hiện hữu.

Ví dụ:

Hàm document.write() chỉ nên được sử dụng để test kết quả.

Sử dụng window.alert()

Bạn có thể sử dụng cửa sổ thông báo để hiển thị ra dữ liệu:

Bạn có thể không xài từ khóa window như ở trên.

Trong javascript, đối tượng window là một đối tượng toàn cục trong file. Điều này nghĩa là toàn bộ biến, thuộc tính và phương thức thuộc về đối tượng window. Nghĩa là việc sử dụng từ khóa window là khong bắt buộc.

Ví dụ:

Sử dụng console.log()
Để cho tiện sau khi sửa lỗi chương trình( Debugging) bạn có thể gọi cửa số console.log() của trình duyệt để hiển thi ra dữ liệu

Ví dụ:

In Javascript

Javascript không có bất cứ đối tượng print hay phương thức print nào.
Bạn không thể truy cập thiết bị xuất từ Javascript
Chỉ ngoại trừ trường hợp duy nhát là bạn gọi hàm window.print() của trình duyệt để in ra nội dung của cửa số hiện tại.

Ví dụ:

Mệnh Đề Javascript (Statement)

Ví dụ:

Chương trình Javascript

Một chương trình máy tính là 1 danh sách các câu lệnh dược thực thi bởi máy tính.
Trong ngôn ngữ lập trình, những câu lệnh lập trình này được gọi là các mệnh đề (Statement)
Một chương trình javascript là tập hợp của nhiều mệnh đề.
Trong HTML, chương trình Javascript được thực thi bởi trình duyệt web.

Mệnh đề Javacript

Mệnh đề Javascript được tổng hợp từ : Giá trị, Toán Tử, Từ Khóa và Ghi Chú.
Mệnh đề bên dưới nói cho trình duyệt rằng hãy viết “Hello World” vào trong 1 nguyên tố HTML với địa chỉ id = “demo”:

Hầu hết các chương trình Javascript chứa mệnh đề Javascript.
Các mệnh đề (Câu) được thực thị, từng câu một, theo thứ tự mà chúng được viết ra.
Chương trình Javascript (Và mệnh đề Javascript) thường được gọi là code Javascript

Dấu chấm phẩy ;

Dấu chấm phẩm phân tách các mệnh đề Javascript.
Thêm một dấu chấm phẩy vào cuối các câu lệnh;

Khi được phân tách bởi dấu chấm phẩm, chúng ta sẽ được quyền viết nhiều câu lệnh trên cùng 1 dòng.

Ví dụ:

Bạn có thể thấy một vài ví dụ không có sử dụng dấu chấm phẩy.Không bắt buộc kết thúc một câu với dấu chấm phẩy, nhưng khuyên là nên có dấu chấm phẩy cuối mỗi câu lệnh.

Khoảng trắng Javascript

Javascript thường bỏ qua các khoảng trắng. Bạn có thể thêm bao nhiêu khoảng trắng tùy thích để giúp code của bạn dễ đọc hơn

Như hai cậu lệnh sau có ý nghĩa y chang nhau:

Một cách luyện tập tốt là đặt khoảng trắng xung quanh các toán tử ( = + - * /):

Độ dài của dòng trong Javascript và ngắt dòng.
Để tối ưu nhất cho việc đọc code, lập trình viên thường tránh việc viết 1 dòng code dài hơn 80 kí tự.
Nếu một câu lệnh không vừa một dòng, cách tốt nhất là ngắt nó sau một toán tử

Ví dụ

Khối lệnh trong Javascript

Các câu lệnh trong Javascript có thể được nhóm lại với nhau trong một khối lệnh, bên trong cặp dấu ngoặc nhọn { … }
Mục đích của khối lệnh là để xác định ra các mệnh đề được thực thi chung với nhau. Bạn có thể đã thấy các câu lệnh được nhóm với nhau vào trong một khối, là bên trong một hàm JavaScript:

Ví dụ:

Chúng ta sẽ tìm hiểu về các function (hàm) ở các bài sau.
JavaScript Keywords (Từ khóa Javascript):
Các câu lệnh trong Javascript thường bắt đầu với một từ khóa để định dạng ra hành động Javascript cần được thực hiện.

Dưới đây là một sốt từ khóa sẽ được học trong tài liệu này:

Từ Khóa

Mô Tả

Var

Khai báo một biến

Let

Khai báo một biến phạm vi khối code

Const

Khai báo một hằng phạm vi khối code

Đánh dấu một khối code sẽ được thực thi trong một điều kiện

Switch

Đánh dấu một khối code sẽ được thực thi trong một số trường hợp nhất định

For

Đánh dấu một khối code cần được thực thi trong một vòng lặp

Function

Khai báo một hàm

Return

Thoát một hàm

Các từ khóa Javascript như bên trên không được sử dụng như là tên biến.
Chi tiết thêm về từ khóa: Truy cập link này : JavaScript Reserved Words (w3schools.com)

Cú pháp Javascript

Cú pháp Javascript là tập hợp quy tắc, cách mà chương trình Javascript được xây dựng lên:

Hai loại giá trị trong JavaScript:

Giá trị cố định (Literals): đại diện cho dữ liệu không thay đổi, bao gồm số và chuỗi.
Giá trị biến đổi (Variables): có thể thay đổi trong quá trình thực thi chương trình.

Cách biểu diễn giá trị cố định:

Số: có thể có hoặc không có phần thập phân, ví dụ: 10.50, 1001.
Chuỗi: văn bản được đặt trong dấu ngoặc kép hoặc đơn, ví dụ: "John Doe", 'John Doe'.

Biến JavaScript:

Trong ngôn ngữ lập trình, biến được dùng để lưu trữ giá trị dữ liệu.
JavaScript sử dụng các từ khóa var, let và const để khai báo biến.
Dấu bằng = được dùng để gán giá trị cho biến.

Ví dụ:

Toán tử JavaScript:

JavaScript sử dụng các toán tử số học (+ - * /) để tính toán giá trị:

Ngoài ra, còn có toán tử gán = để gán giá trị cho biến:

Biểu thức JavaScript:

Biểu thức là sự kết hợp của các giá trị, biến và toán tử, mang lại một giá trị sau khi tính toán.
Quá trình tính toán được gọi là đánh giá.

Ví dụ:

Các giá trị trong biểu thức có thể thuộc nhiều kiểu như số và chuỗi.

Ví dụ:

Từ khóa JavaScript

Từ khóa JavaScript được dùng để xác định hành động cần thực hiện.
Từ khóa let yêu cầu trình duyệt tạo biến:

Từ khóa var cũng có chức năng tương tự, nhưng sẽ được đề cập chi tiết hơn sau.

Chú thích JavaScript

Không phải tất cả các dòng JavaScript đều được "thực thi".
Mã sau dấu gạch chéo kép // hoặc giữa /* và */ được coi là chú thích.
Chú thích sẽ được bỏ qua và không được thực thi

Tên/Nhận dạng JavaScript

Tên (hay nhận dạng) là tên của các biến, từ khóa và hàm trong JavaScript.
Quy tắc đặt tên hợp lệ tương tự như nhiều ngôn ngữ lập trình khác.

Tên JavaScript phải bắt đầu bằng:

Một chữ cái (A-Z hoặc a-z)
Dấu đô la ($)
Dấu gạch dưới (_)

Các ký tự tiếp theo có thể là chữ cái, số, dấu gạch dưới hoặc dấu đô la.

Lưu ý: Các số không được phép làm ký tự đầu tiên của tên biến.

Phân biệt chữ hoa/thường

JavaScript phân biệt chữ hoa/thường.
Các biến lastName và lastname là hai biến khác nhau:

JavaScript sẽ không hiểu LET hoặc Let là từ khóa let.

Kiểu viết tên Camel Case:

Trong lịch sử, lập trình viên đã sử dụng nhiều cách khác nhau để ghép nhiều từ thành một tên biến:

Dấu gạch nối: first-name, last-name, master-card, inter-city (JavaScript không cho phép)

Dấu gạch dưới:

first_name, last_name, master_card, inter-city (ít dùng)

Upper Camel Case (Pascal Case):

FirstName, LastName, MasterCard, InterCity (ít dùng)

Lower Camel Case:

JavaScript thường dùng kiểu viết này, bắt đầu bằng chữ thường: firstName, lastName, masterCard, interCity