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

Bản thân HTML không có bất kỳ sự thông minh nào. Nó không thể làm toán, nó không thể biết liệu ai đó có điền đúng biểu mẫu hay không và nó không thể đưa ra quyết định dựa trên cách khách truy cập web tương tác với nó. Về cơ bản, HTML cho phép mọi người đọc văn bản, xem ảnh, xem video và nhấp vào liên kết để chuyển đến các trang web khác có nhiều văn bản, ảnh và video hơn. Để thêm trí thông minh vào các trang web của bạn để chúng có thể phản hồi khách truy cập trang web của bạn, bạn cần có JavaScript

JavaScript cho phép một trang web phản ứng thông minh. Với nó, bạn có thể tạo các biểu mẫu web thông minh cho phép khách truy cập biết khi họ quên cung cấp thông tin cần thiết. Bạn có thể làm cho các phần tử xuất hiện, biến mất hoặc di chuyển xung quanh một trang web (xem phần ). Bạn thậm chí có thể cập nhật nội dung của trang web với thông tin được lấy từ máy chủ web—mà không phải tải trang web mới. Tóm lại, JavaScript cho phép bạn làm cho trang web của mình hấp dẫn, hiệu quả và hữu ích hơn

Ghi chú

Trên thực tế, HTML5 có thêm một số tính năng thông minh vào HTML—bao gồm cả xác thực biểu mẫu cơ bản. Nhưng vì không phải tất cả các trình duyệt đều hỗ trợ những bổ sung tiện lợi này (và vì bạn có thể làm được nhiều hơn thế với các biểu mẫu và JavaScript), nên bạn vẫn cần JavaScript để tạo các biểu mẫu tương tác và thân thiện với người dùng nhất. Bạn có thể tìm hiểu thêm về HTML5 và các biểu mẫu web trong Ben Henickâ's HTML5 Forms (OâReilly) và Gaurav Guptaâ's Mastering HTML5 Forms (Packt Publishing)

Hình 1-1. Â Tai tương tác (http. //www. khuếch đại. đồng. uk/interactive-ear/), hướng dẫn tương tác về thính giác của con người, cho phép khách truy cập tìm hiểu và khám phá các phần khác nhau của tai người. Thông tin mới xuất hiện khi phản ứng với các chuyển động và nhấp chuột của chuột. Với JavaScript, bạn có thể tạo các hiệu ứng tương tác của riêng mình

Đối với nhiều người, thuật ngữ âlập trình máy tínhâ gợi lên hình ảnh về những người mọt sách siêu thông minh đang khom người trên bàn phím, gõ những thứ vô nghĩa gần như khó hiểu trong nhiều giờ liền. Và, thành thật mà nói, một số chương trình là như vậy. Lập trình có vẻ giống như phép thuật phức tạp vượt xa mức bình thường của con người. Nhưng nhiều khái niệm lập trình không khó nắm bắt và khi các ngôn ngữ lập trình phát triển, JavaScript là ngôn ngữ đầu tiên tốt cho người mới học lập trình

Tuy nhiên, JavaScript phức tạp hơn HTML hoặc CSS và lập trình thường là một thế giới xa lạ đối với các nhà thiết kế web; . Xuyên suốt cuốn sách này, bạn sẽ học các khái niệm lập trình cơ bản áp dụng cho dù bạn đang viết JavaScript, ActionScript hay thậm chí là viết chương trình máy tính để bàn bằng C++. Quan trọng hơn, bạn sẽ học cách tiếp cận một tác vụ lập trình để bạn biết chính xác mình muốn làm gì trước khi bắt đầu thêm JavaScript vào trang web

Nhiều nhà thiết kế web ngay lập tức bị ấn tượng bởi các ký hiệu và từ lạ được sử dụng trong JavaScript. Một chương trình JavaScript trung bình có rải rác các ký hiệu ({ } [ ] ; , (). =) và toàn những từ không quen thuộc (var, null,

0). Theo nhiều cách, học một ngôn ngữ lập trình cũng giống như học một ngôn ngữ khác. Bạn cần học từ mới, dấu câu mới và hiểu cách kết hợp chúng lại với nhau để bạn có thể giao tiếp thành công

Mọi ngôn ngữ lập trình đều có bộ từ khóa và ký tự riêng, cũng như bộ quy tắc riêng để đặt các từ và ký tự đó lại với nhau—cú pháp của ngôn ngữ—. Bạn sẽ cần ghi nhớ các từ và quy tắc của ngôn ngữ JavaScript (hoặc ít nhất là giữ cuốn sách này ở nơi tiện dụng để tham khảo). Khi học nói một ngôn ngữ mới, bạn sẽ nhanh chóng nhận ra rằng việc đặt trọng âm vào âm tiết sai có thể khiến một từ trở nên khó hiểu. Tương tự như vậy, một lỗi đánh máy đơn giản hoặc thậm chí thiếu dấu chấm câu có thể khiến chương trình JavaScript không hoạt động hoặc gây ra lỗi trong trình duyệt web. Bạn sẽ mắc nhiều lỗi khi bắt đầu học lập trình—đó chỉ là bản chất của lập trình

Lúc đầu, có thể bạn sẽ thấy khó khăn khi lập trình JavaScript—bạn sẽ dành nhiều thời gian để theo dõi các lỗi bạn mắc phải khi nhập tập lệnh. Ngoài ra, ban đầu bạn có thể thấy một số khái niệm liên quan đến lập trình hơi khó theo dõi. Nhưng đừng lo. Nếu trước đây bạn đã từng cố gắng học JavaScript và đã bỏ cuộc vì cho rằng nó quá khó, thì cuốn sách này sẽ giúp bạn vượt qua những rào cản mà những người mới học lập trình thường gặp phải. (Và nếu bạn có kinh nghiệm lập trình, cuốn sách này sẽ dạy cho bạn các đặc điểm riêng của JavaScript và các khái niệm độc đáo liên quan đến lập trình cho trình duyệt web. )

Ngoài ra, cuốn sách này không chỉ về JavaScript mà còn về jQuery, thư viện JavaScript phổ biến nhất thế giới. jQuery làm cho việc lập trình JavaScript phức tạp trở nên dễ dàng hơn...dễ dàng hơn nhiều. Vì vậy, với một chút kiến ​​thức về JavaScript và sự trợ giúp của jQuery, bạn sẽ nhanh chóng tạo ra các trang web tương tác tinh vi

Chương trình máy tính là gì?

Khi bạn thêm JavaScript vào một trang web, bạn đang viết một chương trình máy tính. Đúng là hầu hết các chương trình JavaScript đơn giản hơn nhiều so với các chương trình bạn sử dụng để đọc email, chỉnh sửa ảnh và xây dựng trang web. Nhưng mặc dù các chương trình JavaScript (còn gọi là tập lệnh) đơn giản hơn và ngắn hơn, nhưng chúng có nhiều thuộc tính giống như các chương trình phức tạp hơn

Tóm lại, bất kỳ chương trình máy tính nào cũng là một loạt các bước được hoàn thành theo thứ tự đã định. Giả sử bạn muốn hiển thị thông báo chào mừng bằng tên của khách truy cập trang web. “Chào mừng, Bob. â Có một số điều bạncần phải làm để hoàn thành nhiệm vụ này

1. Hỏi tên khách

2. Nhận phản hồi của khách truy cập

3. In (nghĩa là hiển thị) thông báo trên trang web

Mặc dù bạn có thể không bao giờ muốn in thông báo chào mừng trên trang web, nhưng ví dụ này minh họa quy trình lập trình cơ bản. Xác định những gì bạn muốn làm, sau đó chia nhiệm vụ đó thành các bước riêng lẻ. Mỗi khi bạn muốn tạo một chương trình JavaScript, bạn phải trải qua quá trình xác định các bước cần thiết để đạt được mục tiêu của mình. Khi bạn biết các bước, bạn sẽ dịch ý tưởng của mình thành mã lập trình—các từ và ký tự làm cho trình duyệt web hoạt động theo cách bạn muốn

Trình duyệt web được xây dựng để hiểu HTML và CSS và chuyển đổi các ngôn ngữ đó thành hiển thị trực quan trên màn hình. Phần trình duyệt web hiểu HTML và CSS được gọi là bố cục hoặc công cụ hiển thị. Nhưng hầu hết các trình duyệt cũng có một thứ gọi là trình thông dịch JavaScript. Đó là một phần của trình duyệt hiểu JavaScript và có thể thực hiện các bước của chương trình JavaScript. Trình duyệt web thường mong đợi HTML, vì vậy bạn phải thông báo cụ thể cho trình duyệt biết khi nào có JavaScript bằng cách sử dụng thẻ

1, trình duyệt biết rằng chương trình JavaScript đã kết thúc và có thể quay lại các nhiệm vụ bình thường của nó

Hầu hết thời gian, bạn sẽ thêm

1

1

Trên thực tế, các trình duyệt web cho phép bạn loại bỏ thuộc tính type trong HTML 4. 01 và XHTML 1. 0 cũng vậy—tập lệnh sẽ chạy giống như vậy; . Cuốn sách này sử dụng HTML5 cho loại tài liệu, nhưng mã JavaScript sẽ giống nhau và hoạt động giống nhau cho HTML 4. 01 và XHTML 1

Sau đó, bạn thêm mã JavaScript của mình vào giữa phần mở đầu và phần kết thúc

1

You’ll find out what this JavaScript does in a moment. For now, turn your attention to the opening and closing ________0_______1

Thuộc tính

6 của

1

8

9

________10_______

Figure 1-2. Nike.com’s website uses JavaScript extensively to create a compelling showcase for their products. The home page (top) includes a row of navigation buttons along the top—Men, Women, Kids, and so on—that, when moused over, reveal a panel of additional navigation options. For example, mousing over the Sports button (circled in bottom image) reveals a panel listing different sports that Nike makes products for.

Just remember that you must use one set of opening and closing ________0_______1. The code should now look like this:

________0_______

In this example, the stuff you just typed is shown in boldface. The two HTML tags are already in the file; make sure you type the code exactly where shown.

Launch a web browser and open the hello.html file to preview it.

A JavaScript Alert box appears (see ). Notice that the page is blank when the alert appears. (If you don’t see the Alert box, you probably mistyped the code listed in the previous steps. Double-check your typing and read the following Tip.)

Tip

When you first start programming, you’ll be shocked at how often your JavaScript programs don’t seem to work…at all. For new programmers, the most common cause of nonfunctioning programs is simple typing mistakes. Always double-check to make sure you spelled commands (like ________13_______1 in the first script) correctly. Also, notice that punctuation frequently comes in pairs (the opening and closing parentheses, and single-quote marks from your first script, for example). Make sure you include both opening and closing punctuation marks when they’re required.

Click the Alert box’s OK button to close it.

When the Alert box disappears, the web page appears in the browser window.

Although this first program isn’t earth-shatteringly complex (or even that interesting), it does demonstrate an important concept: A web browser will run a JavaScript program the moment it reads in the JavaScript code. In this example, the ________13_______2 command appeared before the web browser displayed the web page, because the JavaScript code appeared before the HTML in the tag. This concept comes into play when you start writing programs that manipulate the HTML of the web page—as you’ll learn in Chapter 3.

Figure 1-3. The JavaScript Alert box is a quick way to grab someone’s attention. It’s one of the simplest JavaScript commands to learn and use.

Note

Some versions of Internet Explorer (IE) don’t like to run JavaScript programs in web pages that you open directly off your hard drive, for fear that the code might do something harmful. So when you try to preview the tutorial files for this book in Internet Explorer, you might see a message saying that IE has blocked the script. Click “Allow blocked content.”

This annoying behavior only applies to web pages you preview from your computer, not to files you put up on a web server. To avoid hitting the “Allow blocked content” button over and over, preview pages in a different web browser, like Chrome or Firefox.

The script in the previous section popped up a dialog box in the middle of your monitor. What if you want to print a message directly onto a web page using JavaScript? There are many ways to do so, and you’ll learn some sophisticated techniques later in this book. However, you can achieve this simple goal with a built-in JavaScript command, and that’s what you’ll do in your second script:

1. In your text editor, open the file hello2.html.

   While ________0_______1

   Like the ________13_______2 function, ________13_______5 is a JavaScript command that literally writes out whatever you place between the opening and closing parentheses. In this case, the HTML

________13_______6

7

8

9

0

1

2

3

4

5

1. 6
   7
   8

2. Click in the blank line between the ________0_______1 and closing tags near the top of the page, and type:

   $(document).ready(function() {

   0

3. $(document).ready(function() {

   1

   $(document).ready(function() {

   2

4. $(document).ready(function() {

   3

   $(document).ready(function() {

   4

5. $(document).ready(function() {

   5

   $(document).ready(function() {

   6

6. $(document).ready(function() {

   7

   $(document).ready(function() {

   8

7. $(document).ready(function() {

   9

   $('header').hide().slideDown(3000);

   0

0

$('header').hide().slideDown(3000);

2

$('header').hide().slideDown(3000);

3

________42_______4

________42_______5

________42_______6

________42_______7

________42_______8

________42_______9

________52_______0

________52_______1

________52_______2

________52_______3

________52_______4

________52_______5

________52_______6

________52_______7

________52_______8

• ________52_______9—leaving off the closing parenthesis—you’ll probably get the: “Unexpected token;” message, meaning that Chrome was expecting something other than the character it’s showing. In this case, it encountered the semicolon instead of the closing parenthesis.

• 0. Thật dễ dàng để quên dấu ngoặc kép mở đầu hoặc kết thúc. Cũng dễ dàng trộn lẫn các dấu ngoặc kép đó; .
  1. Trong cả hai trường hợp, bạn có thể sẽ thấy thông báo âUncaught SyntaxError. Lỗi mã thông báo BẤT HỢP PHÁPâ không mong đợi

• 2âbạnâ sẽ gặp lỗi nói rằng lệnh sai chính tả không được xác định. ví dụ: âUncaught ReferenceError. aler không được xác định,â nếu bạn viết sai chính tả lệnh
  1. Bạn cũng sẽ gặp sự cố khi viết sai chính tả các hàm jQuery (như hàm
  4 và
  5 trong hướng dẫn trước). Trong trường hợp này, bạn sẽ gặp một lỗi khác. Ví dụ: nếu bạn nhập nhầm âhideâ thành âhidâ ở bước 6 trên , Chrome sẽ báo lỗi này cho bạn. âUncaught TypeError. Đối tượng [đối tượng Đối tượng] không có phương thức âhidââ

  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.

  Cơ bản của JavaScript là gì?

  JavaScript là ngôn ngữ lập trình bổ sung tính tương tác cho trang web của bạn . Điều này xảy ra trong trò chơi, trong hành vi phản hồi khi nhấn nút hoặc nhập dữ liệu trên biểu mẫu; .

  JavaScript là C hay C++?

  JavaScript là một tập lệnh trong khi C++ là ngôn ngữ lập trình . Chương trình C++ sẽ được biên dịch và thực thi, trong khi tập lệnh trong JavaScript được diễn giải. JavaScript được gõ động trong khi C++ được gõ tĩnh.

  JavaScript có dễ hơn C++ không?

  Mặc dù dễ đọc, nhưng cuối cùng C++ cũng khó học hơn JavaScript vì có nhiều khía cạnh khác của ngôn ngữ mà bạn cần nắm vững. Cú pháp cần chính xác hơn, bạn phải viết nhiều mã hơn, bạn cần hiểu các hệ thống kiểu tĩnh, thu gom rác, v.v.