CHƯƠNG 1: CƠ SỞ LÝ THUYẾT
1.2. Ngôn ngữ lập trình Fontend
1.2.3. Ngôn ngữ kịch bản Java script
JavaScript, theo phiên bản hiện hành, là một ngôn ngữ lập trình thông dịch được phát triển từ các ý niệm nguyên mẫu. Ngôn ngữ này được dùng rộng rãi cho các trang web (phía người dùng) cũng như phía máy chủ (với Nodejs). Nó vốn được phát triển bởi Brendan Eich tại Hãng truyền thông Netscape với cái tên đầu tiên Mocha, rồi sau đó đổi tên thành LiveScript, và cuối cùng thành JavaScript. Giống Java, JavaScript có cú pháp tương tự C, nhưng nó gần với Self hơn Java. js là phần mở rộng thường được dùng cho tập tin mã nguồn JavaScript.
Cũng giống như C, JavaScript không có bộ xử lý xuất/nhập (input/output) riêng.
Trong khi C sử dụng thư viện xuất/nhập chuẩn, JavaScript dựa vào phần mềm ngôn ngữ được gắn vào để thực hiện xuất/nhập.
Trên trình duyệt, rất nhiều trang web sử dụng JavaScript để thiết kế trang web động và một số hiệu ứng hình ảnh thông qua DOM. JavaScript được dùng để thực hiện một số tác vụ không thể thực hiện được với chỉ HTML như kiểm tra thông tin nhập vào, tự động thay đổi hình ảnh... Tuy nhiên, mỗi trình duyệt áp dụng JavaScript khác nhau và không tuân theo chuẩn W3C DOM, do đó trong rất nhiều trường hợp lập trình viên phải viết nhiều phiên bản của cùng một đoạn mã nguồn để có thể hoạt động trên nhiều trình duyệt. Một số công nghệ nổi bật dùng JavaScript để tương tác với DOM bao gồm DHTML, Ajax và SPA.
Bên ngoài trình duyệt, JavaScript có thể được sử dụng trong tập tin PDF của Adobe Acrobat và Adobe Reader. Điều khiển Dashboard trên hệ điều hành MacOS X phiên bản 10.4 cũng có sử dụng JavaScript.
Từ khi Nodejs ra đời vào năm 2009, Javascript được biết đến nhiều hơn là một ngôn ngữ đa nền khi có thể chạy trên cả môi trường máy chủ cũng như môi trường nhúng.
Mỗi ứng dụng này đều cung cấp mô hình đối tượng riêng cho phép tương tác với môi trường chủ, với phần lõi là ngôn ngữ lập trình JavaScript gần giống nhau.
13 JavaScript có rất nhiều ưu điểm khiến nó vượt trội hơn so với các đối thủ, đặc biệt trong các trường hợp thực tế. Sau đây chỉ là một số lợi ích của JavaScript:
- Chúng ta không cần một compiler vì web browser có thể biên dịch nó bằng HTML;
- Nó dễ học hơn các ngôn ngữ lập trình khác;
- Lỗi dễ phát hiện hơn và vì vậy dễ sửa hơn;
- Nó có thể được gắn trên một số element của trang web hoặc event của trang web như là thông qua click chuột hoặc di chuột tới;
- JS hoạt động trên nhiều trình duyệt, nền tảng;
- Chúng ta có thể sử dụng JavaScript để kiểm tra input và giảm thiểu việc kiểm tra thủ công khi truy xuất qua database;
- Nó giúp website tương tác tốt hơn với khách truy cập;
- Nó nhanh hơn và nhẹ hơn các ngôn ngữ lập trình khác.
Mọi ngôn ngữ lập trình đều có các khuyết điểm. Một phần là vì ngôn ngữ đó khi phát triển đến một mức độ như JavaScript, nó cũng sẽ thu hút lượng lớn hacker, scammer, và những người có ác tâm luôn tìm kiếm những lỗ hổng và các lỗi bảo mật để lợi dụng nó. Một số khuyết điểm có thể kể đến là:
- Dễ bị khai thác;
- Có thể được dùng để thực thi mã độc trên máy tính của người dùng;
- Nhiều khi không được hỗ trợ trên mọi trình duyệt;
- JS code snippets lớn;
- Có thể bị triển khai khác nhau tùy từng thiết bị dẫn đến việc không đồng nhất.
14
1.2.3.1. Vị trí JavaScript trong HTML
JavaScript trong thẻ <head> hoặc <body>: Chúng ta có thể đặt bất kỳ số lượng script nào trong một tài liệu HTML. Các tập lệnh có thể được đặt trong phần <body>, hoặc trong phần <head> của một trang HTML, hoặc trong cả hai.
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. Hàm được gọi (called) khi một nút được nhấp:
JavaScript bên ngoài: Các tập lệnh cũng có thể được đặt trong các tệp tin bên ngoài:
External file: myScript.js
Các script bên ngoài khi cùng một mã được sử dụng trong nhiều trang web khác nhau.
Các tệp JavaScript có đuôi tệp .js.
Để sử dụng một script bên ngoài, hãy đặt tên tệp script vào thuộc tính src (source) của thẻ <script>:
15 Chúng ta có thể đặt tham chiếu script bên ngoài trong thẻ <head> hoặc <body>
theo ý muốn. Script sẽ hoạt động như thể nó nằm chính xác nơi có thẻ <script> được đặt.
1.2.3.2. Các câu lệnh trong JavaScript
Câu lệnh này nói với trình duyệt viết “Hello Dolly”. Bên trong một phần tử HTML với id = “content”:
1.2.3.3. Các chương trình JavaScript
Hầu hết các chương trình JavaScript chứa nhiều câu lệnh JavaScript. Các câu lệnh được thực hiện, từng lệnh một, theo thứ tự như chúng được viết.
Trong ví dụ x, y, và z được cho các giá trị, và cuối cùng z được hiển thị:
Các chương trình JavaScript (và các câu lệnh JavaScript) thường được gọi là mã JavaScript.
1.2.3.4. Dấu chấm phẩy
Các câu lệnh trong JavaScipt được phân tách nhau bằng dấu chấm phẩy. Thêm dấu chấm phẩy vào cuối mỗi câu lệnh thực thi:
16
1.2.3.5. Chiều dài dòng và dòng ngắt của JavaScript
Để có khả năng đọc tốt nhất, các lập trình viên thường muốn tránh các dòng mã dài hơn 80 ký tự.
Nếu một lệnh JavaScript không phù hợp trên một dòng, vị trí tốt nhất để phá vỡ nó là sau một toán tử.
1.2.3.6. Khối mã JavaScript
Các câu lệnh JavaScript có thể được nhóm lại với nhau trong các khối mã, bên trong ngoặc nhọn {…}. Mục đích của các khối mã là để định nghĩa các câu lệnh phải được thực hiện với nhau.
Một vị trí chúng ta sẽ tìm thấy các câu lệnh được nhóm lại với nhau theo khối, nằm trong các hàm JavaScript:
1.2.3.7. Từ khoá JavaScript
Các câu lệnh JavaScript thường bắt đầu với một từ khoá để xác định hành động JavaScript được thực hiện. Dưới đây là danh sách một số từ khóa thường dùng:
Từ khóa Mô tả break Chấm dứt một chuyển đổi hoặc một vòng lặp continue Nhảy ra khỏi vòng lặp và bắt đầu ở đầu
debugger Ngừng thực hiện JavaScript, và các cuộc gọi (nếu có) chức năng
gỡ lỗi
do… while Thực hiện một khối các câu lệnh, và lặp lại khối, trong khi điều
kiện là đúng for Đánh dấu một khối lệnh để được thực hiện, miễn là một điều
kiện là đúng
17 function Khai báo một hàm hoặc chức năng
if … else Đánh dấu một khối lệnh để được thực hiện, tùy thuộc vào điều
kiện return Thoát một hàm hoặc một chức năng
switch Đánh dấu một khối lệnh để được thực hiện, tùy thuộc vào các
trường hợp khác nhau try…Catch Thực hiện xử lý lỗi đối với một khối các câu lệnh
var Khai báo một biến
Bảng 2. Các từ khóa mô tả trong Javascript