JavaScript学习（2）

矫情吗；* 2024-04-18 22:42 68阅读 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、输出一个数组

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表示控件的数量，当前有用户名输入框和密码输入框和提交按钮，三个控件。

![20190913120855712.png][]

操作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>

![20190913121152691.png][]

简单的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>

运行后，先点击这个checkbox,然后点击按钮，就可以出alert弹框。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dzbF9jbnh3_size_16_color_FFFFFF_t_70][]

![20190913121243148.png][]

[20190913120855712.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/2cc9c083d8074582ada11c7c542014e7.png
[20190913121152691.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/ba48e5364b134cd0b59a1c34e7def5df.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dzbF9jbnh3_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/ac7d5f95fb514409a89d1f8e8e22aa0f.png
[20190913121243148.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/ac26cf27cb7d41a9844a69880a4ed9f7.png