JavaScript是一种基于对象的编程语言,基于对象指的是所有的对象已经由浏览器提供好了,用户直接使用就可以了。
另外,JS是嵌入在HTML语法之中的编程语言。
PS:虽然是基于对象的语言,但是在编写代码的过程中,尽量按照面向对面的要求书写代码。
输出语法:
document.write():向页面输出HTML代码。虽然JavaScript定义在HTML页面中,但是它却可以控制HTML代码的输出。document.write()函数输出的HTML代码不能控制元素的顺序,所以在开发之中不会使用此函数输出HTML代码。
在开发中往往使用console.log()来进行代码输出,来进行页面调试。
变量:
Js定义变量,是根据赋予的内容来决定变量类型。
例如,可以像下面那样声明并初始化数组:
var result = new Array();//声明数组:
result[0]=”hello”;
result[1]=100;
result=false;
PS:本操作没有严格之处,最大的好处是没有长度限制,动态数组。(当然也可以静态初始化,new数组时直接初始化)当然在开发中一般不会使用new关键字声明数组。实际在定义js变量的时候也可以不使用var进行定义,这样的是全局变量,当然一般并不使用。
函数:
function 函数名称(参数){//不需要返回值类型,如果需要返回,直接return,参数也可以不写var
}
PS:在学习java的时候,方法有几个形参,调用的时候实参个数必须相同,可是JavaScript没有这种限制,
如add(10)依旧调用函数add(x,y):
function add(x,y){
return x+y;
}
alert(add(10))//调用
所以为了用户的操作,JavaScript提供了一个功能,函数名称.arguments:表示取得函数的参数的内容,返回的是一个数组。可以使用length判断长度。
function add(x,y){
switch(add.arguments.length){
case 0:return 0;
case 1:return x;
case 2:return x+y;
}
alert(add(10))//调用
PS:但是在实际工作中,还是强烈建议语法严格,函数里面定义几个参数,调用时就传几个参数, 尽量不出现以上情形。(规范)
事件处理:
在页面上任何的操作都可能称为事件源,而对于每一个事件都可以进行自定义的处理方式。 例如,页面加载,鼠标移动等等都可以称它为事件源。所有的事件在JavaScript里面都是以”onXXX”的形式命名。
举例如下两个事件(这两个事件只能够在”<body>”元素里面进行处理):
页面加载事件: onload
页面的卸载事件:onunload
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo</title>
<script type="text/javascript">
function loadHandle(){
alert("页面加载");
}
function closeHandle(){
alert("再见");
}
</script>
</head>
<body onload="loadHandle();" onunload="closeHandle();">
</body>
</html>
发现浏览器打开页面时出现”页面加载”,关闭页面时显示”再见”
范例在表格中当鼠标移入新的一行时,改变当前行的颜色:
原理:JS是一个基于对象的编程语言,每一个HTML元素都是一个对象 ,也就是说每一个元素,例如”<tr>”、”<td>”都属于一个JS对象。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo</title>
<script type="text/javascript">
function changeColor(obj,color){
//修改当前行元素
obj.bgColor=color;//由外部决定颜色。
}
</script>
</head>
<body>
<table border="1" bgColor="red">
<tr onmousemove="changeColor(this,'white');"><td>demo1</td></tr>
<tr onmousemove="changeColor(this,'white');"><td>demo2</td></tr>
<tr onmousemove="changeColor(this,'white');"><td>demo3</td></tr>
</table>
</body>
</html>
总结:javascript取得的所有html元素都是对象。(基于对面编程语言)Java属于面向对象的编程语言,面向对象过程之中,需要由用户自己定义类,产生对象,但是JavaScript是一种基于对象的编程语言,即:所有的对象都已经由浏览器自动为用户提供好了,用户直接使用即可,最典型的对象:每一个HTML元素都是一个对象 。(如:<html><head><body>)所有HTML定义的时候要想轻松的取得指定元素,必须加上有ID属性,作为唯一标记 。
JavaScript事件之动态绑定事件(开发中使用最多)
但是需要注意,所有的事件除了采用以上“onXXX”的方式之外也可以动态设置,这种形式在开发之中是使用最多的。那么可以使用 addEventListener(事件类型,处理函数名称,触发时机) 进行动态设置。
PS:触发时机都会设置为false,表示在事件的触发过程进行处理。
范例:观察动态设置
之前这么写:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo</title>
<script type="text/javascript">
function handler(){
alert('hello');
}
</script>
</head>
<body onload="handler();">
</body>
</html>
动态绑定事件:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo</title>
<script type="text/javascript">
function handler(){
alert('hello');
}
//以下表示是在页面加载的时候进行加载事件的处理
window.onload=function(){//匿名函数
handler()
}
</script>
</head>
<body>
</body>
</html>
所有的动态设置的事件都可以在onload里面进行动态的配置。但是如果要配置,那么必须能够取得一个明确的元素对象。可以使用docuent.getElementById(元素Id)的操作方式取得元素对象。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo</title>
<script type="text/javascript">
function handler(){
alert("hello");
}
//以下表示是在页面加载的时候进行加载事件的处理
window.onload=function(){//匿名函数
var imgElement = document.getElementById("myimg");//取得mying元素的对象,每一个元素都是对象
imgElement.addEventListener("click", handler, false);
}
</script>
</head>
<body>
<!-- id是整个js的操作核心所在,必须存在 -->
<img id="myimg" src="my.jpg" height="50%">
</body>
</html>
这种动态设置操作事件的最大好处在于,HTML代码不会和JavaScript代码混合在一起。
PS:innerHTML方法:在此元素内增加指定内容,而且内容可以是HTML代码。
setTimeout方法练习:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<div id="info">hello</div>
<script type="text/javascript">
function setClock(){
var date = new Date();
var info = document.getElementById("info");
info.innerHTML="<h1>当前时间"+date+"</h1>";
setTimeout(setClock,1000); //每一秒更新一次
}
setClock();
</script>
</body>
</html>
实例:轮播图