目录
1. JavaScript入门1.1 JavaScript 定义和特点1.2 JavaScript的初步使用1.3 数据类型 2. 基本语法2.1 变量2.2 运算符2.3 流程控制2.4 引入外部文件2.5 综合代码 3. 函数4. 对象5. 时钟效果6. 数组7. 事件8. DOM 和 BOM8.1 BOM—window对象location、history、navigator对象 8.2 DOM查询元素1. JavaScript入门
静态网页技术
HTML：超文本标记语言 显示内容
CSS：层叠样式表 美化页面
JavaScript：页面动态交互和特效
DHTML = HTML + CSS + JavaScript，动态HTML，只是动态效果，不是动态数据
jQuery：对 JavaScript 的封装
EasyUI：在 jQuery 基础上对 HTML 和 CSS 的封装
对于一个网页，HTML定义网页的结构，CSS描述网页的样子，JavaScript设置页面交互和特效。
1.1 JavaScript 定义和特点
JavaScript 是一种基于对象(object-based) 和事件驱动(Event Driven)的简单的并具有安全性能的脚本语言
ECMAScript：JavaScript的核心DOM：文档对象模型，是 HTML 和 XML 的应用程序接口（API）。把整个页面规划成由节点层级构成的文档BOM：浏览器对象模型，对浏览器窗口进行访问和操作
JavaScript特点：
脚本语言：不需要事先编译，只要有一个与其相适应的解释器就可以执行基于对象的语言：只是使用对象，相当于只有封装，没有继承和多态事件驱动：事件（Event）发生后（按下鼠标、移动窗口等），可能会引起相应的事件响应简单性：变量类型为弱类型安全性：只能通过浏览器实现信息浏览或动态交互跨平台性：依赖于浏览器本身，与操作平台无关缺点：各种浏览器对JavaScript的支持可能不同，显示效果可能不同
1.2 JavaScript的初步使用
<!DOCTYPE html><html><head><meta charset="utf-8"><title>认识JavaScript</title><script type="text/javascript">//在浏览器写入内容 document.write("这就是JavaScript1<br>")document.write("这就是JavaScript2<br>")</script></head><body>这就是HTML;</body></html><script>alert("你好呀")</script>
1.3 数据类型
常量是存在数据类型的，变量直接用 var 声明即可
数值型：整数（85） 和 浮点数（3.14）统称为数值字符串型：用 ‘’ 或者 “” 括起来的内容布尔型：true 或 false空值：null，表示没有值，用于定义空的或不存在的引用未定义值：undefined，表示变量虽然已经声明，但是还没有赋值复合数据类型：对象、数组
2. 基本语法
2.1 变量
JavaScript 中的变量是没有类型（弱类型）的
var int = 3;
2.2 运算符
注意： == 和 === 的区别
== 等值判断：先判断类型，类型一致则比较内容， 如果类型不一致，则先用 Number 转换为一致的类型后再比较内容=== 等同判断：先判断类型，类型不一致则直接 false， 类型一致则再比较内容
2.3 流程控制
分支语句：if、switch
循环语句：while循环、do-while循环、for循环、for-each循环
跳转语句：break、continue、return
需要注意 for-each 循环，使用in
2.4 引入外部文件
<script type="text/javascript" src="外部文件路径"></script>
2.5 综合代码
<!DOCTYPE html><html><head><meta charset="utf-8"><title>JavaScript基本语法</title><!-- 引入外部的JS文件 --><script type="text/javascript" src="js/myJs.js"></script><script type="text/javascript">document.write("<h3>认识数据类型和变量</h3>")var x;document.write("x = " + x + " " + typeof (x) + "<br>"); // 没有赋值，就是undefinedx = null;document.write("x = " + x + " " + typeof (x) + "<br>");x = 123;document.write("x = " + x + " " + typeof (x) + "<br>");x = "lwclick";// 单引号双引号都可以document.write("x = " + x + " " + typeof (x) + "<br>");x = true; // 区分大小写， TRUE 则是变量名// x = TRUE; // 此时TRUE被理解成一个变量document.write("x = " + x + " " + typeof (x) + "<br>");document.write("<h3>区分==和===</h3>");var a = '5';var b = 5;var c = 5;document.write((b == c) + "<br>");document.write((a == b) + "<br>"); // 自动类型转换document.write((b === c) + "<br>"); //document.write((a === b) + "<br>"); // 先判断类型，不一致则falseconsole.info("for-each循环");var fruits = ["apple", 'banana', 'orange', 'pear', 'peach'];/**for ( var i = 0; i < fruits.length; i++ ) {console.log(fruits[i]);}*/// for-each 循环数组for (var index in fruits) {//!!!!console.warn(index + " " + fruits[index]);}// for-each 循环对象// for (var elem in window) {// console.info(elem);//}</script></head><body></body></html>
3. 函数
类似Java中的方法，是完成特定任务的代码语句块
不用定义属于某个类，直接使用
JavaScript的函数分为系统函数和自定义函数
系统函数
parseInt()：字符串值转换为数字
parseFloat()：字符串值转换成浮点数
isNaN()：判断是否是数字，不是数字返回 true
eval()：字符串表达式转为数字（运算字符串内的表达式）
自定义函数
// 没有参数，没有返回值function func1() {}// 有参数，没有返回值function func2(num1) {alert(num1) }// 有参数，有返回值function func3(num1, num2) {// 返回值也为 var，则直接不写return num1 + num2;}// 类似于 Java 的匿名函数式定义var func4 = function() {alert('world！');};// 调用时func2(); // 实参个数 < 形参个数 num1 为 undefinedfunc2(123); // 实参个数 = 形参个数正常使用func2(123, 'lwclick'); // 实参个数 > 形参个数 只用第一个参数var res = func3(123, 456);
注意：如果有重名的函数，会调用最近的那一个
实例：计算器
<!DOCTYPE html><html><head><meta charset="utf-8"><title>计算器</title></head><script>function calc() {var num1 = document.getElementById("num1").value;var num2 = document.getElementById("num2").value;if (isNaN(num1) || isNaN(num2)) {alert("请输入数字");// innerHTML：往元素的【中间】写内容document.getElementById("res").innerHTML = "结果：";return;}var oper = document.getElementById("oper").value;if (num2 == 0 && oper == '/') {document.getElementById("res").innerHTML = "<span style='color: red'>除数不能为0</span>";return;}var result;switch (oper) {case '+' : result = parseInt(num1) + parseInt(num2); break;case '-' : result = num1 - num2; break;case '*' : result = num1 * num2; break;case '/' : result = num1 / num2; break;}document.getElementById("res").innerHTML = result;}</script><body><form action="">第一个数：<input type="text" id="num1" name="num1" value="123"><br>第二个数：<input type="text" id="num2" name="num2"><br>运算符：<select id="oper" name="oper"><option value="+">加</option><option value="-">减</option><option value="*">乘</option><option value="/">除</option></select><br><input type="button" value="计算" onclick="calc()"></form><div id="res">结果：</div></body></html>
4. 对象
JavaScript 提供了很多对象，比如 String、Math、Date 等，和Java中的使用基本相同，后续还有 BOM对象和 DOM对象
<script>document.write("------------String--------------<br>")var str = new String("lwclick");document.write(str.length + "<br>")document.write(str.charAt(2) + "<br>")document.write(str.indexOf('s') + "<br>")document.write(str.substr(2, 3) + "<br>") // 从索引为2的开始截，截3位document.write(str.substring(2, 3) + "<br>") // 截取2 到 3中间的document.write("------------Date--------------<br>")var now = new Date();document.write(now.toLocaleString()+"<br>")document.write(now.getFullYear()+"<br>")document.write((now.getMonth() + 1) + "<br>") // 0 - 11！！！！！！！document.write(now.getDate()+"<br>")var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']document.write(arr[now.getDay()] + "<br>")document.write("------------Math--------------<br>")document.write('' + Math.random())</script>
5. 时钟效果
<!DOCTYPE html><html><head><meta charset="utf-8"><title>时钟效果</title><script>function showTime() {// 获取当前时间var now = new Date();// 写到指定位置document.getElementById("time").innerHTML = now.toLocaleString();// 第一种方式：放在自身函数里面，就会自己调用自己，需要结合 window.onload// window.setTimeout(showTime, 1000) // setTimeout：多长时间后调用指定的函数【一次】}window.onload = showTime; // 不能写 ()// 第二种方式：在自身函数外面设置 setInterval(showTime, 1000) 【每隔】多长时间调用一次函数var myClock = setInterval(showTime, 1000);function pauseClock() {window.clearInterval(myClock); // 清除计时}function continueClock() {myClock = setInterval(showTime, 1000);}</script></head><body><div id="time"></div><input type="button" value="暂停" onclick="pauseClock()" /><input type="button" value="继续" onclick="continueClock()" /></body></html>
6. 数组
JavaScript 中也有一维数组和二维数组的概念
<!DOCTYPE html><html><head><meta charset="utf-8"><title>数组 array</title><script>document.write("<h3>一维数组，第一种声明方式</h3>");var arr = ["apple", "banana", "orange", "pear", "peach"];document.write("<h3>一维数组，第二种声明方式</h3>");var arr = new Array("apple", "banana", "orange", "pear", "peach")document.write("<h3>一维数组，第三种声明方式</h3>");var arr = new Array(5);arr[0] = "apple";arr[1] = "banana";arr[2] = "orange";arr.length = 2; // 只要前两个document.write("<h3>一维数组，第四种声明方式</h3>");var arr = new Array(5);arr["苹果"] = "apple";arr["香蕉"] = "banana";arr["橘子"] = "orange";document.write("<h3>二维数组，第一种声明方式</h3>");var arr = new Array(3);arr[0] = ["昌平区", "海淀区", "东城区", "西城区", "丰台区"];arr[1] = ["石家庄","邯郸","保定","承德","张家口","沧州"];arr[2] = ["郑州","开封","洛阳","信阳","南阳","安阳"];document.write("<h3>二维数组，第二种声明方式</h3>");var arr = new Array(3);arr["北京市"] = ["昌平区", "海淀区", "东城区", "西城区", "丰台区"];arr["河北市"] = ["石家庄","邯郸","保定","承德","张家口","沧州"];arr["河南市"] = ["郑州","开封","洛阳","信阳","南阳","安阳"];</script></head><body></body></html>
7. 事件
事件是可以被 JavaScript 侦测到的行为，比如可以在用户点击某按钮时产生一个 onClick 事件来触发某个函数
事件通常与函数配合使用，这样就可以通过发生的事件来驱动函数执行
<input type="button" value="计算" onclick="calc()"/>
<!DOCTYPE html><html><head><meta charset="utf-8"><title>事件</title><script>function changeNum() {var showDiv = document.getElementById("showDiv");var value = parseInt(showDiv.innerHTML) + 1;showDiv.innerHTML = value;}</script></head><body><div id="showDiv" style="width: 400px; height: 300px; background-color: greenyellow"onmouseover="this.style.backgroundColor='yellow'"onmouseout="this.style.backgroundColor='greenyellow'"onmousemove="changeNum()">0</div></body></html>
8. DOM 和 BOM
什么是 BOM？
BOM是Browser Object Model的简写，即浏览器对象模型由一系列对象组成，是访问、控制、修改浏览器的属性的方法BOM没有统一的标准(每种客户端都可以自定标准)BOM的顶层是window对象
什么是DOM？
DOM是Document Object Model的简写，即文档对象模型DOM用于XHTML、XML文档的应用程序接口(API)DOM提供一种结构化的文档描述方式，从而使HTML内容使用结构化的方式显示DOM由一系列对象组成，是访问、检索、修改XHTML文档内容与结构的标准方法DOM标准是由w3c制定与维护，DOM是跨平台与跨语言的DOM的顶层是document对象 BOM 是为了操作浏览器出现的 API，window 是其根对象。DOM 是为了操作文档出现的 API，document 是其根对象 BOM 是为了操作浏览器出现的 API，window 是其根对象。DOM 是为了操作文档出现的 API，document 是其根对象
8.1 BOM—window对象
window对象是BOM的根对象，代表整个浏览器窗口
window的常用属性：
window的常用方法：
<!DOCTYPE html><html><head><meta charset="utf-8"><title>window窗口对象</title><script>function testAlert() {window.alert("我是警告窗口")}function testConfirm() {var flag = window.confirm("我是确认窗口");if (flag) {alert("点击了确定按钮")}}function testPrompt() {window.prompt("我是输入框，请输入内容", "默认内容")}function openWin() {window.open("要打开的地址")}function openWin2() {window.open("新文件.html", "", "left=200, top=100, height=200, width=400, status=1,toolbar=no")}function closeWin() {window.close();}</script></head><body><input type="button" value="警告窗口" onclick="testAlert()" /> <br><br><input type="button" value="确认窗口" onclick="testConfirm()" /> <br><br><input type="button" value="提示输入窗口" onclick="testPrompt()" /> <br><br><input type="button" value="弹出窗口" onclick="openWin()" /> <br><br><input type="button" value="弹出定制窗口" onclick="openWin2()" /> <br><br><input type="button" value="关闭窗口" onclick="closeWin()" /></body></html>
location、history、navigator对象
window的子对象
location对象：代表当前打开窗口的URL 主机名：location.hostname;端口名：location.port;主机名+端口名：location.host;当前文档URL：location.href;（http://localhost:8080/demo/index.html）刷新页面：location.reload();history对象：有关客户访问过的URL的信息back() 后退到前一个页面 go(-1)forward() 前进到后一个页面 go(1)go(n) 直接前进到第n个页面go(-n) 直接后退到第n个页面 navigator对象：管理浏览器基本信息浏览器名称：navigator.appName浏览器版本：navigator.appVersion浏览器类型：navigator.userAgent
<!-- 超链接当作按钮使用 --><a href="javascript:void(0)" onclick="history.forward()">前进</a>
8.2 DOM
整个的 HTML 结构可以抽象为一棵树，最顶层元素为 document，属于window对象的子对象
注释也算为一个节点
DOM节点分类：
元素节点：element node：<a href="链接地址">我的链接</a>属性节点：attribute node：href="链接地址"文本节点：text node：我的链接
DMO节点关系：
父子关系（parent-child） html 元素作为父级，body 和 head 元素作为子级 兄弟关系（Sibling） a 和 h1 元素就是兄弟关系
查询元素
直接查询：
getElementById( )：通过 id 找对象，返回一个节点对象getElementsByName( )：通过 name 找对象，返回多个节点（数组）getElementsByTagName( )：通过 标签名 找对象，返回多个节点（数组）
间接查询（通过节点层次查找，先通过 getElementById() 获得一个元素）：
父节点：parentNode孩子节点： childNodes 数组对象，表示该节点的所有子节点firstChild：第一个孩子节点 兄弟节点：nextSibling， previousSibling
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><script>// ============ 直接获取 =============function getElemByIdDemo() {var elem = document.getElementById("username");console.info(elem)console.info(elem.type + ' ' + elem.value)}function getElemByNameDemo() {var hobbyArr = document.getElementsByName("hobby");for (var i = 0; i < hobbyArr.length; i++) {console.info(hobbyArr[i])}}function getElemByTagNameDemo() {var tagArr = document.getElementsByTagName("input");for (var i = 0; i < tagArr.length; i++) {console.info(tagArr[i])}}// ============ 间接获取 =============function parentNodeDemo() {var elem = document.getElementById("username");console.info(elem)var parentNode = elem.parentNode;console.info(parentNode)}function childNodesDemo() {var elem = document.getElementById("professional");var childNodes = elem.childNodes;for (var i = 0; i < childNodes.length; i++) {// 通过节点的层次来判断 1元素节点 2属性节点 3文本节点if (childNodes[i].nodeType == 1) {console.info(childNodes[i])}}}function siblingsDemo() {var elem = document.getElementById("p2");var nextSibling = elem.nextElementSibling; // elem.nextSibling.nextSiblingconsole.info(nextSibling)}window.onload = siblingsDemo;</script></head><body><form action="" id="form1">用户名：<input type="text" name="username" id="username" value="请输入姓名"> <br>密码：<input type="password" name="pwd" id="pwd"> <br>爱好：<input type="checkbox" name="hobby" value="music" checked> 音乐<input type="checkbox" name="hobby" value="sports"> 体育<input type="checkbox" name="hobby" value="art"> 美术 <br>职业：<select name="professional" id="professional"><option value="1">工人</option><option value="2" id="p2">农民</option><option value="3" selected="selected">解放军</option><option value="4">知识分子</option></select><br><input type="button" value="提交" onclick="submitForm()"></form></body></html>
