JavaScript-ECMAScript编程

最新推荐文章于 2024-11-11 22:26:09 发布

五度鱼Java

最新推荐文章于 2024-11-11 22:26:09 发布

阅读量8.2k

点赞数 2

分类专栏： JavaScript 文章标签： ecmascript 前端 JavaScript

本文链接：https://blog.csdn.net/qq_46096136/article/details/127125468

版权

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、概述

1、JavaScript语言是一种脚本语言（解释型语言），JavaScript的“目标程序”是以普通文本的形式保存。

2、JavaScript是一门编程语言，专门用来操作HTML页面中的节点，让网页产生动态效果的。JavaScript中也有变量、数据类型、运算符、if语句、for循环、标识符、关键字等。

3、JavaScript和Java的区别?

JavaScript运行在浏览器当中，浏览器中有执行JS代码的内核。
Java运行在JVM当中。JavaScript和Java没有任何关系。
Java语言是SUN公司开发的，JavaScript这个名字是SUN公司给起的名。

4、JavaScript包括三块：ECMAScript、DOM、BOM

5、ECMAScript是ECMA制定的262标准，JavaScript和JScript都遵守这个标准，ECMAScript是JavaScript核心语法

6、DOM编程是通过JavaScript对HTML中的dom节点进行操作，DOM是有规范的，DOM规范是W3C制定的。（Document Object Model：文档对象模型）

7、BOM编程是对浏览器本身操作，例如：前进、后退、地址栏、关闭窗口、弹窗等。由于浏览器有不同的厂家制造，所以BOM缺少规范，一般只是有一个默认的行业规范。（Browser Object Model：浏览器对象模型）

二、嵌入JS的三种方式以及JS的注释

1、行间事件

JavaScript是一种事件驱动型的编程语言，通常都是在发生某个事件的时候，去执行某段代码。其中事件包括很多，例如：鼠标单击事件click，另外还有其他事件，例如mouseover是鼠标经过事件等。并且在JavaScript当中任何一个事件都有对应的事件句柄，例如：click对应的事件句柄是onclick>，mouseover对应的事件句柄是onmouseover
所有的事件句柄都是以标签的属性形式存在。例如一下input button就有一个onclick这样属性。只要有用户点击了以下的这个按钮对象，此时按钮对象上发生了鼠标单击事件，那么注册在onclick事件句柄当中的JS代码会被执行！onclick后面代码实际上是浏览器负责执行的。
οnclick=“后面的代码”并不是浏览器打开的时候执行，浏览器打开的时候，只是将这个代码注册给onclick事件句柄了。等待该按钮的click事件发生，只要发生，后面的代码会被事件监听器–调用
怎么使用JS代码弹窗？
在JS当中有一个内置的BOM对象，可以直接拿来使用，全部小写：window其中window对象有一个方法/函数叫做alert，这个函数专门用来弹出对话框！
window.alert(‘Hello World!’);弹窗的JS代码

通过这段代码可以知道：JS中的字符可以使用单引号括起来，也可以使用双引号JS中的一条语法可以“；”结尾，也可以不“；”结尾–>

示例代码：

<input type="button" value="hello" onclick="window.alert('Hello Js')" />
	   
	   <input type="button" value="hello1" onclick='window.alert("Hello Js")' />
	   
	   <input type="button" value="hello2" onclick='window.alert("Hello Js1") 
	                                                window.alert("Hello Js2") 
	                                                window.alert("Hello Js3")' />
	   
	   
	   <!-- window可以省略不写 -->
	   <input type="button" value="hello3" onclick='alert("Hello zhangsan");
	                                                alert("Hello lisi"); 
	                                                alert("Hello wangwu");' />

2、页面script标签嵌入

（1）语法格式：

<script type="text/javascript">JS代码</script>

（2）window.alert()的执行会阻塞当前页面的加载

（3）一个页面中可以写多个脚本块

（4）脚本块的位置没有限制

（5）暴露在脚本块中的JS代码在页面打开的时候遵循自上而下的顺序依次逐行执行

示例代码：

<!-- 脚本块的位置随意，没有限制！ -->
<script type="text/javascript">
		     window.alert("first...");
		</script> 
<!doctype html>
<html>
    <head>
	    <meta charset="utf-8">
	    <title>HTML中嵌入JS代码的第二种方式</title>
		<!-- 脚本块会阻碍事件的进行 -->
		<script type="text/javascript">
		     window.alert("head...");
		</script> 
	</head>
	<body>
         <!-- 这个按钮会先被加载到浏览器内存。 -->
	     <input type="button" value="Hello1" />
		 
		 <!-- 脚本块 -->
		<!-- 一个页面中脚本块可以出现多个！ -->
	     <script type="text/javascript">
		 /* 在这里直接编写JS代码，这些JS代码在页面打开的时候自上而下的顺序依次逐行执行！ */
		      window.alert("Hello World!");
		      window.alert("Hello JS");
			  //alert("hello world"); // 单行注释
			  /*
				多行注释
			*/
		 </script>
		 
		 <!-- 最后加载这个按钮2 -->
	     <input type="button" value="Hello2" />
	</body>
	<script type="text/javascript">
		     window.alert("last...");
		</script>

3、外部引入

（1）语法格式：

<script type="text/javascript" src="js文件路径"></script>

（3）错误写法：

<script type="text/javascript" src="js文件路径"/>

示例代码：

<body>
	
	    <!-- 引入外部独立的js文件 -->
		<!-- script标签引入js文件的时候，是src属性，不是href。 -->
	    <script type="text/javascript" src="js/1.js"></script>
		
		<!-- 引入第二次，这个操作没有意义，测试结果：只要引入一次JS文件，JS文件中的代码就会全部执行一遍 -->
	    <script type="text/javascript" src="js/1.js"></script>
		
	    <script type="text/javascript" src="js/1.js" />
		
		<script type="text/javascript" src="js/1.js">
		    <!-- alert("Hello World!");这里的代码不会执行！ -->
		</script>
		
		<!-- 单独的脚本块 会执行-->
		<script type="text/javascript">
			alert("hello world!%%%%%%%%");
		</script>
		
	</body>

四、变量

1、变量的声明与赋值

（1）变量未赋值，系统默认赋值undefined

（2）JS是一种弱类型编程语言，一个变量可以接收任何类型的数据

（3）一行上也可以声明多个变量

示例代码：

<body>
		<script type="text/javascript">
			var i;
			alert("i= " + i);//undefined
			
			var k = undefined;
			alert("k= " + k);//undefined
			
			//alert(age);
			
			var a,b,c = 100;
			alert("a= " + a);//undefined
			alert("b= " + b);//undefined
			alert("c= " + c);//100
			
			var d = false;
			alert(d);//false
			
			var d = "abc";
			alert(d);//abc
			
			var d = 3.14;
		    alert(d);//3.14
		</script>
	</body>

2、函数的定义与调用

（1）函数类似于java语言中的方法，是一段可以完成某个功能的可以被重复利用的代码片段

（2）定义函数的两种语法

第一种：普通函数定义，这种方式较多

function 函数名(形式参数列表){
   函数体;
}
例如：
function sum(a, b){
	return a + b;
}

注意：

a和b是形式参数列表，也是两个局部变量。

JS中的函数不需要指定返回值类型，因为JS是弱类型编程语言，变量可以接收任何类型的数据，也就是说JS中的函数可以返回任何类型的数据，当然也可以不返回任何数据。返回数据使用return语句。

JS中的函数在调用的时候，实参可以随意，例如调用以上的sum函数，可以这样调用：sum()，没有传任何实参的时候a和b变量没有赋值，则a和b都是undefined。也可以这样调用sum(10)，这样就表示a变量赋值10，b变量仍然是undefined。还可以这样调用：sum(1,2)，这样则表示a是1，b是2。

第二种：把函数的声明当做类进行定义

函数名 = function(形式参数列表){
	函数体;
}
例如：
sum = function(a, b){
	return a + b;
}

（3）JS中的函数定义在脚本块中，页面在打开的时候，函数并不会自动执行，函数是需要手动调用才能执行的。

（4）由于JS是一种弱类型编程语言，所以函数不能同名，没有重载机制

（5）这样的代码顺序是可以的，页面打开的时候会先进行所有函数的声明，函数声明优先级较高。

（6）用户点击按钮，调用函数

示例代码1：

<body>
		<script type="text/javascript">
			//定义一个加法函数
			//a 和 b 都是局部变量,他们都是形参(a和b都是变量名，变量名随意)
			function sum(a,b){
				alert(a + b);
			}
			
			//调用加法函数
			sum(10,20);//30
			
			//定义一个sayHello函数
			sayHello = function(username){
				alert("helo " + username);
			}
			
			//调用sayHello函数
			sayHello("javascript");//hello javascript
			
		</script>
		
		<input type="button" value="Hello" onclick="sayHello('jack')" />
		<input type="button" value="计算10和20的求和" onclick="sum(10,20)" />
	</body>

示例代码2：

<script type="text/javascript">
			function sum(a,b){
				return a + b;
			}
			
			var retValue1 = sum(1,2);
			alert(retValue1);//3
			
			var retValue2 = sum("jack");
			alert(retValue2);//jackundefined
			
			var retValue3 = sum();
			alert(retValue3);//NaN
			
			var retValue4 = sum(1,2,3);
			alert("结果= " + retValue4);//结果=3
			
			/* 
		    在JS当中，函数的名字不能重名，当函数重名的时候，后声明的函数会将之前声明的同名函数覆盖 
			 */
			function hello(useranme){
				alert("test1");
			}
			
			function hello(){
				alert("test1 test1");
			}
			
			hello("jack");//test1 test1
		</script>

3、局部变量和全局变量

（1）局部变量：函数的形参是局部变量，另外使用var关键字在函数体中声明的变量是局部变量，函数执行结束之后，局部变量的内存就释放了。

（2）全局变量：在函数体外声明的变量属于全局变量，另外不使用var关键字声明的变量无论位置在哪，它都是全局变量，全局变量在浏览器关闭时销毁。

示例代码：

<script type="text/javascript">
			
			var username = "李四";
			function access(){
				var username="张三";
				alert("username=" + username);//就近原则,这是所有编程语言都具备的
			}
			
			access();//username=张三
			alert(username);//李四
			
			//访问未声明的变量,浏览器会报错
			alert(kkk);
			
			function myName(){
				//声明变量的时候,如果没有指明关键字,那就意味着这个变量是全局变量
				myName = 20;
				alert("myName= " + "张三");
			}
			
			myName();//myName= 张三
			alert("myName=" + myName);//myName=20
			
		</script>

五、JS数据类型

1、typeof运算符

typeof运算符可以在JS代码运行过程当中，动态的获取变量的数据类型
typeof运算符的语法格式：typeof变量名
typeof运算符的运算结果是以下6个字符串之一:

“undefined”

“number”

”string"
“boolean”
“object”
“function”
并且以上字符串全是小写

在JS中判断两个字符串是否相等，应该使用“==”，JS中没有equals函数！！！

示例代码：

<script type="text/javascript">
function sum(a,b){
				if(typeof a == "number" && typeof b == "number"){
					return a + b;
				}
				alert(a + "," + b + "必须为数字类型！");
			}
			
			sum(false,"abc");//false,abc必须为数字类型！
			
			var retValue = sum(10,20);
			alert(retValue);//30
			
			var a;
			alert(typeof a);//"undefined"
			
			var b=2;
			alert(typeof b);//"number"
			
			var c="abc";
			alert(typeof c);//"string"
			
			// null属于Null类型,但是typeof运算符的运算结果是"object"
			// 一定要注意:null这个值是基本数据类型,但是typeof运算符的运算结果是"object"
			var d=null;
			alert(typeof d);//"object"
			
			var e=false;
			alert(typeof e);//"boolean"
			
			var obj=new Object();
			alert(typeof obj);//"object"
			
			function test(){
				
			}
			alert(typeof test);//"function"
		</script>

2、ES6版本之前的数据类型有6种

在JS中学习数据类型不是为了声明变量，是为了理解JS程序的底层原理

（1）Undefined

1、只有一个值，它的值就是：undefined
2、当一个变量声明之后没有手动赋值，系统默认赋值undefined
3、Undefined类型属于原始类型。

示例代码：

<script type="text/javascript">
    
            var i;//undefined
			
			var k = undefined;//undefined
			
			alert(i == k);//true
						
			var y = "undefined";//字符串类型"undefined"
			
			alert(k == y);//false
			
		</script>

（2）Number

1、Number类型属于原始类型。
2、Number类型都有哪些值？

-1 0 1 2 3 3.14 2.0 NaN Infinity …

3、NaN？

Not a Number，表示不是一个数字。
但NaN一个值。
它属于Number类型。

4、什么情况下结果是一个NaN？
当一个数学表达式的运算结果本应该返回一个数字，
但是最终无法返回一个数字的时候，结果是NaN。

5、Infinity是无穷大，当除数是0的时候，最终计算结果是无穷大。>

6、强调：
JavaScript当中的Number类型代表了java中的：
byte short int long float double

7、在Number类型这一块，有一个函数叫做：isNaN()函数，这个函数
最终返回布尔类型，返回true表示不是一个数字，返回false表示是一个数字。

isNaN : is Not a Number
true: 表示不是一个数字
false:表示是一个数字

isNaN(数据)：这个函数有一个特点，它会首先尝试将“数据”转换成
数字，如果转换失败了，则结果就是true。转换为数字成功了，那么
结果就是false。

isNaN这个函数是干啥的？
就是用来判断“数据”是否是一个数字！！！！！

8、在Number类型这一块还有一个函数叫做：Number()函数，这个函数的作用可以将不是
数字类型的数据转换成数字类型的数据。

9、parseInt()函数，将字符串数字转换成数字，并且取整。向下取整。

10、Math.ceil()，这是一个Math工具类中的一个函数，向上取整。

示例代码：

<script type="text/javascript">
            var v1 = 1;
			var v2 = 3.14;
			var v3 = -100;
			var v4 = NaN;
			var v5 = Infinity;
			
			//"number"
			alert(typeof v1);//"number"
			alert(typeof v2);//"number"
			alert(typeof v3);//"number"
			alert(typeof v4);//"number"
			alert(typeof v5);//"number"
			
			var a=100;
			var b="中国人";
			alert(a / b);//NaN
			
			var c="abc";
			var d=10;
			alert(c + d);//abc10
			
			var e=10;
			var f=0;
			alert(e / f);//infinaty
			
			function sum(a,b){
				if(isNaN(a) || isNaN(b)){
					alert("你输入的数字类型非法！");
				}
				return a + b;
			}
			
			alert(sum("张三",100));//张三300
			alert(sum(100,200));//300
			
			var x="3.3333333";
			alert(parseInt(x) + 1);//4
			
			var y=3.2;
			alert(parseFloat(y) + 1);//4.2
			
			
			alert(Math.ceil(2.1));//3
		</script>

（3）String

1、String类型属于原始类型（基本数据类型）
2、在JS中怎么定义字符串，包括两种方式：
var s = “字符串”;
var s = ‘字符串’;
var s = new String(“字符串”);
3、在JS当中提供了创建字符串的两种方式：
如果采用这种方式创建的字符串就属于原始类型！
var s = “hello”;
如果采用这种方式创建的字符串就属于Object类型，这里使用了Object类的子类String，String类是JS内置的，可以直接使用：
var s = new String(“hello”);
4、在JS中不管是原始类型的字符串，还是Object类型的字符串，他们的方法和属性都是通用的。
5、String当中的常用属性和方法：
常用属性：
length属性，获取字符串长度
常用方法：
charAt 方法获取指定下标位置的字符
concat 方法连接字符串
indexOf 方法获取某个字符串在当前字符串中第一次出现处的索引
lastIndexOf 方法获取某个字符串在当前字符串中最后一次出现处的索引
replace 方法替换
split 方法拆分字符串
substr 方法截取字符串
substring 方法截取字符串
toLowerCase 方法转小写
toUpperCase 方法转大写

示例代码：

<script type="text/javascript">
            var x = "abc";
			alert(typeof x);//string
					
			//大String（属于Object类型）			
			var y = new Object("abc");
		    alert(typeof y);//object
			
			//获取字符串长度
			alert(x.length);//3
			alert(y.length);//3
			
			alert("http://www.baidu.com".indexOf("http"));//0
			alert("http://www.baidu.com".indexOf("https"));//-1
			
			//判断一个字符串中是否包含某个字符串？
			alert("http://www.baidu.com".indexOf("https") >=0 ? "包含" : "不包含");//不包含
			
			//只替换了第一个
			alert("name=zhangsan%age=20%password=123".replace("%","&"));
			//此方法比较麻烦,以后使用正则表达式
			alert("name=zhangsan%age=20%password=123".replace("%","&").replace("%","&"));
			
			//面试常问 substr和substring的区别？
			//substr(startIndex,length)
			alert("abcdefgh".substr(2,4));//cdef
			//substring(startIndex,endIndex)注意:不包含endIndex
			alert("abcdefgh".substring(2,4));//cd
			
		</script>

（4）Null

1、该类型只有一个值：null

2、typeof运算符的执行结果是"object"

（5）Boolean

1、Boolean类型属于原始类型。
2、Boolean类型只有两个值：true,false，没有其他值。
3、Boolean类型中有一个函数：Boolean()函数，这个函数的作用是？
将不是布尔类型的转换成布尔类型。

转换规律是什么？
"只要有东西"结果就是true。
有数据就是true，无数据就是false

示例代码：

<script type="text/jscript">
            var username="jack";
			function hello(){
				if(username){//括号内的数据可根据Boolean函数自动转换成真或假
					alert("欢迎：" + username);
				}
				alert("用户名输入为空！");
			}
		
			hello();
			
			alert(Boolean(1));//true
			alert(Boolean(0));//false
			alert(Boolean(""));//false
			alert(Boolean("abc"));//true
			alert(Boolean(NaN));//false
			alert(Boolean(undefined));//false
			alert(Boolean(Infinity));//true
		</script>

（6）Object

1、在JS当中内置了一个类型Object，可以将Object类型看做是所有对象的超类/基类。
2、在JS当中默认定义的类型，没有特殊说明的话，默认继承Object。
3、Object类型中有哪些通用属性和方法呢？
属性：
prototype 属性 | constructor 属性
方法：
toLocaleString 方法 | toString 方法 | valueOf 方法

其中：Undefined、Number、String、Boolean、Null都属于原始类型（或者叫做基本数据类型）
其中：Object属于引用数据类型（或者叫做对象数据类型）

3、ES6版本及之后包括的数据类型

Symbol
Bigint
注意：ES6之后是8种类型。ES6之前是6种类型

六、null NaN undefined区别

1、== 和 == 有什么区别？
== 等同运算符：只比较值是否相等。
=== 全等运算符：既比较值是否相等，同时又比较数据类型是否相同。
2、null undefined NaN的区别？
类型都是不一样的
null和undefined是等同关系。

示例代码：

<script type="text/javascript">
            alert(1 == true);
			alert(1 === true);
			
			// null的类型属于原始类型,typeof运算符的结果是:object
			alert(typeof null);//object
			alert(typeof NaN);//number
			alert(typeof undefined);//undefined
			
			alert(null == NaN);//false
			alert(null == undefined);//true
			alert(NaN == undefined);//false
			
			var x = null;
			alert(x);//null
			
			var y = NaN;
			alert(y);//NaN
			
			var z = undefined;
			alert(z);//undefined
		</script>

七、JS中的事件

1、常用事件

blur 失去焦点
focus 获得焦点

click 鼠标单击
dblclick 鼠标双击

keydown 键盘按下
keyup 键盘弹起

mousedown 鼠标按下
mouseover 鼠标经过
mousemove 鼠标移动
mouseout 鼠标离开
mouseup 鼠标弹起

submit 表单提交
reset 表单重置

select 文本被选定
change 下拉列表中选项改变，或文本框内容改变

2、注册事件的两种方式

这种注册事件的方式就是第一种方式：在标签中使用“事件句柄”，在事件句柄后面编写JS代码
当这个事件句柄对应的事件发生之后，“注册”在事件句柄当中的这个代码被监听器调用。

onclick 鼠标单击的事件句柄，只有当鼠标单击事件click发生之后，注册在onclick后面的代码
会被执行。

第二种注册事件的方式，是使用纯JS代码完成事件的注册

示例代码：

<script type="text/javascript">
            function sayHello() {
				alert("Hello JS!");
			}
			<!-- 以下button标签中的sayHello()函数，在页面打开的时候并不会执行，
			只是在页面打开的过程中完成事件的绑定，完成事件的注册，以后只有
			当该事件发生之后sayHello()函数才会执行，像这种函数又一种特殊
			的称谓：回调函数。英语单词叫做：callback function
			
			这个回调函数的特点是：
				监听器负责调用，程序员不负责调用。
				当事件发生之后，监听器会负责调用该函数。
				像这种函数被称为回调函数。callback。-->
		<!-- 以下代码的含义是：将sayHello函数注册到按钮上，等待click事件发生之后，该函数被浏览器调用。我们称这个函数为回调函数 -->
		<input type="button" value="Hello" onclick="sayHello()" />
		<input type="button" value="Hello1" id="myBtn" />
        <input type="button" value="Hello2" id="myBtn2" />
		<input type="button" value="Hello3" id="myBtn3" />
		<script type="text/javascript">
			function dosome() {
				alert("do....some!");
			}
            /* 
			   第二种注册事件的方式，是使用纯JS代码完成事件的注册
			*/
		   //第一步:先获取这个按钮对象(documnet全部小写，内置对象，可以直接使用，document就代表整个HTML页面)
			var mybtnElt = document.getElementById("myBtn");
			//第二步:给按钮对象的onclick属性赋值
			mybtnElt.onclick = dosome;//注意:千万不要加小括号
			
			var MyObj2 = document.getElementById("myBtn2");
			MyObj2.onclick = function(){//这个函数没有名字,叫做匿名函数,这个匿名函数也是一个回调函数
				alert("myBtn2.......");//这个函数在页面打开的时候只是注册上,不会被调用,在click事件反生之后才会调用
			}
					   
			document.getElementById("myBtn3").onclick = function(){
				alert("myBtn3...........");
			}
</script>

3、代码的执行顺序

示例代码1：

<!-- load事件什么时候发生？页面全部元素加载完毕之后才会发生 -->
	<body onload="ready()">
		<script type="text/javascript">
			function ready(){
			var btn = document.getElementById("btn");
			btn.onclick = function(){
				alert("hello.js!");
			}
		}
		</script>
		<input type="button" value="按钮" id="btn">
	</body>

示例代码2：

<body>
		<script type="text/javascript">
			//页面加载完成的过程中,将a函数注册给了load事件
			//页面加载完毕之后,load事件发生了,此时执行回调函数a
			//回调函数a执行的过程中,把b函数注册给了id="btn"的click事件
			//当id="btn"的节点发生click事件之后,b函数被调用并执行
			window.onload = function(){//这个回调函数叫做a
				document.getElementById("btn2").onclick = function(){//这个个回调函数叫做b
					alert("Hello Js2!");
				}
			}
		</script>
		<input type="button" value="button2" id="btn2">
	</body>

4、keydown事件演示回车键13，Esc键27

回车键的键值是13
ESC键的键值是27

示例代码：

		<script type="text/javascript">
			window.onload = function(){
				var usernameElt = document.getElementById("username");
				//回车键的键值是13
				//ESC键的键值是27
				/* 
				 usernameElt.onkeydown = function(a,b,c){
					 //获取键值
					 //alert(a.keyCode)对于“键盘事件对象”来说，都有keyCode属性用来获取键值
					 //alert(a);[object KeyboardEvent]
					 //alert(b);
					 //alert(c);
				 }
				 */
				/* usernameElt.onkeydown = function(event){
					
					alert(event.keyCode);
				} */
				//登录验证
				usernameElt.onkeydown = function(event){
					if(event.keyCode == 13)
					{
						alert("正在进行验证。。。");
					}
				}
				
			}
		</script>
		<input type="text" id="username">

在这里插入图片描述

八、JS运算符之void

void运算符的语法：void(表达式)
运算原理：执行表达式，但不返回任何结果
javascript:void(0)
其中javascript:作用是告诉浏览器后面是一段JS代码
以下程序的javascript:是不能省略的

页面顶部<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
		<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<a href="javascript:void(0)" onclick="alert('test code')">既保留超链接的样式，同时用户点击超链接的时候执行一段JS代码，但页面还不能跳转。</a>
		
		<a href="javascript:void(100)" onclick="alert('test code')">既保留超链接的样式，同时用户点击超链接的时候执行一段JS代码，但页面还不能跳转。</a>
		
		<!-- void()这个小括号当中必须有表达式 如果void括号内不写东西将会报错（Uncaught SyntaxError: expected expression,got ')'） -->
		<a href="javascript:void()" onclick="alert('test code')">既保留超链接的样式，同时用户点击超链接的时候执行一段JS代码，但页面还不能跳转。</a>

九、Js之控制语句

1、JS中的控制语句，和java相同，JS中除了java的控制语句之外，还有一些特别的：
选择结构：
if语句
switch语句
循环结构：
for
while
do…while
转向语句：
break
continue
return
2、JS有哪些特殊的语句呢？
了解，不需要掌握：
for…in 语句
with 语句

示例代码：

<script type="text/javascript">
            var arr = [false,1,3.14,null,"abc"];
			
			//普通方法遍历数组
			for(var i=0;i<arr.length;i++){
				alert(arr[i]);
			}
			
			//利用for..in语句遍历
			for(var i in arr){//for..in遍历的是数组的下标
				alert(arr[i]);
			}
			
			//定义User类
			User = function(username,password){
				this.username = username;
				this.password = password;
			}
			
			//创建User对象
			var u = new User("张三",123);
			
			//访问username对象属性
			alert(u.username + u.password);
			alert(u["username"] + u["password"]);
			
			//使用for...in语句遍历输出对象属性s
			for(var shuXingMing in u){
				//查看输出类型
				alert(shuXingMing);
				alert(typeof shuXingMing);//shuXingMing是一个字符串
			}
			
			alert(u.username);
			alert(u.password);
			
			//with语句可以输出对象属性名,不用加引用
			with(u){
				alert(username + ","  + password)
			}
		</script>

十、JS内置对象

1、Array

示例代码：

<script type="text/javascript">
			
			//创建一个空数组
			var arr = [];
			alert(arr.length);//0
			
			var arr2 = [1,2,3,false,"abc",3.14];
			alert(arr2.length);//6
			
			arr2[7] = "test";
			alert(arr2.length);//8
			
			for(var i=0;i<arr2.length;i++){
				document.write(arr2[i] + "<br>");
			}
			
			document.write("<br>");
			
			//另一种创建数组的对象的方式
			var array = new Array();
			alert(array.length);//0
			
			var array1 = new Array(3);//3表示长度
			alert(array1.length);//3
			
			var array2 = new Array(3,2);
			alert(array2);//3,2
			
			var array3 = new Array(1,2,3,9);
			alert(array3.join("-"));//1-2-3-9
			
			//在数组的末尾添加一个元素(数组长度+1)
			array3.push(10);
			alert(array3.join("-"));//1-2-3-9-10
			
			//将数组末尾的元素弹出(数组长度-1)
			var a = array3.pop();
			alert(array3.join("-"));//1-2-3-9
			
			//注意:JS的数组可以自动模拟栈数据结构:后进先出,先进后出原则
			//反转数组
			a.reverse();
			alert(a.join("-"));//9-3-2-1
		</script>

2、Date

（1）new Date() 获取当前系统时间

（2）new Date().getTime()获取时间戳

（3）new Date().getFullYear()、getMonth()等方法。

示例代码：

<body>
		<script type="text/javascript">
			/* 
			    关于JS中的内置的支持类：Date，可以用来获取时间/日期 
			 */
			//获取系统当前时间
			var nowtime = new Date();
			//输出
			document.write(nowtime);
			document.write("<br>");
			document.write("<br>");
			
			var tt = new Date();
			//转换成具有本地语言环境的日期格式
			tt = tt.toLocaleString();
			document.write(tt);
			document.write("<br>");
			document.write("<br>");
			
			//当以上格式不是自己想要的,可以通过日期获取年月日等消息,自定义日期格式
			var time = new Date();
			var year = time.getFullYear();//返回年信息,以全格式返回
			var month = time.getMonth();//月份是:0-11
			var day = time.getDay();//获取一周的第几天(0-6)
			document.write(year + "年" + (month+1) + "月" + day + "日");
			
			document.write("<br>");
			document.write("<br>");
			
			//重点:怎么获取毫秒数？(从1970年1月1日 00:00:00 000到当前系统时间的总毫秒数)
			var miTime = new Date();
			document.write(miTime.getTime());//一般会使用毫秒数当做事件戳.(timestamp)
			
			document.write("<br>");
			document.write("<br>");
			</script>
			
			<script type="text/javascript">
				//出错点,start不能放在onload里!!!!!!!!!
				function displayTime(){
				var time = new Date();
				var strTime = time.toLocaleString();
				document.getElementById("div").innerHTML = strTime;
				 }
				
				//设置显示的事件一直会变化
				function start(){
					v = window.setInterval("displayTime()",1000);
				}
				
				function stop(){
					window.clearInterval(v);
				}
        </script>
		<input type="button" value="显示系统当前时间"  onclick="start();" />
		<input type="button" value="时间停止" onclick="stop();" />
		<div id="div"></div>
	</body>