JavaWeb基础知识day03——javascript知识

javascript 俗称 js 

JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，
	内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言
组成部分:
	ECMAScript:js基础语法(规定 关键字 运算符 语句 函数等等...)
	BOM:浏览器对象模型
	DOM:文档对象模型
作用:
	修改html页面的内容
	修改html的样式
	完成表单的验证
注意:
	js可以在页面上直接写,也可以单独出去
	js的文件的后缀名 .js
js和html整合
	方式1:在页面上直接写
		将js代码放在 <script></script>标签中,一般放在head标签中
	方式2:独立的js文件
		通过script标签的src属性导入
js中变量声明:
	var 变量名=初始化值;
	var 变量名;
		变量名=初始化值;
	注意:
		var可以省略 建议不要省略
		一行要以分号结尾,最后一个分号可以省略,建议不要省略
js的数据类型:
	原始类型:(5种)
		Null
		String
		Number
		Boolean
		Undefined
		通过 typeof运算符可以判断一个值或者变量是否属于原始类型,若属于原始类型,他还可以判断出属于那种原始类型
			typeof 变量|值;
		若变量为null,使用typeof弹出的值 object
		
		使用typeof的返回值
			undefined - 如果变量是 Undefined 类型的 
			boolean - 如果变量是 Boolean 类型的 
			number - 如果变量是 Number 类型的 
			string - 如果变量是 String 类型的 
			object - 如果变量是一种引用类型或 Null 类型的 

	引用类型:
//
js:事件驱动函数
	函数定义格式:
		方式1:
			function 函数名(参数){
				函数体;
			}
		注意:函数不用声明返回值类型 
			参数不需要加类型
			函数调用的时候
				函数名(参数)
js中的事件:
	常见的事件:
		单击:  onclick
		表单提交: onsubmit 加在form表单上的 onsubmit="return 函数名()"  注意函数返回值为boolean类型
		页面加载: onload
		焦点事件:★
			onfocus
			onblur
		表单事件:★
			onsubmit
			onchange 改变
		页面加载事件:★
			onload
		
		鼠标事件(掌握)
			onclick
		鼠标事件(了解)
			ondblclick:双击
			onmousedown:按下
			onmouserup:弹起
			onmousemove:移动
			onmouserover:悬停
			onmouserout:移出
		键盘事件(理解)
			onkeydown:按下
			onkeyup:弹起
			onkeypress:按住
		
js事件和函数的绑定:
	方式1:
		通过标签的事件属性   <xxx onclick="函数名(参数)"></xxx>
js获取元素:
	方式1:
		var obj=documnet.getElementById("id值");
获取元素的value值
	obj.value;
获取元素的标签体中的内容
	obj.innerHTML;

函数的定义:
	方式1:
		function 函数名(参数){
			函数体;
		}	
	
	方式2:
		var 函数名=function(参数){
			函数体;
		}
		
js事件和函数的绑定:
	方式1:
		通过标签的事件属性   <xxx onclick="函数名(参数)"></xxx>
	方式2:
		给元素派发事件
			document.getElementById("id值").onclick=function(参数){....}
			document.getElementById("id值").onclick=函数名
		注意:
			内存中应该存在该元素才可以派发事件
		a.将方式2的js代码放在html页面的最下面
		b.在页面加载成功之后在运行方式2的js代码  onload事件.

bom中window对象的定时器方法
定时器:
	var id=setInterVal(code,毫秒数):每隔指定的毫秒数执行一次函数 周期
	var id=setTimeout(code,毫秒数):延迟指定的毫秒数之后 只执行一次函数
	
	清除定时器:
		clearInterval(id);
		claerTimeout(id);
String对象
	原始类型的String是一个为对象可以直接调用String类对象的方法
	substring(0,endIndex);

补充:
	运算符:
		比较运算符: > >= < <=
		若两边都是数字 和java一样
		若一般为数字,另一边为字符串形式的数字,将字符串形式的数字转换成数字在进行比较   3>"2"
		若一般为数字,另一边为字符串,返回一个false   3>"hello"
		两边都是字符串的时候,比较ascii
	等性运算符 == ===
		== :只判断值是否相同
		===:不仅判断是否相同,还要判断类型是否相同
语句:
	if语句 和java一样
	for while 语句和java一样
	switch 和java一样(区别,switch 后面跟字符串. 还可以跟变量)
/



总结:掌握
	1.css和html整合
		方式3种 
	2.css中选择器:
		id class 元素
		属性 后代 
	3.js
		js和html整合
			方式两种
	4.变量定义
	5.函数定义
		2中格式
	6.事件
		onclick onload onsubmit
	7.事件和函数的绑定
		2中方式
	8.定时器 2种
	9.for while if
bom(浏览器对象模型)总结
	所有的浏览器都有5个对象
		window:窗口
		location:定位信息 (地址栏)
		history:历史
window对象详解:
	如果文档包含框架（frame 或 iframe 标签），浏览器会为 HTML 文档创建一个 window 对象，
	并为每个框架创建一个额外的 window 对象。
	常用的属性:
		通过window可以获取其他的四个对象
			window.location 等价域 location
			window.history 等价于 history
			...
	常用的方法
		消息框
			alert("...."):警告框
			confirm("你确定要删除吗?"):确定框 返回值:boolean
			prompt("请输入您的姓名"):输入框 返回值:你输入的内容
		定时器
			设置定时器
				setInterval(code,毫秒数):周期执行
				setTimeout(code,毫秒数):延迟多长事件后 只执行一次.
				
				例如:
					setInterval(showAd,4000);
					serInterval("showAd()",4000);
			
			清除定时器
				clearInterval(id):
				clearTimeout(id):
		打开和关闭
			open(url):打开
			close():关闭
location:定位信息	
	常用属性:
		href:获取或者设置当前页面的url(定位信息)
		
		location.href; 获取url
		location.href="...";设置url 相当于 a标签
history:历史
	back();后退
	forward():向前
	★go(int)
		go(-1) 相当于 back()
		go(1) 相当于 forward()
dom(文档对象模型)
	当浏览器接受到html代码的时候,浏览器会将所有的代码装载到内存中,形成一棵树(document树)
	节点(Node)
		文档节点 document
		元素节点 element
		属性节点 attribute
		文本节点 text
	获取节点:
		通过document可以获取其他节点:
			常用方法:
				document.getElementById("id值"):获取一个特定的元素
				document.getElementsByTagName("标签名"):通过标签名获取一种元素(多个)
				document.getElementsByClassName("class属性的值"):通过class属性获取一类元素(多个)
				document.getElementsByName("name属性的值"):通过name属性获取一类元素(多个)
		设置获取获取节点的value属性
			dom对象.value;获取
			dom对象.value="";设置
		设置或者获取节点的标签体
			dom对象.innerHTML;获取
			dom对象.innerHTML="";设置
		获取或者设置style属性
			dom对象.style.属性;获取
			dom对象.style.属性="";设置
		获取或者设置属性
			dom对象.属性
/
对于htmldom的操作若在js或者htmldom 查找不到 去查找xml dom
	关于文档的操作 在 xml dom 的document中
	关于元素的操作 在 xml dom 的element中
		appendChild(dom对象):在一个元素下添加孩子
数组:
	语法:
		new Array();//长度为0
		new Array(size);//指定长度的
		new Array(e1,e2..);//指定元素
		非官方
			var arr4=["aa","bb"];
	常用属性:
		length
	注意:
		数组是可变的
		数组可以存放任意值
	常用方法:(了解)
		存放值:对内容的操作
			pop():弹	最后一个
			push():插入 到最后
			
			shift():删除第一个
			unshift():插入到首位
		打印数组:
			join(分隔符):将数组里的元素按照指定的分隔符打印
		拼接数组:
			concat():连接两个或更多的数组，并返回结果。
		对结构的操作:
			sort();排序
			reverse();反转
引用类型总结:
	原始类型中的String Number Boolean都是伪对象,可以调用相应的方法
	Array:数组
	String:
		语法:
			new String(值|变量);//返回一个对象
			String(值|变量);//返回原始类型
		常用方法:
			substring(start,end):[start,end)
			substr(start,size):从索引为指定的值开始向后截取几个
			
			charAt(index):返回在指定位置的字符。
			indexOf(""):返回字符串所在索引
			
			replace():替换
			split():切割
			
		常用属性:length	
	Boolean:
		语法:
			new Boolean(值|变量);
			Boolean(值|变量);
			非0数字 非空字符串 非空对象 转成true
	Number
		语法:
			new Number(值|变量);
			Number(值|变量);
		注意:
		
			null====>0 
			fale====>0 true====>1
			字符串的数字=====>对应的数字
			其他的NaN
	Date:
		new Date();
		常用方法:
			toLocalString()
	RegExp:正则表达式
		语法:
			直接量语法  /正则表达式/参数
			直接量语法  /正则表达式/
			
			new RegExp("正则表达式")
			new RegExp("正则表达式","参数") 
			参数:
				i:忽略大小写
				g:全局
			常用方法:
				test() :返回值为boolean
	Math:
		Math.常量|方法
		Math.PI
		Math.random()  [0,1)
		
	全局:
		★
		decodeURI() 解码某个编码的 URI。 
		encodeURI() 把字符串编码为 URI。

		Number():强制转换成数字
		String():转成字符串
		
		parseInt():尝试转换成整数
		parseFloat():尝试转换成小数
		
		eval() 计算 JavaScript 字符串，并把它作为脚本代码来执行。