使用软件:HBuilder > HTML
人生名言:命运掌握在自己手上
技术总结:
JavaScript 的组成 - ECMAScript - 语法规范 - 变量、数据类型、类型转换、操作符 - 流程控制语句:判断、循环语句 - 数组、函数、作用域、预解析 - 对象、属性、方法、简单类型和复杂类型的区别 - 内置对象:Math、Date、Array,基本包装类型String、Number、Boolean - Web APIs - BOM - onload页面加载事件,window顶级对象 - 定时器 - location、history - DOM - 获取页面元素,注册事件 - 属性操作,样式操作 - 节点属性,节点层级 - 动态创建元素 - 事件:注册事件的方式、事件的三个阶段、事件对象 JavaScript 可以做什么 阿特伍德定律: Any application that can be written in JavaScript, will eventually be written in JavaScript. 任何可以用JavaScript来写的应用,最终都将用JavaScript来写 阿特伍德 stackoverflow的创始人之一 - 知乎 - JavaScript 能做什么,该做什么? - 最流行的编程语言 JavaScript 能做什么? 浏览器是如何工作的 User Interface 用户界面,我们所看到的浏览器 Browser engine 浏览器引擎,用来查询和操作渲染引擎 *Rendering engine 用来显示请求的内容,负责解析HTML、CSS,并把解析的内容显示出来 Networking 网络,负责发送网络请求 *JavaScript Interpreter(解析者) JavaScript解析器,负责执行JavaScript的代码 UI Backend UI后端,用来绘制类似组合框和弹出窗口 Data Persistence(持久化) 数据持久化,数据存储 cookie、HTML5中的sessionStorage JavaScript 执行过程 JavaScript 运行分为两个阶段: - 预解析 - 全局预解析(所有变量和函数声明都会提前;同名的函数和变量函数的优先级高) - 函数内部预解析(所有的变量、函数和形参都会参与预解析) - 函数 - 形参 - 普通变量 - 执行 先预解析全局作用域,然后执行全局作用域中的代码, 在执行全局代码的过程中遇到函数调用就会先进行函数预解析,然后再执行函数内代码。
代码展示:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <ul id="heroes"> <li>安琪拉</li> <li>李白</li> <li>诸葛亮</li> <li>狄仁杰</li> </ul> 我是字体的演示<br /> <button id="btn1" size="12">按钮1</button> <button id="btn2" size="14">按钮2</button> <button id="btn3" size="16">按钮3</button> <div id="box"> <button size="18">按钮4</button> <button size="20">按钮5</button> <button size="22">按钮6</button> </div> <script> // 闭包:在一个作用域中可以访问另一个作用域的变量 // 闭包特点:延展了函数的作用域范围 function fn(){ var i = 10; return function(){ return i; } } var a = fn(); console.log(a()); console.log("--------------"); function getRandom(){ var random = parseInt(Math.random()*10)+1; return function(){ return random; } } var sum = getRandom(); console.log(sum()); function getsum(n){ return function(m){ return n+m; } } var sum100 =getsum(99); console.log(sum100(1)); console.log("--------------"); var heroes = document.getElementById("heroes"); var list = heroes.children; for(var i = 0; i< list.length; i++){ var li = list[i]; (function(i){ li.onclick = function(){ console.log(i); } })(i); } console.log("--------------"); console.log("start"); setTimeout(function(){ console.log("timeout"); },5); console.log("over"); console.log("--------------"); console.log("start"); for(var i = 0;i < 3; i++){ (function(i){ setTimeout(function(){ console.log(i); },0); })(i); } console.log("end"); console.log("--------------"); var btn1 = document.getElementById('btn1'); var btn2 = document.getElementById('btn2'); var btn3 = document.getElementById('btn3'); function makeFun(size){ return function(){ document.body.style.fontSize = size+"px"; } } btn1.onclick = makeFun(12); btn2.onclick = makeFun(14); btn3.onclick = makeFun(16); //创建一个函数,设置body的字体大小 function makeSun(size){ return function(){ document.body.style.fontSize = size+"px"; } } var box = document.getElementById("box"); var arr = box.children; for(var i = 0;i <arr.length; i++ ){ var btn = arr[i]; //获取标签的自定义属性 var size = btn.getAttribute("size"); btn.onclick = makeSun(size); } console.log("--------------"); var name = "The Window"; var object = { name:"My Window", getName : function(){ return function(){ return this.name; }; } } console.log(object.getName()()); console.log("--------------"); function f1(){ var n = 10; console.log(n); f2(); } function f2() { var n = 20; console.log(n); } f1(); </script> </body> </html>