Bài trước: CuTeoHocLamWeb(4): Kế thừa, kỹ thuật xếp lớp trong CSS
-----
5. Làm quen với JavaScript
Đến bài học này, chúng ta đã làm quen với HTML, với CSS; cả 2 đều không phải là ngôn ngữ lập trình. Để có thể làm được trang web sinh động, thực hiện được nhiều chức năng thì bắt buộc chúng ta phải sử dụng đến một ngôn ngữ lập trình.
JavaScript là ngôn ngữ lập trình chúng ta sẽ cùng bắt đầu tìm hiểu. Trong lĩnh vực làm web, ngôn ngữ JavaScript rất quan trọng, vì vậy bạn nên học để có thể sử dụng thành thạo ngôn ngữ này.
5.1 Vài thông tin chung về JavaScript
JavaScript là ngôn ngữ lập trình, do Brendan Eich – một nhà công nghệ người Mỹ, phát triển vào năm 1995. Tên ban đầu của JavaScript là Mocha, sau đổi thành LiveScript, hiện nay đang có tên là JavaScript.
Cũng như các ngôn ngữ lập trình khác, JavaScript không ngừng được cải tiến, thay đổi; do vậy tính từ khi ra đời đến nay đã có rất nhiều phiên bản của JavaScript được tạo ra. Hiện nay, mọi người đang sử dụng các phiên bản JavaScript do tổ chức European Computer Manufacturers Association (ECMA) chuẩn hóa, nên có tên gọi là ECMAScript (thường được gọi tắt là ES).
Các phiên bản của ECMAScript:
Phiên bản Năm ra đời
1 1997
2 1998
3 1998
E4X 2004
5 2009
ES6 2015
Từ năm 2016, các phiên bản được đặt tên theo năm ra đời: ECMAScript 2016, ECMAScript 2017, ECMAScript 2018, ECMAScript 2019, ECMAScript 2020, ECMAScript 2021, ECMAScript 2022
JavaScript hỗ trợ nhiều kiểu lập trình (hay mẫu hình – paradigm), như lập trình kịch bản (scripting), lập trình hướng đối tượng (object-oriented), lập trình hàm (functional), lập trình mệnh lệnh (imperative), lập trình hướng sự kiện (event-driven), lập trình thủ tục (procedural).
Tập tin mã nguồn JavaScript có phần mở rộng là .js.
Chúng ta có thể sử dụng JavaScript để lập trình web front-end, web back-end, ứng dụng di động, ứng dụng desktop.
Một số thư viện, framework dựa trên JavaScript: jQuery, React, Angular, Vue (web front-end); Express, Next (web back-end); React Native (mobile app), Electron (desktop app).
5.2 Chương trình đầu tiên
Phần này, chúng ta sẽ học JavaScript căn bản và áp dụng một số kiến thức để làm web front-end; tất nhiên những kiến thức nền tảng về JavaScript vẫn luôn có ích cho bạn trong các môi trường làm việc khác.
Để viết một chương trình bằng ngôn ngữ lập trình bất kì, một vài câu hỏi đầu tiên luôn là:
- Dùng phần mềm gì để viết mã
- Dùng phần mềm gì để dịch mã nguồn, để thực thi chương trình và hiển thị kết quả
Với JavaScript,
- Bạn có thể viết mã JavaScript bằng trình duyệt web (ví dụ Chrome), text editor (Notepad), code editor (VS Code, Sublime Text), hoặc IDE (Visual Studio, PHPStorm)
- Để để dịch mã nguồn, thực thi chương trình và hiển thị kết quả, bạn có thể sử dụng Nodejs, hoặc trình duyệt web (Chrome)
Để lập trình nhanh và tiện lợi, bạn nên sử dụng code editor hoặc IDE. Ví dụ chúng ta có thể sử dụng các trình viết mã như VS code, Sublime Text.
Chúng ta cùng trải nghiệm viết một chương trình JavaScript đơn giản bằng một số cách.
Cách 1. Dùng cửa sổ console của trình duyệt web
– Mở trình duyệt web (ví dụ Chrome)
– Mở cửa sổ Developer tools (bấm F12 hoặc Fn + F12; chuột phải vào cửa sổ trình duyệt > chọn Inspect; hoặc vào menu > chọn More tools > chọn Developer tools)
– Trong cửa sổ Developer tools, chọn tab Console
– Nhập vào dòng mã nguồn sau, bấm Enter để xem kết quả:
console.log('chao bac Teo!');
– Để xóa sạch màn hình Console, bấm phím Ctrl + L, hoặc gõ vào lệnh console.clear();
Cách 2. Nhúng mã JavaScript trong tài liệu HTML
Tạo mới một tập tin HTML bằng trình soạn thảo mã nguồn bất kỳ (ví dụ: Notepad, VS code) và nhập vào đoạn mã sau,
<!DOCTYPE html>
<head>
<title>test</title>
</head>
<body>
<script>
alert("Chao bac Teo");
</script>
</body>
</html>
Lưu lại tập tin và mở bằng trình duyệt để xem kết quả. Một cửa sổ thông báo sẽ xuất hiện, với nội dung là “Chao bac Teo”.
Cách 3. Viết mã JavaScript trong một tập tin .js
– Tạo thư mục rainbow, trong thư mục này tạo hai tập tin rainbow.html và main.js
– Nhập đoạn mã sau cho tập tin rainbow.html
<!DOCTYPE html>
<html>
<head>
<title>I Can Click A
Rainbow</title>
</head>
<body>
<button id='button'>click me</button>
<script src='main.js'></script>
</body>
</html>
– Nhập đoạn mã sau cho tập tin main.js
const btn = document.getElementById('button');
const rainbow = ['red','orange','yellow','green','blue','rebeccapurple','violet'];
function change(){
document.body.style.background = rainbow[Math.floor(7*Math.random())];
}
btn.addEventListener('click', change);
– Mở tập tin rainbow.html bằng trình duyệt, bấm nút “click me” để xem màu nền thay đổi.
Cách 4. Chạy mã JavaScript trên nền tảng Nodejs
– Vào trang web của Nodejs, tải chương trình Nodejs về máy tính: https://nodejs.org/en/
– Cài đặt Nodejs trên máy tính, sau khi cài đặt xong, vào cmd, gõ lệnh node –v để kiểm tra xem việc cài đặt Nodejs được chưa, nếu cửa sổ dòng lệnh có hiển thị phiên bản là đã cài đặt được
– Mở một trình soạn thảo mã nguồn bất kỳ (ví dụ: Notepad, VS code) và nhập vào đoạn mã sau:
console.log(‘Chao bac Teo’);
– Lưu lại với tên myjs.js, để trong ổ đĩa D:\
– Mở cửa sổ dòng lệnh (cmd), di chuyển dấu nhắc lệnh về ổ đĩa D:\
– Gõ lệnh node myjs.js để Nodejs thực thi đoạn mã, xem kết quả xuất ra ngay cửa sổ dòng lệnh
5.3 Bài tập
1. Có thể viết mã JavaScript bằng công cụ nào? Đáp án nào không đúng.
A. Trình duyệt web
B. Text editor
C. Code editor hoặc IDE
D. Ms Paint
2. Tập tin mã nguồn JavaScript có phần mở rộng là?
A. java
B. javascript
C. jsp
D. js
3. Một số thư viện, framework dựa trên JavaScript? Đáp án nào không đúng.
A. Angular, Vue, React, jQuery
B. Django, Flash
C. React Native, Electron,
D. Express, Next
4. Viết và chạy
các đoạn mã trong bài học.
-----
Gợi ý trả lời câu hỏi
1(D), 2(D), 3(B)
-----
Cập nhật: 5/12/2024
