◆javascript的基本介绍
1.js 是用于web开发的脚本语言
脚本语言是什么?
1)脚本语言往往不能独立使用,它和html/jsp/php/asp/asp.net配合使用
2)脚本语言有自己的变量,函数,控制语句(顺序,分支,循环)
3)脚本语言实际上是解释性语言(即在执行的时候直接对源码进行执行)
4)java程序:java--->class--->jvm js--->浏览器(js引擎来解释执行)
2.js 在客户端(浏览器)执行
客户端向服务器发送请求,下载html和js文件,然后在客户端执行操作。
3.因为js是有浏览器来解释执行的,因此这里有个问题,不同类型的浏览器可能对js的支持不一样。
◆js的开发工具选择
1.记事本
2.eclipse(myeclipse)
注意:javascript严格区分大小写,每一句语句最后一定要以 ; 结尾
案例1
需求:打开网页后,显示hello world
<html>
<head>
<!--js代码一般是放在 head标签间的,但实际上也可以在别的位置-->
<script language="javascript">
window.alert("hello!");
</script>
</head>
<body>
</body>
</html>
问题
1.js代码可以放在head里,也可以放在body里
2.js必须用
<script language="javascript">
js代码
</script>
注意:如果没有用script包起来,浏览器会将其视为普通文本。
3.在一个html文件中(jsp/php/asp)可以出现多对<script>片段,浏览器将会按照先后顺序依次执行
案例2:
对前面的程序,改进成一个简单的家法运算程序
<html>
<head></head>
<body>
<!--js代码一般是放在 head标签间的,但实际上也可以在别的位置-->
<script language="javascript">
//js中变量的定义(在js中变量用var表示,不管实际类型)
var num1=456;
var num2=89;
var result=num1+num2;
window.alert("结果是"+result);//alert函数,是
</script>
</body>
</html>
◆js的变量的类型究竟怎样决定:
1.js是弱数据类型语言(即定义变量的时候无需指定类型)
即:在定义变量的时候,统一使用var表示,甚至可以去掉var这个关键字
2.js中的变量的数据类型,是由js引擎来决定的。
var name="creabine"; //name是字符串类型
var kk=2 //kk是数字类型
var yy //yy是undefined
如果name="233" //这时name自动变成数字类型
◆即,js引擎可以根据数据的值来判断数据类型
◆js的命名规范(变量,函数的命名)
1.使用大小写字母,数字,_,$,可以命名
2.不能以数字开头
3.不能使用js的关键字和保留字
4.区分大小写
5.单行注释使用 // 多行注释使用 /**/
◆js的数据类型
1.基本数据类型,分为:
(1)Number 数值
1).整形常量(十进制、八进制、十六进制)
注意此例:
var a=123;
var b=034;//十进制中不以0开头,而这里的034以0开头,js将认为034为八进制数,此八进制数转换为十进制数(4*8^0+3*8^1+0*8^2=28)的结果为28,故c=a+b=123+28=151。
var c=a+b;
window.alert(c);
2).实型常量
12.32、19.458、5E3(即5*10^3,这里的e大小写都可以,也可以写作5e3)
var a=12.32;
特殊数值:
1.NaN (not a number)
例:
var a="abc";
window.alert(parseInt(a)); //parseInt(a)这个函数为:解析一个字符串并转为整数。这里的变量a=abc,a并不是数值类型,故无法转为整数,会报错为NaN。也可以用这个技巧去判断一个值是不是数字。
2.infintiy(无穷大)
例:
window.alert(6/0); //6/0就是无穷大
◆有两个函数可以用于判断NaN,infinity,分别是
isNaN() 检查某个值是不是数字
isFinite() 检查某个值是否为有穷大的数
下面只举例isNaN:
window.alert(isNaN("abc")); //判断abc是否不是数字,确实不是数字,返回true
window.alert(isNaN("123")); //判断123是否不是数字,是数字,返回false
(2)String 字符串型
"a book of JavaScript" 、 "a" 、 "dkfjkd"fdf "fd f"
例:
var a="abc";
var b="abcddd";
car c="fdskfjkls\"gfg\"faksjf"; //字符串类型的值,要用“”包起来,而当值中有“”引号时,用反斜杠\ 来转意,这时输出的时候,并不会输出反斜杠\,会输出它旁边的双引号,
window.alert(c);
(3)Boolean 布尔型:即true和false
举例:
var a=true;
var b=false;
js中非0的数,都为true,包括小数;js中字符串也是true。
if(1.1){
window.alert('ok');
}
通过typeof可以看到变量的具体数据类型是什么,举例:
<html>
<head>
<script language="javascript">
var v1="abc";
var v2=890;
window.alert("v1是"+typeof v1);
window.alert("v2是"+typeof v2);
v1=567;//js是动态语言,变量类型是可以动态变化的,这里赋值567,v1又变成了数字类型。
window.alert("v1是"+typeof v1);
</script>
</head>
<body>
</body>
</html>
2.复合类型,分为
(1)数组
(2)对象
3.特殊类型
1.null 空值
var a=null;
2.undefine 未定义
var tt;
window.alert(tt);//弹框说明未定义
◆js数据类型的转换
1.自动转换
var a=123; //a是数值
var a="hello"; /a是字符串
2.强制转换 parseInt() parseFloat()
如:
var a=12345;
a=parseInt(a); //使用系统函数强制转换,转为Int,整数。
var b=90; //b是数值
b=b+""; // b+“”空值,把b转为字符串
◆js的运算符
+ - * / %(取模,即两数相除取余,常用于判断两个数是否能够整除)
例:
var a=80;
var b=30;
var c=a%b;
window.alert(a%b);//取模主要用于整数型,小数会不明确
if (c==0){
window.alert("a能被b整除");
}else{
window.alert("a不能被b整除");
}
◆注意:++运算符 --运算符的意义
举例:举了++,--同理。
var a=57;
var b=++a;//b=++a 等价于 [a=a+1;b=a]; 而 b=a++ 等价于[b=a;a=a+1;] 简单来说,就是++在前,就是a先自加再赋值;++在后,就a先赋值,a再自加。两种处理得到的b的值是不同的
window.alert(b);
window.alert(a);
◆ +=左加 -+左减 /=左除 %=左取模
例子:
var a=56; var b=90;
a-=34;//a=a-34; a=22
b%=a;//b=b%a; 此时b=90,a=22,取模结果为2
window.alert(b);
window.alert(a);
介绍 window.prompt() 和 document.writeln() 两个函数
var val=window.prompt('请输入值');//该函数为弹出一个框输入值
var val2=window.prompt('请再输入一个值');
document.writeln('你的输入是'+(val+val2));//这里是字符串拼接
document.writeln('你的输入是'+(parseFloat(val)+parseFloat(val2)));//这里把字符串转为数值,然后进行加法运算。
◆关系运算符
== 等于 >大于 < 小于 >=大于等于 <= 小雨等于 != 不等于
案例:
var a=window.prompt('请输入数字a');
var b=window.prompt('请再输入数字b');
a=parseFloat(a);//这里把a转为小数,因为不知道输入的是整数还是小数,统一转为小数
b=parseFloat(b);
if(a==b){
window.alert('a=b');
}else if(a<b){
window.alert('a<b');
}else{
window.alert('a>b');
}
◆逻辑运算符
1.与 &&
重要的案例:
var a=90;
var b=9;
if(a>b && a++>90){//这里a>b为true,故继续执行a++>90,等价于[a>90; a++],而a>90为false,所以输出no;a++之后a=91,所以输出a=91.
window.alert('ok');
}else{
window.alert('no');
}
window.alert('a='+a);
案例说明:
if(逻辑表达式1 && 逻辑表达式2){
}
如果 逻辑表达式1为true,则会继续执行逻辑表达式2
如果 逻辑表达式1为false,则不会执行逻辑表达式2(因为与需要1、2同时为true才为true,1为false,没必要判断2了)
2.或 ||
if(逻辑表达式1||逻辑表达式2){
}
如果,逻辑表达式1为true,则不再执行逻辑表达式2(因为只要1为true,就为true了,没必要判断2)
如果,逻辑表达式1为false,才会执行逻辑表达式2
案例1:
var a=90;
var b=9;
if(a>b || a++>90){//修改a b之间的大于小于号,可以测试a++的执行与否
window.alert('ok');
}else{
window.alert('no');
}
window.alert('a='+a);
这里有一个非常重要的知识点:
//在js中||究竟返回什么值
//结论:|| 将返回第一个不为false的值(对象亦可),或者返回最后一个值(若全部都是false的话)
//返回的结果,不一定是布尔值,也可能是对象
案例:
var a=4;//js中,非0的数字即为true,按上述结论,即返回4
var b=90;
window.alert(a||b);
var d=0;
window.alert(d||b);//此时d为false,b为true, b是第一个不为false的值,所以返回90
var f=null;
window.alert(d||f);//此时d,f都为false,返回最后一个值,即f的值,0
var obj=new Object();//这里说明,||所返回的值,不一定是布尔型,还可能为对象
var g=d||f||obj;
window.alert(g+"类型"+typeof g);
3.非 !
if(! 逻辑表达式){
}
如果 逻辑表达式 为true, 【!逻辑表达式】为false,
如果 逻辑表达式 为false, 【!逻辑表达式】为true。
特别说明:在逻辑运算中,0、“”、false、null、undefined、NaN均表示false;其他都认为是true。
例如:
var a=0;//这里的0换成 “”、false,null,undefined,NaN,均一样。
if(a){//这里a=0,表示false,即不执行window.alert('ok') 语句;若改为if(!a),则为true,执行window.alert('ok')语句。
window.alert('ok')
}
◆js也有位运算和移位运算,其规范和java一致,这里没太搞懂,虽然不是重点,实际开发用的少。
案例:
var a=4>>2;
window.alert(a);//结果是1
var b=-4>>2;
window.alert(b);//结果是-1
◆javascript的控制语句
1.顺序控制
对编程而言,不控制其流程就是顺序执行
2.分支控制
1)单分支
基本语法:
if(条件表达式){
//执行语句;
}
2)双分支
基本语法
if(条件表达式){
执行语句1;
}else{执行语句2;