JavaScript

体验JavaScript

<html >
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>体验JavaScript语言</title>
	</head>
	<body>
		<h1>体验JavaScript语言</h1>
		<script type="text/javascript">
			window.document.write("hello,world");
		</script>
	</body>
</html>

语法

引入方式与引入位置

向HTML页面插入JavaScript的主要方法，就是使用<script元素>。
使用<script>元素的方式有两种：直接在HTML页面中嵌入JavaScript代码和包含外部的JavaScript文件。

JS代码存放在标签对<script>．．．</script>中。
使用script标签的src属性引入一个js文件。（方便后期维护，扩展）

例：<script src=”test.js” type=”text/javascript”></script>
注：规范中script标签中必须加入type属性。

内部
在这里插入图片描述

外部
html文件
在这里插入图片描述

<script>标签的位置
关于<script>标签的位置，<script>应该放在页面的<head>元素中。

<html >
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>在HTML中使用JavaScript</title>
		<script type="text/javascript" >
			window.document.write("世界你好！！！");
		</script>
	</head>
	<body>
		<h1>将JavaScrip标签放在head上</h1>
	</body>
</html>

注意：
1、页面上可以有多个<script>标签
2、 <script>标签按顺序执行
3、 <script>标签可以出现在任意的页面位置
4、<script>标签一定要写</script>关闭，而不能<script/>这样关闭。否则没有任何错误信息，但是没有运行结果。

常用函数

window.alert() 或写为 alert() ：显示一个提示框显示内容。
window.document.write() ：在网页的当前位置处写内容。

变量

<script type="text/javascript" >
			//定义变量
			var color = "red";
			var num = 25;
			var visible = true;
</script>

同时，可以随时改变变量所存数据的类型（尽量避免这样做）。

<script type="text/javascript" >
			//定义变量
			var message = "hello";
			message = 100;
			alert(message);
</script>

该案例中变量message一开始保存了一个字符串值"hi" 然后又被一个数值100取代。这在ECMAScript是有效的，但是不建议这样使用。
使用细节：
1、 var关键字在定义变量的时候可以省略不写
2、变量名可以重复，后面的将覆盖前面的变量
3、变量的类型取决于值的类型
一条语句定义多个变量。
中间使用豆号隔开即可，可初始化，也可以不初始化。

<script type="text/javascript" >
			var name = "jack", 
			age = 28, 
			gender = "男";
</script>

JavaScript代码块及其代码块变量作用域

<script type="text/javascript" >
			//代码块 (Java)对代码进行封装 隔离变量的作用域
			{
				var a = 100;
				document.write(a + "</br>");
			} {
				document.write(a + "</br>");
				//JavaScript不会隔离变量作用域
			}

		</script>

JavaScript函数基础

函数主要用来封装具体的功能代码。
函数是由这样的方式进行声明的：关键字 function、函数名、一组参数，以及置于括号中的待执行代码。

注意：函数的形参是不用声明使用的。

函数的基本语法是这样的：
function functionName(arg0, arg1, … argN) {
statements
}

例如：

function sayHi(sName, sMessage) {
  alert("Hello " + sName + sMessage);
}

调用函数？

函数可以通过其名字加上括号中的参数进行调用，如果有多个参数。

如果您想调用上例中的那个函数，可以使用如下的代码：

sayHi("David", " Nice to meet you!")

调用上面的函数 sayHi() 会生成一个警告窗口。

函数的返回值

没有返回值类型，如果一个函数需要返回值直接使用return即可.
该函数只需要使用 return 运算符后跟要返回的值即可。

function sum(iNum1, iNum2) {
  return iNum1 + iNum2;
}

注释：如果函数无明确的返回值，或调用了没有参数的 return 语句，那么它真正返回的值是 undefined。

函数格式
	Function 函数名(参数列表){
	代码;
	return 返回值; //return 不是必须的.
}
	示例:
		function foo() {
			alert("test");
		}
		function foo2( a ){
			alert(a);
			return; // 没有返回值，表示方法执行完了，后面如果有代码就不会执行了
		}
		function foo3( a, b ){
			alert(a + b);
		}
		function foo4( a, b ){
			return a + b;
		}

注意事项:
1.不需要类型，只写形参的名称就可以了。
2声明时不需要指定返回值类型；return可以有，也可以没有。
3. javascript中的函数没有重载的形式，后定义的函数会直接覆盖前面的函数。
4. 一个函数可以接收任意个参数。

参数:
		JS的函数都是类似于Java中可变参数的。

在函数中可以直接使用arguments变量，arguments是一个数组，表示所有传递过来的参数。
在声明函数时，定义的形参就对应arguments数组中相应位置的参数值，写形参只是用着方便一点。
参数示例
定义：

			function foo( a, b, c ){
				...
			}
		调用：	
			foo()
			foo( 1, 2 )
			foo( 1, 2, 3 )
			foo( 1, 3, 5, 7, 9 )
			foo( "aa", null, "cc" )
	没有重载
		当同一个名称的函数定义多次时，最终使用的是最后一个的定义。没有重载！
		例：
			function sum(){ alert("11"); }
			function sum(a,b){ alert("22"); }*
			调用时写sum(1,2)，结果还是显示“22”。

总结：
特点：
1、使用function关键字定义函数。
2、没有任何的返回值类型。
3、函数的定义优先执行，与顺序无关。
4、可以通过函数名赋值函数，函数变量的类型是function对象。
5、参数列表不能有var关键字。
6、函数的参数列表在具体调用的时候实参个数可以和形参个数不同。
7、JavaScript函数天然的支持可变参数。
8、同名的函数最后声明会覆盖前面以声明。Javascript中没有函数重载。
案例:体验JavaScript
定义一个输入框输入的月份，然后输出本月对应的天数。

<html>
	<head>
		<title>学习JavaScript</title>
	</head>
	<body>
		月份：
		<input type="text" id="month">
		<input type="button" value="显示天数" onclick="foo()">
		<!--
		31天：1,3,5,7,8,10,12
		30天：4,6,9,11
		28天：2
		-->
		<script type="text/javascript">
			function foo(){
				var monthValue = document.getElementById("month").value;
				// 如果是非数字，则不再继续执行
				if( isNaN(monthValue) ){
					alert("请输入正确的月份！");
					return;
				}
				// 转为数字
				monthValue = parseInt(monthValue);
				// 判断范围
				if( monthValue < 1 || monthValue > 12){
					alert("请输入正确的月份（1--12）！");
					return;
				}
				// 根据月份显示天数
				switch(monthValue){ // 这时不会自动转换类型，所以先转型
					case 2:
						alert("28天");
						break;
					case 4:
					case 6:
					case 9:
					case 11:
						alert("30天");
						break;
					default:
						alert("31天");
						break;
				}
			}
		</script>
	</body>
</html>

自定义对象

无参构造函数

/*
 * 自定义对象
 *
 *  */
function Person() {
	window.document.write("constructor()<br>");
}

var person = new Person();
//定义属性
person.name = "jack";
person.age = 23;
//定义方法
person.work = function() {
	window.document.write("person working...<br/>");
};
//获取构造函数
window.document.write(person.constructor + "<br/>");

window.document.write(person.name + "," + person.age + "<br/>");
person.work();

有参数构造函数

function Person(name, age) {
	this.name = name;
	this.age = age;
	this.work = function() {
		alert(this.name + ":" + this.age);
	}
}

var person = new Person("jack", 28);
person.work();

BOM

BOM编程基础

全称 Browser Object Model，浏览器对象模型。
JavaScript是由浏览器中内置的javascript脚本解释器程序来执行javascript脚本语言的。
为了便于对浏览器的操作，javascript封装了对浏览器的各个对象使得开发者可以方便的操作浏览器。

window 对象

Window 对象是 JavaScript 层级中的顶层对象。
Window 对象代表一个浏览器窗口或一个框架。
Window对象会在或每次出现时被自动创建。

window中的方法

document	对 Document 对象的只读引用 
location	用于窗口或框架的 Location 对象
history	对 History 对象的只读引用。  
document.tilte	设置网页的标题
moveto()  将窗口左上角的屏幕位置移动到指定的 x 和 y 位置。
moveby()    相对于目前的位置移动。
resizeTo()   调整当前浏览器的窗口。
open()		打开新窗口显示指定的URL（有的浏览器中是打一个新的选项卡）
setTimeout(vCode, iMilliSeconds)		超时后执行代码。
setInterval(vCode, iMilliSeconds)		定时执行代码，第一次也是先待，到时再执行。

事件

a) 事件说明

基本上所有的HTML元素中都可以指定事件属性。
每个元素支持什么样事件应查询文档。
所有的事件属性都是以on开头，后面的是事件的触发方式，如：
	onclick，表示单击
	onkeydown，表示键按下
	...

b) 常用的事件类型：

鼠标点击相关：
	onclick 在用户用鼠标左键单击对象时触发。 
	ondblclick 当用户双击对象时触发。 
	onmousedown 当用户用任何鼠标按钮单击对象时触发。 
	onmouseup 当用户在鼠标位于对象之上时释放鼠标按钮时触发。 

鼠标移动相关：
	onmouseout  当用户将鼠标指针移出对象边界时触发。 
	onmousemove 当用户将鼠标划过对象时触发。 

焦点相关的：
	onblur 在对象失去输入焦点时触发。 
	onfocus 当对象获得焦点时触发。

其他：
	onchange 当对象或选中区的内容改变时触发。 
	onload 在浏览器完成对象的装载后立即触发。 
	onsubmit 当表单将要被提交时触发。

location 对象

Location 对象是由 JavaScript runtime engine 自动创建的，包含有关当前 URL 的信息。
location中的重要方法：

href属性	设置或获取整个 URL 为字符串。
reload()	重新装入当前页面

screen 对象

Screen 对象是由 JavaScript runtime engine 自动创建的，包含有关客户机显示屏幕的信息。

属性：

availHeight	获取系统屏幕的工作区域高度，排除 Microsoft Windows 任务栏。 	
availWidth	获取系统屏幕的工作区域宽度，排除 Windows 任务栏。 	
height		获取屏幕的垂直分辨率。 
width		获取屏幕的水平分辨率。

示例：

document.write("屏幕工作区: " + screen.availHeight + ", " + screen.availWidth + "<br>");
document.write("屏幕分辨率: " + screen.height + ", " + screen.width + "<br>");

document对象

该对象代表整个文档页面

对象的集合：

all     获取页面所有元素对象
forms   获取页面所有表单对象
images	获取页面所有图片对象
links   获取所有超链接或area对象

DOM

DOM简介

全称Document Object Model，即文档对象模型。
DOM描绘了一个层次化的树，允许开发人员添加、删除、修改页面的某一部分。

    浏览器在解析HTML页面标记的时候，其实不是按照一行一行读取并解析的，
	而是将HTML页面中的每一个标记按照顺序在内存中组建一颗DOM树，
	组建好之后，按照树的结构将页面显示在浏览器的窗口中。

节点层次

在这里插入图片描述

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
// 获取dom 树, 获取document 对象.
var dom = window.document;
// all 获取页面中所有的标签节点 ,注释和文档类型约束.
function testAll() {
	var allArr = dom.all;
	alert(allArr.length);
	for (var i = 0; i < allArr.length; i++) {
		//获取节点名称
		alert(allArr[i].nodeName);
	}
}
// anchors 获取页面中的所有的锚连接.
function testAnchors() {
	var anArr = dom.anchors;
	alert(anArr.length);
}
// froms  获取所有的form 表单对象
function testForms() {
	var formArr = dom.forms;
	alert(formArr.length);
	alert(formArr[0].nodeName);
}
// images
function testImages() {
	var imageArr = dom.images;
	alert(imageArr.length);
}
// links  获取页面的超链接.
function testLinks() {
	var linkArr = dom.links;
	//alert(linkArr.length);
	for (var i = 0; i < linkArr.length; i++) {
		//alert(linkArr[i].nodeName);
	}
	for (var i in linkArr) {
		alert(i);
	}
}
//testLinks();
// 获取页面的Body
var body = dom.body;
alert(body.nodeName);
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>javascript</title>
</head>
<body onmousemove="test(this)">
	<img src="xxx" alt="这是一个美女"/>
		<img src="xxx" alt="这是一个美女"/>
		<img src="xxx" alt="这是一个美女"/>
		<a href="http://www.baidu.com">百度一下</a>
		<a href="http://www.google.com">百度两下</a>
		<a href="http://www.baigu.com">百谷一下</a>
		<a name="one"></a>
		<a name="two"></a>
		<form>
			<label>姓名:</label><!--默认不写type 就是文本输入框-->
			<input  type="text"/>
		</form>
</body>
</html>

获取节点对象案例

document.getElementById(“html元素的id”)
document.getElementsByTagName(“标签名”)
document.getElementsByName(“html元素的name”)

示例：
1，得到所有的div元素并显示信息（innerHTML）。
2，得到所有div元素中id为"test"的结果。

Var dom = window.document;
function testByTagName() {
	var iptArr = dom.getElementsByTagName("input");
	for (var i = 0; i < iptArr.length; i++) {
		alert(iptArr[i].value);
	}
}
// window 对象提供了一个事件, onload 事件 onload(页面加载完毕执行该代码) 是一个事件, 给事件一个方法,
//window.onload = testByTagName;
//2，得到所有标签id为"username"的结果。获取旧value值并设置value值
function testById() {
	var user = dom.getElementById("username");
	alert(user.value);
	user.value = "rose";
}
//testById();
//3. 获取所有标签name 为like的元素.获取value值.
function testByName() {
	var likeArr = dom.getElementsByName("like");
	for (var i = 0; i < likeArr.length; i++) {
		alert(likeArr[i].value);
	}
}
testByName();

属性操作练习
1，写一个form，其中有多个checkbox。
2，获取所有选中的数量。
3，实现全选与全不选的效果。


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>

<script type="text/javascript">
function getSum()
{
	/*
	需求：通过点击总金额按钮获取被选中的条目的金额的总和，并将总金额显示在按钮右边。
	思路：
	1，先获取所有的checkbox对象。
	2，对这些对象进行遍历。判断哪个对象被选中。
	3，对被选中对象的金额进行累加。
	4，显示在按钮右边。
	*/
	
	var items = document.getElementsByName("item");
	var sum = 0;
	for(var x=0; x<items.length; x++)
	{
		if(items[x].checked)
		{
			sum += parseInt(items[x].value);
		}
	}
	var str = sum+"元";
	document.getElementById("sumid").innerHTML = str.fontcolor('red');
}

function checkAll(node)
{
	/*
	需求：通过全选checkbox，将其他条目都选中。
	思路：
	只要将全选checkbox的checked状态赋值给其他的item checked状态即可。
	
	
	*/
	//var allNode = document.getElementsByName("all")[index];
	
	var items = document.getElementsByName("item");
	for(var x=0; x<items.length; x++)
	{
		items[x].checked = node.checked;
	}
}
</script>
</head>

<body>


<div>商品列表</div>
<input type="checkbox" name="all" onclick="checkAll(this)"  /> 全选<br />
<input type="checkbox" name="item" value="3000" />笔记本电脑3000元<br />
<input type="checkbox" name="item" value="3000"  />笔记本电脑3000元<br />
<input type="checkbox" name="item" value="3000"  />笔记本电脑3000元<br />
<input type="checkbox" name="item" value="3000"  />笔记本电脑3000元<br />
<input type="checkbox" name="item" value="3000"  />笔记本电脑3000元<br />
<input type="checkbox" name="item" value="3000"  />笔记本电脑3000元<br />
<input type="checkbox" name="all" onclick="checkAll(this)"  /> 全选<br />
<input type="button" value="总金额：" onclick="getSum()" /><span id="sumid"></span>


</body>
</html>

通过节点关系查找节点

从一个节点出发开始查找：
parentNode 获取当前元素的父节点。
childNodes 获取当前元素的所有下一级子元素。
firstChild 获取当前节点的第一个子节点。
lastChild 获取当前节点的最后一个子节点。
nextSibling 获取当前节点的下一个节点。（兄节点）
previousSibling 获取当前节点的上一个节点。（弟节点）

示例1：
	firstChild属性最普遍的用法是访问某个元素的文本：
	var text=x.firstChild.nodeValue; 
	
示例2：	
	parentNode 属性常被用来改变文档的结构。
	假设您希望从文档中删除带有 id 为 "maindiv" 的节点：
	var x=document.getElementById("maindiv");
	x.parentNode.removeChild(x);

获取节点对象的信息

每个节点都包含的信息的，这些属性是：
nodeType 节点类型
nodeName 节点名称
nodeValue 节点值

nodeType
nodeType 属性可返回节点的类型。	
	---------------------------------
	元素类型 节点类型 
	------------------
	  元素		1		就是标签元素，例<div>..</div>
	  文本		3		标签元素中的文本
	  注释		8       表示为注释

nodeName
	nodeName 属性含有某个节点的名称。
	--------------------------------
	元素节点的 nodeName 是标签名称 
	属性节点的 nodeName 是属性名称 
	文本节点的 nodeName 永远是 #text 
	文档节点的 nodeName 永远是 #document 

nodeValue
	对于文本节点，nodeValue 属性是所包含的文本。
	对于属性节点，nodeValue 属性是属性值。
	对于注释节点，nodeValue 属性注释内容。
	nodeValue 属性对于文档节点和元素节点是不可用的。

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
//节点和节点之间的关系.
//获取dom树
var dom = window.document;
//获取指定id 的标签节点.
function test() {
	var form = dom.getElementById("form1");
	//获取父节点.
	//alert(form.parentNode.nodeName);
	// 获取子节点(Node 包含 文本,注释,标签)
	var childArr = form.childNodes;
	//alert(childArr.length);
	/*
	for (var i = 0; i < childArr.length; i++) {
	alert(childArr[i]);
	}
	*/
	// 获取第一个孩子.
	var first = form.firstChild;
	//alert(first);
	//最后一个孩子.
	var last = form.lastChild;
	//alert(last);
	// 获取下兄弟(获取弟弟)
	var sibling = form.nextSibling;
	//alert(sibling.nodeName);
	// 获取大哥
	var previous = form.previousSibling;
	alert(previous.nodeName);
}
test();
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>javascript</title>
</head>
<body onmousemove="test(this)">
		<a>哈哈</a>
		<form id="form1">
			<label>姓名:</label>
			<input type="text" />
		</form>
</body>
</html>

节点操作

document.createElement(“标签名”) 创建新元素节点
elt.setAttribute(“属性名”, “属性值”) 设置属性
elt.appendChild(e) 添加元素到elt中最后的位置
elt.insertBefore(new, child); 添加到elt中，child之前。 // 参数1：要插入的节点参数 2：插入目标元素的位置
elt.removeChild(eChild) 删除指定的子节点

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script>
/*
创建节点：
document.createElement("标签名")		创建新元素节点
elt.setAttribute("属性名", "属性值")	设置属性
添加节点到文档树上:
elt.appendChild(e)						添加元素到elt中最后的位置  把元素添加最后一个子节点的后面。
elt.insertBefore(new, child);			添加到elt中，child之前。
								// 参数1：要插入的节点  参数2：插入目标元素的位置	 
														
*/
/*
function add(){
	//
	var inputNode = document.createElement("input"); // 创建一个节点的对象
	inputNode.setAttribute("type","file"); //给新节点设置type的属性值。
	var body = document.getElementsByTagName("body")[0];
	body.appendChild(inputNode);	//把新节点添加到body体中。
}
*/
var count = 1;
function add(){
	var trNode  = document.createElement("tr");
	var tdNode  = document.createElement("td");
	var inputNode  = document.createElement("input");
	inputNode.setAttribute("type","button");
	inputNode.setAttribute("value",count+"");
	count++;
	tdNode.appendChild(inputNode);
	trNode.appendChild(tdNode);
	//trNode添加 到指定 的位置上。
	var tbodyNode = document.getElementsByTagName("tbody")[0];
	//tableNode.appendChild(trNode);
	var button1 = document.getElementById("b1");
	tbodyNode.insertBefore(trNode,button1); // 注意： 使用obj.insertBefore(o1,o2)这个方法的时候
	//obj必须是o1,o2的直接父节点。
	//alert(button1.nodeName+"~~"+trNode.nodeName+"~~"+tableNode.nodeName);
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
	<table>
    	<tr>
        	<td>
            	<input type="button" value="0">
            </td>
        </tr>
        <tr id="b1">
        	<td>
            	<input type="button" value="添加" onclick="add()">
            </td>
        </tr>
    </table>

JavaScript语法基础使用JS操作网页（DOM）使用JS操作浏览器（BOM）

文章目录

JavaScript

体验JavaScript

语法

引入方式与引入位置

常用函数

变量

JavaScript函数基础

自定义对象

无参构造函数

有参数构造函数

BOM

BOM编程基础

window 对象

window中的方法

事件

a) 事件说明

b) 常用的事件类型：

location 对象

screen 对象

document对象

DOM

DOM简介

节点层次

获取节点对象案例

通过节点关系查找节点

获取节点对象的信息

节点操作

猜你喜欢

JavaScript语法基础 使用JS操作网页（DOM） 使用JS操作浏览器（BOM）

文章目录

JavaScript

体验JavaScript

语法

引入方式与引入位置

常用函数

变量

JavaScript函数基础

自定义对象

无参构造函数

有参数构造函数

BOM

BOM编程基础

window 对象

window中的方法

事件

a) 事件说明

b) 常用的事件类型：

location 对象

screen 对象

document对象

DOM

DOM简介

节点层次

获取节点对象案例

通过节点关系查找节点

获取节点对象的信息

节点操作

猜你喜欢

JavaScript语法基础使用JS操作网页（DOM）使用JS操作浏览器（BOM）