Hướng dẫn dùng followi JavaScript

Nội dung bài viết

Video học lập trình mỗi ngày

Không ai mong đợi điều này, nhưng JavaScript đã trở thành ngôn ngữ lập trình quan trọng nhất thế giới. - Douglas Crockford, JavaScript Architect at PayPal

Học Javascript ở đâu?

Câu hỏi này đã quá quen thuộc với mọi developer javascript, nhưng mỗi khi vào một bài viết thì chúng ta cũng cần phải nhắc lại một chút về những gì liên quan đến chú đề chúng ta chuẩn bị hướng tới. JavaScript là ngôn ngữ lập trình đơn giản và dễ học so với các ngôn ngữ khác như C ++, Ruby và Python. Dù nó thật sự đơn giản nhưng nó là ngôn ngữ cấp cao, không thua kém gì các ngôn ngữ khác.

Thêm thông tin cho các bạn nhé. JavaScript được phát triển bởi Netscape Communications Corporation, Mozilla Foundation và ECMA International. Brendan Eich được biết đến như là người sáng tạo hoặc thiết kế ngôn ngữ lập trình JavaScript. Và ban đầu, JavaScript được gọi là LiveScript, nhưng sau đó Netscape đã đổi tên thành JavaScript.

Một số tính năng tuyệt vời ban đầu của JavaScript như sau:

  • 1 - Nhẹ nhàng, một ngôn ngữ dễ học
  • 2 - Dễ dàng nhúng hay tích hợp với các ngôn ngữ như HTML, CSS
  • 3 - Cũng hoạt động như một client-side scripting language, giúp tạo các trang web động.

JavaScript là ngôn ngữ open source, cross-platform language và do đó chủ yếu được sử dụng để tạo các ứng dụng tập trung vào mạng. Ngày nay nó đã trở thành một phần không thể tách rời trong các công nghệ cốt lõi của internet. JavaScript được sử dụng trong các công nghệ web để làm cho các trang web tương tác. Cùng với HTML và CSS, JavaScript được sử dụng rộng rãi trong các web servers and databases.

Do đó bây giờ javascript đã phổ biến rộng rãi và có thể trở thành ngôn ngứ quan trọng nhất. Nếu bạn muốn theo đuổi sự nghiệp phát triển với JavaScript, thì mình nghĩ bạn đang đi đúng hướng rồi đấy.

Trong bài viết này, chúng tôi sẽ giới thiệu cho bạn một số resources tốt nhất cung cấp các hướng dẫn trực tuyến free để tìm hiểu JavaScript.

Các bạn hãy following những blog/page sau:

Danh sách cộng đồng lập trìnhviên(

  • Reddit
  • stackify
  • Codecademy
  • Learn JS
  • JavaScript.info
  • Tutorials Point
  • HTML Dog
  • Mozilla JavaScript Guide
  • JavaScript for Cats
  • JavaScript.com
  • Guru99
  • EchoEcho.com
  • Douglas Crockford’s JavaScript
  • JavaScript is Sexy
  • JavaScript Garden
  • Eloquent JavaScript by Marijn Haverbeke
  • Wikibooks
  • Web Teacher
  • JavaTpoint
  • Reference Designer
  • JavaScript Kit
  • DoFactory
  • Tizag.com
  • Tutorials Teacher
  • JavaScript Fundamentals – Channel 9
  • CodeAvengers
  • Sololearn
  • HowToCreate
  • Xahlee
  • Way2Tutorial
  • Java2s

Kết Luận

Dù bạn đang ở level nào cũng nên lướt qua những blog/resources trên vì ở đó là một tài nguyên quý giá cung cấp cho bạn nhiểu giải pháp để giải quyết một vấn đề. Hay nhiều thuật toán mà ngay cả nằm mơ bạn cũng chưa hết biết tới. Các chuyên gia đã bao nhiêu năm kinh nghiệm và họ không ngại ngần chia sẻ những kỹ năng tuyệt vời, vậy tại sao các bạn lại không tân hưởng điều đó chứ?

Cảm ơn các bạn đã đọc.
Src Origin: stackify.com

Tác giả: Dương Nguyễn Phú Cường

Nội dung chính

  • Video hướng dẫn
  • Cách 1: sử dụng file JavaScript rời (External File)
  • Cách 2: sử dụng code JavaScript bên trong file HTML (Internal File)
  • Cách 1: sử dụng file JavaScript rời (External File)
  • Ưu điểm và Nhược điểm
  • Step 1: tạo cấu trúc thư mục như sau
  • Step 2: viết code xử lý cho index.html và app.js
  • Step 3: Nhúng/Liên kết code JavaScript vào trong file HTML
  • Step 4: mở trang index.html bằng trình duyệt để xem kết quả
  • Cách 2: sử dụng code JavaScript bên trong file HTML (Internal File)
  • Ưu điểm và Nhược điểm
  • Step 1: tạo cấu trúc thư mục như sau
  • Step 2: viết code xử lý cho index.html và app.js
  • Step 3: mở trang index.html bằng trình duyệt để xem kết quả
  • Lưu ý: các trường hợp sai khi sử dụng JavaScript trong HTML

Ngày đăng: Hồi xưa đó

Video hướng dẫn

Cách 1: sử dụng file JavaScript rời (External File)

  • Đây là cách được sử dụng nhiều trong dự án thực tế.
  • Rất thuận tiện trong việc chia sẻ code Javascript giữa các dự án với nhau.
  • Thường sử dụng để lập trình các thư viện tiện ích (Javascript Library)

Cách 2: sử dụng code JavaScript bên trong file HTML (Internal File)

  • Thường được sử dụng để viết những đoạn code Javascript nhỏ gọn hoặc gọi hàm cần xử lý từ thư viện đã được liên kết

Cách 1: sử dụng file JavaScript rời (External File)

Ưu điểm và Nhược điểm

Ưu điểm Nhược điểm
Tách rời code xử lý JavaScript khỏi file giao diện HTML Cần phải Tổ chức thư mục và đặt tên file tốt để tránh gây rối dự án
Dễ dàng quản lý / tổ chức source code Cần phải liên kết chính xác đường dẫn đến file Javascript để sử dụng
Thường sử dụng trong các dự án thực tế
Thường được sử dụng để phát triển các thư viện tiện ích (Javascript library)

Step 1: tạo cấu trúc thư mục như sau

  • Cấu trúc Thư mục Dự án có sử dụng Javascript
\---ex1             <- thư mục gốc dự án
    |   index.html  <- trang chủ
    |
    \---js          <- thư mục chứa các file JavaScript của dự án
            app.js  <- file javascript dự án
  • Cấu trúc Thư mục dự án tạo trong Visual Studio Code

Step 2: viết code xử lý cho index.html và app.js

  • Nội dung file index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Nền tảng | JavaScript căn bản</title>
</head>
<body>
  <h2>Học JavaScript căn bản</h2>
</body>
</html>
  • Nội dung file app.js
// Gọi hàm alert('') để hiển thị thông báo
alert('Chào mừng đến với JavaScript. Tôi là code JS trong file rời...');

Step 3: Nhúng/Liên kết code JavaScript vào trong file HTML

  • Hiệu chỉnh file index.html
  • Bổ sung đoạn code liên kết file app.js vào file index.html
  • Lưu ý: nên sử dụng đường dẫn liên kết tương đối (relative path) để liên kết file
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Nền tảng | JavaScript căn bản</title>

  <!-- Nhúng/Liên kết code JavaScript vào trong file HTML -->
  <script src="js/app.js"></script>
</head>
<body>
  <h2>Học JavaScript căn bản</h2>
</body>
</html>

Step 4: mở trang index.html bằng trình duyệt để xem kết quả

  • Mở bằng trình duyệt (Chrome, Firefox, Safari, ...) để xem kết quả
  • Chuột phải file index.html -> Open With -> Google Chrome

  • Màn hình hiển thị thông báo chào mừng


Cách 2: sử dụng code JavaScript bên trong file HTML (Internal File)

Ưu điểm và Nhược điểm

Ưu điểm Nhược điểm
Code trong cùng 1 file HTML nên thuận tiện việc lưu trữ Khó khăn trong việc chia sẻ code cho các dự án khác
Viết các đoạn code JavaScript một cách nhanh chóng Không tách biệt HTML và JavaScript dẫn đến file code HTML nặng nề và dài dòng
Thuận tiện khi viết các đoạn demo ngắn gọn Khó khăn trong việc bảo trì code

Step 1: tạo cấu trúc thư mục như sau

  • Cấu trúc Thư mục Dự án có sử dụng Javascript
\---ex1             <- thư mục gốc dự án
    |   index.html  <- trang chủ
    |
    \---js          <- thư mục chứa các file JavaScript của dự án
            app.js  <- file javascript dự án
  • Cấu trúc Thư mục dự án tạo trong Visual Studio Code

Step 2: viết code xử lý cho index.html và app.js

  • Nội dung file index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Nền tảng | JavaScript căn bản</title>

  <!-- Nhúng/Liên kết code JavaScript vào trong file HTML -->
  <script src="js/app.js"></script>

  <!-- Đoạn code JavaScript bên trong file HTML -->
  <script>
    alert('Xin chào, tôi là đoạn code bên trong file HTML!');
  </script>
</head>
<body>
  <h2>Học JavaScript căn bản</h2>
</body>
</html>

Step 3: mở trang index.html bằng trình duyệt để xem kết quả

  • Mở bằng trình duyệt (Chrome, Firefox, Safari, ...) để xem kết quả
  • Chuột phải file index.html -> Open With -> Google Chrome

Lưu ý: các trường hợp sai khi sử dụng JavaScript trong HTML

  • Thẻ <script></script> cùng 1 lúc chỉ được thực hiện 1 tác vụ, không thể vừa cùng lúc liên kết file, vừa chứa code bên trong
  • Ví dụ trường hợp sử dụng sai:
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Nền tảng | JavaScript căn bản</title>

  <!-- Nhúng/Liên kết code JavaScript vào trong file HTML -->
  <script src="js/app.js"></script>

  <!-- Đoạn code JavaScript bên trong file HTML -->
  <script>
    alert('Xin chào, tôi là đoạn code bên trong file HTML!');
  </script>

  <!-- Đoạn code JavaScript sai, vì cùng lúc thực hiện nhiều tác vụ
      - Vừa liên kết file app.js
      - Vừa chạy đoạn script bên trong
      => Sai, một số trường hợp sẽ thực thi code không chính xác. Tốt nhất thực hiện chỉ 1 tác vụ cùng lúc. 
  -->
  <script src="js/app.js">
    alert('Xin chào, tôi là đoạn code thực hiện cùng lúc cả 2 tác vụ, tôi quá tải 😣!');
  </script>
</head>
<body>
  <h2>Học JavaScript căn bản</h2>
</body>
</html>