Trong loạt series này chúng ta sẽ tìm hiểu ngôn ngữ JavaScript từ căn bản đến nâng cao được trình bày chi tiết, giúp các bạn dễ dàng học nhất. Với mỗi ví dụ sau khi đọc xong nội dung, bạn có thể click nút “Try it” để thử thao tác từ đó hiểu thêm nhé. Ở bài đầu tiên này chúng ta sẽ tìm hiểu JavaScript là gì? Và cùng nhìn tổng quát về ngôn ngữ này.
1. JavaScript là gì?
– JavaScript thường được viết tắt là JS, là một ngôn ngữ lập trình kịch bản phía máy khách (client-side) dựa vào đối tượng phát triển có sẵn hoặc tự định nghĩa, JavaScript được sử dụng rộng rãi trong các ứng dụng website. Cùng với HTML và CSS, JavaScript là một trong ba công nghệ cốt lõi của World Wide Web. JavaScript được hỗ trợ hầu như trên tất cả các trình duyệt như Firefox, Chrome,… thậm chí với các trình duyệt trên thiết bị di động.
– JavaScript được biết đến lần đầu tiên là Mocha và chỉ ngay sau đó một thời gian nó lại được đổi tên thành LiveScript và cuối cùng Netscape đã đổi tên thành JavaScript, bởi vì sự phổ biến của Java như là một hiện tượng lúc bấy giờ. Sau đó Netscape đã chuyển JavaScript đến ECMA International để làm công tác chuẩn hóa và viết đặc tả,… Cái tên ECMAScript đã được hình thành từ đây. Phần core của ngôn ngữ này đã được nhúng vào hầu hết các trình duyệt Netscape, Internet Explorer, Chrome, Firefox,…
Có thể bạn quan tâm: Lịch sử phát triển JavaScript.
2. Giới thiệu về client-side JavaScript
– Client-side JavaScript là ngôn ngữ phổ biến nhất. Tập lệnh (script) được bao gồm trong HTML document hoặc được tham chiếu bởi HTML document, sẽ được trình duyệt biên dịch và thực thi. Có thể tương tác với người dùng, kiểm soát trình duyệt và tạo nội dung HTML động.
– Cơ chế phía máy khách JavaScript (JavaScript client-side) cung cấp nhiều lợi thế hơn các kịch bản lệnh phía máy chủ CGI (CGI server-side) truyền thống. Ví dụ: bạn có thể sử dụng JavaScript để xem liệu người dùng đã nhập địa chỉ email hợp lệ vào form hay chưa. Mã JavaScript được thực hiện khi người dùng gửi form, và chỉ được thực thi nếu tất cả các mục nhập hợp lệ và được gửi đến Web Server. Điều này sẽ giúp giảm tải xử lý ở Web Server.
– Với JavaScript, bạn có thể tương tác với khi dùng khi họ sử dụng website, chẳng hạn như khi click chuột vào button, click vào liên kết, thay đổi kích thước website,… Dưới đây là một số ví dụ về những gì JavaScript có thể làm:
● JavaScript có thể thay đổi nội dung HTML:
Trong ví dụ này, JavaScript sử dụng phương thức getElementById() để tìm HTML element có id = “demo” và thay đổi nội dung (innerHTML) thành “Hello JavaScript!“.
Ví dụ:
[code language=”javascript”]document.getElementById("demo").innerHTML = "Hello JavaScript!"[/code] Try it »Chuỗi JavaScript chấp nhận cả dấu nháy kép và dấu nháy đơn.
Ví dụ:
[code language=”javascript”]document.getElementById(‘demo’).innerHTML = ‘Hello JavaScript!'[/code] Try it »
● JavaScript có thể thay đổi giá trị của 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>.
● JavaScript có thể thay đổi style (CSS) của một HTML element:
Ví dụ:
[code language=”javascript”]document.getElementById("demo").style.fontSize = "35px";or
document.getElementById(‘demo’).style.fontSize = ’35px’;[/code] Try it »
● JavaScript có thể ẩn HTML element:
Ví dụ:
[code language=”javascript”]document.getElementById("demo").style.display = "none";or
document.getElementById(‘demo’).style.display = ‘none’;[/code] Try it »
● JavaScript có thể hiện lại HTML element đã ẩn:
Ví dụ:
[code language=”javascript”]document.getElementById("demo").style.display = "block";or
document.getElementById(‘demo’).style.display = ‘block’;[/code] Try it »
3. Các lợi thế của JavaScript
Các lợi thế của việc sử dụng JavaScript là:
- Giảm thiểu sự tương tác với server: Bạn có thể xác thực đầu vào (input) là hợp lệ từ người dùng trước khi gửi trang đến server. Điều này tiết kiệm lưu lượng máy chủ và giảm tải trên máy chủ.
- Phản hồi ngay lập tức tới khách truy cập (visitor): Họ không phải đợi để tải lại trang để xem họ có quên nhập nội dung nào đó không.
- Cải thiện tương tác: Bạn có thể tạo các giao diện mà phản ứng lại khi người sử dụng rê chuột qua chúng hoặc kích hoạt chúng thông qua bàn phím.
- Giao diện mạnh mẽ hơn: Bạn có thể sử dụng JavaScript để bao gồm những mục như các thành phần Drag và Drop (DnD) và các Slider,… để cung cấp một giao diện đa dạng tới site khách truy cập trang web của mình.
4. Hạn chế của JavaScript
JavaScript không thể được coi là một ngôn ngữ lập trình chính thức (full-fledged). Bởi vì thiếu các tính năng quan trọng sau:
- JavaScript phía máy khách (Client-side JavaScript) không cho phép đọc hoặc ghi file, bởi vì lý do bảo mật.
- JavaScript không thể được sử dụng cho các ứng dụng mạng, bởi vì không có những hỗ trợ có sẵn.
- JavaScript không có chức năng đa luồng hoặc đa xử lý.
Một lần nữa, JavaScript là một ngôn ngữ chương trình nhẹ (lightweight), được thông dịch cho phép bạn xây dựng khả năng tương tác với các trang HTML tĩnh.
5. Một số công cụ dùng để phát triển JavaScript
– Một trong những điểm mạnh của JavaScript là nó không đòi hỏi các công cụ phát triển đắt tiền. Bạn có thể bắt đầu bằng trình soạn thảo văn bản đơn giản như Notepad. Vì đây là một ngôn ngữ được biên dịch trong ngữ cảnh của một trình duyệt web, bạn không cần phải mua một trình biên dịch (compiler).
– Để làm cho việc viết code JavaScript đơn giản hơn, một số trình soạn thảo JavaScript sẽ được liệt kê dưới đây:
- Macromedia Dreamweaver: là công cụ dẫn đầu trong các phần mềm thiết kế web cho phép người dùng thiết kế hiệu quả với trình biên tập HTML, CSS và JavaScript rất mạnh mẽ.
- Notepad++ (notepad-plus-plus.org): là tool dùng để editor JavaScript nhẹ nhàng, nhanh chóng.
- Sublime Text (sublimetext.com): là một trình editor hay và nhẹ, được sử dụng nhiều bởi web developers, coders, và programmers. Nó sẵn có cho Mac, Windows, Linux và cho phép tải về và sử dụng miễn phí.
- Hoặc bạn cũng có thể sử dụng các trình javascript editor online như:
– Ngoài ra, bạn cũng có thể dùng Eclipse, NetBeans,… hay bất kỳ trình soạn thảo JavaScript nào mà tạo cho bạn lập trình JavaScript thuận tiện nhất.
