Hướng dẫn how do i start a javascript program? - làm cách nào để bắt đầu một chương trình javascript?

Chương & NBSP; 1. & NBSP; Viết chương trình JavaScript đầu tiên của bạn

Bản thân nó, HTML không có bất kỳ thông minh nào: Nó có thể làm toán, nó có thể tìm ra nếu ai đó đã điền chính xác một biểu mẫu và nó có 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 hình ảnh, xem video và nhấp vào liên kết để chuyển sang các trang web khác với nhiều văn bản, hình ảnh và video hơn. Để thêm trí thông minh vào các trang web của bạn để họ có thể trả lời khách truy cập trang web của bạn, bạn cần 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 hình thức web thông minh cho khách truy cập biết khi họ quên bao gồm thông tin cần thiết. Bạn có thể làm cho các yếu tố xuất hiện, biến mất hoặc di chuyển xung quanh một trang web (xem Hình & NBSP; 1-1). Bạn thậm chí có thể cập nhật nội dung của một trang web với thông tin được lấy từ máy chủ web mà không cần phải tải một trang web mới. Nói tóm lại, JavaScript cho phép bạn làm cho các trang web của bạn hấp dẫn hơn, hiệu quả và hữu ích hơn.

Ghi chú

Trên thực tế, HTML5 không thêm một số thông minh vào HTML, bao gồm xác thực hình thức cơ bản. Nhưng vì không phải tất cả các trình duyệt đều hỗ trợ các bổ sung tiện lợi này (và vì bạn có thể làm nhiều hơn nhiều với các biểu mẫu và JavaScript), bạn vẫn cần JavaScript để xây dựng các hình thức tốt nhất, thân thiện nhất với người dùng và tương tác. Bạn có thể tìm hiểu thêm về các biểu mẫu HTML5 và Web trong các biểu mẫu Ben Henick từ HTML5 (O hèReilly) và Gaurav Gupta tựa Mastering HTML5 Forms (Packt Publishing).does add some smarts to HTML—including basic form validation. But because not all browsers support these nifty additions (and because you can do a whole lot more with forms and JavaScript), you still need JavaScript to build the best, most user-friendly and interactive forms. You can learn more about HTML5 and web forms in Ben Henick’s HTML5 Forms (O’Reilly) and Gaurav Gupta’s Mastering HTML5 Forms (Packt Publishing).

Hướng dẫn how do i start a javascript program? - làm cách nào để bắt đầu một chương trình javascript?

Hình & NBSP; . Thông tin mới xuất hiện để đáp ứng với các chuyển động của chuột và nhấp chuột. Với JavaScript, bạn có thể tạo hiệu ứng tương tác của riêng mình.

Giới thiệu lập trình

Đối với nhiều người, thuật ngữ lập trình máy tính trên máy tính, gợi lên tầm nhìn của những người mọt sách siêu thông minh bị gù lên trên bàn phím, gõ gần như không thể hiểu được trong nhiều giờ. 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ư ma thuật phức tạp mà vượt xa phàm nhân trung bình. Nhưng nhiều khái niệm lập trình không khó nắm bắt được, và khi các ngôn ngữ lập trình, JavaScript là ngôn ngữ đầu tiên tốt cho một người mới 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 nước ngoài đối với các nhà thiết kế web; Vì vậy, một mục tiêu của cuốn sách này là giúp bạn suy nghĩ giống như một lập trình viên. Trong 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 có viết JavaScript, Actioncript hay thậm chí viết chương trình máy tính để bàn bằng C ++ hay không. Quan trọng hơn, bạn sẽ học cách tiếp cận một nhiệm vụ lập trình để bạn sẽ biết chính xác những gì bạn muốn làm trước khi bạn bắt đầu thêm JavaScript vào một trang web.

Nhiều nhà thiết kế web ngay lập tức bị tấn công bởi các biểu tượng và từ lạ được sử dụng trong JavaScript. Một chương trình JavaScript trung bình được rắc các ký hiệu ({} [];, ()! =) Và đầy đủ các từ lạ (





My Web Page

7,




My Web Page

8,




My Web Page

9). Theo nhiều cách, học một ngôn ngữ lập trình rất giống với việc học một ngôn ngữ khác. Bạn cần học các từ mới, dấu câu mới và hiểu cách đặt 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, và bộ quy tắc riêng để đặt các từ và ký tự đó lại với nhau. Bạn cần phải ghi nhớ các từ và quy tắc của ngôn ngữ JavaScript (hoặc ít nhất là giữ cho cuốn sách này tiện dụng làm tài liệu tham khảo). Khi học nói một ngôn ngữ mới, bạn nhanh chóng nhận ra rằng việc đặt một giọng nói sai có thể khiến một từ không thể hiểu được. Tương tự như vậy, một lỗi đánh máy đơn giản hoặc thậm chí là một dấu chấm câu bị thiếu có thể ngăn chương trình JavaScript hoạt động hoặc kích hoạt lỗi trong trình duyệt web. Bạn có thể phạm nhiều sai lầm khi bạn bắt đầu học cách lập trình mà chỉ là bản chất của lập trình.syntax. You’ll need to memorize the words and rules of the JavaScript language (or at least keep this book handy as a reference). When learning to speak a new language, you quickly realize that placing an accent on the wrong syllable can make a word unintelligible. Likewise, a simple typo or even a missing punctuation mark can prevent a JavaScript program from working, or trigger an error in a web browser. You’ll make plenty of mistakes as you start to learn to program—that’s just the nature of programming.

Lúc đầu, bạn có thể thấy chương trình JavaScript bực bội, bạn sẽ dành rất nhiều thời gian để theo dõi các lỗi mà bạn đã thực hiện khi nhập tập lệnh. Ngoài ra, bạn có thể tìm thấy một số khái niệm liên quan đến lập trình hơi khó theo dõi lúc đầu. Nhưng đừng lo lắng: Nếu bạn đã cố gắng học JavaScript trong quá khứ và từ bỏ vì bạn nghĩ rằng nó quá khó, cuốn sách này sẽ giúp bạn vượt qua những rào cản thường vượt qua mọi người mới để lập trình. .

Ngoài ra, cuốn sách này không chỉ là về JavaScript, nó cũng nói về JQuery, thư viện JavaScript phổ biến nhất thế giới. JQuery làm cho chương trình JavaScript phức tạp dễ dàng hơn nhiều. Vì vậy, với một chút kiến ​​thức của JavaScript và sự giúp đỡ của jQuery, bạn sẽ tạo ra các trang web tương tác tinh vi, không có thời gian.much easier. So with a little bit of JavaScript knowledge and the help of jQuery, you’ll be creating sophisticated, interactive websites in no time.

Những gì một chương trình máy tính?

Khi bạn thêm JavaScript vào một trang web, bạn đã viết một chương trình máy tính. Được cấp, 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 các trang web. Nhưng mặc dù các chương trình JavaScript (còn được gọi là tập lệnh) đơn giản hơn và ngắn hơn, chúng chia sẻ nhiều thuộc tính giống nhau của các chương trình phức tạp hơn.scripts) are simpler and shorter, they share many of the same properties of more complicated programs.

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

  1. Hỏi tên khách truy cập..

  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 một tin nhắn chào mừng trên một trang web, ví dụ này cho thấy quá 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.code—the words and characters that make the web browser behave how you want it to.

Cách thêm JavaScript vào một trang

Các 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 một màn hình trực quan trên màn hình. Phần của trình duyệt web hiểu HTML và CSS được gọi là công cụ bố trí hoặc kết xuất. 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 biết cụ thể trình duyệt khi JavaScript đến bằng cách sử dụng thẻ





My Web Page

0.layout or rendering engine. But most browsers also have something called a JavaScript interpreter. That’s the part of the browser that understands JavaScript and can execute the steps of a JavaScript program. The web browser is usually expecting HTML, so you must specifically tell the browser when JavaScript is coming by using the




My Web Page

0 tag.

Thẻ





My Web Page

0 là HTML thông thường. Nó hoạt động giống như một công tắc mà có hiệu lực nói rằng Hey Hey, trình duyệt web, đây là một số mã JavaScript; Bạn không biết phải làm gì với nó, vì vậy hãy đưa nó cho thông dịch viên JavaScript. Khi trình duyệt web gặp phải thẻ




My Web Page

2 đóng, nó biết rằng nó đã đạt đến cuối chương trình JavaScript và có thể quay lại nhiệm vụ bình thường.

Phần lớn thời gian, bạn sẽ thêm thẻ





My Web Page

0 trong phần trang web ____ ____24, như thế này:




My Web Page

Thẻ





My Web Page

0 thuộc tính




My Web Page

6 cho biết định dạng và loại tập lệnh theo sau. Trong trường hợp này,




My Web Page

7 có nghĩa là tập lệnh là văn bản thông thường (giống như HTML) và nó được viết bằng JavaScript.

Nếu bạn sử dụng HTML5, cuộc sống thậm chí còn đơn giản hơn. Bạn có thể bỏ qua hoàn toàn thuộc tính loại:





My Web Page

Trên thực tế, trình duyệt web cho phép bạn bỏ thuộc tính loại trong các tệp HTML 4.01 và XHTML 1.0 cũng như tập lệnh sẽ chạy giống nhau; Tuy nhiên, trang của bạn đã giành được xác thực chính xác mà không có thuộc tính loại (xem hộp trên các trang web xác thực để biết thêm về xác thực). Cuốn sách này sử dụng HTML5 cho docType, 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 giữa các thẻ mở và đóng





My Web Page

0:





My Web Page

Bạn sẽ tìm ra những gì JavaScript này làm trong một khoảnh khắc. Hiện tại, chuyển sự chú ý của bạn sang các thẻ mở và đóng. Để thêm một tập lệnh vào trang của bạn, hãy bắt đầu bằng cách chèn các thẻ này. Trong nhiều trường hợp, bạn sẽ đặt các thẻ





My Web Page

0 trong trang




My Web Page

4 để giữ mã JavaScript của bạn được tổ chức gọn gàng trong một khu vực của trang web.

Tuy nhiên, nó hoàn toàn có giá trị để đặt các thẻ





My Web Page

0 ở bất cứ đâu bên trong trang HTML. Trên thực tế, như bạn sẽ thấy sau trong chương này, có một lệnh JavaScript cho phép bạn viết thông tin trực tiếp vào một trang web. Sử dụng lệnh đó, bạn đặt các thẻ vào vị trí trên trang (ở đâu đó bên trong cơ thể) nơi bạn muốn tập lệnh viết tin nhắn của nó. Trên thực tế, nó phổ biến để đặt các thẻ




My Web Page

0 ngay bên dưới thẻ




My Web Page

4 đóng, cách tiếp cận này đảm bảo trang được tải và khách truy cập nhìn thấy nó trước khi chạy bất kỳ JavaScript nào.

Các tập tin JavaScript bên ngoài

Sử dụng thẻ





My Web Page

0 như đã thảo luận trong phần trước cho phép bạn thêm JavaScript vào một trang web duy nhất. Nhưng nhiều lần bạn sẽ tạo các tập lệnh mà bạn muốn chia sẻ với tất cả các trang trên trang web của mình. Ví dụ: bạn có thể thêm một bảng các tùy chọn điều hướng bổ sung trượt vào trang để đáp ứng với các chuyển động chuột của khách truy cập (xem Hình & NBSP; 1-2). Bạn có thể muốn cùng một bảng điều khiển slide ưa thích trên mỗi trang của trang web của bạn, nhưng sao chép và dán cùng một mã JavaScript vào mỗi trang là một ý tưởng thực sự tồi vì nhiều lý do.

Đầu tiên, nó có rất nhiều công việc sao chép và dán cùng một mã nhiều lần, đặc biệt nếu bạn có một trang web có hàng trăm trang. Thứ hai, nếu bạn quyết định thay đổi hoặc nâng cao mã JavaScript, bạn sẽ cần phải xác định vị trí của mọi trang bằng cách sử dụng JavaScript đó và cập nhật mã. Cuối cùng, vì tất cả các mã cho chương trình JavaScript sẽ được đặt trong mỗi trang web, mỗi trang sẽ lớn hơn nhiều và chậm hơn để tải xuống.

Một cách tiếp cận tốt hơn là sử dụng tệp JavaScript bên ngoài. Nếu bạn đã sử dụng các tệp CSS bên ngoài cho các trang web của mình, kỹ thuật này sẽ cảm thấy quen thuộc. Tệp JavaScript bên ngoài là một tệp văn bản chứa mã JavaScript và kết thúc bằng phần mở rộng tệp .js Navigation.js, ví dụ. Tệp được liên kết với một trang web bằng thẻ





My Web Page

0. Ví dụ: để thêm tệp JavaScript này vào trang chủ của bạn, bạn có thể viết như sau:.jsnavigation.js, for example. The file is linked to a web page using the




My Web Page

0 tag. For example, to add this JavaScript file to your home page, you might write the following:





My Web Page

Thuộc tính





My Web Page

7 của thẻ




My Web Page

0 hoạt động giống như thuộc tính




My Web Page

7 của thẻ

0 hoặc thuộc tính

1 TAG

2. Nói cách khác, nó trỏ đến một tệp trong trang web của bạn hoặc trên một trang web khác (xem hộp trên các loại URL).

Ghi chú

Khi thêm thuộc tính





My Web Page

7 vào liên kết vào tệp JavaScript bên ngoài, don lồng thêm bất kỳ mã JavaScript nào giữa các thẻ mở và đóng




My Web Page

0. Nếu bạn muốn liên kết với tệp JavaScript bên ngoài và thêm mã JavaScript tùy chỉnh vào một trang, hãy sử dụng bộ thẻ




My Web Page

0 thứ hai. Ví dụ:


Bạn có thể (và thường sẽ) đính kèm nhiều tệp JavaScript bên ngoài vào một trang web duy nhất. Ví dụ: bạn có thể đã tạo một tệp JavaScript bên ngoài điều khiển bảng điều hướng thả xuống và một tệp khác cho phép bạn thêm một trình chiếu tiện lợi vào một trang ảnh. Trên trang thư viện ảnh của bạn, bạn muốn có cả hai chương trình JavaScript, vì vậy bạn đã đính kèm cả hai tệp.

Ngoài ra, bạn có thể đính kèm các tệp JavaScript bên ngoài và thêm chương trình JavaScript vào cùng một trang như thế này:





My Web Page



Hướng dẫn how do i start a javascript program? - làm cách nào để bắt đầu một chương trình javascript?

Hình & NBSP; 1-2. & NBSP; Trang web của Nike.com sử dụng JavaScript rộng rãi để tạo ra một chương trình giới thiệu hấp dẫn cho các sản phẩm của họ. Trang chủ (trên cùng) bao gồm một hàng các nút điều hướng dọc theo những người đàn ông trên cùng, phụ nữ, trẻ em, v.v., khi đó, khi được đưa ra, tiết lộ một nhóm các tùy chọn điều hướng bổ sung. Ví dụ, việc kết nối nút thể thao (được khoanh tròn trong hình ảnh dưới cùng) cho thấy một bảng liệt kê danh sách các môn thể thao khác nhau mà Nike tạo ra sản phẩm.

Chỉ cần nhớ rằng bạn phải sử dụng một bộ thẻ mở và đóng





My Web Page

0 cho mỗi tệp JavaScript bên ngoài. Bạn sẽ tạo một tệp JavaScript bên ngoài trong hướng dẫn bắt đầu gắn tệp JavaScript bên ngoài.

Bạn có thể giữ các tệp JavaScript bên ngoài ở bất cứ đâu bên trong trang web của bạn thư mục gốc của bạn (hoặc bất kỳ thư mục con nào bên trong gốc). Nhiều nhà phát triển web tạo một thư mục đặc biệt cho các tệp JavaScript bên ngoài trong thư mục gốc của trang web: Tên phổ biến là JS (có nghĩa là JavaScript) hoặc LIBS (có nghĩa là thư viện).js (meaning JavaScript) or libs (meaning libraries).

Ghi chú

Khi thêm thuộc tính





My Web Page

7 vào liên kết vào tệp JavaScript bên ngoài, don lồng thêm bất kỳ mã JavaScript nào giữa các thẻ mở và đóng




My Web Page

0. Nếu bạn muốn liên kết với tệp JavaScript bên ngoài và thêm mã JavaScript tùy chỉnh vào một trang, hãy sử dụng bộ thẻ




My Web Page

0 thứ hai. Ví dụ:

Bạn có thể (và thường sẽ) đính kèm nhiều tệp JavaScript bên ngoài vào một trang web duy nhất. Ví dụ: bạn có thể đã tạo một tệp JavaScript bên ngoài điều khiển bảng điều hướng thả xuống và một tệp khác cho phép bạn thêm một trình chiếu tiện lợi vào một trang ảnh. Trên trang thư viện ảnh của bạn, bạn muốn có cả hai chương trình JavaScript, vì vậy bạn đã đính kèm cả hai tệp.

Ngoài ra, bạn có thể đính kèm các tệp JavaScript bên ngoài và thêm chương trình JavaScript vào cùng một trang như thế này:

Ghi chú

Khi thêm thuộc tính





My Web Page

7 vào liên kết vào tệp JavaScript bên ngoài, don lồng thêm bất kỳ mã JavaScript nào giữa các thẻ mở và đóng




My Web Page

0. Nếu bạn muốn liên kết với tệp JavaScript bên ngoài và thêm mã JavaScript tùy chỉnh vào một trang, hãy sử dụng bộ thẻ




My Web Page

0 thứ hai. Ví dụ:

Bạn có thể (và thường sẽ) đính kèm nhiều tệp JavaScript bên ngoài vào một trang web duy nhất. Ví dụ: bạn có thể đã tạo một tệp JavaScript bên ngoài điều khiển bảng điều hướng thả xuống và một tệp khác cho phép bạn thêm một trình chiếu tiện lợi vào một trang ảnh. Trên trang thư viện ảnh của bạn, bạn muốn có cả hai chương trình JavaScript, vì vậy bạn đã đính kèm cả hai tệp.

Ngoài ra, bạn có thể đính kèm các tệp JavaScript bên ngoài và thêm chương trình JavaScript vào cùng một trang như thế này:MM_JAVASCRIPT3E on your computer, containing all of the tutorial files for this book.

Hình & NBSP; 1-2. & NBSP; Trang web của Nike.com sử dụng JavaScript rộng rãi để tạo ra một chương trình giới thiệu hấp dẫn cho các sản phẩm của họ. Trang chủ (trên cùng) bao gồm một hàng các nút điều hướng dọc theo những người đàn ông trên cùng, phụ nữ, trẻ em, v.v., khi đó, khi được đưa ra, tiết lộ một nhóm các tùy chọn điều hướng bổ sung. Ví dụ, việc kết nối nút thể thao (được khoanh tròn trong hình ảnh dưới cùng) cho thấy một bảng liệt kê danh sách các môn thể thao khác nhau mà Nike tạo ra sản phẩm.

  1. Trong trình soạn thảo văn bản yêu thích của bạn, hãy mở tệp hello.html.hello.html.

    Tệp này được đặt trong thư mục Chương01 trong thư mục mm_javascript3e bạn đã tải xuống như được mô tả trong ghi chú ở trên. Nó có một trang HTML rất đơn giản, với bảng kiểu xếp tầng bên ngoài để thêm một chút phấn khích trực quan.chapter01 folder in the MM_JAVASCRIPT3E folder you downloaded as described in the note above. It’s a very simple HTML page, with an external cascading style sheet to add a little visual excitement.

  2. Nhấp vào dòng trống ngay trước khi đóng ____47Tag và loại:before the closing

    
    
    7 tag and type:

    
    
    8 là một lệnh bật một hộp cảnh báo và hiển thị thông điệp xuất hiện bên trong dấu ngoặc đơn trong trường hợp này, Hello World. Don Tiết lo lắng về tất cả các dấu câu (dấu ngoặc đơn, trích dẫn và dấu chấm phẩy) chưa. Bạn sẽ học được những gì họ làm trong chương tiếp theo.hello world. Don’t worry about all of the punctuation (the parentheses, quotes, and semicolon) just yet. You’ll learn what they do in the next chapter.

  3. Nhấn phím trả về một lần nữa và gõ ____22. Mã bây giờ sẽ trông như thế này:

    
    
    
    
    My Web Page
    
    
    2. The code should now look like this:

    
    
    

    Trong ví dụ này, những thứ bạn vừa gõ được hiển thị bằng in đậm. Hai thẻ HTML đã có trong tệp; Hãy chắc chắn rằng bạn nhập mã chính xác khi hiển thị.

  4. Khởi chạy một trình duyệt web và mở tệp Hello.html để xem trước nó.hello.html file to preview it.

    Một hộp cảnh báo JavaScript xuất hiện (xem Hình & NBSP; 1-3). Lưu ý rằng trang trống khi cảnh báo xuất hiện. .

    Mẹo

    Khi bạn lần đầu tiên bắt đầu lập trình, bạn sẽ bị sốc về tần suất các chương trình JavaScript của bạn không có vẻ hoạt động. Đối với các lập trình viên mới, nguyên nhân phổ biến nhất của các chương trình không hoạt động là những lỗi gõ đơn giản. Luôn luôn kiểm tra kỹ để đảm bảo các lệnh được đánh vần (như

    
    
    
    
    My Web Page
    
    
    
    
    0 trong tập lệnh đầu tiên) chính xác. Ngoài ra, lưu ý rằng dấu chấm câu thường xuyên có các cặp (ví dụ: dấu ngoặc đơn mở và đóng và các dấu số không giới hạn từ tập lệnh đầu tiên của bạn, chẳng hạn). Hãy chắc chắn rằng bạn bao gồm cả hai dấu chấm câu mở và đóng khi họ yêu cầu.

  5. Nhấp vào nút Hộp cảnh báo OK OK để đóng nó..

    Khi hộp cảnh báo biến mất, trang web xuất hiện trong cửa sổ trình duyệt.

    Mặc dù chương trình đầu tiên này không phức tạp về trái đất (hoặc thậm chí là thú vị), nhưng nó cho thấy một khái niệm quan trọng: một trình duyệt web sẽ chạy một chương trình JavaScript ngay khi nó đọc trong mã JavaScript. Trong ví dụ này, lệnh

    
    
    8 đã xuất hiện trước khi trình duyệt web hiển thị trang web, vì mã JavaScript xuất hiện trước HTML trong thẻ. Khái niệm này xuất hiện khi bạn bắt đầu viết các chương trình thao tác HTML của trang web, vì bạn sẽ học trong Chương & NBSP; 3.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.

Hướng dẫn how do i start a javascript program? - làm cách nào để bắt đầu một chương trình javascript?

Hình & nbsp; 1-3. & NBSP; Hộp cảnh báo JavaScript là một cách nhanh chóng để thu hút sự chú ý của ai đó. Nó là một trong những lệnh JavaScript đơn giản nhất để học và sử dụng.

Ghi chú

Một số phiên bản của Internet Explorer (IE) không muốn chạy các chương trình JavaScript trong các trang web mà bạn mở trực tiếp khỏi ổ cứng của mình, vì sợ rằng mã có thể làm điều gì đó có hại. Vì vậy, khi bạn cố gắng xem trước các tệp hướng dẫn cho cuốn sách này trong Internet Explorer, bạn có thể thấy một tin nhắn nói rằng IE đã chặn tập lệnh. Nhấp vào cho phép cho phép nội dung bị chặn.

Hành vi khó chịu này chỉ áp dụng cho các trang web mà bạn xem trước từ máy tính của mình, không phải các tệp bạn đã đưa lên máy chủ web. Để tránh nhấn nút cho phép nội dung bị chặn, nhiều lần, xem trước các trang trong một trình duyệt web khác, như Chrome hoặc Firefox.

Viết văn bản trên một trang web

Kịch bản trong phần trước đã xuất hiện một hộp thoại ở giữa màn hình của bạn. Điều gì sẽ xảy ra nếu bạn muốn in một tin nhắn trực tiếp lên một trang web bằng JavaScript? Có nhiều cách để làm như vậy, và bạn sẽ học được một số kỹ thuật tinh vi sau này trong cuốn sách này. Tuy nhiên, bạn có thể đạt được mục tiêu đơn giản này với lệnh JavaScript tích hợp và đó là những gì bạn sẽ làm trong tập lệnh thứ hai:

  1. Trong trình soạn thảo văn bản của bạn, hãy mở tệp hello2.html..

    Trong khi các thẻ

    
    
    
    
    My Web Page
    
    
    0 thường xuất hiện trong một trang web
    
    
    
    
    My Web Page
    
    
    4, bạn có thể đặt chúng và các chương trình JavaScript trực tiếp trong phần thân trang.

  2. Trực tiếp bên dưới ____54, nhập mã sau:

    
    
    
    
    My Web Page
    
    
    
    
    4, type the following code:

    Giống như hàm

    
    
    8,
    
    
    
    
    My Web Page
    
    
    
    
    6 là một lệnh JavaScript thực sự viết ra bất cứ điều gì bạn đặt giữa dấu ngoặc đơn mở và đóng. Trong trường hợp này, HTML
    
    
    
    
    My Web Page
    
    
    
    
    7 được thêm vào trang: thẻ đoạn văn và hai từ.

  3. Lưu trang và mở nó trong trình duyệt web..

    Trang mở đầu và dòng chữ Hello Hello World! xuất hiện bên dưới tiêu đề (xem hình & nbsp; 1-4).

Ghi chú

Một số phiên bản của Internet Explorer (IE) không muốn chạy các chương trình JavaScript trong các trang web mà bạn mở trực tiếp khỏi ổ cứng của mình, vì sợ rằng mã có thể làm điều gì đó có hại. Vì vậy, khi bạn cố gắng xem trước các tệp hướng dẫn cho cuốn sách này trong Internet Explorer, bạn có thể thấy một tin nhắn nói rằng IE đã chặn tập lệnh. Nhấp vào cho phép cho phép nội dung bị chặn.complete_ in the same folder as the tutorial file. For example, the file complete_hello2.html contains a working version of the script you added to file hello2.html.

Hai kịch bản bạn vừa tạo có thể khiến bạn cảm thấy hơi bị áp đảo với JavaScript, hoặc cuốn sách này. Don Tiết lo lắng, đây chỉ là khởi đầu. Nó rất quan trọng để bắt đầu với sự hiểu biết đầy đủ về những điều cơ bản. Bạn sẽ làm một số điều rất hữu ích và phức tạp bằng cách sử dụng JavaScript chỉ trong một vài chương. Trên thực tế, trong phần còn lại của chương này, bạn sẽ nhận được một số tính năng nâng cao mà bạn có thể thêm vào các trang web của mình sau khi bạn làm việc theo cách của bạn qua hai phần đầu tiên của cuốn sách này.

Đính kèm một tệp JavaScript bên ngoài

Như đã thảo luận trên các tệp JavaScript bên ngoài, bạn sẽ thường đặt mã JavaScript vào một tệp riêng nếu bạn muốn sử dụng cùng một tập lệnh trên nhiều trang web. Sau đó, bạn hướng dẫn các trang web của mình tải tệp đó và sử dụng JavaScript bên trong nó. Các tệp JavaScript bên ngoài cũng có ích khi bạn sử dụng mã JavaScript khác của người khác. Cụ thể, có các bộ sưu tập mã JavaScript được gọi là Thư viện, cung cấp chương trình JavaScript hữu ích. Thông thường, các thư viện này giúp bạn dễ dàng làm điều gì đó mà thường khá khó khăn. Bạn có thể tìm hiểu thêm về các thư viện JavaScript trên các thư viện JavaScript và đặc biệt là thư viện JavaScript Cuốn sách này (và phần lớn web) sử dụng JQuery.libraries, which provide useful JavaScript programming. Usually, these libraries make it easy to do something that’s normally quite difficult. You’ll learn more about JavaScript libraries on About JavaScript Libraries, and, in particular, the JavaScript library this book (and much of the Web) uses—jQuery.

Hướng dẫn how do i start a javascript program? - làm cách nào để bắt đầu một chương trình javascript?

Hình & nbsp; 1-4. & Nbsp; wow. Kịch bản này có thể không phải là một cái gì đó cho tài liệu. Tin nhắn (như Chào mừng bạn trở lại trang web, Dave,) sau khi một trang web đã tải xuống.

Nhưng bây giờ, bạn sẽ có được trải nghiệm khi đính kèm một tệp JavaScript bên ngoài vào một trang và viết một chương trình ngắn làm điều gì đó tuyệt vời:

  1. Trong trình soạn thảo văn bản của bạn, hãy mở tệp fadein.html..

    Trang này chỉ chứa một số thẻ HTML đơn giản, một vài thẻ

    
    
    
    
    My Web Page
    
    
    
    
    8, tiêu đề và một vài đoạn văn. Bạn sẽ thêm một hiệu ứng hình ảnh đơn giản vào trang, điều này khiến tất cả nội dung dần dần mờ dần vào tầm nhìn.

  2. Nhấp vào đường trống giữa các thẻ

    
    
    
    
    My Web Page
    
    
    
    
    9 và đóng các thẻ
    
    
    7 gần đầu trang và gõ:
    
    
    
    
    My Web Page
    
    
    
    
    9 and closing
    
    
    7 tags near the top of the page, and type:

    
    
    
    
    My Web Page
    
    
    0

    Mã này liên kết một tệp có tên jquery.min.js, được chứa trong một thư mục có tên _JS, với trang web này. Khi một trình duyệt web tải trang web này, nó cũng tải xuống tệp javascript jquery.min.js và chạy mã bên trong nó.jquery.min.js, which is contained in a folder named _js, to this web page. When a web browser loads this web page, it also downloads the jquery.min.js JavaScript file and runs the code inside it.

    Tiếp theo, bạn sẽ thêm chương trình JavaScript của riêng bạn vào trang này.

    Ghi chú

    Phần tối thiểu có nghĩa là tệp được giảm thiểu một quy trình loại bỏ khoảng trắng không cần thiết và ngưng tụ mã để làm cho tệp nhỏ hơn để tải xuống nhanh hơn.minimized—a process that removes unneeded whitespace and condenses the code to make the file smaller so that it downloads faster.

  3. Nhấn Trả về để tạo một dòng trống mới, sau đó nhập::

    
    
    2

    Điều này kết thúc khối mã JavaScript. Bây giờ bạn sẽ thêm một số chương trình.

  4. Nhấp vào dòng trống giữa các thẻ tập lệnh mở và đóng và loại::

    
    
    
    
    My Web Page
    
    
    3

    Bạn có thể tự hỏi đó là cái quái gì. Bạn sẽ tìm hiểu tất cả các chi tiết của mã này về việc thêm jQuery vào một trang, nhưng tóm lại, dòng này tận dụng tệp lập trình bên trong tệp jquery.min.js để đảm bảo rằng trình duyệt thực thi dòng tiếp theo của dòng tiếp theo của Mã vào đúng thời điểm.jquery.min.js file to make sure that the browser executes the next line of code at the right time.

  5. Nhấn trả lại để tạo một dòng mới, sau đó nhập::

    
    
    
    
    My Web Page
    
    
    4

    Dòng này thực hiện một cái gì đó kỳ diệu: nó làm cho tiêu đề hướng dẫn sử dụng hướng dẫn mất tích bị mất và sau đó từ từ trượt xuống trang trong suốt 3 giây (hoặc 3.000 mili giây). sao làm được vậy? Chà, đó là một phần của phép thuật của JQuery, điều này tạo ra các hiệu ứng phức tạp có thể chỉ bằng một dòng mã duy nhất.

  6. Nhấn trả về một lần cuối cùng, và sau đó nhập::

    
    
    
    
    My Web Page
    
    
    5

    Mã này đóng mã JavaScript, giống như thẻ

    
    
    
    
    My Web Page
    
    
    2 đóng cho thấy kết thúc của chương trình JavaScript. Don Tiết lo lắng quá nhiều về tất cả những dấu chấm câu kỳ lạ đó, bạn sẽ học cách họ làm việc chi tiết sau này trong cuốn sách. Điều chính bạn cần đảm bảo là nhập mã chính xác như được liệt kê ở đây. Một lỗi đánh máy, và chương trình có thể không hoạt động.

    Mã cuối cùng bạn đã thêm vào trang sẽ trông giống như văn bản in đậm sau:

    
    
    
    
    My Web Page
    
    
    6

    Mẹo

    Để làm cho chương trình của bạn dễ đọc hơn, đó là một ý tưởng tốt để thụt mã. Nhiều khi bạn thụt vào các thẻ HTML để hiển thị thẻ nào được lồng bên trong các thẻ khác, bạn có thể thụt dòng mã bên trong một khối mã khác. Ví dụ: dòng mã bạn đã thêm vào bước 6 được lồng bên trong mã cho các bước 5 và 7, vì vậy hãy nhấn tab hoặc nhấn phím cách một vài lần trước khi nhập mã cho bước 6 có thể giúp mã của bạn dễ hiểu hơn (vì Hình trong mã cuối cùng được liệt kê ở cuối bước 7).

  7. Lưu tệp HTML và mở nó trong trình duyệt web..

    Bạn sẽ thấy tiêu đề, trượt xuống, cộng với một đoạn văn và chân trang ở dưới cùng của cửa sổ trình duyệt, theo sau là các hộp chứa JavaScript & jQuery: Hướng dẫn bị thiếu từ từ trượt xuống vị trí. Thay đổi số 3000 thành các giá trị khác nhau (như 250 và 10000) để xem cách thay đổi cách thức hoạt động của trang.

Ghi chú

Nếu bạn cố gắng xem trước trang này trong Internet Explorer và nó dường như không làm bất cứ điều gì, bạn sẽ cần phải nhấp vào hộp Nội dung Bị chặn Nội dung bị chặn xuất hiện ở cuối trang (xem ghi chú trên lưu ý).

Như bạn có thể thấy, nó không mất rất nhiều JavaScript để làm một số điều tuyệt vời cho các trang web của bạn. Nhờ JQuery, bạn sẽ có thể tạo các trang web tương tác, tinh vi ngay cả khi bạn không phải là một trình hướng dẫn lập trình. Tuy nhiên, bạn sẽ thấy nó giúp biết những điều cơ bản của JavaScript và lập trình. Chương Chương & NBSP; 2 và Chương & NBSP; 3 sẽ bao gồm những điều cơ bản của JavaScript để giúp bạn thoải mái với các khái niệm cơ bản và cú pháp tạo nên ngôn ngữ.

Theo dõi lỗi

Khoảnh khắc khó chịu nhất trong chương trình JavaScript xuất hiện khi bạn cố gắng xem trang được cung cấp bởi JavaScript của mình trong trình duyệt web và không có gì xảy ra. Nó là một trong những kinh nghiệm phổ biến nhất cho các lập trình viên. Ngay cả các lập trình viên có kinh nghiệm cũng thường không nhận được nó ngay lần đầu tiên họ viết một chương trình, vì vậy việc tìm ra những gì đã sai chỉ là một phần của trò chơi.

Hầu hết các trình duyệt web được thiết lập để âm thầm bỏ qua các lỗi JavaScript, vì vậy bạn thường giành chiến thắng ngay cả khi thấy Hey Hey, chương trình này không hoạt động! hộp thoại. (Nói chung, đó là một điều tốt, vì bạn không muốn có lỗi JavaScript để làm gián đoạn trải nghiệm xem các trang web của bạn.)

Vì vậy, làm thế nào để bạn tìm ra những gì đã đi sai? Có nhiều cách để theo dõi lỗi trong chương trình JavaScript. Bạn sẽ học một số kỹ thuật gỡ lỗi nâng cao trong Chương & NBSP; 17, nhưng phương pháp cơ bản nhất là tham khảo trình duyệt web. Hầu hết các trình duyệt web theo dõi các lỗi JavaScript và ghi chúng trong một cửa sổ riêng gọi là bảng điều khiển lỗi. Khi bạn tải một trang web có chứa lỗi, sau đó bạn có thể xem bảng điều khiển để nhận thông tin hữu ích về lỗi, giống như dòng trang web mà nó xảy ra và mô tả về lỗi.debugging techniques in Chapter 17, but the most basic method is to consult the web browser. Most web browsers keep track of JavaScript errors and record them in a separate window called an error console. When you load a web page that contains an error, you can then view the console to get helpful information about the error, like which line of the web page it occurred in and a description of the error.

Thông thường, bạn có thể tìm thấy câu trả lời cho sự cố trong bảng điều khiển lỗi, sửa JavaScript và sau đó trang sẽ hoạt động. Bảng điều khiển giúp bạn loại bỏ các lỗi chính tả cơ bản mà bạn thực hiện khi bạn bắt đầu lập trình lần đầu tiên, như quên đóng dấu chấm câu hoặc nhầm tên của một lệnh javascript. Bạn có thể sử dụng bảng điều khiển lỗi trong trình duyệt yêu thích của mình, nhưng vì các tập lệnh đôi khi hoạt động trong một trình duyệt chứ không phải phần khác, phần này chỉ cho bạn cách bật bảng điều khiển JavaScript trong tất cả các trình duyệt chính, để bạn có thể theo dõi các vấn đề trong mỗi trình.

Bảng điều khiển JavaScript Chrome

Trình duyệt Google Chrome Chrome được nhiều nhà phát triển web yêu thích. Tính năng DevTools của nó cung cấp cho bạn nhiều cách để khắc phục sự cố HTML, CSS và JavaScript. Ngoài ra, bảng điều khiển JavaScript của nó là một nơi tuyệt vời để bắt đầu theo dõi các lỗi trong mã của bạn. Nó không chỉ mô tả các lỗi mà nó tìm thấy, nó còn xác định dòng trong mã của bạn nơi mỗi lỗi xảy ra.

Để mở bảng điều khiển JavaScript, nhấp vào nút Menu Tùy chỉnh (được khoanh tròn trong Hình & NBSP; 1-5) và chọn Công cụ → Bảng điều khiển JavaScript. Hoặc sử dụng phím tắt Ctrl+Shift+J (Windows) hoặc ⌘-exption-j (mac).

Hướng dẫn how do i start a javascript program? - làm cách nào để bắt đầu một chương trình javascript?

Hình & NBSP; 1-5. & NBSP; Nhấp vào menu Tùy chỉnh (được khoanh tròn) để truy cập vào bảng điều khiển JavaScript cũng như các công cụ hữu ích khác. Chọn tùy chọn Công cụ Nhà phát triển là một cách khác để đến bảng điều khiển, vì bảng điều khiển JavaScript là một phần của một bộ công cụ Chrome lớn hơn được gọi là Công cụ phát triển (viết tắt là DevTools). Bạn sẽ tìm hiểu thêm về những công cụ đó trong Chương 17.

Sau khi bạn mở bảng điều khiển, bạn có thể kiểm tra mọi lỗi xuất hiện trong trang hiện tại. Ví dụ: trong Hình & NBSP; 1-6, bảng điều khiển xác định lỗi là một cú pháp không thể bỏ qua: Mã thông báo bất ngờ bất ngờ. OK, có thể không rõ ràng ngay lập tức điều đó có nghĩa là gì, nhưng khi bạn gặp phải (và sửa) nhiều lỗi hơn, bạn sẽ quen với các mô tả ngắn gọn này. Về cơ bản, một lỗi cú pháp chỉ ra một số loại lỗi đánh máy, một lỗi với cú pháp hoặc ngôn ngữ của chương trình. Phần mã thông báo bất ngờ của người Viking, một phần bất hợp pháp chỉ có nghĩa là trình duyệt đã gặp phải một nhân vật bất hợp pháp, hoặc (và ở đây, phần khó khăn) mà có một nhân vật còn thiếu. Trong trường hợp này, nhìn kỹ vào mã mà bạn có thể thấy có một dấu ngoặc đơn mở đầu trước khi chậm chậm nhưng không có dấu hiệu cuối cùng.

Bảng điều khiển cũng xác định tên của tệp lỗi trong (hoàn chỉnh_slide.html, trong trường hợp này) và số dòng xảy ra lỗi (dòng 10). Nhấp vào tên tệp và Chrome mở tệp phía trên bảng điều khiển và làm nổi bật ngắn gọn dòng (xem Hình & NBSP; 1-5).complete_slide.html, in this case) and the line number the error occurs (line 10). Click the filename, and Chrome opens the file above the console and briefly highlights the line (see Figure 1-5).

Mẹo

Vì bảng điều khiển lỗi hiển thị số dòng nơi xảy ra lỗi, bạn có thể muốn sử dụng trình soạn thảo văn bản có thể hiển thị số dòng. Bằng cách đó, bạn có thể dễ dàng nhảy từ bảng điều khiển lỗi sang trình soạn thảo văn bản của mình và xác định dòng mã bạn cần sửa.

Hướng dẫn how do i start a javascript program? - làm cách nào để bắt đầu một chương trình javascript?

Hình & NBSP; 1-6. & NBSP; Bảng điều khiển JavaScript của Chrome, xác định các lỗi trong các chương trình của bạn. Nhấp vào tên tệp được liệt kê ở bên phải của lỗi và Chrome làm nổi bật ngắn gọn trang với lỗi (được khoanh tròn).

Thật không may, có một danh sách dài những điều có thể sai trong một kịch bản, từ lỗi chính tả đơn giản đến các lỗi phức tạp trong logic. Khi bạn chỉ bắt đầu với chương trình JavaScript, nhiều lỗi của bạn sẽ là loại đánh máy đơn giản. Ví dụ: bạn có thể quên một dấu chấm phẩy, dấu trích dẫn hoặc dấu ngoặc đơn hoặc viết sai lệnh JavaScript. Bạn đặc biệt dễ bị lỗi lỗi khi theo các ví dụ từ một cuốn sách (như cuốn sách này). Dưới đây là một vài lỗi phổ biến mà bạn có thể mắc phải và các thông báo lỗi (không rõ ràng) mà bạn có thể gặp phải:

  • Thiếu dấu câu. Như đã đề cập trước đó, lập trình JavaScript thường liên quan đến nhiều cặp biểu tượng như mở và đóng dấu ngoặc đơn và dấu ngoặc. Ví dụ: nếu bạn gõ ____ ____ 62, hãy từ bỏ dấu ngoặc đơn, bạn có thể nhận được: mã thông báo bất ngờ; Thông điệp, có nghĩa là Chrome đang mong đợi một cái gì đó khác với nhân vật mà nó thể hiện. Trong trường hợp này, nó gặp dấu chấm phẩy thay vì dấu ngoặc đơn đóng.. As mentioned earlier, JavaScript programming often involves lots of symbol pairs like opening and closing parentheses and brackets. For example, if you type

    
    
    
    
    0. Bạn cũng sẽ gặp sự cố khi bạn viết sai các hàm jQuery (như các hàm
    
    
    
    
    0 command. You’ll also encounter problems when you misspell jQuery functions (like the