JavaScript基础笔记

JavaScript基础

Javascript：

* 概念：一门客户端脚本语言
	* 运行在客户端浏览器中；每一个浏览器都有JavaScript的解析引擎
	* 脚本语言：不需要进行一些编译的操作。Java语言需要写一个.java文件，然后通过编译器生成
	  一个.class字节码文件，再用JVM运行字节码文件。而脚本语言不需要编译的过程。
* 功能：
	* 可以来增强和html的交互过程，可以来控制html元素，可以实现页面的动态效果，增强用户体验
* JavaScript使得原先需要在服务器端进行的处理现在可以在浏览器中进行，比如表单的校验。
* JavaScript = ECMAScript + BOM + DOM
* ECMAScript：客户端脚本语言的标准
	1. 基本语法：
		1. 与html的结合方式（两种）
			1. 内部JS
				* <script>标签的位置会影响程序（网页代码）的执行顺序
				* alert是阻塞性的
				* <script>标签可以定义多个
			3. 外部JS
		2. 注释
			1. 单行注释：//注释内容
			2. 多行注释：/*注释内容*/
		3. 数据类型
			1. 原始数据类型（基本数据类型）
				1. number：整数/小数/NaN
				2. string：字符串。字符/字符串 "abc" "a" 'abc'单引双引都可以
				3. boolean：true or false
				4. null：一个对象为空的占位符
				5. undefined：从null演变而来，表示未定义。
				   如果一个变量没有给初始化值，则会被初始化为undefined
			2. 引用数据类型：对象
		4. 变量
			* 变量：一小块存储数据的内存空间
			* Java语言是强类型语言，而JavaScript是弱类型语言
				* 强类型：申请内存空间的时候就指定好了存放的数据类型，这些存储单元就只能
				  存放这个类型的数据
				* 弱类型：在某个空间内可以存放任意数据类型的变量
			* 语法：
				* var 变量名 = 初始化值;
				* 在JS中，typeof(null)返回的是一个object类型，这实际上是JS最初实现中的一
				  个错误，然后被ECMAScript沿用了。现在，null被认为是对象的占位符，从而解释
				  了这一矛盾，但从技术上来说，它仍然是原始值
		5. 运算符：和其它编程语言差不多，只有一个
			1. 一元运算符
				++,  --, +(正号)
			2. 算数运算符
				+  -  *  /  %
			3. 赋值运算符
				=  +=  -=
			4. 比较运算符
				>  <  >=  ==  ===(全等于)
				* 运算数类型不同的话会先进行类型转换再比较
				* 引入全等于，在比较之前先判断类型，===要求类型一样
			5. 逻辑运算符
				&&   ||  ！
				* 其它类型转boolean
					1. number：0和NaN为假，非0为真
					2. string：除了空字符串("")，其它都是true
					3. null & undefined：都是false
					4. 对象：都是true
			6. 三元运算符
				？ ：
			* 在JS中，如果运算数不是运算符所要求的类型，那么JS引擎会自动的将运算数进行类型
			  转换
				* string转number：按照字面值转换。如果字面值不是数字，则转为NaN
				* boolean转number：true转为1，false转为0
		6. 流程控制语句：
			1. if...else
			2. switch
				* 在java中，switch中可以接收的数据类型：byte int short char 枚举 字符串
				* 在JS中，switch语句可以接受任意数据类型
			4. while
			5. do...while
			6. for
		7. JS特殊语法：
			1. 语句以;结尾，但如果一行只有一行语句，则;可以省略（不建议这么做）
			2. 变量的定义使用var关键字，也可以不使用
				* 用：定义的变量是局部变量
				* 不用：定义的变量是全局变量（也不建议这么做）
				  建议在方法外定义var变量，在方法内赋值，代码可读性高
	2. 基本对象
		1. Function：函数对象
			1. 创建：
				1. var fun = new Function(形参列表, 方法体); （不符合定义方法的正常逻辑）
				2. function 方法名称(形参列表) {方法体}
					* 因为在JS中所有变量都是var，所以在参数列表中不用写形参类型
				3. var 方法名 = function(形参列表){ }
			2. 属性
				* 在JS中，function也是一个对象，这使得它可以被多次定义，后面的定义
				  将覆盖掉前面的定义
				*  既然function是对象，那么它就会有一些属性
				* length属性：返回function的形参个数
			3. 特点：
				* function不用写形参类型和返回值类型，因为所有的变量都是var
				* function的定义可以和调用时的形参个数不匹配
				  比如定义一个func(a, b)调用时可以写func(a)
				  这其实相当于func(a, undefined)
				  写成func(a, b, c)则c没有被函数接受
				* 结论：方法的调用只与方法的名称有关，和方法的形参无关
				* 在方法声明中有一个隐藏的内置对象（数组）arguments，它封装了所有实际参数
					* 求任意个数的和：不定义形参列表
					  function add(){
					    var sum = 0;
					    for (var i = 0; i < arguments.length; i++){
					      sum += arguments[i];
					    }
					    return sum;
					  }
		2. Array：数组对象
			1. 创建：
				* var arr = new Array(元素列表);
				* var arr = new Array(默认长度);
				* var arr = [元素列表];
			2. 属性：
				* length数组长度
			3. 方法：
				* join(参数)：将数组中的元素按照指定的分隔符拼接为字符串
				  e.g. document.write(arr.join(--));
				* push方法()：向数组的尾部添加一个元素
			5. 特点：
				* JS中，数组元素的类型的可变的
				* JS中，数组的长度是可变的，数组访问越界也不会报错
		3. Date: 日期对象
			1. 创建：var date = new Data();
			2. 方法：
				* toLocalString()，将Date转为本地字符串格式并返回
				  date.toLocalString()
				* getTime：获取毫秒值，返回当前时间到1970年1月1日0点的毫秒值差
		4. Math：数学对象
			1. 创建：
				* 特点：Math对象不同创建，直接使用
				  Math.方法名();
			2. 属性:
				* PI
				  Math.PI
			3. 方法：
				* random()，返回[0, 1)之间的一个随机数
				* ceil(x)，向上取整
				* floor(x)，向下取整
				* round(x)，把数四舍五入为最近的整数
				* e.g. 取[1, 100]之间的随机整数
				  var rand = Math.floor(Math.random() * 100) + 1;
		5. RegExp：正则表达式对象
			1. 正则表达式：定义字符串的组成规则。
				1. 单个字符：[]
				   如：[a] [ab] [a-zA-Z0-9_]
				   * 特殊符号代表特殊含义的单个字符：
				      * \d：单个数字字符 [0-9]
				      * \w：单个单词字符：[a-zA-Z0-9_]
				2. 量词符号：
					*：出现0次或多次
					?：表示出现0次或1次
					+：出现1次或多次
					{m,n}：表示 m <= 数量 <= n
						* m如果缺省：{,n}最多n次
						* n如果缺省：{m,}最少m次
					e.g. \w* 单词字符构成，单词字符出现0次或多次
						 \w{6,12} 单词字符组成，长度6~12位
				3. 开始结束符号
					* ^：开始
					* $：结束
					e.g. ^w{6,12} 以单词字符开始和结束
			2. 正则对象：
				1. 创建：
					1. var reg = new RegExp("正则表达式");
					2. var reg = /正则表达式/;
					注意：第一种方法创建的正则表达式是在一个字符串中，而字符串中的\具有
					转义的功能，这点应注意避免。
					e.g. 方法1定义：var reg = new RegExp("^\\w{6,12}$");
						 方法2定义：var reg = /^\w{6,12}$/;
				2. 方法：
					1. test(参数)：验证指定的字符串是否符合正则定义的规范
					e.g. var reg = /^\w{6,12}$/;
						 var username = "zhangsan";
						 var flag = reg.test(zhangsan);
		6. Global
			1. 特点：全局对象，这个Global中封装的方法不需要对象就可以直接调用。
			2. URL编码：
				复旦大学 = %E5%A4%8D%E6%97%A6%E5%A4%A7%E5%AD%A6
				if: GBK编码：一个汉字2个字节，共8个字节
				if: UTF-8编码：一个汉字3个字节，共12个字节
				所以显然浏览器使用的是UTF-8编码来传输汉字的
			3. 方法：
				1. encodeURI() & decodeURI()：编码与解码
					* 参数都为string，函数也都返回string
					* 用法：
					e.g. var str = "复旦大学";
						 var url = encodeURI(str);
						 decodeURI()同理
				2. encodeURIComponent() & decodeURIComponent()：
					* 和方法1相比编码的字符更多
				3. parseInt()：将字符串转为数字
					* 逐一判断每一个字符是否是数字，直到不是数字为止，将前面数字部分转为
					  number
				4. isNaN()：
					* 判断是否是NaN，因为JS中无法直接比较NaN
				5. eval()：将包装到字符串中的JS代码执行
				e.g. var jscode = "alert(123)";
					 eval(jscode);
* DOM：Document Object Model 文档对象模型
	* 功能：控制html文档的内容
	* 代码：获取页面标签（元素）对象Element
		* document.getElementById("id值")：通过元素的id获取元素对象
	* 操作Element对象：
		1. 修改属性值：
			1. 明确获取的对象是哪一个
			2. 查看API文档，找其中有哪些属性可以设置
		2. 修改标签体内容：
			* 属性innerHTML
			1. 获取元素对象
			2. 使用innerHTML属性修改标签体内容
* 事件：
	* 功能：某些组件被执行了某些操作后，触发某些代码的执行
	* 如何绑定事件
		1. 直接在html标签上，指定事件的属性（操作），属性值就是js代码
			* 事件 ：onclick
			e.g. 通常在<script>标签中定义某个函数func()，然后再在onclick的时候调用它
			onclick = "func()；other statements;"
		2. 通过js获取元素对象，指定事件属性，设置一个函数
		e.g. Element.onclick = func();
	* 注意：script代码一定要放在加载元素的语句后面！
	* 代码有时会写错，因为html不会报错，比如将false写成flase，这是很常见的
	  如何找出这样的错误呢？在浏览器中运行html，点击F12，进入console会，console会
	  将错误反馈给程序员
* BOM: Browser Object Model 浏览器对象模型
1. 概念：将浏览器的各个组成部分封装成对象
2. 组成：
	* Window：窗口对象
	* Navigator：浏览器对象 //基本不用
	* Screen：显示器屏幕对象 //基本不用
	* History：历史记录对象
	* Location：地址栏对象