Hiện nay, JavaScript là một ngôn ngữ đang được nhiều bạn trẻ quan tâm nhiều trong những năm gần đây. Vậy JavaScript là gì? Và việc Tất cả sẽ có đầy đủ trong bài viết dưới đây.

JavaScript là gì?

JavaScript là ngôn ngữ lập trình website phổ biến hiện nay, nó được tích hợp và nhúng vào HTML giúp website trở nên sống động hơn. JavaScript đóng vai trò như là một phần của trang web, thực thi cho phép Client-side script từ phía người dùng cũng như phía máy chủ (Nodejs) tạo ra các trang web động.

JavaScript là một ngôn ngữ lập trình thông dịch với khả năng hướng đến đối tượng. Là một trong 3 ngôn ngữ chính trong lập trình web và có mối liên hệ lẫn nhau để xây dựng một website sống động, chuyên nghiệp:

• HTML: Hỗ trợ trong việc xây dựng layout, thêm nội dung dễ dàng trên website.
• CSS: Hỗ trợ việc định dạng thiết kế, bố cục, style, màu sắc,…
• JavaScript: Tạo nên những nội dung “động” trên website. Cùng tìm hiểu rõ hơn ở phần dưới đây.

JS là viết tắt của JavaScript, khi có JS bạn sẽ hiểu đó đang nói đến JavaScript.

Lịch sử phát triển của JavaScript

JavaScript được phát tiển bởi Brendan Eich tại hãng truyền thông Netscape với tên đầu tiên là Mocha. Sau đó, đổi tên thành LiveScript và cuối cùng là JavaSript được sử dụng phổ biến tới thời điểm 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 phát hành năm 1998 và ECMAScript 3 được ra mắt năm 1999 và hoạt động mạnh mẽ trên mọi trình duyệt và các thiết bị khác nhau.

Năm 2016, JavaScript đạt kỷ lục đến 92% website sử dụng và được đánh giá từ một ngôn ngữ lập trình riêng trở thành công cụ quan trọng nhất trên các bộ công cụ lập trình web của các lập trình viên. Nếu bạn sử dụng internet khi truy cập vào các website, có thể nhìn thấy các hiệu ứng slide ảnh chuyển động, menu sổ xuống,…đều được tạo nên từ JavaScript.

Các khái niệm liên quan đến JavaScript

Dưới đây là một số khái niệm về một số thuật ngữ liên quan đến JavaScript để bạn có thể nắm được và hiểu hơn khi tìm hiểu về JavaScript là gì?

JavaScript Framework là gì?

JavaScript Framework là thư viện được xây dựng dựa vào ngôn ngữ lập trình JavaScript. Từ đó, mỗi framework được tạo ra để phục cho từng lĩnh vực khác nhau. Bạn có thể tìm hiểu kỹ hơn về framework là gì, sẽ giúp bạn có thêm nhiều thông tin rõ ràng hơn. Hiện nay, có rất nhiều JavaScript Framework thông dụng như:

• Reactjs: Thư viện dùng cho ứng dụng mobile.
• Node.js: Dùng để xây dựng và phát triển ứng dụng realtime từ phía máy chủ.
• Angular: Dùng để xây dựng ứng dụng Single Page….

Client-side JavaScript là gì?

Client-side JavaScript là form phổ biến được sử dụng phổ biến hiện nay. Một trang web không cần một HTML tĩnh, nhưng có thể bao gồm các chương trình có thể tương tác với người dùng hay điều khiển trình duyệt và tạo nội dung HTML động.

Cách thức hoạt động của JavaScript trên trang web

JavaScript thường sẽ được nhúng trực tiếp vào một trang web hoặc được tham chiếu qua file .js riêng. JavaScript là ngôn ngữ từ phía client nên script sẽ được tải về máy client khi truy cập và được xử lý tại đó. Thay vì tải về máy server và sau khi xử lý xong mới phản hồi kết quả đến client.

Với hiện nay, thì các trình duyệt Internet cũng có thể hỗ trợ bạn tắt/mở JavaScript. Lúc đó bạn có thể thấy được nếu một trang web không có JavaScript thì sẽ như thế nào? Từ đó bạn có thể hình dung dễ dàng hơn về cách JavaScript hoạt động.

Ưu điểm và nhược điểm khi sử dụng JavaScript

Cùng Vietnix tìm hiểu một số ưu điểm và nhược điểm khi sử dụng JavaScript là gì được chia sẻ cụ thể dưới đây nhé.

Ưu điểm của JavaScript

JavaScript có các ưu điểm được xem là vượt trội so với các đối thủ khác trong các trường hợp thực tế như:

• Chương trình JavaScript rất dễ học.
• Lỗi JavaScript dễ phát hiện và sẽ giúp bạn sửa lỗi nhanh hơn.
• Các trình duyệt web có thể dịch nó bằng HTML mà không cần một compiler.
• JS hoạt động trên rất 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ẹ, nhanh so với các ngôn ngữ khác.
• JS có thể được gắn trên một số element hoặc các events của trang web.
• Khi website có sử dụng JS thì sẽ giúp cho trang web đó tương tác và tăng trải nghiệm người dùng khi truy cập.
• Bạn có thể tận dụng JavaScript để kiểm tra các input thay vì kiểm tra thủ công thông qua việc truy xuất database.
• Giao diện phong phú gồm các thành phần Drag and Drop, Slider để cung cấp một Rich Interface (Giao diện giàu tính năng).

Nhược điểm của JavaScript

Mặt khác, ngoài những ưu điểm nhưng mọi ngôn ngữ lập trình khác đều có những nhược điểm riêng của nó như:

• Dễ bị khai thác từ những hacker và scammer.
• Có thể được dụng để thực thi mã độc trên máy tính của người dùng.
• JS code snippet lớn.
• Các thiết bị khác nhau có thể thực hiện JS khác nhau dẫn đến không đồng nhất.
• Vì tính bảo mật nên client-side JavaScript không cho phép đọc và ghi các file.
• JS không được hỗ trợ khi sử dụng trong kết nối mạng.
• JavaScript không có khả năng đa luồng hoặc đa xử lý.

Điểm khác biệt JavaScript với các ngôn ngữ lập trình

JavaScript được đóng vai trò như là ngôn ngữ chính trong lập trình web, ngoài ra các lập trình viên cũng cần sự kết hợp và áp dụng một số ngôn ngữ khác trong quá trình làm việc của mình như:

Các công cụ dùng để phát triển JavaScript

IDE JavaScript là gì?

IDE (Integrated Development Environment) là môi trường dùng để lập trình được tích hợp nhiều công cụ và tiện ích khác nhau như code editor, debugger, simulator,… IDE JavaScript là một môi trường chuyên dụng cho các lập trình viên khi lập trình JavaScript.

Nên sử dụng IDE nào khi code JavaScript?

Các IDE được sử dụng phổ biến ngày nay như:

• NotePad ++.
• Visual Studio .
• PHP Designer.
• Dreamweaver.
• Sublime Text.

Ngoài ra còn một số công cụ chỉnh sửa JavaScript được đánh giá cao như:

• Microsoft FrontPage.
• Macromedia Dreamweaver MX.
• Macromedia Homesite 5.

Viết chương trình JavaScript

Mở đóng thẻ

Tất cả các đoạn mã JavaScript đều được đặt trong cặp thẻ đóng mở <script></script>. Ví dụ cụ thể như sau:

<script language="javascript">
    alert("Hello World!");
</script>

Cách đặt thẻ Script

Có 3 cách đặt thẻ script thường được sử dụng như dưới đây:

• Internal: viết trong file html hiện tại.
• External: viết ra một file js khác rồi import vào.
• Inline: viết trực tiếp trong thẻ HTML.

Internal

Thường thì thẻ script được đặt trong thẻ <head> nhưng bạn cũng có thể đặt bất cứ đâu nhưng phải chứa đầy đủ mở đóng thẻ <script></script>. Với cách này bạn sẽ đặt phần head trong file html hiện tại của mình.

<html>

    <head>

        <title></title>

        <script language="javascript">

            alert("Hello World!");

        </script>

    </head>

    <body>

    </body>

</html>

External

Với cách này, bạn có thể viết các đoạn mã JS ra một file mới và lưu phần mở rộng với đuôi .js. Sau đó, bạn sử dụng thẻ script đẻ import file vào. Bạn không cần thẻ đóng </script> vì file test.js đã có đuôi là js nên trình duyệt sẽ tự nhận dạng được đó là file chứa các mã JavaScript.

<script language="javascript" src="test.js"></script>

Inline

Cách này là bạn sẽ viết trực tiếp viết những đoạn mã JavaScript vào trong thẻ HTML.

<input type="button" onclick="alert(1)" value="Đăng ký"/>

Viết chương trình JavaScript đơn giản

Trước khi bắt đầu viết chương trình JavaScript bạn cần cài đặt phần mềm Notepad ++ hoặc các phần mềm, công cụ viết code khác.

• Bước 1: Tạo 1 file index.html bất kì vị trí nào trên máy tính, miễn là có phần mở rộng là .html. Sau đó viết đoạn mã sau:

<html>
    <head>
        <title></title>
    </head>
    <body>
        <input type="button" value="Click Me"/>
    </body>
</html>

• Bước 2: Bây giờ bạn có thể viết mã JavaScript khi click vào button 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>

Xem nhanh các loại dữ liệu trong JavaScript

Hướng dẫn này sẽ xem nhanh các loại dữ liệu JavaScript quan trọng nhất trong JavaScript. Các biến JavaScript có thể là:

• Numbers
• Strings
• Objects
• Arrays
• Functions

<div style="text-align: justify;">
<p style="text-align: center;">JavaScript là gì?</p>
</div>

JavaScript Variables

JavaScript Variables là các vùng  chứa để lưu trữ 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 giá trị 5.
• y lưu trữ giá trị 6.

JavaScript Numbers

JavaScript chỉ có một loại số, các số có thể được viết có hoặc không có số thập phân.

var x = 3.14;    // A number with decimals

var y = 3;       // A number without decimals

Tất cả các số được lưu trữ dưới dạng dấu phẩy động có độ chính xác kép.

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%:

var x = 0.2 + 0.1;         // x will be 0.30000000000000004

JavaScript Strings

Strings store text – Chuỗi lưu trữ văn bản. 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 đơn hoặc kép:

var carname = “Volvo XC60”;  // Double quotes

var carname = ‘Volvo XC60’;  // Single quotes

Độ dài của chuỗi được tìm thấy trong độ dài thuộc tính được tạo sẵn:

var txt = “ABCDEFGHIJKLMNOPQRSTUVWXYZ”;

var sln = txt.length;

JavaScript Objects

Bạn đã học được rằng các biến JavaScript là các vùng chứa cho các giá trị dữ liệu.

Mã này chỉ định một giá trị đơn giản (Fiat) cho một biến có tên là car:

var car = “Fiat”;

Đối tượng cũng là biến, nhưng các đối tượng có thể chứa nhiều giá trị.

Mã này gán nhiều giá trị (Fiat, 500, màu trắng) cho một biến có tên là car:

var car = {type:”Fiat”, model:”500″, color:”white”};

JavaScript Arrays

Mảng JavaScript được sử dụng để lưu trữ nhiều giá trị trong một biến duy nhất.

var cars = [“Saab”, “Volvo”, “BMW”];

JavaScript Functions

Hàm JavaScript là một khối mã được thiết kế để thực hiện một tác vụ cụ thể. Hàm JavaScript được thực thi khi “cái gì đó” gọi nó.

function myFunction(p1, p2) {

return p1 * p2;              // The function returns the product of p1 and 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 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 thức HTML JavaScript là getElementById () .

Ví dụ này sử dụng phương pháp để “tìm” một phần tử HTML (với id = “demo”) và thay đổi nội dung phần tử ( InternalHTML ) thành “Hello JavaScript”:

document.getElementById(“demo”).innerHTML = “Hello 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 (source) của tag <img>:

JavaScript thay đổi kiểu HTML (CSS)

Thay đổi kiểu của một phần tử HTML, là một biến thể của việc thay đổi thuộc tính HTML:

document.getElementById(“demo”).style.fontSize = “35px”;or

document.getElementById(‘demo’).style.fontSize = ’35px’;

JavaScript ẩn các phần tử HTML

Ẩn các phần tử HTML có thể được thực hiện bằng cách thay đổi kiểu hiển thị:

document.getElementById(“demo”).style.display = “none”;

or

document.getElementById(‘demo’).style.display = ‘none’;

JavaScript hiển thị các phần tử HTML

Hiển thị các yếu 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”;

or

document.getElementById(‘demo’).style.display = ‘block’

Lời kết

Với bài viết JavaScript là gì? Toàn bộ từ khái niệm, hoạt động, đến cách viết JavaScript cơ bản cùng các ví dụ cụ thể. Hy vọng sẽ mang lại nhiều kiến thức và đặc biệt có thể giúp bạn hiểu và có thể áp dụng trong việc học, công việc của bạn sau này. Chúc các bạn thành công.

Nguồn: Vietnix