JS （JavaScript）

大家好，欢迎来到IT知识分享网。

JavaScript简介
1、JS介绍
	全称：JavaScript，简称JS
	JS是由NetScape(网景)提供的一门嵌入在浏览器中执行的脚本语言（一段小程序）
	
	主要作用：用于实现网页中的动画效果和实现表单验证
	JS可以运行在服务器端（Node.js）

2、JS的特点
	JS是一门直译式的语言（JS不需要编译,执行的就是源代码）
	JS是一门基于对象的语言（JS可以通过某些机制模拟面向对象）
	JS是一门弱类型的语言（Java是强类型）
		Java: String str = "Hello World";
		int number = 100;
		JS: var str = "Hellow World";
			alert(str);
			str = 100;
			alert(str);
			str = true;
			alert(str);
			str = [88,123,111];
			alert(str);
		
3、JS的优势
	JS具有良好的交互性
	JS具有一定的安全性(运行在浏览器内部)
	JS具有跨平台性
		Java语言具有跨平台性,是因为有JVM,JVM跨平台吗?
			JVM不跨平台
		JS语言具有跨平台性,是因为有浏览器,浏览器跨平台吗?
			浏览器不跨平台!

4、如何在HTML中引入JS？
4.1.方式一: 在head或者body内部可以添加一个script标签
		在script标签内部可以直接书写JS代码

	<!-- 方式一: 在script标签内部直接书写JS代码
		type:可以省略,指定语言类型是JS -->
	<script type="text/javascript">
		console.log("引入JS的方式一!!");
		//alert("引入JS的方式一!!");
		document.write("引入JS的方式一!!!<br/>");
	</script>

4.2.方式二: 在head或者body内部可以添加一个script标签
	在script标签上通过src属性,可以引入外部的JS文件

	<!-- 方式二: 引入外部的JS文件 -->
	<script src="demo.js"></script>

	需要注意的是,第二种方式script标签内部不要写JS代码,写了也不会执行!
	<script src="js/demo.js">
		console.log("Hello JS...333");//不会执行!
	</script>

4.3.方式三:将JS代码写在标签上
	<!-- 方式三: 直接在标签上书写JS代码 -->
	<button onclick="console.log('引入JS的方式三...')">
		别点我!
	</button>
	
	<input ondblclick="console.log('引入JS的方式三===')" 
		type="button" value="也别点我!"/>
	
4.4.onclick、ondblclick事件
	onclick是点击事件,在被绑定了该事件的元素上点击后,会立即触发事件,执行所指向的函数
	ondblclick是点击事件,区别是需要双击才可以触发事件,执行所指向的函数

二、JS的语法
1、JS的注释
	// 单行注释
	/* 多行注释 */
	
2、JS数据类型
2.1.基本数据类型
	1)数值类型(number)
		在JS的底层,所有的数值都是浮点型
		但在处理和显示的过程中,如果可以显示为整型,会自动的在整型和浮点型之间进行转换
		2.4+3.6=6
		
		Infinity(正无穷大)
		-Infinity(负无穷大)
		NaN(Not a Number)非数值
		
	2)字符串类型(string)
		JS中的字符串类型是基本数据类型,字符串可以使用双引号或者单引号引起来
		例如:
			var str1 = "Hello JS";
			var str2 = 'Hello JS';
			console.log( typeof str1 ); // string
			console.log( typeof str2 ); // string
			
		JS中提供了字符串的包装对象--String
			var str3 = new String("Hello JS");
			console.log( typeof str3 ); // object
			
		str1和str2也可以当做对象使用,在使用时,和str3没有什么区别
		
	3)布尔类型(boolean)
		布尔类型值: true 和 false
	
	4)undefined类型
		undefined: 表示声明了变量,但是没有为变量赋值,该变量的值就是undefined
		var x; 
		alert(x); //undefined
		
	5)null类型
		null: 表示空值,可以作为函数的返回值,表示函数返回的是一个空的对象
		undefined和null都不能调用属性或方法,否则就会抛异常!
	
		
2.2.复杂数据类型
	对象,数组,函数

3、JS的变量声明
	JS中是通过var关键字声明变量,通过var声明的变量不区分类型,可以指向任意的数据
		var s1 = "Hello World";
		s1 = 123;
		s1 = false;
		s1 = [];
		s1 = function(){alert("s1方法执行了...")}

	JS中有自动断句功能,即使一行后面不加分号,也可以正常执行,但是建议加上分号;
	JS中如果重复声明变量,也不会报错, 因为JS中声明一个已存在的变量不会生效;
		var x = "abc"; //var x; x = "abc";
		var x = 123; //var x; x = 123;
		alert(x);
	JS在书写时,是严格区分大小写的!
		
4、JS的运算符
	JS中的运算符和Java中的运算符大致相同
	
	算术运算符: +，-，*，/，%，++，--
	赋值运算符: =，+=，-=，*=，/=，%=
	比较运算符: ==，!=，>，>=，<，<=
	位运算符: & ， |
	逻辑运算符: && ，||   ( false && 表达式, true || 表达式 )
	前置逻辑运算符: ! (not)
	三元运算符: 表达式 ? 表达式1 : 表达式2
	。。。

5、JS的语句
5.1.if分支
	if(){...}
	if(){...}else{...}
	if(){...}else if{...}else{...}
5.2.switch分支
	switch(变量/表达式){
		case opt1:
			代码块;
			break;
		case opt2:
			代码块;
			break;
		...
		default:
			代码块;	
	}
	
5.3.循环结构
	for(){}
	while(){}
	do while(){}
	
6、JS数组
	JS的数组声明方式:
		//声明一个空数组,长度为零
		var arr1 = [];
		//声明一个具有初始值的数组
		var arr2 = [100,"abc",false,new Date()];
		//声明一个空数组,长度为零
		var arr3 = new Array();
		//声明一个具有初始值的数组
		var arr4 = new Array(100,"abc",false,new Date());
		//指定长度的数组(只有一个参数并且是数值,这个数值是长度)
		var arr3 = new Array(10);

	JS数组的特点:
		1) JS中的数组可以存储任意类型的数据
		2) JS数组的长度可以被任意改变
	
7、JS函数
	JS的函数相当于Java中的方法
	就是一个具有功能的代码块,通过函数名可以反复执行!
	声明方式1:
		function 函数名([参数列表]){
			函数体...
		}
		
	声明方式2:
		var 变量/函数名 = function([参数列表]){
			函数体...
		}
	声明方式3:
		(function([参数列表]){
			函数体...
		})([参数列表]);
		

三、JS的DOM操作
	DOM: Document Object Model,文档对象模型
	其实就是JS专门为操作html元素所提供的一套API。
		
1、获取html元素
	1) document.getElementById(id值);
	-- 通过元素的id属性值获取一个html元素，返回值就是这个元素所对应的JS对象

	2) document.getElementsByTagName(标签名);
	-- 通过元素名称,获取该名称对应的所有元素组成的数组,可以通过数组[下标]的形式获取其中的每一个元素,也可以通过循环遍历。

	3) document.getElementsByClassName(class值);
	-- 通过元素的class属性值,获取该class值对应的所有元素组成的数组,可以通过数组[下标]的形式获取其中的每一个元素,也可以通过循环遍历。

	4) ele.parentNode -- 获取当前元素的上级元素(父元素)

	5) ele.innerHTML -- 获取元素的所有内容, 或者设置元素的内容(原内容会被覆盖)
		<div>这是一个测试的div</div>
		ele.innerHTML = "xxx"

	6) ele.value -- 获取或设置表单项元素的value值
	

2、增删改查元素
	1)创建一个html元素
	document.createElement(元素名/标签名);
	-- 创建一个指定名称的元素,返回值就是这个创建的元素所对应的JS对象
	2)添加子元素
	parentEle.appendChild( childEle );
	-- 父元素调用方法添加一个子元素到父元素内部
	
	3)删除子元素
	parentEle.removeChild( childEle )
	-- 父元素调用方法删除内部的子元素