Javascript学习(4)

谁践踏了优雅 2024-04-18 23:00 54阅读 0赞

JavaScript数组

JavaScript常用对象和方法

JavaScript的超链接及事件的阻断机制

JS中window对象的使用

<html>  
<head>  
<meta charset="UTF-8">  
<title>js的数组学习</title>  
  
<script type="text/javascript">  
//1、数组的声明

//声明1：声明空数组  
function createArr1()\{  
var arr=new Array();  
alert(arr);  
\}  
//声明2：声明指定长度的数组  
function createArr2()\{  
var arr2=new Array(5);  
alert(arr2.length);  
\}

//声明3：声明带有指定初始元素的数组  
function createArr3()\{  
var arr3=new Array(1,2,3,5);  
alert(arr3\[0\]);  
\}  
//声明4：  
function createArr4()\{  
var arr=\[1,2,3,4\];  
alert(arr);  
\}  
/\*----------------------------------------------------------------------------------------\*/  
//2、数组的使用  
/\* (1)、js的数组在使用的时候可以不用指定长度，也就数组的长度不是固定的；  
\* (2)、js的数组可以存储任意类型的数据。  
\* (3)、数组的角标赋值去取值：  
\* 数组名\[角标\]=值  
\* 数组名\[角标\]  
\* (4)、数组的在赋值的时候，角标不是连续的，不会报错，会自动使用空补齐  
\* 在取值的时候，使用一个没有内容的角标，打印undefined;  
\* \*/  
function useArr()\{  
//声明数组  
var arr=\[\];  
arr\[0\]=1;  
arr\[1\]="abc";  
arr\[2\]=new Date();  
arr\[3\]=true;  
arr\[10\]="a";  
alert(arr\[20\]);  
\}  
</script>  
</head>  
<body>  
<h3>js的数组学习</h3>  
<hr />  
<ol>  
<li>var 数组名=new Array()，声明一个空数组</li>  
<li>var 数组名=new Array(length),声明指定长度的数组</li>  
<li>var 数组名=new Array(元素1,元素2...),声明指定初始元素的数组</li>  
<li>var 数组名=\[元素1,元素2,...\],简写的方式声明一个数组</li>  
</ol>  
<hr />  
<input type="button" name="" id="" value="数组声明1" οnclick="createArr1();" />  
<input type="button" name="" id="" value="数组声明2" οnclick="createArr2();" />  
<input type="button" name="" id="" value="数组声明3" οnclick="createArr3();" />  
<input type="button" name="" id="" value="数组声明4" οnclick="createArr4();" />  
<hr />  
数组的使用：<br />  
<input type="button" name="" id="" value="数组的使用" οnclick="useArr();" />  
</body>  
</html>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dzbF9jbnh3_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dzbF9jbnh3_size_16_color_FFFFFF_t_70 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dzbF9jbnh3_size_16_color_FFFFFF_t_70 2][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dzbF9jbnh3_size_16_color_FFFFFF_t_70 3][]

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="UTF-8">  
<title>js常用对象跟方法</title>  
<script type="text/javascript">  
//String对象的学习  
function testSubStr()\{  
var a = "我是太阿秋";  
alert(a.substr(0,2));  
\}  
function testSubString()\{  
var a = "我是太爱就";  
alert(a.substring(0,3));  
\}  
//Split将字符串分割开，存放在数组里面  
function testSplit()\{  
var a = "我-是-海-换-及";  
var b = a.split("-");  
alert(b);  
\}  
//Date对象的学习  
function testDate()\{  
var a = new Date();  
alert(a);  
\}  
//Math对象的学习  
function testCeil()\{  
var a = 12.33;  
alert(Math.ceil(a));//ceil:向上取整  
\}  
function testRandon()\{  
//获取\[0,1)之间的随机数  
var a = Math.random();  
alert(a);  
\}  
//Global对象的学习  
function testEval()\{  
//获取字符串  
var a = "var b = 123";  
//将字符串转换为可识别的js的代码  
eval(a);  
alert(b);  
\}  
</script>  
</head>  
<body>  
<h3>String对象的学习</h3>  
<hr />  
<input type="button" id="" name="" value="SubStr" οnclick="testSubStr()" />  
<input type="button" id="" name="" value="SubString" οnclick="testSubString()" />  
<input type="button" id="" name="" value="Split" οnclick="testSplit()" />  
<h3>Date对象的学习</h3>  
<hr />  
<input type="button" id="" name="" value="Date" οnclick="testEval()"/>  
<h3>Math对象的学习</h3>  
<hr />  
<input type="button" id="" name="" value="Ceil" οnclick="testCeil()" />  
<input type="button" id="" name="" value="Random" οnclick="testRandon()" />  
<h3>Global对象的学习</h3>  
<hr />  
<input type="button" id="" name="" value="Eval" οnclick="testEval()" />  
</body>  
</html>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dzbF9jbnh3_size_16_color_FFFFFF_t_70 4][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dzbF9jbnh3_size_16_color_FFFFFF_t_70 5][]

JavaScript的超链接及事件的阻断机制

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="UTF-8">  
<title>js超链接调用函数和事件的阻断</title>  
</head>  
<script type="text/javascript">  
function test()\{  
alert("我被调用了");  
return false;  
\}  
</script>  
<body>  
<h3>js超链接的调用</h3>  
<hr />  
<a href="http://www.baidu.com" target="\_blank">百度一下</a>  
  
<a href="javascript:test()">调用一下1</a>  
  
<a href="http://www.baidu.com" target="\_blank" οnclick="test()">调用一下2</a>  
  
<a href="http://www.baidu.com" target="\_blank" οnclick="return test()">阻断一下</a>  
</body>  
</html>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dzbF9jbnh3_size_16_color_FFFFFF_t_70 6][]

<!DOCTYPE html>  
<html>  
<head>  
<meta charset="UTF-8">  
<title>event对象的学习</title>  
  
<script type="text/javascript">  
//获取鼠标坐标  
function getMouseCode(eve)\{  
//获取event对象  
var eve = eve || window.event;  
//为了解决浏览器差异的问题  
var x = eve.pageX ||eve.x;  
var y = eve.pageY ||eve.y;  
alert(x+":"+y);  
\}  
//获取键盘值  
function getKeyCode(eve)\{  
//获取event对象  
var eve = eve || window.event;  
var keyCode = eve.getKey;  
alert(keyCode);  
\}  
</script>  
<style type="text/css">  
\#div01\{  
border: solid 1px;  
width: 300px;  
height: 300px;  
background-color: \#FFE4C4;  
\}  
</style>  
</head>  
<body>  
<h3>event对象的学习</h3>  
<hr />  
<div id="div01" οnmοusemοve="getMouseCode(event)"></div>  
<input type="text" id="" name="" value="" οnkeydοwn="getKeyCode(event)"/>  
</body>  
</html>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dzbF9jbnh3_size_16_color_FFFFFF_t_70 7][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dzbF9jbnh3_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/e6a9f92a37eb46dfa826c4ef360f749f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dzbF9jbnh3_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/d52d66b9bcce4f6e92e1b1080354fadc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dzbF9jbnh3_size_16_color_FFFFFF_t_70 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/58924835989e4de396ef141db32b5c77.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dzbF9jbnh3_size_16_color_FFFFFF_t_70 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/d6c0e641fa5d4630bcb318bfe34b1c44.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dzbF9jbnh3_size_16_color_FFFFFF_t_70 4]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/f04732fd832b4decbf5dbb47adba4cb6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dzbF9jbnh3_size_16_color_FFFFFF_t_70 5]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/4f5a9301696546ddb96e2d79c0e8161a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dzbF9jbnh3_size_16_color_FFFFFF_t_70 6]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/f3a1aa77f5c4453282c4c0f1dcf2615f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dzbF9jbnh3_size_16_color_FFFFFF_t_70 7]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/92ccb1545a7443159cb64b68a7a44d6a.png