JavaScript
2016-07-12 13:30
405 查看
JavaScript 概述
JavaScript是基于对象和事件驱动的脚本语言，主要应用在客户端。
特点：
1. 交互性（它可以做的就是信息的动态交互）
2. 安全性（不允许直接访问本地硬盘）
3. 跨平台性（只要是可以解释Js的浏览器都可以执行，和平台无关）
JavaScript与Java不同
1. JS是Netscape公司的产品，前身是LiveScript;Java是Sun公司的产品，现在是Oracle公司的产品。
2. JS是基于对象，Java是面向对象。
3. JS只需解释就可以执行，Java需要先编译成字节码文件，再执行。
4. JS是弱类型，Java是强类型。
JavaScript语法
每一种语言都有自己的语法规则，JS语法与Java很像，所以学习起来比较容易。JS中也一样有变量，语句，函数，数组等常见语言组成元素。
1. 变量
通过关键字var来定义，弱类型既是不用指定具体的数据类型。
例：var x = 3; x = “hello”;
注：JS中特殊的常量值：undefined，当变量没有初始化就被使用，该变量的值就是undefined（未定义）。
注意：Javascript的语句在结尾处是可以不用分号结束的，非严谨语言的特点。
但为了符合编程规范，需要象java一样定义结束符。
而且有些情况是必须写分号的，如：var x = 3 ; var y =5如果两条语句写在同一行，就需要分号隔开。
1）关键字：几乎跟Java一样
2）标识符,分隔符：和Java一样
3）注释：用了Java当中的这两种： // 和 /* */
4）数据类型：number类型、string类型、boolean类型、undefined(当变量声明但没有赋值)
5）变量：var (弱类型,类似于Java当中的Object)
6）在js当中，单引号和双引号是一样的，封装的都是字符串（但同时有两个引号封装的，内部的要用单引号）
7）全局变量和局部变量
全局变量----只要不是函数内部声明的，都是。并且不会以大括号来区分，也不会以<script>来区分
a、只要不在函数内部声明，那么一个变量即使在导入的.js文件中声明，在页面脚本中同样是有效的。
b、Java当中的变量的作用域是以大括号来区分，而JS不是。
局部变量----函数内部声明的和形参
函数内部的形参也是局部的，里面更改的值只能在内部有效，函数返回之后就无效了
例：
2. 运算符
Javascript中的运算符和Java大致相同。
只是运算过程中需要注意几点：
1， var x = 3120/1000*1000; x = 3120;而不是3000。
2， var x = 2.4+3.6 ; x = 6;而不是6.0
3， var x = “12” + 1; x = “121”; x = “12” – 1 ; x = 11;
加号对于字符串是连接符
4， && || 是逻辑运算符 & |是位运算符。
5， 也支持三元运算符
6， 特殊运算符 typeof : 返回一个操作表达式的数据类型的字符串。
var x = 3;
var y = “123”;
var z = false;
typeof(x); //number
typeof(y); //string
typeof(z); //boolean
例：
3. 语句(与Java语句格式相同)
1. 判断结构(if语句)
注：var x = 3;
if(x==4)//可以进行比较运算。
if(x=4)//可以进行赋值运算，而且可以同样进行判断。不报错。
因为在Js中0或者null就是false，
非0或者非null就是true（通常用1表示）。
所以if(x=4)结果是true；
可以通过if(4==y)来解决该问题。因为4=y不会进行判断，而是会报错。
2. 选择结构(switch语句)
与java不同的是：因为弱类型，也可以对字符串进行选择。
3. 循环结构(while语句，do…while语句，for语句)。
注：不同的是，没有了具体数据类型的限制，使用时要注意。
例：
九九乘法表例子：
想要将其他代码融入到Html中，都是以标签的形式。
1、 JS代码存放在标签对<script> js code．．．</script>中。
2、当有多个html页面使用到相同的JS脚本时，可以将js代码封装到一个文件中，只要在script标签的src属性引入一个js文件。（方便后期维护，扩展）
注意：如果在script标签中定义了src属性，那么标签中的内容不会被执行。
例：<script src=”test.js” type=”text/javascript”></script>
注：规范中script标签早期有一个属性language,而现在使用type属性。
1、Js中的数组的长度是可以自动增长的
2、Js中的数组的功能相当于Java中的数组和集合的综合
3、var arr=[3,2,-4,78,10];//正确，注意，Java赋初值用的是大括号，而Js用的是中括号
var arr[]=[3,2,-4,78,10];//错误的，不能声明成arr[]----声明时不能带中括号
4、遍历数组
5、Js中的数组当中可以存储不同数据类型的数据
注：语法上是可以的，因为它有集合的特性，各种类型的数据都可以赋给它。虽然这样，但我们做项目时，一个数组最好放同一种类型的数据。
6、Js中数组的另一种定义方式：使用js当中的Array对象
注：用Array对象定义数组时，参数为1时，是指数组的长度；若大于1时，直接就是数组中的元素初值
var arr2 = new Array(5); //定义长度为5的数组----参数为1时，是长度
var arr3 = new Array(5, 6, 7); //参数大于1时，就是元素的初值
7、Js中Array对象中的方法
1）concat 方法：返回一个新数组，这个新数组是由两个或更多数组组合而成的。
2）join 方法：返回字符串值，其中包含了连接到一起的数组的所有元素，元素由指定的分隔符分隔开来。
3）reverse 方法:返回一个元素顺序被反转的 Array 对象。
4）shift 方法: 移除数组中的第一个元素并返回该元素。-----removeFirst()
5）slice 方法 (Array): 返回一个数组的一段。-----类似String中的substring()
6）sort 方法: 返回一个元素已经进行了排序的 Array 对象。
7）splice 方法: 替换。从一个数组中移除一个或多个元素，如果必要，在所移除元素的位置上插入新元素，返回所移除的元素。
8）unshift 方法：将指定的元素插入数组开始位置。返回值为新数组的长度----addFirst()
例：
其中用到的工具
arraytools.js
函数
1、一般函数
格式：
function 函数名(形式参数...)
{
执行语句；
return 返回值；
}
函数是多条执行语句的封装体，只有被调用才会被运行。
注意：调用有参数的函数，但没有给其传值，函数一样可以运行，或者调用没有参数的函数，给其传值，该函数也一样运行。
说的简单点：只要写了函数名后面跟了一对小括号，该函数就会运行。那么传递的参数呢？
其实，在函数中有一个参数数组对象（arguments），该对象将传递的参数都封装在一
个数组中。
例：
那么弹出的对话框结果是3，如果想得到所有的参数值，可以通过for循环遍历该数组。
为了增强阅读性，最好按照规范，按定义好的形式参数传递实际参数。
函数在调用时的其他写法：
1、js中函数没有重载，只以函数名来识别，函数名就是function对象的引用名
2、函数的参数全是js内部用一个arguments的数组来接收与存放的------该对象是js内部隐含帮我们做的，而且我们可以访问，也可以更改值
2、动态函数
通过Js的内置对象Function实现。
例：
不同的是，动态函数，参数以及函数体都可以通过参数进行传递，可以动态指定。
3、 匿名函数
格式：function(){...}
例：
通常在定义事件属性的行为时较为常用。
例：
可以写成匿名函数的形式：
匿名函数就是一种简写格式。
函数定义与调用例子：
plain copy
print?
var dd2 = new Date();
with(dd2){//在with语句块中，可以省去对象名“dd2”的引用
var year = getFullYear(); //dd2.getFullYear()
var month= getMonth(); //从0开始的月份数
var day = getDate();//返回月份中的第几天
println(year+"年"+month+"月"+day+"日 ");
}
2）var str2 = "abcd1234";
fontcolor("red")：设置颜色
link("http://www.hncu.net")：设置为超链接
substring(1, 5)：取子串[1,5)，Java一样，左包含，右不包含
substr(1,5)：取子串：从1位置开始，取5个字符
plain copy
print?
var date = new Date();
println(date); //GMT格式输出
println(date.toLocaleString());//转成本地系统的日期时间格式输出。
println(date.toLocaleDateString()); //只有日期，没有时间
[javascript] view
plain copy
print?
//var year = date.getYear();//过时了，尽量不用 。它是返回从1900到当前日期所经过的年份
var year = date.getFullYear();
println(year);
var month= date.getMonth(); //从0开始的月份数
println(month);
var day1 = date.getDay(); //返回星期中的第几天,0为星期天
println(day1);
var day2 = date.getDate();//返回月份中的第几天
println(day2);
plain copy
print?
function getWeekDay( num ){
var weeks = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
return weeks[num];
}
var weekDay = getWeekDay( date.getDay() );
println(weekDay);
plain copy
print?
var date2 = new Date();
var time = date2.getTime();//日期对象-->毫秒值
println("time:"+time);
var date3 = new Date(time);
println(date3.toLocaleDateString());
plain copy
print?
//日期对象-->字符串：toLocaleString() 和 toLocaleDateString()
//字符串-->日期
//var strDate="9/27/15";//细节：如果年份只给两位有效数字，那是代表19**年。如果是2000年以后的年份，要给4位
var strDate="9/27/2015 ";//细节：如果年份只给两位有效数字，那是代表19**年。如果是2000年以后的年份，要给4位
var time = Date.parse(strDate);//返回的是毫秒数
var d = new Date(time);
println(d.toLocaleString());
plain copy
print?
<script type="text/javascript">
Date.prototype.parse2 =function(str){
throw new Exception();
};
try{
var strDate2="9/27/2ewewwe15 ";//细节：如果年份只给两位有效数字，那是代表19**年。如果是2000年以后的年份，要给4位
var time2 = Date.parse2(strDate2);//返回的是毫秒数
}catch(e){
alert("日期解析错误....我给的提示....");
}
</script>
Math.floor(12.34);//向下进位
Math.round(12.54);//四舍五入
Math.pow(5,6);//5的6次方
[javascript] view
plain copy
print?
//var num = parseInt("110",10); //110
//var num = parseInt("110",2); //6
var num = parseInt("0x3c",16); //60
2）10进制转换成--->非10进制
[javascript] view
plain copy
print?
var num2 = new Number(6);
println( "num2="+ num2.toString(2) );
var num3 = 60;
println( "num3="+ num3.toString(16) );
for(变量 in 对象){
...//对对象中的元素进行遍历操作
}
2）例：
plain copy
print?
<script type="text/javascript">
function Person(){
//alert("Person...");
println("Person...");
}
var p = new Person();
//要为Person对象p添加变量，直接使用：p.对象名=...
p.name = "Jack";
p.age = 24;
//alert(p.name+"---"+p.age);
//要为Person对象p添加方法，直接使用：p.方法名=...
p.show = function(){
println(p.name+"---"+p.age);
};
p.show();//调方法
var obj = new Object();
obj.name = "God";
obj.age =10000;
obj.show = function(){
println(obj.name+"::::"+obj.age);
};
obj.show();
</script>
plain copy
print?
<script type="text/javascript">
//方式2:更接近于Java当中的面向对象的方式----类的封装
function Person(name,age){
this.name = name; //这里的this.表示给当前对象添加一个变量
this.age = age;
this.setName= function(name){
this.name = name;
};
this.getName= function(){
return this.name;
};
this.show= function(){
return "name:"+this.name+",age:"+this.age;
};
}
var p = new Person("Tom",22);
println(p.name+"==="+p.age);
p.setName("Rose");
println(p.show());
for(x in p){ //x为自定义对象当中的变量名
println(x+":"+p[x]); //p[x]为自定义对象当中的变量值(如果是函数，为它的字节码)
}
</script>
3、方式3: map方式, key:value ----类似于java当中的数据封装，把数据封装到Map集合当中
plain copy
print?
<script type="text/javascript">
//属性值是数组
var myMap = {
names:["Jack1","Jack2","Jack4"],
ages:[25,22,18]
};
//取出Jack2的姓名和年龄
println("name:"+ myMap.names[1]);
println("age:"+ myMap.ages[1]);
var myMap2 = {
names:[{name:"Jack1"},{name:"Jack2"},{name:"Jack4"}]
};
//取出Jack1
println("name:"+ myMap2.names[0].name);//或者println(
myMap2.names[0]["name"]);
</script>
plain copy
print?
<script type="text/javascript">
function trim(str){
var start, end;
start=0;
end=str.length-1;
while(start<=end && str.charAt(start)==' '){
start++;
}
while(start<=end && str.charAt(end)==' '){
end--;
}
return str.substring(start,end+1);
}
//测试
var s=" dsk dsds ";
//alert("#"+s+"#");
//alert("#"+ trim(s) + "#" );
</script>
plain copy
print?
String.prototype.aa = 200;
println("abc123".aa);
plain copy
print?
String.prototype.trim = trim;
println("<hr>");
println("aa3".trim(" abc123 "));
（这里的trim就是上面（1）里面自定义属性中的trim）
注：这里通过“aa3”.trim(" abc123 ")处理的是别的字符串并不是自己
plain copy
print?
<script type="text/javascript">
String.prototype.trim = function(){
var start, end;
start=0;
end=this.length-1;
while(start<=end && this.charAt(start)==' '){
start++;
}
while(start<=end && this.charAt(end)==' '){
end--;
}
return this.substring(start,end+1);
};
println(" aa3 ".trim() );
var str2 =" 76jh dssdds ";
println( str2.trim() );
</script>
注：这里是对自己进行处理
2）给String对象添加一个reverse方法：将字符串反转
3）JS当中，函数内部是可以写函数的,而Java是做不到的。但Java有内部类
[javascript] view
plain copy
print?
<script type="text/javascript">
String.prototype.toCharArray= function(){
var chs=[];
for(var x=0; x<this.length; x++){
chs[x] = this.charAt(x);
}
return chs;
};
//给String对象添加一个reverse方法：将字符串反转
String.prototype.reverse=function(){
//JS当中，函数内部是可以写函数的,而Java是做不到的。但Java有内部类
//辅助函数，用于交换数组中的两个元素
function swap(arr,x,y){
var temp = arr[x];
arr[x] = arr[y];
arr[y] = temp;
}
var arr = this.toCharArray();
for(var x=0,y=arr.length-1; x<y; x++,y--){
swap(arr,x,y);
}
return arr.join("-");
};
/*
//辅助函数，用于交换数组中的两个元素
function swap(arr,x,y){
var temp = arr[x];
arr[x] = arr[y];
arr[y] = temp;
}
*/
//测试
var str = "dsjk2323jkjkewio";
println( str.reverse() );
//测试：在外部能否调用函数reverse内部的swap函数
//测试结果：不行的。其实它和局部变量是一个道理。
//因此，以后在写某个函数内部的辅助功能函数时，最好写在内部
/*
var arr =[23,45,7,9];
swap(arr,1,2);
println("kkk");
println(arr);
*/
</script>
BOM------浏览器对象模型
主要讲window对象：代表浏览器中一个打开的窗口
[html] view
plain copy
print?
<!DOCTYPE html>
<html>
<head>
<title>bom_window_event.html</title>
</head>
<body>
<script type="text/javascript">
//事件注册
onload=function(){
//alert("onload...");
window.open("ad.html","_blank","height=300,width=300,status=no,toolbar=no,menubar=no,location=no");
}
/*
onunload=function(){
alert("onunload...");
}
onbeforeunload=function(){
alert("onbeforeunload...");
}
*/
</script>
</body>
</html>
plain copy
print?
<!DOCTYPE html>
<html>
<head>
<title>bom_window_method.html</title>
</head>
<body>
<script type="text/javascript" src="print.js">
</script>
<script type="text/javascript">
//window中的方法
function f1(){
var b = confirm("你确定要执行吗？");
alert("b="+b);
}
var id1,id2;
function f2(){
// id1 = setTimeout("alert('time out...')" , 3000);//经过指定毫秒值后计算一个表达式----定时器
id2 = setInterval("alert('time out...')" , 3000);//每经过指定毫秒值后计算一个表达式----定时器
}
function f3(){
//clearTimeout(id1);
clearInterval(id2);//清除定时器
}
function f4(){
//moveBy(10,10);//浏览器窗口----相对移动，向右下角移动(水平与垂直方向分别移动10像素)
//moveTo(40,40);
//窗口抖动
for(var x=0;x<10;x++){
moveBy(20,0);
moveBy(0,20);
moveBy(-20,0);
moveBy(0,-20);
}
}
</script>
<input type="button" value="演示window中的方法1--确认提示窗口" onclick="f1()" /><br/>
<input type="button" value="演示window中的方法2--定时器1" onclick="f2()" /><br/>
<input type="button" value="演示window中的方法2--定时器2" onclick="f3()" /><br/>
<input type="button" value="演示window中的方法3--move" onclick="f4()" /><br/>
</body>
</html>
plain copy
print?
function windowNavigatorShow(){
var name = window.navigator.appName;
//var version = window.navigator.appVersion;
var version = navigator.appVersion;//window对象是默认的，可以省略不写
println("name:"+name+",version:"+version);
}
2、window中的location对象----浏览器地址栏
[html] view
plain copy
print?
<input type="button" value="演示window中的对象3--history,后退" onclick="history.back()" />
DOM -----Document Object Model
文档对象模型（DOM）是一个能够让程序和脚本动态访问和更新文档内容、结构和样式的语言平台， 提供了标准的 HTML 和 XML 对象集， 并有一个标准的接口来访问并操
作它们。 ”它使得程序员可以很快捷地访问 HTML 或 XML 页面上的标准组件，如元素、样式表、脚本等等并作相应的处理。DOM 标准推出之前，创建前端 Web 应用程序都必须使用
Java Applet 或 ActiveX 等复杂的组件， 现在基于 DOM 规范， 在支持 DOM 的浏览器环境中，Web开发人员可以很快捷、 安全地创建多样化、
功能强大的Web应用程序。 这里只讨论
HTML DOM。
2）与数据类型相关的核心对象（String、Array、Math、Date 等数据类型）
3）浏览器对象（window、location、history、navigator 等）
4）文档对象（document、images、form 等）
提供了访问浏览器各个功能部件，如浏览器窗口本身、浏览历史等的操作方法。（见前一篇）
2）文档对象模型 （DOM）
提供了访问浏览器窗口内容，如文档、图片等各种 HTML 元素以及这些元素包含的文本的操作方法。
在早期的浏览器版本中，浏览器对象模型和文档对象模型之间没有很大的区别。
文档：标记型文档----标签、文本、属性等
对象： 封装了属性和方法，可以调用里面的属性和方法。
模型：所有标记型文档都具备一些共性特征的体现。
标签、属性和文本内容称为节点(node)，节点也称为对象，标签通常也称为页面中的元素(element)
1）DOM技术的核心内容：
把标记文档变成对象树，通过对树中的对象进行操作，实现对文档内容的操纵。
2）DOM解析的方式：
将标记文档解析成一棵DOM对象树，并将树中的内容都封装成对象。----这些动作由浏览器帮我们完成
3）DOM解析的好处：
可以对树中的节点进行任意的操作：增删改查
4）DOM解析的弊端：
这种解析需要将整个标记型文档加载进内存，因此，如果标记型文档很，耗内存。
节点的类型： 标签节点的类型值为1，属性节点的类型值为2，文本节点的类型值为3
节点值：标签型节点是null,没有值的。只有属性和文本节点才可以有值。
plain copy
print?
function getNodeDemo1(){
//获取id为divid1的节点
//var divNode= document.getElementById("divid1");
var divNode= document.getElementById("divid2");
//alert(divNode.nodeName+","+divNode.nodeType+","+divNode.nodeValue);
//获取div节点中的文本 innerHTML innerText 属性
var txtHTML = divNode.innerHTML;
var txt = divNode.innerText;
alert(txtHTML+","+txt);
//更改div节点中的文本内容
//divNode.innerHTML="我把它改成湖南城市学院了....";
divNode.innerHTML="我把它改成湖南城市学院了....".fontcolor("red");
}
plain copy
print?
function getNodeDemo2(){
var node = document.getElementsByName("userName");
//alert(node.nodeName);//undefined
//alert(node);//因为是数组，所以是集合
//alert(node[0].nodeName);//INPUT
//alert(node.length);//1
//alert(node[0].nodeType);//1
alert(node[0].nodeValue);//标签型节点的value都是null
//alert(node[0].getAttribute("value"));
}
[javascript] view
plain copy
print?
function getNodeDemo3(){
var nodes = document.getElementsByTagName("a");
//alert(nodes.length);//5
//alert(nodes[0].innerHTML);//获取<a>标签容器封装的内容：城市首页
//给页面当中的所有<a>标签添加 target属性 //给对象添加属性并赋值时，若属性不存在则是添加，若存在则是修改
for(var x=0; x<nodes.length; x++){
//alert(nodes[x].innerHTML);
nodes[x].target = "_blank";
}
}
2）获取<div>标签下的所有<a>节点
[javascript] view
plain copy
print?
function getNodeDemo4(){
var divNode = document.getElementById("mylink");
var nodes = divNode.getElementsByTagName("a");//只获取divNode元素下面的所有子节点
for(var x=0; x<nodes.length; x++){
nodes[x].target = "_blank";
}
}
子节点：childNodes集合, firstChild() , lastChild()
上一个兄弟节点：previousSibling属性
下一个兄弟节点：nextSibling属性
plain copy
print?
var tabNode = document.getElementById("tableid1");
var node = tabNode.parentNode;
[javascript] view
plain copy
print?
var nodes = tabNode.childNodes;
注意：1）如果<table>后面有回车符，高版本的IE和火狐会识别成 “空白文本”#text，而低版本IE会直接越过-----不光是<table>节点，其它节点也一样
2）表格的,<table>标签和<tr>标签中间，其实还隐藏着一个<tbody>标签----表格体
plain copy
print?
var node = tabNode.previousSibling.previousSibling;//上一个兄弟
alert(node.nodeName);//div
var node = tabNode.nextSibling.nextSibling;//上一个兄弟
alert(node.nodeName);//dl
plain copy
print?
function createAndAdd1(){
//1利用createTextNode()创建一个文本对象
var oTextNode = document.createTextNode("新的文本！");
//2获取div对象
var divNode = document.getElementById("div1");
//3把oTextNode添加成div对象的孩子
divNode.appendChild(oTextNode);
}
plain copy
print?
function createAndAdd2(){
//1利用createElement()创建一个标签对象
var oBtnNode = document.createElement("input");
oBtnNode.type="button";
oBtnNode.value="新建的按钮";
//2获取div对象
var divNode = document.getElementById("div1");
//3把oTextNode添加成div对象的孩子
divNode.appendChild(oBtnNode);
}
3、直接利用容器标签中的一个属性：innerHTML-----本质上改该标签容器中的“html代码”，不是我们认为的对象树的操作
plain copy
print?
function deleteNode(){
var oDivNode = document.getElementById("div2");
//自杀式----不建议
//oDivNode.removeNode();//默认false,不删除子节点集合
//oDivNode.removeNode(true);//true,删除子节点集合
//通过父节点去删除它的孩子
oDivNode.parentNode.removeChild(oDivNode); //建议使用父节点这种方法
}
plain copy
print?
function updateNode(){
var oDivNode = document.getElementById("div2");
var oDivNode4 = document.getElementById("div4");
//自杀式----不建议
//oDivNode.replaceNode(oDivNode4);
//通过父节点去替换它的孩子：用oDivNode4去替换oDivNode
oDivNode.parentNode.replaceChild(oDivNode4,oDivNode);
}
plain copy
print?
function updateNode2(){
var oDivNode = document.getElementById("div2");
var oDivNode4 = document.getElementById("div4");
var oDivNode4_2 = oDivNode4.cloneNode(true);//克隆一个对象,默认参数为false。参数为true时，连子节点一起克隆
//通过父节点去替换它的孩子：用oDivNode4_2去替换oDivNode
oDivNode.parentNode.replaceChild(oDivNode4_2,oDivNode);
}
JavaScript是基于对象和事件驱动的脚本语言，主要应用在客户端。
特点：
1. 交互性（它可以做的就是信息的动态交互）
2. 安全性（不允许直接访问本地硬盘）
3. 跨平台性（只要是可以解释Js的浏览器都可以执行，和平台无关）
JavaScript与Java不同
1. JS是Netscape公司的产品，前身是LiveScript;Java是Sun公司的产品，现在是Oracle公司的产品。
2. JS是基于对象，Java是面向对象。
3. JS只需解释就可以执行，Java需要先编译成字节码文件，再执行。
4. JS是弱类型，Java是强类型。
JavaScript语法
每一种语言都有自己的语法规则，JS语法与Java很像，所以学习起来比较容易。JS中也一样有变量，语句，函数，数组等常见语言组成元素。
1. 变量
通过关键字var来定义，弱类型既是不用指定具体的数据类型。
例：var x = 3; x = “hello”;
注：JS中特殊的常量值：undefined，当变量没有初始化就被使用，该变量的值就是undefined（未定义）。
注意：Javascript的语句在结尾处是可以不用分号结束的，非严谨语言的特点。
但为了符合编程规范，需要象java一样定义结束符。
而且有些情况是必须写分号的，如：var x = 3 ; var y =5如果两条语句写在同一行，就需要分号隔开。
1）关键字：几乎跟Java一样
2）标识符,分隔符：和Java一样
3）注释：用了Java当中的这两种： // 和 /* */
4）数据类型：number类型、string类型、boolean类型、undefined(当变量声明但没有赋值)
5）变量：var (弱类型,类似于Java当中的Object)
6）在js当中，单引号和双引号是一样的，封装的都是字符串（但同时有两个引号封装的，内部的要用单引号）
7）全局变量和局部变量
全局变量----只要不是函数内部声明的，都是。并且不会以大括号来区分，也不会以<script>来区分
a、只要不在函数内部声明，那么一个变量即使在导入的.js文件中声明，在页面脚本中同样是有效的。
b、Java当中的变量的作用域是以大括号来区分，而JS不是。
局部变量----函数内部声明的和形参
函数内部的形参也是局部的，里面更改的值只能在内部有效，函数返回之后就无效了
例：
<html>
<head>
<title>javascript语言学习</title>
</head>
<body>
<script type="text/javascript">
//1 标识符,关键字,分隔符---几乎和Java一样
//2 注释：只支持 //单行 和 /*多行*/
//3 变量：弱类型 ， 所有的变量都是用var来声明---本质上就是Java当中的Object类型
var x=3;
var y="abc";
//alert(x+","+y);
x="xyz";
//alert(x);
x=true;//js当中的布尔类型和C一样，有0 和 非0 的概念
x+=1;
//alert(x);
a=3.14;//因为浏览器有兼容性，所以一个变量不声明类型也可以直接对期赋值(但不要去读),因为是弱类型，都是var，写不写一样
//alert(a);
//alert(aa);//由于变量aa没有声明也没有赋值，所以这里是出错的，没有输出
a='aa';
//alert(a);//js当中，单引号和双引号是一样的，对应的变量都是字符串---js当中没有字符类型--包含在字符串当中
//a=33223232323232332322323232323456;
//alert(a);
//alert(typeof(a));//number
//由于浏览器有兼容性，一条语句的末尾不加分号，也可以正常执行，但这样写不规范，建议还是加上。
//另外，同一行当中的多条语句之间的分号不能省，否则不能正常执行
var m=1;
var n=2;
//alert(m+n);
</script>
<script type="text/javascript">
//4 基本数据类型
//alert( typeof("aaaa") );//string
//alert( typeof('0') );//string
//alert( typeof(false) );//boolean
//alert( typeof(100) );//number
//alert( typeof(1.23) );//number
//alert( typeof('0')=="string" );//true
//alert (typeof(x)=='number');//true --使用单引号和双引号，效果是一样的
//alert( typeof('0')=="String" );//false----※※※大小写敏感※※※
//alert( typeof(x) ); //前面片段中定义的变量，在这里仍然是有效的
//alert( typeof(X) ); //undefined--代表该变量没有定义--因为前面只定义了小写的x
</script>
</body>
</html>2. 运算符
Javascript中的运算符和Java大致相同。
只是运算过程中需要注意几点：
1， var x = 3120/1000*1000; x = 3120;而不是3000。
2， var x = 2.4+3.6 ; x = 6;而不是6.0
3， var x = “12” + 1; x = “121”; x = “12” – 1 ; x = 11;
加号对于字符串是连接符
4， && || 是逻辑运算符 & |是位运算符。
5， 也支持三元运算符
6， 特殊运算符 typeof : 返回一个操作表达式的数据类型的字符串。
var x = 3;
var y = “123”;
var z = false;
typeof(x); //number
typeof(y); //string
typeof(z); //boolean
例：
<html>
<head>
<title>javascript语言学习</title>
</head>
<body>
<script type="text/javascript">
//5 运算符：算术、赋值、比较、位运算、三元运算
//5.1算术运算
var a=3710;
//alert("a="+a/1000);
//alert("a="+a/1000*1000);
var b=2.3;
var c=5.7;
//alert(b+c);//8
//alert(11+23);//34
//alert("23"+11);//2311---string---加号为字符串连接
//alert("23"-11);//12 ---字符串遇到减号，自动会转换成数值型进行运算
//alert(true);//true 和数值进行运算时，true为1，flase为0
//alert(true+1);//2
//alert(false+1);//1
//alert(100%3);//1
//alert(100%-3);//1
//alert(-100%3);//-1 如果有负数，结果和前面那个数同符号。---和Java是一样的
//5.2 赋值运算: = += -= *= /= %=
var n=3,m;
m=n++;//用法同Java
//alert("m="+m+",n="+n);//m=3,n=4
var n=3,m;//和Java不同的是，变量可以重复声明
m = ++n;//用法同Java
//alert("m="+m+",n="+n);//m=4,n=4
var n;
//alert(n);//4---这里没有对该变量重新赋值，所以用的还是前面的那个，不重新开内存
var i=3;
i +=3;//其它的如：-= *= /= %= ，同理
//alert("i="+i);
//5.3 比较运算符
var j=10;
//alert( j>5 ); //其它如 ：< >= <= == != 等，同理
//alert( j==10 );
//alert( j!=10 );
//5.4 逻辑运算符 && || !
var k=4;
//alert(k>3 && k<10); //true
//alert( !(k>3) ); //false
//alert( !k );//k是“非0”，再非一下则是flase---0
//5.5 位运算符 & | ^ >> << >>>(无符号右移) ---和Java一样
var c = 6; //6: 110
//3: 011
//alert( c&3 );// 010 --2
//alert(c^100^100); //c---6---一个数与两个相同的数进行异或运算结果仍然等于原数
//alert(c>>>1);//3
//5.6 三元运算符---?号表达式 ----和java一样
//alert(3>0?100:300);
var xxyy;
//alert(xxyy); //undefined---如果一个变量声明之后没有赋值，那么就是该值
alert(xxyy==undefined);//true ----这个undefined代表的是和true,false等一样的，是一个值，因此不要用引号
alert(xxyy=="undefined");//false
</script>
</body>
</html>3. 语句(与Java语句格式相同)
1. 判断结构(if语句)
注：var x = 3;
if(x==4)//可以进行比较运算。
if(x=4)//可以进行赋值运算，而且可以同样进行判断。不报错。
因为在Js中0或者null就是false，
非0或者非null就是true（通常用1表示）。
所以if(x=4)结果是true；
可以通过if(4==y)来解决该问题。因为4=y不会进行判断，而是会报错。
2. 选择结构(switch语句)
与java不同的是：因为弱类型，也可以对字符串进行选择。
3. 循环结构(while语句，do…while语句，for语句)。
注：不同的是，没有了具体数据类型的限制，使用时要注意。
例：
<html>
<head>
<title>javascript语言学习</title>
</head>
<body>
<script type="text/javascript">
/*
//if语句
var x=3;
if (x>0){
alert("yes");
} else {
alert("no");
}
if (x-4) {//非0 即是 true,除了0以外的数都是非零的数，即为true
alert("yes2");
} else {
alert("no2");
}
if (x=4) {//一个“=”号是赋值，赋的值是4，该值同时也作为整个表达式的值---非0， 即是 true
alert("yes3");
} else {
alert("no3");//如果把上面的4改为0，则输出: no3
}
//根据上面的结果，建议如果是判断某变量是否等于某值，写成如下方式(把数字放在前面)
if (4==x) {//这种方式能够避免漏写“=”号的bug
alert("yes4");
} else {
alert("no4");
}
var b=(3,4+5);//逗号表达式中的最后一个式子的值作为整个的结果
alert(b);
var c=5;
if(c>1){
alert("a");
}else if(c>2){
alert("b");
}else if(c>3){
alert("c");
}else{
alert("d");
}
//结果：a
*/
</script>
<script type="text/javascript">
//Java语言：switch表达式支持的类型：byte,int等整数,char，jdk1.7之后增加了String类型
//JavaScript语言：支持所有类型，即所有类型的数据都能用于选择
var x="x";
switch(x){
default:alert("c");
case "aa":alert("a");break;
case "abc":alert("b");
}//常规的写法就不说了，说说这种的，这种的显示结果是c和a，因为在default处进入之后并没有break所以会进入到case "aa"里面去
</script>
</body>
</html>九九乘法表例子：
<html>
<head>
<title>javascript语言学习</title>
<link rel="stylesheet" href=table.css>
</head>
<body>
<script type="text/javascript">
a:for (var x=0;x<3;x++){
for (var y=0;y<4;y++){
document.write("x="+x+" ");
break a;
}
document.write("<br/>");
}
</script>
<hr/>
<h2>九九乘法表</h2>
<script type="text/javascript">
for (var x=1;x<=9;x++){
for (var y=1;y<=x;y++){
document.write(y+"*"+x+"="+x*y+" ");
}
document.write("<br/>");
}
</script>
<br/>
<h2>九九乘法表</h2>
<script type="text/javascript">
document.write("<table>");
for (var x=1;x<=9;x++){
document.write("<tr>");
for (var y=1;y<=x;y++){
document.write("<td>"+y+"*"+x+"="+x*y+"</td>");
}
document.write("</tr>");
}
document.write("</table>");
</script>
</body>
</html>想要将其他代码融入到Html中，都是以标签的形式。
1、 JS代码存放在标签对<script> js code．．．</script>中。
2、当有多个html页面使用到相同的JS脚本时，可以将js代码封装到一个文件中，只要在script标签的src属性引入一个js文件。（方便后期维护，扩展）
注意：如果在script标签中定义了src属性，那么标签中的内容不会被执行。
例：<script src=”test.js” type=”text/javascript”></script>
注：规范中script标签早期有一个属性language,而现在使用type属性。
<html>
<head>
</head>
<body>
<!-- js脚本片段可以写任意个,位置也是任意的，只是要注意浏览器的解析顺序 -->
<!-- js的写法1 -->
<script type="text/javascript">
alert("HelloWorld");
</script>
<!-- js的写法2 -->
<script type="text/javascript" src="a.js">
</script>
<!-- js的写法3,注意，这种方式不行--包含在标签内的js代码无效 -->
<script type="text/javascript" src="a.js">
alert("kkkk");//无效代码，被上面一行的导入方式屏蔽掉了!!!并且上面一行的a.js的内容也能够显示但是此行不能
</script>
</body>
<script type="text/javascript">
alert("kkkk2");//这里是可行的
</script>
</html>1、Js中的数组的长度是可以自动增长的
2、Js中的数组的功能相当于Java中的数组和集合的综合
3、var arr=[3,2,-4,78,10];//正确，注意，Java赋初值用的是大括号，而Js用的是中括号
var arr[]=[3,2,-4,78,10];//错误的，不能声明成arr[]----声明时不能带中括号
4、遍历数组
5、Js中的数组当中可以存储不同数据类型的数据
<script type="text/javascript">
//数组定义的方式1: 定义时直接赋初值
var arr =[12,34,2,-3,90,12];
//alert(typeof(arr)); //object
//alert("len:"+arr.length);
//遍历数组
for(var x=0;x<arr.length;x++){
document.write("arr["+x+"]="+ arr[x]+" ");
}
document.write("<br/>");
arr[0]=-1000;
arr[7]=666;//数组可以自动增长，且arr[6]没有赋值则是undefined
for(var x=0;x<arr.length;x++){
document.write("arr["+x+"]="+ arr[x]+" ");
}
document.write("<br/>");
var arr2=[];
//alert(arr2.length);//0
arr2[1]=10;
for(var x=0;x<arr2.length;x++){
document.write("arr2["+x+"]="+ arr2[x]+" ");
}
document.write("<br/>");
//※※错误的声明方式--数组
//int[] arr3 ={1,2,3};
//var[] arr3 = [1,2,3];//错的，[]代表的是数组类型，而js中，所有数据类型只有一个var声明，不存在“var[]”这种类型
var arr4=[1,2,3,100];
arr4[0]="abc";
arr4[1]=true;
for(var x=0;x<arr4.length;x++){
document.write("arr4["+x+"]="+ arr4[x]+" ");
}
document.write("<br/>");
//※※综上,js数组的两个特点：
//1,长度是可变的
//2,元素的类型是任意的
</script>注：语法上是可以的，因为它有集合的特性，各种类型的数据都可以赋给它。虽然这样，但我们做项目时，一个数组最好放同一种类型的数据。
6、Js中数组的另一种定义方式：使用js当中的Array对象
注：用Array对象定义数组时，参数为1时，是指数组的长度；若大于1时，直接就是数组中的元素初值
var arr2 = new Array(5); //定义长度为5的数组----参数为1时，是长度
var arr3 = new Array(5, 6, 7); //参数大于1时，就是元素的初值
7、Js中Array对象中的方法
1）concat 方法：返回一个新数组，这个新数组是由两个或更多数组组合而成的。
2）join 方法：返回字符串值，其中包含了连接到一起的数组的所有元素，元素由指定的分隔符分隔开来。
3）reverse 方法:返回一个元素顺序被反转的 Array 对象。
4）shift 方法: 移除数组中的第一个元素并返回该元素。-----removeFirst()
5）slice 方法 (Array): 返回一个数组的一段。-----类似String中的substring()
6）sort 方法: 返回一个元素已经进行了排序的 Array 对象。
7）splice 方法: 替换。从一个数组中移除一个或多个元素，如果必要，在所移除元素的位置上插入新元素，返回所移除的元素。
8）unshift 方法：将指定的元素插入数组开始位置。返回值为新数组的长度----addFirst()
例：
<html>
<head>
<title>Array对象使用方法演示</title>
</head>
<body>
<script type="text/javascript" src="out.js">
</script>
<script type="text/javascript">
var arr=["aaa","bbb","ccc","ddd"];
println(arr);
var arr2=["111","222","333","okok"];
var newArr = arr.concat(arr2);
println(newArr);
println(newArr.join("-"));
println("<hr/>");
//pop() : 移除数组中的最后一个元素并返回该元素。
println( newArr.pop() );
println(newArr);
//push() : 将新元素添加到一个数组中，并返回数组的新长度值。
arr.push("x1","x2");
println(arr);
//arr.push("y1",arr2,"z1");//注意1，arr2在arr当中是一个元素---即arr变成二维数组。注意2，push方法会改变原来的数组。arr长度为：9
arr=arr.concat("y1",arr2,"z1");//注意1，该方法会把数组arr2当中的每个元素取出来，分别添加到arr当中---arr还是一维数组。注意2，concat方法不会改变原来的数组，连接结果以新数组的形式返回。旧arr的长度还是6，新arr的长度是12
println(arr);
println(arr.length);
arr.sort();
println(arr);
arr.splice(1, 3, "u1","u2","u3","u4","u5");//从1位置开始，删掉3个元素，并且在删除的位置插入:"u1","u2","u3","u4","u5"
println(arr);
//※※※做栈和队列的提示
//unshift---addFirst concat--addLast() shift---removeFirst() pop---removeLast()
//Array.prototype.addFirst=unshift;
</script>
<script type="text/javascript" src="arraytools.js">
</script>
<script type="text/javascript">
var arr=["aaa","bbb","ccc","ddd"];
var max = arr.getMax();
println(max);
println(arr);
</script>
</body>
</html>其中用到的工具
arraytools.js
//给原型对象添加一个getMax()方法
Array.prototype.getMax = function() {
var temp=0;
for(var x=1;x<this.length;x++){
if(this[x]>this[temp]){
temp = x;
}
}
return this[temp];
};
Array.prototype.toString = function() {
return "["+this.join("")+"]";
};out.jsfunction println(param){
document.write(param+"<br/>");
}
function print(param){
document.write(param);
}函数
1、一般函数
格式：
function 函数名(形式参数...)
{
执行语句；
return 返回值；
}
函数是多条执行语句的封装体，只有被调用才会被运行。
注意：调用有参数的函数，但没有给其传值，函数一样可以运行，或者调用没有参数的函数，给其传值，该函数也一样运行。
说的简单点：只要写了函数名后面跟了一对小括号，该函数就会运行。那么传递的参数呢？
其实，在函数中有一个参数数组对象（arguments），该对象将传递的参数都封装在一
个数组中。
例：
function demo(){<span style="font-family: 宋体;">//定义函数。</span>
alert(arguments.length);
}
demo(“hello”,123,true);//调用函数。那么弹出的对话框结果是3，如果想得到所有的参数值，可以通过for循环遍历该数组。
for(var x=0; x<arguments.length; x++){
alert(arguments[x]);
}为了增强阅读性，最好按照规范，按定义好的形式参数传递实际参数。
函数在调用时的其他写法：
var show = demo();//show变量接收demo函数的返回值。 var show = demo;//这种写法是可以的，意为show和demo代表同一个函数。 //那么该函数也可以通过show()的方式运行。
<script type="text/javascript">
function getValue(){
<span style="white-space:pre"> </span>alert("aa");
return 100;
<span style="white-space:pre"> </span>}
//var v = getValue();
//alert("v="+v);
var v2=getValue; //相当于getValue把引用值传给v2，因此v2也是一个“function对象”----getValue和v2都是引用变量
//alert("v2="+v2 );//其实是输出v2对象的toString()
//alert("v2="+v2() ); //调用v2这个函数对象---调用函数
</script>
函数虽然定义时是声明成两个参数，但调用时却是可以传入任意个
<span style="font-weight: normal;"><span style="font-size:12px;">function show(x,y){
alert(x+","+y);
}
//show(23,22);//23,22
//show(23); //23,undefined
//show(); //undefined,undefined
//show(23,22,11);//23,22 后面的一个参数函数接收了但没有用</span></span>
每个函数中，存在一个 默认的数组arguments ,里面存储着本次调用时传入的所有实参
//函数的参数全部是js内部用一个arguments数组来接收与存放的---该对象是js内部隐含帮我们做的，我们可以访问到这个数组对象
function show2(x,y){
arguments[0]=1000;//可以把形参x的值改掉
document.write(x+","+y+"<br/>");
for(var i=0;i<arguments.length;i++){
<span style="white-space:pre"> </span>document.write(arguments[i]+",");
<span style="white-space:pre"> </span>}
}
show2(11,22,33,44);
//※综上，函数的技术细节：
//1, js中的函数是没有重载，只以函数名来识别的---其实函数名就是一个function对象的引用的名字
//2, js函数中有一个内部维护的arguments数组来接收与保存形参技术细节：1、js中函数没有重载，只以函数名来识别，函数名就是function对象的引用名
2、函数的参数全是js内部用一个arguments的数组来接收与存放的------该对象是js内部隐含帮我们做的，而且我们可以访问，也可以更改值
2、动态函数
通过Js的内置对象Function实现。
例：
<script type="text/javascript">
//把函数的形参用第1个参数传入，函数体中的代码用第2个参数传入----可以通过调用者动态传入函数体，因此非常灵活，该思想类似Java当中的类反射。
<span style="white-space:pre"> </span>var add = new Function("a,b","var s = a+b; return s; ");
//alert( add(12,11));
</script>如同：function demo(x,y){
alert(x+y);
}
demo(4,6);不同的是，动态函数，参数以及函数体都可以通过参数进行传递，可以动态指定。
3、 匿名函数
格式：function(){...}
例：
var demo = function(){...}
demo();通常在定义事件属性的行为时较为常用。
例：
function test()
{
alert(“load ok”);
}
window.onload = test;可以写成匿名函数的形式：
window.onload = function()
{
alert(“load ok”);
}匿名函数就是一种简写格式。
函数定义与调用例子：
<html>
<head>
<title>javascript数组与函数练习</title>
</head>
<body>
<script type="text/javascript">
//写一个获取数组中元素最大值的函数
function getMax(arr){
var max=0;//最大值的下标
for(var x=1;x<arr.length;x++){
if(arr[x]>arr[max]){
max = x;
}
}
return arr[max];
}
//调用
var arr=[23,-3,45,0,-100,47,22];
var v = getMax(arr);
//alert("v="+v);
//数组排序
function sortArray(arr){
for(var x=0;x<arr.length-1;x++){
for( var y=x+1;y<arr.length;y++){
if(arr[x]>arr[y]){
swap(arr,x,y);
}
}
}
}
function swap(arr,x,y){
var temp = arr[x];
arr[x] = arr[y];
arr[y] = temp;
}
//alert(arr);
//document.write(arr+"<br/>");
// sortArray(arr);
//alert(arr);
//document.write(arr+"<br/>");
//我们的输出函数---把内容输出到页面且换行
function println(str){
document.write(str+"<br/>");
}
println(arr);
sortArray(arr);
println(arr);
//到数组当中查找元素
function searchElement(arr,key){
for(var x=0;x<arr.length;x++){
if(arr[x]==key){
return x;
}
}
return -1;
}
println( searchElement(arr,0) );
println( searchElement(arr,123) );
</script>
<script type="text/javascript">
//二分查找
function binarySearch(arr,key){
var max,min,mid;
min=0;
max=arr.length-1;
while(min<=max){
mid = (max+min)>>1;
if(key>arr[mid]){//落在右边
min = mid+1;
}else if(key<arr[mid]){//落在左边
max = mid-1;
}else{
return mid;
}
}
return -1;
}
println( binarySearch(arr,0) );
println( binarySearch(arr,123) );
//数组反转
function reverseArray(arr){
for(var start=0,end=arr.length-1; start<end; start++,end--){
swap(arr,start,end);
}
}
reverseArray(arr);
println("反转之后:"+arr);
</script>
</body>
</html>注：下文中用到的println()方法都是另外导入的out.js方法中写的
out.js：function print(param){
document.write(param);
}
function println(param){
document.write(param+"<br/>");
}在with语句块中，可以省去对象名的引用
[html] viewplain copy
print?
var dd2 = new Date();
with(dd2){//在with语句块中，可以省去对象名“dd2”的引用
var year = getFullYear(); //dd2.getFullYear()
var month= getMonth(); //从0开始的月份数
var day = getDate();//返回月份中的第几天
println(year+"年"+month+"月"+day+"日 ");
}
一、Object对象
<html>
<head>
<title>Object对象的用法演示</title>
</head>
<body>
<script type="text/javascript">
/*toString()将对象转换成字符串*/
function show(){
alert("show......");
}
//alert(show);//默认调用toString()
//alert(show.toLocaleString());
//alert(show.toString());
var arr=[1,2,3,8];
//alert(arr.toString());
//alert(arr);//默认调的toString()
/*valueOf(): 返回指定对象的原始值 */
//alert(arr.valueOf());//结果和toString()一样
//alert(show.valueOf());//结果和toString()一样
</script>
</body>
</html>二、String 对象
1、创建String对象的两种方式
1）var str = new String("abc123");2）var str2 = "abcd1234";
2、String对象当中的属性
str.length：字符串长度3、String对象当中的方法
bold()：加粗fontcolor("red")：设置颜色
link("http://www.hncu.net")：设置为超链接
substring(1, 5)：取子串[1,5)，Java一样，左包含，右不包含
substr(1,5)：取子串：从1位置开始，取5个字符
三、Date 对象
1、Date对象的构造
[javascript] viewplain copy
print?
var date = new Date();
println(date); //GMT格式输出
println(date.toLocaleString());//转成本地系统的日期时间格式输出。
println(date.toLocaleDateString()); //只有日期，没有时间
2、从对象中解析出相应的日期元素
[javascript] viewplain copy
print?
//var year = date.getYear();//过时了，尽量不用 。它是返回从1900到当前日期所经过的年份
var year = date.getFullYear();
println(year);
var month= date.getMonth(); //从0开始的月份数
println(month);
var day1 = date.getDay(); //返回星期中的第几天,0为星期天
println(day1);
var day2 = date.getDate();//返回月份中的第几天
println(day2);
3、要求显示出某个日期的“星期几”
[html] viewplain copy
print?
function getWeekDay( num ){
var weeks = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
return weeks[num];
}
var weekDay = getWeekDay( date.getDay() );
println(weekDay);
4、日期对象和毫秒值之间的转换
[html] viewplain copy
print?
var date2 = new Date();
var time = date2.getTime();//日期对象-->毫秒值
println("time:"+time);
var date3 = new Date(time);
println(date3.toLocaleDateString());
5、日期对象和字符串之间进行转换
[html] viewplain copy
print?
//日期对象-->字符串：toLocaleString() 和 toLocaleDateString()
//字符串-->日期
//var strDate="9/27/15";//细节：如果年份只给两位有效数字，那是代表19**年。如果是2000年以后的年份，要给4位
var strDate="9/27/2015 ";//细节：如果年份只给两位有效数字，那是代表19**年。如果是2000年以后的年份，要给4位
var time = Date.parse(strDate);//返回的是毫秒数
var d = new Date(time);
println(d.toLocaleString());
6、日期解析错误时，抛异常
[javascript] viewplain copy
print?
<script type="text/javascript">
Date.prototype.parse2 =function(str){
throw new Exception();
};
try{
var strDate2="9/27/2ewewwe15 ";//细节：如果年份只给两位有效数字，那是代表19**年。如果是2000年以后的年份，要给4位
var time2 = Date.parse2(strDate2);//返回的是毫秒数
}catch(e){
alert("日期解析错误....我给的提示....");
}
</script>
四、Math 对象
Math.ceil(12.34);//向上进位Math.floor(12.34);//向下进位
Math.round(12.54);//四舍五入
Math.pow(5,6);//5的6次方
//生成10个[0,10]范围内的随机整数
for (var x=0;x<10;x++){
//var n=Math.floor(Math.random()*11);//法1
//var n=Math.round(Math.random()*10);//法2
var n=parseInt(Math.random()*11);//法3
println(x+": "+n);
}五、Global对象
Global对象中的方法是全局方法，调用时可以省略Global，直接写方法名1、parseInt()中的基数用法----进制转换
1）将指定进制格式的字符串转换成-->10进制数[javascript] view
plain copy
print?
//var num = parseInt("110",10); //110
//var num = parseInt("110",2); //6
var num = parseInt("0x3c",16); //60
2）10进制转换成--->非10进制
[javascript] view
plain copy
print?
var num2 = new Number(6);
println( "num2="+ num2.toString(2) );
var num3 = 60;
println( "num3="+ num3.toString(16) );
2、for(in)语句的用法
1）格式：for(变量 in 对象){
...//对对象中的元素进行遍历操作
}
2）例：
<script type="text/javascript">
/*
<span style="white-space:pre"> </span>for( 变量名 in 对象 ){
...//分别对对象中的元素(属性)进行遍历操作
<span style="white-space:pre"> </span>}
<span style="white-space:pre"> </span>*/
<span style="white-space:pre"> </span>//数组对象
<span style="white-space:pre"> </span>var arr=[12,13,22,-1,56,0,9];
<span style="white-space:pre"> </span>for (x in arr){//注意，对于数组，这里的x是下标即是0,1,2,3,...
<span style="white-space:pre"> </span>println(x+": "+arr[x]);
<span style="white-space:pre"> </span>}
<span style="white-space:pre"> </span>print("<hr/>");
//用for...in语句操作自定义对象
for (x in p2){//x是函数中的成员变量与成员方法的名称
println(x+"------"+p2[x]);// p2[x]就是valeOf(x)
}
</script>六、自定义对象
对js来描述对象--Person1、方法1:本质上，有点类似于Java当中的直接new一个空参对象，然后往里面直接添加变量
[javascript] viewplain copy
print?
<script type="text/javascript">
function Person(){
//alert("Person...");
println("Person...");
}
var p = new Person();
//要为Person对象p添加变量，直接使用：p.对象名=...
p.name = "Jack";
p.age = 24;
//alert(p.name+"---"+p.age);
//要为Person对象p添加方法，直接使用：p.方法名=...
p.show = function(){
println(p.name+"---"+p.age);
};
p.show();//调方法
var obj = new Object();
obj.name = "God";
obj.age =10000;
obj.show = function(){
println(obj.name+"::::"+obj.age);
};
obj.show();
</script>
2、方法2:更接近于Java当中的面向对象的方式----类的封装
[javascript] viewplain copy
print?
<script type="text/javascript">
//方式2:更接近于Java当中的面向对象的方式----类的封装
function Person(name,age){
this.name = name; //这里的this.表示给当前对象添加一个变量
this.age = age;
this.setName= function(name){
this.name = name;
};
this.getName= function(){
return this.name;
};
this.show= function(){
return "name:"+this.name+",age:"+this.age;
};
}
var p = new Person("Tom",22);
println(p.name+"==="+p.age);
p.setName("Rose");
println(p.show());
for(x in p){ //x为自定义对象当中的变量名
println(x+":"+p[x]); //p[x]为自定义对象当中的变量值(如果是函数，为它的字节码)
}
</script>
3、方式3: map方式, key:value ----类似于java当中的数据封装，把数据封装到Map集合当中<span style="font-weight: normal;"><script type="text/javascript">
//对象调用成员有两种方式：对象.属性名 和 对象["属性名"]
//1) 对象.属性名的方式应该注意: 如果属性名不符合标识符的命名规则，那么不能采用这种方式调用，如下面例子当中的不能采用map[8]的方式
//2) 对象["属性名"]的方式应该注意:如果属性名符合标识符的命名规则，那么访问时属性名应该要加引号，如下面例子当中的map[name]要写成pp["name"]的形式才行
var pp = {
//"name":"张三","age":"23", //key:value
name:"张三",age:"23", //这句和上面一句等效---key的名称可以省略引号
"getName": function(){
return this.name;
}
};
println(pp.name+"===" + pp.age);
println(pp.getName());
println( pp["name"] ); //用 pp[name]是不行的
//map集合的定义
var map={
8:"张三" , 3:"李四", 5:"Jack"
};
var val = map[8];//8是数字，不是变量名，因此引号省略照样能解析出来
println("val:"+val);
//var val2 = map.8; //不行，因为8不是变量的形式
//println(val2);
</script> </span>
4、map数据封装的进一步扩展
[javascript] viewplain copy
print?
<script type="text/javascript">
//属性值是数组
var myMap = {
names:["Jack1","Jack2","Jack4"],
ages:[25,22,18]
};
//取出Jack2的姓名和年龄
println("name:"+ myMap.names[1]);
println("age:"+ myMap.ages[1]);
var myMap2 = {
names:[{name:"Jack1"},{name:"Jack2"},{name:"Jack4"}]
};
//取出Jack1
println("name:"+ myMap2.names[0].name);//或者println(
myMap2.names[0]["name"]);
</script>
5、对象的prototype属性
要给对象添加新功能时，直接采用“对象.prototype.新内容”的形式就可以。这内容可以是变量，也可以是函数。1）为String对象添加一个自定义函数trim：剪去字符串两端的空格
[javascript] viewplain copy
print?
<script type="text/javascript">
function trim(str){
var start, end;
start=0;
end=str.length-1;
while(start<=end && str.charAt(start)==' '){
start++;
}
while(start<=end && str.charAt(end)==' '){
end--;
}
return str.substring(start,end+1);
}
//测试
var s=" dsk dsds ";
//alert("#"+s+"#");
//alert("#"+ trim(s) + "#" );
</script>
2）添加变量
[javascript] viewplain copy
print?
String.prototype.aa = 200;
println("abc123".aa);
3）添加函数
[javascript] viewplain copy
print?
String.prototype.trim = trim;
println("<hr>");
println("aa3".trim(" abc123 "));
（这里的trim就是上面（1）里面自定义属性中的trim）
注：这里通过“aa3”.trim(" abc123 ")处理的是别的字符串并不是自己
4）通过对象直接调用的函数（注意，一定要把前一版本当中的参数str改成this）
[javascript] viewplain copy
print?
<script type="text/javascript">
String.prototype.trim = function(){
var start, end;
start=0;
end=this.length-1;
while(start<=end && this.charAt(start)==' '){
start++;
}
while(start<=end && this.charAt(end)==' '){
end--;
}
return this.substring(start,end+1);
};
println(" aa3 ".trim() );
var str2 =" 76jh dssdds ";
println( str2.trim() );
</script>
注：这里是对自己进行处理
6、对象原型修改练习
1）给String对象添加一个toCharArray()方法2）给String对象添加一个reverse方法：将字符串反转
3）JS当中，函数内部是可以写函数的,而Java是做不到的。但Java有内部类
[javascript] view
plain copy
print?
<script type="text/javascript">
String.prototype.toCharArray= function(){
var chs=[];
for(var x=0; x<this.length; x++){
chs[x] = this.charAt(x);
}
return chs;
};
//给String对象添加一个reverse方法：将字符串反转
String.prototype.reverse=function(){
//JS当中，函数内部是可以写函数的,而Java是做不到的。但Java有内部类
//辅助函数，用于交换数组中的两个元素
function swap(arr,x,y){
var temp = arr[x];
arr[x] = arr[y];
arr[y] = temp;
}
var arr = this.toCharArray();
for(var x=0,y=arr.length-1; x<y; x++,y--){
swap(arr,x,y);
}
return arr.join("-");
};
/*
//辅助函数，用于交换数组中的两个元素
function swap(arr,x,y){
var temp = arr[x];
arr[x] = arr[y];
arr[y] = temp;
}
*/
//测试
var str = "dsjk2323jkjkewio";
println( str.reverse() );
//测试：在外部能否调用函数reverse内部的swap函数
//测试结果：不行的。其实它和局部变量是一个道理。
//因此，以后在写某个函数内部的辅助功能函数时，最好写在内部
/*
var arr =[23,45,7,9];
swap(arr,1,2);
println("kkk");
println(arr);
*/
</script>
BOM------浏览器对象模型
主要讲window对象：代表浏览器中一个打开的窗口
一、BOM功能
提供了访问浏览器各个功能部件，如浏览器窗口本身、浏览历史等的操作方法二、window中的事件
3个load事件（ 浏览器的生命周期）：onload, onunload, onbeforeunload（但从字面也能看出意思吧，还有其他的事件，自己可以查看帮助文档）[html] view
plain copy
print?
<!DOCTYPE html>
<html>
<head>
<title>bom_window_event.html</title>
</head>
<body>
<script type="text/javascript">
//事件注册
onload=function(){
//alert("onload...");
window.open("ad.html","_blank","height=300,width=300,status=no,toolbar=no,menubar=no,location=no");
}
/*
onunload=function(){
alert("onunload...");
}
onbeforeunload=function(){
alert("onbeforeunload...");
}
*/
</script>
</body>
</html>
三、window中的方法
[html] viewplain copy
print?
<!DOCTYPE html>
<html>
<head>
<title>bom_window_method.html</title>
</head>
<body>
<script type="text/javascript" src="print.js">
</script>
<script type="text/javascript">
//window中的方法
function f1(){
var b = confirm("你确定要执行吗？");
alert("b="+b);
}
var id1,id2;
function f2(){
// id1 = setTimeout("alert('time out...')" , 3000);//经过指定毫秒值后计算一个表达式----定时器
id2 = setInterval("alert('time out...')" , 3000);//每经过指定毫秒值后计算一个表达式----定时器
}
function f3(){
//clearTimeout(id1);
clearInterval(id2);//清除定时器
}
function f4(){
//moveBy(10,10);//浏览器窗口----相对移动，向右下角移动(水平与垂直方向分别移动10像素)
//moveTo(40,40);
//窗口抖动
for(var x=0;x<10;x++){
moveBy(20,0);
moveBy(0,20);
moveBy(-20,0);
moveBy(0,-20);
}
}
</script>
<input type="button" value="演示window中的方法1--确认提示窗口" onclick="f1()" /><br/>
<input type="button" value="演示window中的方法2--定时器1" onclick="f2()" /><br/>
<input type="button" value="演示window中的方法2--定时器2" onclick="f3()" /><br/>
<input type="button" value="演示window中的方法3--move" onclick="f4()" /><br/>
</body>
</html>
四、window中的对象
1、window中的navigator对象----浏览器信息
[javascript] viewplain copy
print?
function windowNavigatorShow(){
var name = window.navigator.appName;
//var version = window.navigator.appVersion;
var version = navigator.appVersion;//window对象是默认的，可以省略不写
println("name:"+name+",version:"+version);
}
2、window中的location对象----浏览器地址栏<span style="font-weight: normal;">function windowObj4(){
//获取属性
var pro = window.location.protocol; //window可省略
//alert(pro);
var text = location.href;
alert(text);
location.href="http://www.baidu.com.cn";//1
location.href ="5a.html";//2
//上两句1和2处可以对目前所处的地址进行更改，这就是在浏览器中浏览到某些东西时突然会跳到其他页面去的原理，如1会自动跳转到百度
}</span>5a.html
<html>
<head>
<title>aa</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<script type="text/javascript">
function windowObjDemo(){
history.back();
}
</script>
<input type="button" value="演示window中的对象" onclick="windowObjDemo()" />
</body>
</html>3、window中的history对象----浏览器已浏览的url信息
其中的方法：| back | 从历史列表中装入前一个 URL。 |
| forward | 从历史列表中装入下一个 URL。 |
| go | 从历史列表中装入 URL。 |
plain copy
print?
<input type="button" value="演示window中的对象3--history,后退" onclick="history.back()" />
DOM -----Document Object Model
文档对象模型（DOM）是一个能够让程序和脚本动态访问和更新文档内容、结构和样式的语言平台， 提供了标准的 HTML 和 XML 对象集， 并有一个标准的接口来访问并操
作它们。 ”它使得程序员可以很快捷地访问 HTML 或 XML 页面上的标准组件，如元素、样式表、脚本等等并作相应的处理。DOM 标准推出之前，创建前端 Web 应用程序都必须使用
Java Applet 或 ActiveX 等复杂的组件， 现在基于 DOM 规范， 在支持 DOM 的浏览器环境中，Web开发人员可以很快捷、 安全地创建多样化、
功能强大的Web应用程序。 这里只讨论
HTML DOM。
一、DOM概述
1、文档对象模型定义了 JavaScript 可以进行操作的浏览器，描述了文档对象的逻辑结构及各功能部件的标准接口。主要包括如下方面：
1）核心 JavaScript 语言参考（数据类型、运算符、基本语句、函数等）2）与数据类型相关的核心对象（String、Array、Math、Date 等数据类型）
3）浏览器对象（window、location、history、navigator 等）
4）文档对象（document、images、form 等）
2、JavaScript 中两种主要的对象模型
1）浏览器对象模型 （BOM）提供了访问浏览器各个功能部件，如浏览器窗口本身、浏览历史等的操作方法。（见前一篇）
2）文档对象模型 （DOM）
提供了访问浏览器窗口内容，如文档、图片等各种 HTML 元素以及这些元素包含的文本的操作方法。
在早期的浏览器版本中，浏览器对象模型和文档对象模型之间没有很大的区别。
二、主要作用
主要用来将标记型文档封装成对象，并将标记型文档中的所有内容(标签、文本、属性等)都封装成对象。文档：标记型文档----标签、文本、属性等
对象： 封装了属性和方法，可以调用里面的属性和方法。
模型：所有标记型文档都具备一些共性特征的体现。
三、一些重要的概念（主要DOM树）
1、DOM树模型：
DOM解析将按照标签的层次体现出标签的所属，形成一个树状结构---DOM树。标签、属性和文本内容称为节点(node)，节点也称为对象，标签通常也称为页面中的元素(element)
1）DOM技术的核心内容：
把标记文档变成对象树，通过对树中的对象进行操作，实现对文档内容的操纵。
2）DOM解析的方式：
将标记文档解析成一棵DOM对象树，并将树中的内容都封装成对象。----这些动作由浏览器帮我们完成
3）DOM解析的好处：
可以对树中的节点进行任意的操作：增删改查
4）DOM解析的弊端：
这种解析需要将整个标记型文档加载进内存，因此，如果标记型文档很，耗内存。
2、DHTML：动态的HTML，它不是一门语言，是多项技术综合体的简称。
以HTML+CSS的方式做的是静态网页，要想变成动态的，必须在此基础上加入JS和DOM技术。因此，DHTML包含：HTML+CSS+JS+DOM3、HTML:提供标签，封装数据
4、CSS：提供样式属性，对数据的显示样式进行定义
5、DOM: 把标记型文档封装成对象，供JS操纵
6、JS: 提供程序设计语言，通过DOM来操纵文档内容和显示样式
四、 DOM中获取节点的方法
节点都具备三个必备属性：节点名称(nodeName)、节点类型(nodeType)、节点值(nodeValue)。节点的类型： 标签节点的类型值为1，属性节点的类型值为2，文本节点的类型值为3
节点值：标签型节点是null,没有值的。只有属性和文本节点才可以有值。
1、getElementById() :通过节点的id获取该节点对象
[javascript] viewplain copy
print?
function getNodeDemo1(){
//获取id为divid1的节点
//var divNode= document.getElementById("divid1");
var divNode= document.getElementById("divid2");
//alert(divNode.nodeName+","+divNode.nodeType+","+divNode.nodeValue);
//获取div节点中的文本 innerHTML innerText 属性
var txtHTML = divNode.innerHTML;
var txt = divNode.innerText;
alert(txtHTML+","+txt);
//更改div节点中的文本内容
//divNode.innerHTML="我把它改成湖南城市学院了....";
divNode.innerHTML="我把它改成湖南城市学院了....".fontcolor("red");
}
2、getElementsByName() :通过节点的name属性获取节点集合----注意，是集合
[javascript] viewplain copy
print?
function getNodeDemo2(){
var node = document.getElementsByName("userName");
//alert(node.nodeName);//undefined
//alert(node);//因为是数组，所以是集合
//alert(node[0].nodeName);//INPUT
//alert(node.length);//1
//alert(node[0].nodeType);//1
alert(node[0].nodeValue);//标签型节点的value都是null
//alert(node[0].getAttribute("value"));
}
3、getElementsByTagName() :通过节点的标签名字获取节点集合
1）获取document下的所有[javascript] view
plain copy
print?
function getNodeDemo3(){
var nodes = document.getElementsByTagName("a");
//alert(nodes.length);//5
//alert(nodes[0].innerHTML);//获取<a>标签容器封装的内容：城市首页
//给页面当中的所有<a>标签添加 target属性 //给对象添加属性并赋值时，若属性不存在则是添加，若存在则是修改
for(var x=0; x<nodes.length; x++){
//alert(nodes[x].innerHTML);
nodes[x].target = "_blank";
}
}
2）获取<div>标签下的所有<a>节点
[javascript] view
plain copy
print?
function getNodeDemo4(){
var divNode = document.getElementById("mylink");
var nodes = divNode.getElementsByTagName("a");//只获取divNode元素下面的所有子节点
for(var x=0; x<nodes.length; x++){
nodes[x].target = "_blank";
}
}
五、利用节点的层次关系(level)获取节点的方法
父节点：parentNode属性子节点：childNodes集合, firstChild() , lastChild()
上一个兄弟节点：previousSibling属性
下一个兄弟节点：nextSibling属性
1、获取父节点
[javascript] viewplain copy
print?
var tabNode = document.getElementById("tableid1");
var node = tabNode.parentNode;
2、获取子节点
获取到的子节点是集合[javascript] view
plain copy
print?
var nodes = tabNode.childNodes;
注意：1）如果<table>后面有回车符，高版本的IE和火狐会识别成 “空白文本”#text，而低版本IE会直接越过-----不光是<table>节点，其它节点也一样
2）表格的,<table>标签和<tr>标签中间，其实还隐藏着一个<tbody>标签----表格体
3、获取兄弟节点
[javascript] viewplain copy
print?
var node = tabNode.previousSibling.previousSibling;//上一个兄弟
alert(node.nodeName);//div
var node = tabNode.nextSibling.nextSibling;//上一个兄弟
alert(node.nodeName);//dl
六、DOM中的一些操作
1、创建文本对象
[javascript] viewplain copy
print?
function createAndAdd1(){
//1利用createTextNode()创建一个文本对象
var oTextNode = document.createTextNode("新的文本！");
//2获取div对象
var divNode = document.getElementById("div1");
//3把oTextNode添加成div对象的孩子
divNode.appendChild(oTextNode);
}
2、创建标签对象
[javascript] viewplain copy
print?
function createAndAdd2(){
//1利用createElement()创建一个标签对象
var oBtnNode = document.createElement("input");
oBtnNode.type="button";
oBtnNode.value="新建的按钮";
//2获取div对象
var divNode = document.getElementById("div1");
//3把oTextNode添加成div对象的孩子
divNode.appendChild(oBtnNode);
}
3、直接利用容器标签中的一个属性：innerHTML-----本质上改该标签容器中的“html代码”，不是我们认为的对象树的操作
<span style="font-weight: normal;">function createAndAdd3(){
//获取div1节点
var oDivNode1=document.getElementById("div1");
//添加按钮
oDivNode1.innerHTML="<input type='button' value='按钮a'>";
//oDivNode1.innerHTML+="<input type='button' value='按钮a'>";
oDivNode1.innerHTML+="<a href='http://www.baidu.com' target='_blank'>百度一下</a>";
}</span>使用innerHTML属性时若不使用“+”号，原来的文本内容会被覆盖
4、删除节点 利用标签容器对象中的removeChild()和removeNode(),前者删子节点，后者删自己----不建议使用
[javascript] viewplain copy
print?
function deleteNode(){
var oDivNode = document.getElementById("div2");
//自杀式----不建议
//oDivNode.removeNode();//默认false,不删除子节点集合
//oDivNode.removeNode(true);//true,删除子节点集合
//通过父节点去删除它的孩子
oDivNode.parentNode.removeChild(oDivNode); //建议使用父节点这种方法
}
5、替换节点(移除替换) 利用标签容器对象中的replaceChild()和replaceNode(),前者替换子节点，后者替换自己----不建议使用
[javascript] viewplain copy
print?
function updateNode(){
var oDivNode = document.getElementById("div2");
var oDivNode4 = document.getElementById("div4");
//自杀式----不建议
//oDivNode.replaceNode(oDivNode4);
//通过父节点去替换它的孩子：用oDivNode4去替换oDivNode
oDivNode.parentNode.replaceChild(oDivNode4,oDivNode);
}
6、替换节点(克隆替换)
[javascript] viewplain copy
print?
function updateNode2(){
var oDivNode = document.getElementById("div2");
var oDivNode4 = document.getElementById("div4");
var oDivNode4_2 = oDivNode4.cloneNode(true);//克隆一个对象,默认参数为false。参数为true时，连子节点一起克隆
//通过父节点去替换它的孩子：用oDivNode4_2去替换oDivNode
oDivNode.parentNode.replaceChild(oDivNode4_2,oDivNode);
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- js LINQ教程
- JSP的jspInit函数与jspDestroy函数（转）
- cjson 解析
- **JAVASCRIPT** 网页交互事件
- js 拖拽实现
- **JAVASCRIPT** 程序控制结构和函数
- Extjs tree节点的点击事件
- js中字符串String中使用正则表达式的方法
- js 文字预写匹配
- js获取编辑框游标的位置
- js 监控浏览器关闭事件
- js中使用正则表达式（g模式和非g模式的区别）
- Servelet-页面乱码（非英文字符全部是问号）
- Jsp中的自定义标签
- (js)强制不使用“兼容性视图”
- js 模拟QQ聊天窗口图片播放效果（带滚轮缩放）
- js时间戳转成日期格式
- ECMAScript 6 学习系列课程 （ES6 proxy和Reflect的相关用法）
- JS中的对象
- 判断字符串能否转json