- Tổng đài 24/7: 1800 646 881
- Đăng nhập
-
3 
3 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ó?
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.
Ví dụ:
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ư:
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ể:
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.
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.
Ở 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.
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.
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ể.
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.
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.
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
.htmltệ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?
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.
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.
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.
Thuê Cloud VPS Cao Cấp tại BKHOST
Giảm giá cực sâu, chất lượng hàng đầu. Đăng ký ngay hôm nay:
Cảm ơn lượt bình chọn của bạn, Chúc bạn 1 ngày tốt lành !
Tên miền đang khuyến mại
