山地人

课02.初次体验JavaScript

山地人
山地人
2021-05-13

Game01

代码解读

document.querySelector是浏览器自带的用来查询单个元素的API。

document.querySelector('p')

通过传入参数'p',可以查询页面上第一个<p>标签元素。

para.addEventListener('click',updateName);

addEventListener是用来给元素添加事件的接口,我们设置了两个参数:

  • "click"告诉浏览器,我们要监听click点击事件。
  • updateName是收到点击事件后的处理函数。

执行流程分析

  1. 用户点击玩家1:小明这个段落元素
  2. 浏览器会查找到para上绑定的updateName处理函数
  3. updateName会被执行,然后弹出prompt询问对话框,等待用户输入内容
  4. 等用户在prompt对话框中填写内容并点击确定后,prompt会返回用户输入的结果,赋值到name变量
  5. para.textContent = "玩家1:"+name; 更新p标签内容为新的结果。

Game02

代码解读

document.querySelectorAll 可以获取全部要查询的元素的列表。

var buttons = document.querySelectorAll('button');

上述代码会查询出页面上所有的<button>元素,保存到buttons变量中。

for(var i = 0; i < buttons.length ; i++) {
buttons[i].addEventListener('click', createParagraph);
}

这里通过一个for循环,对buttons中的每一个元素,都绑定了click事件的处理函数createParagraph

function createParagraph() {
var para = document.createElement('p');
para.textContent = '你点击了这个按钮!';
document.body.appendChild(para);
}
  1. var para = document.createElement('p'); 在内存中创建一个p标签元素,此时元素还没有被放到页面上。
  2. para.textContent = '你点击了这个按钮!'; p标签的内容会被设置为你点击了这个按钮!
  3. document.body.appendChild(para); 通过appendChildAPI,把para变量所对应的p标签元素添加为body的子元素,所以p标签就能被用户看到了。

交互流程分析

  1. 当你点击了其中点我呀按钮后,这个按钮上绑定的click的处理函数createParagraph会被执行
  2. 然后在页面上添加了一个内容为你点击了这个按钮!p元素。

小结

这一节,我们通过两个小游戏,对JavaScript在浏览器端的执行有了初略的了解。

知识点说明
addEventListener绑定监听函数
callback回调处理函数
createElement创建元素
querySelector查询单个指定元素
querySelectorAll查询全部指定元素
appendChild添加子元素

学完本篇互动教程,如果你觉得体验不错,可以把网页链接发送给你的小伙伴,让他/她也来感受一下。当然,你也可以继续看看网站上其他的的互动教程,希望`idev365`能够给你带来收获。

学习教程的过程中碰到了问题,或者对idev365有什么改进意见和想法,欢迎加入idev365微信内测群,和山地人交流你的想法。