JavaScript使用
插入
<script>
</script>
引入外部的JavaScript代码
在页面中使用src属性引入外部文件
<script src=“externalJS.js”></script>
JavaScript语法基础
JavaScript语法
区分大小写
变量 myTest、myTEST是不同的变量
变量是弱类型
行结尾加分号
括号表明代码块
注释通用简单
在浏览器中逐条解释执行,如果某条语句出现错误,后面的语句将不能执行。
常量
Math.E:常量e
Math.PI:常量PI
Number.MAX_VALUE:可表示的最大的数
Number.MIN_VALUE:可表示的最小的数
Number.NaN:非数字值
变量
保存程序中的临时值,可被后面的脚本使用
弱类型
变量声明 示例 vardefine.html
var
在使用变量前声明
var mytest;
可以声明的同时赋值
var mytest = “This is a book”;
同时声明多个变量(不建议)
var a, b=1, c;
数据类型
五种原始类型(简单类型)
Undefined-未定义类型
未被赋值的变量,值为undefined
Null-空类型
值为null,尚不存在的对象
Boolean-布尔类型
值为true/false
Number-数字类型
任何数字(NaN也是number类型,表示“非数”)
String-字符串类型
值用引号(单引号或者双引号)括起来
数据类型—— 一种复杂类型
Object
typeof操作符
typeof操作符是用来检测变量的数据类型
对于值或变量使用typeof操作符会返回如下字符串
示例 typeof.html 、type1.html
例: var i=2;
alert(typeof(i)); //返回number
Undefined
未被赋值的变量,值为undefined
var box;
alert(box);
未初始化的变量与根本不存在的变量(未声明的变量)也是不一样的
var box;
alert(age); //age is not defined
Null类型
只有一个值的数据类型,即特殊的值null
它表示一个空对象引用(指针),而typeof操作符检测null会返回object
var box = null;
alert(typeof box);
如果定义的变量准备在将来用于保存对象,那么最好将该变量初始化为null。这样,当检查null值就知道变量是否已经分配了对象引用了。
var box = null;
if (box != null) {
alert('box对象已存在!');
}
Number类型 示例 type2.html
包含两种数值:整型和浮点型
整型有十进制、八进制(0开头)、十六进制(0x开头)
var box = 100; //十进制整数
var box = 070; //八进制,56
var box = 0xA; //十六进制,10
浮点类型
var box = 3.8;
var box = 0.8;
var box = .8;
NaN,即非数值(Not a Number)是一个特殊的值 示例 NaN.html
用于表示一个本来要返回数值的操作数未返回数值的情况(这样就不会抛出错误了)。
var box = 0 / 0; //NaN
var box = 12 / 0; //Infinity
var box = 12 / 0 * 0; //NaN
isNaN()函数
用来判断值到底是不是NaN
isNaN()函数在接收到一个值之后,会尝试将这个值转换为数值
alert(isNaN(NaN)); //true
alert(isNaN(25)); //false,25是一个数值
alert(isNaN('25'));//false,'25'是一个字符串数值,可以转成数值
alert(isNaN('Lee')); //true,'Lee'不能转换为数值
alert(isNaN(true)); //false true可以转成成1
Boolean类型 示例:布尔型
有两个值true和false
true不一定等于1,false不一定等于0
JavaScript是区分大小写的,True和False或者其他都不是Boolean类型的值。
var box = true;
alert(typeof box);
String类型 示例 type3.html
表示由零或多个16位Unicode字符组成的字符序列,即字符串。
字符串可以由双引号(")或单引号(')表示。
var box = 'Lee';
var box = "Lee“;
Object类型 示例 type3.html
对象其实就是一组数据和功能的集合
使用new操作符,后跟要创建的对象类型的名称来创建对象
Object()里可以任意传参,可以传数值、字符串、布尔值等
还可以进行相应的计算
var box = new Object();
var box = new Object;
var box = new Object(2); //Object类型,值是2
var age = box + 2; //可以和普通变量运算
alert(age); //输出结果,转型成Number类型了
Object类型
使用new Object()来表示一个对象,也可以使用这种new操作符来创建其他类型的对象。
var box = new Number(5);//new String('Lee')、new Boolean(true)
alert(typeof box); //Object类型
转义字符
数据类型的转换
JavaScript是弱类型语言,变量的类型对应于其值的类型
可以对不同类型的变量执行运算,解释器强制转换数据类型,然后进行处理
强制转换
<script>
var a = "1232.45";
var c = true;
document.write("字符串与数值相加:"+(a+1)+"<br>");//字符串与数值相加
document.write("字符串与boolean相加:"+(a+c)+"<br>");//字符串与boolean相加
document.write("数值与boolean相加:"+(1+c)+"<br>");//数值与boolean相加
document.write("<br>");
document.write("字符串与数值相减:"+(a-1)+"<br>");//字符串与数值相减
document.write("字符串与boolean相减:"+(a-c)+"<br>");//字符串与boolean相减
document.write("数值与boolean相减:"+(1-c)+"<br>");//数值与boolean相减
document.write("<hr>");
</script>
字符串-->数值 示例 字符串转换数值.html、 StrToNumber.html
parseInt(var)
parseFloat(var)
Number(var)
注意:parseInt方法和parseflota方法只对string类型有效,且需要是数字开头的字符串
如:
<script>
var str= "123.30";
//var str= "123t.30";
var a= parseInt(str);
var b= parseFloat(str);
alert(a);
alert(b);
</script>
数值-->字符串
toString方法
将任何类型的值转换为字符串
如果是null或者undefined,则返回"null"或者"undeinfed"。
<title></title>
<script>
var a= 100;
var c = a.toString();
alert(typeof(c));
</script>
Number()函数
是转型函数,可以用于任何数据类型
alert(Number(true));//1,Boolean类型的true和false分别转换成1和0
alert(Number(25)); //25,数值型直接返回
alert(Number(null)); //0,空对象返回0
alert(Number(undefined)); //NaN,undefined返回NaN
<script>
var a = "1232.45";
document.write(parseInt(a)+"<br>");
document.write(parseFloat(a)+"<br>");
document.write(Number(a)+"<br>");
document.write("<hr>");
var b = "1232w45";
document.write(parseInt(b)+"<br>");
document.write(parseFloat(b)+"<br>");
document.write(Number(b)+"<br>");
document.write("<hr>");
var c = true;
document.write(parseInt(c)+"<br>");
document.write(parseFloat(c)+"<br>");
document.write(Number(c)+"<br>");
document.write("<hr>");
</script>
运算符与JAVA中相同
不同点:
“===”是严格意义上的相等,两个值和它们的类型完全一致时才返回true。
JavaScript语言构成
主要由控制语句、函数、对象、方法、属性等来实现编程
选择语句
if语句 、if-else语句 、if-else-if语句、switch语句
循环语句
for语句 、while语句 、do-while语句 、for-in语句、break和continue语句
异常处理语句
try-catch语句 、try-catch-finally语句 、throw语句
for-in语句
是for语句的一个变体,同样是for循环语句
for-in通常用于遍历某个集合的每个元素,比如数组由很多元素,其元素索引构成了一个集合,使用for-in语句可以遍历该集合,进而取得所有元素数据 。
for ( n in set)
{
语句组;
}
try-catch是一个异常捕捉和处理代码结构,当try块中的代码发生异常时,将由catch块捕捉以及处理。
try
{
tryStatements
}
catch(exception)
{
catchStatements
}
try-catch-finally语句作用与try-catch语句一样,唯一的区别就是当所有过程执行完毕之后前者的finally块无条件被执行
ry{
tryStatements;
}catch( exception ){
handleStatements;
}finally{
fianllyStatements;
}
throw语句
当多个结构嵌套时,处于里层try-catch语句不打算自己处理异常则可以将其抛出,父级try-catch语句可以接收到子级抛出的异常。
函数
JavaScript的函数属于Function对象,因此可以使用Function对象的构造函数来创建一个函数 。
可以使用function关键字以普通的形式来定义一个函数
普通定义方式使用关键字function,也是最常用的方式:
function 函数名( [ 参数1, [ 参数2, [ 参数N ] ] ] )
{
[ 语句组 ];
[ return [表达式] ];
}
函数变量定义方式是指以定义变量的方式定义函数。
JavaScript中所有函数都属于Function对象,于是可以使用Function对象的构造函数来创建一个函数 。
变量定义方式实质上就是创建一个函数对象。
例
var circularityArea = new Function( "r", "return r*r*Math.PI" ); // 创建一个函数对象
var rCircle = 2; // 给定圆的半径
var area = circularityArea(rCircle); // 使用求圆面积的函数求面积
alert( "半径为2的圆面积为:" + area ); // 输出结果
第二种方法
function a (r)
{
return r*r*Math.PI;
}
alert(a(2));
函数定义时圆括号里的参数称为形式参数,调用函时传递的参数称为实际参数
rguments对象
函数可以接受任意个数的参数,通过arguments来访问
arguments对象代表正在执行的函数和调用它的参数
函数对象的length属性说明函数定义时指定的参数个数
arguments对象的length属性说明调用函数时实际传递的参数个数
console.log(arguments.length)
函数返回类型
值类型使用的是值传递方式,即传递数据的副本。
一般情况下,函数返回的非对象数据都使用值返回方式,如下面的代码所示:
fcuntion sum( a , b ) // 加法函数
{
return a + b; // 返回两个数之和
}
var c = sum( 1, 2 );
引用类型返回的是数据的地址,而不是数据本身 。
引用传递的优点是速度快,但系统会为维护数据而付出额外的开销。通常返回复合类型数据时使用引用传递方式,如下代码所示 :
fcuntion getNameList() 定义函数,以获取名单
{
var List = new Array(“Lily”, “Petter”, “Jetson” ); // 名单
return List; // 返回名单引用
}
var nameList = getNameList(); // 测试
nameList = null; // 删除引用
事件触发调用 示例 FunctionTrigger.html
由事件触发调用函数
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Functions and Events</title>
<script language=javascript>
function greetings(){ // Function definition
document.bgColor="pink";
alert("Greetings and Salutations! ");
}
</script>
</head>
<body><center>
<form>
<input type="button" value="Welcome button" onClick="greetings();">
</form>
</body>
</html>
其它内部函数
Number()、parseInt()、parseFloat()
将数字字符串转换为数字
如果转换失败,则返回“NaN”
isNaN()
判断是否不是数字
eval()
把字符串当作JavaScript表达式来执行
eval(“2+3”)
eval("alert('111')");
// 与function一样
函数的作用域
公有函数:是指定义在全局作用域中,每一个代码都可以调用的函数
私有函数 :是指处于局部作用域中的函数 。
当函数嵌套定义时,子级函数就是父级函数的私有函数
外界不能调用私有函数,私有函数只能被拥有该函数的函数代码调用
例
<script language="javascript">
function a() // a为最外层函数
{
function b() // b为第1层函数
{
function c() // c为第2层函数
{
document.write( "<li>C" );
}
document.write( "<li>B" );
}
document.write( "<li>A" );
b(); // a的代码调用a的私有函数b
c(); // a的代码偿试调用b的私有函数,将发生一个错误 可以放在b的内部 就可以成功运行了
}
a(); // 调用a
</script>
课堂练习
1、做一个乘法表
在网页上用javascript函数,在网页上打印出乘法九九表。
function Mult(){
//函数形式
for(i=1;i<=9;i++){
for(j=1;j<=i;j++){
document.write(i+"*"+j+"="+i*j+" ");
}
document.write("<br>");
}
}
Mult();
2、使用prompt(””,””)获取用户输入的字符串,直到实现输入“STOP”时停止。并打印所有的输入:其他字符使用红色,“STOP”使用蓝色。
Prompt()的使用参见下面写法:
var inputStr = prompt("请输入一串字符,当输入‘STOP’时停止","");
function CatchP(){
do{
var inputStr = prompt("请输入一串字符,当输入‘STOP’时停止","");
if (inputStr != "STOP")
{
document.write("<font color=\"red\">"+inputStr+"</font><br/>");
}else
{
document.write("您输入了<font color=\"blue\">"+inputStr+"</font>,停止输入。<br/>");
}
}while(inputStr != "STOP")
}
CatchP();