JavaScript đã được tạo ra hơn 26 năm trước và hiện là một trong những ngôn ngữ lập trình phổ biến nhất. Nhưng JavaScript là gì?
JavaScript được sử dụng với HTML và CSS để tạo các trang web và ứng dụng di động động và tương tác. Chúng tôi thường gọi nó là một trong những nền tảng phát triển web.
Theo W3Tech,
JavaScript được sử dụng làm ngôn ngữ lập trình phía máy khách bởi 97,6% tất cả các trang web.
Lịch sử JavaScript
Năm 1995, nhà phát triển Netscape Brendan Eich đã tạo ra phiên bản một của JavaScript chỉ trong 10 ngày. Khi lần đầu tiên ra mắt, nó được gọi là Mocha, sau đó đổi thành LiveScript và cuối cùng là JavaScript.
Các ông chủ của Brendan Eich muốn JavaScript có cú pháp tương tự như Java. Họ cũng cảm thấy rằng JavaScript sẽ giúp tăng tốc độ phát triển web và dễ học hơn so với Java.
Trong những năm qua, JavaScript đã phát triển và phát triển thành một ngôn ngữ linh hoạt có thể được sử dụng trên web và các ứng dụng dành cho thiết bị di động.
ECMAScript là gì?
ECMAScript là viết tắt của Tập lệnh Hiệp hội các nhà sản xuất máy tính châu Âu. Theo tài liệu MDN,
ECMAScript là ngôn ngữ kịch bản tạo thành nền tảng của JavaScript.
Hiệp hội đã tạo tiêu chuẩn ECMA để đảm bảo rằng các trang web nhất quán trên các trình duyệt khác nhau. Tính đến tháng 8 năm 2021, có tổng cộng 12 phiên bản ECMAScript được xuất bản.
Java có giống với JavaScript không?
Mặc dù hai ngôn ngữ này có cú pháp giống nhau và chia sẻ bốn chữ cái đầu tiên của “Java”, nhưng chúng không phải là cùng một ngôn ngữ.
Dưới đây là một số khác biệt chính giữa hai ngôn ngữ.
- Java là một ngôn ngữ lập trình được biên dịch. Điều đó có nghĩa là trước khi chương trình được chạy, mã cần được dịch sang mã máy để máy tính có thể hiểu được.
- JavaScript là một ngôn ngữ được giải thích. Trong trình duyệt, trình thông dịch sẽ đọc mã và chạy nó mà không cần biên dịch mã trước.
- Java được sử dụng làm ngôn ngữ phía máy chủ (phụ trợ) trong khi JavaScript chủ yếu được sử dụng làm ngôn ngữ phía máy khách (giao diện người dùng). Nhưng JavaScript cũng có thể được sử dụng để tạo các ứng dụng web phụ trợ với Node.js.
Làm cách nào để HTML, CSS và JavaScript hoạt động cùng nhau trên trang web?
Bây giờ chúng ta đã tìm hiểu về lịch sử của JavaScript, chúng ta cần hiểu cách thức hoạt động của nó trên một trang web.
HTML hiển thị nội dung, CSS tạo kiểu cho trang để làm cho trang trông đẹp mắt và JavaScript làm cho trang có tính tương tác. Nhưng tương tác nghĩa là gì và JavaScript hoạt động như thế nào với hai ngôn ngữ còn lại?
Hãy xem một ví dụ để hiểu rõ hơn về cách cả ba ngôn ngữ hoạt động cùng nhau.
Trong ví dụ này, khi người dùng nhấp vào một nút, một thông báo sẽ hiển thị với số lần người dùng đã nhấp vào. Khi số lượng đạt đến một ngưỡng nhất định, thông báo sẽ thay đổi và trở nên châm biếm hơn khi số lượng tăng lên.
Chúng tôi sử dụng HTML để tạo và hiển thị nút trên trang.
<button id="btn">Click me</button>Chúng tôi cũng có cái này p phần tử trong HTML của chúng tôi không có bất kỳ văn bản nào ở giữa thẻ mở và thẻ đóng. Trong JavaScript, văn bản được thêm vào sau khi người dùng nhấp vào nút.
<p id="para"></p>Chúng tôi sử dụng CSS để tạo kiểu cho nút và căn giữa nút trên trang.
button {
display: block;
margin: 20px auto 10px;
padding: 25px 20px;
font-size: 1.4rem;
cursor: pointer;
border: none;
border-radius: 50%;
background-color: #3b5998;
color: white;
}Để truy cập các phần tử HTML, chúng tôi sử dụng getElementById. Đây là nơi JavaScript của chúng tôi xuất hiện.
const btn = document.getElementById("btn");
const para = document.getElementById("para");Biến được gọi là count theo dõi số lần người dùng nhấp vào nút. Số lượng được cập nhật liên tục mỗi khi nhấp vào nút.
let count = 0;Đây là mảng các phản hồi sẽ hiển thị cho người dùng.
const responsesArr = [
"You have clicked the button this many times: ",
"Wow, you like to click that button. Button clicks: ",
"Why do you keep clicking it? Button clicks:",
"Now you are just being annoying. Button clicks:"
];chúng tôi sử dụng addEventListener thông báo cho máy tính lắng nghe sự kiện nhấp chuột. Sau khi phát hiện nhấp chuột, thông báo sẽ xuất hiện trên màn hình với số lượng.
btn.addEventListener("click", () => {
count++;
if (count < 10) {
para.innerHTML = `${responsesArr[0]} ${count}`;
} else if (count >= 10 && count < 15) {
para.innerHTML = `${responsesArr[1]} ${count}`;
} else if (count >= 15 && count < 20) {
para.innerHTML = `${responsesArr[2]} ${count}`;
} else {
para.innerHTML = `${responsesArr[3]} ${count}`;
}
});chúng tôi sử dụng một if else câu lệnh để kiểm tra số lần nút được nhấp và hiển thị một thông báo khác dựa trên số lần đếm cao đến mức nào.
Nếu count nhỏ hơn 10 thì đây là thông báo hiển thị ra màn hình.
Nếu count nằm trong khoảng từ 10 đến 14, thì đây là thông báo hiển thị trên màn hình.
Nếu count nằm trong khoảng từ 15 đến 19, thì đây là thông báo hiển thị trên màn hình.
Nếu count là 20 hoặc lớn hơn, thì đây là thông báo hiển thị trên màn hình.
JavaScript hoạt động như thế nào trên một trang web thực?
Chúng ta vừa xem xét một ví dụ cơ bản về cách HTML, CSS và JavaScript hoạt động cùng nhau. Nhưng JavaScript hoạt động như thế nào trên các trang web thực?
Hãy xem nền tảng học tập freeCodeCamp. Đây là một ví dụ về thử thách HTML từ khóa học Thiết kế web đáp ứng.
Nếu tôi vượt qua thử thách, thì thông báo này sẽ bật lên.
Nhưng nếu câu trả lời của tôi không chính xác, thì bài học sẽ cho tôi biết vấn đề nằm ở đâu.
Nhưng làm cách nào để freeCodeCamp biết câu trả lời của tôi có đúng hay không?
freeCodeCamp viết một loạt bài kiểm tra cho từng thử thách để đảm bảo rằng mã là chính xác. Các bài kiểm tra này được viết bằng JavaScript.
Đây là các bài kiểm tra JavaScript cho thử thách Thêm hình ảnh vào trang web của bạn.
Cách bắt đầu học JavaScript
Dưới đây là danh sách các tài nguyên tuyệt vời mà bạn có thể bắt đầu học JavaScript.
- Thuật toán JavaScript và cấu trúc dữ liệu (freeCodeCamp)
- Học JavaScript – Khóa học đầy đủ cho người mới bắt đầu (kênh YouTube freeCodeCamp)
- Hướng dẫn JavaScript hiện đại (javascript.info)
- Hướng dẫn JavaScript (javascripttutorial.net)
- LearnJS (learn-js.org)
- Học JavaScript (Codecademy)
- JavaScript (Học một mình)
- MDN JavaScript (tài liệu web MDN)
- Hướng dẫn JavaScript cho người mới bắt đầu: Học JavaScript trong 1 giờ (Lập trình với Mosh)
Sau khi tìm hiểu những kiến thức cơ bản về JavaScript, bạn có thể bắt đầu xây dựng các dự án của riêng mình. Tôi đã tạo danh sách 40 Dự án JavaScript dành cho người mới bắt đầu để giúp bạn bắt đầu.
Các thư viện và framework JavaScript
Các thư viện và khung JavaScript được tạo ra để giúp tăng tốc độ phát triển. Khi bạn đã học JavaScript “Vanilla” (hoặc cơ bản/đơn giản) thì bạn có thể bắt đầu tìm hiểu thư viện hoặc khung.
Có rất nhiều tùy chọn để lựa chọn nhưng bạn không cần phải học tất cả. Nghiên cứu các bài đăng công việc trong khu vực của bạn để xem những thư viện và khuôn khổ nào đang được sử dụng.
Dưới đây là một số tùy chọn phổ biến.
Dưới đây là một số tài nguyên học tập được đề xuất.
Phần kết luận
JavaScript được tạo lần đầu tiên vào năm 1995 và kể từ đó đã trở thành ngôn ngữ mạnh mẽ và linh hoạt được sử dụng cho các trang web, trò chơi trực tuyến và ứng dụng dành cho thiết bị di động.
Mặc dù Java và JavaScript có cú pháp tương tự nhau và chia sẻ bốn chữ cái đầu tiên của “Java”, nhưng chúng không phải là cùng một ngôn ngữ. Java chủ yếu được sử dụng làm ngôn ngữ phía máy chủ trong khi JavaScript được sử dụng trong trình duyệt.
HTML, CSS và JavaScript là ba ngôn ngữ cốt lõi của web. HTML dành cho nội dung, CSS dành cho kiểu dáng và JavaScript dành cho tính tương tác trên trang web.
Hy vọng bạn thấy bài viết này hữu ích và chúc may mắn trên hành trình phát triển web của bạn.
