四、 JavaScript
1. JavaScript 的引入方式
1.1 内部引入脚本块 <script>.......</script>
1.1.1 通常把脚本块置于 <body></body> 的底部，改善网页显示速度
1.2 外部资源引入 <script src="myScript.js" type="text/javascript"></script>
2. JavaScript 的输出
2.1 window.alert(""); 警告框输出
2.2 document.getElementById("demo").innerHTML = ""; HTML 的元素输出
2.3 console.log(""); 浏览器的控制台输出
2.4 document.write(""); HTML 输出
2.5 window.confirm(""); 确认框输出
2.6 window.prompt("请输入你的姓名：", "defaultText"); 提示框输出
3. Number 数值
var a = 1; var b = 3.14; var c = 123e5; var d = 123e-5; // Infinity （或 -Infinity）是 JavaScript 在计算数时超出最大可能数范围时返回的值。typeOf Infinity 返回 number，除以 0 也会生成 Infinity var inf = Infinity； // 在数学运算中使用了 NaN 表示非数字值（"Not-a-Number"），则结果也将是 NaN，typeof NaN 返回 number var na = NaN； a.toString(16); // 返回对应的 十六进制数 a.toString(8); // 返回对应的 八进制数 a.toString(2); // 返回对应的 二进制数 // 返回 JavaScript 中可能的最大数字 var max = Number.MAX_VALUE; // 返回 JavaScript 中可能的最小数字 var min = Number.MIN_VALUE; // 一切皆对象，数值也可以是Object类型 var z = new Number(100);
3.1 常用的数值方法
3.2 常用的 Math 方法
4. Array 数组
// 数组的创建 var a = new Array(); var b = new Array(2); var c = new Array("张三", "李四", "王五"); // 建议使用 [] var d = []; var e = ["张三", "李四", "王五"]; // 数组的返回类型是 object 类型 typeof a;
4.1 常用的数组方法
5. String 字符串
// typeof x 将返回 string var x = "Bill"; // typeof y 将返回 object var y = new String("Bill");
5.1 常用的字符串方法
6. Date 日期
// 创建日期 typeof date 将返回 object new Date(); new Date(year, month, day, hours, minutes, seconds, milliseconds); new Date(milliseconds); new Date(date string); new Date("yyyy-MM-dd hh:mm:ss");
6.1 常用的日期获取方法
7. JavaScript 的函数（方法）定义
// 声明式 function methodName() { } // 赋值式，也叫匿名函数（方法），一般用在回调函数时 var f = function(arg1， arg2， ...) { }; // 函数构造器，说明函数也是 object 对象 var f1 = new Function("a", "b", "return a*b"); // 自调用函数， (function () { var x = "Hello!!"; // 我会调用我自己 })();
7.1 JavaScript 函数 Call 和 Apply
/* call() 和 apply() 方法非常相似，都能调用不同对象的属性方法 call() 和 apply() 都可接受参数，唯一不同的是 call() 方法“分别接受”参数 apply() 方法接受“数组形式”的参数。*/ var person = { fullName: function(city, country) { return this.firstName + " " + this.lastName + "," + city + "," + country; } } var person1 = { firstName:"Bill", lastName: "Gates" } person.fullName.call(person1, "Seattle", "USA"); person.fullName.apply(person1, ["Seattle", "USA"]);
8. JavaScript 的对象定义
var Person = { firstName: "张三", lastName: "" age: 20, friends: [ {name: "李四"}, {name: "王五"} ], // 创建对象方法 methodName: function(){ alert("hello"); }, // JavaScript访问器 Setter set setName(name){ this.lastName = name; }, // JavaScript访问器 getter get getFirstName(){ return this.firstName; } };
8.1 访问 JavaScript 对象的属性
// 访问属性 objectName.property; // 或者 objectName["property"];
8.2 删除 JavaScript 对象的属性
// delete 关键词不会删除被继承的属性，但是如果删除了某个原型属性，则将影响到所有从原型继承的对象 delete objectName.property;
8.3 JavaScript 对象构造器
// 构造方法名必须和对象名一致
function Person(first, last, age, friends){ this.firstName = firstName; this.lastName = last; this.age = age; this.friends = friends; }
8.4 JavaScript 的 prototype 属性允许为对象构造器添加新属性
Person.prototype = {
this.school: "",
init: function(){},
destroy: function(){},
... };
9. 异常处理方式
try { 供测试的代码块 } catch(err) { 处理错误的代码块
throw 语句允许你创建自定义错误 } finally { 无论 try / catch 结果如何都执行的代码块 }
9.1 Error 对象属性
9.2 Error 对象属性 name 的返回值
10. 正则表达式
// 语法 /pattern/modifiers;
10.1 正则表达式修饰符 modifiers
10.2 正则表达式模式 pattern
10.2.1 括号用于查找一定范围的字符串：
10.2.2 元字符（Metacharacter）是拥有特殊含义的字符：
10.2.3 Quantifiers 定义量词：
10.3 正则表达式常用的方法
// search() 字符串方法 var str = "hello, world!"; var n = str.search(/world/i); // 返回字符串索引值 6 // replace() 字符串方法 var str = "hello, world!"; var res = str.replace(/hello/i, "hi"); // 返回 hi, world! // test() 是一个正则表达式方法，通过指定的模式搜索字符串，根据结果返回 true 或 false /e/.test("The best things in life are free!");// 返回 true // exec() 是一个正则表达式方法，通过指定的模式搜索字符串，返回已找到的文本，否则返回 null /e/.exec("The best things in life are free!");// 返回 e
11. HTML DOM 文档对象模型（Document Object Model）
11.1 HTML DOM 是关于如何获取、更改、添加或删除 HTML 元素的标准。通过这个对象模型，JavaScript 获得创建动态 HTML 的所有能力
11.2 获取 HTML 元素
// 通过元素 id 来获取元素 document.getElementById(id); // 通过标签名来获取元素，返回 HTMLCollection 对象，length 属性定义了 HTMLCollection 中元素的数量 document.getElementsByTagName(name); // 通过类名来获取元素 document.getElementsByClassName(name); // 通过 CSS 选择器获取元素 document.querySelector(); // 返回 NodeList 对象，length 属性定义节点列表中的节点数 document.querySelectorAll("p.p01");//返回 class="p01" 的所有 <p> 元素列表 // 获取子元素 element.childNodes(); // 获取父元素 element.parentNode(); // 通过 HTML 对象选择器查找 HTML 对象 document.forms["form_id"]; ...
11.3 改变 HTML 元素
// 改变元素的 inner HTML element.innerHTML = content; // 改变 HTML 元素的属性值 element.attribute = value; element.setAttribute(attribute, value);
element.getAttribute(attribute); element.classList.add("");// 从类名表中添加类名 element.classList.remove("");// 从类名表中删除类名 // 改变 HTML 元素的 CSS 样式 element.style.property = style;
11.4 添加和删除 HTML 元素
// 创建 HTML 元素 document.createElement(element); // 删除 HTML 元素 document.removeChild(element); // 添加 HTML 元素 element.appendChild(element);// 追加新元素作为父的最后一个子 element.insertBefore(element01, element02);// 在element的子节点02前添加元素01 // 替换 HTML 元素 document.replaceChild(element); // 写入 HTML 输出流 document.write(text);
11.5 添加事件处理程序
// 添加事件处理程序，也叫 DOM0级事件处理，存在事件覆盖 element.onclick = function(){code}; element.ondblclick = function(){code}; element.onmouseover = function(){code}; element.onmouseenter = function(){code}; element.onmouseout = function(){code}; element.onfocus = function(){code}; element.onblur = function(){code}; element.onkeyup = function(){code};// 按下并弹起按键时触发 element.onkeydown = function(){code};// 按下按键时触发，系统已经接受用户的输入信息 element.onkeypress = function(){code};// 按下按键时触发，系统未接受用户的输入信息 element.getElementById(id).onchange = function(){code}; /* onload 和 onunload 事件 当用户进入后及离开页面时，会触发 onload 和 onunload 事件 onload 事件可用于检测访问者的浏览器类型和浏览器版本，然后基于该信息加载网页的恰当版本 onload 和 onunload 事件可用于处理 cookie。 */
<body onload="checkCookies()"></body>
11.6 添加事件监听程序
/* 事件冒泡，最内侧元素的事件会首先被处理，然后是更外侧的：由内向外 事件捕获，最外侧元素的事件会首先被处理，然后是更内侧的：由外到内 */ // 添加事件监听程序，也叫 DOM2级事件处理，事件不覆盖 element.addEventListener("click", function(){code}, true/false); //默认值是 false，将使用冒泡传播； true 则事件使用捕获传播 element.addEventListener("transitionend", function(){code}, true/false); ... // 删除事件监听程序 element.removeEventListener("click"); // IE 8.0以下：attachEvent datachEvent
11.7 事件对象Event
event.type;// 获取事件类型 event.target;// 获取事件目标 event.currentTarget;// 获取当前事件目标 // 获取鼠标位置 event.clientX; event.clientY; event.pageX; event.pageY; event.stopPropagation(); // 阻止事件冒泡 event.preventDefault();// 阻止事件的默认行为
12. BOM 浏览器对象模型（Browser Object Model）
12.1 Window 对象
// 浏览器窗口尺寸，浏览器窗口不包括工具栏和滚动条 var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; // IE 8 以下 var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; // IE 8 以下 window.open(); // 打开新窗口 window.close(); // 关闭当前窗口 window.moveTo(); // 移动当前窗口 window.resizeTo(); //重新调整当前窗口
12.2 Window Screen
// window.screen 对象可不带 window 前缀书写 screen.width;// 返回访问者屏幕宽度 screen.height; screen.availWidth;// 返回访问者屏幕宽度，减去诸如窗口工具条之类的界面特征 screen.availHeight; screen.colorDepth;// 返回以位计的屏幕色彩深度 screen.pixelDepth;// 返回屏幕的像素深度
12.3 Window Location
// window.location 对象可不带 window 前缀书写 window.location.href;// 返回当前页面的 href (URL) window.location.hostname;// 返回 web 主机的域名 window.location.pathname;// 返回当前页面的路径或文件名 window.location.protocol;// 返回使用的 web 协议（http: 或 https:） window.location.assign("url");// 加载新文档
12.4 Window History
// window.history 对象可不带 window 前缀书写 history.back();// 等同于在浏览器点击后退按钮 history.forward();// 等同于在浏览器中点击前进按钮
12.5 Window Timing 事件
// window. 对象可不带 window 前缀书写 // 在等待指定的毫秒数后执行函数 var timeout = window.setTimeout(function, milliseconds); window.clearTimeout(timeout); // 等同于 setTimeout()，但持续重复执行该函数 var timer = setInterval(function, milliseconds); clearInterval(timer); // 请求帧动画，回调稳步执行 function render() { function(){code}; requestAnimationFrame(render);// 请求帧动画, 回调稳步执行 } render();
12.6 Document Cookie
// JavaScript 可以用 document.cookie 属性创建、读取、删除 cookie document.cookie = "username=Bill Gates; expires=Sun, 31 Dec 2018 12:00:00 UTC; path=/";
13. 参考资料 http://www.w3school.com.cn/js/index.asp
14. 入门案例 https://www.cnblogs.com/IT-LFP/p/10935124.html