快速上手系列：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.

　　　　***外国人，把星期日作为一周的第一天，星期日返回的是 0，而星期一到星期六，返回的是 1-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 = \” 方法名( ‘ 字符串 ”+变量值+ ” ‘ ) \”

总之，要想在字符串里拼入数值，引号得加到数值变色才行。

我觉得，在多层引号的情况下，一般都是单引号里面是字符串，双引号里面是数值