信息手机网站模板下载软件,wordpress 提问插件,营销型网站建设网站建设制作,建手机网站款软件Web APIs 本篇学习目标#xff1a; 能够说出常用的3-5个键盘事件 能够知道如何获取当前键盘按下的是哪个键 能够知道浏览器的顶级对象window 能够使用window.onload事件 能够使用window.onresize事件 能够说出两种定时器的区别 能够使用location对象的href属性完成页面之间的跳…Web APIs 本篇学习目标 能够说出常用的3-5个键盘事件 能够知道如何获取当前键盘按下的是哪个键 能够知道浏览器的顶级对象window 能够使用window.onload事件 能够使用window.onresize事件 能够说出两种定时器的区别 能够使用location对象的href属性完成页面之间的跳转 能够使用location对象获取url中的参数部分 能够使用history提供的方法实现页面刷新 1.1. 常用的键盘事件
1.1.1 键盘事件 script// 常用的键盘事件//1. keyup 按键弹起的时候触发 document.addEventListener(keyup, function() {console.log(我弹起了);})//3. keypress 按键按下的时候触发 不能识别功能键 比如 ctrl shift 左右箭头啊document.addEventListener(keypress, function() {console.log(我按下了press);})//2. keydown 按键按下的时候触发 能识别功能键 比如 ctrl shift 左右箭头啊document.addEventListener(keydown, function() {console.log(我按下了down);})// 4. 三个事件的执行顺序 keydown -- keypress -- keyup/script1.1.2 键盘事件对象 使用keyCode属性判断用户按下哪个键 script// 键盘事件对象中的keyCode属性可以得到相应键的ASCII码值document.addEventListener(keyup, function(e) {console.log(up: e.keyCode);// 我们可以利用keycode返回的ASCII码值来判断用户按下了那个键if (e.keyCode 65) {alert(您按下的a键);} else {alert(您没有按下a键)}})document.addEventListener(keypress, function(e) {// console.log(e);console.log(press: e.keyCode);})/script1.1.3 案例模拟京东按键输入内容
当我们按下 s 键 光标就定位到搜索框文本框获得焦点。 注意触发获得焦点事件可以使用 元素对象.focus() input typetextscript// 获取输入框var search document.querySelector(input);// 给document注册keyup事件document.addEventListener(keyup, function(e) {// 判断keyCode的值if (e.keyCode 83) {// 触发输入框的获得焦点事件search.focus();}})/script1.1.4 案例输入银行卡号自动分割
要求当我们在文本框中输入内容时文本框下面自动显示分割后的银行卡号。 input typetext name idnumbersdiv classinfo/divscriptvar txt document.querySelector(#numbers)var info document.querySelector(.info)txt.addEventListener(keyup, function (e) {if (this.value.length 4) {var result for (var i 0; i this.value.length; i) {var tempi1if (temp % 4 0 temp!0) {result this.value[i] } else {result this.value[i]}}info.innerHTML result} else {info.innerHTML this.value}})延申练习输入了字母如何处理
1.2. BOM
1.2.1. 什么是BOM
BOMBrowser Object Model即浏览器对象模型它提供了独立于内容而与浏览器窗口进行交互的对象其核心对象是 window。
BOM 由一系列相关的对象构成并且每个对象都提供了很多方法与属性。
BOM 缺乏标准JavaScript 语法的标准化组织是 ECMADOM 的标准化组织是 W3CBOM 最初是Netscape 浏览器标准的一部分。 1.2.2. BOM的构成
BOM 比 DOM 更大它包含 DOM。 1.2.3. 顶级对象window 1.2.4. window对象的常见事件
总结到现在为止学习到的事件分为两类
1需要用户触发的事件比如前面学习的鼠标事件、键盘事件
2不需要用户触发而是程序在执行过程中自动触发开发者只需为其编写事件处理程序即可
页面窗口加载事件2种
第1种 window.onload 是窗口 (页面加载事件当文档内容完全加载完成会触发该事件(包括图像、脚本文件、CSS 文件等), 就调用的处理函数。 第2种 DOMContentLoaded 事件触发时仅当DOM加载完成不包括样式表图片flash等等。
IE9以上才支持
如果页面的图片很多的话, 从用户访问到onload触发可能需要较长的时间, 交互效果就不能实现必然影响用户的体验此时用 DOMContentLoaded 事件比较合适。 scriptwindow.addEventListener(load, function() {var btn document.querySelector(button);btn.addEventListener(click, function() {alert(点击我);})})window.addEventListener(load, function() {alert(22);})document.addEventListener(DOMContentLoaded, function() {alert(33);})/script调整窗口大小事件 window.onresize 是调整窗口大小加载事件, 当触发时就调用的处理函数。
注意 只要窗口大小发生像素变化就会触发这个事件。 我们经常利用这个事件完成响应式布局。 window.innerWidth 当前屏幕的宽度 script// 注册页面加载事件window.addEventListener(load, function() {var div document.querySelector(div);// 注册调整窗口大小事件window.addEventListener(resize, function() {// window.innerWidth 获取窗口大小console.log(变化了);if (window.innerWidth 800) {div.style.display none;} else {div.style.display block;}})})/scriptdiv/div1.2.5. 定时器两种
window 对象给我们提供了 2 个非常好用的方法-定时器。 setTimeout() setInterval()
setTimeout() 炸弹定时器
开启定时器 普通函数是按照代码顺序直接调用。简单理解 回调就是回头调用的意思。上一件事干完再回头再调用这个函数。
例如定时器中的调用函数事件处理函数也是回调函数。以前我们讲的 element.onclick function(){} 或者 element.addEventListener(“click”, fn); 里面的 函数也是回调函数。 script// 回调函数是一个匿名函数setTimeout(function() {console.log(时间到了);}, 2000);function callback() {console.log(爆炸了);}// 回调函数是一个有名函数var timer1 setTimeout(callback, 3000);var timer2 setTimeout(callback, 5000);/script案例5秒后关闭广告 bodyimg srcimages/ad.jpg alt classadscript// 获取要操作的元素var ad document.querySelector(.ad);// 开启定时器setTimeout(function() {ad.style.display none;}, 5000);/script
/body停止定时器 button点击停止定时器/buttonscriptvar btn document.querySelector(button);// 开启定时器var timer setTimeout(function() {console.log(爆炸了);}, 5000);// 给按钮注册单击事件btn.addEventListener(click, function() {// 停止定时器clearTimeout(timer);})/scriptsetInterval() 闹钟定时器
开启定时器 script// 1. setInterval setInterval(function() {console.log(继续输出);}, 1000);/script案例倒计时 divspan classhour1/spanspan classminute2/spanspan classsecond3/span/divscript// 1. 获取元素时分秒盒子 var hour document.querySelector(.hour); // 小时的黑色盒子var minute document.querySelector(.minute); // 分钟的黑色盒子var second document.querySelector(.second); // 秒数的黑色盒子var inputTime new Date(2020-5-1 18:00:00); // 返回的是用户输入时间总的毫秒数countDown(); // 我们先调用一次这个函数防止第一次刷新页面有空白 // 2. 开启定时器setInterval(countDown, 1000);function countDown() {var nowTime new Date(); // 返回的是当前时间总的毫秒数var times (inputTime - nowTime) / 1000; // times是剩余时间总的秒数 var h parseInt(times / 60 / 60); //时h h 10 ? 0 h : h;hour.innerHTML h; // 把剩余的小时给 小时黑色盒子var m parseInt(times / 60 % 60); // 分m m 10 ? 0 m : m;minute.innerHTML m;var s parseInt(times % 60); // 当前的秒s s 10 ? 0 s : s;second.innerHTML s;}/script停止定时器 案例发送短信倒计时
点击按钮后该按钮60秒之内不能再次点击防止重复发送短信。 手机号码 input typenumber button发送/buttonscriptvar btn document.querySelector(button);// 全局变量定义剩下的秒数var time 3; // 注册单击事件btn.addEventListener(click, function() {// 禁用按钮btn.disabled true;// 开启定时器var timer setInterval(function() {// 判断剩余秒数if (time 0) {// 清除定时器和复原按钮clearInterval(timer);btn.disabled false;btn.innerHTML 发送;} else {btn.innerHTML 还剩下 time 秒;time--;}}, 1000);});/script1.2.6. this指向问题
this的指向在函数定义的时候是确定不了的只有函数执行的时候才能确定this到底指向谁一般情况下this的最终指向的是那个调用它的对象。
现阶段我们先了解一下几个this指向 全局作用域或者普通函数中this指向全局对象window注意定时器里面的this指向window 方法调用中谁调用this指向谁 构造函数中this指向构造函数的实例 button点击/buttonscript// this 指向问题 一般情况下this的最终指向的是那个调用它的对象// 1. 全局作用域或者普通函数中this指向全局对象window 注意定时器里面的this指向windowconsole.log(this);function fn() {console.log(this);}window.fn();window.setTimeout(function() {console.log(this);}, 1000);// 2. 方法调用中谁调用this指向谁var o {sayHi: function() {console.log(this); // this指向的是 o 这个对象}}o.sayHi();var btn document.querySelector(button);btn.addEventListener(click, function() {console.log(this); // 事件处理函数中的this指向的是btn这个按钮对象})// 3. 构造函数中this指向构造函数的实例function Fun() {console.log(this); // this 指向的是fun 实例对象}var fun new Fun();/script1.2.7. location对象
什么是 location 对象 URL
URL 就是常说的网址专业的说全球统一资源定位符
https://baike.baidu.com/m/24267858?fromtitle新型冠状病毒fromid7904360fraladdin#link location 对象的属性 案例5秒钟自动跳转页面 button点击/buttondiv/divscriptvar btn document.querySelector(button);var div document.querySelector(div);btn.addEventListener(click, function() {// console.log(location.href);location.href http://www.itcast.cn;})var timer 5;setInterval(function() {if (timer 0) {location.href http://www.baiduc.com;} else {div.innerHTML 您将在 timer 秒钟之后跳转到首页;timer--;}}, 1000);/script案例获取URL参数 // console.log(window.location)
console.log(location.search)
// 获取参数部分
var search location.search
// 从 “?” 后面开始截取
var paramssearch.substr(1)
console.log(params)// 根据“”进行分割
var param_listparams.split()
console.log(param_list)
console.log(decodeURI(param_list[1])) 延申思考如何传递多个参数如何获取多个参数并输出每个参数的值如果传递的参数的值是中文在获取参数值是会发生什么情况如何解决请以此回答上面四个问题并写出案例
location对象的常见方法 button点击/buttonscriptvar btn document.querySelector(button);btn.addEventListener(click, function() {// 记录浏览历史所以可以实现后退功能// location.assign(https://baike.baidu.com/);// 不记录浏览历史所以不可以实现后退功能// location.replace(https://baike.baidu.com/);location.reload(true);})/script1.2.8. navigator对象
navigator 对象包含有关浏览器的信息它有很多属性我们最常用的是 userAgent该属性可以返回由客户机发送服务器的 user-agent 头部的值。
下面前端代码可以判断用户那个终端打开页面实现跳转
if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {window.location.href ; //手机} else {window.location.href ; //电脑}1.2.9 history对象
window对象给我们提供了一个 history对象与浏览器历史记录进行交互。该对象包含用户在浏览器窗口中访问过的URL。
history对象一般在实际开发中比较少用但是会在一些 OA 办公系统中见到。 1.3. JS执行机制
以下代码执行的结果是什么 console.log(1);setTimeout(function () {console.log(3);}, 1000);console.log(2);以下代码执行的结果是什么 console.log(1);setTimeout(function () {console.log(3);}, 0);console.log(2);1.3.1 JS 是单线程 单线程就意味着所有任务需要排队前一个任务结束才会执行后一个任务。如果前一个任务耗时很长后一个任务就不得不一直等着。这样所导致的问题是 如果 JS 执行的时间过长这样就会造成页面的渲染不连贯导致页面渲染加载阻塞的感觉。案例演示
在单线程中执行多个任务同步任务
在多个线程中执行多个任务异步任务
1.3.2 同步任务和异步任务
单线程导致的问题就是后面的任务等待前面任务完成如果前面任务很耗时比如读取网络数据后面任务不得不一直等待
为了解决这个问题利用多核 CPU 的计算能力HTML5 提出 Web Worker 标准允许 JavaScript 脚本创建多个线程但是子线程完全受主线程控制。于是JS 中出现了同步任务和异步任务。
同步
前一个任务结束后再执行后一个任务程序的执行顺序与任务的排列顺序是一致的、同步的。比如做饭的同步做法我们要烧水煮饭等水开了10分钟之后再去切菜炒菜。
异步
你在做一件事情时因为这件事情会花费很长时间在做这件事的同时你还可以去处理其他事情。比如做饭的异步做法我们在烧水的同时利用这10分钟去切菜炒菜。 JS中所有任务可以分成两种一种是同步任务synchronous另一种是异步任务asynchronous。同步任务指的是在主线程上排队执行的任务只有前一个任务执行完毕才能执行后一个任务
异步任务指的是不进入主线程、而进入”任务队列”的任务当主线程中的任务运行完了才会从”任务队列”取出异步任务放入主线程执行。1.3.3 JS执行机制事件循环 1.3.4 代码思考题 console.log(1);document.onclick function() {console.log(click);}setTimeout(function() {console.log(3)}, 3000)console.log(2);再思考一个问题下面代码的执行结果是什么说明什么问题
console.log(1); setTimeout(function () {console.log(ok)
}, 0)
console.log(2);
console.log(2);
console.log(2);
console.log(2);
console.log(2);
console.log(2);
console.log(2);
console.log(2);
console.log(2);
console.log(2);
console.log(2);
console.log(2);
console.log(2);
console.log(2);
console.log(2);
console.log(2);
console.log(2);
console.log(2);
console.log(2);
console.log(2);
