这是我参与「第五届青训营」笔记创作活动的第4天。

一、重点内容

JS简介
JS基础概念

二、详细内容介绍

JavaScript介绍

在 HTML 和 CSS 集合组装成一个网页后，浏览器的 JavaScript 引擎将执行 JavaScript 代码。这保证了当 JavaScript 开始运行之前，网页的结构和样式已经就位。这样很好，因为 JavaScript 最普遍的用处是通过 DOM API动态修改 HTML 和 CSS 来更新用户界面。如果 JavaScript 在 HTML 和 CSS 就位之前加载运行，就会引发错误。

在解释型语言中，代码自上而下运行，且实时返回运行结果。代码在由浏览器执行前，不需要将其转化为其他形式。代码将直接以文本格式）被接收和处理。相对的，编译型语言需要先将代码转化（编译）成另一种形式才能运行。比如 C/C++ 先被编译成编语言，然后才能由计算机运行。程序将以二进制的格式运行，这些二进制内容是由程序源代码产生的。

JavaScript 是轻量级解释型语言。浏览器接收到 JavaScript 代码，并以代码自身的文本格式运行它。JavaScript 转换器运用了一种叫做即时编译的技术；当 JavaScript 源代码被执行时，它会被编译成二进制的格式，使代码运行速度更快。尽管如此,JavaScript 仍然是一门解释型语言，因为编译过程发生在代码运行中，而非之前。

JS基础概念

变量

et和const涵盖所有。例：number、string、boolean、array、object

string的一些常用方法：

browserType.length; 字符串长度
browserType.indexOf('zilla'); 查找子字符串（返回开始位置，若查找不到返回-1）
browserType.slice(0,3); 取子字符串（包含第一个位置，不包含第二个位置）
radData.toLowerCase(); radData.toUpperCase(); 转成小/大写
browserType = browserType.replace('moz','van'); 第一个被第二个子串替换

事件

一些常用鼠标事件

.onclick按钮被点击时
.onfocus .onblur按钮被置于焦点或解除焦点时改变颜色（尝试使用 Tab 移动至按钮上，然后再移开）。这些通常用于显示有关如何在置于焦点时填写表单字段的信息，或者如果表单字段刚刚填入不正确的值，则显示错误消息。
.onmouseover .onmouseout 在鼠标移入按钮上方时发生改变颜色，或者当它从按钮移出时。

异步

如果是同步的话，浏览器加载的时间较长时用户没法看到东西，不利于用户体验，因此采用异步有很大优势。例如：

使用 fetch() 发起 HTTP 请求
使用 getUserMedia() 访问用户的摄像头和麦克风
使用 showOpenFilePicker()(en-US) 请求用户选择文件以供访问

三、实践练习例子

按钮转换（现在是开始状态时，按钮文字换成停止；现在是停止状态时，按钮文字换成开始）

<button>Start machine</button>
<p>The machine is stopped.</p>

const btn = document.querySelector('button');
const txt = document.querySelector('p');

btn.addEventListener('click', updateBtn);

function updateBtn() {
  if (btn.textContent === 'Start machine') {
    btn.textContent = 'Stop machine';
    txt.textContent = 'The machine has started!';
  } else {
    btn.textContent = 'Start machine';
    txt.textContent = 'The machine is stopped.';
  }
}

下拉框选择

3.背景颜色切换

<button>Change color</button>

const btn = document.querySelector('button');

function random(number) {
  return Math.floor(Math.random()*(number+1));
}

btn.onclick = function() {
  const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')'; 
 
  document.body.style.backgroundColor = rndCol;
}

四、个人总结

在学习过一点Vue之后看JS的事件绑定其实感觉有一些繁杂，但是毕竟JS是Vue的基础，还是要把JS实现熟悉好，理解通过哪些步骤来进行事件的绑定。

JS基础|青训营笔记