Cách bắt đầu mã JavaScript

Question

JavaScript được tạo ra cho web, nhưng nó có thể làm được nhiều hơn thế. Tìm hiểu những điều cơ bản, sau đó tải xuống bảng cheat của chúng tôi để bạn luôn có sẵn thông tin chi tiết

Nội dung chính Show

Cài đặt JavaScript
Bắt đầu với JavaScript
cú pháp JavaScript
Tạo biến trong JavaScript
Tạo hàm trong JavaScript
Ứng dụng đa nền tảng với JavaScript
Hướng dẫn thực tế về cách đóng JavaScript
Học JavaScript bằng cách viết một trò chơi đoán
4 lý do khiến JavaScript trở nên phổ biến
Làm cách nào để bắt đầu một dự án JavaScript?
Làm cách nào để viết một mã JavaScript đơn giản?
Tôi có thể bắt đầu trực tiếp với JavaScript không?
Mã cơ bản cho JavaScript là gì?

Qua

Seth Kenlon (Đội, Mũ đỏ)

Ngày 22 tháng 7 năm 2021 . . %t phút đọc

Đăng ký hoặc Đăng nhập để thích

Hình ảnh của

Mã nguồn mở. com

JavaScript là một ngôn ngữ lập trình đầy bất ngờ thú vị. Nhiều người lần đầu tiên gặp JavaScript như một ngôn ngữ cho web. Có một công cụ JavaScript trong tất cả các trình duyệt chính, có các khung phổ biến như JQuery, Cash và Bootstrap để giúp thiết kế web dễ dàng hơn và thậm chí còn có các môi trường lập trình được viết bằng JavaScript. Nó dường như có ở khắp mọi nơi trên internet, nhưng hóa ra nó cũng là một ngôn ngữ hữu ích cho các dự án như Electron, một bộ công cụ nguồn mở để xây dựng các ứng dụng máy tính để bàn đa nền tảng với JavaScript

JavaScript là một ngôn ngữ đa năng đáng ngạc nhiên với nhiều loại thư viện cho nhiều mục đích hơn là chỉ tạo trang web. Học những điều cơ bản của ngôn ngữ thật dễ dàng và đó là cánh cổng để xây dựng bất cứ thứ gì bạn tưởng tượng

Cài đặt JavaScript

Lập trình và phát triển

Blog nhà phát triển mũ đỏ
Lập trình cheat sheet
Thử miễn phí. Đăng ký học Red Hat
sách điện tử. Giới thiệu về lập trình với Bash
Bash Shell Scripting Cheat Sheet
sách điện tử. Hiện đại hóa doanh nghiệp Java

Khi bạn tiến bộ với JavaScript, bạn có thể thấy mình muốn có các thư viện và thời gian chạy JavaScript nâng cao. Tuy nhiên, khi bạn mới bắt đầu, bạn hoàn toàn không phải cài đặt JavaScript. Tất cả các trình duyệt web chính đều bao gồm một công cụ JavaScript để chạy mã. Bạn có thể viết JavaScript bằng trình soạn thảo văn bản yêu thích của mình, tải nó vào trình duyệt web của bạn và xem mã của bạn làm gì

Bắt đầu với JavaScript

Để viết mã JavaScript đầu tiên của bạn, hãy mở trình soạn thảo văn bản yêu thích của bạn, chẳng hạn như Notepad++, Atom hoặc VSCode. Vì nó được phát triển cho web nên JavaScript hoạt động tốt với HTML, vì vậy trước tiên, hãy thử một số HTML cơ bản

<html>
  <head>
    <title>JS</title>
  </head>
  <body>
    <p id="example">Nothing here.</p>
  </body>
</html>

Lưu tệp, rồi mở tệp trong trình duyệt web

Hình ảnh của

(Seth Kenlon, CC BY-SA 4. 0)

Để thêm JavaScript vào trang HTML đơn giản này, bạn có thể tạo một tệp JavaScript và tham khảo nó trong head của trang hoặc chỉ cần nhúng mã JavaScript của bạn vào HTML bằng cách sử dụng thẻ <script>. Trong ví dụ này, tôi nhúng mã

<html>
  <head>
    <title>JS</title>
  </head>
  <body>
    <p id="example">Nothing here.</p>

    <script>
      let myvariable = "Hello world!";

      document.getElementById("example").innerHTML = myvariable;
    </script>
    
  </body>
</html>

Tải lại trang trong trình duyệt của bạn

Hình ảnh của

(Seth Kenlon, CC BY-SA 4. 0)

Như bạn có thể thấy, thẻ <p> được viết vẫn chứa chuỗi "Không có gì ở đây", nhưng khi nó được hiển thị, JavaScript sẽ thay đổi nó để nó chứa "Xin chào thế giới" thay vào đó. Có, JavaScript có khả năng xây dựng lại (hoặc chỉ giúp xây dựng) một trang web

JavaScript trong tập lệnh đơn giản này thực hiện hai việc. Đầu tiên, nó tạo một biến có tên là myvariable và đặt chuỗi "Xin chào thế giới. "vào đó. Cuối cùng, nó tìm kiếm tài liệu hiện tại (trang web mà trình duyệt đang hiển thị) cho bất kỳ phần tử HTML nào có ID example. Khi tìm thấy example, nó sử dụng hàm

<html>
  <head>
    <title>JS</title>
  </head>
  <body>
    <p id="example">Nothing here.</p>

    <script>
      let myvariable = "Hello world!";

      document.getElementById("example").innerHTML = myvariable;
    </script>
    
  </body>
</html>

1 để thay thế nội dung của phần tử HTML bằng nội dung của myvariable

Tất nhiên, việc sử dụng biến tùy chỉnh là không cần thiết. Thật dễ dàng để điền vào phần tử HTML với thứ gì đó được tạo động. Chẳng hạn, bạn có thể điền vào đó một dấu thời gian

<html>
  <head>
    <title>JS</title>
  </head>
  <body>
    <p id="example">Date and time appears here.</p>

    <script>
      document.getElementById("example").innerHTML = Date();
    </script>
    
  </body>
</html>

Tải lại trang để xem dấu thời gian được tạo tại thời điểm trang được hiển thị. Tải lại một vài lần để xem gia số giây

cú pháp JavaScript

Trong lập trình, cú pháp đề cập đến các quy tắc về cách viết câu (hoặc "dòng"). Trong JavaScript, mỗi dòng mã phải kết thúc bằng dấu chấm phẩy (

<html>
  <head>
    <title>JS</title>
  </head>
  <body>
    <p id="example">Nothing here.</p>

    <script>
      let myvariable = "Hello world!";

      document.getElementById("example").innerHTML = myvariable;
    </script>
    
  </body>
</html>

3) để công cụ JavaScript chạy mã của bạn hiểu khi nào nên ngừng đọc

Các từ (hoặc "chuỗi") phải được đặt trong dấu ngoặc kép (

<html>
  <head>
    <title>JS</title>
  </head>
  <body>
    <p id="example">Nothing here.</p>

    <script>
      let myvariable = "Hello world!";

      document.getElementById("example").innerHTML = myvariable;
    </script>
    
  </body>
</html>

4), trong khi các số (hoặc "số nguyên") không được đặt

Hầu hết mọi thứ khác đều là quy ước của ngôn ngữ JavaScript, chẳng hạn như biến, mảng, câu điều kiện, đối tượng, hàm, v.v.

Tạo biến trong JavaScript

Biến là nơi chứa dữ liệu. Bạn có thể coi biến là một hộp nơi bạn có thể đặt dữ liệu để chia sẻ với chương trình của mình. Tạo một biến trong JavaScript được thực hiện với hai từ khóa bạn chọn dựa trên cách bạn định sử dụng biến.

<html>
  <head>
    <title>JS</title>
  </head>
  <body>
    <p id="example">Nothing here.</p>

    <script>
      let myvariable = "Hello world!";

      document.getElementById("example").innerHTML = myvariable;
    </script>
    
  </body>
</html>

5 và

<html>
  <head>
    <title>JS</title>
  </head>
  <body>
    <p id="example">Nothing here.</p>

    <script>
      let myvariable = "Hello world!";

      document.getElementById("example").innerHTML = myvariable;
    </script>
    
  </body>
</html>

6. Từ khóa

<html>
  <head>
    <title>JS</title>
  </head>
  <body>
    <p id="example">Nothing here.</p>

    <script>
      let myvariable = "Hello world!";

      document.getElementById("example").innerHTML = myvariable;
    </script>
    
  </body>
</html>

6 biểu thị một biến dành cho toàn bộ chương trình của bạn sử dụng, trong khi

<html>
  <head>
    <title>JS</title>
  </head>
  <body>
    <p id="example">Nothing here.</p>

    <script>
      let myvariable = "Hello world!";

      document.getElementById("example").innerHTML = myvariable;
    </script>
    
  </body>
</html>

5 tạo các biến cho các mục đích cụ thể, thường là bên trong các hàm hoặc vòng lặp

Hàm

<html>
  <head>
    <title>JS</title>
  </head>
  <body>
    <p id="example">Nothing here.</p>

    <script>
      let myvariable = "Hello world!";

      document.getElementById("example").innerHTML = myvariable;
    </script>
    
  </body>
</html>

9 tích hợp sẵn của JavaScript có thể giúp bạn xác định loại dữ liệu mà một biến chứa. Sử dụng ví dụ đầu tiên, bạn có thể tìm ra loại dữ liệu mà myvariable chứa bằng cách sửa đổi văn bản được hiển thị thành

<string>
let myvariable = "Hello world!";
document.getElementById("example").innerHTML = typeof(myvariable);
</string>

Điều này hiển thị "chuỗi" trong trình duyệt web của bạn vì biến chứa "Xin chào thế giới. " Việc lưu trữ các loại dữ liệu khác nhau (chẳng hạn như số nguyên) trong myvariable sẽ khiến một loại dữ liệu khác được in ra trang web mẫu của bạn. Hãy thử thay đổi nội dung của myvariable thành số yêu thích của bạn rồi tải lại trang

Tạo hàm trong JavaScript

Hàm trong lập trình là bộ xử lý dữ liệu độc lập. Chúng là những gì làm cho lập trình mô-đun. Đó là vì các chức năng tồn tại mà các lập trình viên có thể viết các thư viện chung, chẳng hạn như thay đổi kích thước hình ảnh hoặc theo dõi thời gian trôi qua để các lập trình viên khác (như bạn) sử dụng trong mã của riêng họ

Bạn tạo một hàm bằng cách cung cấp một tên tùy chỉnh cho hàm của mình, theo sau là bất kỳ số lượng mã nào được đặt trong dấu ngoặc nhọn

Đây là một trang web đơn giản có hình ảnh đã thay đổi kích thước và một nút phân tích hình ảnh và trả về kích thước hình ảnh thực. Trong mã ví dụ này, phần tử HTML

<html>
  <head>
    <title>JS</title>
  </head>
  <body>
    <p id="example">Date and time appears here.</p>

    <script>
      document.getElementById("example").innerHTML = Date();
    </script>
    
  </body>
</html>

3 sử dụng hàm JavaScript tích hợp sẵn

<html>
  <head>
    <title>JS</title>
  </head>
  <body>
    <p id="example">Date and time appears here.</p>

    <script>
      document.getElementById("example").innerHTML = Date();
    </script>
    
  </body>
</html>

4 để phát hiện tương tác của người dùng, hàm này sẽ kích hoạt một hàm tùy chỉnh có tên là

<html>
  <head>
    <title>JS</title>
  </head>
  <body>
    <p id="example">Date and time appears here.</p>

    <script>
      document.getElementById("example").innerHTML = Date();
    </script>
    
  </body>
</html>

5

<html>
  <head>
    <title>Imager</title>
  </head>
  <body>

    <div>
      <button onclick="get_size(document.getElementById('myimg'))">
        Get image size
    </button>
    </div>
    
    <div>
      <img style="width: 15%" id="myimg" src="https://opensource.com/penguin.png" />
    </div>
   
    <script>
      function get_size(i) {
        let w = i.naturalWidth;
        let h = i.naturalHeight;
        alert(w + " by " + h);
      }
    </script>
    
  </body>
</html>

Lưu tệp và tải nó vào trình duyệt web của bạn để thử mã

Hình ảnh của

(Seth Kenlon, CC BY-SA 4. 0)

Ứng dụng đa nền tảng với JavaScript

Bạn có thể thấy từ mẫu mã cách JavaScript và HTML phối hợp chặt chẽ với nhau để tạo trải nghiệm người dùng gắn kết. Đây là một trong những điểm mạnh lớn của JavaScript. Khi bạn viết mã bằng JavaScript, bạn thừa hưởng một trong những giao diện người dùng phổ biến nhất của điện toán hiện đại bất kể nền tảng nào. trình duyệt web. Mã của bạn về bản chất là đa nền tảng, vì vậy, ứng dụng của bạn, cho dù đó chỉ là một bộ phân tích kích thước hình ảnh khiêm tốn hay một trình chỉnh sửa hình ảnh phức tạp, trò chơi điện tử hay bất kỳ thứ gì khác mà bạn mơ ước, đều có thể được sử dụng bởi mọi người bằng trình duyệt web (hoặc máy tính để bàn).

Học JavaScript thật dễ dàng và thú vị. Có rất nhiều trang web với hướng dẫn có sẵn. Ngoài ra còn có hơn một triệu thư viện JavaScript để giúp bạn giao tiếp với các thiết bị, thiết bị ngoại vi, Internet vạn vật, máy chủ, hệ thống tệp, v.v. Và khi bạn đang học, hãy luôn để bảng cheat JavaScript của chúng tôi bên cạnh để bạn ghi nhớ các chi tiết nhỏ về cú pháp và cấu trúc

Đọc gì tiếp theo

Hướng dẫn thực tế về cách đóng JavaScript

Hiểu rõ hơn về cách mã JavaScript hoạt động và thực thi bằng cách đi sâu vào một trong những khái niệm nâng cao. đóng cửa

Nimisha Mukherjee

15 Tháng Hai, 2021

Học JavaScript bằng cách viết một trò chơi đoán

Thực hiện các bước đầu tiên để tạo nội dung web động, tương tác bằng cách thực hành một số khái niệm JavaScript cơ bản với một trò chơi đơn giản

Mandy Kendall

20 Tháng Một, 2021

4 lý do khiến JavaScript trở nên phổ biến

Có nhiều lý do chính đáng khiến JavaScript luôn nằm trong số các ngôn ngữ lập trình hàng đầu

Nimisha Mukherjee

2 Tháng Mười Một, 2020

thẻ

tờ ăn gian

JavaScript

Seth Kenlon

Seth Kenlon là một người đam mê UNIX, người ủng hộ văn hóa tự do, nghệ sĩ đa phương tiện độc lập và mọt sách D&D. Anh ấy đã làm việc trong ngành công nghiệp điện ảnh và máy tính, thường là cùng một lúc

Làm cách nào để bắt đầu một dự án JavaScript?

Bắt đầu Dễ dàng như 1, 2, 3. .

Tạo một dự án, tùy chọn cung cấp [tên dự án] cho dự án của bạn. tạo-js-project [tên dự án] npm init js-project [tên dự án]

Trả lời các câu hỏi, chẳng hạn như tên dự án của bạn và mẫu mong muốn

Đợi cho đến khi quá trình cài đặt hoàn tất và bắt đầu mã hóa

Làm cách nào để viết một mã JavaScript đơn giản?

Để viết JavaScript, bạn cần có trình duyệt web và trình soạn thảo văn bản hoặc trình soạn thảo HTML . Khi bạn đã có phần mềm, bạn có thể bắt đầu viết mã JavaScript. Để thêm mã JavaScript vào tệp HTML, hãy tạo hoặc mở tệp HTML bằng trình soạn thảo văn bản/HTML của bạn.

Tôi có thể bắt đầu trực tiếp với JavaScript không?

Điều tuyệt vời về nó là nó được cài đặt trên mọi trình duyệt web hiện đại—không cần thiết lập bất kỳ loại môi trường phát triển nào, nghĩa là bạn có thể bắt đầu viết mã bằng JavaScript . !

Mã cơ bản cho JavaScript là gì?

Các thẻ được sử dụng để thêm JavaScript vào HTML là . Mã được bao quanh bởi các thẻ được gọi là blog kịch bản. Các thẻ được gọi là blog kịch bản. Các thẻ được gọi là blog kịch bản. Các thẻ

programming javascript