JavaScript基础总结三部曲之一
2016-06-14 15:16
435 查看
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是一个基于对象的编程语言，[b]每一个HTML元素都是一个对象 ，也就是说每一个元素，例如”<tr>”、”<td>”[/b]都属于一个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>
实例：轮播图
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<span id="info">
<img id="img" src="images/a.jpg" height="250px" width="250px">
</span>
<script type="text/javascript">
var imgName = new Array("a.jpg","b.jpg","c.jpg")
var foot = 0;//操作的脚标
function lunbo(){
var img = document.getElementById("img");
img.src="images/"+imgName[foot++];
if(foot>=imgName.length){
foot=0;
}
setTimeout(lunbo, 1000);//每一秒更新一次
}
lunbo();
</script>
</body>
</html>
另外，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是一个基于对象的编程语言，[b]每一个HTML元素都是一个对象 ，也就是说每一个元素，例如”<tr>”、”<td>”[/b]都属于一个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>
实例：轮播图
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
<span id="info">
<img id="img" src="images/a.jpg" height="250px" width="250px">
</span>
<script type="text/javascript">
var imgName = new Array("a.jpg","b.jpg","c.jpg")
var foot = 0;//操作的脚标
function lunbo(){
var img = document.getElementById("img");
img.src="images/"+imgName[foot++];
if(foot>=imgName.length){
foot=0;
}
setTimeout(lunbo, 1000);//每一秒更新一次
}
lunbo();
</script>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 巧方法 JavaScript获取超链接的绝对URL地址
- 使用js获取地址栏参数的方法推荐(超级简单)
- 使用javascriptcore实现oc与js的交互
- javascript浅谈闭包
- 返回函数的JavaScript函数
- CANVAS实现图片模糊（处理库StackBlur.js）
- Best Practices for Spies, Stubs and Mocks in Sinon.js
- JS签名插件JSignature使用
- javascript面向对象编程
- js数组的五种迭代方法及两种归并方法(推荐)
- XSS调用外部JS
- 图解Javascript原型链
- Web程序员必备的7个JavaScript函数
- 解决JSP路径问题的方法（jsp文件开头path, basePath作用）
- Javascript中的迭代、归并方法详解
- JavaScript接口的实现三种方式(推荐)
- jsonp实现跨域访问
- JavaScript 自定义函数库
- 使用JavaScript创建新样式表和新样式规则
- 博客园js