一、概念和用法

1.1 概念

JavaScript 是脚本语言，是一种解释性脚本语言（代码不进行预编译）

JavaScript 是一种轻量级的编程语言。

JavaScript 是可插入 HTML 页面的编程代码。

JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。

JavaScript 很容易入门。

1.2 作用

1、为网页添加各式各样的动态功能,

2、为用户提供更流畅美观的浏览效果。

通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。

1.3用法

1.3.1html中的任意位置

可以在head，可以在body，没有硬性要求，但要写在<script>里

1.3.2外部JS文件中

在html中用script引用，src是目录

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

1.3.3标签属性中
<a href="Javascript:alert("")">登录</a>

1.4显示数据的方式

1.4.1window.alert("hello");

会在弹窗中显示hello

1.4.2document.write("hello");

将hello写到html文档中。即在网页页面显示出来

1.4.3使用innerHTML写入到html元素

从div1中输出

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>		
	</head>
	<body>
		<div id="div1">
			
		</div>
	</body>
</html>
<script> 
document.getElementById("div1").innerHTML="hello world"
</script>

1.4.4console.log写入到控制台

二、基本语法

2.1注释

单行注释以//开头
多行注释以/*开始以/*结束

//我是单行注释
/*
 * 我
 * 是
 * 多行注释
 */

2.2变量

和java不同的是，变量全部以var声明

var teacher;
teacher = "张三";
var x;
x = 5;
var y = 6;

命名规则：

1.必须以字母或$和_开头
2.区分大小写
3.不能用关键字保留字

2.3语句

分支

循环

for (var i=0;i<5;i++) {
	document.write(names[i]);
}

2.4数据类型

1.字符串String

var String = "英雄联盟";

2数字Number

可以用科学计数法e书写

var x = 6;
var y = 6e8;//6000000
var z = 6e2;//0.02

3.布尔Boolean

var isRight = true;

4.空Null

var friend = null;

5.未定义Undefined

四种情况会undefined

1.变量声明且未赋值

var obj;

2.对象不存在属性时

var obj;
alert(obj.name);

3.函数需要实参，但是调用时没有传值，形参是undefined
4.函数调用没有返回值或者return后没有数据，接收函数返回的变量是undefined

6独一无二的值Symbol

2.5动态数据类型

var num = 6;//num现在是number类型
num = "hello";//num现在是String类型

2.6运算符

算数运算符：+ - * / % 、 ++ 、 --

赋值运算符：= 、 +=、 -= 、*= 、 /= 、 %=

字符串的连接符：+

逻辑运算符： && || ！

条件运算符：？：

比较运算符： == 、！= 、 > 、<、 >= 、 <=

特别的

比较运算
===	绝对等于（值和类型均相等为true）
!==	不绝对等于（值和类型有一个不相等，或两个都不相等为true）

2.7对象

1.String

//长度
<script> 
var you = "你不是\'单身狗\'?"
console.log(you.length);
console.log(you)
</script>

q其中\是转义字符，不算字符数，总长度为9

其他属性和java差不多

2.Array

声明数组

<script> 
//第一种
var names = new Array();
names[0]="张三";
names[1]="李四";
names[2]="王五";
names[3]="赵六";
names[4]="孙七";
for (var i=0;i<5;i++) {
	document.write(names[i]);
}
//第二种
var students=new Array("小一","小二","小三");
//第三种
var school=["高中","小学"];

</script>

3.Date

var date1 = new Date(); //当前日期
var date2 = new Date(milliseconds);//从1970年1月1日到所需时间的毫秒
var date3 = new Date(dateString); //符合日期格式的字符串
var date4 = new Date(year, month, day, 
                    hours, minutes, seconds,
                     milliseconds);//年月日时分秒毫秒
                                    //月份取值0-11

常用方法

方法	描述
getDate()	从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getDay()	从 Date 对象返回一周中的某一天 (0 ~ 6)。
getFullYear()	从 Date 对象以四位数字返回年份。
getHours()	返回 Date 对象的小时 (0 ~ 23)。
getMinutes()	返回 Date 对象的分钟 (0 ~ 59)。
getMonth()	从 Date 对象返回月份 (0 ~ 11)。
getSeconds()	返回 Date 对象的秒数 (0 ~ 59)。
setDate()	设置 Date 对象中月的某一天 (1 ~ 31)。
setFullYear()	设置 Date 对象中的年份（四位数字）。
setHours()	设置 Date 对象中的小时 (0 ~ 23)。
setMinutes()	设置 Date 对象中的分钟 (0 ~ 59)
setSeconds()	设置 Date 对象中的秒钟 (0 ~ 59)。
setMonth()	设置 Date 对象中月份 (0 ~ 11)

4.Math

1.Math.PI;返回圆周率

2.Math.random();返回0-1的随机值

3.Math.max(12,34,-90.9);返回最大值

4.Math.min(12,34,-90,9);返回最小值

2.8函数

1.isNaN(param);

是数字返回false，不是返回true,NaN 意思是not a number不是数字

2.parseFloat(String)

解析字符串，如果首位是数字则对字符串进行解析，返回数字类型

parseFloat（“”10年”）；//10
parseFloat（“”1222 1212”）；//1222

3.parseInt(string,radix)

解析字符串返回整数，radix设置进制

没有设置进制时：
如果 string 以 "0x" 开头，parseInt() 会把 string 的其余部分解析为十六进制的整数。
如果 string 以 0 开头，那么 ECMAScript v3 允许 parseInt() 的一个实现把其后的字符解析为八进制或十六进制的数字。
如果 string 以 1 ~ 9 的数字开头，parseInt() 将把它解析为十进制的整数。

字符串中只会返回第一组数字（1022 121）1022
开头结尾可以是空格

2.9自定义函数

function 函数名（参数）{}

function num(num1,num2){
console.log(num1+num2);

}

2.10匿名函数

var fun1=function(){
	console.log("fun1");
}
var fun2=function(a,b){
	console.log("fun2");
}
var fun3=function(a,b){
	return a+b;
}
fun1();
fun2(1,2);
var num2=fun3(1,2);
console.log(num2);

2.11作用域

局部变量，函数中的变量是局部变量，只能在此函数中用

全局变量，函数外声明的变量，可以被所有脚本调用

生命周期，生命周期从被声明开始，局部变量函数运行后被删除，全局变量页面关闭后被删除

2.12自定义对象

//定义对象
var student={
	name:"张三",
	age:18,
	run:function(){
		console.log("张三");
	}	
};
//访问属性
var name6=student.name;
var age=student["age"];
console.log(name6);console.log(age);
//调用方法
student.run();

2.13window对象

1.常用属性

2.常用方法

alert警告弹窗
confirm确认框
prompt提示用户输入

<script> 
	//window对象常用的弹框方法
	//1、基本弹框
	window.alert("只有一个确定按钮的对话框"); 
	//2、对话框：有确定和取消两个看你，点击确定返回true，点击取消返回false 
	var res=window.confirm("确认要关闭吗？"); 
	if(res){ 
		alert("点击了确定按钮"); 
	}
	else{
		alert("点击取消按钮");
	}
	//3、输入框：prompt(提示信息，默认值) 
	var age=prompt("请输入年龄：",19); 
	alert("输入的年龄信息是："+age); 
</script>

open打开新窗口
close关闭窗口

<a href="javascript:window.open('https://www.baidu.com')">打开百度</a> 
<a href="javascript:window.open('index.html')">打开-index</a> 
<a href="javascript:window.close()">关闭当前页面</a>

setTimeout（“方法名”，毫秒）指定毫秒数后调用函数
clearTimeout取消上面设定
setInterval“方法名”，毫秒）指定周期（单位毫秒）调用函数
clearInterval取消上面设定

定时器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script> 
//定时器
	function showTime(){
		var time = new Date();
		var year=time.getFullYear();
		var month=time.getMonth();
		var day=time.getDate();
		var hour=time.getHours();
		var minute = time.getMinutes();
		var second = time.getSeconds();
		document.getElementById("today").innerHTML
					=year+"年"+month+"月"+day+"日，"+hour+"时"+minute+"分"+second+"秒";
		
	}
	window.setInterval("showTime()",1000);
</script>
	</head>
	<body>
		<div id="today"></div>
	</body>
</html>

3.history

浏览器历史，

history.back() - 与在浏览器点击后退按钮相同

history.forward() - 与在浏览器中点击向前按钮相同

history.go(1/-1)-- 参数为1：等同于history.forward()，参数为-1，等同于history.back()

<a href="javascript:window.history.forward()">前进</a>
 <a href="javascript:window.history.back()">后退</a> 
<a href="javascript:window.history.go(1)">前进go</a> 
<a href="javascript:window.history.go(-1)">后退go</a>

和浏览器左上的功能一致

4.location对象

window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。

replace(url) 转向到url网页地址
reload() 重新载入当前网址，如同按下刷新按钮

<a href="javascript:alert(window.location.href)">获取当前页面的URL地址</a>
 <a href="javascript:window.location.reload()">刷新</a><br /> 
<a href="javascript:window.location.replace('index.html')">跳转到index</a><br />
 <a href="javascript:location.replace('https://www.baidu.com')">跳转到百度</a><br />

2.14事件

onsubmit：点击了注册按钮时

onfocus：将鼠标焦点点击到元素时触发，比如为了输入文字将焦点确定在文本框中时

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			function fun1(){
				alert('内容发生了变化');
			}
			function fun2(){
				alert('触发了点击事件');
			}
			function fun3(){
				alert('键盘按下');
			}
		</script>
	</head>
	<body>
		<select id="month" onchange="fun1()"> 
			<option>1月份</option> 
			<option>2月份</option> 
		</select>
		<input type="button" onclick="fun2()" value="button"/>
		<input type="text" onkeydown="fun3()" />
	</body>
</html>

2.15document

1.document对象

当浏览器载入 HTML 文档, 它就会成为 Document 对象。

2.document.getElementById()

根据id获得所有该id的第一个对象的引用

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			function fun1(){
				var pp=document.getElementById("pp");
				console.log(pp)
			}
		</script>
	</head>
	<body>
		<p id="pp">ppp</p>
	</body>

3.document.getElementsByClassName()

返回拥有相同class类名称元素的集合

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			function fun1(){
				var us=document.getElementsByClassName("us");
				for(var i=0;i<us.length;i++){
					console.log(us[i]);
				}
			}
		</script>
	</head>
	<body>
		
		<p id="pp" class="us">ppp</p>
		<ul class="us">
			<li>ffdsfds</li>
			<li>ds</li>
			<li>das</li>
			<li>dsa</li>
		</ul>
	</body>

4.document.getElementsByTagName()

返回拥有相同<标签>名的对象集合

5.document.getElementsByName()

返回拥有相同name的对象集合

6.修改属性

document.getElementById(id).innerHTML=新的 HTML。

方式1：document.getElementById(id).attribute=新属性值  //修改属性
方式2：document.getElementById(id).setAttribute(属性名，属性值);

document.getElementById(id).style.property  //修改css
document.getElementById("myli").style.color="blue";

PS：

绝对不要在文档(DOM)加载完成之后使用 document.write()。这会覆盖该文档。

7.添加节点，插入元素

<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
			function creatNewP(){
				var newEP=document.createElement("p");//创建新元素节点
				var text=document.createTextNode("appendChild插入");//新建文本节点
				newEP.appendChild(text);//将文本节点添加到元素节点
				var div=document.getElementById("div1");//获取要插入的元素
				div.appendChild(newEP);//将新的元素p插入到节点
			}
			function creatNewP2(){
				var newEP=document.createElement("p");//创建新元素节点
				var text=document.createTextNode("insertBefore插入");//新建文本节点
				newEP.appendChild(text);//将文本节点添加到元素节点
				var div=document.getElementById("div1");//获取要插入的元素
				var p=document.getElementById("p1");
				div.insertBefore(newEP,p);//将新的元素p插入到节点
			}
		</script>
	</head>
	<body>
	
	<div id="div1" >
		<button onclick="creatNewP()">1</button>
		<button onclick="creatNewP2()">2</button>
		<p id="p1">第一</p>
	</div>
	</body>

8.删除元素，替换元素

	        function replaceE(){
				var newEP=document.createElement("p");//创建新元素节点
				var text=document.createTextNode("替换");//新建文本节点
				newEP.appendChild(text);//将文本节点添加到元素节点
				var div=document.getElementById("div1");//获取元素
				var p=document.getElementById("p1");
				div.replaceChild(newEP,p);//替换成新元素
			}

			function deleteE1(){
				var div=document.getElementById("div1");//获取元素
				var p=document.getElementById("p1");
				div.removeChild(p);//通过父元素删除其中的p
			}

				function deleteE2(){
				var p=document.getElementById("p1");
				p.parentNode.removeChild(p);//找到父元素然后删除
			}

2.16正则表达式

1.语法

语法： var reg=new RegExp(/正则表达式主体/,修饰符(可选));
 或更简单的方法 var reg=/正则表达式主体/修饰符(可选); 
案例： var reg=new RegExp(/kkk/i); 
var reg = /kkk/i; //此处定义了一个一个正则表达式。
 kkk 是一个正则表达式主体 (用于检索)。
 i 是一个修饰符 (搜索不区分大小写)。

修饰符

查找某个范围内的字符

特殊含义

更多查看正则表达式手册

2.经典案例

<script> 
			/*检查输入的身份证号是否正确*/ 
			function checkCard(str) { 
				/*15位数身份证正则表达式: 
				 * 编码规则顺序从左至右依次为6位数字地址码，6位数字出生年份后两位及日期，3位数字顺序 码。
				 * [1-9]\d{5} 前六位地区，非0打头 \d{2} 出生年份后两位00-99 
				 * ((0[1-9])|(10|11|12)) 月份，01-12月 (
				 * 	([0-2][1-9])|10|20|30|31) 日期，01-31天 
				 * \d{3} 顺序码三位，没有校验码 */
				var arg1 = /^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1- 9])|10|20|30|31)\d{3}$/; 
				if (arg1.length == 15 && !arg1.test(arg1)) { 
					return false; 
				}
				/** 18位数身份证正则表达式: 
				 * * 编码规则顺序从左至右依次为6位数字地址码，8位数字出生年份日期码，3位数字顺序码，1 位数字校验码（可为x）。
				 * [1-9]\d{5} 前六位地区，非0打头 
				 * (18|19|([23]\d))\d{2} 
				 * 出身年份，覆盖范围为 1800-3999 年 
				 * ((0[1-9])|(10|11|12)) 月份，01-12月
				 * (([0-2][1-9])|10|20|30|31) 日期，01-31天 
				 * \d{3}[0-9Xx]： 顺序码三位 + 一位校验码 */ 
				 var arg2 = /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))
				 							(([0-2] [1-9])|10|20|30|31)\d{3}[0-9Xx]$/;
				 if (arg2.length == 18 && !arg2.test(sfzhmcode)){ 
				 	return false; 
				 }
				 return true; 
			}
			
			/*是否是小数*/ 
			function isDecimal(strValue) { 
				var objRegExp = /^\d+\.\d+$/; 
				return objRegExp.test(strValue); 
			}
			
			/*校验是否中文名称组成 */ 
			function ischina(str) { 
				var reg = /^[\u4E00-\u9FA5]{2,4}$/; 
				return reg.test(str); 
			}
			
			/*校验是否全由8位数字组成 */ 
			function isNum(str) { 
				var reg = /^[0-9]{8}$/; 
				return reg.test(str); 
			}
			
			/*校验电话码格式 :座机和手机*/ 
			function isTelCode(str) { 
				var reg = /^((0\d{2,3}-\d{7,8})|(1[345789]\d{9}))$/; 
				return reg.test(str); 
			}
			
			/*校验手机号*/ 
			function isPhoneNum(str) { 
				//如果你要精确验证手机号码，那个你可以使用第一个正则。这是根据电信，移动，联通目前发 行的号码来的。验证比较精确。 
				var reg = /^1[3|4|5|7|8][0-9]{9}$/; 
				// 如果因为现有的号码不能满足市场需求，电信服务商会增大号码范围。所以一般情况下我们 只要验证手机号码为11位，且以1开头。 
				var reg = /^^1[0-9]{10}$$/; return reg.test(str); 
			}
			
			/*校验邮件地址是否合法 */
			function IsEmail(str) { 
				var reg = /^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/; return reg.test(str); 
			}
			
			/*检查输入的URL地址是否正确 */ 
			function checkURL(str) { 
				if(str.match(/http(s)?:\/\/[\w.]+[\w\/]*[\w.]*\??[\w=&\+\%]*/i) == null) { 
					return false;
				} 
				else { 
					return true; 
				} 
			}
	</script>

3.全选全不选

<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			td{
				text-align: center;
			}
			th{
				text-align: center;
			}
		</style>
		<script>
			//点击全选，小选项跟着改变
			function myAll(){
				var all=document.getElementById("all");
				var oneList=document.getElementsByName("one");
				for(var i=0;i<oneList.length;i++){
					oneList[i].checked=all.checked;
				}
			}
			//点击小选项，全选也有改变
			function myOne(){
				var all=document.getElementById("all");
				var oneList=document.getElementsByName("one");
				for(var i=0;i<oneList.length;i++){
					if(oneList[i].checked==false){
						all.checked=false;
						return;
					}
					all.checked=true;
				}
			}
		</script>
	</head>
	<body>
		<table  border="1" cellpadding="0" cellspacing="0" width="300px" height="160" >
			
			<tr>
				<th>全选<input id="all" type="checkbox" onclick="myAll()"/></th>
				<th>序号</th>
				<th>名称</th>
				<th>单价</th>
			</tr>
			<tr><
				<td><input name="one" type="checkbox" onclick="myOne()"/></td>
				<td>1</td>
				<td>小熊饼干</td>
				<td>￥12</td>
			</tr>
				<tr><
				<td><input name="one" type="checkbox" onclick="myOne()"/></td>
				<td>1</td>
				<td>小熊饼干</td>
				<td>￥12</td>
			</tr>
				<tr><
				<td><input name="one" type="checkbox" onclick="myOne()"/></td>
				<td>1</td>
				<td>小熊饼干</td>
				<td>￥12</td>
			</tr>
		</table>
	</body>

4.动态增加删除表格的一行

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			td{
				text-align: center;
			}
			th{
				text-align: center;
			}
		</style>
		<script>
			//遍历表格
				function bianli(){
						var tab=document.getElementById("tab1");
						var rowArr= tab.rows;
						for(var i=0;i<rowArr.length;i++){
							var row = rowArr[i];
							var tdArr = row.cells;
							var str="";
							for(var j=0;j<tdArr.length;j++){
								var tdd = tdArr[j];
								str+=tdd.innerHTML+"..."+tdd.cellIndex+"======";
							}
							console.log("行的下标"+row.rowIndex+"，列："+str);
						}
				}
				
				function addRow(){	
					var tab=document.getElementById("tab1");
					var newRow=tab.insertRow();
					var newTd1=newRow.insertCell();
					var newTd2=newRow.insertCell();
					var newTd3=newRow.insertCell();
					var newTd4=newRow.insertCell();
					
					newTd1.innerHTML="1";
				}
				function delRow(btn){
					
					var tab=document.getElementById("tab1");
					var trIndex=btn.parentNode.parentNode.rowIndex;
					tab.deleteRow(trIndex);
				}
		</script>
	</head>
	<body>
		<button type="button" onclick="bianli()">遍历</button>
		<button type="button" onclick="addRow()">添加一行</button>
		<table id="tab1" border="1" cellpadding="0" cellspacing="0" width="300px" height="160" >	
			<tr>
				<th>序号</th>
				<th>名称</th>
				<th>单价</th>
				<th>删除</th>
			</tr>
			<tr><
				
				<td>1</td>
				<td>小熊饼干</td>
				<td>￥12</td>
				<<td><button onclick="delRow(this)">删除</button></td>
			</tr>
				<td>1</td>
				<td>小熊饼干</td>
				<td>￥12</td>
				<td><button onclick="delRow(this)">删除</button></td>
			</tr>
				<td>1</td>
				<td>小熊饼干</td>
				<td>￥12</td>
				<td><button onclick="delRow(this)">删除</button></td>
			</tr>
			
		</table>
	
	</body>
</html>

5.选择省，显示对应市（省市级联）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<select onchange="changeCity(this.value)"> 
			<option>请选择省份</option>
			<option value="0">北京</option>
			<option value="1">浙江</option>
			<option value="2">河北</option>
			<option value="3">广东</option>
		</select>
		<select id="city"></select>
	</head>
	<body>
		
	</body>
</html>
<script>
	var cityList=new Array(); 
	cityList[0] = new Array("朝阳区", "海淀区", "东城区", "西城区"); 
	cityList[1] = new Array("杭州市", "嘉兴市", "宁波市", "绍兴市"); 
	cityList[2] = new Array("石家庄市", "唐山市", "承德市", "张家口市");
	cityList[3] = new Array("广州市", "惠州市", "深圳市", "茂名市");
	 function changeCity(val){
	 	var city=document.getElementById("city");
	 	city.options.length=0;
	 	var arr=cityList[val];
	 	for(var i=0;i<arr.length;i++){
	 		var option = document.createElement("option");
	 		option.innerHTML=arr[i];
	 		option.value=arr[i];
	 		city.appendChild(option);
	 		
	 	}
	 	
	 }
</script>

三、Javascript简单了解（笔记）