javascript
也是一种开发语言,虽然名字中有“java“,但是和java语言是没有关系的,java主要是做服务器端程序的开发。
javascript主要是做客户端页面中脚本语言的开发,所以javascript是一种脚本语言,
脚本:可以直接嵌入到浏览器页面运行的程序。
javascript语言的特点:
1.解释执行
2.弱语言
3.基于对象。
4.事件驱动
5.简单性。
6.不同浏览器的支持不同
如何去写javascript代码:
javascript代码的位置:
1.直接写到页面中
2.写到标签元素的事件属性里面
3.写到一个外部的文件里面(.js结尾的文件)
如果是直接写到页面中,必须写到一个标签里面:
<script language="javascript">
//在这里写js代码
</script>
javacript的运行
浏览器可以直接运行js代码(解释执行),但是不同浏览器中运行相同的js代码可能效果是不一样的,甚至可能会报错
js代码是嵌入在页面中,所用使用浏览器去运行页面就可以执行到页面中的js代码。
使用javascript可以做什么事情:
1.对客户端的数据进行计算。
2.动态的改变页面中标签元素的属性
3.动态的创建或者删除页面中的标签元素
4.获取页面中的数据(输入框的值,鼠标的当前坐标等等)
5.验证用户所填写的表单中的数据的合法性。
6.在Ajax中使用js去解析服务器端传到页面的文本或者xml文档
注:DHTML的概念很多时候指的就是使用html+css+javascript在页面中实现的一些动态效果。
javascript中的注释:
//单行注释
/*
这是多行注释
*/
/**
也是注释
*/
js中的三种弹框方式:alert confirm prompt
//alert属于提示框,或者是警告框
//confim 是确认框
//prompt 输入对话框
这三个方法都是window对象的方法,只有window对象的方法可以省略window对象。
三种弹框都用一个共同的特点:当浏览器运行一个弹框代码的时候,用户如果不点击
弹框中的确定或者取消按钮的话,浏览器就会卡在弹框处,下面的页面代码就不会被执行。
alert弹出一个警告框/提示框,用户点击确定按钮之后就可以继续访问
confirm 弹出一个确认框,用户可以点击确定或者取消,这个confirm方法会相应的返回true/false
prompt弹出一个可以让用户输入的窗口,用户可以输入后点击确定,这个方法会把用户的输入内容返回。
同时还可以在输入框中设置一个默认值。
prompt("您的名字:","wukaifeng");
js中的变量声明:
任何类型的变量都可以用var关键字声明
var a="";
var b=10;
var c=10.9;
var d=new Date();
var e=true;
js中的undefined 和null:
//弹出null
var age=null;
alert(age);
var age;
alert(age);//弹出undefined
js的标识符的命名规范:
1,不能以数字开头(字母,数字,下划线,$符号)
2,区分大小写
3,不能使用js的关键字和保留着
js中一些内置对象的作用:
<script language ="javascript">
var s ="hello world";
//获得字符串的长度
document.write(s.length+"<br>");
//从下标为3的位置开始,截取4个字符,包括下标为3的位置的字符
document.write(s.substr(3,4)+"<br>");
//从下标为6的位置开始截取,截取到下标为8的位置,但是不包括下标为8的位置。
document.write(s.substring(6,8)+"<br>");
//trim()去掉字符串两边的空格,但是这个方法有可能浏览器不支持
document.write(s.trim().length+"<br>");
//字符串转换为大写
document.write(s.toUpperCase()+"<br>");
//字符串转换为小写
document.write(s.toLowerCase()+"<br>");
//分割字符串返回一个数组,
document.write(s.split(" ")+"<br>");
document.write(s.split(" ").length+"<br>");
document.write(s.split(" ")[0]+"<br>");
document.writeln("<h1>日期对象</h1>");
var date = new Date();
document.writeln(date+"<br>");
//获得当前年份减去1900
document.writeln(date.getYear()+"<br>");
//获得当前年份
document.writeln(date.getFullYear()+"<br>");
//获得月份加1
document.writeln(date.getMonth()+"<br>");
//获得当前是一个月中的哪一号
document.writeln(date.getDate()+"<br>");
//获得星期几
document.writeln(date.getDay()+"<br>");
//获得24小时制中的小时
document.writeln(date.getHours()+"<br>");
//获得时间中的 分
document.writeln(date.getMinutes()+"<br>");
//获得时间中的 秒
document.writeln(date.getSeconds()+"<br>");
//获得时间中的 毫秒
document.writeln(date.getMilliseconds()+"<br>");
document.writeln("<h1>对象Math对象</h1>");
//获得常量圆周率
document.writeln(Math.PI+"<br>");
//获得常量e
document.writeln(Math.E+"<br>");
//获得随机数【0,1)
document.writeln(Math.random()+"<br>");
//获得随机数【23,36】
document.writeln(parseInt((Math.random()*14+23))+"<br>");
//获得一个较小的数字//不一定是两个参数
document.writeln(Math.min(1,10)+"<br>");
//获得一个较大的数字
document.writeln(Math.max(1,10)+"<br>");
document.writeln("<h1>数组对象</h1>");
//创建数组的时候,可以指定数组的长度,也可以不指定
/*
js中数组的特点:
1,数组的长度是可变的
2,数组里面放的数据类型也可以不同
3,数组长度是和你使用的数组最大的下标相关的
*/
// var a= new Array(5);
var a= new Array();
a[0]="tom0";
a[1]="tom1";
a[2]="tom2";
a[5]="tom5";
document.write(a.length+"<br>");
for(var i=0;i<a.length;i++){
document.writeln(a[i]);
}
//输出的结果为:tom0 tom1 tom2 undefined undefined tom5
document.writeln("<br>");
//for ~in 循环
//这里的这个变量i每次拿到的是数组下标,而且是已经存在值的位置的下标,对于那些值是undefined
//的位置下标是不会拿的。
for(var i in a){
document.writeln(a[i]);
}
//输出的结果为:tom0 tom1 tom2 tom5
</script>
5.
其他常见的对象:
window
window.location
window.history
window.document
//新建一个浏览器窗口打开url
window.open("url");
//在当前这个浏览器窗口中打开url
window.location.href="url";
<input type="button" value="跳转"
οnclick="javascript:window.open('http://www.baidu.com')"/>
<input type="button" value="前进"
οnclick="javascript:window.history.forward()"/>
<input type="button" value="后退"
οnclick="javascript:window.history.back()"/>
在使用浏览器进行一系列的页面访问的时候,浏览器会记录这个访问的历史记录的。
//访问历史记录的下一个页面:
window.history.forward()
window.history.go(1);
//访问历史记录的上一个页面:
window.history.back()
window.history.go(-1);
//访问历史记录中的前n个页面或者后面n个页面。
window.history.go(n);
window.history.go(-n);
//使用这个在js中可以拿到html页面中的标签元素对象(js有对象的概念)
//document代表的是整个html文档
window.document
//通过id属性拿这个元素对象(默认id属性的值是唯一的)
//如果html页面有两个id相同的元素,那么拿到的是页面最上面的,也是最先声明的元素对象。
var div1=window.document.getElementById("div1");
//window.alert(div1);
//通过name属性来拿元素对象
//拿到的是一个元素对象的集合
//可以循环变量集合,或者直接通过集合下标来拿某一个元素对象。
var v= document.getElementsByName("mydiv1");
//alert("v="+v);
//alert("v.length="+v.length);
//alert("v.[0]="+v[0]);
//通过标签的名字拿,拿到的也是页面中所有的某一个相同标签的元素对象的集合。
var vv=document.getElementsByTagName("div");
alert("vv="+vv);
alert("vv.length="+vv.length);
alert("vv.[0]="+vv[0]);
//通过class属性来拿
//拿到页面中所有class属性值相同的元素对象的集合。
var a=document.getElementsByClassName("cla");
alert("a="+a);
js中拿到某一个元素对象后可以做什么事情
1,给元素中添加文本值(如果可以添加的话)
2,修改元素中的属性值。
3,添加或者删除某些元素。
<body>
<input id="name" type="text" name="name" value="tom"/><br>
<div id="mydiv">this is div</div>
</body>
<script language="javascript">
var temp = document.getElementById("name");
temp.value="lisi";
alert(temp.value);
var temp2 = document.getElementById("mydiv");
temp2.innerHTML="<font color='red'>HELLO WORD</font>";
alert(temp2.innerHTML);
</script>
JS中可以获得任何一个元素对象中的文本值
1.让用户输入的标签元素
例如 文本输入框、密码框、文本域等等
首先拿到这个元素对象
var myInput = document.getElementById("myInput");
获得元素中的文本值:
var value = myInput.value;
设置元素中的文本值:
myInput.value = "zhangsan";
2.直接写在开始标签和结束标签中间的元素
例如 div span font td p 等等
<div>hello</div>
首先拿到这个元素对象
var myDiv = document.getElementById("myDiv");
获得元素中的文本值:
var value = myDiv.innerHTML;
设置元素中的文本值:
myDiv.innerHTML = "zhangsan";
JS中判断一个变量是否是一个数字
//这个全局方法判断一个标量【是否】【不是】一个数字
isNaN() 返回值 true|false
例如:
var a = "123abc";
alert(isNaN(a)); //输出true
var b = "123";
alert(isNaN(b));//输出false
JS中让一个标签对象获得焦点:
例如:
document.getElementById("inputA").focus();
JS中的全局函数eval
//使用全局函数eval计算出一个字符串类型的运算式子的结果.
var c = "1+4*5";
alert(eval(c));//输出21
JS中的两种定时调用的方法
window对象的俩个方法:
setInterval
setTimeout
例如:
每隔1000毫秒调用一样showTime方法.
方法返回一个id值,表示这个定时调用任务的id值,将来可以使用一个方法通过这个id值把之前建立的定时调用的任务删除掉.
var id = setInterval("showTime()",1000);
清除某个定时调用的任务
window.clearInterval(id);
5000毫秒以后会调用showTime()方法,而且只是调用这一次.
setTimeout("showTime()",5000);
也是一种开发语言,虽然名字中有“java“,但是和java语言是没有关系的,java主要是做服务器端程序的开发。
javascript主要是做客户端页面中脚本语言的开发,所以javascript是一种脚本语言,
脚本:可以直接嵌入到浏览器页面运行的程序。
javascript语言的特点:
1.解释执行
2.弱语言
3.基于对象。
4.事件驱动
5.简单性。
6.不同浏览器的支持不同
如何去写javascript代码:
javascript代码的位置:
1.直接写到页面中
2.写到标签元素的事件属性里面
3.写到一个外部的文件里面(.js结尾的文件)
如果是直接写到页面中,必须写到一个标签里面:
<script language="javascript">
//在这里写js代码
</script>
javacript的运行
浏览器可以直接运行js代码(解释执行),但是不同浏览器中运行相同的js代码可能效果是不一样的,甚至可能会报错
js代码是嵌入在页面中,所用使用浏览器去运行页面就可以执行到页面中的js代码。
使用javascript可以做什么事情:
1.对客户端的数据进行计算。
2.动态的改变页面中标签元素的属性
3.动态的创建或者删除页面中的标签元素
4.获取页面中的数据(输入框的值,鼠标的当前坐标等等)
5.验证用户所填写的表单中的数据的合法性。
6.在Ajax中使用js去解析服务器端传到页面的文本或者xml文档
注:DHTML的概念很多时候指的就是使用html+css+javascript在页面中实现的一些动态效果。
javascript中的注释:
//单行注释
/*
这是多行注释
*/
/**
也是注释
*/
js中的三种弹框方式:alert confirm prompt
//alert属于提示框,或者是警告框
//confim 是确认框
//prompt 输入对话框
这三个方法都是window对象的方法,只有window对象的方法可以省略window对象。
三种弹框都用一个共同的特点:当浏览器运行一个弹框代码的时候,用户如果不点击
弹框中的确定或者取消按钮的话,浏览器就会卡在弹框处,下面的页面代码就不会被执行。
alert弹出一个警告框/提示框,用户点击确定按钮之后就可以继续访问
confirm 弹出一个确认框,用户可以点击确定或者取消,这个confirm方法会相应的返回true/false
prompt弹出一个可以让用户输入的窗口,用户可以输入后点击确定,这个方法会把用户的输入内容返回。
同时还可以在输入框中设置一个默认值。
prompt("您的名字:","wukaifeng");
js中的变量声明:
任何类型的变量都可以用var关键字声明
var a="";
var b=10;
var c=10.9;
var d=new Date();
var e=true;
js中的undefined 和null:
//弹出null
var age=null;
alert(age);
var age;
alert(age);//弹出undefined
js的标识符的命名规范:
1,不能以数字开头(字母,数字,下划线,$符号)
2,区分大小写
3,不能使用js的关键字和保留着
js中一些内置对象的作用:
<script language ="javascript">
var s ="hello world";
//获得字符串的长度
document.write(s.length+"<br>");
//从下标为3的位置开始,截取4个字符,包括下标为3的位置的字符
document.write(s.substr(3,4)+"<br>");
//从下标为6的位置开始截取,截取到下标为8的位置,但是不包括下标为8的位置。
document.write(s.substring(6,8)+"<br>");
//trim()去掉字符串两边的空格,但是这个方法有可能浏览器不支持
document.write(s.trim().length+"<br>");
//字符串转换为大写
document.write(s.toUpperCase()+"<br>");
//字符串转换为小写
document.write(s.toLowerCase()+"<br>");
//分割字符串返回一个数组,
document.write(s.split(" ")+"<br>");
document.write(s.split(" ").length+"<br>");
document.write(s.split(" ")[0]+"<br>");
document.writeln("<h1>日期对象</h1>");
var date = new Date();
document.writeln(date+"<br>");
//获得当前年份减去1900
document.writeln(date.getYear()+"<br>");
//获得当前年份
document.writeln(date.getFullYear()+"<br>");
//获得月份加1
document.writeln(date.getMonth()+"<br>");
//获得当前是一个月中的哪一号
document.writeln(date.getDate()+"<br>");
//获得星期几
document.writeln(date.getDay()+"<br>");
//获得24小时制中的小时
document.writeln(date.getHours()+"<br>");
//获得时间中的 分
document.writeln(date.getMinutes()+"<br>");
//获得时间中的 秒
document.writeln(date.getSeconds()+"<br>");
//获得时间中的 毫秒
document.writeln(date.getMilliseconds()+"<br>");
document.writeln("<h1>对象Math对象</h1>");
//获得常量圆周率
document.writeln(Math.PI+"<br>");
//获得常量e
document.writeln(Math.E+"<br>");
//获得随机数【0,1)
document.writeln(Math.random()+"<br>");
//获得随机数【23,36】
document.writeln(parseInt((Math.random()*14+23))+"<br>");
//获得一个较小的数字//不一定是两个参数
document.writeln(Math.min(1,10)+"<br>");
//获得一个较大的数字
document.writeln(Math.max(1,10)+"<br>");
document.writeln("<h1>数组对象</h1>");
//创建数组的时候,可以指定数组的长度,也可以不指定
/*
js中数组的特点:
1,数组的长度是可变的
2,数组里面放的数据类型也可以不同
3,数组长度是和你使用的数组最大的下标相关的
*/
// var a= new Array(5);
var a= new Array();
a[0]="tom0";
a[1]="tom1";
a[2]="tom2";
a[5]="tom5";
document.write(a.length+"<br>");
for(var i=0;i<a.length;i++){
document.writeln(a[i]);
}
//输出的结果为:tom0 tom1 tom2 undefined undefined tom5
document.writeln("<br>");
//for ~in 循环
//这里的这个变量i每次拿到的是数组下标,而且是已经存在值的位置的下标,对于那些值是undefined
//的位置下标是不会拿的。
for(var i in a){
document.writeln(a[i]);
}
//输出的结果为:tom0 tom1 tom2 tom5
</script>
5.
其他常见的对象:
window
window.location
window.history
window.document
//新建一个浏览器窗口打开url
window.open("url");
//在当前这个浏览器窗口中打开url
window.location.href="url";
<input type="button" value="跳转"
οnclick="javascript:window.open('http://www.baidu.com')"/>
<input type="button" value="前进"
οnclick="javascript:window.history.forward()"/>
<input type="button" value="后退"
οnclick="javascript:window.history.back()"/>
在使用浏览器进行一系列的页面访问的时候,浏览器会记录这个访问的历史记录的。
//访问历史记录的下一个页面:
window.history.forward()
window.history.go(1);
//访问历史记录的上一个页面:
window.history.back()
window.history.go(-1);
//访问历史记录中的前n个页面或者后面n个页面。
window.history.go(n);
window.history.go(-n);
//使用这个在js中可以拿到html页面中的标签元素对象(js有对象的概念)
//document代表的是整个html文档
window.document
//通过id属性拿这个元素对象(默认id属性的值是唯一的)
//如果html页面有两个id相同的元素,那么拿到的是页面最上面的,也是最先声明的元素对象。
var div1=window.document.getElementById("div1");
//window.alert(div1);
//通过name属性来拿元素对象
//拿到的是一个元素对象的集合
//可以循环变量集合,或者直接通过集合下标来拿某一个元素对象。
var v= document.getElementsByName("mydiv1");
//alert("v="+v);
//alert("v.length="+v.length);
//alert("v.[0]="+v[0]);
//通过标签的名字拿,拿到的也是页面中所有的某一个相同标签的元素对象的集合。
var vv=document.getElementsByTagName("div");
alert("vv="+vv);
alert("vv.length="+vv.length);
alert("vv.[0]="+vv[0]);
//通过class属性来拿
//拿到页面中所有class属性值相同的元素对象的集合。
var a=document.getElementsByClassName("cla");
alert("a="+a);
js中拿到某一个元素对象后可以做什么事情
1,给元素中添加文本值(如果可以添加的话)
2,修改元素中的属性值。
3,添加或者删除某些元素。
<body>
<input id="name" type="text" name="name" value="tom"/><br>
<div id="mydiv">this is div</div>
</body>
<script language="javascript">
var temp = document.getElementById("name");
temp.value="lisi";
alert(temp.value);
var temp2 = document.getElementById("mydiv");
temp2.innerHTML="<font color='red'>HELLO WORD</font>";
alert(temp2.innerHTML);
</script>
JS中可以获得任何一个元素对象中的文本值
1.让用户输入的标签元素
例如 文本输入框、密码框、文本域等等
首先拿到这个元素对象
var myInput = document.getElementById("myInput");
获得元素中的文本值:
var value = myInput.value;
设置元素中的文本值:
myInput.value = "zhangsan";
2.直接写在开始标签和结束标签中间的元素
例如 div span font td p 等等
<div>hello</div>
首先拿到这个元素对象
var myDiv = document.getElementById("myDiv");
获得元素中的文本值:
var value = myDiv.innerHTML;
设置元素中的文本值:
myDiv.innerHTML = "zhangsan";
JS中判断一个变量是否是一个数字
//这个全局方法判断一个标量【是否】【不是】一个数字
isNaN() 返回值 true|false
例如:
var a = "123abc";
alert(isNaN(a)); //输出true
var b = "123";
alert(isNaN(b));//输出false
JS中让一个标签对象获得焦点:
例如:
document.getElementById("inputA").focus();
JS中的全局函数eval
//使用全局函数eval计算出一个字符串类型的运算式子的结果.
var c = "1+4*5";
alert(eval(c));//输出21
JS中的两种定时调用的方法
window对象的俩个方法:
setInterval
setTimeout
例如:
每隔1000毫秒调用一样showTime方法.
方法返回一个id值,表示这个定时调用任务的id值,将来可以使用一个方法通过这个id值把之前建立的定时调用的任务删除掉.
var id = setInterval("showTime()",1000);
清除某个定时调用的任务
window.clearInterval(id);
5000毫秒以后会调用showTime()方法,而且只是调用这一次.
setTimeout("showTime()",5000);