Javascript là Gì? Tổng quan về JS cho Người Mới

[ad_1]

JavaScript là gì? vì sao nó lại là ngôn ngữ quan trọng mà những ai mới bất đầu lập trình cần phải nắm vững ngôn ngữ này. Cùng Tmarketing tìm hiểu tổng quan về JavaScript, ứng dụng, ưu nhược điểm, so sánh các ngôn ngữ khác với JavaScript và cách viết một chương trình JavaScript đơn giản nhé !

JavaScript là gì?

JavaScript, theo phiên bản hiện hành, là một ngôn ngữ lập trình thông dịch được phát triển từ các ý niệm nguyên mẫu. Ngôn ngữ này được dùng rộng rãi cho các trang web (phía người dùng) cũng như phía máy chủ (với Nodejs).

Nó vốn được phát triển bởi Brendan Eich tại Hãng truyền thông Netscape với cái tên đầu tiên Mocha, rồi sau đó đổi tên thành LiveScript, và cuối cùng thành JavaScript.

Giống Java, JavaScript có cú pháp tương tự C, nhưng nó gần với Self hơn Java. .js là phần mở rộng thường được dùng cho tập tin mã nguồn JavaScript.

Nó cũng là một trong số 3 ngôn ngữ chính của lập trình web:

HTML: Giúp bạn thêm nội dung cho trang web.
CSS: Định dạng thiết kế, bố cục, phong cách, canh lề của trang web.
JavaScript: Cải thiện cách hoạt động của trang web.

JavaScript dùng làm gì?

JavaScript là một ngôn ngữ lập trình dựa trên nguyên mẫu với cú pháp phát triển từ C. Giống như C, JavaScript có khái niệm từ khóa, do đó, JavaScript gần như không thể được mở rộng.

Cũng giống như C, JavaScript không có bộ xử lý xuất/nhập (input/output) riêng. Trong khi C sử dụng thư viện xuất/nhập chuẩn, JavaScript dựa vào phần mềm ngôn ngữ được gắn vào để thực hiện xuất/nhập.

Trên trình duyệt, rất nhiều trang web sử dụng JavaScript để thiết kế trang web động và một số hiệu ứng hình ảnh thông qua DOM. JavaScript được dùng để thực hiện một số tác vụ không thể thực hiện được với chỉ HTML như kiểm tra thông tin nhập vào, tự động thay đổi hình ảnh,…

Ở Việt Nam, JavaScript còn được ứng dụng để làm bộ gõ tiếng Việt giống như bộ gõ hiện đang sử dụng trên trang Wikipedia tiếng Việt. Tuy nhiên, mỗi trình duyệt áp dụng JavaScript khác nhau và không tuân theo chuẩn W3C DOM, do đó trong rất nhiều trường hợp lập trình viên phải viết nhiều phiên bản của cùng một đoạn mã nguồn để có thể hoạt động trên nhiều trình duyệt. Một số công nghệ nổi bật dùng JavaScript để tương tác với DOM bao gồm DHTML, Ajax và SPA.

Bên ngoài trình duyệt, JavaScript có thể được sử dụng trong tập tin PDF của Adobe Acrobat và Adobe Reader. Điều khiển Dashboard trên hệ điều hành Mac OS X phiên bản 10.4 cũng có sử dụng JavaScript. Công nghệ kịch bản linh động (active scripting) của Microsoft có hỗ trợ ngôn ngữ JScript làm một ngôn ngữ kịch bản dùng cho hệ điều hành. JScript.NET là một ngôn ngữ tương thích với CLI gần giống JScript nhưng có thêm nhiều tính năng lập trình hướng đối tượng.

Từ khi Nodejs ra đời vào năm 2009, Javascript được biết đến nhiều hơn là một ngôn ngữ đa nền tảng khi có thể chạy trên cả môi trường máy chủ cũng như môi trường nhúng.

Mỗi ứng dụng này đều cung cấp mô hình đối tượng riêng cho phép tương tác với môi trường chủ, với phần lõi là ngôn ngữ lập trình JavaScript gần như giống nhau.

Cách hoạt động của JavaScript

JavaScript thường được nhúng trực tiếp vào một trang web hoặc được tham chiếu qua file .js riêng. Nó là ngôn ngữ phía client, tức là script được tải về máy của khách truy cập và được xử lý tại đó thay vì phía server là xử lý trên server rồi mới đưa kết quả tới khách truy cập.

Hãy lưu ý là các trình duyệt web phổ biến cũng hỗ trợ việc người dùng có muốn tắt JavaScript hay không. Đó là lý do bạn nên biết trang web sẽ hoạt động như thế nào torng trường hợp không có JavaScript.

Điều gì khiến JavaScript trở nên vĩ đại?

JavaScript có rất nhiều ưu điểm khiến nó vượt trội hơn so với các đối thủ, đặc biệt trong các trường hợp thực tế. Sau đây chỉ là một số lợi ích của JavaScript:

Nó nhanh hơn và nhẹ hơn các ngôn ngữ lập trình khác.
Bạn không cần một compiler vì web browser có thể biên dịch nó bằng HTML;
Nó dễ học hơn các ngôn ngữ lập trình khác;
Lỗi dễ phát hiện hơn và vì vậy dễ sửa hơn;
Bạn có thể sử dụng JavaScript để kiểm tra input và giảm thiểu việc kiểm tra thủ công khi truy xuất qua database;
Nó giúp website tương tác tốt hơn với khách truy cập;
Nó có thể được gắn trên một số element của trang web hoặc event của trang web như là thông qua click chuột hoặc di chuột tới;
JS hoạt động trên nhiều trình duyệt, nền tảng, vâng vâng;

Lợi ích khi dùng JavaScript

Là một ngôn ngữ lập trình phổ biến sử dụng trên 92% nền tảng website hiện nay, JavaScript đã thể hiện vai trò quan trọng với lĩnh vực này. Tầm quan trọng của nó thể hiện qua các thao tác, công dụng như:

Google AMP

Để tham gia vào dự án Tăng tốc trang di động (AMP) của Google, các lập trình viên phải sử dụng ngôn ngữ lập trình JavaScript. Bạn sẽ hiểu rõ hơn về Google AMP qua bài viết: Google AMP là gì?

Triển khai tập lệnh phía máy khách

Nhờ Javascript, các lập trình viên có thể dễ dàng viết tập lệnh phía máy khách, tích hợp các tập lệnh một cách liền mạch vào HTML, cho phép website tương tác, trả lời người dùng ngay lập tức và tạo ra giao diện hiển thị phong phú hơn.

Viết mã phía máy chủ

Các lập trình viên có thể viết mã phía máy chủ bằng JavaScript.

Thiết kế web responsive

JavaScript cho phép thiết kế web responsive – tối ưu trên cả máy tính và thiết bị di động chỉ với một bộ mã

Nhiều bộ chuyển đổi

Mặc dù thiếu một số tính năng phức tạp được cung cấp bởi các ngôn ngữ lập trình hiện đại như Java và C#, JavaScript vẫn có thể dễ dàng mở rộng bằng cách sử dụng các bộ chuyển đổi như CoffeeScript, TypeScript, DukeScript và Vaadin.

Đơn giản hóa phát triển ứng dụng web phức tạp

Javascript cho phép các nhà phát triển đơn giản hóa thành phần của ứng dụng, qua đó đơn giản hóa việc phát triển các ứng dụng web phức tạp.

Ưu nhược điểm của JS?

Ưu điểm của JavaScript

Sự tương tác Server ít hơn: Bạn có thể xác nhận đầu vào (input) người sử dụng trước khi gửi trang tới Server. Điều này làm tiết kiệm lưu lượng tải ở Server, nghĩa là Server của bạn tải ít hơn.
Khả năng tương tác tăng lên: Bạn có thể tạo các giao diện mà phản ứng lại khi người sử dụng rê chuột qua chúng hoặc kích hoạt chúng thông qua bàn phím.
Phản hồi ngay lập tức tới khách truy cập: Họ không phải chờ cho một trang web tải lại để thấy xem nếu họ đã quên nhập cái gì đó.
Giao diện phong phú hơn: Bạn có thể sử dụng JavaScript để bao gồm những mục như các thành phần Drag và Drop (DnD) và các con trượt (Slider) để cung cấp một Rich Interface (Giao diện giàu tính năng) tới site khách truy cập của bạn.

Nhược điểm JavaScript

Chúng ta không thể đối xử JavaScript như là một ngôn ngữ chương trình chính thức (full-fledged). Nó thiếu các tính năng quan trọng sau:

Client-side JavaScript không cho phép đọc và ghi các file, bởi vì lý do bảo mật.
JavaScript không có bất kỳ khả năng đa luồng hoặc đa xử lý.
JavaScript không được sử dụng cho việc kết nối mạng các ứng dụng bởi vì không có những hỗ trợ có sẵn.
Một lần nữa, JavaScript là một ngôn ngữ chương trình thông dịch, nhẹ mà cho phép bạn xây dựng khả năng tương tác trong các trang HTML tĩnh.

Các thư viện Javascript phổ biến

Hiện nay có rất nhiều thư viện và khung được viết từ Javascript như:

jQuery: Chuyên về hiệu ứng.
js: Chuyên xây dựng ứng dụng thời gian thực.
Bộ khung Prototype kết hợp với thư viện scriptaculous.
Nodejs, hệ thống chương trình giúp chạy Javascript ngoài trình duyệt.
AngularJS: Chuyên xây dựng ứng dụng trang cá nhân.
ReactJS: Chuyên viết ứng dụng mobile.
Một số thư viện khác như ExtJS, Sencha Touch,….

So sánh các ngôn ngữ lập trình web khác và JavaScript

Trên thực tế, các nhà lập trình viên cũng sử dụng bổ sung các ngôn ngữ lập trình khác bên cạnh JavaScript nếu họ có yêu cầu đặc biệt. Điểm khác biệt có thể kể đến là:

HTML là gì?

HTML (Hypertext Markup Language) là một nền tảng tương tự như Microsoft Word giúp người dùng thiết kế thành phần trong website, cấu trúc các trang, chuyên mục hoặc các thiết kế các ứng dụng… Vậy, chức năng chủ yểu của nền tảng này chính là tạo bố cục và định dạng website.

PHP: PHP là ngôn ngữ phía máy chủ, khác với JavaScript chạy trên máy khách hàng. Nó thường được sử dụng trong các hệ quản trị nội dung nền PHP như WordPress.

CSS là gì?

CSS là từ viết tắt của cụm từ Cascading Style Sheets, ngôn ngữ được sử dụng để tạo nên phong cách cho website.

Hướng dẫn viết chương trình JavaScript đầu tiên

Bước đầu tiên để học Javascript là bạn cần phải chuẩn bị một phần mềm để viết mã Javascript (IDE JavaScript). Bởi tất cả các trình duyệt đều hỗ trợ ngôn ngữ này nên bạn không cần phải download thư viện mà thông qua những đoạn mã script, trình duyệt sẽ nhận diện được nó. Hướng dẫn sau đây để bạn hiểu hơn về cấu trúc của JavaScript trong lập trình web. Nếu muốn tìm hiểu sâu hơn lập trình JavaScript bạn nên xem qua web tự học JavaScript W3School.

Cặp thẻ mở và thẻ đóng

Tất cả những đoạn mã Javascript đều phải đặt trong cặp thẻ mở <script> và thẻ đóng </script>

Ví dụ:

<script language="javascript">

    alert("Hello World!");

</script>

Đặt thẻ script ở đâu?

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

Internal – viết trong file html hiện tại

Thông thường, bạn có thể viết những đoạn mã Javascript trên phần head. Tuy nhiên, đó cũng không phải là điều kiện bắt buộc. Vì vậy bạn có thể đặt ở bất kỳ đâu tùy thích miễn là được bao lại bằng thẻ script.

Ví dụ: Đặt trong thẻ head

<html>

    <head>

        <title></title>

        <script language="javascript">

            alert("Hello World!");

        </script>

    </head>

    <body>

        

    </body>

</html>

External – viết ra một file js khác rồi import vào

Bạn có thể viết những đoạn mã Javascript ở một file có phần mở rộng là .js, sau đó dùng thẻ script để import vào. Lúc này bên trong file demo.js bạn không đặt thẻ scirpt. Vì nhờ vào đuôi .js, trình duyệt sẽ tự nhận đây là file chứa mã Javascript.

Ví dụ:

<script language="javascript" src="https://tmarketing.vn/javascript-la-gi-kien-thuc-tong-quan/demo.js"></script>

Inline – viết trực tiếp trong thẻ HTML:

Với Inline, bạn sẽ viết những đoạn mã Javascript trực tiếp trong thẻ HTML. Ví dụ bên dưới viết dưới dạng inline vì đoạn mã alert(1) được đặt trong sự kiện onclick của thẻ button.

Ví dụ:

<input type="button" onclick="alert(1)" value="Click Me"/>

Viết chương trình JavaScript

Trước khi thực hành, hãy đảm bảo rằng bạn có thể sử dụng một phần mềm viết code bất kỳ để viết mã Javascript.

Bước 1:

Tạo một file index.html và lưu tại bất kì vị trí nào với phần mở rộng là .html
Mở file bằng Notepad++ rồi gõ nội dung sau:

<html>

    <head>

        <title></title>

    </head>

    <body>

        <input type="button" value="Click Me"/>

    </body>

</html>

Chạy lên bằng Firefox hoặc Chrome bạn thấy xuất hiện một button

Bước 2:

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>

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

Một trong những điểm mạnh lớn nhất của JavaScript là nó không yêu cầu các công cụ phát triển tốn kém. Bạn có thể bắt đầu với một bộ biên soạn (Editor) văn bản đơn giản như Notepad. Khi nó là một ngôn ngữ thông dịch bên trong context của một trình duyệt web, bạn không cần phải mua một Complier (bộ phiên dịch).

Để làm cuộc sống của bạn đơn giản hơn, nhiều nhà cung cấp đã cho ra đời các công cụ chỉnh sửa JavaScript đẹp, được liệt kê dưới đây:

Microsoft FrontPage Microsoft đã phát triển một HTML Editor phổ biến được gọi là FrontPage. FrontPage cũng cung cấp cho nhà lập trình các công cụ JavaScript để giúp đỡ tạo các Website có tính tương tác.
Macromedia HomeSite 5 HomeSite 5 là một HTML và JavaScript Editor từ Macromedia mà có thể được sử dụng để quản lý các Website cá nhân một cách hiệu quả.
Macromedia Dreamweaver MX Macromedia Dreamweaver MX là một HTML và JavaScript Editor rất phổ biến trong cộng đồng lập trình web chuyên nghiệp. Nó cung cấp các thành phần JavaScript đã xây dựng trước mà thuận tiện, tích hợp tốt với cơ sở dữ liệu, và theo các chuẩn mới như XHTML và XML.

Trên đây là kiến thức tổng quan mà Tmarketing muốn chia sẻ đến bạn, nhất là các bạn mới bắt đầu học lập trình thì nên nắm các kiến thức cơ bản trên. Hy vọng nội dung sẽ giúp bạn có được cái nhìn tổng quan về Javascript. Nếu có bất kì thắc mắc nào bạn có thể liên hệ với Tmarketing đơn vị chuyên thiết kế website bán hàng , thiết kế web bán hàng bằng wordpress và cung cấp các giải pháp về website – hosting – VPS các giải pháp về Digital Marketing để giải đáp các thắc mắc nhé !

[ad_2]

Source link