DEV Community: Emmmeline

JS Notes (2) EN

Emmmeline — Wed, 10 Apr 2024 05:57:45 +0000

JavaScript Syntax

After getting a programming task, you can break it down and list out the steps.
JavaScript code is added inside the <script> element at the bottom of the HTML.

<script>
// JS code goes here
</script>

1. Add [variables] to store data

Variables are declared with let

let randomNumber = Math.floor(Math.random() * 100) + 1;

Constants are declared with const

const guesses = document.querySelector(".guesses");

Remember to add semicolons
let vs var: Both let and var can be used to declare variables. var was introduced earlier than let. It's recommended to use let more often because:

This will cause an error:

let myName = "Chris";
let myName = "Bob";

This won't cause an error:

var myName = "Chris";
var myName = "Bob";

But this will lead to confusion in management. The correct way:

let myName = "Chris";
myName = "Bob";

1.1 Variable naming conventions:

//good
age
myAge
init
initialColor
finalOutputValue
audio1
audio2

// not good
1
a
_12
myage
MYAGE
var
Document
skjfndskjfnbdskjfb
thisisareallylongstupidvariablenameman

1.2 Variable types

//Number
let myAge = 17;

// String
let dolphinGoodbye = "So long and thanks for all the fish";

//Boolean
let iAmAlive = true;
let test = 6 < 3;

//Array
let myNameArray = ["Chris", "Bob", "Jim"];
let myNumberArray = [10, 15, 40];

myNameArray[0]; // should return 'Chris'
myNumberArray[2]; // should return 40

//Object
let dog = { name: "Spot", breed: "Dalmatian" };
dog.name;

Unlike Java or C, JavaScript is a dynamic language. This means you don't need to specify what type of data a variable will contain (e.g., number or string). For instance, if you declare a variable and give it a quoted value, the browser will know it's a string.

2. Function

Functions are useful because once you write them, you can run them repeatedly, saving a lot of repetitive code.

function checkGuess() {
  alert("I am a placeholder");
}

3. Operators

+ --> 6+9
- --> 20 - 15
* --> 3 * 7
/ --> 10 / 5

//Comparison operators
=== --> 5 === 2 + 4 // false
!== --> 5!== 2 + 4 // true
<
>

4. Comments

// this is a comment

/*
these are comments
1
2
*/

5. Conditional Statements

let randomNumber = Math.floor(Math.random() * 100) + 1;

const guesses = document.querySelector(".guesses");
const lastResult = document.querySelector(".lastResult");
const lowOrHi = document.querySelector(".lowOrHi");

const guessSubmit = document.querySelector(".guessSubmit");
const guessField = document.querySelector(".guessField");

let guessCount = 1;
let resetButton;
guessField.focus();

function checkGuess() {
/* claim userGuess var 
1. set the userGuess var as the value get from the input
2. use Number() to check it is a number
3. as we did not change the value of the var, we set it as `const`
*/
  const userGuess = Number(guessField.value);
  if (guessCount === 1) {
    guesses.textContent = "Previous guesses: ";
  }
  // add useGuess to the end oof guesses paragram, add a blankbetween two values
  guesses.textContent += `${userGuess} `;

  if (userGuess === randomNumber) {
    lastResult.textContent = "Congratulations! You got it right!";
    lastResult.style.backgroundColor = "green";
    lowOrHi.textContent = "";
    setGameOver();
  } else if (guessCount === 10) {
    lastResult.textContent = "!!!GAME OVER!!!";
    lowOrHi.textContent = "";
    setGameOver();
  } else {
    lastResult.textContent = "Wrong!";
    lastResult.style.backgroundColor = "red";
    if (userGuess < randomNumber) {
      lowOrHi.textContent = "Last guess was too low!";
    } else if (userGuess > randomNumber) {
      lowOrHi.textContent = "Last guess was too high!";
    }
  }

  guessCount++;
  guessField.value = "";
  guessField.focus();
}

guessSubmit.addEventListener("click", checkGuess);

function setGameOver() {
  guessField.disabled = true;
  guessSubmit.disabled = true;
  resetButton = document.createElement("button");
  resetButton.textContent = "Start new game";
  document.body.append(resetButton);
  resetButton.addEventListener("click", resetGame);
}

6. Events

Writing a function alone without calling it won't make anything happen. We want to call it when the button is clicked, so we need to use events.
Events are things that happen in the browser, like clicking a button, loading a page, or playing a video.
We can call code in response to events.
The structure that listens for events to happen is called an Event Listener.
The code that runs in response to an event trigger is called an Event Handler.

guessSubmit.addEventListener("click", checkGuess);

The above code needs to be noted:

The addEventListener() method takes two arguments (values to input):

1) The type of event to listen for (here it's click)

2) The code we want to execute when the event happens (here it's checkGuess())

3) Note that addEventListener() has parentheses, but the checkGuess function does not have parentheses.

About the follow-up of this program

1. Prevent the game from continuing

function setGameOver() {
  guessField.disabled = true;
  guessSubmit.disabled = true;
  resetButton = document.createElement("button");
  resetButton.textContent = "Start new game";
  document.body.append(resetButton);
  resetButton.addEventListener("click", resetGame);
}

The first two lines disable user input and submission, so after the game ends, the user won't be able to input more values.
Reset for a new round of the game.

2. Reset the game

function resetGame() {
  guessCount = 1;
// select all the text from paragraphs, and delete them by iterating them and replacing them with a blank
  const resetParas = document.querySelectorAll(".resultParas p");
  for (const resetPara of resetParas) {
    resetPara.textContent = "";
  }

// delete reset button
  resetButton.parentNode.removeChild(resetButton);

  guessField.disabled = false;
  guessSubmit.disabled = false;
  guessField.value = "";
  guessField.focus();
// delete background color
  lastResult.style.backgroundColor = "white";
// generate a random number
  randomNumber = Math.floor(Math.random() * 100) + 1;
}

7. Loops

Example 1

const fruits = ["apples", "bananas", "cherries"];
for (const fruit of fruits) {
  console.log(fruit);
}

for (const fruit of fruits) means:
Get the first element from fruits.
Set the fruit variable to that element, then run the code between {}.
Get the next element from fruits, then repeat step 2 until the end of fruits.

Example 2

const resetParas = document.querySelectorAll(".resultParas p");
for (const resetPara of resetParas) {
  resetPara.textContent = "";
}

This code creates a variable containing all the paragraphs inside <div class="resultParas"> using the [querySelectorAll()](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll) method, and then iterates through them, deleting the text content of each paragraph.

Note that even though resetParas is a constant, we can still change its internal properties, such as textContent.

8. Objects

8.1 Provide a better user experience:

Add the following line below let resetButton; (at the top of the script), then save the file:

guessField.focus();

The focus() method automatically places the cursor inside the <input> field when the page loads, meaning the player can immediately start their first guess without having to click the input field.

8.3 Important understanding of Objects

Everything in JavaScript is an object. An object is a collection of related functionality stored in a single grouping.

9. Basic Math in JavaScript

Unlike other programming languages, JavaScript only uses one data type: Number (which includes integers and decimals).

+= --> x = x + 4
-= --> x = x - 3
*= --> x = x * 3
/= --> x /= 5 --> x = x / 5

10. Strings in JavaScript

In JavaScript, you can choose from single quotes ('), double quotes ("), or backticks (``) to wrap strings.

jsx const single = 'single quotes'; const double = "double quotes"; const backtick =backtick`;

console.log(single);
console.log(double);
console.log(backtick);
`

10.1 Single quotes and double quotes

Strings declared with single quotes and double quotes are the same.

10.2 Backticks `

Backticks are a special type of string called a template literal. In most cases, template literals are similar to regular strings, but they have some special properties:

We can embed JavaScript inside them.
We can declare multi-line template literals.

10.2.1 Embedding JavaScript & Declaring multi-line template literals

Inside a template literal, you can wrap JavaScript variables or expressions inside ${}, and their results will be embedded in the string:

`jsx const name = 'Chris'; const greeting = `hello, ${name}`; console.log(greeting); `

`jsx
const one = 'Hello';
const two = "How are you?";
const joined = "${one}${two}";

console.log(joined);
`

Joining strings like this is called concatenation.

JS Study Notes(1) CN

Emmmeline — Wed, 10 Apr 2024 05:55:25 +0000

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

一、什么是JS

高层定义：

有了JS，网页展示的信息不再是简单的静态信息，而是实时的内容更新（i.e. 交互式的地图，滚动播放的视频）
HTML/CSS/JS的层次结构

HTML 会将文本标记，赋予结构和目的
CSS用来装饰，让文本变得更好看
JS用来实现动态行为

二、它到底可以做什么

2.1 可以做到普通的编程特性

在变量中储存有用的值e.g. 请求客户输入一个变量名，将这个名字输入到name变量中
操作一段文本，e.g.将两个字符串结合起来
运行代码以响应网页中发生的特定事件。

2.2 令人兴奋的功能

应用程序接口 API-Application Programming Interface

API分为两类：

- 浏览器API：
1. ！！文档对象模型DOM(document obj model) e.g. 某个页面出现了一个弹窗，或者显示了一些新内容
2. 地理位置API： 获取地理信息
3. 影音类API： 利用多媒体，在网页中直接播放音乐和影片
- 第三方API- 没有默认嵌入浏览器，一般要从网上获取他们的信息：
1. 推特API： 可以在网站上展示最新推文
2. 谷歌地图API： 可以在网站嵌入定制的API

# 三、 JS在页面上做了什么/JS运行时，背后发生的事情

### 3.1 过程

浏览器在读取一个网页时，代码(HTML/CSS/JS)将在一个运行环境(浏览器标签页)中得到执行。

- 注意！： 网页文档的代码需要按照其在页面上出现的顺序加载和执行。e.g. 如果JS先于要修改的HTML和CSS加载和运行，则可能发生错误。
- 每个标签页中的代码独立运行。一个标签页的代码不影响另一个。

### 3.2 JS运行次序

- 引用对象前，必须确保对象已经存在：

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

para.addEventListener("click", updateName);

function updateName() {
  const name = prompt("输入一个新的名字：");
  para.textContent = `玩家 1：${name}`;
}
```

比如调用第三行代码的时候，必须确保第一行代码已经存在。

## 3.3 编译代码(Compile) vs解释代码(Interpret)

### 1. 区别：

解释型语言

- 在解释型语言中，代码自上而下运行，且实时返回运行结果。
- 代码由浏览器执行前，不需要将其转化为其他形式。代码将直接以文本格式被接收和处理。

编译型语言

- 代码需要转化/编译成另一种形式才能运行
- 比如C/C++先被编译成机器码，然后再由计算机运行。
- 程序将以二进制（由程序的源代码产生）的格式运行

### 2. JS是什么

- JS是轻量级解释型语言。
- 浏览器接收到JS代码，并以代码自身的文本格式运行。所有的JS转换器，都运用了一种叫做即时编译(just-in-time compiling)的技术.
- JS会被编译成二进制格式。但是因为编译过程在代码运行中，而不是之前，所以JS仍然是一门解释型语言

### 3. 服务器代码 vs客户端代码（取决于代码在哪里运行）

JS既可以作为服务器端代码，也可以作为客户端代码

- 客户端代码是在用户的电脑上运行的代码。i.e. 在浏览一个网页时，网页的客户端代码会被下载，然后由浏览器来运行并展示。
- 服务器端的代码，在服务器上运行，然后运行结果，由浏览器下载并展示出来。

JS Study Notes (1) EN

Emmmeline — Wed, 10 Apr 2024 05:53:06 +0000

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:

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

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

2.2 Exciting features

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.