Trong bài này chúng ta sẽ cùng kỹ năng số tìm hiểu về những khái niệm cơ bản nhất của ngôn ngữ lập trình JavaScript, và những công nghệ / Javascript Framework phổ biến nhất hiện nay.
1. JavaScript là gì?
JavaScript là một ngôn ngữ lập trình của HTML và WEB. Javascript rất nhẹ và được sử dụng phổ biến nhất như là một phần của các trang web, mà sự thi hành của chúng cho phép Client-Side script tương tác với người sử dụng và tạo các trang web động. Nó là một ngôn ngữ chương trình thông dịch với các khả năng hướng đối tượng.
JavaScript được biết đến đầu tiên với tên Mocha, và sau đó là LiveScript, nhưng công ty Netscape đã đổi tên của nó thành JavaScript, bởi vì sự phổ biến như là một hiện tượng của Java lúc bấy giờ. JavaScript xuất hiện lần đầu trong Netscape 2.0 năm 1995 với tên LiveScript. Core đa năng của ngôn ngữ này đã được nhúng vào Netscape, IE, và các trình duyệt khác.
Javascript được hỗ trợ hầu như trên tất cả các trình duyệt như Firefox, Chrome, … trên máy tính lẫn điện thoại.
ECMA-262 Specification định nghĩa một phiên bản chuẩn của ngôn ngữ JavaScript như sau:
- JavaScript là một ngôn ngữ chương trình thông dịch, nhẹ.
- Được thiết kế để tạo các ứng dụng mạng trung tâm.
- Bổ sung và tích hợp với Java.
- Bổ sung và tích hợp với HTML.
- Mở và đa nền tảng.
Trong những năm gần đây, sự xuất hiện của các framework như NodeJS (chuyên code backend), ExpressJS (NodeJS framework), và nhiều thư viện frontend khác như Angular, jQuery, RactJS ra đời, giúp tạo ra một cơn sốt với từ khóa Javascript Fullstack.
2. Javascript Framework là gì?
Javascript Framework là một bộ thư viện được xây dựng dựa vào ngôn ngữ lập trình Javascript. Mỗi framework thường được tạo ra để phục vụ cho một lĩnh vực nào đó. Ví dụ với Angular và React thì chuyên xử lý frontend, NodeJS thì chuyên xử lý backend, jQuery là một thư viện rất mạnh khi xử lý DOM HTML và CSS.
Sức mạnh của Javascript là không thể chối cãi, bằng chứng là hiện nay có rất nhiều libraries và framework được viết bằng Javascript ra đời như:
- Angular: Một thư viện dùng để xây dựng ứng dụng Single Page.
- NodeJS: Một thư viện được phát triển phía Server dùng để xây dựng ứng dụng realtime.
- Sencha Touch: Một Framework dùng để xây dựng ứng dụng Mobile.
- ExtJS: Một Framework dùng xây dựng ứng dụng quản lý (Web Applications).
- jQuery: Một thư viện rất mạnh về hiểu ứng.
- ReactJS: Một thư viện viết ứng dụng mobie.
- Và còn nhiều thư viện khác.
3. Javascript có thể làm những gì?
3.1 Thay đổi nội dung HTML
Hãy chạy thử ví dụ dưới đây
<!DOCTYPE html>
<html>
<body>
<h2>Javascript có thể làm được những gì?</h2>
<p id="demo">Thay đổi nội dung HTML.</p>
<button type="button" onclick='document.getElementById("demo").innerHTML = "Nội dung đã được thay đổi"'>Bấm để xem!</button>
</body>
</html>
3.2 JavaScript có thể thay đổi giá trị thuộc tính HTML
Hãy chạy thử ví dụ dưới đây
<html>
<body>
<h2>JavaScript có thể làm nhưng gì?</h2>
<p>JavaScript có thể thay đổi giá trị thuốc tính HTML.</p>
<p>Trong ví dụ này JavaScript đã thay đổi giá trị của thuộc tính src của thẻ img.</p>
<button onclick="document.getElementById('myImage').src='https://hourofcode.vn/wp-content/uploads/2022/05/Den-sang.gif'">Bật đèn lên</button>
<img id="myImage" src="pic_bulboff.gif" style="width:100px">
<button onclick="document.getElementById('myImage').src='https://hourofcode.vn/wp-content/uploads/2022/05/Den-tat.gif'">Tắt đèn đi</button>
</body>
</html>
3.3 JavaScript có thể thay đổi kiểu HTML (CSS)
Thay đổi kiểu của một phần tử HTML, là một biến thể của việc thay đổi một thuộc tính HTML:
<html>
<body>
<h2>Javascript có thể làm những gì?</h2>
<p id="demo">JavaScript có thể thay đổi kiểu của các phần tử HTML.</p>
<button type="button" onclick="document.getElementById('demo').style.fontSize='30px'">Bấm để xem!</button>
</body>
</html> 3.4 JavaScript có thể hiển thị các phần tử HTML
Chạy thử đoạn code sau
<html>
<body>
<h2>Javascript có thể làm những gì?</h2>
<p>JavaScript có thể hiển thị các phần tử HTML.</p>
<p id="demo" style="display:none">BẠN ĐÃ THÊM DÒNG CHỮ NÀY!</p>
<button type="button" onclick="document.getElementById('demo').style.display='block'">Bấm vào để thêm!</button>
</body>
</html>