Javascript là gì? Tổng quan về JS cho người mới bắt đầu

Có bao giờ bạn tự hỏi Javascript là gì mà chúng lại trở nên quan trọng như vậy, đặc biệt là đối với những người mới bắt đầu lập trình. Hôm nay, các bạn hãy cùng công ty thiết kế website Nhật Nam Media tìm hiểu về khái niệm, ưu nhược điểm, vai trò của Javascript nhé!

Contents

JavaScript là gì?

Hiểu đơn giản, Javascript chính là một ngôn ngữ được sử dụng trong lập trình và chúng được phát triển từ những ý niệm nguyên mẫu. Chúng được sử dụng rộng rãi cho các website (đối với người dùng) và phía máy chủ (đối với Nodejs).

Javascript được phát triển bởi Brendan Eich tại Hãng truyền thông Netscape với cái tên Mocha. Sau đó được đổi tên là Livescript và cuối cùng là JavaScript (được sử dụng đến hiện tại).

Javascript có cú pháp tương tự C, gần với Self hơn là Java. Những tập tin mã nguồn JavaScript có phần mở rộng là .js.

Chúng cũng chính là một trong những ngôn ngữ chính được sử dụng khi lập trình website:

CSS: giúp định dạng thiết kế, phong cách, bố cục, canh lề của website
HTML: thêm nội dung vào website
Javascript: giúp cải thiện các hoạt động trên website

JavaScript dùng để làm gì?

Được phát triển dựa trên nguyên mẫu với phú pháp phát triển từ C, Javascript là một ngôn ngữ lập trình có khái niệm từ khóa và chính vì thế mà Javascript gần như không thể mở rộng.

Tương tự như C, Javascript sẽ không có bộ xử lý input/ output (xuất/ nhập) riêng. Nếu C sử dụng thư viện input/ output chuẩn thì Javascript lại dựa vào phần mềm ngôn ngữ đã được gắn vào nhằm thực hiện chức năng input/ output.

Hiện tại trên trình duyệt, có rất nhiều website sử dụng Javascript với mục đích thiết kế và một số hiệu ứng hình ảnh thông qua DOM. Ngoài ra, JavaScript còn được sử dụng để thực hiện những tác vụ không thực hiện được với HTML chẳng hạn như: tự động thay đổi hình ảnh, kiểm tra thông tin nhập vào,…

Tại Việt Nam, JavaScript được sử đụng để làm bộ gõ tiếng Việt tương tự như bộ hõ được sử dụng trên trang Wikipedia tiếng Việt. Mặc dù như vậy nhưng trình duyệt áp dụng Javascript lại khác nhau và không theo chuẩn W3C DOM. Chính vì thế mà có rất nhiều trường hợp, lập trình viên phải viết rất nhiều phiên bản của cùng một đoạn mã nguồn để chúng hoạt động được trên nhiều trình duyệt website nhất có thể. Các bạn có thể tham khảo thêm một số công nghệ dùng Javascript nhằm tương tác với DOM như: SPA, Ajax, DHTML.

Không chỉ sử dụng cho trình duyệt, JavaScript còn được sử dụng cho cả tập tin PDF (Adobe Acrobat và Adobe Reader) và điều khiển Dashboard trên hệ điều hành Mac OS X (phiên bản 10.4). Ngoài ra, công nghệ kịch bản linh động (Active Scripting) của Microsoft cũng có hỗ trợ ngôn ngữ JScript làm ngôn ngữ kịch bản cho hệ điều hành. Một ngôn ngữ tương thích với CLI gần giống JScript chính là JScript.NET nhưng nay có thêm nhiều tính năng lập trình hơn.

Vào năm 2009, khi Nodejs ra đời, Javascript đã được biết đến nhiều hơn là một ngôn ngữ lập trình đa nền tảng và chúng có thể chạy cả trong môi trường máy chủ và môi trường nhúng.

Dù chỉ cung cấp mô hình đối tượng cho phép tương tác với môi trường chủ, phần lõi là Javascript gần như tương tự với nhau.

Cách thức hoạt động của Javascript

Javascript thường được nhúng trực tiếp vào một website hoặc tham chiếu qua file .js riêng. Chúng là ngôn ngữ script được tải về máy của người dùng truy cập vào trang web và sẽ được xử lý tại đó thay vì xử lý trên server rồi mới đưa kết quả tới phía người dùng trình duyệt.

Xem thêm FTP là gì? Tổng quát về FTP từ A đến Z Chi Tiết Nhất

Tuy nhiên, các bạn hãy lưu ý một điều rằng các website phổ biến sẽ hỗ trợ cho người dùng nếu họ muốn tắt Javascript. Đó cũng là một phần khiến người dùng nên biết website hoạt động ra sáo nếu không có Javascript.

Điều gì khiến JavaScript trở nên quan trọng

Sau đây là một số lợi ích mà Javascript mang lại:

Javascript nhanh và nhẹ hơn so với những ngôn ngữ lập trình khác
Javascript dễ học hơn so với ngôn ngữ lập trình khác
Các bạn không cần một compiler vì tại web brower đã có biên dịch bằng HTML
Dễ phát hiện lỗi và chỉnh sửa dễ dàng hơn
Có thể sử dụng Javascript để kiểm tra nhập (input) đồng thời giảm thiểu việc kiểm tra theo phương pháp thủ công khi xuất qua database.
Javascript giúp trang web tương tác tốt hơn với người sử dụng
Javascript có thể gắn trên một số element của website, sự kiện như thông qua nhấp chuột hoặc di chuột đến
Javascript hoạt động được trên nhiều nền tảng và trình duyệt khác nhau

Những lợi ích khi sử dụng Javascript

Hiện nay, Javascript là một ngôn ngữ lập trình được sử dụng trên 92% nền tảng trang web. Điều này chứng tỏ, Javascript đã chứng minh được sự quan trọng của mình trong lĩnh vực này. Một số lợi ích khi sử dụng Javascript mà bạn có thể tham khảo:

Google AMP: AMP (dự án Tăng tốc trang di động) của Google và để tham gia vào các dự án ấy thì các lập trình viên buộc phải sử dụng Javascript.
Triển khai lệnh từ phía máy khách hàng: thông qua ngôn ngữ lập trình Javascript, lập trình viên có thể dễ dàng viết lệnh từ máy khách hàng, đồng thời tích hợp tập lệnh liền mạch vào HTML. Ngoài ra, cho phép trang web trả lời, tương tác với người dùng nhanh hơn và hiển thị giao diện phong phú hơn.
Viết mã từ phía máy chủ: bằng Javascript có thể sử dụng để viết mã từ phía máy chủ
Thiết kế web responsive: ngôn ngữ lập trình Javascript cho phép thiết kế web responsive – tối ưu trên cả thiết bị di động, máy tính chỉ với một bộ mã.
Nhiều bộ chuyển đổi: Mặc dù còn thiếu sót một vài tính năng phức tạp, nhưng Javascript vẫn dễ dàng mở rộng bằng cách sử dụng những bộ chuyển đổi như TypeScript, CoffeeScript, DukeScript. Vaadin, TypeScript.
Đơn giản hóa phát triển website phức tạp: ngôn ngữ lập trình Javascript sẽ cho phép những nhà phát triển đơn giản hóa ứng dụng website phức tạp của họ

Ưu và nhược điểm của Javascript

Ưu điểm của Javascript

Tương tác với server ít hơn: các bạn có thể xác nhận input (đầu vào) của người sử dụng trước khi gửi tới trang server. Việc này sẽ giúp bạn tiết kiệm được lưu lượng tải của Server.
Tăng khả năng tương tác: bằng javascript, các bản có thể tạo ra giao diện phản ứng lại mỗi khi người dùng di chuyển chuột qua chúng hoặc kích hoạt thông qua bàn phím.
Phản hồi người dùng ngay lập tức: không để người dùng trang web phải chờ đợi lâu thông qua Javascript
Giúp giao diện trở nên phong phú, sinh động hơn: các bạn có thể sử dụng các phần như Drag và Drop (DnD) cùng với con trượt (Slider) để cung cấp cho Giao diện giàu tính năng (Rich Interface) tới site mà khách hàng đang truy cập.

Nhược điểm của Javascript

Ngôn ngữ lập trình Javascript không có khả năng đa xử lý hoặc đa luồng
Không được sử dụng với mục đích kết nối mạng với ứng dụng vì chúng không có các hỗ trợ có sẵn.
Client – side Javascript không cho phép đọc, ghi các file nhằm mục đích bảo mật.
Ngôn ngữ lập trình Javascript là một ngôn ngữ chương trình thông dịch mà các bạn có thể xây dựng khả năng tương tác trong trang HTML tĩnh.

Xem thêm Tổng Hợp Các Plugin Cần thiết cho WordPress Nhất định Phải biết

Những thư viện Javascript phổ biến nhất

Các bạn có thể tham khảo một số những thư viện Javascript phổ biến sau đây:

jQuery: chuyên về các hiệu ứng
Bộ khung Prototype phối hợp với thư viện scriptaculous
js: chuyên xây dựng ứng dụng liên quan đến thời gian thực
Nodejs: giúp Javascript chạy ngoài trình duyệt
Angular JS: sử dụng để xây dựng ứng dụng trang cá nhân
React JS: sử dụng để viết ứng dụng mobile
Một số thư viện khác, chẳng hạn: Sencha Touch, ExtJS,…

So sánh Javascript với những ngôn ngữ lập trình website khác?

Hiện nay, trong trường hợp đặc biệt thì lập trình viên sẽ sử dụng những ngôn ngữ lập trình khác bên cạnh ngôn ngữ lập trình Javascript. Chúng ta hãy cùng so sánh sự khác biệt của các dạng ngôn ngữ lập trình này nhé.

HTML là gì?

HTML ( viết tắt của Hypertext Markup Language) là một nền tảng giống như Microsoft Word giúp cho người sử dụng thiết kế các thành phần trong trang web, các chuyên mục, cấu trúc trang hoặc thiết kế ứng dụng,…HTML chức năng chính của chúng là định dạng trang web và tạo bố cục.

PHP

PHP là một ngôn ngữ từ phía máy chủ, chúng khách với ngôn ngữ lập trình Javascript chạy trên máy của khách hàng.

CSS

CSS (viết tắt của Cascading Style Sheets) được sử dụng với mục đích tạo nên phong cách cho trang web.

Hướng dẫn viết chương trình Javascript đầu tiên

Để bắt đầu học ngôn ngữ lập trình Javascript, các bạn cần phải chuẩn bị một phần mềm để viết mã IDE Javascript, hầu hết tất cả các trình duyệt đều hỗ trợ co loại ngôn ngữ nên không cần phải tải về thư viện mà sẽ thông qua đoạn mã script và trình duyệt sẽ nhận diện được chúng. Các bạn có thể hiểu hơn về cấu trúc Javascript qua hướng dẫn sau đây. Đối với các bạn muốn tìm hiểu sâu hơn có thể tham khảo tại Javascript W3School.

Cặp thẻ mở và thẻ đóng

Tất cả đoạn mã của ngôn ngữ lập trình Javascript đều phải đặc trong cặp thẻ mở <script> và thẻ đóng </script>

Lấy ví dụ sau đây:

alert (“Hello world!”);

</script>

Nên đặt thẻ script ở vị trị nào?

Viết trong file HTML hiện tại – Internal

Đa số, các bạn có thể viết những đoạn mã bằng ngôn ngữ lập trình Javascript tại phần head. Tuy nhiên, chúng không phải điều kiện bắt buộc. Các bạn có thể đặt chúng ở bất cứ vị trí nào miễn là được bao lại bằng thẻ script.

Chẳng hạn như: đặt ở vị trí thẻ head

Viết ra một fiel Js khác rồi import vào – External

Các bạn có thể viết đoạn mã bằng ngôn ngữ lập trình Javascript tại một file có phần mở rộng .js, tiếp theo sử dụng thẻ script để import vào. Khi đó trong file demo.js, các bạn không đặt thẻ script vì nhờ trình duyệt sẽ tự nhận định đây là file chứa Javascript thông qua đuôi .js.

Lấy ví dụ như sau:

Viết trực tiếp trong thẻ HTML – Inline

Đối với Inline, các bạn sẽ viết đoạn mã bằng ngôn ngữ Javascript trực tiếp tại thẻ HTML luôn nhé. Chẳng hạn như ở ví dụ bên dưới, chúng được viết theo dạng inline bởi đoạn mã alert(1) được đặt trong sự kiện onclick của thẻ button.

Xem thêm Tab ẩn Danh là gì? Tìm hiểu Tổng quan Tab Ẩn Danh trên Trình duyệt

Viết chương trình Javascript

Bước 1:

Đầu tiên, bạn phải tạo một file index.html sau đó lưu lại ở bất cứ vị trị nào với phần mở rộng có đuôi là .html
Tiếp theo, mở file bằng Notepad++ và nhập nội dung sau đây

<html>

<head>

</head>

<body>

</body>

</html>

Tiến hành chạy bằng Chrome hoặc Firefox bạn sẽ thấy xuất hiện một button

Bước 2: Tại button có id=”clickme” tiến hành viết mã Javascript

<html>

<head>

</head>

<body>

// Lấy element có id=clickme lưu vào biến button

var button = document.getElementById(‘clickme”);

// Khi click vào element chứa trong button thì thực hiện một function,

// bên trong function thông báo lên Hello World!

button.addEventListener(‘click’ function(){

alert(‘Hello World!);

});

</script>

</body>

</html>

Những công vụ phát triển Javascript

Một trong những ưu điểm và cũng là điểm mạnh lớn nhất của ngôn ngữ lập trình Javascript phải kể đến chính là chúng không yêu cầu những công cụ phát triển đắt tiền. Các bạn có thể bắt đầu bằng một bộ Editor (biên soạn) văn bản đơn giản, chẳng hạn như Notepad. Vốn dĩ bản chất của Javascript là một ngôn ngữ thông dịch bên trong context của một trình duyệt website nên các bạn không nhất thiết phải mưa theo một bộ phiên dịch (Complier).

Nhiều nhà cung cấp đã cho ra đời những công cụ chỉnh sửa ngôn ngữ lập trình Javascript đẹp và giúp cho cuộc sống của các bạn trở nên thuận tiện, đơn giản hơn. Một số công cụ được kể đến gồm:

Microsoft FrontPage Microsoft: với tên gọi phổ biến là FrontPage, được phát triển bởi một HTML Editor, Chúng cũng cấp cho những nhà lập trình các công cụ Javascript giúp họ tạo ra các trang web có tính tương tác.
Macromedia Homesite 5 HomeSite 5: đây là một HTML và Javascript Editor được phát triển từ Macromedia. Các bạn có thể sử dụng để quản trí trang web cá nhân hiệu quả và tối ưu nhất.
Macraomedia Dreamweaver MX: một trong những công cụ phổi biến trong giới lập trình website chuyên nghiệp. Không chỉ cung cấp những thành phần Javascript mà công cụ này còn tích hợp với cơ sở dữ liệu, theo chuẩn mởi như XHTML và XML.

Trên đây là những kiến thức tổng quan về Javascript mà Nhật Nam Media đã tổng hợp và chia sẻ đến các bạn. Hi vọng những thông tin trên sẽ giúp ích cho các bạn trong quá trình học tập về ngôn ngữ lập trình. hãy theo dõi Nhật Nam Media để biết thêm kiến thức liên quan đến digital media nhé. Chúc các bạn thành công.