JavaScript là gì? Cách hoạt động và ứng dụng của ngôn ngữ JS

Trong những năm gần đây JavaScript trở thành một ngôn ngữ lập trình phổ biến và thông dụng. Nhiều framework được viết bằng chính ngôn ngữ đặc biệt này. Trong bài viết dưới đây, BKHOST sẽ thông tin chi tiết giúp bạn trả lời những câu hỏi như JavaScript là gì? Chúng ta có thể làm gì với nó?

JavaScript là gì?

Tương tự như những ngôn ngữ lập trình khác, JavaScript (Js) cho phép người dùng triển khai những tính năng phức tạp trên web. Những thông tin tĩnh được web hiển thị hay nội dung được cập nhật kịp thời, hoạt hình 2D/3D…đều có liên quan trực tiếp tới JavaScript.

JavaScript đóng vai trò như một phần của website, được tích hợp hoặc nhúng vào HTML để tạo sự sống động cho các trang web. Như vậy có thể thấy 3 lớp bánh của công nghệ web tiêu chuẩn sẽ gồm HTML, CSS, JavaScript trong đó JavaScript chính là lớp thứ 3. Cả ba lớp này xây dựng chồng lên nhau cùng hỗ trợ để tạo nên những tính năng tuyệt vời cho website.

• Để cấu trúc và cung cấp ý nghĩa cho nội dung web, lập trình viên sẽ sử dụng ngôn ngữ HTML. Một số ví dụ cụ thể như xác định các đoạn văn, tiêu đề, nhúng hình ảnh, video và trang.
• Tạo phong cách cho website là chức năng chính của ngôn ngữ CSS. Nó tìm và định dạng các phần tử được tạo ra bởi HTML chẳng hạn như đặt màu nền và phông chữ, sắp xếp nội dung trong các cột.
• Trường hợp tạo nội dung động, hình ảnh động và nội dung động cho web người dùng cần đến ngôn ngữ lập trình JavaScript.

Ví dụ:

JavaScript có thể làm được gì?

Nắm được mục đích của ngôn ngữ lập trình JavaScript sẽ giúp bạn dễ dàng sử dụng trong công việc. Với những tính năng đa dạng JavaScript cho phép người dùng thực hiện những hoạt động như:

• JavaScript giúp người dùng lưu trữ các giá trị bên trong các biến, thao tác trên các đoạn văn bản và chạy code để phản hồi sự kiện.
• Tạo dựng trò chơi: So với những ngôn ngữ lập trình khác thì JavaScript khá linh hoạt để giúp bạn xây dựng những trò chơi từ đơn giản đến phức tạp trên nền tảng Internet.
• Các ngôn ngữ dành riêng cho hệ điều hành Jara, Swift được dùng để phát triển ứng dụng di động. Như vậy không có lý do gì để bạn bỏ qua việc dùng JavaScript.
• Tạo các yếu tố web tương tác chính là một trong những hoạt động bạn nên dùng JavaScript.

Một điều thú vị là khi người dùng sử dụng API (giao diện lập trình ứng dụng) sẽ có cơ hội trải nghiệm những điều bổ ích. Các giao diện phần mềm ứng dụng này cung cấp cho bạn những khả năng để sử dụng trong code JavaScript. Hiện tại API gồm API trình duyệt và các API bên thứ ba.

API trình duyệt được tích hợp sẵn trong trình duyệt web của bạn. Chức năng chính của nó là hiển thị dữ liệu từ môi trường máy tính xung quanh và thực hiện một số thao tác phức tạp, cụ thể:

• DOM (Document Object Model) API cho phép bạn thực hiện những thao tác HTML và CSS như tạo, xóa, thay đổi…
• Geolocation API đóng vai trò như một Google Maps giúp người dùng truy xuất thông tin địa lý một cách dễ dàng.
• Tương tự như canvas, khi sử dụng WebGL APIs bạn sẽ tạo được đồ họa 2D, 3D hoạt hình từ đơn giản đến phức tạp.
• Công nghệ đặc biệt này cho phép bạn thực hiện nhiều điều tuyệt vời với đa phương tiện. Chẳng hạn như phát video, âm thanh trong cùng một trang web hoặc hiển thị video từ máy ảnh web của bạn trên máy tính người khác.

Trình duyệt bạn không tích hợp mặc định API của bên thứ ba. Để có code và thông tin của chúng bạn phải lấy từ một vị trí khác trên web ví dụ như API Twitter hay API Google Maps, API OpenStreetMap.

Hoạt động của JavaScript trên trang Web

Trong trình duyệt của mình khi người dùng tải một trang web, lúc đó các đoạn code HTML, CSS và JavaScript sẽ được chạy trong môi trường thực thi. Hiểu một cách đơn giản thì quá trình này giống như một nhà máy dùng nguyên liệu thô (code) để tạo nên sản phẩm (trang web).

Thông qua API, JavaScript sẽ sửa đổi động HTML và CSS để cập nhật giao diện cho người dùng. Code trong web của người dùng được tải và thực thi theo quy tắc và thứ tự. Vì vậy một nếu xảy ra lỗi thì có thể do JavaScript được tải trước CSS và HTML mà nó định sửa lỗi.

Bảo mật trình duyệt

Ở các tab trình duyệt sẽ có các nhóm riêng biệt để chạy code. Như vậy có nghĩa là code ở mỗi tab chạy riêng biệt và không ảnh hưởng đến code ở tab khác và trên trang web khác. Đây là một phương án tối ưu giúp người dùng bảo mật tốt mọi dữ liệu để tránh sự đột nhập của kẻ tấn công.

Lệnh chạy JavaScript

Trình duyệt của bạn sẽ chạy theo thứ tự từ trước đến sau khi gặp một khối JavaScript. Vì thế bạn nên quan sát và cẩn trọng xem thử mọi thứ mình sắp xếp đã theo trình tự chưa. Dưới đây là một ví dụ cụ thể về lệnh chạy JavaScript:

{{EJS0}}

Trường hợp bạn hoán đổi thứ tự của các dòng code thì nó sẽ không hoạt động nữa. Lúc này trình duyệt của bạn sẽ gặp lỗi và được trả về trong bảng điều khiển. Đó chính là một trong những lỗi phổ biến mà bạn nên lưu ý để tránh gặp rắc rối.

Code được thông dịch so với code biên dịch

Trong lập trình chắc hẳn bạn sẽ nghe tới những thuật ngữ như thông dịch và biên dịch. Code sẽ được chạy theo thứ tự từ trên xuống dưới và trả kết quả ngay lập tức đối với ngôn ngữ thông dịch. Trước khi trình duyệt chạy code bạn không cần phải chuyển đổi nó thành một dạng khác. Trường hợp với ngôn ngữ biên dịch thì code sẽ được chuyển thành một dạng khác trước khi trình duyệt chạy nó.

JavaScript thuộc loại ngôn ngữ lập trình thông dịch nhẹ. Code JavaScript ở dạng văn bản gốc sẽ được trình duyệt web nhận và chạy tập lệnh. Tuy nhiên để cải thiện hiệu suất các trình thông dịch JavaScript hiện đại đều sử dụng một kỹ thuật được gọi là “biên dịch đúng lúc”. Mã nguồn JavaScript được chuyển thành dạng nhị phân để quá trình duyệt web diễn ra nhanh nhất có thể.

Server-side và client-side code

Trong bối cảnh phát triển web hẳn nhiều người đã quen thuộc với thuật ngữ Server-side code và client-side code. Client-side code là dạng code chạy trực tiếp trên máy tính của người sử dụng. Khi một website được mở ra, code ở client của web sẽ được tải xuống, chạy và được hiển thị bởi trình duyệt.

Kết quả được tải và hiển thị trong trình duyệt được gọi là Server-side code (mã máy chủ). Một số ngôn ngữ web được dùng nhiều ở máy chủ gồm PHP, Ruby, ASP.NET. Trong môi trường Node.js, JavaScript cũng được sử dụng như các ngôn ngữ nói trên.

Dynamic và static code

Từ “dynamic” dùng để mô tả ngôn ngữ lập trình JavaScript ở cả server và client. Cụ thể đó là khả năng tạo nội dung mới theo nhu cầu của người dùng, cập nhật hiển thị của website linh hoạt trong các trường hợp khác nhau. Còn từ “static“ dành để nói tới những trang web nội dung không được cập nhật. Ở bất cứ vị trí và thời điểm nào nó cũng chỉ hiển thị cùng một nội dung.

JavaScript được thêm vào trang như thế nào?

Nhúng JavaScript kiểu Internal (nhúng trực tiếp vào file .html)

Bước 1: Tạo một file mẫu apply-javascript.html và lưu nó vào một thư mục phù hợp.

Bước 2: Mở file vừa tạo trên trình duyệt và trong trình soạn thảo code.

Bước 3: Chuyển đến trình soạn thảo văn bản và thêm nội dung sau vào trước thẻ đóng:

{{EJS1}}

Bước 4: Để trang web hoạt động thú vị hơn hãy thêm một số JavaScript vào bên trong

{{EJS2}}

Bước 5: Cuối cùng bạn hãy lưu tệp và refresh trình duyệt.

Lưu ý: Sau khi thực hiện các bước nhưng trình duyệt không hoạt động bạn hãy kiểm tra lại tất cả quy trình. Một số câu hỏi bạn nên đặt ra như bản sao code cục bộ được lưu dưới dạng .html tệp không?<script> đã được thêm trước </head> thẻ chưa? Cú pháp của JavaScript chính đã thực sự chính xác?

Nhúng JavaScript kiểu External (Nhúng vào file .html bằng 1 file .js độc lập)

Trong trường hợp bạn muốn cài đặt JavaScript của mình vào một tệp bên ngoài hãy thực hiện các bước sau:

Bước 1: Trong thư mục HTML mẫu của bạn hãy tạo một tệp mới, đặt tên là script.js

Bước 2: Thay thế <script> bằng: <script src="script.js" defer></script>

Bước 3: Thêm các tập lệnh sau vào bên trong script.js

{{EJS3}}

Bước 4: Lưu và làm mới trình duyệt.

Trình xử lý Inline JavaScript

JavaScript nội tuyến hiểu đơn giản là khi JavaScript ở trong thẻ HTML và nằm giữa thẻ script dưới dạng như:

Sử dụng addEventListener để thay thế

addEventListener được tích hợp theo cơ chế Document Object Model, còn gọi là DOM. Công cụ này cho phép người dùng thêm hành động vào sự kiện tại nhiều thời điểm khác nhau. Để thực hiện điều này, người dùng cần sử dụng cú pháp như sau:

{{EJS4}}

Cụ thể hơn, nếu muốn thêm tính năng hiển thị thông tin khi người dùng nhập dữ liệu vào ô input, bạn có thể thực hiện như sau:

Script loading

Các câu lệnh trong file HTML sẽ được tải theo trình tự từ trên xuống dưới. Do vậy, ta cần phải biết được các chiến lược tải Script để website hoạt động ổn định và các dòng lệnh được tải lên vào đúng thời điểm.

Nếu không có chiến lược tải hợp lý thì sẽ xảy ra một số lỗi, điển hình nhất là code không chạy khi JavaScript được tải và phân tích cú pháp trước HTML. Nếu gặp trường hợp trên, bạn có thể thêm cấu trúc sau để khắc phục:

{{EJS5}}

Khi sử dụng cấu trúc trên, JavaScript sẽ được điều chỉnh để hoạt động sau khi đã tải và phân tích HTML. Từ đó, tình trạng rối loạn trật tự sẽ được khắc phục triệt để.

Async (không đồng bộ) và defer (trì hoãn)

Ngoài các phương pháp kể trên, hiện nay, nhiều người ưu tiên sử dụng hai thuộc tính là async và defer hơn. Trong đó, async được dùng để làm việc với các hàm không đồng bộ để ngăn chặn trường hợp bị chặn trong quá trình trang đang được tải xuống.

Giả sử, bạn cần lấy tệp JSON nào đó từ máy chủ thì cần sử dụng đến axios bằng cách sử dụng async. Để gọi ra thuộc tính này, bạn có thể dùng cú pháp sau:

{{EJS6}}

Còn đối với defer, thuộc tính này cho phép hệ thống trì hoãn một số hành động để ưu tiên cho các hành động khác. Cách thức sử dụng của thuộc tính này khá đơn giản, cách đó như sau:

Trong nhiều trường hợp, bạn có thể sử dụng thuộc tính defer để thông báo cho hệ thống để tiếp tục ưu tiên tải, phân tích và thực thi HTML dù có gặp bất cứ dòng lệnh chuyển hướng qua script nào. Tuy nhiên, trong quá trình đó, script vẫn được tải nhưng không được phân tích.

Sau khi xử lý HTML xong thì hệ thống sẽ tiếp tục phân tích cú pháp cho script. Lúc này, hệ thống không cần chờ tải script nữa vì nó đã được tải song song với HTML rồi. Vì vậy, sử dụng defer sẽ giúp rút ngắn thời gian tải web hơn rất nhiều.

Comments

Bạn có thể viết các comments vào code JavaScript tương tự với HTML và CSS. Đồng nghiệp của bạn sẽ được hướng dẫn cách code hoạt động từ những nhận xét này. Có các loại nhận xét mà bạn nên thường xuyên sử dụng cho các ứng dụng lớn vì nó rất hữu ích:

Nhận xét dòng đơn được viết sau dấu gạch chéo kép (//) chẳng hạn như:

{{EJS7}}

Nhận xét nhiều dòng được viết sau các chuỗi /* và */ như:

{{EJS8}}

Tóm lại nhận xét mang lại những lời giải thích cụ thể, rõ ràng cho các hoạt động từ đơn giản đến phức tạp. Vấn đề là bạn nên biết cách thêm nhận xét cho hợp lý, khoa học, dễ hiểu.

Tổng kết về JavaScript

Trên đây là những hướng dẫn sơ lược cho người mới bắt đầu với JavaScript. Tất cả những gì chúng tôi trình bày đang ở dạng lý thuyết. Bạn hãy đọc kỹ và cố gắng tìm hiểu một vài ví dụ về code để hiểu rõ hơn về cách thức mà JavaScript hoạt động. Mặc dù mọi thứ có vẻ hơi khó khăn nhưng bạn đừng lo lắng.

Nếu bạn bất cứ câu hỏi nào liên quan đến JavaScript hoặc muốn tìm hiểu thêm những ngôn ngữ lập trình khác, hãy để lại ở bên bình luận bên dưới, BKHOST sẽ trả lời bạn trong thời gian sớm nhất.

P/s: Bạn cũng có thể truy cập vào Blog của BKHOST để đọc thêm các bài viết chia sẻ kiến thức về lập trình, quản trị mạng, website, domain, hosting, vps, server, email,… Chúc bạn thành công.