1、JavaScript简介
一、什么是JavaScript
- Javascript：基于对象和事件驱动的语言，应用于客户端
- 基于对象：不同于java的new对象。js提供好了很多对象，可以直接使用
- 事件驱动：html做网站静态效果，js动态效果
- 客户端：专门指浏览器
注：浏览器中的控制台可以调试js代码（区分大小写，html不区分）
二、JavaScript特点
- 交互性：信息的动态交互
- 安全性：js不能访问本地磁盘的文件
- 跨平台性：支持js的浏览器都可以运行
三、Java和JavaScript区别
- 不同公司开发的，是不用的语言
- Java是面向对象 ，js是基于对象的
- java是强类型的语言，js是弱类型的语言
- java需要先编译成字节码文件再执行；js只需要解析就可以执行
四、JavaScript组成部分
- ECMScript
- ECMA：欧洲计算机协会
- 由ECMA组织指定的js的语法，语句等
- BOM
- brower object model：浏览器对象模型
- DOM
- document objct model：文档对象模型
五、JavaScript和HTML的2种结合方式★★★
-
使用一个标签
<script type="text/javascript"> //js代码，例如： alert("弹窗"); </script> -
使用script标签，引入一个外部的js文件
<script type="text/javascript" src="1.js"> </script>注：1、这是script标签内部的代码不会被执行，所以不能再里面写代码
六、JavaScript的原始类型和声明变量
-
原始类型
- string(字符串),
- number(数字类型),
- boolean(true和false)
- null:获取对象的引用，null表示对象引用为空，所有对象的引用也是Object
- undifined:定义一个未赋值的变量
-
声明变量：都用var
<script type="text/javascript"> var str = "abc";//string var mm = 123;//number var flag = true;//boolean var date = new Data();//null var x;//undifined alert(typeof(str)); </script> -
查看变量类型：typeof（变量名）
七、JavaScript语句
-
if 判断语句：同java中的if-else语句
-
switch语句
switch(a){ case:1 alert("2"); break； case:2 alert("2"); break； default: alert("other"); break； }- 区别于java，js中switch支持所有的原始类型
-
循环语句（for,while）
while(i>1){ alert(i); i--; } for(var m=0; m<=5; m++){ alert(m); }
八、JavaScript运算符
- 基本操作和java相同，以下为不同的地方：
- 在js里面不区分整数和小数，123/1000=0.123
- 数字字符串：
- 相加的时候和java一样（“123”+1—>1231）
- 相减时做的是数字的相减运算（“123”-1—>122）（不是数字字符串时提示NaN）
- boolean类型（true会输出为1，false会输出为0）
- 和=的区别：★面试★
- ==比较的是值，
- ===比较的是值和类型
- 补充：直接向页面输出语句（可以输出变量、固定值、标签、代码）
document.write("aaaa");
document.write("<br/>")；
- 注：在输出语句时，设置标签属性的值要使用单引号
九、JavaScript的数组★★★
-
三种定义方式★★★★★
var arr = [1,2,“3”,true];//可以存放不同的数据类型 var arr1 = new Array(5);//使用内置对象Array对象,未存放数据 var arr2 = new Array(6,7,8);//使用内置对象Array，并存入六个元素6，7，8 -
数组的属性值：arr.length； //获取长度
十、JavaScript的函数
- 三种定义方式
-
使用到关键字function
function 方法名(参数名称1,参数名称2,...) { 方法体; 【返回值;】 } -
匿名函数
var add1 = function(参数名称1，参数名称2，...){ 方法体； } -
使用到js里面的内置对象：Function
-
var add2 = new Function("参数名称1，参数名称2，..."，“方法体和返回值”)；
- 方法的重载：★面试题★
-
js的函数不存在重载，会调用方法名相同的最后一个方法
-
但是可以通过用arguments数组实现模拟重载
function add(){//所有传入的参数都会存到arguments数组中 if(arguments.length==2)//传入参数为2个 return arguments[0]+arguments[1]; else if(arguments.length==3)//传入参数为3个 return arguments[0]+arguments[1]+arguments[2]; else return 0； } add(1,2); //3 add(1,2,3); //6 add(1,2,3,4); //0
十一、JavaScript的全局变量和局部变量
- 全局变量：在script标签里面定义的一个变量，这个变量在页面中js部分都可以使用（其它的script标签也可以使用）
- 局部变量：在方法内部定义的一个变量，只能在方法内部使用
十二、Script标签的位置
- 一般放在</body>后面，以免产生对象为空的错误。因为：浏览器是顺序解析，可能还未解析到js中所使用的对象的那一行
2、JavaScript常见对象
注：最重要的不是记住这些对象的方法，而是学会查阅文档√√√√
一、string对象
- 创建String对象：var str = “abc”;
- 获取其长度(属性)：str.length
- 两类常用方法：
-
与html相关的方法（设置数据样式的方法）
方法 解释 bold（） 加粗字符串 fontcolor（“red”） 字符串颜色 fontsize（1-7） 字体大小 link（1.html） 将字符串设置为超链接到1.html sub（）、sup（） 设置为下标、上标 -
与java相似的方法
方法 解释 str1.concat(str2) 字符串连接 charAt(i) 返回指定位置的字符 indexOf(“a”) 返回a所在位置 split(",") 根据逗号“，”切分字符串，并返回一个字符数组 replace(“a”,“A”) 替换 substr(5,3) 从5开始向后截取三个字符 substring(3,5) 截取[3,5)的字符
二、Array对象
-
创建数组：参考上文（三种方法）
-
获取其长度(属性)：arr.length
-
常用方法：
方法 解释 concat（） 拼接 join（“-”） 用“-”分割数组的每个元素（默认使用的是逗号） push（） 向数组末尾添加元素，返回新长度(添加数组时，数组整体也会被当做一个元素，长度也是+1，遍历的时候也是作为一个元素) pop（） 删除最后一个元素，返回删除的元素 reverse（） 反转
三、Date对象
-
获取当前时间：var date = new Date(); //Fri Apr 17 10:40:46 UTC+0800 2016
-
转换为习惯的格式：date.toLocaleString（）;
-
常用方法：
方法 解释 getFullYear() 年 getMonth（）+ 1 月（范围是0-11） getDate（） 日 getDay（） 星期几（0-6：周天到周六） getHours（）、
getMinutes（）、
getSecond（）时分秒 getTime（） 1970-1-1至今的毫秒数
可以用于处理缓存
四、Math对象
-
都是静态方法，直接使用Math.方法（）
-
常用方法：
方法 解释 ceil（）、floor（） 向上取整、向下取整 round（） 四舍五入 random（） 0-1之间的伪随机数 pow（x，y） x的y次方
五、全局函数
-
全局函数：不属于任何一个对象，通过方法名称直接使用
-
常用方法：
方法 解释 eval（str） 如果字符串中有js代码，就按照js代码执行 encodeURI（）
decodeURI（）对字符进行编码/解码 encodeURIComponent（）
decodeURIComponent（）同上 isNaN（） 是数字返回false，不是数字返回true parseInt（） 字符串—>整数
3、JavaScript中的bom和dom对象
一、bom对象
-
bom：broswer object model（浏览器对象模型）
-
常用对象（使用方法：对象名.属性/方法）
对象 解释 常用属性 常用方法 navigator 获取客户机（浏览器）信息 appName screen 屏幕信息 width
lengthlocation 请求url地址 href：获取/设置请求的url地址 history 请求过的url地址 back（）
forward（）
go（-1or1） -
window对象的方法★★★
| 方法 | 解释 |
|---|---|
| alter（） | 弹窗 |
| confirm（）★ | 确认提示框，返回值为true和false |
| prompt（显示提示内容，输入框默认值） | |
| open（URL，name，features）★ | |
| close() | 关闭窗口提示， |
| 【笔试】setInterval(“js代码”，毫秒数)★ | 每隔X毫秒就执行一次js代码 |
| 【笔试】setTimeout(“js代码”，毫秒数)★ | 在X毫秒之后执行js代码 |
| clearInterval(id)★ | 清除setInterval设置的定时器（定时器会返回id值） |
| clearTimeout(id)★ | 清除setTimeout设置的定时器（定时器会返回id值） |
二、dom对象
- dom:document object model（文档对象模型）
- 文档：专门指的是超文本标记文档
- 对象：提供了属性和方法
- 模型：使用属性和方法来操作超文本文档
- 作用：可以通过使用dom里面提供的对象，使用这些对象的属性和方法（★★★），对标记型文档进行操作
- 对标记型文档进行操作：要想进行操作文档，首先把文档里的所以内容（包括：标签、属性、文本内容）封装成对象
-
dom解析html的原理：
根据html的层级结构，会在内存中分配一个树形结构 -
DHTML
- DHTML:多种技术综合的简称
- 包含的技术：
- html：封装数据
- css：使用属性和属性值设置样式
- dom：操作html文档
- javascript：专门指的是js的语法语句。即ECMAScript
- document对象
| 常用方法 | 解释 | 举例 |
|---|---|---|
| write（） | 向页面输出内容或html代码 | |
| getElementById（）★★★ | 通过标签id得到标签对象 | 得到标签对象后可以通过属性输出或设置相应的值 |
| getElementsByName（）★ | 返回所有和name值相同的标签对象的数组 | |
| getElementsByTagName（）★ | 返回所有和标签名相同的标签对象的数组 |
- element对象
-
element对象获取方法：通过document对象里面的方法获取
-
element对象中的常用方法：
- getAttribute(“属性名”); //获取属性值
- setAttribute(“属性名”，“属性值”); //设置属性的属性值
- emoveAttribute(“属性名”); //删除属性，不能删除
-
补充：获取列表标签下的子列表标签：唯一有效方法是getElementsByTagName（）
<ul id="ulid1"> <li>aaaa</li> <li>bbbb</li> <li>cccc</li> </ul> <spript type="text/javaspript"> var ull1 = document.getElementById("uliid1"); var lis = ull1.childNode;//返回element对象ull1下子类标签的数组（Node对象中的方法，兼容性差） var lis1 = ull1.getElementsByTagName("li");//唯一有效方法 </spript>
- Node对象
-
Node对象的属性一：
- nodeType
- nodeName
- nodeValue
-
标签、属性、文本分别对应的值
标签 属性 文本 nodeType 1 2 3 nodeName 大写的标签名称 属性的名称 #text nodeValue null 属性的值 文本的内容 -
Node对象的属性二
- 父节点
- parentNode：获取父节点
- 子节点
- firstChild：获取第一个子节点（兼容性差）
- lastChild：获取最后一个子节点
- 同辈节点
- nextSibling：：获取下一个同辈节点
- previouSibling：获取上一个同辈节点
- 父节点
- innerHTML标签属性★★★
- 不是dom的组成部分，但大多数浏览器都支持的属性（因此多用这个）
- 作用：
- 获取文本内容
- 向标签里面设置内容（内容是html代码）