快速上手系列：JavaScript
第一章 基础语法
1 javascript 的简介
* 是基于对象和事件驱动的语言，应用于客户端。
- 基于对象：
** 提供好了很多对象，可以直接拿过来使用
- 事件驱动：
** html 做网站静态效果，javascript 动态效果
- 客户端：专门指的是浏览器
* 特点：
（1） 交互性（信息的动态交互）
（2） 安全性（不可以直接访问本地硬盘）
（3） 跨平台性（只要是可以解析 js 的浏览器都可以执行，和平台无关）
* javascript 和 java 的区别：（雷锋和雷锋塔）
（1） javascript 是基于对象，java 面向对象
（2） javascript 是弱类型语言，java 是强类型语言
- 比如 java 里面不可以 int i = “10”;
- js: var i = 10; var m = “10”;都可以
（3） javascript 只需解析就可以执行，而 java 需要先编译成字节码文件，再执行。
* javascript 的组成
三部分组成：
（1）ECMAScript
a) ECMA: 欧洲计算机协会
b) 由 ECMA 组织制定 js 的语法、语句……
（2）BOM
a) browser object model ：浏览器对象模型
（3）DOM
a) document object model ：文档对象模型
2 js 和 html 的结合方式（两种）
第一种：
- 使用一个标签<script type=”text/javascript”> js 代码; </script>
第二种：
- 使用 script 标签，引入一个外部的 js 文件
** 创建一个 js 文件，写 js 代码，然后导入 - <script type=”text/javascript” src=”1.js”></script>
** 使用第二种方式的时候，就不要在 script 标签里写代码了，不会执行。
3 js 的原始类型和声明变量
** java 的基本数据类型 byte short int long float double char boolean
** 定义变量 都使用关键字 var
** js 的原始类型（五个）
- string：字符串
*** var str = “abc”;
- number: 数字类型
***var m=123;
- boolean: true 和 false
*** var flag = true;
- null
*** var date = new Date();
*** 获取对象的引用，null 表示对象引用为空，所有对象的引用也是 object
- undefined
*** 定义一个变量，没有赋值
*** var aa;
** typeof(); 查看当前变量的数据类型
4 js 的语句
- java 里的语句：
** if 判断
** switch 语句
** 循环 for while do-while
- js 里面的这些语句
** if 判断语句
条件如果直接写=号，那就是赋值操作。
** switch 语句
与 java 中的一样。
** for 循环也和 java 中的一样，但要注意定义变量时使用 var，不要写成 java 的 int。
** i++ ++i 和 java 里面一样
5 js 的运算符
** 运算符和 java 里一样
** js 里面不区分整数和小数
var j = 123;
Alert(j/1000*1000);
在 java 里得到结果是 0；在 js 里得到结果是 123.
** 字符串的相加和相减的操作
var str = “123”;
*** 如果相加的时候，做的是字符串连接
*** 如果相减，做的事相减的运算
* 提示 NaN：表示不是一个数字
** boolean 类型也可以操作
***如果设置成 true，相当于这个值是 1
***如果设置成 false，相当于这个值是 0
** ==和===区别
** 做判断
** ==比较的只是值
** === 比较的是值和类型
** 引入知识
直接向页面输出的语句（可以把内容显示在页面上）
document.write(“aaa”);
document.write(“<hr/>”);
可以向页面输出变量，固定值和 html 代码
6 js 的数组
* 定义方式（三种）
第一种： var arr = [1,2,3] ; var arr = [1,”4”,true] ;
第二种： 使用内置对象 Array 对象
var arr1 =new Array(5) ;//定义一个数组，长度是 5
arr1[0] = “1”;
第三种： 使用内置对象 Array
var arr2 = new Array(3,4,5) ; //定义一个数组，元素是 3，4，5
* length：获取数组长度
* 数组可以存放不同数据类型的数据
7 js 的函数
*在 js 里面定义函数（方法）有三种方式
** 第一种方式：
*** 使用到一个关键字 function
function 方法名（参数列表）{ 方法体； 返回值可有可无（根据实际需要） } //使用第一种方式创建函数： function test(){ alert(“qqq”); } //调用方法 //test(); //定义一个有参数的方法 实现两个数相加 function add1(a,b){ var sum = a+b; alert(sum); } //add1(2,3); //有返回值的效果 function add2(a,b,c){ var sum1 = a+b+c; return sum1; } alert( add2(3,4,5) );
** 第二种方式：
*** 匿名函数
var add = function(参数列表){ 方法体和返回值; } //第二种方式创建函数： var add3 = function(m,n){ alert(m+n); } //调用方法 add3(5,6);
** 第三种方式：（用的少，了解）
*** 动态函数
//使用到 js 里面的一个内置对象 Function var add = new Function (“参数列表”,”方法体和返回值”);
8 js 的全局变量和局部变量
全局变量：在 script 标签里面定义一个变量，这个变量在页面中 js 部分都可以使用
- 可以在方法外部使用，在方法内部使用，在另一个 script 标签使用
局部变量：在方法内部定义一个变量，只能在方法内部使用
9 script 标签放置的位置
建议把 script 标签放到</body>后面
10 js 的 String 对象
** 创建 String 对象
***var str = “abc”;
** 方法和属性（详见 w3school）
***属性 length: 字符串长度
***方法
（1）与 html 相关的方法
- bold():加粗
- fontcolor():设置字符串颜色
- fontsize():设置字体的大小
- link():将字符串显示成超链接
*** str4.link(“hello.html”)
- sub() sup():下标和上标
（2）与 java 相似的方法
- concat() : 连接字符串
- charAt() :返回指定位置的字符串。字符位置不存在，返回空字符串
- indexOf() :返回字符串位置。字符不存在，返回-1
- split() : 切分字符串，成数组
- replace(): 替换字符串
- substr():从第几位开始，向后截取几位
- substring()：从第几位开始，到第几位结束，包左不包右
11 js 的 Array 对象
** 方法（常用）
- concat()：数组的连接
- join() : 根据指定的字符分割数组。如 document.write( arr.join(“-”) );
- push() : 向数组末尾添加元素，返回数组的新的长度（如果添加一个数组，那么被添加的整个数组会被看作一个元素）
- pop() : 删除最后一个元素，并返回删除的那个元素
- reverse() : 颠倒数组中的元素的顺序
12 js 的 Date 对象
** 在 java 里面获取当前时间
Date date = new Date();
//格式化
//toLocaleString(); 直接格式化为中式表示法。
** js 里面获取当前时间
var date = new Date() ;
//转换成习惯格式
Document.write( date.toLocaleString() );
**获取当前年：getFullYear()
**获取当前月：getMonth()
***返回的是 0-11 月，如果得到精确的值，加 1
*** var date1 = date.getMonth()+1;
**获取当前的星期：getDay()
***返回的是 0-6.
**获取当前的日：getDate()
***返回当前的天 1-31
**获取当前的小时：getHours()
**获取当前的分钟：getMinutes()
**获取当前的秒：getSeconds()
**获取毫秒数：getTime()
***返回的是 1970.01.01 至今的毫秒数
***应用场景：
***使用毫秒数处理缓存的结果
13 js 的 Math 对象
**数学的运算
**里面的都是静态方法，可以直接使用 Math.方法()
** ceil(x):向上舍入（进一法）
** floor(x):向下舍入
** round(x):四舍五入
** random():得到随机数（伪随机数） - 得到 0-9 的随机数
Math.random()*10
Math.floor(Math.random()*10)
14 js 的全局函数
* 由于不属于任何一个对象，直接写名称使用。（要执行的内容写在括号里面）
** eval() : 执行 js 代码（如果字符串是一个 js 代码，使用此方法直接执行，也就是说，此方法会自动识别字符串里的 js 方法并执行了） *** var str = “alert(‘1234’);”; alert(str);//输出：alert(‘1234’); eval(str);//输出：1234 ** encodeURI() :对字符进行编码 decodeURI() :对字符进行解码 encodeURIComponent() 和 decodeURIComponent() 跟上面俩功能一样，只是少了几个不编码字符。 ** isNaN() : 判断当前字符串是否是数字（NaN 的意思是：不是数字） -- var str2 = “aaaa”; alert( isNaN(str2) ); *** 如果是数字，返回 false *** 如果不是数字，返回 true ** parseInt() : 类型转换 *** var str3 = “123”; document.write( parseInt(str3)+1 );//输出：124
15 js的函数的重载
** js 的重载是否存在？ 不存在
** 调用最后一个方法
** 把传递的参数保存到了 arguments 数组里面
** js 里面是否存在重载？（面试题目）
（1）js 里面不存在重载。
（2）但是可以通过其他方式模拟重载的效果（通过 arguments数组来实现）
function add(){ if(arguments.length==2){ return arguments[0]+arguments[1]; } } alert( add(1,2) );输出 3
第二章 javascript的 bom对象
** bom：browser object model 浏览器对象模型
** 有哪些对象？
*** navigator: 获取客户机的信息（浏览器的信息）
- navigator.appName
- document.write(navigator.appName);//输出：浏览器的名字
*** screen：获取屏幕信息
- document.write(screen.width);//输出宽度
- document.write(screen.height);//输出高度
*** location：请求 url 地址
- href 属性 *** 获取到请求的 url 地址
- document.write( location.href );
**** 设置 url 地址
- 页面上安置一个按钮，按钮上绑定一个事件，当我点击这个按钮，页面可以跳转到另外一个界面
- location.href = “hello.html”; //这是 function 里的方法体
*** <input type=”button” value=”跳转” onclick=” href1(); ”/>
- 鼠标点击事件 onclick = “js 的方法; ”
*** history ：请求的 url 的历史记录
- 到访问的上一个页面
history.back() ;
history.go(-1) ;
- 到访问的下一个页面
history.forward() ;
history.go(1) ;
****window:
* 窗口对象
* 顶层对象（所有的 bom 对象都是在 window 里面操作的）
** 方法
- window.alert() : 页面弹出一个框，显示内容
** 简写 alert()
- confirm() : 确认框
- var flag = window.confirm(“显示的内容”);//返回 boolean类型
- prompt() : 输入的对话框
- window.prompt( “显示的内容” , ”输入框里的默认值” ) ;
- open() : 打开一个新的窗口
** open(“打开的新窗口的 url 地址”, ” ”,”窗口特征，比如宽高”)
- 创建一个按钮，点击这个按钮，打开一个新的窗口
- window.open(“hello.html”, “ “ ,”width=200,height=100”);
- close() : 关闭窗口（浏览器兼容性比较差）
- window.close();
- 做定时器
** setInterval ( “js 代码”, 毫秒数)
- window.setInterval (“alert(‘123’);” , 3000);//表示每三秒，执行一次 alert 方法
** setTimeout(“js 代码”, 毫秒数)
- 表示在毫秒数之后执行，但是只会执行一次
** clearInteval() : 清除 setInterval 设置的定时器
var id1 = setInterval (“alert(‘123’);”,3000);//通过setInterval会有个返回值
clearInterval (id1);//清除它
** clearTimeout() : 清除 setTimeout 设置的定时器
var id2 = setTimeout (“alert(‘abc’),4000);
clearTimeout (id2);
第三章 javascript的 dom对象
* dom: document object model 文档对象模型
** 文档：超文本文档（超文本标记文档）html 、xml
** 对象：提供了属性和方法
** 模型：使用属性和方法操作超文本标记型文档
*** 可以使用 js 里面的 dom 里面提供的对象，使用这些对象的属性和方法，对标记型文档进行操作
*** 要对标记型文档进行操作，首先需要对标记型文档里面的所以内容封装成对象
-- 需要把 html 里面的标签、属性、文本内容都封装成对象
*** 再解析标记型文档，解析过程如下
根据 html 的层级结构，在内存中分配一个树形结构，需要把 html 中的每部分封装成对象：
- document 对象：整个文档
- element 对象：标签对象
- 属性对象
- 文本对象
-- Node 节点对象：这个对象是这些对象的父对象
*** 如果在对象里面找不到想要的方法，就去 Node 对象里找
** DOM 模型历史：
DOM level 1：将 html 文档封装成对象。
DOM level 2：在 level 1 的基础上添加新功能，如对事件和 css 样式的支持。
DOM level 3：支持 xml1.0 的一些新特性。
*DHTML：是很多技术的简称
** html：封装数据
** css：属性值设置样式
** dom：操作 html 文档（标记型文档）
**javascript：专门指的是 js 的语法语句（ECMAScript）
1 document 对象
* 表示整个的文档
** 常用方法
*** write()方法：
（1）向页面输出变量（值）
（2）向页面输出 html 代码
*** getElementById() ;
- 通过 id 得到元素（标签）
- //使用 getElementById 得到 input 标签
var input1 = document.getElementById(“nameid”);//传递的参数是标签里面的 id 值
//得到 input 里面的 value 值
alert( input1.name ); // 标签对象.属性名称
//向 input 里面设置一个值 value
Input1.value = “bbb”;
*** getElementsByName()
- 通过标签的 name 的属性值得到标签
- 返回的是一个集合（数组）
- //使用 getElementsByName 得到标签
var inputs = document.getElementsByName(“name1”);//传递的参数是标签里的 name 值 //alert(inputs.length);
//遍历数组 for(var i = 0;i<inputs.length;i++){ //通过遍历数组，得到每个标签里面的具体值 var input1 = inputs[i]; //每次循环得到 input 对象，赋值到 input1 里面 alert(input1.value); //得到每个 input 标签里面的 value 值 }
*** getElementsByTagName(“标签名称”)
- 通过标签名称得到元素
- // 演示 getElementsByName
var inputs1 = document.getElementsByTagName(“input”); //传递的参数是标签名称 // alert(inputs1.length); //遍历数组，得到每个 input 标签 for(var m=0;m<inputs1.length;m++){ //得到每个 input 标签 var input1 = inputs1(m); //得到 value 值 alert(input1.value); }
2 document 相关案例的补充方法：
document.createElement(“标签名”) 创建相应标签
document.createTextNode(“文本内容”) 创建文本
要添加的.appendChild(被添加的对象) 添加子对象
3 元素对象（element 对象）
** 要操作 element 对象，首先必须要获取到 element
- 使用 document 里面相应的方法获取
** 方法
*** 获取属性里面的值
getAttribute(“属性名称”)
- var input1 = document.getElementById(“inputid”);
//alert(input1.value);
alert(input1.getAttribute(“value”));//此方法的优点在于，通过双引号，可以获取关键字的值。
*** 设置属性的值
input1.setAttribute(“class”,”haha”);//前面是属性名，后面是要设的值（也可以写成前面事件、后面方法）
*** 删除属性
input1.removeAttribute(“name”);
** 不能删除 value
** 想要获取标签下面的子标签，使用属性 childNodes，但是这个属性兼容性很差
** 获 得 标 签 下 面 子 标 签 的 唯 一 有 效 方 法 ， 使 用 getElementByTagName 方法
//获取 ul 下面的子标签
//var lis = ulll.childNodes;
//alert( lis.length );
var lis = ulll.getElementsByTagName(“li”);
alert(lis.length);
4 Node 对象属性
* nodeName
* nodeType
* nodeValue
* 使用 dom 解析 html 时候，需要 html 里面的标签，属性和文本都封装成对象
* 标签节点对应的值
nodeType: 1
nodeName：大写标签名称 比如 SPAN
nodeValue:null
* 属性节点对应的值
nodeType:2
nodeName: 属性名称
nodeValue: 属性的值
* 文本节点对应的值
nodeType: 3
nodeName: #text
nodeValue: 文本内容
5 Node 对象属性
* 父节点
- 如 ul 是 li 的父节点
- parentNode 得到父节点
* 子节点
- 如 li 是 ul 的子节点
- childNodes: 得到所有子节点，但是兼容性很差
- firstChild: 获取第一个子节点
-//得到 ul
var ul1 = document.getElementById( “ulid” ) ;
//第一个子节点
var li1 = ul1.firstChild;
- lastChild: 获取最后一个子节点
* 同辈节点
- nextSibling: 返回一个给定节点的下一个兄弟节点
- previousSiling: 返回一个给定节点的上一个兄弟节点
6 操作 DOM 节点树
* 插入节点
** appendChild()
- 添加子节点到末尾
- 特点：类似于剪切粘贴的效果
** insertBefore( newNode, oldNode )
- 在某个节点之前插入一个新的节点
- 通过父节点插入
// 如 ul.insertBefore( li2,li3);
- 两个参数
* 要插入的节点
* 在谁之前插入
- 插入一个节点，节点不存在，创建（标准的固定模式）
1、创建标签
2、创建文本
3、把文本添加到标签下面
// 没有 insertAfter()方法
* 删除节点
** removeChild()
- 通过父节点删除，不能自己删除自己
// 如 ul.removeChild( li2 );
* 替换节点
** replaceChild( newNode, oldNode )
- 不能自己替换自己，通过父节点替换（跟插入的操作相似）
- 两个参数
** 第一个参数：新的节点（替换成的节点）
** 第二个参数：旧的节点（被替换的节点）
* cloneNode( boolean) : 复制节点
- 复制完后还是通过父节点去 appendChild()添加
- 如 var ul2 = ul1.cloneNote( true );
7 innerHTML 属性
- 这个属性不是 dom 的组成部分，但是大多数浏览器都支持
第一个作用：获取文本内容
*** //获取 span 标签
var span1 = document.getElementById( “sid” );
alert( span1.innerHTML );
第二个作用：向标签里面设置内容（可以是 html 代码）
*** //向 div 里面设置内容<h1>AAA</h1>
//获取到 div
var div1 = document.getElementById( “div1” );
//设置内容
div1.innerHTML = “<h1>AAA</h1>”;
*** 练习 ：向 div 里添加一个表格
var tab = “<table>”;
tab += “</table>”;
//相当于 var tab = “<table></table>”;
div1.innerHTML = tab;
8 其他知识点：
* 复选框被选中： id.checked = true; （否则 false）
* 省市联动：
*创建一个页面，有两个下拉选择框
*在第一个下拉框里面有一个事件：改变事件 onchange 事件
-方法 add(this.value);表示当前改变的 option 里面的 value 值
写这道题得到的教训：
（不知为何，这个 add 方法要加数字才行，如 add1(),不然显示参数错误）
（js 代码要写一层 alert 一层，不然写完再调试有错会累死人的）
（每层得到的值都要 var 一个新变量去接收，不然会出错，自己还看不出来）
*创建一个二维数组，存储数据
* 每个数组中第一个元素是国家名称，后面的元素是国家里面的城市
/* 1、遍历二维数组
2、得到也是一个数组（国家对应关系）
3、拿到数组中的第一个值和传递过来的值作比较
4、如果相同，获取到第一个值后面的元素
5、得到 city 的 select
6、添加过去（使用）appendChild 方法
- 创建 option（三步） */
注意：由于每次都要向 city 里面添加 option，第二次添加，会追加。所以每次添加前，判断一下 city 里面是否有 option，如果有，删除
9 表单提交方式
* 使用 submit 提交
<form> …… <input type=”submit”/> </form>
* 使用 button 提交表单
- 代码
//实现提交方法
function form1() { //获取 form var form1 = document.getElementById( “form1” ); //设置 action form1.action = “hello.html”; //提交 form 表单 form1.submit(); }
* 使用超链接提交
- 代码 <a href = “hello.html ? username = 123456”>使用超链接提交</a> （问号后面是要提交的信息） * onclick : 鼠标点击事件 onchange :改变内容（一般和 select 一起使用） onfocus:得到焦点 onblur:失去焦点 （比如 input 的文本输入，设置这两个方法，点击输入框，value=””，文 本框清空，点别的地方，value=”默认文字” ,文本框恢复显示默认文本）
注意点：
1、js 中 的 方法 也 可以用 href 调用 ， 比如做 图 片 轮播 案 例时， 出 现 ：href=”javascript:chang(1)”
2、找父节点的小方法：
例如
var obj ;
obj.parentNode.removeChild( obj );
此外想获取某些标签都不需要用 id,例如直接写 document.body
3、这个字符串拼接时的引号是一大问题：
双引号里面是一般是单引号（这里面可以再写双引号）
或者 \” 内容\” （然后内容里再单引号，再往里则双引号）。
例如: onclick = \” 方法名( ‘ 字符串 ”+变量值+ ” ‘ ) \”
总之，要想在字符串里拼入数值，引号得加到数值变色才行。
我觉得，在多层引号的情况下，一般都是单引号里面是字符串，双引号里面是数值
