Trong những năm sắp đây JavaScript trở thành một tiếng nói lập trình phổ biến và thông dụng. Nhiều framework được viết bằng chính tiếng nói đặc trưng 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 nghi vấn như JavaScript là gì? Chúng ta với thể làm gì với nó?

JavaScript là gì?

Tương tự như những tiếng nói lập trình khác, JavaScript (Js) cho phép người tiêu 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 với 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 những trang web. Tương tự với thể thấy 3 lớp bánh của khoa học 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 tương trợ để tạo nên những tính năng tuyệt vời cho website.

• Để cấu trúc và phân phối ý nghĩa cho nội dung web, lập trình viên sẽ sử dụng tiếng nói HTML. Một số ví dụ cụ thể như xác định những đ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 tiếng nói CSS. Nó tìm và định dạng những 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 những 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 tiêu dùng cần tới tiếng nói lập trình JavaScript.

Ví dụ:

JavaScript với thể làm được gì?

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

• JavaScript giúp người tiêu dùng lưu trữ những trị giá bên trong những biến, thao tác trên những đ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 tiếng nói 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ừ thuần tuý tới phức tạp trên nền tảng Internet.
• Những tiếng nói dành riêng cho hệ quản lý Jara, Swift được tiêu dùng để phát triển ứng dụng di động. Tương tự ko với lý do gì để bạn bỏ qua việc tiêu dùng JavaScript.
• Tạo những yếu tố web tương tác chính là một trong những hoạt động bạn nên tiêu dùng JavaScript.

Một điều thú vị là lúc người tiêu dùng sử dụng API (giao diện lập trình ứng dụng) sẽ với thời cơ trải nghiệm những điều hữu ích. Những giao diện phần mềm ứng dụng này phân phối 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à những 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 tiêu dùng truy xuất thông tin địa lý một cách tiện lợi.
• Tương tự như canvas, lúc sử dụng WebGL APIs bạn sẽ tạo được đồ họa 2D, 3D hoạt hình từ thuần tuý tới phức tạp.
• Kỹ thuật đặc trưng 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 ko tích hợp mặc định API của bên thứ ba. Để với 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 lúc người tiêu dùng tải một trang web, lúc đó những đ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 thuần tuý thì quá trình này giống như một nhà máy tiêu dùng vật 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 tiêu dùng. Code trong web của người tiêu 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ì với 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

Ở những tab trình duyệt sẽ với những nhóm riêng biệt để chạy code. Tương tự với tức là code ở mỗi tab chạy riêng biệt và ko tác động tới 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 tiêu dùng bảo mật tốt mọi dữ liệu để tránh sự đột nhập của kẻ tiế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 tới sau lúc gặp một khối JavaScript. Vì thế bạn nên quan sát và thậ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:

const para = document.querySelector('p'); para.addEventListener('click', updateName); function updateName() { const name = prompt('Enter a new name'); para.textContent = `Player 1: ${name}`; }

Trường hợp bạn hoán đổi thứ tự của những dòng code thì nó sẽ ko 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ối rắm.

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 tức thời đối với tiếng nói thông dịch. Trước lúc trình duyệt chạy code bạn ko cần phải chuyển đổi nó thành một dạng khác. Trường hợp với tiếng nói biên dịch thì code sẽ được chuyển thành một dạng khác trước lúc trình duyệt chạy nó.

JavaScript thuộc loại tiếng nói 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 những 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 với thể.

Article post on: nongdanmo.com

Server-side và client-side code

Trong bối cảnh phát triển web hẳn nhiều người đã thân 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. Lúc 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ố tiếng nói web được tiêu 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ư những tiếng nói nói trên.

Dynamic và static code

Từ “dynamic” tiêu dùng để mô tả tiếng nói 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 tiêu dùng, cập nhật hiển thị của website linh hoạt trong những trường hợp khác nhau. Còn từ “static“ dành để nói tới những trang web nội dung ko được cập nhật. Ở bất cứ vị trí và thời khắc 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 thích 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.

Nhúng JavaScript kiểu External (Nhúng vào file .html bằng Một 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 những 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 3: Thêm những tập lệnh sau vào bên trong script.js

Source: nongdanmo.com

function createParagraph() { const para = document.createElement('p'); para.textContent = 'You clicked the button!'; document.body.appendChild(para); } const buttons = document.querySelectorAll('button'); for (const button of buttons) { button.addEventListener('click', createParagraph); }

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 thuần tuý là lúc 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. Dụng cụ này cho phép người tiêu dùng thêm hành động vào sự kiện tại nhiều thời khắc khác nhau. Để thực hiện điều này, người tiêu dùng cần sử dụng cú pháp như sau:

elementObject.addEventListener('eventName', function(e){ // do something });

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

Script loading

Những 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 những chiến lược tải Script để website hoạt động ổn định và những dòng lệnh được tải lên vào đúng thời khắc.

Via @: nongdanmo.com

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

Ngoài những phương pháp kể trên, hiện nay, nhiều người ưu tiên sử dụng hai tính chất là async và defer hơn. Trong đó, async được tiêu dùng để làm việc với những hàm ko đồ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 tới axios bằng cách sử dụng async. Để gọi ra tính chất này, bạn với thể tiêu dùng cú pháp sau:

getJSONAsync().then( function(result) { // Do something with result. });

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

Trong nhiều trường hợp, bạn với thể sử dụng tính chất defer để thông tin cho hệ thống để tiếp tục ưu tiên tải, phân tích và thực thi HTML dù với 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 ko được phân tích.

Sau lúc 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 ko 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 kì tải web hơn rất nhiều.

Comments

Bạn với thể viết những 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. Với những loại nhận xét mà bạn nên thường xuyên sử dụng cho những ứng dụng to 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ư:

 // I am a comment.

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

/* I am also a comment */

Tóm lại nhận xét mang lại những lời giảng giải cụ thể, rõ ràng cho những hoạt động từ thuần tuý tới 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 khởi đầ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à quyết tâm 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ứ với vẻ tương đối khó khăn nhưng bạn đừng lo lắng.

Nếu bạn bất cứ nghi vấn nào liên quan tới JavaScript hoặc muốn tìm hiểu thêm những tiếng nói 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 kì sớm nhất.

P/s: Bạn cũng với thể truy cập vào Blog của BKHOST để đọc thêm những bài viết san sớt tri 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.

Article post on: nongdanmo.com