Hướng dẫn how does javascript works on a website? - javascript hoạt động như thế nào trên một trang web?

JavaScript đã trở thành một yếu tố chính trong phát triển web hiện đại. Ngôn ngữ mạnh mẽ này đã phát triển thành một công cụ thiết yếu cho bất kỳ nhà phát triển web nào hiểu được.

JavaScript có các tính năng đặc biệt làm cho nó khác với các ngôn ngữ lập trình truyền thống. Chúng ta sẽ đào sâu vào những gì nó là, nó hoạt động như thế nào và những gì bạn có thể làm với nó. Hãy phá vỡ nó.

JavaScript là gì?

JavaScript là ngôn ngữ kịch bản cho web. Nó là một ngôn ngữ được giải thích, có nghĩa là nó không cần một trình biên dịch để dịch mã của nó như C hoặc C ++. Mã JavaScript chạy trực tiếp trong trình duyệt web.

Phiên bản mới nhất của ngôn ngữ là Ecmascript 2018 được phát hành vào tháng 6 năm 2018.

JavaScript hoạt động với HTML và CSS để xây dựng các ứng dụng web hoặc trang web. JavaScript được hỗ trợ bởi hầu hết các trình duyệt web hiện đại như Google Chrome, Firefox, Safari, Microsoft Edge, Opera, v.v. Hầu hết các trình duyệt di động cho Android và iPhone hiện cũng hỗ trợ JavaScript.

JavaScript kiểm soát các yếu tố động của các trang web. Nó hoạt động trong các trình duyệt web và gần đây hơn, trên các máy chủ web. Giao diện lập trình ứng dụng (API) cũng được JavaScript hỗ trợ, cung cấp cho bạn nhiều chức năng hơn.

Hiểu tất cả các cách mà JavaScript hoạt động dễ dàng hơn một chút khi bạn hiểu cách thức lập trình web hoạt động, vì vậy hãy tìm hiểu thêm.

Khối xây dựng ứng dụng web

Có ba thành phần xây dựng các trang web và ứng dụng: Ngôn ngữ đánh dấu siêu văn bản (HTML), Bảng kiểu xếp tầng (CSS) và JavaScript. Mỗi người có một vai trò trong việc tạo một ứng dụng web.

• HTML là một ngôn ngữ đánh dấu tạo ra bộ xương của trang web. Tất cả các đoạn, phần, hình ảnh, tiêu đề và văn bản được viết bằng HTML. Nội dung xuất hiện trên trang web theo thứ tự chúng được viết bằng HTML. is a markup language that creates the skeleton of the web page. All the paragraphs, sections, images, headings and text are written in HTML. The content appears on the website in the order they are written in HTML.
• CSS kiểm soát phong cách và các khía cạnh bổ sung của bố cục. CSS được sử dụng để tạo thiết kế trang web tạo ra màu sắc, phông chữ, cột, đường viền, v.v. Nó đưa trang web từ các yếu tố văn bản đơn giản đến các thiết kế đầy màu sắc. controls the style and the additional aspects of the layout. CSS is used to create the design of the website creating the colors, fonts, columns, borders, etc. It takes the website from plain text elements to colorful designs.
• Yếu tố thứ ba là JavaScript. HTML và CSS tạo ra cấu trúc, nhưng họ không làm gì từ đó. JavaScript tạo hoạt động động trên ứng dụng của bạn. Kịch bản trong JavaScript là những gì kiểm soát các chức năng khi nhấp vào các nút, cách các biểu mẫu mật khẩu được xác thực, cách kiểm soát phương tiện.JavaScript. HTML and CSS create the structure, but they don't do anything from there. JavaScript creates dynamic activity on your app. Scripting in JavaScript is what controls functions when buttons are clicked, how password forms are authenticated, how media is controlled.

Tất cả ba phần hoạt động hài hòa với nhau để tạo các ứng dụng quy mô đầy đủ. Sẽ là một ý tưởng tốt để tìm hiểu thêm về HTML và CSS nếu bạn không hoàn toàn thoải mái với họ.

JavaScript hoạt động như thế nào?

Trước khi viết JavaScript, điều quan trọng là phải biết nó hoạt động như thế nào dưới mui xe. Có hai phần quan trọng để tìm hiểu về: Trình duyệt web hoạt động như thế nào và mô hình đối tượng tài liệu (DOM).

Trình duyệt web tải một trang web, phân tích HTML và tạo ra cái được gọi là mô hình đối tượng tài liệu (DOM) từ nội dung. DOM trình bày một chế độ xem trực tiếp của trang web với mã JavaScript của bạn.

Sau đó, trình duyệt sẽ lấy mọi thứ được liên kết với HTML, như các tệp hình ảnh và CSS. Thông tin CSS đến từ trình phân tích cú pháp CSS.

HTML và CSS được DOM kết hợp với nhau để tạo trang web trước. Sau đó, động cơ JavaScript của trình duyệt tải các tệp JavaScript và mã nội tuyến nhưng không chạy mã ngay lập tức. Nó chờ HTML và CSS hoàn thành tải.

Khi điều này được thực hiện, JavaScript được thực thi theo thứ tự mã được viết. Điều này dẫn đến việc DOM được cập nhật bởi mã JavaScript và được trình duyệt hiển thị.

Thứ tự ở đây là quan trọng. Nếu JavaScript không chờ đợi HTML và CSS kết thúc, nó sẽ không thể thay đổi các thành phần DOM.

Tôi có thể làm gì với JavaScript?

JavaScript là một ngôn ngữ lập trình chính thức có thể làm hầu hết mọi thứ mà một ngôn ngữ thông thường như Python có thể làm. Bao gồm các:

• Khai báo các biến.
• Lưu trữ và truy xuất các giá trị.
• Xác định và gọi các chức năng, bao gồm các hàm mũi tên.
• Xác định các đối tượng và lớp JavaScript.
• Tải và sử dụng các mô -đun bên ngoài.
• Viết các trình xử lý sự kiện phản ứng với các sự kiện nhấp chuột.
• Viết mã máy chủ.
• Và nhiều hơn nữa.

CẢNH BÁO: Vì JavaScript là một ngôn ngữ mạnh mẽ như vậy, nên cũng có thể viết phần mềm độc hại, virus và trình duyệt hack để gây ra cho người dùng. Chúng bao gồm từ ăn cắp cookie trình duyệt, mật khẩu, thẻ tín dụng đến tải vi -rút vào máy tính của bạn. Since JavaScript is such a powerful language, it is also possible to write malware, viruses, and browser hacks to inflict them on the users. These range from stealing browser cookies, passwords, credit cards to downloading viruses onto your computer.

Sử dụng JavaScript

Hãy xem xét một số điều cơ bản của JavaScript với các ví dụ mã.

Khai báo các biến

JavaScript được gõ động, điều đó có nghĩa là bạn không phải khai báo loại biến trong mã của mình.

let num = 5;
let myString = "Hello";
var interestRate = 0.25;

Người vận hành

Phép cộng

12 + 5
>> 17

Phép trừ

20 - 8
>> 12

Phép nhân

5 * 2
>> 10

Phân công

50 / 2
>> 25

Mô đun

45 % 4
>> 1

Mảng

let myArray = [1,2,4,5];
let stringArray = ["hello","world"];

Chức năng

JavaScript có thể viết các chức năng, đây là một hàm đơn giản thêm các số.

function addNumbers(num1,num2){
return num1 + num2;
}
>> addNumbers(10,5);
>> 15

Vòng lặp

JavaScript có thể thực hiện các vòng lặp để lặp, vòng lặp như các vòng và trong khi các vòng lặp.for loops and while loops.

for(let i = 0; i < 3; i++){ 
console.log("echo!"); 
} 
>> echo!
>> echo!
>> echo!

let i = 0;
while(i < 3) { 
console.log("echo!");
i++; 
} 
>> echo!
>> echo!
>> echo!

12 + 5
>> 17

12 + 5
>> 17

Trong một trang web

Cách phổ biến nhất để tải JavaScript trong một trang web là sử dụng thẻ HTML tập lệnh. Tùy thuộc vào yêu cầu của bạn, bạn có thể sử dụng một trong các phương pháp sau.script HTML tag. Depending on your requirements, you can use one of the following methods.

• Tải tệp JavaScript bên ngoài vào trang web như sau: ________ 12
• Bạn có thể chỉ định URL hoàn chỉnh nếu JavaScript đến từ một miền khác từ trang web như sau: ________ 13
• JavaScript có thể được nhúng trực tiếp trong HTML. Đây là một ____

Ngoài các phương pháp này, có nhiều cách tải mã JavaScript theo yêu cầu. Trên thực tế, có các khung dành riêng cho việc tải và chạy các mô -đun JavaScript với các phụ thuộc thích hợp được giải quyết trong thời gian chạy.

Đó là những chủ đề nâng cao hơn, ngay bây giờ bạn đang học những điều cơ bản.

Mẫu đoạn mã JavaScript

Dưới đây là một số mẫu mã JavaScript đơn giản để minh họa cách nó được sử dụng trên các trang web. Đây là những ví dụ về mã hoạt động với DOM.

• Sau đây chọn tất cả các phần tử táo bạo trong tài liệu và đặt màu của đầu tiên thành màu đỏ .________ 15bold elements in the document and sets the color of the first to red.

  12 + 5
  >> 17
  

  5
• Bạn muốn thay đổi hình ảnh trong thẻ IMG? Các cộng sự sau đây là một trình xử lý sự kiện cho sự kiện nhấp vào nút .________ 16img tag? The following associates an event handler for the click event of a button.

  12 + 5
  >> 17
  

  6
• Cập nhật nội dung văn bản của một phần tử (P)? Đặt thuộc tính bên trong của phần tử như được hiển thị: ________ 17p) element? Set the innerHTML property of the element as shown:

  12 + 5
  >> 17
  

  7

Các mẫu mã này chỉ cung cấp một cái nhìn thoáng qua về những gì bạn có thể làm bằng cách sử dụng JavaScript trên trang web của bạn. Có rất nhiều hướng dẫn có thể dạy bạn cách viết mã để bắt đầu bạn. Bạn có thể dùng thử trên bất kỳ trang web nào, ngay cả cái này! Mở bảng điều khiển của bạn và thử một số mã JavaScript.

Bây giờ bạn biết JavaScript làm gì

Hy vọng, phần giới thiệu này đã mang lại một số hiểu biết về JavaScript và khiến bạn hào hứng với lập trình web. Bạn có thể tóm tắt tất cả trong tờ Cheat JavaScript tiện dụng của chúng tôi. Có nhiều hơn nữa để tìm hiểu về JavaScript. Một khi bạn cảm thấy thoải mái hơn tại sao không cố gắng học cách sử dụng mô hình đối tượng tài liệu? Bạn cũng có thể quan tâm đến việc tìm hiểu về TypeScript.