JS Study Notes (1) EN

study note. study from: (https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/First_steps/What_is_JavaScript)

I. What is JS?

High-level definition:

1. With JavaScript, the information displayed on a web page is no longer simple static content, but real-time updated content (i.e., interactive maps, scrolling videos).

2. The hierarchy of HTML/CSS/JS:

• HTML marks up the text, giving it structure and purpose.
• CSS is used for decoration, making the text look better.
• JavaScript is used to implement dynamic behavior.

II. What can it do?

2.1 It can handle common programming features

1. Store useful values in variables, e.g., ask the user to input a variable name and store that name in the name variable.
2. Manipulate a piece of text, e.g., combine two strings.
3. Run code in response to specific events occurring on the web page.

2.2 Exciting features

1. Application Programming Interfaces (APIs)

APIs fall into two categories:

• Browser APIs:

  1. The Document Object Model (DOM), e.g., a page displays a pop-up or some new content.
  2. Geolocation API: Get geographic information.
  3. Media APIs: Use multimedia to play audio and video directly on the web page.

• Third-party APIs - not built into the browser by default, generally obtained from the web:

  1. Twitter API: Display the latest tweets on a website.
  2. Google Maps API: Embed customized maps on a website.

III. What does JS do on the page? What happens behind the scenes when JS runs?

3.1 The process

When a browser reads a web page, the code (HTML/CSS/JS) will be executed in a runtime environment (the browser tab).

• Note: The code in a web document needs to be loaded and executed in the order it appears on the page. For example, if JavaScript loads and runs before the HTML and CSS it's intended to modify, errors may occur.
• The code in each tab runs independently. The code in one tab does not affect the other.

3.2 The order in which JS runs

• An object must exist before it is referenced:

const para = document.querySelector("p");

para.addEventListener("click", updateName);

function updateName() {
  const name = prompt("Enter a new name:");
  para.textContent = `Player 1: ${name}`;
}

For example, when calling the third line of code, the first line must have already executed.

3.3 Compiling code vs. Interpreting code

1. The difference:

Interpreted language:

• In an interpreted language, code runs top-to-bottom and returns the result immediately.
• The code is received and processed directly in its text format by the browser, without needing to be converted into another form.

Compiled language:

• The code needs to be converted/compiled into another form before it can run.
• For example, C/C++ is first compiled into machine code, and then run by the computer.
• The program will run in a binary format (generated from the program's source code).

2. What is JS?

• JavaScript is a lightweight interpreted language.
• The browser receives the JavaScript code and runs it in its original text format. All JavaScript translators use a technique called just-in-time compiling.
• JavaScript will be compiled into binary format. However, since the compilation happens at runtime rather than before, JavaScript is still considered an interpreted language.

3. Server-side code vs. Client-side code (depending on where the code runs)

JavaScript can be both server-side code and client-side code.

• Client-side code is code that runs on the user's computer, e.g., when browsing a web page, the client-side code for that page is downloaded, and the browser runs and displays it.
• Server-side code runs on the server, and the result is downloaded and displayed by the browser.