JavaScript走马观花记(一)

最新推荐文章于 2024-08-09 21:30:00 发布

标叔

最新推荐文章于 2024-08-09 21:30:00 发布

阅读量725

点赞数

文章标签： javascript html 文档 function xml prototype

本文链接：https://blog.csdn.net/youshini/article/details/6494637

版权

如题走马观花！

1.变量
有两种定义方法
1)在为变量的第一次赋值时定义     如： name="姓名";
2)使用关键字var定义变量             如： var name=”姓名"; (推荐使用)
   命名规则：
        1）第一个字母必须是字母、下划线、和美元符号。
        2）其他的字母可以是下划线、和美元符号或数字字符。
2.原始类型
   有5种：Undefined 、Null、Boolean、Number和String。（可以使用typeof运算符来获得一个变量的类型）
   如：

Code:

var sValue="字符串";
alert(typeof sValue); //输出string

3.类型转换

4.类和对象
同Java语法一样，使用new关键字来创建对象。如创建一个数组对象：

Code:

var array1=new Array();
array1[0]="v1";
array1[1]="v2";

if类的构造犯法没有参数，也可以将括号省略。

Code:

var array2=new Array;

1)建立一个对象工厂函数来建立Student对象，代码如下：

Code:

function createStudent(id,name,sex){
//创建对象
var oStu=new Object;
//定义属性
oStu.id=id;
oStu.name=name;
oStu.sex=sex;
//定义方法
oStu.display=function(){
alert(this.name+"begin to study");
}
//返回一个对象。
return oStu;
}
//====调用=======
var oStu1=createStudent("34","杨龙",18);
oStu1.display();

2）构造方法（类似工厂方法）

Code:

function display(){ //类似于全局函数
alert(this.name+"begin to study js");
}
function Stu(id,name,sex){
this.id=id;
this.name=name;
this.sex=sex;
this.display=display;
}
var stu2=new Stu("19", "nothing",19);
stu2.display();

3）原型方法

Code:

//建立一个空的构造方法
function Stu(){
}
//使用prototype为Stu添加属性
Stu.prototype.id="44";
Stu.prototype.name="biao";
Stu.prototype.sex="girl";
Stu.prototype.display=function(){
alert=(this.name+"begin to study js");
}
//使用原型的好处就是可以为已经存在的类添加新的成员。如
Stu.prototype.lenB=function(){
return this.replace(/[^/x0-/xf]/g,"##").length;
}

===**********JavaScript高级技术**********===
1.DOM技术概述
   DOM是为了方便处理层次型文档(如XML、HTML)的一种技术。DOM还提供了一套API，使开发人员可以用面向对象的方式来处理这些文档。对于XML文档来说，有专门处理XML文档的XML DOM，但是下面所说的DOM值得是HTML DOM。
     DOM主要的功能是获得HTML教程语言中的各个元素(如div、form)等，从而可以很容易地获得这些元素的信息，或动态向这些元素中添加新的元素。
     操作DOM的对象实际上也需要使用Javascript，也就是说调用DOM API也要编写JavaScript代码。
     在JavaScript中描述DOM的对象是document，其实document不仅是HTML DOM，它也是XML DOM。
    如果要直接操作HTML文档，可以用documentElement属性。代码如：
var oHtml=document.documentElement;//获得html对象

实例：

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JavaScript Test01</title>
<script type="text/javascript">
function showHead(){
var oHtml=document.documentElement;//得到html对象
var oHead=oHtml.firstChild;//得到Head对象
alert(oHead.outerHTML);
alert(oHead.innerHTML);
}
//显示body的标签内容
function showBody(){
var oHtml=document.documentElement;//得到html对象
var oBody=oHtml.childNodes[1];//得到Head对象
alert(oBody.outerHTML);
alert(oBody.innerHTML);
}
</script>
</head>
<body>
<input type="button" οnclick="showHead()" value="显示head标签"/>
<input type="button" οnclick="showBody()" value="显示body标签"/>
</body>
</html>

2.获得html元素的3种方法
在DOM中有3种方法可以获得当前html文档中的任意一个html元素，实际上也就是html document的3个方法：
   getElementById：id属性值是唯一的
   getElementByName：name的属性值不唯一。for(var i=0;i<otests.length;i++)遍历
   getElementByTagName：获得HTML元素的范围最大

实例：图像自动切换

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JavaScript getDom 2</title>
<script type="text/javascript">
setInterval("loadImage()",1000);//启动定时器 3000毫秒
var images=['01.jpg','02.jpg','03.jpg','04.jpg','05.jpg'];//指定图像文件名
var i=0; //全局变量i 从第一个图像文件开始显示
function loadImage(){
i++;
if(i==5) i=0;
var oImage=document.getElementById('image');//得到Img标签
var oLabel=document.getElementById('info');//得到Label标签
oImage.src='./images/'+images[i]; //为img标签的属性赋值
oLabel.innerText=images[i]; //显示当前的图像文件名插入第一张图片名。
}
</script>
</head>
<body>
当前图像名：<label id="info"></label><p></p>
<img src="./images/01.jpg" id="image" width="320" height="240"/>
<script type="text/javascript">
var oLabel=document.getElementById('info');
//在初始化时显示第一个图像文件
oLabel.innerText=images[i];
</script>
</body>
</html>