一、 JavaScript概述
Javascript是基于对象和事件驱动的脚本语言,主要应用在客户端。
特点:
a) 交互性(信息的动态交互)
b) 安全性(不可以直接访问本地硬盘)
c) 跨平台性(只要是可以解析js的浏览器都可以执行,和平台无关)
1.JavaScript与java不同:
l Netscape公司开发的一种脚本语言,并且可在所有主要的浏览器中运行
• IE、Firefox、Chorme、Opera
l JavaScript是基于对象的,java是面向对象
l JavaScript只需解析就可以执行,而java需要先编译成字节码文件,再执行。
l JavaScript是一种弱类型语言,java是强类型语言。
2.JavaScript语言组成:
l 一个完整 JavaScript实现由以下3个部分组成
• 核心(ECMAScript)
• 文档对象模型(DOM)
• 浏览器对象模型(BOM)
3.JavaScript与html的结合方式:
l HTML的 <script>标签用于把 JavaScript插入 HTML页面当中
l 编写JavaScript两种方式:内部JS和外部JS
l 内部JS程序,在HTML源码中
<script type="text/javascript">
alert(1);
</script>
l 外部JS程序,在HTML中引入单独的JS程序
<script src="1.js"></script>
1.js内容
alert(2);
在引用外部JS的script标签间不能编写JavaScript代码
script标签可以放在任意的位置。
4.JavaScript的数据类型:
l JavaScript和Java一样存在两种数据类型
• 原始值(存储在栈Stack中简单数据)
• 引用值(存储在堆heap中对象)
l 5种原始数据类型
• Undefined、Null、Boolean、Number和 String
• JavaScript中字符串是原始数据类型
l 通过typeof运算符,查看变量类型
• 所有引用类型都是object
l 通过instanceof运算符解决typeof对象类型判断问题
l 区分 undefined和 null
• 变量定义了未初始化/访问对象不存在属性 --- undefined
• 访问的对象不存在 --- null
5.JavaScript的语法种类:
l 关键字:被赋予了特殊含义的单词。
l 标示符:用于标识数据和表达式的符号。(变量、函数名)
l 注释:注解说明解释程序。
l 变量:标识内存中一片空间,用于存储数据,数据是可以变化的。
l 运算符:可以让数据进行运算的符号。
l 语句:对程序的运行流程进行控制的表达式。
l 函数:用于对功能代码进行封装,便于提高复用性。
l 数组:对多数据进行存储,便于操作。
l 对象:封装体,既可以封装数据,又可以封装函数。
7.JavaScript变量:
l Javascript是采用一个关键字var来声明变量的。
l Javascript的变量非严谨 var x=4; var和;都可以不书写。
l Javascript是弱类型的语言,定义的变量什么类型的数据都可以赋值。
l 字符串类型中使用’ ’和” ”号都是String类型的数据。
8. JavaScript运算符:
l Javascript中小数和整数都是数字类型,所以除法中没有整数,会出现小数。
l 字符串与数字相加,是字符串链接,如果相减,字符串直接转换成数字再相减。
l Boolean类型可以进行运算,false就是0或者null,非0非空是true,默认用1显示。
l ++ --等和java中一样。
l 代码展示:
var n = 3;
var m;
m = n++;
alert("m="+m+","+"n="+n);
9.JavaScript语句:
l 判断语句中,条件如果直接写=号,那就是赋值操作。
l Switch语句和java中的一样。
l For循环也和java中的一样,但是要注意定义变量时使用var,不要写成java的int。
l 练习99乘法表
l 代码展示:
document.write("<table>");
for(var x=1;x<=9;x++){
document.write("<tr>");
for(var y=1;y<=x;y++){
document.write("<th>"+y+"*"+x+"="+x*y+"</th>");
}
document.write("</tr>");
}
document.write("</table>");
10.JavaScript数组:
l 数组有两种定义方式
l Var arr = [1,2,4];定义一个数组,包含三个元素。
l Var arr = new Array(5);定义一个数组,数组的长度是5
l Var arr = new Array(1,2,4);定义数组,包含三个元素
l 数组有属性length
l 数组的长度是可变的
l 数组可以存放不同的数据类型的数据
11.JavaScript函数:
l 函数定义的格式,关键字function。
l 函数需要调用才能执行。
l 定义函数参数列表时,不必使用var关键字。
l Javascript中不存在重载形式。
l 在每个javascript的函数中,都存在一个数组arguments,用于存储参数列表。
l 如果调用方法时,忘记了写(),则会把函数对象的引用传给接收的变量,而打印出函数体的内容。
l 代码展示:
function getSum(){
return 100;
}
//var sum = getSum();
var sum = getSum;
alert("sum = "+sum);
打印的结果是getSum函数的整体内容。
解释:getSum是该函数的引用,var sum = getSum就等于把引用赋值给sum了,那sum打印出来的结果就是函数对象的toString方法。
12. JavaScript动态函数和匿名函数:
l 动态函数是通过js的内置对象Function,通过new Function(参数1,参数2)来创建动态函数。
l 匿名函数就是没有名称的函数,通常是函数的简写形式。
l 代码展示:
创建动态函数:
var add = new Function("x,y","var sum;sum=x*y;return sum;");
var sum = add(4,5);
alert("sum = "+sum);
动态函数可以通过参数的方式进行动态的创建函数,不需要修改函数体,只需修改参数就可以改变函数。
l
13. JavaScript全局变量和局部变量:
l 全局变量:在<script>标签中间定义的变量,在该标签内乃至整个页面都有效。
l 局部变量:在函数体内定义的变量。
l 代码展示:
方便理解局部和局部变量:
var x = 4;
function show(x){
x = 8;
}
show(x);
alert("x = "+x);
结果是4
二、 javascript中常用的对象
1. String对象
l String对象的方法分成两类,一种是关于与html有关的方法。
l 另一种和java中的String相似的方法。
l 自己定义去掉两边空格的函数。
l 代码展示:
function mytrim(str){
var start = 0;
var end = str.length-1;
while(start <= end && str.charAt(start) == " "){
start++;
}
while(start <= end && str.charAt(end) == " "){
end--;
}
return str.substring(start,end+1);
}
var str = " sc e ";
alert("-"+str+"-");
alert("-"+mytrim(str)+"-");
2. Array对象
l 数组两种定义方法:
l Var arr = [3,4,5];
l Var arr = new Array(5);
l 一些常用方法:
l join()把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
l pop()删除并返回数组的最后一个元素
l push()向数组的末尾添加一个或更多元素,并返回新的长度。
l sort()对数组的元素进行排序
l 代码展示:
自定义join的方法:
function myjoin(str,type){
var result = "";
for(var x=0;x<str.length;x++){
if(x != str.length-1){
result += arr[x]+type;
}else{
result += arr[x];
}
}
return result;
}
1. Date对象:
l 创建Date对象:var date = new Date();
l 常用方法:
l getDate()从 Date 对象返回一个月中的某一天 (1 ~ 31)
l getDay()从 Date 对象返回一周中的某一天 (0 ~ 6)
l getMonth()从 Date 对象返回月份 (0 ~ 11)
l getFullYear()从 Date 对象以四位数字返回年份
l getTime()返回 1970 年 1月 1日至今的毫秒数
l parse()返回1970年1月1日午夜到指定日期(字符串)的毫秒数
l toLocaleString()根据本地时间格式,把 Date 对象转换为字符串。
l toLocaleDateString()根据本地时间格式,把 Date 对象的日期部分转换为字符串
2. Math对象:
l Math对象中的方法全部是静态方法,所以不用new直接调用即可。
l 常用方法:
l ceil(x)对一个数进行上舍入。
l floor(x)对一个数进行下舍入。
l round(x)把一个数四舍五入为最接近的整数
l random()返回 0 ~ 1之间的随机数
l 代码展示:
获取0到10之间的随机数。
for(var x = 0;x<10;x++){
var num = Math.random()*10+1;
println(Math.floor(num));
}
三、 BOM基础
1. window对象属性:
l 1.navigator对象:包含有关浏览器的信息。
var name=window.navigator.appName;//获取浏览器名称
var version=window.navigator.appVersion; //获取浏览器版本
l 2.history对象:包含用户(在浏览器窗口中)访问过的 URL。
l 3.location对象:对象包含有关当前 URL的信息。
var href=window.location.href;//显示当前访问的URL
var hrefs=window.location.pathname;//设置或返回当前 URL的部分路径。
l 4.screen对象:包含有关客户端显示屏幕的信息。
l 5.event对象:代表事件状态,如事件发生的元素,键盘状态,鼠标位置和鼠标按钮状态。
1.returnValue :设置或获取事件的返回值。
function keydemo(){
if(!(window.event.keyCode>=48&&window.event.keyCode<=57))
//alert(window.event.keyCode);
{
alert("不允许录入非数字!");
event.returnValue=false;//不往文本框中返回值
}
2.srcElement:设置或获取触发事件的对象。
var node=event.srcElement;
alert(node.type);
2. Window对象方法:
l 1.confirm()方法:用于显示一个带有指定消息和 OK及取消按钮的对话框。返回类型是boolean类型
l 2.moveBy()方法:可相对窗口的当前坐标把它移动指定的像素。可移动多次
l 3.moveTo()方法:可把窗口的左上角移动到一个指定的坐标。只移动一次。
l 4.prompt()方法:用于显示可提示用户进行输入的对话框。返回值是文本信息。
l 5.open()方法:用于打开一个新的浏览器窗口或查找一个已命名的窗口。
window.open(URL,name,features,replace)
URL:声明了要在新窗口中显示的文档的 URL。
name:该字符声明了新窗口的名称。
features:声明了新窗口要显示的标准浏览器的特征。
replace:规定了装载到窗口的 URL是在窗口的浏览历史中创建一个新条目,还是替换浏览历史中的当前条目。
支持下面的值:
true - URL 替换浏览历史中的当前条目。
false - URL 在浏览历史中创建新的条目。
l 6.setInterval()方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。//执行多次
//显示时间类似于时钟
<SCRIPT language=javascript>
var int=window.setInterval("clock()",1000)
function clock()
{
var t=new Date()
document.getElementById("clock").value=t
}
</SCRIPT>
setInterval(code,millisec[,"lang"])参数描述:
code 必需。要调用的函数或要执行的代码串。
millisec 必须。周期性执行或调用 code之间的时间间隔,以毫秒计。
7.clearInterval() 方法可取消由 setInterval()设置的 timeout。
clearInterval() 方法的参数必须是由 setInterval()返回的 ID值。
8.setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。//只执行一次
setTimeout(code,millisec)
code必需。要调用的函数后要执行的 JavaScript代码串。
millisec 必需。在执行代码前需等待的毫秒数。
var c=0
var t
function timedCount()
{
document.getElementById('txt').value=c
c=c+1
t=setTimeout("timedCount()",1000)
}
//停止计时
function stopCount()
{
clearTimeout(t)
}
<INPUT TYPE="button" VALUE="开始计时!" onClick="timedCount()">
<INPUT TYPE="text" id="txt">
<INPUT TYPE="button" VALUE="停止计时!" onClick="stopCount()">
9.clearTimeout() 方法可取消由 setTimeout()方法设置的 timeout。
10.focus:使得元素得到焦点并执行由 onfocus事件指定的代码。
1. window事件
1.onload:在浏览器完成对象的装载后立即触发。
2.onunload:在页面将要被卸载前触发。
3.onbeforeunload:在对象卸载前立即触发。