Hướng dẫn where do i create a javascript file? - Tôi tạo tệp javascript ở đâu?

Question

Tag

Trong HTML, mã JavaScript được chèn vào giữa các thẻ

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>My Web Page</title>
<script>
</script>
</head>

7 và

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>My Web Page</title>
<script>
</script>
</head>

8.

Nội dung chính Show

Chức năng và sự kiện của JavaScript
JavaScript trong hoặc
JavaScript trong
JavaScript trong
Bạn sẽ tìm hiểu nhiều hơn về các chức năng và sự kiện trong các chương sau.
Bạn có thể đặt bất kỳ số lượng tập lệnh nào trong tài liệu HTML.
External JavaScript Advantages
JavaScript <!doctype html> <html> <head> <meta charset="UTF-8"> <title>My Web Page</title> <script> </script> </head>9 là một khối mã JavaScript, có thể được thực thi khi "được gọi là" cho.
Chương & NBSP; 1. & NBSP; Viết chương trình JavaScript đầu tiên của bạn
Giới thiệu lập trình
Những gì một chương trình máy tính?
Cách thêm JavaScript vào một trang
Các tập tin JavaScript bên ngoài
Chương trình JavaScript đầu tiên của bạn
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ị.
Viết văn bản trên một trang web
Viết văn bản trên một trang web
Thẻ HTML thường di chuyển theo cặp một thẻ mở và đóng. Để đảm bảo rằng bạn không quên đóng một thẻ, nó giúp đóng thẻ ngay sau khi nhập thẻ mở, sau đó điền vào những thứ đi giữa các thẻ.
Bảng điều khiển JavaScript Chrome
Bảng điều khiển Internet Explorer
Bảng điều khiển web JavaScript Firefox
Bảng điều khiển lỗi safari
Tôi tạo JavaScript ở đâu?
Làm thế nào tạo tệp JS trong Windows?
Các tệp JavaScript nên đi đâu?
Tệp JavaScript được lưu trữ ở đâu?

Thí dụ

document.getEuityById ("demo"). innerHtml = "JavaScript đầu tiên của tôi";
document.getElementById("demo").innerHTML = "My First JavaScript";

Hãy tự mình thử »

Ví dụ JavaScript cũ có thể sử dụng thuộc tính loại:. Thuộc tính loại là không bắt buộc. JavaScript là ngôn ngữ kịch bản mặc định trong HTML.
The type attribute is not required. JavaScript is the default scripting language in HTML.

Chức năng và sự kiện của JavaScript

JavaScript

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>My Web Page</title>
<script>
</script>
</head>

9 là một khối mã JavaScript, có thể được thực thi khi "được gọi là" cho.

Ví dụ: một hàm có thể được gọi khi một sự kiện xảy ra, như khi người dùng nhấp vào nút.event occurs, like when the user clicks a button.

Bạn sẽ tìm hiểu nhiều hơn về các chức năng và sự kiện trong các chương sau.

JavaScript trong hoặc

Bạn có thể đặt bất kỳ số lượng tập lệnh nào trong tài liệu HTML.

Các tập lệnh có thể được đặt trong

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>My Web Page</title>
<script>
  alert('hello world!');
</script>
</head>

0 hoặc trong phần

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>My Web Page</title>
<script>
  alert('hello world!');
</script>
</head>

1 của trang HTML hoặc trong cả hai.

JavaScript trong

Trong ví dụ này, JavaScript

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>My Web Page</title>
<script>
</script>
</head>

9 được đặt trong phần

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>My Web Page</title>
<script>
  alert('hello world!');
</script>
</head>

1 của trang HTML.

Hàm được gọi (được gọi) khi nhấp vào nút:

Thí dụ

document.getEuityById ("demo"). innerHtml = "JavaScript đầu tiên của tôi";

Hãy tự mình thử »

Ví dụ JavaScript cũ có thể sử dụng thuộc tính loại:. Thuộc tính loại là không bắt buộc. JavaScript là ngôn ngữ kịch bản mặc định trong HTML.

Chức năng và sự kiện của JavaScript

JavaScript

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>My Web Page</title>
<script>
</script>
</head>

9 là một khối mã JavaScript, có thể được thực thi khi "được gọi là" cho.

JavaScript trong

Trong ví dụ này, JavaScript

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>My Web Page</title>
<script>
</script>
</head>

9 được đặt trong phần

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>My Web Page</title>
<script>
  alert('hello world!');
</script>
</head>

1 của trang HTML.

Hàm được gọi (được gọi) khi nhấp vào nút:

Thí dụ

Chức năng và sự kiện của JavaScript

JavaScript

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>My Web Page</title>
<script>
</script>
</head>

9 là một khối mã JavaScript, có thể được thực thi khi "được gọi là" cho.

Ví dụ: một hàm có thể được gọi khi một sự kiện xảy ra, như khi người dùng nhấp vào nút.

Bạn sẽ tìm hiểu nhiều hơn về các chức năng và sự kiện trong các chương sau.

JavaScript trong hoặc
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}

Chức năng và sự kiện của JavaScript

JavaScript

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>My Web Page</title>
<script>
</script>
</head>

9 là một khối mã JavaScript, có thể được thực thi khi "được gọi là" cho.

Ví dụ: một hàm có thể được gọi khi một sự kiện xảy ra, như khi người dùng nhấp vào nút.

Bạn sẽ tìm hiểu nhiều hơn về các chức năng và sự kiện trong các chương sau.

JavaScript trong hoặc

Bạn có thể đặt bất kỳ số lượng tập lệnh nào trong tài liệu HTML.

Các tập lệnh có thể được đặt trong

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>My Web Page</title>
<script>
  alert('hello world!');
</script>
</head>

0 hoặc trong phần

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>My Web Page</title>
<script>
  alert('hello world!');
</script>
</head>

1 của trang HTML hoặc trong cả hai.
document.getElementById("demo").innerHTML = "Paragraph changed.";
}

JavaScript trong

Trong ví dụ này, JavaScript

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>My Web Page</title>
<script>
</script>
</head>

9 được đặt trong phần

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>My Web Page</title>
<script>
  alert('hello world!');
</script>
</head>

1 của trang HTML..js.

Hàm được gọi (được gọi) khi nhấp vào nút:

function myFunction () {& nbsp; & nbsp; document.getEuityById ("demo"). innerHtml = "Đoạn đã thay đổi."; }

Demo javascript trong đầu

Một đoạn nó

External JavaScript Advantages

Hãy tự mình thử »

Trong ví dụ này, JavaScript

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>My Web Page</title>
<script>
</script>
</head>

9 được đặt trong phần

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>My Web Page</title>
<script>
  alert('hello world!');
</script>
</head>

0 của trang HTML.

Demo javascript trong cơ thể
Một đoạn văn

Thử nó

Thí dụ

Chức năng và sự kiện của JavaScript

JavaScript <!doctype html> <html> <head> <meta charset="UTF-8"> <title>My Web Page</title> <script> </script> </head>9 là một khối mã JavaScript, có thể được thực thi khi "được gọi là" cho.

Ví dụ: một hàm có thể được gọi khi một sự kiện xảy ra, như khi người dùng nhấp vào nút.

Bạn sẽ tìm hiểu nhiều hơn về các chức năng và sự kiện trong các chương sau.
JavaScript trong hoặc
Bạn có thể đặt bất kỳ số lượng tập lệnh nào trong tài liệu HTML.

Các tập lệnh có thể được đặt trong

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>My Web Page</title>
<script>
  alert('hello world!');
</script>
</head>

0 hoặc trong phần

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>My Web Page</title>
<script>
  alert('hello world!');
</script>
</head>

1 của trang HTML hoặc trong cả hai.full URL to link to myScript.js:

Thí dụ

JavaScript trong

JavaScript

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>My Web Page</title>
<script>
</script>
</head>

9 là một khối mã JavaScript, có thể được thực thi khi "được gọi là" cho.

Ví dụ: một hàm có thể được gọi khi một sự kiện xảy ra, như khi người dùng nhấp vào nút.file path to link to myScript.js:

Bạn sẽ tìm hiểu nhiều hơn về các chức năng và sự kiện trong các chương sau.

JavaScript trong hoặc

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ú

Nếu bạn ở trên Windows, bạn có thể có một phiên bản cũ của trình duyệt Safari. Apple đã ngừng cập nhật Safari cho Windows, vì vậy thông tin Safari được hiển thị ở đây có thể không áp dụng cho bạn.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).

Nhận JavaScript & JQuery: Hướng dẫn mất tích, phiên bản thứ 3 bây giờ với nền tảng học tập O hèReilly.

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ạ (

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>My Web Page</title>
<script src="navigation.js"></script>
</head>

2,

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>My Web Page</title>
<script src="navigation.js"></script>
</head>

3,

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>My Web Page</title>
<script src="navigation.js"></script>
</head>

4). 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:

Hỏi tên khách truy cập..
Nhận phản hồi của khách truy cập..
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ẻ

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>My Web Page</title>
<script>
</script>
</head>

7.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

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>My Web Page</title>
<script>
</script>
</head>

7 tag.

Thẻ

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>My Web Page</title>
<script>
</script>
</head>

7 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ẻ

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>My Web Page</title>
<script>
</script>
</head>

8 đó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ẻ

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>My Web Page</title>
<script>
</script>
</head>

7 trong phần trang web

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>My Web Page</title>
<script>
  alert('hello world!');
</script>
</head>

1, như thế này:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/
html4/strict.dtd">
<html>
<head>
<title>My Web Page</title>
<script type="text/javascript">
</script>
</head>

Thẻ

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>My Web Page</title>
<script>
</script>
</head>

7 thuộc tính

<script src="navigation.js"></script>
<script>
  alert('Hello world!');
</script>

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

<script src="navigation.js"></script>
<script>
  alert('Hello world!');
</script>

2 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:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>My Web Page</title>
<script>
</script>
</head>

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

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>My Web Page</title>
<script>
</script>
</head>

7:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>My Web Page</title>
<script>
  alert('hello world!');
</script>
</head>

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

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>My Web Page</title>
<script>
</script>
</head>

7. Để 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ẻ

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>My Web Page</title>
<script>
</script>
</head>

7 vào trang ____ ____21 để 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ẻ

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>My Web Page</title>
<script>
</script>
</head>

7 ở bất cứ đâu bên trong trang HTML 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ẻ

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>My Web Page</title>
<script>
</script>
</head>

7 ngay bên dưới thẻ

<script src="navigation.js"></script>
<script>
  alert('Hello world!');
</script>

9 đó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ẻ

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>My Web Page</title>
<script>
</script>
</head>

7 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ẻ

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>My Web Page</title>
<script>
</script>
</head>

7. 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:.js—navigation.js, for example. The file is linked to a web page using the

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>My Web Page</title>
<script>
</script>
</head>

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

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>My Web Page</title>
<script src="navigation.js"></script>
</head>

Thuộc tính

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>My Web Page</title>
<script>
  alert('hello world!');
</script>
</head>

6 của thẻ

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>My Web Page</title>
<script>
</script>
</head>

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

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>My Web Page</title>
<script>
  alert('hello world!');
</script>
</head>

6 của thẻ

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>My Web Page</title>
<script src="navigation.js"></script>
<script src="slideshow.js"></script>
<script>
  alert('hello world!');
</script>
</head>

5 hoặc thuộc tính

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>My Web Page</title>
<script src="navigation.js"></script>
<script src="slideshow.js"></script>
<script>
  alert('hello world!');
</script>
</head>

6 TAG

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>My Web Page</title>
<script src="navigation.js"></script>
<script src="slideshow.js"></script>
<script>
  alert('hello world!');
</script>
</head>

7. 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

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>My Web Page</title>
<script>
  alert('hello world!');
</script>
</head>

6 vào liên kết đến 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

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>My Web Page</title>
<script>
</script>
</head>

7. 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ẻ

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>My Web Page</title>
<script>
</script>
</head>

7 thứ hai. Ví dụ:

<script src="navigation.js"></script>
<script>
  alert('Hello world!');
</script>

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:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>My Web Page</title>
<script src="navigation.js"></script>
<script src="slideshow.js"></script>
<script>
  alert('hello world!');
</script>
</head>

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

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>My Web Page</title>
<script>
</script>
</head>

7 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ú

Đôi khi thứ tự bạn đính kèm các tệp JavaScript bên ngoài có vấn đề. Như bạn sẽ thấy sau trong cuốn sách này, đôi khi các tập lệnh bạn viết phụ thuộc vào mã xuất phát từ một tệp bên ngoài. Đó thường là trường hợp khi sử dụng các thư viện JavaScript (mã JavaScript đơn giản hóa các tác vụ lập trình phức tạp). Bạn sẽ thấy một ví dụ về thư viện JavaScript trong hành động trong hướng dẫn về việc đính kèm một tệp JavaScript bên ngoài.

Chương trình JavaScript đầu tiên của bạn

Cách tốt nhất để học lập trình JavaScript là bằng cách lập trình thực sự. Trong suốt cuốn sách này, bạn sẽ tìm thấy các hướng dẫn thực hành đưa bạn từng bước trong quá trình tạo các chương trình JavaScript. Để bắt đầu, bạn sẽ cần một trình soạn thảo văn bản (xem phần mềm cho chương trình JavaScript cho các đề xuất), trình duyệt web và các tệp bài tập được đặt tại https://github.com/sawmac/js3e (xem ghi chú sau đây để biết hướng dẫn đầy đủ ).

Ghi chú

Đôi khi thứ tự bạn đính kèm các tệp JavaScript bên ngoài có vấn đề. Như bạn sẽ thấy sau trong cuốn sách này, đôi khi các tập lệnh bạn viết phụ thuộc vào mã xuất phát từ một tệp bên ngoài. Đó thường là trường hợp khi sử dụng các thư viện JavaScript (mã JavaScript đơn giản hóa các tác vụ lập trình phức tạp). Bạn sẽ thấy một ví dụ về thư viện JavaScript trong hành động trong hướng dẫn về việc đính kèm một tệp JavaScript bên ngoài.

Chương trình JavaScript đầu tiên của bạn

Cách tốt nhất để học lập trình JavaScript là bằng cách lập trình thực sự. Trong suốt cuốn sách này, bạn sẽ tìm thấy các hướng dẫn thực hành đưa bạn từng bước trong quá trình tạo các chương trình JavaScript. Để bắt đầu, bạn sẽ cần một trình soạn thảo văn bản (xem phần mềm cho chương trình JavaScript cho các đề xuất), trình duyệt web và các tệp bài tập được đặt tại https://github.com/sawmac/js3e (xem ghi chú sau đây để biết hướng dẫn đầy đủ ).MM_JAVASCRIPT3E on your computer, containing all of the tutorial files for this book.

Các hướng dẫn trong chương này yêu cầu các tệp ví dụ từ trang web cuốn sách này, www.missingmanuals.com/cds/jsjq3emm. (Các tệp hướng dẫn được lưu trữ dưới dạng một tệp zip.)

Trong Windows, tải xuống tệp zip và nhấp đúp vào nó để mở kho lưu trữ. Nhấp vào tùy chọn Trích xuất tất cả các tệp, sau đó làm theo hướng dẫn của Trình hướng dẫn trích xuất để giải nén các tệp và đặt chúng trên máy tính của bạn. Nếu bạn gặp khó khăn trong việc mở tệp zip, tiện ích 7-zip miễn phí có thể giúp: www.7-zip.org.hello.html.
Trên máy Mac, chỉ cần nhấp đúp vào tệp để giải nén nó. Sau khi bạn tải xuống và giải nén các tệp, bạn nên có một thư mục có tên MM_JavaScript3e trên máy tính của bạn, chứa tất cả các tệp hướng dẫn cho cuốn sách này.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.
Để làm ướt chân và giới thiệu nhẹ nhàng cho JavaScript, chương trình đầu tiên của bạn sẽ rất đơn giản:before the closing
```
<script>
```
2 tag and type:
```
<script>
```
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.
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.:
```
alert('hello world');
```
Nhấp vào dòng trống ngay trước khi đóng ____62TAG và loại: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.
Mã này thực sự là HTML, không phải JavaScript. Nó thông báo cho trình duyệt web rằng các thứ theo thẻ này là JavaScript.
```
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>My Web Page</title>
<script>
</script>
</head>
```
8. The code should now look like this:
```
<link href="../_css/site.css" rel="stylesheet">
<script>
  alert('hello world');
</script>
</head>
```
Nhấn phím trả về để tạo một dòng trống mới và loại:
Bạn chỉ cần gõ dòng mã JavaScript đầu tiên của mình. Hàm JavaScript
```
<script>
```
3 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.html file to preview it.
Nhấn phím trả về một lần nữa và gõ ____. Mã bây giờ sẽ trông như thế này:
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ị.
Khởi chạy một trình duyệt web và mở tệp Hello.html để xem trước nó.
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
```
<script>
```
3 đã 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ì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:

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ẻ
```
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>My Web Page</title>
<script>
</script>
</head>
```
7 thường xuất hiện trong một trang web
```
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>My Web Page</title>
<script>
  alert('hello world!');
</script>
</head>
```
1, 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.
Trực tiếp bên dưới ____69, nhập mã sau:
```
<script>
```
9, type the following code:
```
<script>
document.write('<p>Hello world!</p>');
</script>
```
Giống như hàm
```
<script>
```
3,
```
alert('hello world');
```
1 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
```
alert('hello world');
```
2 được thêm vào trang: thẻ đoạn văn và hai từ.
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.

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: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.

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ẻ

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>My Web Page</title>
<script>
</script>
</head>

7 thường xuất hiện trong một trang web

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>My Web Page</title>
<script>
  alert('hello world!');
</script>
</head>

1, 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.

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ẻ
```
alert('hello world');
```
3, 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.
Nhấp vào đường trống giữa các thẻ
```
alert('hello world');
```
4 và đóng các thẻ
<script>
2 gần đầu trang và gõ:
```
alert('hello world');
```
4 and closing
```
<script>
```
2 tags near the top of the page, and type:
```
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>My Web Page</title>
<script>
</script>
</head>
```
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.
Nhấn Trả về để tạo một dòng trống mới, sau đó nhập::
```
<script>
```
Thẻ HTML thường di chuyển theo cặp một thẻ mở và đóng. Để đảm bảo rằng bạn không quên đóng một thẻ, nó giúp đóng thẻ ngay sau khi nhập thẻ mở, sau đó điền vào những thứ đi giữa các thẻ.
Nhấn trả về hai lần để tạo hai dòng trống, sau đó nhập::
```
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>My Web Page</title>
<script>
</script>
</head>
```
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.
Nhấp vào dòng trống giữa các thẻ tập lệnh mở và đóng và loại::
```
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>My Web Page</title>
<script>
</script>
</head>
```
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.
Nhấn trả lại để tạo một dòng mới, sau đó nhập::
```
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>My Web Page</title>
<script>
</script>
</head>
```
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.
Nhấn trả về một lần cuối cùng, và sau đó nhập::
```
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>My Web Page</title>
<script>
</script>
</head>
```
5
Mã này đóng mã JavaScript, giống như một thẻ
```
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>My Web Page</title>
<script>
</script>
</head>
```
8 đó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:
```
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>My Web Page</title>
<script>
</script>
</head>
```
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).
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ú

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.

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

Thẻ HTML thường di chuyển theo cặp một thẻ mở và đóng. Để đảm bảo rằng bạn không quên đóng một thẻ, nó giúp đóng thẻ ngay sau khi nhập thẻ mở, sau đó điền vào những thứ đi giữa các thẻ.

Nhấn trả về hai lần để tạo hai dòng trống, sau đó nhập:

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ì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ì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õ ________ 77, 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
```
alert('hello world');
```
7—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.
Thiếu dấu ngoặc kép. Một chuỗi là một loạt các ký tự được đặt bởi các dấu ngoặc kép (bạn sẽ tìm hiểu về những điều này chi tiết hơn về các loại dữ liệu). Ví dụ: ‘Xin chào là một chuỗi trong mã
```
alert('hello world');
```
8. Nó dễ dàng quên đi dấu ngoặc kép mở hoặc đóng. Nó cũng dễ dàng trộn lẫn các dấu ngoặc kép đó; Chẳng hạn, bằng cách ghép nối một quote đơn với một trích dẫn kép như thế này:
alert('hello world');
9. Trong cả hai trường hợp, bạn có thể sẽ thấy một cú pháp chưa được thực hiện của người Viking: lỗi không mong muốn lỗi bất hợp pháp.. A string is a series of characters enclosed by quote marks (you’ll learn about these in greater detail on Types of Data). For example, ‘hello’ is a string in the code
```
alert('hello world');
```
8. It’s easy to forget either the opening or closing quote mark. It’s also easy to mix up those quote marks; for instance, by pairing a single-quote with a double quote like this:
```
alert('hello world');
```
9. In either case, you’ll probably see an “Uncaught SyntaxError: Unexpected token ILLEGAL” error.
Các lệnh sai chính tả. Nếu bạn viết sai một lệnh JavaScript, thì ____________ 80, bạn sẽ gặp một lỗi khi nói rằng lệnh sai chính tả được xác định: ví dụ, tham chiếu của UNCAUGE: Aler không được xác định, nếu bạn viết sai lệnh
```
<script>
```
5. 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
<link href="../_css/site.css" rel="stylesheet"> <script> alert('hello world'); </script> </head>
2 và
<link href="../_css/site.css" rel="stylesheet"> <script> alert('hello world'); </script> </head>
3 trong hướng dẫn trước đó). Trong trường hợp này, bạn sẽ nhận được một lỗi khác. Ví dụ: nếu bạn đã nhầm lẫn, ẩn giấu là một người ẩn trong bước 6 về việc đính kèm một tệp JavaScript bên ngoài, Chrome sẽ cung cấp cho bạn lỗi này: Kiểu Uncaught Kiểu: đối tượng [đối tượng] không có phương thức nào ẩn.. If you misspell a JavaScript command—
```
<link href="../_css/site.css" rel="stylesheet">
<script>
  alert('hello world');
</script>
</head>
```
0—you’ll get an error saying that the misspelled command isn’t defined: for example, “Uncaught ReferenceError: aler is not defined,” if you misspell the
```
<script>
```
5 command. You’ll also encounter problems when you misspell jQuery functions (like the
```
<link href="../_css/site.css" rel="stylesheet">
<script>
  alert('hello world');
</script>
</head>
```
2 and
```
<link href="../_css/site.css" rel="stylesheet">
<script>
  alert('hello world');
</script>
</head>
```
3 functions in the previous tutorial). In this case, you’ll get a different error. For example, if you mistyped “hide” as “hid” in step 6 on Attaching an External JavaScript File, Chrome will give you this error: “Uncaught TypeError: Object [object Object] has no method ‘hid’”.
Lỗi cú pháp. Thỉnh thoảng, Chrome không biết bạn đang cố gắng làm gì và cung cấp thông báo lỗi chung này. Lỗi cú pháp biểu thị một số lỗi trong mã của bạn. Nó có thể không phải là một lỗi đánh máy, nhưng bạn có thể đã kết hợp một hoặc nhiều tuyên bố của JavaScript theo cách được cho phép. Trong trường hợp này, bạn cần xem xét kỹ dòng lỗi mà lỗi được tìm thấy và cố gắng tìm ra sai lầm bạn đã mắc phải. Thật không may, các loại lỗi này thường yêu cầu kinh nghiệm và hiểu về ngôn ngữ JavaScript để sửa chữa.. Occasionally, Chrome has no idea what you were trying to do and provides this generic error message. A syntax error represents some mistake in your code. It may not be a typo, but you may have put together one or more statements of JavaScript in a way that isn’t allowed. In this case, you need to look closely at the line where the error was found and try to figure out what mistake you made. Unfortunately, these types of errors often require experience with and understanding of the JavaScript language to fix.

Như bạn có thể thấy từ danh sách trước đó, nhiều lỗi mà bạn sẽ thực hiện đơn giản liên quan đến việc quên gõ một trong một cặp dấu chấm câu giống như dấu ngoặc đơn hoặc dấu ngoặc đơn. May mắn thay, những điều này rất dễ sửa chữa và khi bạn có thêm lập trình kinh nghiệm, cuối cùng bạn sẽ ngừng làm cho chúng gần như hoàn toàn (không có lập trình viên là hoàn hảo).

Bảng điều khiển Internet Explorer

Internet Explorer cung cấp một bộ công cụ phát triển tinh vi để không chỉ xem các lỗi JavaScript mà còn phân tích CSS, HTML và chuyển thông tin qua mạng. Khi mở, cửa sổ công cụ nhà phát triển xuất hiện ở nửa dưới của cửa sổ trình duyệt. Nhấn phím F12 để mở các công cụ nhà phát triển và nhấn lại để đóng chúng. Bạn sẽ tìm thấy các lỗi JavaScript được liệt kê trong tab Console (được khoanh tròn trong Hình & NBSP; 1-7).

Ghi chú

Nếu trước tiên bạn mở một trang web và sau đó mở bảng điều khiển Internet Explorer, bạn đã giành được bất kỳ lỗi nào (ngay cả khi có một số). Bạn cần tải lại trang để xem bất kỳ lỗi nào. Khi bảng điều khiển được mở, bạn sẽ thấy các lỗi trên các trang bạn truy cập khi chúng tải.

Bảng điều khiển IE IE hiển thị các thông báo lỗi tương tự như các thông báo được mô tả trước đó cho Chrome. Tuy nhiên, đôi khi họ rất khác nhau. Ví dụ: hằng số chuỗi chưa kết thúc của IE, là một lỗi bất hợp pháp bất hợp pháp của người Viking trong Chrome. Giống như Chrome, Internet Explorer xác định dòng mã trong tệp HTML nơi xảy ra lỗi, bạn có thể nhấp để xem mã thực tế xảy ra lỗi.

Hình & nbsp; 1-7. & NBSP; Các công cụ phát triển trình duyệt Internet Explorer cung cấp quyền truy cập vào các lỗi JavaScript xảy ra trên một trang, cũng như rất nhiều thông tin khác.

Bảng điều khiển web JavaScript Firefox

Trình duyệt Firefox Mozilla cũng cung cấp cho bạn một bảng điều khiển để xem các lỗi JavaScript. Để mở bảng điều khiển JavaScript, trên Windows, nhấp vào tab Firefox ở phía trên bên trái của cửa sổ Trình duyệt và chọn Nhà phát triển web → Bảng điều khiển web. Trên máy Mac, chọn Công cụ → Nhà phát triển web → Bảng điều khiển web. Hoặc sử dụng các phím tắt Ctrl+Shift+I (Windows) hoặc ⌘-exption-K (mac).

Khi bảng điều khiển mở, bạn sẽ thấy bất kỳ lỗi JavaScript nào trên trang. Thật không may, bảng điều khiển web Firefox, giống như một ống dữ liệu lửa hơn là một phóng viên lỗi JavaScript đơn giản (Hình & NBSP; 1-8). Điều đó bởi vì nó cung cấp thông tin về tất cả các loại: các tệp được tải xuống, lỗi CSS và HTML, v.v.

Ghi chú

Nếu trước tiên bạn mở một trang web và sau đó mở bảng điều khiển Internet Explorer, bạn đã giành được bất kỳ lỗi nào (ngay cả khi có một số). Bạn cần tải lại trang để xem bất kỳ lỗi nào. Khi bảng điều khiển được mở, bạn sẽ thấy các lỗi trên các trang bạn truy cập khi chúng tải.

Bảng điều khiển IE IE hiển thị các thông báo lỗi tương tự như các thông báo được mô tả trước đó cho Chrome. Tuy nhiên, đôi khi họ rất khác nhau. Ví dụ: hằng số chuỗi chưa kết thúc của IE, là một lỗi bất hợp pháp bất hợp pháp của người Viking trong Chrome. Giống như Chrome, Internet Explorer xác định dòng mã trong tệp HTML nơi xảy ra lỗi, bạn có thể nhấp để xem mã thực tế xảy ra lỗi.

Bảng điều khiển lỗi safari

Bảng điều khiển lỗi Safari, có sẵn từ menu Phát triển: Phát triển → Hiển thị bảng điều khiển lỗi (hoặc, nếu bạn trên máy Mac, hãy sử dụng phím tắt bàn phím tùy chọn-C). Tuy nhiên, menu phát triển thường được bật khi Safari được cài đặt, do đó, có một vài bước để đến bảng điều khiển JavaScript.

Để bật menu phát triển, trước tiên bạn cần truy cập vào cửa sổ Tùy chọn. Chọn Safari → Tùy chọn. Khi cửa sổ Tùy chọn mở, nhấp vào nút nâng cao. Bật menu Hiển thị phát triển trong hộp menu Bar và đóng cửa sổ Tùy chọn.

Khi bạn khởi động lại Safari, menu phát triển sẽ xuất hiện giữa dấu trang và menu cửa sổ trong thanh menu ở đầu màn hình. Chọn Phát triển → Hiển thị bảng điều khiển lỗi để mở bảng điều khiển (xem Hình & NBSP; 1-9).

Hình & nbsp; 1-9. & NBSP; Bảng điều khiển lỗi Safari hiển thị tên của lỗi JavaScript, tên tệp (và vị trí) và dòng mà Safari gặp phải lỗi. Mỗi cửa sổ Tab hoặc Trình duyệt có bảng điều khiển lỗi riêng, vì vậy nếu bạn đã mở bảng điều khiển cho một tab, bạn cần chọn phát triển → hiển thị bảng điều khiển lỗi nếu bạn muốn thấy lỗi cho một tab hoặc cửa sổ khác. Ngoài ra, nếu bạn tải lại một trang, Safari không xóa bất kỳ lỗi nào trước đó trên trang đó, vì vậy bạn có thể kết thúc với một danh sách dài các lỗi cũ, cố định khi bạn làm việc trên một trang và tải lại nó. Câu trả lời: Nhấp vào biểu tượng rác (được khoanh tròn) để xóa danh sách các lỗi cũ, sau đó tải lại trang.

Ghi chú

Nếu bạn ở trên Windows, bạn có thể có một phiên bản cũ của trình duyệt Safari. Apple đã ngừng cập nhật Safari cho Windows, vì vậy thông tin Safari được hiển thị ở đây có thể không áp dụng cho bạn.

Nhận JavaScript & JQuery: Hướng dẫn mất tích, phiên bản thứ 3 bây giờ với nền tảng học tập O hèReilly.learning platform.

Các thành viên của O hèReilly trải nghiệm đào tạo trực tuyến trực tiếp, cộng với sách, video và nội dung kỹ thuật số từ gần 200 nhà xuất bản.nearly 200 publishers.

Tôi tạo JavaScript ở đâu?

Để viết JavaScript, bạn cần trình duyệt web và trình chỉnh sửa văn bản hoặc trình soạn thảo HTML. Khi bạn có phần mềm tại chỗ, 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 với trình soạn thảo văn bản/HTML của bạn.a web browser and either a text editor or an HTML editor. Once you have the software in place, you can begin writing JavaScript code. To add JavaScript code to an HTML file, create or open an HTML file with your text/HTML editor.

Làm thế nào tạo tệp JS trong Windows?

JS trên Windows cho người mới bắt đầu |Microsoft learn ...

Mở dòng lệnh của bạn và tạo một thư mục mới: MKDIR Hellonode, sau đó nhập thư mục: CD Hellonode ..

Tạo một tệp JavaScript có tên "App.js" với một biến có tên là "MSG" bên trong: Echo var MSG> app.js ..

Mở thư mục và ứng dụng của bạn ..

Các tệp JavaScript nên đi đâu?

Để có hiệu suất tốt nhất, hãy đặt các tệp JavaScript của bạn ở cuối trang HTML bạn đang phục vụ.Để đảm bảo rằng mọi thứ được đặt khi bạn cố gắng sử dụng nó, chỉ thực hiện sau khi DOM đã sẵn sàng (có nhiều biến thể của điều này, lời khuyên của tôi: sử dụng thư viện JavaScript).Lưu câu trả lời này.at the BOTTOM of the HTML page you are serving. To ensure that everything is set when you try to use it, execute only after the DOM is ready (there are multiple variations of this, my advice: Use a JavaScript Library). Save this answer.

Tệp JavaScript được lưu trữ ở đâu?

Các tệp JavaScript được lưu trữ trên máy chủ và được gửi đến trình duyệt.Chỉ có trình duyệt làm một cái gì đó với mã.Bạn không thể làm điều gì đó ở phía máy chủ với JavaScript nếu bạn không có mặt sau.Lưu câu trả lời này.on the server and sent to the browser. Only the browser does something with the code. You cannot do something on the server side with JavaScript if you don't have a back end. Save this answer.

programming javascript Create JavaScript file Script> tag HTML