JavaScript学习（2）

最新推荐文章于 2024-04-30 08:58:14 发布

wsl_cnxw

最新推荐文章于 2024-04-30 08:58:14 发布

阅读量232

点赞数

分类专栏： Javascript 文章标签： javaScript

本文链接：https://blog.csdn.net/wsl_cnxw/article/details/100785960

版权

Javascript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

鼠标悬停和页面加载事件举例。

javaScript对象

对象的初始化

数组的定义，数组的属性及方法

关联数组，又称映射（Map）、字典（Dictionary）是一个抽象的数据结构，它包含着类似于（键，值）的有序对。

Math对象

JavaScript 操作HTML中的form,操作form里的元素

简单的表单Form验证

javaScipt的提示框

鼠标悬停，弹出alert框。

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
</head>
<body>
<a href= "htps://www.baidu.com" onMouseOver="alert('gameover!!');" > Mouch over here </a>
</body>
</html>

鼠标离开标签<a>区域，弹出alert框。
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
</head>
<body>
<a href= "htps://www.baidu.com" onMouseOut="alert('gameover!!');" > Mouch over here </a>
</body>
</html>

页面加载，一运行这个页面就显示已经加载
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
</head>
<body onLoad="alert('该页面已经加载成功！');">

</body>
</html>

JavaScript中的对象概念，直接来看看代码举例。

对象一般有属性或者方法，通过对象名.属性或者对象名.方法来调用本身的属性或者方法。

上面代码中stringA是一个字符串对象，字符串一般有length这个属性，这个属性是求字符串长度的。还有我们一直在写的document.write(); 其中document就是一个对象，指的是一个页面。write（）是对象document的方法。

如何创建一个对象：

创建一个自己的对象，如何调用对象的属性。我们创建一个person的对象。

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script type ="text/javascript">
   // 定义一个对象
   function person(name, age){
       this.name = name;
       this.age = age;
   }

</script>
</head>
<body>
<script type ="text/javascript">
   var anthony = new person("Anthony Liu", 18);
   document.write(anthony.name + " ");
   document.write(anthony.age);
</script>
</body>
</html>

对象的初始化。今天的对象初始化更像是Python中的字典。

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script type ="text/javascript">
   // 定义一个对象
   anthony = {name:"Anthony Liu", age:24};
   sunny = {name:"Sunny", age:18};
</script>
</head>
<body>
<script type ="text/javascript">
   document.write(anthony.name + " love " + sunny.name + " because she is " + sunny.age);
</script>
</body>
</html>

介绍JavaScript中的数组，主要是数组的创建数组的读取数据。

总结：

1. 通过Array创建数组，用小括号表示，里面每个元素用逗号隔开

2. 数组是通过索引来找元素的，例如上面people[0]代表“张三”

3. 数组越界，例如people[5]，前端页面显示undefined

数组的length属性和数组几个常用方法。

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
</head>
<body>

<script type ="text/javascript">
   var ar1 = new Array("张三","李四","王二");
   var ar2 = new Array("Lucy","Lily","Tom");

   // 数组常用属性length
   document.write(ar1.length+ "<br />");

   // 数组方法concat() 两个数组拼接
   var name1 = ar1.concat(ar2); // 把ar2拼接到ar1的末尾
   var name2 = ar2.concat(ar1);
   document.write(name1[5]+"<br />");
   document.write(name2[5]+"<br />");

   // 数组方法join(), a.join("-") 用括号内的符号将数组a中的所有元素连起来。如var a=[3,4,5];  返回的是3-4-5
   var stringA = ar2.join(",");
   document.write(stringA);

</script>

</body>
</html>

a.length 属性，返回数组长度。注意属性后面不带()，方法后面有()

追加元素：

a.push(n) 将n插入在最后，返回数组长度。可以添加多个数字

a.unshift(n) 将n插入数组开头，返回该数组，可以插入多个

删除元素：

a.pop() 移除数组最后一个元素，返回该元素
a.shift() 移除数组第一个元素，返回该元素

a.reverse() 反转数组。返回反转后的数组，原数组的值也会反转
a.concat(a1) 连接数组，将a1接在a后面，可以连接多个数组
a.slice(n,m) 返回n~m-1的子数组，m可不填

a.splice(start,n,item1,item2..) 从start开始删去n位，并在该位置插入后面的元素。后面的元素可选，返回值为被删掉的n位
a.join("-") 用括号内的符号将数组a中的所有元素连起来。如var a=[3,4,5]; 返回的是字符串String：3-4-5
a.toString()
a.valueOf() 以上两个都返回用逗号连接数组元素的字符串
a.sort() 进行升序排序。这个排序是基于Unicode的
a.sort(sortfunction) 使用数字排序的时候需要填入参数
function sortfunction(a,b) 这个为升序排列，return b-a则为降序排列
{ return a-b;}

接下来提供一些函数

1、输出一个数组

function $(str)
{   return document.write(str)
}
function showarray(a0) //输出数组
{
   for(var i=0;i<a0.length;i++)
   {
       document.write(a0[i]+" ");
   }
   document.write("</br>");
}

2、猜猜这时候arr3的值到底是什么呢？

var arr2 = [34,23,12,23];

var arr3 = arr2.concat(arr2.reverse(),arr2.reverse().push(3,4));
分析一下：我们把arr2转了一次，然后又转了一次，于是arr2还是原来的顺序。然后又往里面加了两个数字，arr2变成了34,23,12,23,3,4

arr3就是两个这样的arr2连起来。不过还没完，还有push()返回的数组长度。这时候arr2的长度是6，所以最后又加了一个6。

===使用循环语句给数组添加元素。有时候，我们需要用户的输入，拿到这个输入的字符，保存到数组里去，这个需要for语句和prompt()方法。

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
</head>
<body>

<script type ="text/javascript">

var names = new Array(3);
for(i=0;i<3;i++){

names[i] = prompt("Enter some name here:", "");
}

document.write("All the element in Array are: "+names[0] + names[1]+ names[2]);

</script>

</body>
</html>

上面例子会循环执行三次prompt()方法，刚刚是三个元素，这个和数组Arrar(3)大小相符。这里强调是数组都是索引从0开始，但是长度是最大的索引下标加1.

关联数组（Associative Array），又称映射（Map）、字典（Dictionary）是一个抽象的数据结构，它包含着类似于（键，值）的有序对。这里介绍如何根据键去寻找值。

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
</head>
<body>

<script type ="text/javascript">

var anthony = new Array();
anthony["color"] = "blue";
anthony["food"] = "duck";

document.write("anthony favoutire color is " +anthony["color"] +"<br/>");
document.write("anthony favoutire food is " +anthony["food"]);

</script>

</body>
</html>

在JavaScript中有很多封装好的对象，我们可以直接用，不需要去写具体实现代码。本文介绍Math对象，下面例子介绍了Math对象中的PI和求平方根。

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
</head>
<body>

<script type ="text/javascript">

var n = prompt("Enter a number here:", "");
var answer = Math.sqrt(n);
alert( n + "的平方根是 "+answer + "<br/>");

var x = Math.PI;
document.write(x);

</script>

</body>
</html>

JavaScript操作HTML中的form元素，例如一个登陆框。

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
</head>
<body>
<form>
   Username: <input type="text" />
   Password: <input type="password" />
   <input type ="submit" value="提交" />

</form>
<script type="text/javascript">
   var x = document.forms[0].length;
   document.write(x);

</script>

</body>
</html>

上面的forms[0]代表上面的form，这里我们只有一个form，length表示控件的数量，当前有用户名输入框和密码输入框和提交按钮，三个控件。

操作form，是根据索引来找form的，索引从0开始。找form 里的元素，也是根据索引开始。大致的步骤是，先找到该form控件，然后根据索引去找该form下的元素。

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
</head>
<body>
<form>
   Username: <input type="text" name="username" />
   Password: <input type="password" name="password"/>
   <input type ="submit" value="提交" />

</form>
<script type="text/javascript">
   var x = document.forms[0].elements[0].name;
   document.write(x);
</script>

</body>
</html>

简单的form验证，就是点击了form里面某一个元素，然后判断一下，是否点击。

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
</head>
<script type="text/javascript">
   function validator(){
       if(document.anthonyForm.thebox.checked)
           alert("had checked");
   }
</script>
<body>
<form name="anthonyForm">
   <input type="checkbox" name="thebox" />
   <input type="button" value="press me" onClick="validator()">
</form>
<script type="text/javascript">
</script>
</body>
</html>