1、JavaScript简介

一、什么是JavaScript

1. Javascript：基于对象和事件驱动的语言，应用于客户端
   • 基于对象：不同于java的new对象。js提供好了很多对象，可以直接使用
   • 事件驱动：html做网站静态效果，js动态效果
   • 客户端：专门指浏览器
     注：浏览器中的控制台可以调试js代码（区分大小写，html不区分）

二、JavaScript特点

1. 交互性：信息的动态交互
2. 安全性：js不能访问本地磁盘的文件
3. 跨平台性：支持js的浏览器都可以运行

三、Java和JavaScript区别

1. 不同公司开发的，是不用的语言
2. Java是面向对象 ，js是基于对象的
3. java是强类型的语言，js是弱类型的语言
4. java需要先编译成字节码文件再执行；js只需要解析就可以执行

四、JavaScript组成部分

1. ECMScript
   • ECMA：欧洲计算机协会
   • 由ECMA组织指定的js的语法，语句等
2. BOM
   • brower object model：浏览器对象模型
3. DOM
   • document objct model：文档对象模型

五、JavaScript和HTML的2种结合方式★★★

1. 使用一个标签

   <script type="text/javascript">
   		//js代码，例如：
       alert("弹窗");
   </script>
   

2. 使用script标签，引入一个外部的js文件

   <script type="text/javascript" src="1.js"> </script>
   

   注：1、这是script标签内部的代码不会被执行，所以不能再里面写代码

六、JavaScript的原始类型和声明变量

1. 原始类型

   • string(字符串),
   • number(数字类型),
   • boolean(true和false)
   • null:获取对象的引用，null表示对象引用为空，所有对象的引用也是Object
   • undifined:定义一个未赋值的变量

2. 声明变量：都用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>
   

3. 查看变量类型：typeof（变量名）

七、JavaScript语句

1. if 判断语句：同java中的if-else语句

2. switch语句

   switch(a){
   	case:1
   		alert("2");
   		break；
   	case:2
   		alert("2");
   		break；
   	default:
   		alert("other");
   		break；
   }	
   

   • 区别于java，js中switch支持所有的原始类型

3. 循环语句（for,while）

   while(i>1){
   	alert(i);
   	i--;	
   }
   
   
   for(var m=0; m<=5; m++){
         alert(m);
   }
   

八、JavaScript运算符

• 基本操作和java相同，以下为不同的地方：
  1. 在js里面不区分整数和小数，123/1000=0.123
  2. 数字字符串：
     1. 相加的时候和java一样（“123”+1—>1231）
     2. 相减时做的是数字的相减运算（“123”-1—>122）（不是数字字符串时提示NaN）
  3. boolean类型（true会输出为1，false会输出为0）
  4. 和=的区别：★面试★
     1. ==比较的是值，
     2. ===比较的是值和类型
  5. 补充：直接向页面输出语句（可以输出变量、固定值、标签、代码）

	document.write("aaaa");
	document.write("<br/>")；

• 注：在输出语句时，设置标签属性的值要使用单引号

九、JavaScript的数组★★★

1. 三种定义方式★★★★★

   var arr = [1,2,“3”,true];//可以存放不同的数据类型
   var arr1 = new Array(5);//使用内置对象Array对象,未存放数据
   var arr2 = new Array(6,7,8);//使用内置对象Array，并存入六个元素6，7，8
   

2. 数组的属性值：arr.length； //获取长度

十、JavaScript的函数

1. 三种定义方式

• 使用到关键字function

  function 方法名(参数名称1,参数名称2,...) {
  	方法体;
  	【返回值;】
  }
  

• 匿名函数

  var add1 = function(参数名称1，参数名称2，...){
  	方法体；
  }
  

• 使用到js里面的内置对象：Function

•   var add2 = new Function("参数名称1，参数名称2，..."，“方法体和返回值”)；
  

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,3);  //6
  	add(1,3,4);  //0
  
  

十一、JavaScript的全局变量和局部变量

• 全局变量：在script标签里面定义的一个变量，这个变量在页面中js部分都可以使用（其它的script标签也可以使用）
• 局部变量：在方法内部定义的一个变量，只能在方法内部使用

十二、Script标签的位置

1. 一般放在</body>后面，以免产生对象为空的错误。因为：浏览器是顺序解析，可能还未解析到js中所使用的对象的那一行

2、JavaScript常见对象

注：最重要的不是记住这些对象的方法，而是学会查阅文档√√√√

一、string对象

1. 创建String对象：var str = “abc”;
2. 获取其长度(属性)：str.length
3. 两类常用方法：

• 与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对象

1. 创建数组：参考上文（三种方法）

2. 获取其长度(属性)：arr.length

3. 常用方法：

   方法	解释
   concat（）	拼接
   join（“-”）	用“-”分割数组的每个元素（默认使用的是逗号）
   push（）	向数组末尾添加元素，返回新长度(添加数组时，数组整体也会被当做一个元素，长度也是+1，遍历的时候也是作为一个元素)
   pop（）	删除最后一个元素，返回删除的元素
   reverse（）	反转

三、Date对象

1. 获取当前时间：var date = new Date(); //Fri Apr 17 10:40:46 UTC+0800 2016

2. 转换为习惯的格式：date.toLocaleString（）;

3. 常用方法：

   方法	解释
   getFullYear()	年
   getMonth（）+ 1	月（范围是0-11）
   getDate（）	日
   getDay（）	星期几（0-6：周天到周六）
   getHours（）、 getMinutes（）、 getSecond（）	时分秒
   getTime（）	1970-1-1至今的毫秒数 可以用于处理缓存

四、Math对象

1. 都是静态方法，直接使用Math.方法（）

2. 常用方法：

   方法	解释
   ceil（）、floor（）	向上取整、向下取整
   round（）	四舍五入
   random（）	0-1之间的伪随机数
   pow（x，y）	x的y次方

五、全局函数

1. 全局函数：不属于任何一个对象，通过方法名称直接使用

2. 常用方法：

   方法	解释
   eval（str）	如果字符串中有js代码，就按照js代码执行
   encodeURI（） decodeURI（）	对字符进行编码/解码
   encodeURIComponent（） decodeURIComponent（）	同上
   isNaN（）	是数字返回false，不是数字返回true
   parseInt（）	字符串—>整数

3、JavaScript中的bom和dom对象

一、bom对象

1. bom：broswer object model（浏览器对象模型）

2. 常用对象（使用方法：对象名.属性/方法）

   对象	解释	常用属性	常用方法
   navigator	获取客户机（浏览器）信息	appName
   screen	屏幕信息	width length
   location	请求URL地址	href：获取/设置请求的URL地址
   history	请求过的URL地址		back（） forward（） go（-1or1）

3. window对象的方法★★★

二、dom对象

1. dom:document object model（文档对象模型）

• 文档：专门指的是超文本标记文档
• 对象：提供了属性和方法
• 模型：使用属性和方法来操作超文本文档

2. 作用：可以通过使用dom里面提供的对象，使用这些对象的属性和方法（★★★），对标记型文档进行操作

• 对标记型文档进行操作：要想进行操作文档，首先把文档里的所以内容（包括：标签、属性、文本内容）封装成对象

3. dom解析html的原理：
   根据html的层级结构，会在内存中分配一个树形结构

4. DHTML

• DHTML:多种技术综合的简称
• 包含的技术：
  • html：封装数据
  • css：使用属性和属性值设置样式
  • dom：操作html文档
  • javascript：专门指的是js的语法语句。即ECMAScript

5. document对象

6. 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>
  

7. Node对象

• Node对象的属性一：

  • nodeType
  • nodeName
  • nodeValue

• 标签、属性、文本分别对应的值

  	标签	属性	文本
  nodeType	1	2	3
  nodeName	大写的标签名称	属性的名称	#text
  nodeValue	null	属性的值	文本的内容

• Node对象的属性二

  • 父节点
    • parentNode：获取父节点
  • 子节点
    • firstChild：获取第一个子节点（兼容性差）
    • lastChild：获取最后一个子节点
  • 同辈节点
    • nextSibling：：获取下一个同辈节点
    • prevIoUSibling：获取上一个同辈节点

8. innerHTML标签属性★★★

• 不是dom的组成部分，但大多数浏览器都支持的属性（因此多用这个）
• 作用：
  • 获取文本内容
  • 向标签里面设置内容（内容是HTML代码）