Bạn có thể tạo tệp html bằng javascript không?

Bây giờ là lúc để có được bàn tay của bạn bẩn. Bài viết này cung cấp phần giới thiệu cơ bản về viết mã bằng JavaScript

Giới thiệu

Trong bài viết này của Chương trình giảng dạy về tiêu chuẩn web, chúng tôi sẽ đề cập đến những điều cơ bản về JavaScript — cách thức và vị trí sử dụng nó, những vấn đề cần tránh và những điều cơ bản chung để giúp bạn bắt đầu hành trình trở thành nhà phát triển JavaScript hàng đầu

JavaScript là gì và bạn thực thi nó như thế nào?

JavaScript là ngôn ngữ dựa trên văn bản không cần bất kỳ chuyển đổi nào trước khi được thực thi. Các ngôn ngữ khác như Java và C++ cần được biên dịch để có thể thực thi được nhưng JavaScript được thực thi ngay lập tức bởi một loại chương trình diễn giải mã được gọi là trình phân tích cú pháp (gần như tất cả các trình duyệt web đều chứa trình phân tích cú pháp JavaScript)

Để thực thi JavaScript trong trình duyệt, bạn có hai tùy chọn — đặt nó bên trong phần tử

8 ở bất kỳ đâu bên trong tài liệu HTML hoặc đặt nó bên trong tệp JavaScript bên ngoài (với. js) và sau đó tham chiếu tệp đó bên trong tài liệu HTML bằng cách sử dụng phần tử

8 trống với thuộc tính

1. Chúng ta sẽ xem xét cả hai phương pháp này trong phần này

JavaScript không cần phải ở bên trong trình duyệt. Để chạy JavaScript trong môi trường bảng điều khiển, vui lòng xem Mozilla Rhino; . js

Bao gồm JavaScript của bạn bên trong tài liệu HTML của bạn

Việc đưa JavaScript cơ bản nhất vào trong trang HTML của bạn sẽ giống như thế này

Bạn có thể đặt nó ở bất kỳ đâu trong tài liệu của mình và nó sẽ thực thi, nhưng một số nơi chắc chắn tốt hơn những nơi khác — xem phần Nơi đặt JavaScript để được hướng dẫn về điều này

Vì có thể có một số loại tập lệnh khác nhau có sẵn để sử dụng trên các trang web trong tương lai, bạn nên thêm tên của tập lệnh bạn đang sử dụng làm loại MIME

Ghi chú. Bạn sẽ tìm thấy các ví dụ tập lệnh trên web có thuộc tính

2. Đây không phải là một phần của bất kỳ tiêu chuẩn nào và hoàn toàn vô dụng; . Đây là một sự trở lại của những ngày xưa tồi tệ, khi VBScript còn được sử dụng phổ biến trên các trang web. Tuy nhiên, việc sử dụng VBScript đã chết vì nó chỉ hoạt động trong IE

Trước đây, cần phải nhận xét JavaScript bằng nhận xét HTML để ngăn trình duyệt hiển thị mã dưới dạng HTML. Vì điều này chỉ áp dụng cho các trình duyệt rất cũ nên bạn không cần bận tâm đến điều đó nữa. Tuy nhiên, nếu bạn đang sử dụng XHTML nghiêm ngặt làm DOCTYPE của mình, bạn cần gửi bất kỳ JavaScript nào trong khối CDATA để làm cho nó hợp lệ (đừng lo lắng về lý do tại sao - nó không thực sự quan trọng ở giai đoạn này trong quá trình học của bạn)

Tuy nhiên, đối với các tài liệu XHTML nghiêm ngặt, sẽ hợp lý hơn nhiều nếu không nhúng bất kỳ JavaScript nào mà thay vào đó giữ nó trong một tài liệu bên ngoài

Liên kết với tệp JavaScript bên ngoài

Để liên kết với một JavaScript bên ngoài (trên cùng một máy chủ hoặc bất kỳ nơi nào trên internet), tất cả những gì bạn phải làm là thêm thuộc tính

1 vào thành phần tập lệnh của mình

Khi gặp phần tử này trong một trang, các trình duyệt sẽ tải tệp

4 và thực thi nó. Bất kỳ nội dung nào bên trong phần tử

8 sẽ bị bỏ qua khi bạn cung cấp thuộc tính

1. Ví dụ sau sẽ tải tệp

4 và thực thi mã trong đó, nhưng hoàn toàn không thực thi cảnh báo bên trong phần tử

8

Giữ mã của bạn trong một tệp JavaScript bên ngoài rất có ý nghĩa

• Bạn có thể áp dụng cùng chức năng JavaScript cho một số tài liệu HTML mà vẫn dễ dàng bảo trì. nếu có một thay đổi mong muốn về chức năng, tất cả những gì bạn cần làm là thay đổi một tệp duy nhất
• JavaScript của bạn sẽ được trình duyệt lưu vào bộ nhớ cache. Bộ nhớ đệm có nghĩa là các trình duyệt sẽ lấy một bản sao JavaScript của bạn và lưu trữ nó trên máy tính của khách truy cập đang lướt trên trang web của bạn. Lần tới khi người dùng này tải cùng một tập lệnh, tập lệnh đó sẽ không được lấy từ máy chủ của bạn mà từ máy tính của chính họ — do đó tải nhanh hơn nhiều
• Bạn có thể dễ dàng tìm thấy tập lệnh của mình nếu cần sửa đổi tập lệnh đó, tránh phải quét qua các tài liệu HTML dài để tìm nơi khắc phục sự cố
• Việc sửa lỗi trở nên dễ dàng hơn vì công cụ sửa lỗi hoặc bảng điều khiển lỗi sẽ cho bạn biết tệp nào chứa lỗi và báo cáo số dòng một cách đáng tin cậy

Bạn có thể thêm bao nhiêu tệp JavaScript tùy thích vào một tài liệu, nhưng có một số cân nhắc cần thực hiện trước khi thực hiện theo lộ trình đó

JavaScript và hiệu suất trình duyệt

Việc chia nhiều JavaScript thành các tệp khác nhau, mỗi tệp xử lý một tác vụ tại một thời điểm, là một ý tưởng tuyệt vời để giữ cho chức năng của bạn dễ bảo trì và cho phép sửa lỗi nhanh chóng. Ví dụ: bạn có thể có một số khối tập lệnh như thế này

1

Tuy nhiên, lợi ích phát triển của điều này bị giảm đi do ảnh hưởng của điều này đối với hiệu suất của tài liệu của bạn. Điều này hơi khác nhau giữa các trình duyệt nhưng trường hợp xấu nhất (thật đáng buồn vẫn là trình duyệt được sử dụng nhiều thứ hai) sẽ như sau

• Mỗi khi trình duyệt gặp phần tử
  8, nó sẽ tạm dừng kết xuất (hiển thị) tài liệu
• Sau đó, nó sẽ tải tệp JavaScript được xác định trong thuộc tính
  1 (nếu bạn sử dụng tập lệnh trên máy chủ khác, bạn cũng phải đợi cho đến khi trình duyệt tìm thấy máy chủ đó)
• Sau đó, nó sẽ thực thi tập lệnh trước khi tiếp tục truy cập tập lệnh tiếp theo

Tất cả điều này có nghĩa là việc hiển thị trang web của bạn bị chậm lại cho đến khi tất cả các bước này xảy ra đối với tất cả các tập lệnh mà bạn đưa vào. Điều này có thể trở nên khó chịu cho khách truy cập của bạn

Một cách giải quyết vấn đề này là sử dụng tập lệnh phụ trợ để tạo một tệp từ tất cả các tệp bạn sử dụng. Bằng cách đó, bạn có được lợi ích là giữ cho việc bảo trì dễ dàng đồng thời cắt giảm sự chậm trễ khi hiển thị trang web của bạn. Có một số tập lệnh như thế này trên web — một trong số chúng được viết bằng PHP và có sẵn từ Ed Eliot

Độ trễ hiển thị cũng xác định nơi bạn muốn đặt JavaScript của mình trong tài liệu

Đặt JavaScript ở đâu

Về mặt kỹ thuật, bạn có thể đặt JavaScript ở bất cứ đâu trong tài liệu của mình. Quyết định bạn phải đưa ra là cân nhắc hiệu suất với việc giúp các nhà phát triển dễ dàng tìm thấy tập lệnh của bạn và đảm bảo rằng các cải tiến JavaScript của bạn hoạt động ngay lập tức cho khách truy cập của bạn

Phương pháp hay nhất cổ điển để đặt tập lệnh là trong

1 của tài liệu

Điều này có lợi ích là vị trí có thể dự đoán được của các tập lệnh — nhà phát triển biết tìm chúng ở đâu. Nó cũng có lợi ích là đảm bảo rằng tất cả JavaScript đã được tải và thực thi trước khi tài liệu được hiển thị

Hạn chế là tập lệnh của bạn trì hoãn việc hiển thị tài liệu và tập lệnh không có quyền truy cập vào HTML trong tài liệu. Do đó, bạn cần trì hoãn việc thực thi bất kỳ tập lệnh nào làm thay đổi HTML của tài liệu cho đến khi tài liệu tải xong. Điều này có thể được thực hiện với trình xử lý onload hoặc một trong các giải pháp DOMready hoặc contentAvailable khác nhau hiện có trên web — không giải pháp nào trong số đó là chống đạn và hầu hết đều dựa vào các bản hack dành riêng cho trình duyệt

Thay vào đó, các chuyên gia về hiệu suất đã bắt đầu ủng hộ việc đặt JavaScript của bạn ở cuối

2

Điều này có lợi cho JavaScript của bạn bằng cách không trì hoãn việc hiển thị HTML và cũng có nghĩa là bất kỳ HTML nào bạn muốn thay đổi bằng JavaScript đều đã có sẵn

Bạn có thể nhầm lẫn các nhà phát triển đang duy trì mã của bạn vì cách làm này chưa phổ biến. Một nhược điểm khác — rắc rối hơn — là HTML có sẵn trước khi JavaScript của bạn được tải. Mặc dù đây chính xác là những gì bạn muốn đạt được, nhưng điều đó cũng có nghĩa là khách truy cập sẽ bắt đầu tương tác với giao diện của bạn trước khi bạn có cơ hội thay đổi nó. Ví dụ: bạn muốn xác thực biểu mẫu bằng JavaScript trước khi biểu mẫu được gửi tới máy chủ — biểu mẫu có thể được gửi trước khi tập lệnh được tải. Tuy nhiên, nếu bạn viết kịch bản của mình như một sự cải tiến đơn thuần (thay vì dựa vào nó) thì đó không phải là vấn đề - chỉ là một sự khó chịu

Tùy thuộc vào bạn để chọn những gì phù hợp với mục đích của trang web của bạn;

Dù bạn làm gì, hãy đảm bảo rằng thứ tự của các tập lệnh của bạn là đúng, vì các trình duyệt sẽ tải và phân tích chúng lần lượt từng cái một. Điều này cũng đưa chúng ta đến một điều khác cần xem xét khi sử dụng JavaScript

Bảo mật JavaScript và việc thiếu nó

Chúng ta chưa đủ mệt mỏi sao. JavaScript là một ngôn ngữ tuyệt vời và có thể giúp bạn xây dựng các trang web và ứng dụng có tính tương tác cao và đẹp mắt, nhưng vấn đề mà nó gặp phải là vấn đề bảo mật. Nói tóm lại, không có mô hình bảo mật nào trong JavaScript và bạn không nên bảo vệ, mã hóa, bảo mật hoặc lưu trữ bất kỳ thứ gì quan trọng hoặc bí mật với nó

Mọi tập lệnh trên trang đều có các quyền giống nhau — tất cả chúng đều có thể truy cập lẫn nhau, đọc các biến, truy cập các chức năng và cũng có thể ghi đè lẫn nhau. Nếu bạn có một hàm có tên là

4 trong tập lệnh được bao gồm đầu tiên của mình và một hàm khác trong tập lệnh được bao gồm cuối cùng của bạn, thì hàm ban đầu sẽ bị ghi đè. Chúng ta sẽ quay lại vấn đề này trong bài viết về các phương pháp hay nhất của khóa học này

Tất cả những điều này sẽ không thành vấn đề nếu bạn không bao giờ sử dụng tập lệnh của người khác. Tuy nhiên, nhận thấy rằng hầu hết quảng cáo trực tuyến và theo dõi thống kê được thực hiện bằng JavaScript, điều này sẽ không xảy ra — bạn sẽ luôn sử dụng các tập lệnh của bên thứ ba

Tập lệnh cũng có thể đọc cookie; . Cuối cùng, JavaScript có thể dễ dàng bị tắt nên bạn có thể quên việc bảo vệ JavaScript là một biện pháp bảo mật tốt

JavaScript luôn có sẵn để các nhà phát triển khác đọc và phân tích. Tất nhiên, bạn có thể đóng gói (xóa tất cả các khoảng trắng không cần thiết) và xáo trộn (sử dụng tên hàm và biến ngẫu nhiên) các tập lệnh của mình, nhưng ngay cả những tập lệnh đó cũng có thể được thiết kế ngược; . Tính khả dụng của mã nguồn cũng như khả năng đọc và phân tích nó có thể là yếu tố chính dẫn đến sự thành công của JavaScript - trong nhiều năm, chúng tôi đã học được bằng cách xem qua các giải pháp của người khác. Ngày nay, may mắn là điều này đã kết thúc vì có sẵn những cuốn sách hay và hướng dẫn

Trong khi đóng gói và làm xáo trộn là vô dụng như các biện pháp bảo mật, chúng thường được thực hiện trên các tập lệnh vừa và lớn trước khi mã được đưa trực tiếp lên web như một phần của quy trình xuất bản. Điều này giúp cắt giảm lượng băng thông cần thiết để phục vụ trang web cho người dùng của nó. Tiết kiệm một vài byte ở đây và ở đó có vẻ không đáng kể trên blog của bạn về mèo con, nhưng nó có thể tăng thêm khoản tiết kiệm lớn khi bạn xử lý một trang web có số liệu sử dụng như của google. com

Kỹ thuật để tránh

Vấn đề lớn nhất khi học JavaScript là có một lượng lớn thông tin lỗi thời và có thể nguy hiểm ngoài kia. Điều này đặc biệt gây khó chịu vì rất nhiều thông tin này được trình bày rất tốt và mang lại cho nhiều người mới bắt đầu cảm giác “chiến thắng nhanh chóng” khi biết JavaScript bằng cách sao chép và dán một số mã làm sẵn

Vì môi trường JavaScript đang được áp dụng còn rất nhiều điều chưa biết (người dùng có thể có bất kỳ thiết lập nào) và chúng tôi không biết quyết định nào dẫn đến việc mã chúng tôi tìm thấy trên web được tạo theo một cách cụ thể, chúng tôi không nên chỉ tay vào các giải pháp. Tuy nhiên, những ý tưởng sau đây đã là quá khứ và bạn chỉ nên sử dụng chúng như là phương sách cuối cùng nếu bạn cần chúng để hỗ trợ các trình duyệt thực sự cũ và tồi