JavaScript知识梳理（一）

JavaScript知识梳理（一）

想想还是需要系统梳理一遍，相比后端我大概更愿意多学习一些前端，慢慢学吧，理论还是完全不够呢。

注意点：在标签上加onclick="functionname()",是不好的做法，用JavaScript污染HTML，且效率低下。（根据实际情况判断）

异步 与 延迟（async defer）

当页面中的脚本彼此独立运行并且不依赖页面上的其他脚本时，可以用async
具有defer属性的所有脚本将按照它们在页面上显示的顺序进行加载，如果您的脚本需要等待解析并且依赖于其他脚本和DOM，请使用defer ，并将它们的相应<script>按执行顺序排列

变量和常量

更多

变量：let和var

var可以在初始化变量后实际使用声明变量，并且该变量仍然可以使用；可以根据需要多次声明同一变量，但我们建议尽量用let

let a = 1;
let randomNumber = Math.floor(Math.random() * 100) + 1;//1-100的随机数

常量：const

const x = document.querySelector('.classname');

浏览器对象

value属性表示输入到文本字段中的当前值。
要更改段落内的文本，需要使用textContent属性。
页面上的每个元素都有一个style属性，该属性本身包含一个对象，该对象的属性包含应用于该元素的所有内联CSS样式。这使我们能够使用JavaScript在元素上动态设置新的CSS样式。

classname.value = 'Hello';
classname.textContent = 'Where is my paragraph?';
classname.style.backgroundColor = 'yellow';

例：
猜数字游戏

<div class="resultParas">
  <p class="guesses"></p>
  <p class="lastResult"></p>
  <p class="lowOrHi"></p>
</div>

<label for="guessField">Enter a guess: </label><input type="text" id="guessField" class="guessField">
<input type="submit" value="Submit guess" class="guessSubmit">

guessField.focus();//，<input>在页面加载后立即将文本光标自动置于文本字段中，直接输入，不必先单击

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;


function checkGuess() {
  let 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';//修改CSS样式
    lowOrHi.textContent = '';//清除提示文本
    setGameOver();//函数
  } else if (guessCount === 10) {
    lastResult.textContent = '!!!GAME OVER!!!';
    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;

  const resetParas = document.querySelectorAll('.resultParas p');
  for (let i = 0 ; i < resetParas.length ; i++) {
    resetParas[i].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;
}

错误

【语法错误】

TypeError：xxx is not a function

拼写错误；正在调用该方法的对象没有此功能；具有相同名称的属性和函数

TypeError：xxx is null

console.log(xxx)是一个很有用的调试功能

SyntaxError: missing ; before statement//缺少’;’

SyntaxError: missing ) after argument list//缺少’)’

SyntaxError: missing : after property id

【逻辑错误】

查看更多