Hiện nay, trong những năm gần đây, JavaScript đã trở thành một ngôn ngữ lập trình đang thu hút được sự quan tâm của rất nhiều bạn trẻ. Vậy, JavaScript là gì? Hãy cùng tôi tìm hiểu kiến thức cơ bản về ngôn ngữ này thông qua bài viết dưới đây.
Contents
- 1 JavaScript là gì?
- 2 Lịch sử phát triển của JavaScript
- 3 Các khái niệm liên quan đến JavaScript
- 4 Cách thức hoạt động của JavaScript trên trang web
- 5 Ưu điểm và nhược điểm khi sử dụng JavaScript
- 6 Điểm khác biệt của JavaScript so với các ngôn ngữ lập trình
- 7 Các công cụ dùng để phát triển JavaScript
- 8 Viết chương trình JavaScript
- 9 Xem nhanh các loại dữ liệu trong JavaScript
- 10 JavaScript có thể làm gì?
JavaScript là gì?
JavaScript là một ngôn ngữ lập trình được sử dụng rộng rãi để tạo ra các trang web tương tác. JavaScript được tích hợp và nhúng vào HTML giúp website trở nên sống động hơn. Nó đóng vai trò như một phần của trang web, thực thi từ phía người dùng cũng như phía máy chủ (Nodejs) để tạo ra các trang web động.
JavaScript là một ngôn ngữ lập trình thông dịch với khả năng hướng đến đối tượng. Nó là một trong ba ngôn ngữ chính trong lập trình web và có mối liên hệ lẫn nhau để xây dựng một website sống động và chuyên nghiệp. Đơn giản nhìn tổng quan, ta có:
- HTML: Cung cấp cấu trúc cơ bản, hỗ trợ trong việc xây dựng layout và thêm nội dung dễ dàng trên website.
- CSS: Được sử dụng để kiểm soát và hỗ trợ việc định dạng thiết kế, bố cục, style, màu sắc,…
- JavaScript: Tạo nên những nội dung “động” trên website.
Hãy cùng tìm hiểu rõ hơn về JavaScript ở phần dưới đây.
JS: Viết tắt của JavaScript, khi nhắc đến JS, ta đang nói đến JavaScript.
Lịch sử phát triển của JavaScript
JavaScript được phát triển bởi Brendan Eich tại hãng truyền thông Netscape với tên đầu tiên là Mocha. Sau đó, nó được đổi tên thành LiveScript và cuối cùng là JavaScript – tên đã trở thành phổ biến nhất trong thời gian hiện tại.
Phiên bản mới nhất của JavaScript là ECMAScript (là phiên bản chuẩn hóa của JavaScript). ECMAScript 2 được phát hành vào năm 1998 và ECMAScript 3 được ra mắt năm 1999, hoạt động mạnh mẽ trên mọi trình duyệt và các thiết bị khác nhau.
Năm 2016, JavaScript đạt kỷ lục với 92% website sử dụng và đã trở thành công cụ quan trọng nhất trong các bộ công cụ lập trình web của các lập trình viên. Nếu bạn sử dụng internet và truy cập vào các website, chắc chắn bạn đã thấy các hiệu ứng slide ảnh chuyển động, menu sổ xuống,… đều được tạo ra từ JavaScript.
Các khái niệm liên quan đến JavaScript
Dưới đây là một số khái niệm về JavaScript để bạn có thể hiểu và nắm bắt thêm:
JavaScript Framework là gì?
JavaScript Framework là một thư viện được xây dựng dựa vào ngôn ngữ lập trình JavaScript. Mỗi framework được tạo ra để phục vụ cho từng lĩnh vực khác nhau. Việc tìm hiểu sâu hơn về các framework sẽ giúp bạn có thêm nhiều thông tin rõ ràng hơn. Hiện nay, có rất nhiều JavaScript Framework thông dụng như:
- Reactjs: Thư viện dùng cho ứng dụng di động.
- Node.js: Dùng để xây dựng và phát triển ứng dụng realtime từ phía máy chủ.
- Angular: Dùng để xây dựng ứng dụng Single Page….
Client-side JavaScript là gì?
Client-side JavaScript là một hình thức phổ biến được sử dụng hiện nay. Một trang web không chỉ cần HTML tĩnh, mà còn có thể bao gồm các chương trình có thể tương tác với người dùng hoặc điều khiển trình duyệt và tạo nội dung HTML động.
Cách thức hoạt động của JavaScript trên trang web
JavaScript thường được nhúng trực tiếp vào một trang web hoặc được tham chiếu qua file riêng có đuôi “.js”. JavaScript là ngôn ngữ từ phía client nên mã sẽ được tải về máy client khi truy cập và được xử lý tại đó. Điều này khác biệt so với việc tải về máy chủ và phản hồi kết quả sau khi xử lý.
Hiện nay, các trình duyệt cũng hỗ trợ cho phép bạn tắt/mở JavaScript. Lúc đó, bạn có thể thấy được tác động của việc không có JavaScript trên một trang web như thế nào. Điều này giúp bạn hình dung dễ dàng hơn về cách JavaScript hoạt động.
Ưu điểm và nhược điểm khi sử dụng JavaScript
Hãy cùng tìm hiểu một số ưu điểm và nhược điểm khi sử dụng JavaScript:
Ưu điểm của JavaScript
- JavaScript rất dễ học và hiểu.
- Lỗi JavaScript dễ phát hiện và sửa chữa nhanh chóng.
- Các trình duyệt web có thể dịch nó mà không cần một trình biên dịch.
- JavaScript hoạt động trên nhiều nền tảng và trình duyệt khác nhau.
- Ngôn ngữ lập trình nhẹ, nhanh chóng so với các ngôn ngữ khác.
- Có thể gắn JavaScript vào các phần tử hoặc sự kiện của trang web.
- Tăng trải nghiệm người dùng khi tương tác với trang web.
- Giúp tiết kiệm thời gian kiểm tra dữ liệu thay vì kiểm tra thủ công từ cơ sở dữ liệu.
- Cung cấp giao diện phong phú bao gồm các thành phần Drag and Drop, Slider để cung cấp một giao diện giàu tính năng.
Nhược điểm của JavaScript
- JavaScript dễ bị khai thác từ phía hacker và scammer.
- Có thể được dùng để thực thi mã độc trên máy tính của người dùng.
- Mã JavaScript có thể trở nên dài và phức tạp.
- Các thiết bị khác nhau có thể thực thi JavaScript khác nhau, dẫn đến không đồng nhất.
- Client-side JavaScript không cho phép đọc và ghi các file vì tính bảo mật.
- Không hỗ trợ kết nối mạng khi sử dụng JavaScript.
- JavaScript không có khả năng đa luồng hoặc đa xử lý.
Điểm khác biệt của JavaScript so với các ngôn ngữ lập trình
JavaScript đóng vai trò là ngôn ngữ chính trong lập trình web, tuy nhiên các lập trình viên cũng cần kết hợp và áp dụng một số ngôn ngữ khác trong quá trình làm việc của mình. Dưới đây là một số ngôn ngữ mà các lập trình viên thường sử dụng:
Các công cụ dùng để phát triển JavaScript
IDE JavaScript là gì?
IDE (Integrated Development Environment) là một môi trường lập trình được tích hợp với nhiều công cụ và tiện ích khác nhau như trình soạn thảo code, trình gỡ lỗi, trình mô phỏng,… IDE JavaScript là một môi trường chuyên dụng cho các lập trình viên khi lập trình JavaScript.
Nên sử dụng IDE nào khi code JavaScript?
Có một số IDE phổ biến được sử dụng ngày nay như:
- NotePad++
- Visual Studio
- PHP Designer
- Dreamweaver
- Sublime Text
Ngoài ra, còn có một số công cụ chỉnh sửa JavaScript được đánh giá cao như:
- Microsoft FrontPage
- Macromedia Dreamweaver MX
- Macromedia Homesite 5
File .JS là file gì?
File .js là các file văn bản được định dạng dưới dạng text. Một file .js chứa mã JavaScript để thực thi các câu lệnh JavaScript trong trang web. Các file này có thể bao gồm các chức năng mở và đóng các cửa sổ, validate, kích hoạt hình ảnh cuộn qua hoặc tạo menu drop-down.
Viết chương trình JavaScript
Mở và đóng thẻ
Tất cả các đoạn mã JavaScript đều được đặt trong cặp thẻ đóng mở <script></script>
. Ví dụ cụ thể như sau:
<script>
// Đoạn mã JavaScript
</script>
Cách đặt thẻ Script
Có 3 cách đặt thẻ script thường được sử dụng như dưới đây:
Internal
Thường thì thẻ script được đặt trong thẻ <head>
, nhưng bạn có thể đặt ở bất cứ đâu và chứa đủ cả thẻ mở và đóng <script>
. Với cách này, bạn đặt phần head trong file html hiện tại của mình.
<head>
<script>
// Đoạn mã JavaScript
</script>
</head>
External
Với cách này, bạn có thể viết mã JavaScript ra một file riêng và lưu với đuôi .js. Sau đó, bạn sử dụng thẻ <script>
để import file vào. Bạn không cần thẻ đóng </script>
vì file test.js đã có đuôi là js, nên trình duyệt sẽ tự nhận dạng được đó là file chứa mã JavaScript.
<script src="path-to-your-js-file.js"></script>
Inline
Cách này là bạn viết trực tiếp mã JavaScript vào trong thẻ HTML.
<script>
// Đoạn mã JavaScript
</script>
Viết chương trình JavaScript đơn giản
Trước khi bắt đầu viết chương trình JavaScript, bạn cần cài đặt phần mềm Notepad++ hoặc các phần mềm, công cụ viết code khác.
Bước 1: Tạo 1 file index.html ở bất kỳ vị trí nào trên máy tính, miễn là có phần mở rộng là .html. Sau đó, viết đoạn mã sau:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Demo</title>
<script>
function myFunction() {
alert("Xin chào! Tôi là JavaScript.");
}
</script>
</head>
<body>
<h2>JavaScript Demo</h2>
<button onclick="myFunction()">Click me</button>
</body>
</html>
Bước 2: Bây giờ bạn có thể viết mã JavaScript sẽ được thực thi khi nhấn vào nút có id=”clickme”.
Xem nhanh các loại dữ liệu trong JavaScript
Dưới đây là một số loại dữ liệu quan trọng trong JavaScript. Ta có các biến JavaScript có thể là:
- Numbers (Số)
- Strings (Chuỗi)
- Objects (Đối tượng)
- Arrays (Mảng)
- Functions (Hàm)
JavaScript Variables
Biến JavaScript là các vùng chứa để lưu trữ giá trị dữ liệu. Trong ví dụ này, x, y và z là các biến:
var x = 5;
var y = 6;
var z = x + y;
Từ ví dụ trên, ta có:
- x lưu giá trị 5.
- y lưu trữ giá trị 6.
JavaScript Numbers
JavaScript chỉ có một loại số, các số có thể được viết có hoặc không có số thập phân. Tất cả các số được lưu trữ dưới dạng dấu phẩy động có độ chính xác kép. Số thập phân tối đa là 17, nhưng dấu phẩy động không phải lúc nào cũng chính xác 100%.
JavaScript Strings
Strings lưu trữ văn bản và được viết trong dấu ngoặc kép hoặc đơn:
var text = "Hello JavaScript";
Chiều dài của chuỗi có thể được tìm thấy bằng thuộc tính built-in length:
JavaScript Objects
Bạn đã biết rằng biến JavaScript là các vùng chứa cho các giá trị dữ liệu. Đối tượng cũng là biến, nhưng chúng có thể chứa nhiều giá trị. Ví dụ:
var car = {type:"Fiat", model:"500", color:"white"};
JavaScript Arrays
Mảng JavaScript được sử dụng để lưu trữ nhiều giá trị trong một biến duy nhất.
var cars = ["Saab", "Volvo", "BMW"];
JavaScript Functions
Hàm JavaScript là một khối mã được thiết kế để thực hiện một tác vụ cụ thể. Hàm JavaScript được thực thi khi có “cái gì đó” gọi nó.
function myFunction(p1, p2) {
return p1 * p2; // Hàm trả về tích của p1 và p2
}
JavaScript có thể làm gì?
Phần này chứa một số ví dụ về những gì JavaScript có thể làm:
- JavaScript có thể thay đổi nội dung HTML.
- JavaScript có thể thay đổi giá trị thuộc tính HTML.
- JavaScript có thể thay đổi kiểu HTML (CSS).
- JavaScript có thể ẩn các phần tử HTML.
- JavaScript có thể hiển thị các phần tử HTML.
JavaScript thay đổi nội dung HTML
Một trong nhiều phương thức HTML JavaScript là getElementById()
. Ví dụ này sử dụng phương thức để “tìm” một phần tử HTML (có id=”demo”) và thay đổi nội dung của phần tử (innerHTML) thành “Hello JavaScript”.
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript";
</script>
<div id="demo">Xin chào</div>
JavaScript thay đổi giá trị thuộc tính HTML
Trong ví dụ này, JavaScript thay đổi giá trị của thuộc tính src (source) của thẻ <img>
.
<script>
document.getElementById("myImage").src = "newImage.jpg";
</script>
<img id="myImage" src="oldImage.jpg">
JavaScript 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 thuộc tính HTML.
<script>
document.getElementById("demo").style.fontSize = "25px";
</script>
<h1 id="demo">Hello JavaScript</h1>
JavaScript ẩn các phần tử HTML
Ẩn các phần tử HTML có thể được thực hiện bằng cách thay đổi kiểu hiển thị.
<script>
document.getElementById("demo").style.display = "none";
</script>
<p id="demo">Đoạn văn bản sẽ bị ẩn</p>