前端---JavaScript基础+DOM编程与BOM编程

在浏览器中植入脚本技术的好处：1）减轻服务器压力2）在浏览器端进行校验
JavaScript：是BOM编程，基于浏览器对象模型编程。是一种弱类型语言
JScript：是DOM编程(重点)，基于文档对象模型编程。

js基础语法

js的基本使用方式

1.内部方式:在html源代码中的head标签中定义标签<script></script>,然后在标签中定义javascript语言.
2.外部方式:引入文件script标签(必须有标签体,有开始有结束的标签),通过标签中的src属性中连接到外部js文件.

js中的常用函数(写在script标签中或js文件中)

提示框函数:(window.)alert("提示框");
写正文:document.write("hello world");
类型转换函数:若遇到非数值类型的字符就停止转换.如果一开始就是非数值类型的字符,转换后值是:NaN
- 将string转换为整数:parseInt(变量名)
- 将string转换为小数:parseFloat(变量名)

js的变量和数据类型

js是一种弱类型语言:

1)使用var定义任何类型的变量,使用var也可以定义对象,var可以省略
java:Person p=new Person();
js:var p=new Person();
2)在js中,可以重复定义变量,后面定义的变量会覆盖起前面的定义.
var a=10; var a=20;

查看变量的数据类型:typeof(变量名),

js中不论整数还是小数,都是number类型
不论是字符还是字符串,都是string类型
js中还存在boolean类型
object类型(属于模板对象,所有对象都可以用它来表示)
undefined类型:未定义类型

js的运算符

算数运算符:+ - * / %

在js中,true=1,false=0;若与number类型进行算数运算时,会自动转为数值类型

比较运算符:> < >= <=
逻辑运算符:&& || !
三目运算符:(表达式) ? true的结果:false的结果

js中的流程控制语句

选择结构语句:

if(条件表达式){}else{}

if表达式中如果是number类型,非0 代表条件成立,0代表条件成立
表达式如果是空字符串,则条件不成立,如果是非空字符串,则条件成立
表达式如果是对象类型:null 代表条件不成立,非空表示条件成立
表达式如果是boolean:true就成立,false就不成立.

switch(表达式)
{case 值1: 
语句1;

default:
...;
}

在java中,switch语句中的表达式可以为:枚举,八大数据类型等,在js中,case后面既可以是常量,也可以是变量,也可以跟表达式

循环语句:

for(var 变量名;条件判断语句;步长语句){}
while(条件表达式){ }
do{}while(条件表达式);
with(document){}
for-in遍历数组或对象的使用:js中内置Array对象:数组对象.
- var 数组名称=[内容] 或 var 数组 new Array[]
- for-in格式:for(var 变量名 in 数组名称/对象名称){输出;}

在js要创建对象,首先要定义对象:

//定义对象
function Person(name,age)
{this.name=name;
this.age=age;}
//创建对象
var p=new Person("lily",23);

js中函数的定义和调用

使用function定义函数,格式为:function 函数名称(形参列表){函数体;}
调用函数:函数名称(实际参数列表);

注意:在js中,
1)定义的形式参数列表时,参数不能使用var修饰.
2)定义函数时,可以有return语句,但是不需要定义返回值
3)在表单验证时,使用函数进行校验,表单提交onsubmit需携带返回值
4)不存在方法重载的概念,后面定义的函数会自动覆盖前面定义的函数
5)当实际参数个数小于形式参数个数,结果为NaN,当实际参数个数大于形式参数个数,那么会取前形参需要的个数,多余的实际参数被移掉;因为在在js中默认有一个arguments数组,会将实际参数和形式参数绑定,并对其赋值.

事件编程的三要素:

1)事件源<input type="button" />
2)事件监听器:执行某个逻辑函数

function checkMonth(){
alert("hello")
}

3)注册事件:事件源和函数进行绑定<input type="button" onclick="checkMonth"/>

Date对象

var date=new Date();
/获取年份:
document.write(date.getFullYear()+“年”)
//获取月份:
document.write(date.getMonth()+1+“月”)
//获取日期:
document.write(date.getDate()+“日”)
//获取一周的星期
document.write(date.getDay())
//获取时
document.write(date.getHour()+“时”)
//获取分
document.write(date.getMinutes()+“分”)
//获取秒
document.write(date.getSeconds()+“秒”)

定时器

属于window对象的两个方法：
1.每隔指定毫秒值重复执行：window.setInterval(“任务”，毫秒值)
2.经过指定毫秒数执行一次任务：window.setTimeOut(“任务”，毫秒值)

practice:简单的网页时钟：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body onload="genDate()">
			<!--
	作者：sweet
	时间：2019-04-10
	描述：步骤：
	1.创建Date对象，拼接年月日时分秒
	2.获取span标签对象
	3.设置span标签对象的innerHTML对象
	4.设置定时器
-->
		当前系统时间为：<span id="spanTip"></span>
		
	</body>
	<script type="text/javascript">
			//通过ID属性获取span函数对象
			function genDate(){
				//1.设置span标签的innerHTNL属性
			var spanTip=document.getElementById("spanTip");
				//HTML是从上往下依次执行的，当加载到第一步时，标签还未加载，因此不能回去到id
			//设置span标签的innerHTML属性

			//1
			var date=new Date();
			var dateStr=date.getFullYear()+"年"+(date.getMonth()+1)+"月"+date.getDate()+"日&nbsp;&nbsp"
			+date.getHours()+"时"+date.getMinutes()+"分"+date.getSeconds()+"秒";
			//2
			var spanTip=document.getElementById("spanTip");
			//3
			spanTip.innerHTML=dateStr;
			//4.定时器
			setInterval("genDate()",1000);
			
			}
		</script>
</html>

Array对象

数组对象定义方式
1.var arr=[val1,val2];
2.var arr=new Array(val1,val2,val3);
3.var arr=new Array();
在js中定义数组，不用担心数组角标越界的问题，js会自动扩容
数组元素可以定义任何数据类型的元素。

两个方法：
通过指定字符串，将数组中的内容用该字符串拼接返回字符串值：join(str)
将数组中的内容进行反转：reverse();

自定义对象

4种方式：

有参方式：类似于Java对象中的有参构造
定义对象：
function 对象（形参）{
追加属性；
追加方法；
}
创建对象：var 对象名=new 对象名（实际参数）；
通过实例化对象可以调用属性和方法
无参方式：类似于Java中的无参构造
定义对象：
function 对象（）{
}
创建对象：
var p=new Person();
创建object对象，因为object对象包含所有对象，是一个模板对象
var p=new Object();
追加属性：p.name=“lily”;
追加方法：p.age=19;
追加方法：
p.say=function(){
alert(“调用了say方法”)；
}
字面量的方式：Json格式
{
“key1”:“value1”,
“key2”:“value2”
“key3”:“value3”
}

jason解析的三种方式：1.第三方的jar包：Gson 2.FastJson 3.Json原生的方法

eg:

var p={
//追加属性
"name":"王五"，
"age":25，
"say":function(){
alert("调用了say方法")}
}；

若要求在Array对象(内置对象)中添加search，max方法，但不能用自定义对象完成；
解决方案：js原型，在js原型中，给原型对象添加一个方法，然后在内置对象中创建原型对象，这个方法就会自动添加到原型对象（Prototype）中

js原型属性的作用：

1.在js中所有的内置对象中，都存在原型属性：prototype
2.在内置对象中调用原型属性，追加一个方法，这个方法会自动添加到内置对象中，
3.给内置对象中追加方法
格式：内置对象.prototype.方法名=function(参数){}

BOM编程

HTML在页面在被js引擎解析的时候，将页面中部分内容封装为对象:

window对象：窗口对象

Location对象：地址栏对象

history对象：历史纪录对象

screen对象：屏幕对象

window窗口对象

常用方法:
open("url（打开资源的文件路径）"，"打开方式","打开新窗口的宽高以及设置工具栏的显示")；打开窗口
setIntereval(""任务,毫秒值)定时器：每经过指定毫秒值，执行任务
clearInterval（timerId）取消定时器
setTimeOut（"任务",毫秒值）定时器：经过指定毫秒数，执行一次任务
clearInTimeOut（timerId）取消定时器
alert("")显示弹框
confirm()确认对话框
propt（）消息对话框和输入框

Location地址栏对象

常用属性：
href：改变当前url的地址，实现跳转

window是顶级对象，可以调用location对象的href属性window.location.href=“xxxx”;

常用方法：
reload():重新刷新当前页面

history历史纪录对象

forward();载入下一个URL
back();载入上一个url
go(整数);装入url代替上面两个方法

js事件编程分类

1.事件源
2.编写监听器
3.注册监听器

事件分类：
点击相关的事件：

单击点击的事件:onclick
双击点击的事件：onbclick

和焦点相关的事件：

聚焦事件：onfocus
失去焦点事件：onblur

选项卡发生变化的事件：

onchange事件：（省市联动）

和鼠标相关的事件：

鼠标经过：onmouseover
鼠标移出：onmouseout

当body中的内容加载完毕：

页面载入事件：onload事件
按键抬起事件 onkeyup

DOM编程

DOM编程是基于文档对象的编程模型，DOM编程的作用：通过文档对象（document）的一些属性和方法获取标签对象，然后通过标签对象更改他的属性来显示一些效果。

HTML在页面在被js引擎解析的时候，js引擎将html页面中每一个标签都封装成一个对象，通过操作这些对象在页面中显示效果。

html是以树状结构进行存储，每一个标签对象代表一个节点（Node），每个节点都有一个属性：nodeName。

获取标签对象的途径：

1.通过document的集合属性获取标签对象：
document.all返回当前页面中所有的标签对象集合
document.forms获取当前页面中以源顺序排列的所有的form标签对象的集合
document.images获取当前页面中以源顺序排列的所有的img标签对象的集合
document.links获取当前页面中以源顺序排列的所有的a标签对象的集合

通过查询节点来获取标签对象

1.通过document调用属性获取当前标签对象node；
节点关系：
node.parentNode：父节点
node.childNodes:当前节点的所有字节点

属性：查看节点类型nodeType

空格换行nodeType：3 ; nodeName为：#text；
标签nodeType：1 ; nodeName为：对应标签
html注释nodeType: 8 ; nodeName为：#comment

node.firstChild：第一个子节点

属性：查看节点类型nodeType
node.lastChild:最后一个子节点
属性：查看节点类型nodeType

node.sibling：兄弟节点
node.nextSibling:下一个兄弟节点
node.previousSibling:上一个兄弟节点

通过document方法获取标签对象

1.通过id属性getElementById(""id属性)；//id要唯一获取单个标签对象
2.通过name属性getElementByName("name属性值")；返回标签对象集合
3.通过标签名称getElementByTagName("标签属性")；获取标签对象集合
4.通过类选择器getElementByClassName（"class属性值"）获取标签对象

ducument操作标签对象的其他方法

和添加元素相关的方法 document.creatElement("标签元素名称")

添加元素后设置属性值:元素对象.setAttribute("属性名称","属性值")

和插入相关的方法:
在父节点中调用为其插入子节点:appendChild(指定元素对象);
在指定对象前面插入这个新对象:

指定对象节点.insertBefore(新元素对象,指定元素对象)

和删除相关的方法:
删除子节点:removeChild(子节点对象)

javascript的正则表达式

定义正则的格式:
var reg=/正则表达式/

数量词:

x?:0次或1次
x+:出现一次或多次
x{n}:x字符恰好出现n次
x{n,m}:x至少出现n次,但是不超过m次

test():用户输入的内容是否和当前规定的正则匹配:如果匹配,返回true,否则返回false

	<script type="text/javascript">
			var str="12";
			//正则表达式含义:字母a到z,A到Z,0到9,定义两次
			var reg=/[a-zA-Z0-9]{2}/;
			
			//如果用户输入的内容是否和当前规定的正则匹配:如果匹配,返回true,否则返回false
			//由于js是弱类型语言,只要字符串内容和正则存在匹配内容就会返回true
			//如果想让js正则规则严谨:加上边界匹配符号^$
			
			if(reg.test(str)){
				alert("条件成立");
				
			}else{
				alert("条件不成立");
			}
		</script>

综合应用:注册表单的前端验证

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<script type="text/javascript">
		function checkUsername(){
		//校验用户名
//1.获取用户名内容
var username=document.getElementById("username").value;
var reg=/^[a-zA-Z0-9]{4,14}$/;
//2.获取id="name_span"的标签对象
var nameSpan=document.getElementById("name_span");
if(reg.test(username)){
	//成功:设置nameSpan的innerHTML属性
	nameSpan.innerHTML="当前用户名可用".fontcolor("green");
	return true;
	
}else{
	nameSpan.innerHTML="当前用户名不可用".fontcolor("red");
	return false;
	
}

}
function checkPwd(){
	
//1.获取用户名内容
var pwd=document.getElementById("pwd").value;
var reg=/^[a-zA-Z0-9]{4,14}$/;
//2.获取id="name_span"的标签对象
var pwdSpan=document.getElementById("pwd_span");
if(reg.test(pwd)){
	//成功:设置nameSpan的innerHTML属性
	pwdSpan.innerHTML="当前密码可用".fontcolor("green");
	return true;
}else{
	pwdSpan.innerHTML="当前密码不可用".fontcolor("red");
	return false;
}
	
}
function checkRepwd(){
	var pwd=document.getElementById("pwd").value;
	var repwd=document.getElementById("repwd").value;
	var repwdSpan=document.getElementById("repwd_span");
	
	if(pwd.valueOf(repwd)){
		repwdSpan.innerHTML="两次输出密码一致".fontcolor("green");
		return true;
	}else{
		repwdSpan.innerHTML="两次输出密码不一致".fontcolor("red");
		return false;
	}
}
		function checkEmail(){
			//获取邮箱内容
			var email=document.getElementById("email").value;
    		//邮箱:数字或字母(可出现多次)@数字或字母(.cn/.com/...)
			
		var reg=/^[a-zA-Z0-9]+@[A-Za-z0-9]+(\.[a-z-A-Z]{2,3}){1,2}$/;
		//获取id_span
	var emailSpan=	document.getElementById("email_span");
		if(reg.test(email)){
			emailSpan.innerHTML="当前邮箱可用".fontcolor("green");
			return true;
			
		}else{
			emailSpan.innerHTML="当前邮箱不可用".fontcolor("red");
			return false;
		}
		}
		
		
		//校验全部表单,如果都通过,才能提交
function checkAll(){
	if(checkUsername()&&checkPwd()&&checkRepwd()&&checkEmail()){
		return true;
	}else{
		return false;
	}
}
	</script>
	<body >
		<!--
        	作者：offline
        	时间：2019-04-11
        	描述：onsubmit:表单数据是否能提交:true 提交
        									false 不能提交
    		script定义正则的规则:
    		用户名:4--14为数字或字母组成
    		密码:6--16位数字或字母组成
    		确认密码和密码一致
    		邮箱:数字或字母(可出现多次)@数字或字母
        -->
		<form action="切换图片.html" method="post" onsubmit="return checkAll()">
			
			用户名:<input type="text" id="username" value="" onblur="checkUsername()"/><span id="name_span"></span>
			<br />
			密码:<input type="password" name="" id="pwd" value="" onblur="checkPwd()"/><span id="pwd_span"></span>
			<br />
			确认密码:<input type="password" name="" id="repwd" value="" onblur="checkRepwd()"/><span id="repwd_span"></span>
			<br />
			邮箱:<input type="text" name="" id="email" value="" onblur="checkEmail()"/><span id="email_span"></span>
			<br />
			<input type="submit" name="" id="" value="注册" />
		</form>
	</body>
</html>