标签：
1.JavaScript
为什么要学习JavaScript
JavaScript是页面具有动态行为的基础
JavaScript是什么
脚本语言：介于HTML和C 、 C++、java语言之间，不能单独使用
弱类型语言 var a =1; //运行的时候确定变量的类型
"面向对象"的语言 c#-> MSIL -> 机器码
解释型语言，浏览器中有解释器程序
与java语言无关
跨平台的语言（跟操作系统无关，因为运行在浏览器上）
动态语言
页面效果
表单动态校验(密码强度检测)
谷歌地图(鼠标单击变大)
偷菜(宠物跑来跑去)
2.JavaScript组成
3.JavaScript的页面引入
页面引入脚本语言
标签直接引入脚本
如： <script type="text/javascript"> 脚本语言 </script>
标签引入脚本文件
如： <script type="text/javascript“ src=“path/xx.js”></script>
注意：1. 脚本文件后缀为.js 。 2. </script>结束标签不能简写
协议引入脚本
如：<a href=“javascript: alert(“”)”>单击我</a>
引入方式比较
推荐使用1和2方式
4.Javascript基本语法
基本语法
注释 // /* */
变量 (变量名必须由字母、数字、_和$组成，不能以数字开头)
运算符
判断语句
选择语句
循环语句
函数
事件机制
消息框
alert
confirm
prompt
异常
异常处理 try { } catch( error ){ }
抛出异常
5.调试
用浏览器调试，开发人员工具。
6.Javascript常见全局函数
decodeURI() 解码某个编码的 URI
encodeURI() 把字符串编码为 URI
decodeURIComponent() 解码一个编码的 URI 组件
encodeURIComponent() 把字符串编码为 URI 组件
escape() 对字符串进行编码 (ECMAScript 3不推荐使用，用上面的函数代替)
unescape() 对由 escape() 编码的字符串进行解码
当一个数值 除以 0 的时候，返回一个 无穷大值（infinite）
isFinite() 检查某个值是否为[有穷大]的数。
isNaN() 检查某个值是否是数字。 Is not a number
parseFloat() 解析一个字符串并返回一个浮点数
parseInt() 解析一个字符串并返回一个整数
prompt 和 parseInt 用法示例：
<!DOCTYPE html>
<html xmlns=>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script type="text/javascript">
//从键盘接收一个值，注意使用prompt得到的值的类型是string字符串，0为默认值
var num1 = prompt("请输入第1个", "0");
var num2 = prompt("请输入第2个", "0");
//需要做类型转换对能计算数值，不然会做为字符串连接
alert(parseInt(num1) + parseInt(num2));
//就是所有的dom元素都加载完毕之后，执行window.onload事件
window.onload = function () {
//如果在window.onload外部写会追加，如果window.onload里面写会清空之前生成的文档流，只显示write里面的内容。
document.write(num1);
}
</script>
</head>
<body>
奇趣地
</body>
</html>
try catch finally 和 isNaN 用法示例：
<!DOCTYPE html>
<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">
window.onload = function () {
document.getElementById("btn").value = "a";
function funTest() {
try {
var num1 = prompt("请输入第一个", "0");
if (isNaN(num1)) {
throw new Error("请输入数字");
}
alert(num1);
}
catch (err) {
alert(err.message);
return 1;
}
finally {
alert("finally");
return 2;
}
}
var num = funTest();
alert(num);
}
</script>
</head>
<body>
<input type="button" id="btn" value="点击" />
</body>
</html>
几点注意：
1.你把方法写好，那么方法编译会会常驻内存
2.还可能将系统已经存在 的方法覆盖掉了。
3.在JS里面没有重载，如果方法名称一样，后面会将前面覆盖。
4.参数不是必须的，你在定义方法的时候可以设置参数，也可以不设置，如果你设置了参数，在调用的时候也可以不传递相应的值。如果没有设置参数，在调用时候也可以传递进去值。和C#的方法调用的语法不一样（参数类型，个数，顺序需要对应）
5.如果是在调用的时候加了(),那么就相当于执行了这个方法，如果只是方法名，那么就相当于绑定了方法的引用，如果需要方法起作用，还必须做触发。
6.如果要使用到body里面创建的元素，那么这些语句就要写在window.onload里面，否则会报错。
window.onload事件会在页面所有内容加载完毕，包括 文字，图片，视频，js脚本。。。。后执行
isFinite 用法示例：
alert(isFinite(1/0)); 结果为：false
escape(),unescape() 用法示例：
<!DOCTYPE html>
<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">
//在ASP里面，有时候我们需要从一页面传递参数到另外一个页面。如果传递的是中文，那么接收的有可能是乱码
var str = "中华人民共和国";
var res = window.escape(str);
alert(res);
alert(unescape(res));
</script>
</head>
<body>
</body>
</html>
7.javascript对象
内置对象(String/Date/Math/Array/Object/Boolean)
String
Date
Math
Array
Boolean
Number
自定义对象(扩展javascript功能) Object Function
HTML BOM对象
window 顶级对象，所有的都可以认为是
window的对象
moveTo() resizeTo() 这两个只支持ie
navigator 地址 screen 屏幕
history 前进，后退 location 链接，url
document 整个文档 frames 框架
所有的页面的元素对象: body image等
typeof获取变量类型均为object
示例代码：
<script type="text/javascript">
//使用new的方式来创建，那么类型就是object
var name = new String("aa");
alert(typeof name); //2013-4-5
var time = new Date();
//getMonth() 得到的值是0~11
alert(time.getFullYear() + "-" + (time.getMonth() + 1));
//Math.random()得到一个0~1之间的数，它包含0，但是不包含1
//得到一个10~100之间的数 Math.random()*90 (0~1)*90 ---0 89 +10
alert(parseInt(Math.random() * 91 + 10));
var num = 100;
alert(typeof num);
</script>
一些BOM对象：
<script type="text/javascript">
window.onload = function () {
alert(window.location.host + "\r\n" + window.location.hostname + "\r\n" + location.port + "\r\n" + location.protocol + "\r\n" + location.href);
alert("language:" + window.navigator.browserLanguage);
}
</script>
注：双标签的文本值一般使用innerHTML,innerText------FF:contextText
时钟setInterval 示例代码：
<!DOCTYPE html>
<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">
var time = 5;
var id = 0;
window.onload = function () {
//时钟每次调用都会返回一个id，它会自动循环调用，当window.onload后就调用，并且循环调用
id = setInterval(daojishi, 1000);
}
function daojishi() {
time--;
document.getElementById("time").innerHTML = time;
if (time == 0)
{
//清除时钟
clearInterval(id);
//转向登陆成功的页面
//location = "11_Success.html";
alert("转向登陆成功的页面");
}
}
</script>
</head>
<body>
登陆成功，还有<span id="time"></span>秒自动跳转到主页面
</body>
</html>
时钟setTimeout 示例代码：
<!DOCTYPE html>
<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">
var time = 5;
var id = 0;
window.onload = function () {
//只调用一次，当window.onload后，再隔1000ms调用指定的方法，相当于调用方法的时间延迟
id = setTimeout(daojishi, 1000);
}
function daojishi() {
time--;
document.getElementById("time").innerHTML = time;
if (time == 0)
{
//清除时钟
clearInterval(id);
//转向登陆成功的页面
//location = "11_Success.html";
alert("转向登陆成功的页面");
}
}
</script>
</head>
<body>
登陆成功，还有<span id="time"></span>秒自动跳转到主页面
</body>
</html>
8.javascript数组
js的数组相当于C#的数组，集合，字典(hashTable)的集合,同时，它是动态的，它的属性可以动态的添加。
但如果值很多，创建的时候不方便
几种定义数组的示例：
var arr = new Array();
arr[0] = 123;
arr[1] = "abc";
for(var i=0;i<arr.length;i++)
{
alert(arr[i]);
}
————————分割线————————
var arr = new Array(1, 2, 3, 45, 5, 35);
for(var i=0;i<arr.length;i++)
{
alert(arr[i]);
}
————————分割线————————
var arr = new Array();
arr[0] = new Array();
arr[0][0] = 20;
arr[0][1] = "aa";
arr[1]="wocacaca"
for (var i = 0; i < arr.length; i++) {
alert(arr[i]);
}
————————分割线————————
var arr = new Array(); arr.name = "aa"; arr.age = 20; alert(arr.name + ":" + arr.age);
————————分割线————————
var arr = new Array();
arr[0] = new Array();
arr[0].name = "aaa";
arr[0].age = 30;
arr[1] = new Array();
arr[1].name = "rrrr";
arr[1].age = 53;
for(var i=0;i<arr.length;i++)
{
alert(arr[i].name + ":" + arr[i].age);
}
————————分割线————————
var str; str.names = "王菲";//报错，因为未定义 str.age=30; alert(str.names); alert(str.age);
————————分割线————————
var arr = { "name": "aa", "age": 20 };//类似键值对
alert(arr.name + arr.age);
var arr = new Array();
arr[0] = { "name": "aa", "age": 20 };
arr[1] = { "name": "bb", "age": 30 };
arr[2] = { "name": "cc", "age": 40 };
for(var i=0;i<arr.length;i++)
{
alert(arr[i].name + ":" + arr[i].age);
}
————————分割线————————
//数组的字面量表示法，这个表示法用[] json
var arr = [
{ "name": "aa", "age": 20 },
{ "name": "bb", "age": 30 },
{ "name": "cc", "age": 40 }
];
for (var i = 0; i < arr.length; i++) {
alert(arr[i].name + ":" + arr[i].age);
}
————————分割线————————
var arr = new Array();//如果是String()是string字符串数组，而Array()是object数组
//传统的面向对象的属性创建方法
arr.name = "王者";
arr.age = 30;
//字面量表示法
var arr1 = { "name": "王者", "age": 30 };//两种写法结果一样，只是形式不一样而已
9.一些BOM对象的使用
//获取用户浏览器信息
alert(window.navigator.appVersion);
//获取用户屏幕的可用分辨率
alert(screen.availHeight + "×" + screen.availWidth);//屏幕可用像素数
alert(screen.height + "×" + screen.width);//屏幕实际像素数
//用法
if (window.screen.width > 1024)
{
alert("电脑还不错");
}
//将当前浏览器移动到屏幕指定的位置
window.moveTo(100, 100);
//将当前浏览器改变成指定的大小
window.resizeTo(200, 200);
//history
//前进
window.history.forward(1);
//location
//跳转
//当使用location来跳转网页的时候，必须添加全路径（带协议）
window.location = http://www.baidu.com;
10.BOM体系结构
11.BOM编程
BOM编程
Browser Object Model
JavaScript是由浏览器中内置的javascript脚本解释器程序来执行javascript脚本语言的，为了便于对浏览器的操作，javascript封装了对浏览器的各个对象使得开发者可以快速的操作浏览器。
常见BOM对象
特点
操作简单。
12.window对象
window对象：
是 JavaScript 层级中的顶层对象。
代表一个浏览器窗口或一个框架。
对象会在 <body> 或 <frameset> 每次出现时被自动创建。(body和frameset不能同时存在)
属性：
frames 获取当前窗口包含框架页(数组)
closed 返回当前窗口是否被关闭
defaultStatus 当前窗口状态栏
innerheight innerwidth 窗口的文档显示区的高度和宽度
self 、top 、 parent 当前窗口、顶层窗口、父窗口
方法：
close()
open()
setTimeout()和clearTimeout()
setInterval()和clearInterval()
练习：
取消关闭窗口时的确认对话框？
打开窗口页面的时候全屏打开？
13.document对象
document对象：
该对象代表整个文档页面 window代表浏览器
属性：
title
bgColor
fgColor
linkColor
charset
方法：
document.write() // 动态向页面写入内容
document.createElement(Tag) // 创建一个html标签对象
document.getElementById(ID) // 获得指定ID值的对象
document.getElementsByName(Name) // 获得指定Name值的对象集合（数组）
document.getElementsByTagName(标签名称) //获取指定的标签元素集合
document.body.appendChild(oTag) // 添加子节点
对象事件：
document.body.onclick=func // 鼠标指针单击对象是触发
document.body.onmouseover=func // 鼠标指针移到对象时触发
document.body.onmouseout=func // 鼠标指针移出对象时触发
14.document对象
document对象：
该对象代表整个文档页面
对象的集合：
all 获取页面所有元素对象
forms 获取页面所有表单对象
images 获取页面所有图片对象
links 获取所有超链接
Anchors 锚记链接
Attribute 是属性
15.navigator对象
navigator对象：
代表浏览器对象
封装了浏览器的信息
属性：
appCodeName:返回浏览器的代码名
appMinorVersion:返回浏览器的次级版本
appName:返回浏览器的名称
appVersion:返回浏览器的平台和版本信息
browserLanguage:返回当前浏览器的语言
方法：
javaEnabled()
16.screen对象
screen对象：
包含客户端显示屏的信息。
属性：
availHeight 和 availWidth
Height 和 width
17.history对象
history对象：
代表浏览器历史记录对象
封装了浏览器浏览过的网页信息
获取：
使用window对象获取该对象
属性：
length
方法：
back()
forward()
go()
练习：
实现页面上中的返回效果？
模拟浏览器中的前进和后退？
18.location对象
location对象：
代表浏览器地址栏对象
封装了地址栏中的地址信息
获取：
使用window对象获取该对象
属性：
host
hostname
port
protocol
href
练习：
实现页面的跳转？
该页面的实现需要使用服务器？
http://localhost:8080/test/demo.html?keywords=javascript
示例代码：
alert(window.location); alert(window.location.host); alert(window.location.hostname); alert(window.location.port); alert(window.location.protocol); window.location.href = “http://www.baidu.com”;
19.window.open
<script type="text/javascript">
var wi = window.screen.width;
var hei = window.screen.height;
alert(wi+":"+hei);
window.open("04_functionTest.html","_blank","width="+wi+"px height="+hei+"px");
</script>
20.HTML DOM
(1)获取节点
HTML DOM 定义了访问和操作HTML文档的标准方法。
document
代表当前页面的整个文档树
访问属性
all
forms
Images
body
访问方法(最常用的DOM方法)
getElementById() 返回对拥有指定 id 的第一个对象的引用。
getElementsByName() 返回带有指定名称的对象集合。
getElementsByTagName() 返回带有指定标签名的对象集合。
getAttribute() 返回属性值
getAttributeNode() 返回指定属性名的节点对象
(2)添加或删除节点
给文档树添加节点
获取目标节点 var by = document.forms[0]
创建新节点 var ip = document.createElement("input");
//document.createTextNode() ;
设置新节点 ip.setAttribute("type","file");
建立节点关系 by.appendChild(ip);
给文档树删除节点
获取要删除的节点
获取要删除节点的父节点
解除关系
var len = 0;
function deleteele(){
var fs = document.getElementsByName("file1");
var form = document.forms[0];
var bs = document.getElementsByTagName("br");
len = fs.length-1;
if(len > 0){
form.removeChild(bs[len]);
form.removeChild(fs[len]);
}
｝
(3)节点关系
parentNode(返回当前节点的父节点)
childNodes (返回指定节点的所有子节点)
nodeType (返回节点的类型，一般是整数)
元素element 1
属性attr 2
文本text 3
注释comments 8
文档document 9
nodeName (返回节点的名称，如：INPUT、#text)
元素节点的 nodeName 是标签名称
属性节点的 nodeName 是属性名称
文本节点的 nodeName 永远是 #text
文档节点的 nodeName 永远是 #document
nodeValue (返回文本节点的值)
对于文本节点，nodeValue 属性包含文本。
对于属性节点，nodeValue 属性包含属性值。
nodeValue 属性对于文档节点和元素节点是不可用的。
firstChild 和 lastChild
获取当前节点的第一个或最后一个节点
parentNode
获取当前元素的父节点
nextSibling
获取当前节点的下一个节点
previousSibling
获取当前节点的上一个节点
注意：
IE将跳过在节点之间产生的空格文档节点（如：换行字符），而Mozilla不会这样——FF会把诸如空格换行之类的排版元素视作节点读取，因此，在ie 中用nextSibling便可读取到的下一个节点元素，在FF中就需要这样写：nextSibling.nextSibling了。
21.练习示例：
<!DOCTYPE html>
<html xmlns="
http://www.w3.org/1999/xhtml
">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
table{
border-collapse:collapse;
margin:0 auto;
}
.import {
display: block;
margin: 10px auto;
}
</style>
<script type="text/javascript">
//js是为以后学习jquery和asp服务的，所以数据如果可以动态生成就采用动态生成的方式
var arr = [
{ "title": "一个C#问题", "name": "张三", "date": "2013-03-03" },
{ "title": "一个C#问题2", "name": "张三2", "date": "2013-03-04" },
{ "title": "一个C#问题3", "name": "张三3", "date": "2013-03-05" },
{ "title": "一个C#问题4", "name": "张三4", "date": "2013-03-06" },
];
window.onload = function () {
loadData();
}
function loadData() {
//循环数组，将数组的值取出来生成相应的td内容
//先创建行，再为行创建列
//任何双标签元素都可以有onclick事件
var tb = document.getElementById("tbList");
for (var i = 0; i < arr.length; i++) {
var trNew = document.createElement("tr");
var td0 = document.createElement("input");
td0.setAttribute("type", "checkbox");
var td1 = document.createElement("td");
td1.innerHTML = arr[i].title;
var td2 = document.createElement("td");
td2.innerHTML = arr[i].name;
var td3 = document.createElement("td");
td3.innerHTML = arr[i].date;
trNew.appendChild(td0);
trNew.appendChild(td1);
trNew.appendChild(td2);
trNew.appendChild(td3);
tb.appendChild(trNew);
}
}
</script>
</head>
<body>
<table id="tbList" border="1">
<tr>
<th>序号</th>
<th>标题</th>
<th>发件人</th>
<th>发件时间</th>
</tr>
</table>
<input type="button" class="import" onclick="loadData();" value="导入数据" />
</body>
</html>
<!DOCTYPE html>
<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">
window.onload = function () {
//如果要点击每个li标签，删除对应的li标签，那么必须为每个li标签添加事件
var ullist = document.getElementById("ulList");
var lis = ullist.childNodes;//获取ul所有的子元素li
for (var i = 0; i < lis.length; i++) {
lis[i].onclick = function () {
//当前点击那个，那个就是this
//alert(this.innerHTML);
//this.parentNode.removeChild(this);
ullist.removeChild(this);
}
}
}
</script>
</head>
<body>
<input type="button" value="删除" id="btnAdd" aa="这是自定义的属性" />
<ul id="ulList">
<li>北京</li>
<li>上海</li>
<li>广州</li>
<li>深圳</li>
</ul>
</body>
</html>
标签：
原文地址：http://www.cnblogs.com/wangzhezhifenfeng/p/4298420.html
