Bắt đầu với JavaScript

Ngày đăng: 22/09/2020 - Cập nhật: 22/09/2020

Mục Lục

1. Ngôn ngữ JavaScript là gì?
2. Nhúng JavaScript vào trang web
3. Tổng kết

Xin chào các bạn hôm nay mình sẽ cùng bạn bắt đầu tìm hiểu bài đầu tiên về một ngôn ngữ lập trình được chạy ở phía khách hàng (Client - side) đó là chính ngôn ngữ JavaScript.

Vậy ngôn ngữ này là gì? Nó như thế nào cùng tìm hiểu với mình nhé.

Bài 1: Bắt đầu với JavaScript

1. Ngôn ngữ JavaScript là gì?

JavaScript được giới thiệu đầu tiên vào năm 1995. Mục đích là để đưa ra những chương trình ở trình duyệt Netscape Navigator – một trình duyệt web phổ biến những năm 1990.

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

Có lẽ việc đổi tên như vậy là để giúp JavaScript được chú ý nhiều hơn. Bởi tại thời điểm lúc bấy giờ, Java đang được coi là một hiện tượng và trở nên cực kỳ phổ biến.

Trên thực tế thì JavaScript được phát triển dựa trên ý tưởng của Java, nhưng mà chúng là hai ngôn ngữ hoàn toàn khoác biệt nhau.

Vì thế đừng nhầm lẫn giữa JavaScript và Java.

1.1. Đặc điểm chung của JavaScript.

JavaScript là ngôn ngữ lập trình bậc cao (high-level) giống như: C/C++, Java, Python, Ruby,… Nó gần với ngôn ngữ tự nhiên của con người. Trong khi những ngôn ngữ lập trình bậc thấp (low-level) như: Assembly sẽ gần với ngôn ngữ máy hơn.

JavaScript là ngôn ngữ lập trình động (dynamic programming language): Như Python, Ruby, Perl, … Chúng được tối ưu hóa cao nhằm nâng cao hiệu suất cho lập trình viên. Trong khi những ngôn ngữ lập trình tĩnh (static programming language): như C/C++, … Lại được tối ưu hóa cao hiệu suất cho phần cứng máy tính.

JavaScript là ngôn ngữ lập trình kịch bản (scripting language): Nghĩa là không cần biên dịch (compile) hay liên kết (linked) giống như ngôn ngữ lập trình cần phải biên dịch (C/C++, Java, …) mà nó sẽ được dịch tại thời điểm chạy như PHP.

JavaScript là ngôn ngữ lập trình hướng đối tượng (object-oriented): Có nghĩa là nó có các đặc trưng của ngôn ngữ lập trình hướng đối tượng như tính đóng gói (encapsulation), tính trừu tượng (abstraction), tính kế thừa (inheritance), tính đa hình (polymorphism).

1.2. Ứng dụng của ngôn ngữ JavaScript

JavaScript cùng với HTML, CSS trở thành ngôn ngữ lập trình không thể không thiếu cho website tính đến thời điểm hiện tại.

Ngoài ra có rất nhiều framework JavaScript khác nhau cho Front end: Angular.js, Angular2.js, ReactJS, Vue.js, Ember.js, backbone,….

JavaScript có thể sử dụng được ở phía server với framework: Node.js

Một số database sử dụng JavaScript như là kịch bản và là ngôn ngữ Query: MongoDB, CouchDB

JavaScript có thể dùng xây dựng ứng dụng Desktop với framework Electron. Một số ứng dụng nổi tiếng có thể kể đến là: Atom, Visual Studio Code, GitKraken, Wordpress.com,…

Để xây dựng ứng dụng đa nền tảng (Android, IOS) có thể dùng React-native.

2. Nhúng JavaScript vào trang web

Mình đã luyên thuyên về JavaScript rồi, mình sẽ nói về cách nhúng (hay bỏ) nó vào trang web như thế nào nhé.

2.1. Nhúng JS trực tiếp vào trang web

Bạn có thể thêm trực tiếp JavaScript vào trang web bằng cách sử dụng tag <script></script> để đặt chung cho tất cả mã JavaScript bạn viết ra.

JavaScript code có thể được thêm vào:

Giữa tag <head></head>

Giữa <body></body>

Ví dụ:

Mình tạo một thư mục JSCoBan, tạo file bai1.html, trong file bai1.html bạn thêm nội dung như sau:

		
		<html lang="en">

		<head>

		    <meta charset="UTF-8">

		    <meta name="viewport" content="width=device-width, initial-scale=1.0">

		    <title>Nhúng JS vào trang Web</title>

		    <!-- Nhúng vào head -->

		    <script>

		        alert("Xin chào các bạn đến với khóa học JS cơ bản!");

		    </script>

		    <!--  -->

		</head>

		<body>

		</body>

		</html>

Ngoài ra, bạn cũng có thể đặt JavaScript ở trong cặp thẻ <body></body>.

		
		<html lang="en">

		<head>

		    <meta charset="UTF-8">

		    <meta name="viewport" content="width=device-width, initial-scale=1.0">

		    <title>Nhúng JS vào trang Web</title>

		</head>

		<body>

		    <!-- Nhúng vào body -->

		    <script>

		        alert("Xin chào các bạn đến với khóa học JS cơ bản!");

		    </script>

		    <!--  -->

		</body>

		</html>

Khi nhúng vào head hay body đều có được kết quả như hình bên dưới:

Ví dụ minh họa Nhúng JS vào trang web

Tùy thuộc vào nơi bạn thêm code JavaScript trong HTML file, cách tải có thể khác nhau.

Thông thường sẽ đặt code JavaScript vào cặp thẻ <head></head> để tách hẳn khỏi nội dung chính của file HTML.

Nhưng trong khi làm việc thực tế, tùy thuộc vào loại mã JavaScript mà bạn đặt nó vào trong tag <body> hay <head>.

Trong head thường là những mã JS quan trọng

Đặt JavaScript ngay sau thẻ mở <body>

Đặt JavaScript ngay trước thẻ đóng </body>

Vì trình duyệt sẽ đọc file từ trên xuống dưới, từ trái sang phải. Do đó, đặt code JS càng ở cuối thì tốc độ tải trang càng tốt hơn.

Tuy nhiên, nếu cần JS để chạy luôn thì bạn nên đặt ở trên.

2.2. Nhúng JS vào trang web bằng file độc lập

Đôi khi thêm JavaScript và HTML trực tiếp làm ta rối mắt, khó quản lý code, có quá nhiều nội dung, hay có thể có nhiều trang sử dụng cùng một số tác vụ JavaScript giống nhau.

Vậy cách tốt nhất là bạn tạo một file JavaScript riêng biệt để thêm JavaScript vào HTML thông qua file đó.

Những files ngày được gọi trong HTML documents giống với cách gọi CSS ducuments. Lợi ích khác của việc thêm JavaScript code vào file độc lập là:

Khi HTML code và JavaScript code bị tách riêng ra, mục đích chính là tái sử dụng lại code.

Việc đọc lại code dễ dàng hơn, quản lý tốt hơn vì vậy debug, maintain cũng sẽ dễ hơn.

Files Cached JavaScript sẽ tăng tốc website bằng cách giảm thiểu thời gian trang phải tải.

Ví dụ:

Tạo một file bai1.js trong thư mục JSCoBan ở trên nhé:

Nội dung trong file bai1.js:

	
	alert("Xin chào các bạn đến với khóa học JavaScript cơ bản!");

Nội dung trong file bai1.html ta sửa thành như sau:

		
		<html lang="en">

		<head>

		    <meta charset="UTF-8">

		    <meta name="viewport" content="width=device-width, initial-scale=1.0">

		    <title>Nhúng JS vào trang Web</title>

		    <!-- Nhúng vào head -->

		    <script src="bai1.js"></script>

		    <!--  -->

		</head>

		<body>

		</body>

		</html>

Bạn thử chạy nó trên trình duyệt xem kết quả như thế nào nhé.

3. Tổng kết

Như vậy mình đã giới thiệu cho bạn về nguồn gốc của JavaScript cũng như các đặc điểm, tính ứn dụng của JavaScript.

Thêm nữa, để bắt đầu làm việc với JavaScript bạn cũng đã biết cách nhúng JavaScript vào trang web.

Với bài khởi động này hy vọng bạn sẽ thích thú với ngôn ngữ này. Hẹn gặp lại các bạn ở bài viết sau.

> Nếu bạn đang quan tâm về nghề lập trình web thì đừng bỏ qua LỘ TRÌNH HỌC LẬP TRÌNH WEB này.

Về trang trước Bài tiếp theo

Gửi email in trang