1.关于JavaScript的变量的定义
var 变量名= 值;
注意:
1)在js中,var可以用来定义任何数据类型的变量,var 可以省略,但是不建议省略
2)var是可以重复定义变量的(后面的值会覆盖掉前面的值),是因为JavaScript弱类型语言,而Java是一种强类型语言
3)如果定义一个变量,但是变量没有值,那么值(undefind),没有定义的变量不能直接使用!
查看一个变量的数据类型,使用一个函数:typeOf(变量名)
Javascript数据类型:
在javascript,数据类型变量名的值来决定的!
1)不管是整数还是小数都是number类型!
2)不管是字符还是字符串,都是string类型 String:在js中表示字符串对象
3)boolean类型
function 函数名称(形式参数列表)//{
//语句
}
函数的调用
函数名称(实际参数列表) ;
函数中的注意事项:
1)函数的形式参数不能有var关键字定义,否则报错
2)在js中函数是可以有return语句的,直接return,但是没有返回值
3)在js中,函数是不存在的重载概念,后面定义的函数回覆盖掉前面定义的函数
4)当实际参数的数量小于形式参数的数量,就会出现一个值肯定是NaN;如果实际参数大于形式参数,那么最终会计算前面的值,然后将后面的数据丢弃掉!
5)在js的每一个函数中,里面存在默认的数组:arguments,它的作用就是将实际参数从左到右依次赋值给形式参数(从左到右)
href属性:可以修改页面的href属性来实现页面跳转 更改的href属性:--- URL(统一资源定位符)
URI
方法:
定时刷新:reload()
forward:装入历史列表中下一个url
back:装入历史列表中前一个url
go(正整数或者负整数)
1)和点击相关的事件
单击点击事件: onclick
双击点击事件: obdbclick
2)和焦点相关的事件
获取焦点事件:onfocus
失去焦点事件:onblur
3)和选项卡发生变化
和鼠标相关的事件:
onmouseover:鼠标经过的事件
onmouseout:鼠标移出的事件
和页面加载相关的事件:onload
一般用在body
当body中的内容加载完毕之后就会触发这个事件
var 变量名= 值;
注意:
1)在js中,var可以用来定义任何数据类型的变量,var 可以省略,但是不建议省略
2)var是可以重复定义变量的(后面的值会覆盖掉前面的值),是因为JavaScript弱类型语言,而Java是一种强类型语言
3)如果定义一个变量,但是变量没有值,那么值(undefind),没有定义的变量不能直接使用!
查看一个变量的数据类型,使用一个函数:typeOf(变量名)
Javascript数据类型:
在javascript,数据类型变量名的值来决定的!
1)不管是整数还是小数都是number类型!
2)不管是字符还是字符串,都是string类型 String:在js中表示字符串对象
3)boolean类型
4)object :对象类型
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
var a=23;
document.write("a的数据类型为"+typeof(a)+"<br/>");
a="凉凉";
alert("a现在的数据类型为"+typeof(a));
var b="34";
document.write("b的数据类型为"+typeof(b)+"<br />");
b=parseFloat(b);
document.write("b现在的数据类型为"+typeof(b));
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
with(document){
/*
* if语句:
* if(表达式)
* 语句;
* 表达式的值:
* number:1表示true,0表示false
* string:只要字符或字符串不是空字符就表示true
* boolean:true,false
* object:对象为null表示false
*/
var a=1;
if(a)
write("1表示true"+"<br/>");
if("ff")
write("字符串");
if("")
alert("空字符");
if(null)
alert("对象为null");
write("<hr />");
/*
* switch语句
* case后可以为常量,也可以是变量,也可以为表达式
*/
var a=1;
var b=2;
switch(a){
case b:
write("a=2");
break;
case 1:
write("a=1");
break;
}
write("<br/>");
switch(true){
case a>2:
write("a>2"+"<br/>");
break;
case a<2:
write("a<2");
}
write("<hr />");
}
</script>
</head>
<body>
</body>
</html>
2.for--in 语句:
for(var 变量名 in 数组/对象)
如果是对象,变量为该对象的属性(成员变量)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
with(document){
var arr=[12,34,54,645];
for(var i in arr){
write(arr[i]+"<br/>");
}
write("<hr/>")
function Person(name,age){
this.name=name;
this.age=age;
}
var p=new Person("凉凉",22);
for(var a in p)
write(p[a]);//该对象的属性
}
</script>
</head>
<body>
</body>
</html>
function 函数名称(形式参数列表)//{
//语句
}
函数的调用
函数名称(实际参数列表) ;
函数中的注意事项:
1)函数的形式参数不能有var关键字定义,否则报错
2)在js中函数是可以有return语句的,直接return,但是没有返回值
3)在js中,函数是不存在的重载概念,后面定义的函数回覆盖掉前面定义的函数
4)当实际参数的数量小于形式参数的数量,就会出现一个值肯定是NaN;如果实际参数大于形式参数,那么最终会计算前面的值,然后将后面的数据丢弃掉!
5)在js的每一个函数中,里面存在默认的数组:arguments,它的作用就是将实际参数从左到右依次赋值给形式参数(从左到右)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function add(a,b,c){
var result=a+b+c;
return result;
}
var a=add(12,22,44);
document.write("a的值为"+a+"<br/>");
function add(a,b,c){
for(var i=0;i<arguments.length;i++)
document.write(arguments[i]+" ,");
var result=a+b+c;
document.write("result:"+result+"<br/>");
}
add(12,34,56,78);
add(12,34,56);
add(12,34);
</script>
</head>
<body>
</body>
</html>网页查询月份的天数
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function check(){
var month=document.getElementById("month").value;
month=parseInt(month);
switch(month){
case 1:
case 3:
case 5:
case 7:
case 8:
case 10:
case 12:
alert("该月份有31天");
break;
case 2:
alert("该月份有28天");
break;
case 4:
case 6:
case 9:
case 11:
alert("该月有30天")
break;
default:
alert("没有该月份");
break;
}
}
</script>
</head>
<body>
<br>请输入要查询的月份</br>
<input type="text" id="month"/>
<input type="button" value="查询" οnclick="check()"/>
</body>
</html>
4.string的创建:
charAt()返回指定索引位置处的字符
index()返回指定字符第一次出现位置处的索引
substr(a,len)从指定位置处截取字符串,并指定长度
substring(a,b)从a处开始截取,b处结束,
fontcolor()给字符指定颜色
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
var str1=new String("aaa");
var str2=new String("aaa");
document.write(str1==str2);
document.write(str1.valueOf()==str2.valueOf());
document.write("<br />")
var str3="bbb";
var str4="bbb";
document.write(str3==str4);
document.write(str3.valueOf()==str4.valueOf());
document.write("<hr />");
var str="asdfdghj";
document.write(str.charAt(2)+"<br />");
document.write(str.indexOf("d")+"<br />");
document.write(str.lastIndexOf("d")+"<br />");
document.write(str.substr(3,3)+"<br />");
document.write(str.substring(3,6)+"<br />");
document.write(str.fontcolor("#00f00")+"<br />");
</script>
</head>
<body>
</body>
</html>
5.Math:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
var a=3.14;
document.write(Math.ceil(a)+"<br />"); //向上取整
document.write(Math.floor(a)+"<br/>"); //向下取整
document.write(Math.round(a)+"<br />"); //四舍五入
document.write(Math.random()+"<br />"); //获取随机数
</script>
</head>
<body>
</body>
</html>
网页时钟
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function date(){
var d=new Date();
var date=d.getFullYear()+"-"+(d.getMonth()+1)+"-"+d.getDate()+"-"+"星期"+d.getDay()
+" "+d.getHours()+":"+d.getMinutes()+":"+d.getSeconds();
var dd=document.getElementById("dateTip");
dd.innerHTML=date;
}
window.setInterval("date()",1000);
</script>
</head>
<body>
当前系统时间为:<span id="dateTip"></span>
</body>
</html>Array数组:
Array对象的创建方式
注意事项:
1)在js中,数组可以存储任意类型的元素!
2)在js中,不存在数组角标越界一说,数组中的元素数量是可以不断的增加..不会出现异常!
方法:
join():将数组以一个符号进行拼接,返回一个字符串
reverse():将该数组的所有元素进行反转
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
var arr=new Array();//制定长度为0
arr[0]=1;
arr[1]=34;
arr[2]="aaa";
arr[3]=2.3;
for(var i in arr)
document.write(arr[i]+" ");
document.write("<hr />");
var arr1=new Array(1,2,4,5);
for(var i in arr1)
document.write(arr1[i]+" ");
document.write("<hr />");
var arr2=[2,3.13,"re","aaa"];
for(var i in arr2)
document.write(arr2[i]+" ");
document.write("<hr />");
var str=arr.join(":");
document.write(str+"<br />");
arr=arr.reverse();
for(var i in arr)
document.write(arr[i]+" ");
</script>
</head>
<body>
</body>
</html>原型(prototype)
作用:就是给js中的内置对象追加方法使用的
1)每一个js内置对象都有一个原型属性(prototype)
2)如果往原型对象中追加一个方法,那么这个方法会自动追加到内置对象中
3)原型属性是可以直接被内置对象调用然后追加方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
//利用原型属性给Array添加方法
Array.prototype.search=function(value){
for(var i in arr){
if(arr[i]==value)
return i;
}
return -1;
}
Array.prototype.max=function(){
var max=arr[0];
for(var i in arr){
if(max<arr[i])
max=arr[i];
}
return max;
}
var arr=[1,2,3,4,5,67];
var index=arr.search(4);
document.write("4在该数组中的索引为"+index+"<br />");
document.write("该数组中的最大值为"+arr.max());
</script>
</head>
<body>
</body>
</html>
自定义对象:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
//自定义属性
function Person(name,age){
this.name=name;
this.age=age;
this.method=function(){
document.write("这是个方法");
}
}
var p=new Person("C罗",33);
document.write(p.name+"<br />");
p.method();
document.write("<hr />");
//添加属性
function Person2(){
}
var p2=new Person2();
p2.name="C罗";
p2.age=33;
p2.play=function(){
document.write("我是goat世界最佳");
}
p2.play();
document.write("<hr />");
//不创建类,直接给Object对象添加属性
var p3=new Object();
p3.name="C罗";
p3.age=33;
p3.play=function(){
document.write("我是goat世界最佳");
}
p3.play();
document.write("<hr />");
//json解析
var p4={
"name":"C罗",
"age":33,
"method":function(){
alert("你最好全力以赴,不然我不会给你机会")
}
};
p4.method();
</script>
</head>
<body>
</body>
</html>window对象:它代表浏览器的一个窗口对象
注意:
由于window对象中的方法频繁调用,所以为了简化书写方式,有时候window可以去掉
里面涉及的方法:
open("打开资源文件url","以什么什么方式打开(_blank)/_self","指定新打开的窗口和高度")
和定时器相关的方法:
setInterval("任务",时间毫秒值); 没经过多少毫秒后重复执行这个任务
clearInterval():取消和setInterval相关的任务
window.clearInterval(iIntervalID) :这个要插入一个Id
setTimeout("任务",时间毫秒值); 经过多少毫秒后只执行一次
clearTimeout():取消和setTimeout相关的超时事件
和弹框相关的方法
window.alert("提示框") ; //window可以省略
window.confirm("消息对话框");有确认框,取消框
prompt:提示对话框，其中带有一条消息和一个输入框0
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function testopen(){
window.open("index.html","_blank");
}
var taskId;
function testSetInterval(){
taskId=window.setInterval("testopen()",3000);
}
function testClearInterval(){
window.clearInterval(taskId);
}
var timeId;
function testSetTimeout(){
timeId=window.setTimeout("testopen()",5000);
}
function testClearTimeout(){
window.clearTimeout(timeId);
}
function testConfirm(){
var flag=window.confirm("你确定要删除数据吗");
if(flag)
alert("删除成功");
else
alert("你已取消删除");
}
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="confirm" οnclick="testConfirm()" />
<input type="button" value="prompt" οnclick="testPrompt()" />
</body>
</html>
href属性:可以修改页面的href属性来实现页面跳转 更改的href属性:--- URL(统一资源定位符)
URI
方法:
定时刷新:reload()
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function testHref(){
window.location.href="index.html";
}
function testReload(){
window.location.reload();
}
</script>
</head>
<body>
<input type="button" value="跳转" οnclick="testHref()" />
<input type="button" value="刷新" οnclick="testReload()" />
</body>
</html>
forward:装入历史列表中下一个url
back:装入历史列表中前一个url
go(正整数或者负整数)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function hrefgo(){
window.history.forward();
window.history.go(1);
}
</script>
</head>
<body>
<a href="history2.html">超链接</a><br />
<input type="button" value="前进" onclik="hrefgo()"/>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function hrefgo1(){
// window.history.back();
window.history.go(-1);
}
</script>
</head>
<body>
所处页面 <br />
<input type="button" value="后退" οnclick="hrefgo1()"/>
</body>
</html>
1)和点击相关的事件
单击点击事件: onclick
双击点击事件: obdbclick
2)和焦点相关的事件
获取焦点事件:onfocus
失去焦点事件:onblur
3)和选项卡发生变化
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function testonclick(){
alert("单击即可")
}
function testondbclick(){
alert("双击即可");
}
function testFocus(){
var num=document.getElementById("num");
num.value="";
}
function testBlur(){
var num=document.getElementById("num").value;
var t=document.getElementById("t");
if(num.valueOf()=="123456"){
t.innerText="密码输入正确";
}
else{
t.innerText="密码输入有误";
}
}
</script>
</head>
<body>
<input type="button" value="单击" οnclick="testonclick()"/><br />
<input type="button" value="双击" οndblclick="testondbclick()"/><br />
<input type="text" id="num" value="请输入6-16位的数字" οnfοcus="testFocus()" οnblur="testBlur()" /><br />
<span id="t"></span>
</body>
</html>
和鼠标相关的事件:
onmouseover:鼠标经过的事件
onmouseout:鼠标移出的事件
和页面加载相关的事件:onload
一般用在body
当body中的内容加载完毕之后就会触发这个事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div1{
width: 100px;
height: 200px;
border: 1px solid #0000FF;
}
</style>
<script type="text/javascript">
//获取籍贯的方法
function testchange(){
//获取籍贯的内容
var jihuan=document.getElementById("jiguan").value;
//获取城市
var chengshi=document.getElementById("chengshi");
//给对应的籍贯添加城市
chengshi.innerHTML="";
if(jihuan.valueOf()=="陕西"){
var arr=["西安","咸阳","杨凌"];
for(var i in arr){
chengshi.innerHTML+="<option value="+arr[i]+">"+arr[i]+"</option>";
}
}
if(jihuan=="四川"){
var arr=["重庆","成都","汶川"];
for(var i in arr){
chengshi.innerHTML+="<option value="+arr[i]+">"+arr[i]+"</option>";
}
}
if(jihuan=="福建"){
var arr=["厦门","厦大","临海"];
for(var i in arr){
chengshi.innerHTML+="<option value="+arr[i]+">"+arr[i]+"</option>";
}
}
}
//与body页面有关的方法
function testLoad(){
alert("body页面已经加载完毕了");
}
//与鼠标移动有关的方法
function testMouseOver(){
alert("鼠标经过");
}
function testMouseOut(){
alert("鼠标移出");
}
</script>
</head>
<body οnlοad="testLoad()">
请选择:
<select οnchange="testchange()" id="jiguan">
<option value="籍贯">籍贯</option>
<option value="陕西">陕西</option>
<option value="四川">四川</option>
<option value="福建">福建</option>
</select>
城市:
<select id="chengshi">
<!--<option value="+arr[i]+">"+arr[i]+"</option>-->
</select>
<hr />
<div id="div1" οnmοuseοver="testMouseOver()" οnmοuseοut="testMouseOut()"></div>
</body>
</html>
738
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
