使用软件：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>