JavaScript学习笔记

JavaScript

概念：一门客户端脚本语言

* 运行在客户端浏览器中的。每一个浏览器都有JavaScript的解析引擎
* 脚本语言：不需要编译，直接就可以被浏览器解析执行了
* JavaScript = ECMAScript + JavaScript自己特有的东西（BOM + DOM）

功能

* 可以来增强用户和html页面的交互过程，可以来控制html元素，让页面有一些动态的效果，增强用户的体验

ECMAScript:客户端脚本语言的标准

1. 基本语法：

   1)与html结合方式
   	*内部JS：定义script，标签体内容就是js代码
   	*外部JS：定义script，通过src属性引入外部的js文件
   	*注意：script可以定义在html页面的任何地方，但是定义的位置会影响执行顺序。可以定义多个。
   2)注释 
   	* 单行注释：//注释内容
   	* 多行注释：/*注释内容**/
   3)数据类型
   	* 原始数据类型（基本数据类型）
   		1. number：数字。整数、小数、NaN（not a number 一个不是数字的数字类型）
   		2. string：字符串。字符串 “abc” "a" 'abc'
   		3. boolean: true和false
   		4. null:一个对象为空的占位符
   		5. undefind:未定义。如果一个变量没有给初始化值，则会被默认赋值为undfined 
   	* 引用数据类型：对象
   4)变量
   	* Java语言是强类型语言，而JavaScript是弱类型语言
   		* 强类型：在开辟变量存储空间同时，定义了空间将来存储数据的数据类型。只能存储固定类型的数据
   		* 弱类型：在开辟变量存储空间时，不定义空间将来的存储数据类型，可以存放任意类型的数据
   	* 语法：
   		* var 变量名 = 初始化值；
   5)运算符
   	1. 一元运算符：只有一个运算符的运算符
   		++，--，+（正号）
   		+（-）：正负号
   		注意：在js中，如果运算符不是运算符所要求的类型，那么js引擎会自动的将运算符进行类型转换
   			* 其他类型转number：
   			* string转number：按照字面值转换。如果字面值不是数字，则转为NaN（不是数字的数字）
   			* boolean转number：true转为1，false转为0
   	2. 算术运算符
   		+，-，*，/，% ...
   	3. 赋值运算符
   		=，+=，-+ ...
   	4. 比较运算符
   		 < ，> , >= , <= , == ，===（全等于）
   		比较方式：
   			* 类型相同：直接比较
   				字符串：按照字典顺序比较。按位逐一比较，直到得出大小为止。
   			* 类型不同：先进行类型转换，再比较
   				===：全等于。在比较之前，先判断类型，如果类型不一样，则直接返回false。
   	5. 逻辑运算符
   		&&，||，！
   		* 其他类型转boolean：
   			* number ：0或NaN为假，其他为真
   			* string：除了空字符串，其他都是true
   			* null&undefined：
   			* 对象：
   	6. 三元运算符
   		？  :
   6)流程控制语句:
   	1. if ... else ...
   	2. switch:
   		* 在JS中，switch语句可以接受任意的原始数据类型
   	3. while
   	4. do ... while ...
   	5. for
   

基本对象

1. Function：函数（方法）对象
   1）创建：

    	* var fun = new Function（形式参数列表，方法体）；
    	* function 方法名称（形式参数列表）{
    			方法体
    		}
    	* var 方法名 = function（形式参数列表）{
    		方法体
    	}
   

   2）属性：

    		length：代表形参的个数
   

   3）特点：

    * 方法定义，形参的类型不用写，返回值类型也不用写
    * 方法是一个对象，如果定义名称相同的方法，会覆盖
    * 在JS中，方法的调用只与方法的名称有关，和参数列表无关
    * 在方法声明中有一个隐藏的内置对象（数组）,arguments，封装所有的实际参数  
   

   4）调用：

    方法名称（实际参数列表）；
   

2. Array对象：数组对象
   1）创建：

    * var arr = new Array（元素列表）；
    * var arr = new Array（默认长度）；
    * var arr = [元素列表];
   

   2）方法：

    * join（参数）将数组中的元素按照指定的分隔符拼接为字符串
    * push（）：向数组的末尾添加一个或更多元素，并返回新的长度
   

   3）属性

    length：数组的长度
   

   4）特点

    * JS中，数组元素的类型可变的
    * JS中，数组长度可变的。
   

3. Date:日期对象
   1）创建：var data = new Data（）；
   2） 方法：

* toLocaleString（）：返回当前data对象对应的时间本地字符串格式
* getTime（）：获取毫秒值。返回当前如期对象描述的时间到1970年1月1日零点的毫秒值差

4. Math：数学对象
   1）创建

   * 特点：Math对象不用创建，直接使用。Math.方法名（）；
   

   2）方法

   * random（）：返回0~1之间的随机数。含0不含1
   * ceil（x）：对数进行上舍入
   * floor（x）：对数进行下舍入
   * round（x）：把数四舍五入为最接近的整数。
   

   3）属性：PI

5. RegExp：正则表达式对象
   1）正则表达式：定义字符串的组成规则。

    * 单个字符：[ ]
    	如：[a] [ab] [a-zA-Z0-9_]
    	特殊符号代表特殊含义的单个字符：
    	\d：单个数字字符[0-9]
    	\w：单个字符[a-zA-Z0-9_]
    * 量词符号：
    	？：表示出现0次或1次
    	*：表示出现0次或多次
    	+：表示出现1次或多次
    	{m,n}：表示 m <= 数量 <= n
    		* m如果缺省：{ ,n}：最多n次
    		* n如果缺省：{m, }最少m次
    * 开始结束符号
    		* ^：开始
    		* $：结束
   

   2）正则对象

    * 创建：
    	var reg = new RegExp（“正则表达式”）;
    	var reg = /正则表达式/;
    * 方法 :
    	test（参数）：验证指定的字符串是否符合正则定义的规范 
   

6. Global
   1）特点：全局对象，这个Global中封装的方法不需要对象就可以直接调用。方法名（）；
   2）方法：

    * encodeURI（）：url编码
    * decodeURI（）：url解码
    * encodeURIComponent（）：url编码，编码的字符更多
    * decodeURIComponent（）：url解码
    * parseInt（）：将字符串转为数字（逐一判断每一个字符串是否是数字，直到不是数字为止，将前边数字部分转为number）
    * isNaN（）：判断一个值是否是NaN。（NaN参与的比较全部为false）
    * eval（）：计算JavaScript字符串，并把它作为脚本代码来执行
   

BOM

1. 概念：Browser Object Model 浏览器对象模型
   * 将浏览器的各个组成部分封装成对象。

2. 组成：
   * windows：窗口对象
   * Navigator：浏览器对象
   * Screen：显示器屏幕对象
   * History：历史记录对象
   * Location：地址栏对象

3. window：窗口对象
   1）创建
   2）方法

    * 与弹出框有关的方法
    	alert（）显示带有一段消息和一个确认按钮的警告。
    	confirm（）显示带有一段消息以及确认按钮和取消按钮的对话框
    		* 如果用户点击确定按钮，则方法返回true
    		* 如果用户点击取消按钮，则方法返回false
    	prompt（）显示可提示用户输入的对话框。
    * 与打开关闭有关的方法
    	close（）关闭浏览器窗口。
    		* 谁调用，关闭谁
    	open（）打来浏览器窗口。 
    		* 返回新的Windows对象
    * 与定时器有关的方法
    	(参数：
    			1. js代码或者方法对象
    			2. 毫秒值
    	返回值：唯一标识，用于取消定时器
    		)
    	setTimeout（）在指定的毫秒数后调用函数或计算表达式。
    	clearTimeout（）取消由setTimeout（）方法设置的timeout。
    	setInterval（）按照指定的周期（以毫秒计）来调用函数或计算表达式。
    	clearInterval（）取消由setInterval（）设置的timeout。
   

   3）属性
   4）特点

    * Window对象不需要创建可以直接使用：window.方法名；
    * window引用可以省略。方法名（）；
   

DOM

1. 功能：控制html文档的内容
2. 代码：获取页面标签（元素）对象Element
   * document.getElementById(“id值”)：通过原始的id获取元素对象
3. 操作Element对象：
   * 修改属性值
   * 修改标签体内容

事件

1. 功能：某些组件被执行了某些操作后，触发某些代码的执行。

2. 绑定事件

    1）直接在html标签上，指定事件的属性，属性值就是js代码
    	* 事件：onclick---单击事件
    2）通过js获取元素对象，指定事件属性，设置一个函数