Hiện tại JavaScript đang là ngôn ngữ được nhiều bạn trẻ quan tâm trong những năm gần đây. Vậy JavaScript là gì? Tất cả sẽ được đề cập đầy đủ trong bài viết dưới đây.
JavaScript là gì?
JavaScript là một ngôn ngữ lập trình trang web phổ biến hiện nay, nó được tích hợp và nhúng vào HTML để làm cho các trang web trở nên sống động. JavaScript hoạt động như một phần của trang web và các tệp thực thi cho phép các tập lệnh phía máy khách từ cả phía máy khách và phía máy chủ (Nodejs) để tạo các trang web động.
JavaScript là một ngôn ngữ lập trình thông dịch với các khả năng hướng đối tượng. Là một trong 3 ngôn ngữ chính trong lập trình web, chúng có mối quan hệ với nhau để xây dựng một trang web chuyên nghiệp sôi động:
HTML: Hỗ trợ bố cục kiến trúc để dễ dàng thêm nội dung vào trang web của bạn.
CSS: Hỗ trợ các định dạng thiết kế, bố cục, kiểu dáng, màu sắc …
JavaScript: Tạo nội dung “động” trên một trang web. Tìm hiểu thêm trong các phần bên dưới.
JS là viết tắt của JavaScript, và khi bạn có JS, bạn sẽ biết nó đang nói về JavaScript.
Lịch sử của JavaScript
JavaScript được phát triển bởi Brendan Eich của Netscape Media với tên Mocha. Sau đó, nó được đổi tên thành LiveScript và cuối cùng là JavaSript phổ biến cho đến tận bây giờ.
Phiên bản mới nhất của JavaScript là ECMAScript (là phiên bản chuẩn hóa của JavaScript). Với ECMAScript 2 được phát hành vào năm 1998 và ECMAScript 3 được phát hành vào năm 1999, chúng hoạt động hiệu quả trên tất cả các trình duyệt và thiết bị khác nhau.
JS đã có nhiều cái tên, nhưng JavaScript là cái tên cuối cùng và phát triển mạnh mẽ cho đến ngày nay
Năm 2016, JavaScript đạt kỷ lục 92% lượng sử dụng trang web và được đánh giá từ một ngôn ngữ lập trình duy nhất là công cụ quan trọng nhất trong bộ công cụ lập trình web của lập trình viên. Nếu bạn sử dụng Internet khi truy cập một trang web, bạn có thể thấy các hiệu ứng trình chiếu động, menu thả xuống, v.v., tất cả đều được tạo bằng JavaScript.
Các khái niệm liên quan đến JavaScript
Dưới đây là một số khái niệm về các thuật ngữ liên quan đến JavaScript để bạn hiểu và nắm rõ hơn khi học JavaScript.
Khung JavaScript là gì?
Là một thư viện được xây dựng trên JS, phục vụ các mục đích và miền khác nhau
Khung JavaScript là một thư viện được xây dựng dựa trên ngôn ngữ lập trình JavaScript. Kể từ đó, mỗi khung công tác đã được tạo ra để phục vụ cho một miền khác nhau. Bạn có thể tìm hiểu thêm về khung là gì, điều này sẽ giúp bạn có hình ảnh rõ ràng hơn. Hiện tại, có rất nhiều khung JavaScript phổ biến như:
Reactjs: Thư viện ứng dụng di động.
Node.js: Để xây dựng và phát triển các ứng dụng thời gian thực từ phía máy chủ.
Angular: để xây dựng các ứng dụng trang đơn….
JavaScript phía máy khách là gì?
javascript phía máy khách
JavaScript phía máy khách là một hình thức phổ biến được sử dụng phổ biến ngày nay. Các trang web không yêu cầu HTML tĩnh, nhưng có thể chứa các chương trình có thể tương tác với người dùng hoặc điều khiển trình duyệt và tạo nội dung HTML động.
Cách JavaScript hoạt động trên trang web
JavaScript thường được nhúng trực tiếp vào các trang web hoặc được tham chiếu thông qua một tệp .js riêng biệt. JavaScript là ngôn ngữ phía máy khách, vì vậy các tập lệnh sẽ được tải xuống máy khách khi máy khách truy cập và xử lý. Thay vì tải xuống máy chủ và xử lý, kết quả được trả về cho máy khách.
JS sẽ được thực thi từ phía máy khách thay vì phía máy chủ
Giờ đây, các trình duyệt internet cũng có thể hỗ trợ bạn bật / tắt JavaScript. Vì vậy, bạn có thể xem điều gì xảy ra nếu một trang web không có JavaScript? Từ đó bạn có thể hiểu rõ hơn về cách hoạt động của JavaScript.
Ưu điểm và nhược điểm của việc sử dụng JavaScript
Hãy cùng Vietnix tìm hiểu một số ưu nhược điểm của việc sử dụng JavaScript được chia sẻ dưới đây.
Ưu điểm của JavaScript
JavaScript có những ưu điểm được coi là vượt trội so với các đối thủ khác trong đời thực, chẳng hạn như:
Các chương trình JavaScript rất dễ học.
Lỗi JavaScript rất dễ phát hiện và có thể giúp bạn sửa chúng nhanh hơn.
Các trình duyệt web có thể dịch nó sang HTML mà không cần trình biên dịch.
JS hoạt động trên nhiều nền tảng và trình duyệt khác nhau.
Được đánh giá là ngôn ngữ lập trình nhẹ và nhanh so với các ngôn ngữ khác.
JS có thể được gắn trên các phần tử hoặc sự kiện nhất định của một trang web.
Khi website sử dụng JS sẽ giúp website tương tác và tăng trải nghiệm người dùng khi truy cập.
Thay vì kiểm tra quyền truy cập cơ sở dữ liệu theo cách thủ công, bạn có thể tận dụng JavaScript để kiểm tra đầu vào.
Giao diện phong phú bao gồm các thành phần Kéo và Thả, Thanh trượt để cung cấp một Giao diện phong phú.
Nhược điểm của JavaScript
Mặt khác, ngoài những ưu điểm, tất cả các ngôn ngữ lập trình khác đều có những nhược điểm riêng, chẳng hạn như:
Dễ dàng bị khai thác bởi tin tặc và kẻ lừa đảo.
Có thể được sử dụng để thực thi mã độc hại trên máy tính của người dùng.
Các đoạn mã JS rất lớn.
Các thiết bị khác nhau có thể thực thi JS khác nhau, dẫn đến không đồng nhất.
Vì lý do bảo mật, JavaScript phía máy khách không được phép đọc và ghi tệp.
JS không được hỗ trợ cho các kết nối mạng.
JavaScript không hỗ trợ đa luồng hoặc đa xử lý.
Sự khác biệt giữa JavaScript và các ngôn ngữ lập trình khác
JavaScript là ngôn ngữ chính để lập trình web, ngoài ra lập trình viên cũng cần kết hợp và áp dụng một số ngôn ngữ khác trong quá trình làm việc như:
| Ngôn ngữ | Đặc điểm |
|---|---|
| JavaScript | JS giúp tăng tính tương tác trên website. Các Script chạy trên các trình duyệt của người dùng thay vì từ phía server và thường được sử dụng thư viện từ bên thứ 3 nên không cần bạn phải code lại từ đầu. |
| HTML | Hypertext Markup Language, đây là ngôn ngữ cơ bản và phổ biến mà bạn cần phải biết khi bắt đầu với công việc lập trình web. Dùng để xây dựng bố cục (layout) chính cho nội dung toàn bộ website. |
| CSS | Cascadding Style Sheets giúp cho lập trình viên xác định style, tạo ra những ý tưởng, màu sắc, background riêng phù hợp với chủ đề của website. |
| PHP | Là ngôn ngữ từ phía server (JS chạy trên phía client). Thường dùng trong quá trình quản trị nội dung nền PHP như WordPress và cũng có thể được sử dụng với lập trình back-end. |
Các công cụ phát triển JavaScript
IDE JavaScript là gì?
IDE (Môi trường phát triển tích hợp) là một môi trường lập trình tích hợp nhiều công cụ và tiện ích khác nhau như trình soạn thảo mã, trình gỡ lỗi, trình mô phỏng, v.v. IDE JavaScript là một môi trường dành riêng cho các lập trình viên khi viết JavaScript.
JavaScript IDE
Tôi nên sử dụng IDE nào khi viết JavaScript?
Các IDE thường được sử dụng hiện nay là:
Notepad ++.
Visual Studio .
Nhà thiết kế PHP.
Người dệt mộng.
Văn bản tuyệt vời.
Ngoài ra còn có một số công cụ chỉnh sửa JavaScript được đánh giá cao, chẳng hạn như:
biểu ngữ lưu trữ web
Microsoft FrontPage.
Macromedia Dreamweaver MX.
Trang chủ Macromedia 5.
Viết chương trình JavaScript
Mở và đóng thẻ
Tất cả mã JavaScript đều nằm trong cặp thẻ <script> </script>. Ví dụ cụ thể như sau:
<script language=”javascript”>
alert(“Hello World!”);
</script>
Cách thiết lập script.tags
Có 3 cách để đặt các thẻ script thường được sử dụng:
Nội bộ: Ghi tệp html hiện tại.
Bên ngoài: ghi một tệp js khác và nhập.
Inline: Viết trực tiếp trong các thẻ HTML.
Nội bộ
Thông thường thẻ script được đặt bên trong thẻ <head>, nhưng bạn có thể đặt nó ở bất kỳ đâu, nhưng phải bao gồm đầy đủ các thẻ mở và đóng <script> </script>. Bằng cách này, bạn sẽ đặt tiêu đề trong tệp html hiện tại.
<html>
<head>
<title></title>
<script language=”javascript”>
alert(“Hello World!”);
</script>
</head>
<body>
</body>
</html>
Bên ngoài
Bằng cách này, bạn có thể viết mã JS của mình vào một tệp mới và lưu phần mở rộng dưới dạng phần mở rộng .js. Sau đó, sử dụng thẻ script để nhập tệp. Bạn không cần thẻ đóng </script> vì tệp test.js đã có phần mở rộng là js, vì vậy trình duyệt sẽ nhận dạng nó là tệp chứa mã JavaScript.
<script language=”javascript” src=”test.js”></script>
xếp hàng
Bằng cách này, bạn sẽ viết mã JavaScript trực tiếp vào các thẻ HTML.
<input type=”button” onclick=”alert(1)” value=”Đăng ký”/>
Viết một chương trình JavaScript đơn giản
Trước khi bắt đầu viết các chương trình JavaScript, bạn cần cài đặt Notepad ++ hoặc các công cụ và phần mềm viết mã khác.
Bước 1: Tạo tệp index.html ở bất kỳ đâu trên máy tính của bạn miễn là nó có đuôi .html.
<html>
<head>
<title></title>
</head>
<body>
<input type=”button” value=”Click Me”/>
</body>
</html>
Sau đó viết đoạn mã sau:
Bước 2: Bây giờ bạn có thể viết mã JavaScript khi nhấp vào nút có id = “clickme”.
<html>
<head>
<title></title>
</head>
<body>
<input type=”button” id=”clickme” value=”Click Me”/>
<script language=”javascript”>
// Lấy element có id=clickme lưu vào biến button
var button = document.getElementById(‘clickme’);
// Khi click vào element chứa trong button thì thực hiện một function,
// bên trong function thông báo lên Hello World!
button.addEventListener(‘click’, function(){
alert(‘Hello World!’);
});
</script>
</body>
</html>
Tham quan nhanh các loại dữ liệu trong JavaScript
Dữ liệu javascript
Xem dữ liệu JavaScript
Hướng dẫn này sẽ xem xét nhanh các kiểu dữ liệu JavaScript quan trọng nhất trong JavaScript. Các biến JavaScript có thể là:
Con số
Sợi dây
Vật
Mảng
Hàm số
<div style=”text-align: justify;”>
<p style=”text-align: center;”>JavaScript là gì?</p>
</div>
Các biến JavaScript
Các biến JavaScript là vùng chứa để lưu trữ các giá trị dữ liệu. Trong ví dụ này, x, y và z là các biến:
<div style=”text-align: justify;”>
<div>
<blockquote><p>var x = 5;</p></blockquote>
<blockquote><p>var y = 6;</p></blockquote>
</div>
</div>
Từ ví dụ trên, bạn có thể hiểu:
x lưu trữ giá trị 5.
y lưu trữ giá trị 6.
Số JavaScript
JavaScript chỉ có một loại số và các số có thể được viết cùng với hoặc không có số thập phân.
biến x = 3,14; // số có số thập phân
biến y = 3; // một số không có số thập phân
Tất cả các số được lưu trữ dưới dạng số dấu phẩy động có độ chính xác kép.
Số chữ số thập phân tối đa là 17, nhưng dấu phẩy động không phải lúc nào cũng chính xác 100%:
biến x = 0,2 + 0,1; // x sẽ là 0,300000000000000000004
Chuỗi JavaScript
Chuỗi lưu trữ văn bản – chuỗi lưu trữ văn bản. Các chuỗi được viết bên trong dấu ngoặc kép, bạn có thể sử dụng dấu ngoặc kép hoặc đơn:
var carname = “Volvo XC60”; // dấu ngoặc kép
var carname = ‘Volvo XC60’; // dấu ngoặc kép
Độ dài của chuỗi được tìm thấy trong độ dài thuộc tính tích hợp:
var txt = “ABCDEFGHIJKLMNOPQRSTUVWXYZ”;
var sln = txt.length;
Đối tượng JavaScript
Bạn đã biết rằng các biến JavaScript là vùng chứa cho các giá trị dữ liệu.
JavaScript cơ bản
Đối tượng JavaScript
Mã này chỉ định một giá trị đơn giản (Fiat) cho một biến có tên là ô tô:
var car = “Fiat”;
Đối tượng cũng là biến, nhưng đối tượng có thể chứa nhiều giá trị.
Mã này chỉ định nhiều giá trị (fiat, 500, trắng) cho một biến được gọi là car:
var car = {type: “Fiat”, model: “500”, color: “white”};
Mảng JavaScript
Mảng JavaScript được sử dụng để lưu trữ nhiều giá trị trong một biến duy nhất.
var car = [“Saab”, “Volvo”, “BMW”];
Hàm JavaScript
Hàm JavaScript là một khối mã được thiết kế để thực hiện một tác vụ cụ thể. Khi “cái gì đó” gọi nó, một hàm JavaScript được thực thi.
hàm myFunction (p1, p2) {
return p1 * p2; // hàm trả về tích của p1 và p2
}
JavaScript có thể làm gì?
Phần này chứa một số ví dụ về những gì JavaScript có thể làm:
Đầu tiên, JavaScript có thể thay đổi nội dung HTML.
Thứ hai, JavaScript có thể thay đổi các giá trị thuộc tính HTML.
Thứ ba, JavaScript có thể thay đổi kiểu HTML (CSS).
Tiếp theo, JavaScript có thể ẩn các phần tử HTML.
Cuối cùng, JavaScript có thể hiển thị các phần tử HTML.
JavaScript thay đổi nội dung HTML
Một trong nhiều phương pháp JavaScript HTML là getElementById ().
Ví dụ này sử dụng phương pháp này để “tìm” một phần tử HTML (id = “demo”) và thay đổi nội dung phần tử (innerHTML) thành “Hello JavaScript”:
document.getElementById (“demo”). innerHTML = “Xin chào JavaScript”;
JavaScript thay đổi giá trị thuộc tính HTML
Trong ví dụ này, JavaScript thay đổi giá trị của thuộc tính src của thẻ <img> (nguồn):
JavaScript thay đổi kiểu HTML (CSS)
Thay đổi kiểu của một phần tử HTML, đây là một biến thể của việc thay đổi các thuộc tính HTML:
document.getElementById (“demo”). style.fontSize = “35px”;
hoặc
document.getElementById (‘demo’). style.fontSize = ’35px’;
JavaScript ẩn các phần tử HTML
Các phần tử HTML có thể bị ẩn bằng cách thay đổi kiểu hiển thị:
document.getElementById (“demo”). style.display = “none”;
hoặc
document.getElementById (‘demo’). style.display = ‘none’;
JavaScript hiển thị các phần tử HTML
Việc hiển thị các phần tử HTML ẩn cũng có thể được thực hiện bằng cách thay đổi kiểu hiển thị:
document.getElementById (“demo”). style.display = “block”;
hoặc
document.getElementById (‘demo’). style.display = ‘block’
Phần kết
Với bài viết JavaScript là gì? Mọi thứ từ các khái niệm và hoạt động đến cách viết JavaScript cơ bản và các ví dụ cụ thể. Hi vọng nó sẽ mang lại nhiều kiến thức, đặc biệt là giúp các bạn hiểu rõ và có thể áp dụng trong học tập và công việc sau này. Chúc may mắn.
