Javascript学习(4)

最新推荐文章于 2024-05-06 15:03:18 发布

wsl_cnxw

最新推荐文章于 2024-05-06 15:03:18 发布

阅读量205

点赞数

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

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

版权

Javascript 专栏收录该内容

5 篇文章 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>

<!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>

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>

<!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>