1)js中的Array对象
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js中的Array对象</title>
<script type="text/javascript">
/**
* 1)在JavaScript中数组中可以存在各种类型的值
* 2)在javaScript中不会发生角标越界的现象
*/
//方式1:创建Array对象,动态方式
var arr=new Array(3);
alert(arr.length);
arr[0]="hello";
arr[1]=23;
arr[2]=false;
//当实际输入的值大于数组的长度时,依旧可以输出不会发生角标越界的现象
// arr[3]='a';
//也可以直接给数组中添加元素
//var arr=new Array("hello",10,false);
for(var x=0;x<arr.length;x++){
document.write(arr[x]+"<br />");
}
document.write("<hr />")
//方式2:直接赋值,静态方式:
var array=[10,true,"hello"];
document.write(array.length+"<br />");
for(var x=0;x<array.length;x++){
document.write(array[x]+"<br />");
}
//数组中方法:
/**
* join:将数组中的元素用一个符号进行拼接,返回新的一个字符串
*/
var a=["hello","world","java","javaSE"];
/*a=a.join("-");
document.write(a);*/
document.write("<hr />");
/**
* reverse:将数组中的元素进行反转
*/
document.write("反转前:");
for(var i=0;i<a.length;i++){
document.write(a[i]+" ");
}
document.write("<hr />")
a=a.reverse();
document.write("反转后:");
for(var i=0;i<a.length;i++){
document.write(a[i]+" ");
}
</script>
</head>
<body>
</body>
</html>
运行结果:
hello
23
false
3
10
true
hello
反转前:hello world java javaSE
反转后:javaSE java world hello
2)js的自定义对象
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js中的自定义对象</title>
<script type="text/javascript">
//方式1:有参的形式创建对象
function Person(name,age){
this.name=name;
this.age=age;
this.speak=function(){
alert("这是说话的功能...")
}
}
//创建Person对象
var person =new Person("迪丽热巴",25);
document.write(person.name+"<br />");
document.write(person.age+"<br />");
//调用speak方法
person.speak();
//方式2:无参的形式创建对象
function Student(){
}
//创建对象
var stu=new Student();
//追加属性和方法
stu.name="高雯";
stu.age=24;
stu.eat=function(){
alert("这是吃饭的功能...");
}
document.write(stu.name+"<br />");
document.write(stu.age+"<br />");
stu.eat();
//方式3:自定义Object对象
function Object(){
}
//创建对象
var obj=new Object();
//追加属性和方式
obj.name="张三";
obj.age=23;
obj.play=function(){
alert("这是玩的功能...");
}
document.write(obj.name+"<br />");
document.write(obj.age+"<br />");
obj.play();
//方式4:json的方式
/**
* json的格式:
* "属性名":值,
* "属性名":值,
* "方法名":function(){
* 方法内容
* }
*/
var p={
"name":"李四",
"age":22,
"shopping":function(){
alert("这是购物的功能...");
}
};
document.write(p.name+"<br />");
document.write(p.age+"<br />");
p.shopping();
</script>
</head>
<body>
</body>
</html>
运行结果:
迪丽热巴
25
高雯
24
张三
23
李四
22
3)有关自定义对象的练习
<!DOCTYPE html>
<html>
<head>
<!--
设计一个数组工具对象,例如ArrayUtil对象,该对象提供以下两个方法:
search(array,target): 传入指定的数组和指定的字符串,返回指定字符串所在的位置
max(array): 传入指定的数组,返回该数组中的最大值
-->
<meta charset="UTF-8">
<title>js的自定义练习</title>
<script src="Util.js"></script>
<script type="text/javascript">
//定义一个数组
var arr=[23,34,45,56,67];
//创建ArrayUtil对象
var util=new ArrayUtil();
//调用方法
document.write("该元素返回的索引值是:"+util.search(arr,56)+"<br />");
document.write("该数组中的最大值是:"+util.max(arr));
</script>
</head>
<body>
</body>
</html>
运行结果:
该元素返回的索引值是:3
该数组中的最大值是:67
4)js中的原型(prototype)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js中的原型</title>
<script type="text/javascript">
/**
* JavaScript中每一个内置对象都有一个prototype原型属性
* 原型属性的作用:
* 就是为了给内置对象追加方法使用的
* 原型属性是可以直接被内置对象调用然后追加方法
*/
Array.prototype.search=function (target){
//遍历数组
for(var i=0;i<this.length;i++){//this代表的是当前的Array对象
if(this[i]==target){
return i;
}
}
return -1;
}
Array.prototype.max=function(){
var max=this[0];
//遍历数组
for(var i=0;i<this.length;i++){
if(this[i]>max){
max=this[i];
}
}
return max;
}
//定义一个数组
var arr=[12,23,34,45,56];
var index=arr.search(34);
document.write("该元素返回的索引值是:"+index+"<br />");
var max=arr.max();
document.write("该数组中的最大值是:"+max);
</script>
</head>
<body>
</body>
</html>
运行结果:
该元素返回的索引值是:2
该数组中的最大值是:56
5)js中BOM编程的window对象
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>BOM编程中的window对象</title>
<script type="text/javascript">
/**
* BOM编程是基于浏览器对象的模型编程
* js将浏览器主要划分成以下几个部分:
* 1)窗口:window对象
* 2)地址栏对象:location对象
* 3)历史记录:history对象
* 4)屏幕手表:screen对象
*/
function testopen(){
window.open("多余的网页.html","_blank");
}
var IntervalId;
//定时器SetInterval
function testSetInterval(){
IntervalId=window.setInterval("testopen()",2000);
}
//清除和SetInterval相关的定时器
/**
* 这个方法括号里是输入一个任务Id
* 所以我们要在需要停掉的任务前定义一个id,将定时器任务赋值给id
* 然后再添加到清除定时器中就可以了
* 在执行的时候,建议先清除浏览器中的历史记录和cookie数据,不然有可能会无法执行
*/
function testClearInterval(){
window.clearInterval(IntervalId);
}
//定时器SetTimeOut
/**
* 这个定时器方法只执行一次
*/
var TimeOutId;
function testSetTimeOut(){
TimeOutId=window.setTimeout("testopen()",3000);
}
//清除SetTimeOut定时器的方法
/**
* 这个清除的方法和清除SetInterval定时器的方法时一样的
* 都是先定义一个任务Id,然后将任务赋值给ID
* 最后调用清除方法即可
*/
function testClearTimeOut(){
window.clearTimeout(TimeOutId);
}
/**
* 和弹框有关的方法
* alert方法
* confirm方法
*/
function testAlert(){
alert("今天可能要下雨...")
}
function testConfirm(){
var flag=window.confirm("您确定要删除吗?一旦删除,将无法回复");
if(flag){
alert("删除数据成功!")
}else{
alert("删除数据失败!")
}
}
//prompt:提示对话框,带有一条消息和一个输入框
function testPrompt(){
var flag=window.prompt("请输入您的账户密码:");
if(flag){
alert("密码输入正确!");
}else{
alert("密码输入错误!");
}
}
</script>
</head>
<body>
<input type="button" value="open" οnclick="testopen()"/>
<input type="button" value="SetInterval" οnclick="testSetInterval()" />
<input type="button" value="Clearinterval" οnclick="testClearInterval()" />
<input type="button" value="SetTimeOut" οnclick="testSetTimeOut()"/>
<input type="button" value="clearTimeOut" οnclick="testClearTimeOut()" />
<input type="button" value="alert" οnclick="testAlert()"/>
<input type="button" value="confirm" οnclick="testConfirm()"/>
<input type="button" value="prompt" οnclick="testPrompt()" />
</body>
</html>
6)js中BOM编程中的location对象
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>BOM中的location对象</title>
<script type="text/javascript">
function testHref(){
//alert(window.location.href);
//或者我们可以直接给后面添加网页地址
window.location.href="多余的网页.html";
}
function testReload(){
window.location.reload();
}
//function testSettimeout(){
window.setTimeout("testReload()",1000);
//}
</script>
</head>
<body>
<input type="button" value="href" οnclick="testHref()"/>
<input type="button" value="刷新" οnclick="testSetTimeOut()" />
</body>
</html>
7)js中BOM编程之history对象
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>BOM编程中的history对象</title>
<script type="text/javascript">
/**
* history对象的三个重要方法:
* forward:跳转到前一个URL地址
* back:跳转到后一个URL地址
* go:1和-1也可以代表forward和back
*/
function testforward(){
//window.history.forward();
window.history.go(1);
}
</script>
</head>
<body>
<a href="多余的网页.html">跳转</a>
<input type="button" value="前进" οnclick="testforward()"/>
</body>
</html>
8)js中BOM编程中的screen对象
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>BOM编程中的screen对象</title>
<script type="text/javascript">
/**
* screen对象主要有四个方法进行对象
* availHeight:屏幕的高度,其中不包括窗口的任务栏
* height:屏幕的高度,包括窗口的任务栏高度
* availWidth:屏幕的宽度
* width:屏幕的宽度 值不变
*/
document.write("availHeight:"+window.screen.availHeight+"<br />");
document.write("height:"+window.screen.height+"<br />");
document.write("availWidth:"+window.screen.availWidth+"<br />");
document.write("width:"+window.screen.width);
</script>
</head>
<body>
</body>
</html>
运行结果:
availHeight:728
height:768
availWidth:1366
width:1366
9)js中的事件编程之点击事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js中的点击事件</title>
<script type="text/javascript">
function testOnClick(){
alert("试试就试试!")
}function testOndblclick(){
alert("真的要点击两次呢")
}
</script>
</head>
<body>
<input type="button" value="点我试试" οnclick="testOnClick()" />
<input type="button" value="要点我两次哦" οndblclick="testOndblclick()"/>
</body>
</html>
10)js中的事件编程之焦点事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>事件编程之焦点事件</title>
<script type="text/javascript">
/**
* 获取焦点
*/
function testonfocus(){
/**
* 获取焦点首先我们应该在标签中设置一个id
* 因为id是唯一的
* 我们可以通过id获取它的标签,从而去连接它的value值
*/
var username=document.getElementById("username");
username.value="";
}
/**
* 失去焦点
*/
function testonblur(){
//获取用户在文本中输入的值
var user = document.getElementById("username").value;
//获取span标签的id
var sp = document.getElementById("sp");
if(user=="scir"){
//如果验证成功,向span标签中添加内容
sp.innerHTML="校验成功,格式正确".fontcolor("#00ff00");
}else{
sp.innerHTML="格式错误请重新输入".fontcolor("red");
}
}
</script>
</head>
<body>
<input type="text" id="username" value="请输入6到12个字母或数字"
size="25" οnfοcus="testonfocus()" οnblur="testonblur()"/><span id="sp"></span>
</body>
</html>
11)js中的选项卡练习
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>选项卡的练习</title>
<script type="text/javascript">
function testchange(){
//获取省份的id
var address=document.getElementById("address").value;
//获取城市的id
var city=document.getElementById("city");
//给city标签中先添加个空值,后面的数据就不会出现叠加的现象了
city.innerHTML="";
if(address=="广东"){
var arr=["广州","深圳","珠海"];
for(var i=0;i<arr.length;i++){
//双引号里只能有单引号,单引号里可以有双引号
city.innerHTML += "<option value='"+arr[i]+"'>"+arr[i]+"</option>" ;
}
}
if(address=="陕西"){
var arr=["西安","延安","宝鸡"];
for(var i=0;i<arr.length;i++){
city.innerHTML+="<option value='"+arr[i]+"'>"+arr[i]+"</option>";
}
}
if(address=="山西"){
var arr=["大同","太原","运城"];
for(var i=0;i<arr.length;i++){
city.innerHTML+="<option value='"+arr[i]+"'>"+arr[i]+"</option>";
}
}
}
</script>
</head>
<body>
请选择您的省份:
<select οnchange="testchange()" id="address">
<option value="请选择">请选择</option>
<option value="广东">广东</option>
<option value="陕西">陕西</option>
<option value="山西">山西</option>
</select>
城市:
<select id="city">
</select>
</body>
</html>
12)js中的鼠标事件和加载事件
<!DOCTYPE html>
<html>
<head>
<!--
鼠标事件:
onmouseover:鼠标经过
onmouseout:鼠标离开事件
加载事件:
onload:一般用在body中,当body中的内容加载完成后就会触发这个事件
-->
<meta charset="UTF-8">
<title>js中的鼠标事件</title>
<style type="text/css">
#mouse{
width: 100px;
height: 100px;
border: solid;
}
</style>
<script type="text/javascript">
function testmouseover(){
alert("鼠标经过了...");
}
function testmouseout(){
alert("鼠标离开了...")
}
function testonload(){
alert("网页中的body部分已经加载完成了...")
}
</script>
</head>
<body οnlοad="testonload()">
<!--
先做一个div块
-->
<div id="mouse" οnmοuseοver="testmouseover()" οnmοuseοut="testmouseout()">
</div>
</body>
</html>