javaScript

第一章

为什么要学JavaScript

1.表单验证
2.页面动态效果

什么是JavaScript

JavaScript是一种基于对象和事件驱动的、跨平台的、并具有安全性能的脚本语言

JavaScript特点

1.向HTML页面中添加交互行为
2. 脚本语言，语法和Java类似
3. 解释性语言，边执行边解释

JavaScript组成

ECMAScript(核心)：
	JavaScript的核心，描述了语言的基本语法(var、for、if、array等)和数据类型(数字、字符串、布尔、函数、对象(obj、[]、{}、null)、未定义)，ECMAScript是一套标准，定义了一种语言（比如JS）是什么样子。
	
DOM（document object model 文档对象模型）：
	DOM（文档对象模型）是 HTML 和 XML 的应用程序接口（API）。DOM 将把整个页面规划成由节点层级构成的文档。HTML 或 XML 页面的每个部分都是一个节点的衍生物。
	
BOM（browser object model 浏览器对象模型）:
	对浏览器窗口进行访问和操作

JavaScript核心语法

8种核心语法	说明
变量	1.先声明变量再赋值 2.同时声明和赋值变量
数组	1.构造 var Str = new Str[5] 2.普通 var Str =[“blue”]
数据类型	undefined、null、number、boolean、string
注释	单行注释: 以 // 开始，以行末结束 多行注释: /* …… */ ，表示其中的语句是该程序中的注释
输入输出	警告对话框:alert(“警告信息"); 提示对话框:prompt(“提示信息”, “输入框的默认信息”);
运算符号	算术运算符 +、 - 、 * 、 / 、% 、++、 – 赋值运算符 = 、 += 、 -=、 比较运算符 >、 < 、 >= 、 <= 、 !==、 != 、 === 、 ==、 逻辑运算符 && 、 ！、||
控制语句	if…else… switch while… do…while for-in for-each
语法约定	代码区分大小写 变量、对象和函数的名称 分号

===与==的区别：
		1、==（等于）:只比较表面值，如“2”和2 相等    
		2、===（绝对等于）：同时比较表面值和数据类型,所以“2”和2不相等；

核心语法—数据类型

undefined:
        var width;
        变量width没有初始值，将被赋予值undefined
null:
        表示一个空值，与undefined值相等
number:
        var iNum=23;     //整数
        var iNum=23.0;   //浮点数
boolean:
        true和false
String:	
        一组被引号（单或双引号）括起来的文本
        var string="This is JavaScript";

核心语法— typeof运算符

 typeof：
            检测变量的数据类型
            
 typeof运算符的返回值如下：
             undefined：变量被声明但还未被赋值
             String：用单引号或双引号来声明的字符串
             boolean：true或false
             number：整数或浮点数
             object：javascript中的对象、数组和null

核心语法—String对象

属性:
    字符串对象.length
方法:
    字符串对象.方法名();

String对象方法如下表：

方法名称	说 明
charAt(index)	返回在指定位置的字符
indexOf(str)	查找指定字符串在原字符串中首次出现的位置
substring(index1，index2)	返回位于指定索引 index1和index2之间的字符串（包括index1但不包括index2对应的字符）
split(str)	将字符串分割为字符串数组

核心语法— 数组

名称	说明
sort()	排序
reverse()	反转
join()	连接符
push()	向数组之后添加一个或多个函数并返回新数组的长度
pop()	方法从数组中删除最后一个元素

网页中引用JavaScript的方式

1：使用<script>标签：
	例如上面例子：JavaScript的简单应用
    
2：外部JS文件:
	<script type="text/javascript"  src="index.js" ></script>

3：直接在HTML标签中:
	<input name="btn" type="button" value="弹出消息框" onclick="javascript:alert('欢迎你');"/>

什么是函数

函数的含义：类似于Java中的方法，是一个能够完成特定任务/功能的代码块

使用更简单：不需要定义函数属于某个类，直接使用即可

函数的分类：系统函数和自定义函数

常用的系统函数

parseInt ("字符串")
	将字符串转换为整型数字 
	如: parseInt ("86")将字符串“86“转换为整型值86

parseFloat("字符串")
	将字符串转换为浮点型数字 
	如: parseFloat("34.45")将字符串“34.45“转换为浮点值34.45

isNaN()
	用于检查其参数是否是非数字

自定义函数

有参/无参函数:
	语法：
		function 函数名(参数1,参数2,参数3,…){
                 //JavaScript语句
                 [return 返回值] //可有可无
		}

调用函数
	函数调用一般和表单元素的事件一起使用，调用格式：        
语法：
	事件名＝ "函数名( )";	
    
调用无参函数示例：
	<input name="btn" type="button"  value="显示5次js"  onclick="study( )" />
	//单击此按钮时，调用函数study( )，执行函数体中的代码
	
	function study( ){
        for(var i=0;i<5;i++){
            document.write("<h4>js</h4>");
        }
    }    
调用有参函数示例：
	<input name="btn" type="button" value="请输入显示欢迎学习js的次数"
  onclick="study(prompt('请输入显示欢迎学习js的次数:',''))" />
  	//单击此按钮时，调用函数study (count )，执行函数体中的代码
  	
	function study(count){
        for(var i=0;i<count;i++){
            document.write("<h4>欢迎学习js</h4>");
        }
    }

什么是事件驱动

函数：
    函数被声明后	不会执行
    绑定到元素上后	不会执行
    触发事件后	执行

常用的事件

名称	说明
onload	当一个页面或一幅图像完成加载时
onclick	当鼠标点击某个对象时
onmouseover	当鼠标移动到某个元素上时
onkeydown	当某个键盘按键被按下时
onchange	当域的内容被改动时
onmouseout	用户把鼠标移开 HTML 元素

js三大部分

1、ecmascript
2、bom
3、dom

第二章

Javascript操作BOM对像

window对象的常用属性

属性名称	说明
history	有关客户访问过的URL地址
location	当前访问的URL地址

window对象的常用方法

方法名称	说明
prompt()	显示可提示用户输入的对话框
alert()	显示带有一个提示信息和一个确定按钮的警示框
confirm()	显示带有提示信息、确定和取消按钮的对话框
close()	关闭浏览器
open()	打开一个新的浏览器窗口，加载给定URL所指定的文档
setTimeout()	在指定的毫秒数后调用函数或计算表达式
setinterval()	按照指定的周期（以毫秒计算）来调用函数或表达式

open（）方法

窗口特征

属性名称	说明
height、width	窗口文档显示区域的高度、宽度、以像素计
left、top	窗口x坐标、y坐标，以像素计
toolbar=yes/no / 1 / 0	是否显示浏览器的工具栏。默认yes
scrollbars=yes/no / 1 / 0	是否显示滚动条。
location=yes/no / 1 / 0	是否显示地址地段。
status=yes/no / 1 / 0	是否添加状态栏
menubar=yes/no / 1 / 0	是否显示菜单栏
resizable=yes/no / 1 / 0	窗口是否可调节尺寸。
titlebar=yes/no / 1 / 0	是否显示标题栏
fullscreen=yes/no / 1 / 0	是否使用全屏模式显示浏览器。默认是no。 处于全屏模式的窗口必须同时处于剧院模式

location对象

常用属性

名称	说明
host	设置或返回主机名和当前URL的端口号
hostname	设置返回当前URL的主机名
href	设置或返回完整的URL

常用方法

名称	说明
reload（）	重新加载当前文档
replace（）	用新的文档替换当前文档

history对象

常用方法

名称	说明
back()	加载history对象列表中的前一个URL
forward()	加载history对象列表中的下一个URL
go()	加载history对象列表中的某个具体URL

history.back()===history.go(-1)浏览器中的后退
history.forward()===history.go(1)浏览器中的前进

Math对象

常用方法

方法	说明和示例
ceil()—天花板	对数进行向上取整 Math.ceil(25.5);返回26 Math.ceil(-25.5);返回-25
floor()—地板	对数进行向下取整 Math.floor(25.5);返回25 Math.floor(-25.5);返回-25
round()	对数进行四舍五入 Math.round(25.5);返回26 Math.round(-25.5);返回-26
random()	返回（0-1）之间的随机数 Math.random();列如：0.6273608814137365

第三章Javscript操作DOM对象

分类

DOM Core
HTML-DOM
XML-DOM

根据层次关系访问节点

Element

属性名称	描述
firstElementChild	返回节点的第一个子节点，最普通的用法是访问该元素的文本节点
lastElementChild	返回节点的最后一个节点
nextElementSibling	下一个节点
previousElementSibling	上一个节点
children	获取下面所有的子节点，用下标来选择节点

访问节点

案例：

//方法一
var count = document.getElementById("cartList").lastElementChild.firstElementChild.innerHTML;
var num1 = document.getElementById("cartList").firstElementChild.lastElementChild.previousElementSibling.innerHTML;
var num2 = document.getElementById("cartList").lastElementChild.previousElementSibling.lastElementChild.previousElementSibling.innerHTML;

document.getElementById("o").lastElementChild.innerHTML="白说"+num1+"<br>书店"+num2+"<br>总价"+count;	
        
//方法二
var divs = document.getElementById("cartList");
var num1 = divs.children[0].children[2].innerHTML;
var num2 = divs.children[1].children[2].innerHTML;
var count= divs.children[2].children[0].innerHTML;


var str = "白说"+num1+"<br>书店"+num2+"<br>总价"+count;

divs.nextElementSibling.innerHTML = str;

操作节点（重点）

1、操作节点的属性
2、创建和插入接待你
3、删除和替换节点
4、操作节点样式
5、获取元素的样式

节点信息

nodeName：节点名称
nodeValue： 节点值
nodeType：节点类型

节点类型	NodeType值
元素element	1
元素attr	2
元素text	3
元素comments	8
元素document	9

操作节点

操作节点的属性

getAttribute(" ") 属性名称
setAttribute(" "," ")    第一个时写属性名称 ，第二个是写属性值

创建和插入节点

创建和插入节点

名称	描述
createElement(tagName)	创建一个标签名为tagName的新元素节点
A.appendChild(B)	把B节点追加至A节点的末尾
insertBefore(A,B)	把节点插入到B节点之前
cloneNode(deep)	复制某个指定节点 ”这里时复制这个（deep）“
clondeNode（true）	除自己外包括下面所有 深克隆
clondeNode（false）	只包括自己 浅克隆

判断是否被选中

checked：判断是否被选中

删除替换节点

1、删除节点
removeChild("要删除子节点") //子节点被删除前应解除所有绑定的事件，否则无法回收事件绑定所占用的内存，此方法返回被删除的节点的引用
2、替换节点
replaceChild("新的节点","旧的节点")
3、删除属性
element.removeAttribute('attrName');
element.removeAttributeNode('attrNode');   //返回删除的属性节点

节点信息

<html>
<head>
    <title>节点信息</title>
</head>
<body>
<ul id="nodeList"><li>nodeName</li><li>nodeValue</li><li>nodeType</li></ul><p></p>
<script>
    var ul = document.getElementById("nodeList");
    var firstLiNodeType = ul.firstChild.nodeType;
    var fristLiTextNodeType = ul.firstChild.firstChild.nodeType;
    var fristLiTextNodeName = ul.firstChild.firstChild.nodeName;
    var fristLiTextNodeValue = ul.firstChild.firstChild.nodeValue;
    var str = "firstLiNodeType"+firstLiNodeType+
        "<br>fristLiTextNodeType"+fristLiTextNodeType+
        "<br>fristLiTextNodeName"+fristLiTextNodeName+
        "<br>fristLiTextNodeValue"+fristLiTextNodeValue;
    ul.nextSibling.innerHTML = str;
</script>
</body>
</html>

操作节点样式

1、style属性
2、classNmae属性

获取元素样式

1、currentStyle
2、getComputedStyle()
示例：
<head lang="en">
	<meta charset="UTF-8">
<title>随鼠标滚动的广告图片</title>
<style type="text/css">
#main{text-align:center; width:1014px; margin: 0 auto;}
#adver{
	position:absolute;
	left:10px;
	top:30px;
	z-index:2;
}
</style>

</head>
<body>
<div id="adver">
	<img src="images/adv.jpg"/>
</div>
<div id="main">
	<img src="images/main1.JPG"/>
	<img src="images/main2.JPG"/>
	<img src="images/main3.JPG"/>
</div>

<script>
	//onload事件会在页面或图像加载完成之后立即执行
	window.onload = inix;
	//onscroll当滚轮条滚动时触发的事件
	window.onscroll = move;


	//层距页面顶端的距离
	var adverTop;
	//层距左端的距离
	var adverLeft;
	//层对象
	var adverObj;
	function inix(){
		//获得层对像
		 adverObj = document.getElementById("adver");
		//ie中使用的是这个currentStyle方法
		if (adverObj.currentStyle){
			adverTop = adverObj.currentStyle.top;
			adverLeft = adverObj.currentStyle.left;
			console.log(a);
		}else{
			//firefox使用的是document.defaultView.getComputedStyle\
			//这个方法接收的两个参数
			//1、要取得计算样式的元素 2、伪元素字符串（列如：：after ：hover）
			//如果不需要伪元素信息，第二个参数可以默认为null
			adverTop = parseInt(document.defaultView.getComputedStyle(adverObj,null).top);
			adverLeft = parseInt(document.defaultView.getComputedStyle(adverObj,null).left);
		}
		console.log(adverTop+":"+adverLeft);
	}
	function move(){
		//获得当前页面滚动条纵坐标的位置
		var TopGun = parseInt(document.documentElement.scrollTop||document.body.offsetTop);
		//获得当前页面滚动条横坐标的位置
		var LeftGun = parseInt(document.documentElement.scrollLeft||document.body.offsetLeft);

		console.log(TopGun+":"+LeftGun)

		//设置层对象左的距离
		adverObj.style.left = adverLeft+LeftGun+"px";

		//设置层对象上的距离
		adverObj.style.top = adverTop+TopGun+"px";
	}
</script>