JavaScript学习

JavaScript是前端的一种脚本，，简单的来说，就是让前端网页由静态编程动态的一种语言，可以用来创建动态更新的内容，它是一种解释型语言，即不提前编译，代码以文本格式传输到浏览器上进行接收，采用了一种叫做即时编译（just-in-time compiling）的技术

这是构建一个网页的过程：

浏览器在读取一个网页时，代码（HTML, CSS 和 JavaScript）将在一个运行环境（浏览器标签页）中得到执行。就像一间工厂，将原材料（代码）加工为一件产品（网页），然后在HTML和CSS组装成一个网页之后，浏览器的 JavaScript 引擎将执行 JavaScript 代码，这样就可以实现根据DOM（Document Object Model） API对网页的各种内容进行动态修改

img

基本语法

使用关键字 let 和一个名字来创建变量，使用关键字 const 和一个名字来创建常量

可以使用等号（=）和一个值来为变量或常量赋值

函数定义（可以在控制台中输入checkGuess();进行调用，弹出一个告警文本框）

这里我们使用关键字 function 、一个函数名、一对小括号定义了一个函数。随后是一对花括号{}，花括号内部是调用函数时要运行的所有代码

1
2
3
function checkGuess() {
  alert('I am a placeholder');
}

JavaScript允许使用 + 运算符将文本字符串进行连接

1
2
let name1 = 'Bingo';
name1 += ' says hello!';

JavaScript执行真/假比较时，全等使用===，不相等使用!==

简单的一个猜数字实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
//随机生成一个数字
let randomNumber = Math.floor(Math.random() * 100) + 1;

//分别指向 HTML 结果段落中某个元素
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;

function checkGuess() {
  //声明一个变量，让他的值等于guessField（即输入框）中的值
  const userGuess = Number(guessField.value);
  //判断
  if (guessCount === 1) {
    guesses.textContent = 'Previous guesses: ';
  }
  //将猜的值和一个空格附加到段落末尾
  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);
}
function resetGame() {
  //重置猜测次数
  guessCount = 1;
  //选择class=resultParas中的全部
  const resetParas = document.querySelectorAll('.resultParas p');
  //遍历重置
  for (const resetPara of resetParas) {
    resetPara.textContent = '';
  }
  //移除按钮
  resetButton.parentNode.removeChild(resetButton);
  //启用输入框
  guessField.disabled = false;
  guessSubmit.disabled = false;
  guessField.value = '';
  guessField.focus();

  lastResult.style.backgroundColor = 'white';
  //重置随机数
  randomNumber = Math.floor(Math.random() * 100) + 1;
}