Cách thực hành JavaScript trong Chrome

Trong hướng dẫn này, tôi trình bày một số kiến ​​thức cơ bản về ngôn ngữ lập trình JavaScript bằng cách sử dụng bảng điều khiển JavaScript của trình duyệt web

Ngôn ngữ bí mật của trình duyệt web

Trình duyệt web là một chương trình máy tính cho phép bạn xem các trang web và theo các siêu liên kết từ trang này sang trang khác. Bạn có thể quen thuộc với một số tên tuổi lớn trong lĩnh vực trình duyệt web. Safari, Google Chrome, Firefox, Cạnh. Trình duyệt web chắc chắn là một trong những phát minh quan trọng nhất trong lịch sử gần đây; . Rất có thể bạn đang sử dụng trình duyệt web để xem hướng dẫn này ngay bây giờ

Trình duyệt web được thiết kế để hiển thị nội dung được định dạng bằng ngôn ngữ gọi là HTML [Ngôn ngữ đánh dấu siêu văn bản]. Hầu như tất cả các trình duyệt web cũng hiểu một ngôn ngữ lập trình gọi là JavaScript. Là một trong những cách cạnh tranh để nhúng logic đơn giản để xác minh dữ liệu và tính tương tác trong các trang web, JavaScript ngày nay được các lập trình viên thuộc mọi lĩnh vực sử dụng rộng rãi, không chỉ trong trình duyệt web mà còn trong máy chủ web, ứng dụng máy tính để bàn, trò chơi điện tử và thậm chí cả bộ vi điều khiển.

Tuy nhiên, hiện tại, chúng tôi sẽ tập trung vào JavaScript trong trình duyệt. Thông thường, bạn sẽ viết JavaScript như một phần của trang web, dưới dạng một tệp riêng biệt mà bạn tải lên máy chủ web. Nhưng hầu như tất cả các trình duyệt đều cho phép bạn nhập mã JavaScript trực tiếp vào trình duyệt, sử dụng thứ gọi là “bảng điều khiển. ” Hầu hết các lập trình viên đều sử dụng bàn điều khiển như một công cụ giúp họ “gỡ lỗi” [i. e. , điều tra và khắc phục sự cố trong] mã của họ, nhưng bạn cũng có thể sử dụng bảng điều khiển như một cách để thử với JavaScript và cảm nhận cách thức hoạt động của nó. Đó là những gì chúng ta sẽ sử dụng nó cho

Mở giao diện điều khiển

Để bắt đầu, hãy mở trình duyệt web như Safari, Firefox hoặc Chrome trên máy tính để bàn [trình duyệt này có thể không hoạt động trên thiết bị di động hoặc máy tính bảng]. Để làm cho mọi thứ đơn giản hơn, chúng tôi muốn nhập URL sau vào thanh vị trí

about:blank

Điều này sẽ hiển thị một tab trình duyệt trống [tôi. e. , không có nội dung hiển thị]. Nếu cách đó không hiệu quả, hãy thử URL sau, URL này sẽ có tác dụng tương tự

data:text/html,

[Dấu phẩy ở cuối là quan trọng. ] Sau khi thực hiện việc này, bạn sẽ cần mở bảng điều khiển web. Cách thực hiện việc này khác nhau giữa các trình duyệt và cũng có thể khác nhau tùy thuộc vào hệ điều hành của bạn. Tôi sử dụng Firefox trên macOS và mở bảng điều khiển web bằng cách truy cập

≫ 4 + 5 * 6
⬅︎ 34

≫ [4 + 5] * 6
⬅︎ 54

8 [không phải “Bảng điều khiển trình duyệt”, đây là một thứ khác một cách vô ích]. Trong Google Chrome, truy cập

≫ 4 + 5 * 6
⬅︎ 34

≫ [4 + 5] * 6
⬅︎ 54

9; . Bạn sẽ thấy một cái gì đó như thế này

Một lần nữa, điều này sẽ trông hơi khác một chút tùy thuộc vào trình duyệt bạn đang sử dụng, nhưng khái niệm này giống nhau. Bạn đang thấy một trang web trống với bảng điều khiển JavaScript đang mở. Bảng điều khiển ở dưới cùng của cửa sổ; . Bạn sẽ nhập mã JavaScript vào phần bên dưới, phần này cũng sẽ hiển thị kết quả đánh giá mã đó. Nếu mã của bạn thực hiện các thay đổi đối với trang web [hiện đang trống, nhưng bạn có thể thay đổi điều đó bằng mã. ], chúng sẽ được hiển thị trong bảng ở trên

Đọc, đánh giá, in, lặp

Hãy bắt đầu với một mô tả cấp cao về cách thức hoạt động của lập trình máy tính. Khi bạn đang viết một chương trình máy tính, bạn đang mô tả cho máy tính điều bạn muốn, rồi yêu cầu máy tính tìm ra điều đó cho bạn. Mô tả của bạn về những gì bạn muốn được gọi là một biểu thức. Quá trình mà máy tính sử dụng để biến biểu thức của bạn thành bất kỳ biểu thức nào được gọi là đánh giá

Hãy nghĩ về một bộ phim khoa học viễn tưởng trong đó một nhân vật hỏi to máy tính, "Căn bậc hai của chín tỷ là bao nhiêu?" . Quá trình mà máy tính sử dụng để chuyển đổi các biểu thức đó thành phản hồi là đánh giá

Khi quá trình đánh giá hoàn tất, bạn chỉ còn lại một “giá trị” duy nhất. Hãy nghĩ về nó một cách sơ đồ như vậy

Biểu hiện → Đánh giá → Giá trị

Điều làm cho các chương trình máy tính trở nên mạnh mẽ là chúng có thể viết các biểu thức rất chính xác và phức tạp. Và quan trọng là bạn có thể nhúng kết quả đánh giá một biểu thức vào bên trong một biểu thức khác hoặc lưu kết quả đánh giá một biểu thức để sử dụng sau này trong chương trình của bạn

Thật không may, máy tính không thể hiểu và trực giác mong muốn của bạn chỉ từ mô tả bằng lời nói. Đó là lý do tại sao chúng ta cần ngôn ngữ lập trình máy tính. để cung cấp cho chúng tôi cách viết các biểu thức theo cách mà máy tính có thể hiểu được. Bởi vì các ngôn ngữ lập trình được thiết kế để chính xác, nên chúng cũng có thể khó hiểu [và gây khó chịu]. Và mọi ngôn ngữ lập trình đều khác nhau. Đó là khó khăn, nhưng giá trị nó

biểu thức số học

Hãy bắt đầu với các biểu thức số học đơn giản. Cách bạn viết các biểu thức số học trong JavaScript rất giống với cách bạn viết các biểu thức số học, chẳng hạn như số học ở trường phổ thông hoặc đại số. Trong ví dụ dưới đây,

≫ 10+20+30
⬅︎ 60

1 là biểu thức. Trong trình thông dịch tương tác, bạn có thể yêu cầu JavaScript đánh giá biểu thức và hiển thị giá trị của nó chỉ bằng cách nhập biểu thức vào phần đầu vào của bảng điều khiển

≫ 3 + 5
⬅︎ 8

[Trong tài liệu này, biểu thức bạn nhập theo sau

≫ 10+20+30
⬅︎ 60

2 và phản hồi của bảng điều khiển, tôi. e. , giá trị kết quả, theo sau

≫ 10+20+30
⬅︎ 60

3. ]

Vì những lý do lịch sử, cách mà một số toán tử tìm kiếm trong JavaScript [và nhiều ngôn ngữ lập trình khác] hơi khác một chút so với ký hiệu phổ biến của chúng trong số học và đại số

Hoạt động Toán tử JavaScript phép cộng

≫ 10+20+30
⬅︎ 60

4phép trừ

≫ 10+20+30
⬅︎ 60

5phép nhân

≫ 10+20+30
⬅︎ 60

6chia

≫ 10+20+30
⬅︎ 60

7

Tất nhiên, các biểu thức số học trong JavaScript có thể phức tạp hơn thế này nhiều. Chúng tôi sẽ không xem xét tất cả các chi tiết ngay bây giờ, nhưng có một điều bạn nên biết ngay là các phép toán số học JavaScript được đánh giá bằng cách sử dụng thứ tự thông thường của các phép toán mà bạn có thể ghi đè bằng dấu ngoặc đơn

≫ 4 + 5 * 6
⬅︎ 34

≫ [4 + 5] * 6
⬅︎ 54

Bạn có thể viết các biểu thức số học có hoặc không có dấu cách giữa các số và toán tử [nhưng thường thì cách viết bao gồm khoảng trắng sẽ tốt hơn]

≫ 10+20+30
⬅︎ 60

Biểu thức trong JavaScript cũng có thể rất đơn giản. Trên thực tế, một số riêng là biểu thức của chính nó, mà JavaScript đánh giá chính số đó

data:text/html,

5

Nếu bạn viết một biểu thức mà JavaScript không hiểu, thì bạn sẽ gặp lỗi. Đây là những gì trông giống như

data:text/html,

6

Bạn có thể sử dụng cả số nguyên và số có dấu thập phân [số thực, đôi khi được gọi là số dấu phẩy động]. Ví dụ: chia một số cho một kết quả khác

data:text/html,

7

Trên thực tế, bất cứ khi nào một trong các toán hạng trong một biểu thức toán học là một số có dấu phẩy động, thì kết quả sẽ là một số có dấu phẩy động [và JavaScript thực sự đại diện cho cả hai loại số theo cùng một cách dưới mui xe]

data:text/html,

8

Biểu thức của bất đẳng thức

Bạn cũng có thể hỏi JavaScript liệu hai biểu thức có cùng giá trị hay không, hoặc liệu một biểu thức có giá trị lớn hơn biểu thức khác hay không, bằng cách sử dụng cú pháp quen thuộc tương tự. Khi đánh giá các biểu thức như vậy, JavaScript sẽ trả về một trong hai giá trị đặc biệt. hoặc là

≫ 10+20+30
⬅︎ 60

8 hoặc là

≫ 10+20+30
⬅︎ 60

9

Toán tử

data:text/html,

50 so sánh biểu thức ở vế trái của nó với biểu thức ở vế phải của nó. Nó ước tính thành

≫ 10+20+30
⬅︎ 60

8 nếu các giá trị bằng nhau và

≫ 10+20+30
⬅︎ 60

9 nếu chúng không bằng nhau

≫ 4 + 5 * 6
⬅︎ 34

≫ [4 + 5] * 6
⬅︎ 54

4

Toán tử

data:text/html,

53 so sánh biểu thức ở vế trái của nó với biểu thức ở vế phải của nó, đánh giá thành

≫ 10+20+30
⬅︎ 60

8 nếu biểu thức ở vế trái nhỏ hơn biểu thức ở vế phải, nếu không thì là

≫ 10+20+30
⬅︎ 60

9.

data:text/html,

56 làm điều tương tự, ngoại trừ việc kiểm tra xem biểu thức bên trái có lớn hơn biểu thức bên phải không

data:text/html,

0

Các toán tử

data:text/html,

57 và

data:text/html,

58 lần lượt được dịch thành “lớn hơn hoặc bằng” và “nhỏ hơn hoặc bằng”

data:text/html,

1

Đảm bảo lấy đúng thứ tự của dấu ngoặc nhọn và dấu bằng

data:text/html,

2

Chức năng tích hợp sẵn. môn Toán. ngẫu nhiên[]

Tất nhiên, JavaScript có thể làm được nhiều điều hơn là chỉ tính toán cơ bản trên máy tính. Ngôn ngữ đi kèm với các đối tượng và chức năng tích hợp sẵn mà bạn có thể đưa vào mã của mình để thực hiện các tác vụ tính toán đơn giản. Đây là một trong những công cụ JavaScript cung cấp cho bạn để tạo các chương trình hữu ích. Chúng tôi sẽ nói về một số trong số này bên dưới, nhưng bạn có thể xem danh sách đầy đủ tại đây

Một “hàm” là một đoạn mã viết sẵn thực hiện một số tác vụ và đánh giá thành một giá trị. Để sử dụng một chức năng, bạn “gọi” hoặc “chạy” nó bằng cách nhập tên của nó, theo sau là một cặp dấu ngoặc đơn, vào mã của bạn. Sau này, bạn sẽ học cách viết các hàm của riêng mình, nhưng bây giờ chúng ta sẽ chỉ sử dụng một số hàm mà JavaScript định nghĩa cho chúng ta

Hàm tích hợp Math. random[] đánh giá một số thực ngẫu nhiên trong khoảng từ 0 đến 1. Gọi nó bằng cách nhập tên của nó vào bảng điều khiển

data:text/html,

3

[Tất nhiên, bạn sẽ thấy một số được chọn ngẫu nhiên khác. ] Chạy dòng này một vài lần để có kết quả khác nhau. Một cách dễ dàng để mô phỏng tung đồng xu là hỏi JavaScript xem kết quả của hàm này có lớn hơn 0 không. 5

data:text/html,

4

Một nửa thời gian, bạn sẽ nhận được

≫ 10+20+30
⬅︎ 60

8 [mặt ngửa. ] và một nửa thời gian

≫ 10+20+30
⬅︎ 60

9 [đuôi. ]

Xúc xắc sáu mặt với môn Toán. tầng lầu[]

Chúng tôi có thể sử dụng những gì chúng tôi đã thảo luận cho đến nay để viết một số mã để mô phỏng lăn. Những gì chúng tôi muốn làm là viết một biểu thức đánh giá ngẫu nhiên một số từ một đến sáu [bao gồm]. Chúng ta đã biết về hàm

data:text/html,

61, trả về một số thực ngẫu nhiên trong khoảng từ 0 đến 1. Để có được một số ngẫu nhiên lên đến sáu, chúng ta chỉ cần nhân giá trị của

data:text/html,

61 với sáu

data:text/html,

5

Chạy cái này một vài lần để hiểu phạm vi giá trị mà nó trả về. Đây là một bước đầu tiên tốt, nhưng nó không hoàn toàn như những gì chúng ta muốn, một cuộn mô phỏng của một con súc sắc sáu mặt], vì nó có một phần phân số. Ngoài ra, nếu chạy hàm đủ số lần, bạn sẽ nhận thấy rằng số trước phần phân số thay đổi từ 0 đến 5, nhưng không bao giờ đạt đến 6. [Hãy suy nghĩ trong giây lát tại sao lại như vậy. ]

Vì vậy, chúng tôi có hai vấn đề cần giải quyết trong quá trình thực hiện mô phỏng khuôn sáu mặt của chúng tôi. Đầu tiên là biểu thức như chúng ta đã viết bao gồm một phần phân số. Thứ hai là phạm vi không hoàn toàn đúng. chúng tôi muốn các số từ một đến sáu, nhưng biểu thức hiện tại cho chúng tôi từ 0 đến 5

Để khắc phục vấn đề đầu tiên, chúng ta cần tìm một số cách để loại bỏ phần phân số của một số. Tôi sẽ cho bạn biết cách thực hiện việc này, nhưng nếu tôi không có mặt vào lần tới khi bạn gặp sự cố như thế này, bạn có thể chuyển sang tìm kiếm trên web; . Thông thường, bạn sẽ tìm thấy một chủ đề như thế này với một số gợi ý và hy vọng là một số mã ví dụ

JavaScript thực sự đi kèm với một hàm dựng sẵn để loại bỏ phần phân số của một số [i. e. , làm tròn xuống]. Chức năng được gọi là

data:text/html,

64. Hàm này hoạt động hơi khác một chút so với ________ 161 ở chỗ nó không tự nhiên đưa ra một số mà thực hiện một thao tác trên một số. Thuật ngữ cho điều này là hàm nhận một đối số hoặc tham số. Khi một hàm nhận một tham số, bạn đặt biểu thức có kết quả mà hàm sẽ thực hiện ở giữa các dấu ngoặc đơn, như vậy

data:text/html,

6

Như bạn có thể thấy, khi bạn đặt một biểu thức giữa các dấu ngoặc đơn, JavaScript sẽ đánh giá biểu thức đó và sau đó cung cấp biểu thức đó cho hàm dưới dạng tham số. Sau đó, chức năng đánh giá kết quả của hoạt động mà nó được thiết kế để thực hiện

Hãy nhớ rằng bản thân các giá trị là các biểu thức đánh giá giá trị đó, Bạn có thể sử dụng

data:text/html,

64 để tìm số tương đương được làm tròn xuống của một số tùy ý

data:text/html,

7

Bây giờ, phần khó khăn. làm cách nào để chúng tôi lấy số ngẫu nhiên được trả về từ

data:text/html,

67 và tìm số tương đương được làm tròn xuống? . đặt toàn bộ biểu thức bên trong ngoặc đơn của

data:text/html,

64

data:text/html,

8

Này, tốt đấy. Chúng tôi gần như đi đến đó. Chạy chức năng này một vài lần để xem kết quả như thế nào. [Trong hầu hết các trình duyệt, bạn có thể nhấn phím “lên” để “cuộn qua” các biểu thức trước đó. Làm điều này để tiết kiệm cho mình một số đánh máy. ]

Bạn sẽ thấy rằng các giá trị vẫn nằm trong khoảng từ 0 đến 5. Để khắc phục sự cố này, chúng tôi sẽ lấy toàn bộ biểu thức và thêm một biểu thức vào đó

data:text/html,

9

TẬP THỂ DỤC. Tìm hiểu xem tại sao phần

data:text/html,

69 của biểu thức này phải nằm trong dấu ngoặc đơn và tại sao

data:text/html,

70 phải ở bên ngoài. Nếu bạn gặp khó khăn trong việc suy luận về điều này, hãy thử viết nó ra một tờ giấy và thực hiện các bước mà JavaScript phải thực hiện để đánh giá biểu thức này

Tìm hiểu về lập trình

Nhân tiện, không có lý do gì bạn phải biết rằng có một hàm tên là

data:text/html,

64 thực hiện thao tác mà hàm cụ thể này thực hiện. Không rõ ràng từ các nguyên tắc đầu tiên rằng một chức năng như vậy nên tồn tại. Trên thực tế, nhiệm vụ học cách lập trình máy tính chính là nhiệm vụ tìm hiểu về một ngôn ngữ lập trình cụ thể trông như thế nào và nó cung cấp những tiện ích gì. Vì vậy, đừng lo lắng nếu một cái gì đó như

data:text/html,

64 có vẻ không rõ ràng, bởi vì nó hoàn toàn là

Ngay cả những lập trình viên lão luyện cũng không có kiến ​​thức bách khoa về ngôn ngữ lập trình mà họ sử dụng;

Báo động

Các chức năng không phải lúc nào cũng đánh giá một giá trị hữu ích. Một số chức năng chỉ tồn tại để thực hiện một nhiệm vụ cụ thể. Hàm

data:text/html,

73 là một trong số này. Hãy thử nhập nội dung sau vào bảng điều khiển

≫ 3 + 5
⬅︎ 8

0

Điều này sẽ hiển thị một hộp thoại phương thức mời bạn nhấp vào “OK” [hoặc một cái gì đó tương tự; chính xác cửa sổ này trông như thế nào tùy thuộc vào trình duyệt của bạn]. Làm cho cửa sổ này xuất hiện là mục đích của hàm

data:text/html,

73. Khi bạn nhấp vào “OK”, bạn sẽ nhận thấy rằng từ

data:text/html,

75 xuất hiện trong bảng điều khiển. Giá trị

data:text/html,

75 là một giá trị đặc biệt trong JavaScript có nghĩa là “không có gì đặc biệt”, đó là giá trị mà hàm

data:text/html,

73 đánh giá

Nhân tiện, biểu thức giữa các dấu ngoặc đơn của

data:text/html,

73 trong ví dụ trên—bắt đầu và kết thúc bằng dấu ngoặc kép—được gọi là một chuỗi ký tự. Chuỗi ký tự là một cách để xác định một loại giá trị được gọi là chuỗi, được sử dụng trong JavaScript [và nhiều ngôn ngữ lập trình khác] để biểu thị văn bản. [Các chương trình máy tính được làm bằng văn bản, nhưng cũng thường hoạt động trên văn bản, giống như cách máy tính hoạt động trên các con số. Một chuỗi ký tự là cách nói với JavaScript rằng một số văn bản trong biểu thức của bạn là dữ liệu và không phải là một phần mã của biểu thức. ]

Hàm

data:text/html,

73 cũng sẽ lấy một giá trị không phải là chuỗi làm tham số một cách hữu ích. Ví dụ: để hiển thị cửa sổ bật lên với kết quả mô phỏng xúc xắc sáu mặt của chúng tôi

≫ 3 + 5
⬅︎ 8

1

Biến

Bạn có thể lưu kết quả đánh giá một biểu thức để sử dụng sau này bằng cách sử dụng toán tử

data:text/html,

80 [được gọi là “toán tử gán”] và từ khóa

data:text/html,

81. Ở phía bên trái của

data:text/html,

80, hãy viết một từ mà bạn muốn sử dụng để chỉ giá trị của biểu thức và ở phía bên phải, hãy viết chính biểu thức đó. Sau khi bạn đã chỉ định một giá trị như thế này, bất cứ khi nào bạn đưa từ đó vào mã JavaScript của mình, nó sẽ đánh giá giá trị mà bạn đã chỉ định trước đó. như vậy

≫ 3 + 5
⬅︎ 8

2

Trong trường hợp này, kết quả đánh giá biểu thức

data:text/html,

83 được gán cho biến

data:text/html,

84. Bây giờ, bất cứ khi nào bạn sử dụng biến x trong chương trình của mình, nó sẽ “đại diện” cho kết quả của biểu thức mà bạn đã gán cho nó

Lưu ý rằng dòng có

data:text/html,

81 và

data:text/html,

80 bản thân nó đã là một biểu thức, nhưng biểu thức gán giá trị cho một biến luôn có giá trị là

data:text/html,

75. [Nếu câu đó không có nghĩa, đừng lo—đó là một điểm rất tế nhị. Bạn chỉ có thể bỏ qua kết quả

data:text/html,

75 của toán tử gán. ] Trong biểu thức thứ hai, chúng tôi chỉ gõ

data:text/html,

84 vào bảng điều khiển. Điều này tương đương với việc hỏi JavaScript, “Này, bạn có nhớ khi tôi nói với bạn về một biến có tên là

data:text/html,

84 không?

GHI CHÚ. Từ khóa

≫ 4 + 5 * 6
⬅︎ 34

≫ [4 + 5] * 6
⬅︎ 54

41 đôi khi được sử dụng thay cho

data:text/html,

81. Đối với mục đích của chúng tôi, cả hai đều giống hệt nhau, mặc dù có một sự khác biệt quan trọng. Hiện tại, nếu bạn đang xem các hướng dẫn lập trình khác và thấy

≫ 4 + 5 * 6
⬅︎ 34

≫ [4 + 5] * 6
⬅︎ 54

41, chỉ cần biết rằng bạn gần như chắc chắn có thể sử dụng từ khóa

data:text/html,

81 thay vì

≫ 4 + 5 * 6
⬅︎ 34

≫ [4 + 5] * 6
⬅︎ 54

41 mà không ảnh hưởng xấu đến cách chương trình của bạn hoạt động

Bây giờ, bất cứ khi nào bạn sử dụng biến x trong chương trình của mình, nó sẽ “đại diện” cho kết quả của biểu thức mà bạn đã gán cho nó

≫ 3 + 5
⬅︎ 8

3

Bạn có thể tạo bao nhiêu biến tùy thích

≫ 3 + 5
⬅︎ 8

4

Tên biến phải bắt đầu bằng một chữ cái, dấu gạch dưới hoặc ký hiệu đô la [

≫ 4 + 5 * 6
⬅︎ 34

≫ [4 + 5] * 6
⬅︎ 54

46]; . Tên biến phân biệt chữ hoa chữ thường [i. e. ,

≫ 4 + 5 * 6
⬅︎ 34

≫ [4 + 5] * 6
⬅︎ 54

47 là một tên biến khác với

≫ 4 + 5 * 6
⬅︎ 34

≫ [4 + 5] * 6
⬅︎ 54

48]. Trong hầu hết các trình duyệt, bạn cũng có thể sử dụng các ký tự không phải ASCII [tôi. e. , chữ cái và ký hiệu không được sử dụng phổ biến trong tiếng Anh] trong tên biến. Tài liệu này có chi tiết, nhưng ví dụ, điều này hoạt động tốt

≫ 3 + 5
⬅︎ 8

5

hoặc

≫ 3 + 5
⬅︎ 8

6

Nếu bạn cố gắng sử dụng tên của một biến mà bạn chưa xác định trong sổ ghi chép, thì JavaScript sẽ báo lỗi

≫ 3 + 5
⬅︎ 8

7

Nếu bạn gán giá trị cho biến, rồi gán lại giá trị cho biến đó, giá trị trước đó của biến sẽ bị ghi đè. Tuy nhiên, nếu bạn cố gắng sử dụng từ khóa

data:text/html,

81 hai lần với cùng một tên biến, JavaScript sẽ hiển thị lỗi

≫ 3 + 5
⬅︎ 8

8

Các biến thậm chí là gì?

Lúc đầu, nó không hoàn toàn rõ ràng tại sao bạn thậm chí cần các biến. Tại sao yêu cầu JavaScript lưu trữ một giá trị cho lần sau, thay vì chỉ viết một biểu thức dài hơn? . Giả sử bạn có một số giá cho các mặt hàng bằng đô la Mỹ và bạn muốn chuyển đổi tất cả chúng sang Euro. Đối với điều này, bạn có thể xác định tỷ lệ chuyển đổi [0. 84 kể từ khi viết bài này] trong một biến và sử dụng nó trong tất cả các tính toán tiếp theo. Khi tỷ lệ chuyển đổi thay đổi, bạn chỉ cần cập nhật giá trị tương ứng ở một nơi, thay vì cập nhật ở từng nơi.

≫ 3 + 5
⬅︎ 8

9

Một lý do khác để sử dụng biến là để dễ đọc và hiểu các biểu thức dài, phức tạp hơn. Ví dụ: biểu thức mà chúng tôi đã viết trước đó để hiển thị hộp thoại phương thức với cuộn khuôn sáu mặt mô phỏng khá phức tạp

≫ 3 + 5
⬅︎ 8

1

Chúng ta có thể chia nó thành một chuỗi các bài tập biến đổi để dễ đọc hơn một chút

≫ 4 + 5 * 6
⬅︎ 34

≫ [4 + 5] * 6
⬅︎ 54

1

Sao chép và dán toàn bộ chuỗi biểu thức đó vào bảng điều khiển và thực hiện nó. Bạn sẽ thấy kết quả giống như những gì bạn đã thấy với phiên bản biểu thức đơn. Tôi sẽ để bạn quyết định xem phiên bản này có dễ đọc hơn phiên bản mà mọi thứ diễn ra trong cùng một biểu thức hay không. Nhưng một số lập trình viên thích làm rõ từng bước của quy trình và đặt tên cho các giá trị kết quả.

Chương trình máy tính

Nhân tiện, chuỗi các biểu thức được viết trong ví dụ trước là một ví dụ về chương trình máy tính. một danh sách những thứ để máy tính làm. Về mặt kỹ thuật, một “chương trình” có thể bao gồm một biểu thức duy nhất, nhưng hầu hết các chương trình máy tính bao gồm một số [và đôi khi là hàng nghìn hoặc thậm chí hàng triệu]

Khi JavaScript gặp một danh sách như vậy, nó sẽ xem xét mục đầu tiên trong danh sách, đánh giá nó và tiếp tục cho đến khi đến mục cuối cùng. Quá trình này được gọi là "chạy" hoặc 'thực thi" chương trình. [Có nhiều cách để JavaScript bỏ qua trong quá trình thực thi, cách này rất hữu ích và chúng ta sẽ thảo luận sau]. Các hướng dẫn riêng lẻ trong danh sách, chẳng hạn như gán giá trị cho một biến, được gọi là các câu lệnh

Trong ví dụ trên, chương trình chỉ là một danh sách các dòng mã mà bạn đã dán vào bảng điều khiển. Tuy nhiên, thông thường, một chương trình máy tính được lưu trữ trong một tệp riêng biệt [các chương trình JavaScript thường có phần mở rộng tệp là

data:text/html,

00] được tải vào trình duyệt thông qua nhiều cơ chế khác nhau, chẳng hạn như thẻ HTML

data:text/html,

01

Một điều cần lưu ý trong ví dụ trên. mỗi dòng của chương trình kết thúc bằng dấu chấm phẩy [

data:text/html,

02]. Điều gì đang xảy ra với điều đó? . Tuy nhiên, về mặt kỹ thuật, có thể có hai câu lệnh trên cùng một dòng, được phân tách bằng dấu chấm phẩy, như vậy

≫ 4 + 5 * 6
⬅︎ 34

≫ [4 + 5] * 6
⬅︎ 54

2

Dấu chấm phẩy báo hiệu cho JavaScript rằng dòng này không chỉ là một biểu thức lớn; . Theo quy ước, các lập trình viên JavaScript bao gồm dấu chấm phẩy ở cuối dòng ngay cả khi chỉ có một câu lệnh trên dòng. Có những lý do chính đáng để làm điều này nhưng chủ yếu nó chỉ được thực hiện theo truyền thống. [Nhiều ngôn ngữ lập trình dựa trên thiết kế của JavaScript, như C và Java trên thực tế yêu cầu dấu chấm phẩy ở cuối mỗi dòng. ]

Các biến và thuộc tính tích hợp

JavaScript cũng cung cấp một số biến tích hợp. Các biến này luôn có sẵn cho bạn; . Các biến tích hợp sẽ khác nhau tùy thuộc vào nơi bạn đang chạy JavaScript [e. g. , trong trình duyệt, trên dòng lệnh, trong một khung cụ thể, v.v. ;

GHI CHÚ. Về mặt kỹ thuật, đây là những “thuộc tính” của các “đối tượng” tích hợp sẵn, nhưng tôi cảm thấy ổn khi gọi chúng là “các biến” cho mục đích của hướng dẫn này

Ví dụ: có một biến tích hợp sẵn

data:text/html,

03 cung cấp cho bạn thông tin về trình duyệt bạn đang sử dụng

≫ 4 + 5 * 6
⬅︎ 34

≫ [4 + 5] * 6
⬅︎ 54

3

Và các biến tích hợp

data:text/html,

04 và

data:text/html,

05 cho bạn biết cửa sổ trình duyệt của bạn rộng bao nhiêu pixel [tương ứng]

≫ 4 + 5 * 6
⬅︎ 34

≫ [4 + 5] * 6
⬅︎ 54

4

Lưu ý rằng trình duyệt của bạn sẽ luôn cập nhật các biến này. thử thay đổi kích thước cửa sổ trình duyệt của bạn và kiểm tra lại giá trị của các biến đó

Một số biến này có thể bị ghi đè [i. e. , bạn có thể gán giá trị mới cho chúng]. Đáng chú ý, biến

data:text/html,

06 tương ứng với văn bản hiển thị trong phần nội dung của tài liệu trong cửa sổ. Tài liệu trong cửa sổ của chúng tôi trống [vì chúng tôi đã chọn tải một tài liệu trống khi bắt đầu hướng dẫn này. ]. Nhưng bạn có thể đặt một số văn bản vào phần nội dung của tài liệu bằng cách gán giá trị cho biến này

≫ 4 + 5 * 6
⬅︎ 34

≫ [4 + 5] * 6
⬅︎ 54

5

Văn bản của tài liệu sẽ thay đổi thành

data:text/html,

07 ngay sau khi bạn thực hiện nhiệm vụ này

Một vài biến tích hợp thú vị khác.

data:text/html,

08 đặt kích thước của phông chữ mà văn bản trong phần nội dung của tài liệu được hiển thị trong. Bạn có thể đặt nó bằng cách gán một giá trị chuỗi với [ví dụ] một số theo sau là

data:text/html,

09 [điều này đặt kích thước của phông chữ được đo bằng pixel]

≫ 4 + 5 * 6
⬅︎ 34

≫ [4 + 5] * 6
⬅︎ 54

6

Định dạng của

data:text/html,

10 là một giá trị độ dài CSS. Nếu bạn quen thuộc với CSS, bạn sẽ nhận ra mã định danh

data:text/html,

11 tương tự như thuộc tính CSS

data:text/html,

12 và trên thực tế, các trình duyệt web giúp bạn dễ dàng thay đổi kiểu CSS của các thành phần HTML trong phần nội dung tài liệu. Một ví dụ khác, biến

data:text/html,

13 cho phép bạn thiết lập nền của nội dung tài liệu. Hãy sử dụng gif này của một con mèo con

≫ 4 + 5 * 6
⬅︎ 34

≫ [4 + 5] * 6
⬅︎ 54

7

Sau khi chạy tất cả các câu lệnh này, cửa sổ trình duyệt của bạn sẽ trông như thế này

Bước tiếp theo

Hướng dẫn này được thiết kế để giúp bạn làm quen một chút với JavaScript trong khi chỉ cho bạn cách sử dụng bảng điều khiển JavaScript miễn phí với hầu hết mọi trình duyệt. Làm quen với bảng điều khiển rất quan trọng không chỉ vì đây là một công cụ hữu ích để gỡ lỗi và thử nghiệm, mà còn bởi vì nhiều hướng dẫn lập trình nâng cao hơn cho rằng bạn đã quen với khái niệm giao diện kiểu vòng lặp đọc-eval-in-vòng lặp

Nhưng bạn không có khả năng thực hiện nhiều công việc thực tế trong bảng điều khiển JavaScript; . Hầu hết thời gian, các ứng dụng JavaScript dựa trên trình duyệt sử dụng các tệp độc lập đi kèm với các trang web. Hướng dẫn cơ bản về JavaScript này từ MDN sẽ đưa bạn qua quy trình làm việc với một thiết lập như vậy

Quá trình phát triển JavaScript nghiêm túc hơn thường diễn ra với sự trợ giúp của một khung, là tập hợp các hàm được xác định trước và các đoạn mã khác được thiết kế để thực hiện các tác vụ cụ thể dễ dàng hơn. React là một framework phổ biến để xây dựng giao diện web; . js là một framework phổ biến để trực quan hóa dữ liệu. Khung được sử dụng trong phần còn lại của hướng dẫn trên trang web này là p5. js, giúp dễ dàng xây dựng các ứng dụng trực quan tương tác. Dưới đây là danh sách một phần các khung và thư viện JavaScript thú vị khác

Học một cái gì đó mới luôn liên quan đến việc tiếp cận chủ đề từ nhiều góc độ khác nhau. Lập trình không khác. Ngay cả các chuyên gia lập trình cũng không ngừng học hỏi những điều mới về nghề của họ. Điều hiển nhiên và thông thường đối với một lập trình viên là kỳ lạ và tiên phong đối với người tiếp theo. Như vậy, nếu bạn muốn trở thành một lập trình viên có kỹ năng và hiểu biết, tốt hơn hết là bạn không nên chỉ tập trung vào một hướng dẫn hoặc một nhiệm vụ lập trình. Dưới đây là một vài hướng dẫn khác mà bạn có thể quan tâm

Làm cách nào để kiểm tra JavaScript trong Chrome?

Làm cách nào để viết JavaScript trong Chrome?

Làm thế nào để viết js trong trình duyệt?

JavaScript có còn hoạt động trên Chrome không?