JS 简介
[JS的三种方式]
1、HTML标签中内嵌JS
<button onclick="javascript:alert('白痴')">呵呵呵</button>
2、HTML页面中直接使用JS
<script type="text/javascript">
//JS代码
</script>
3、引用外部JS文件
<script language="JavaScript" src="JS文件路径"></script>
[注意事项]
①页面中JS代码与引用JS代码,可以镶嵌到HTML页面的任何位置。但是位置不同会影响到JS代码的执行顺序;
例如:<script>在body前面,会在页面加载之前执行JS代码
②页面中JS代码,使用type="text/javascript"
引用外部JS文件使用language="JavaScript"
③引用外部JS代码的<script></script>标签,必须成对出现,且标签内不能有任何代码!
JS中的变量
1、JS中变量声明的写法
var width=10;//使用var声明的变量,只能在当前函数作用域有效。
width=12;//不使用var,直接赋值生成的变量。默认为全家变量,整个JS文件有效
var a,b,c=1;//同一声明语句同时声明多个变量,变量之间用英文逗号分隔。但赋值需要单独赋值,
例如上式中只有c=1,a/b未定义[underfined]
[声明变量注意事项]
① JS中所有变量类型声明,均使用var关键字。变量的具体数据类型,取决于给变量赋值的类型
② 同一变量可以在多次不同赋值时,修改变量的数据类型:
var width=10;//width为整形变量
width="哈哈";//width被改为字符串类型
③ 变量可以使用var,也可以省略var。[区别]不使用var,默认为全局变量
④ 同一变量名,可以多次var声明。但是并没有任何含义,也不会报错。第二次之后的声明,只会被理解为赋值;
2、变量的命名规范
① 变量名只能有字母/数字/下划线/$组成
② 开头不能是数字
③ 变量区分大小写,大写字母与小写字母为不同变量
3、变量名命名要符合驼峰法则:
变量开头为小写,之后每个单词首字母大写
或用下划线分割
4、JS中的变量的数据类型
Undifined:未定义,用var声明的变量,没有进行初始化赋值。var a;
Null:代表特殊的变量类型。唯一值为null,表示空的。var a = null;
boolean:真假,可选值true/false
Number:数值类型。可以是小数,也可以是整数。
String:字符串类型。用""或''包裹的内容,成为字符串。
Object(复杂数据类型):后续讲解,函数、数组等...
5、常用的数值函数:
① isNaN:用于判断一个变量或常亮,是否是NaN(非数值)
使用isNaN判断时,会尝试使用Number() 函数进行转换,如果能转换为数字,则不是非数值结果为false
"111"纯数字字符串,false ""空字符串,false "1a"包含其他字符,true
true/false布尔类型,false
② Number():将其他类型转化为数值类型
[字符串类型转数值]
>>>字符串为纯数值字符串,会转为对应的数字 "111"->111
>>>字符串为空字符串时,会转为0 ""->0
>>>字符串包含其他非字符串时,不能转化 "111a"->NaN
[布尔boolean类型转数值]
true->1 false->0
[null/undefined转数值]
null->0 undefined->NaN
[Object类型转数值]
先调用ValueOf函数,确定函数是否有返回值,再根据上述各种情况判断。
③ parsInt:将字符串转为数值类型
>>>空字符串,不能转。结果为NaN
>>>纯数字字符串,能转。 "123"->123 "123.5"->123(小数转化时,直接抹掉小数点,不进行四舍五入)
>>>包含其他字符的字符串,会截取第一个非数值字符前的数值部分。
"123a45"->123 "a123b45"->NaN
>>>parsInt只能转string类型,boolean/Null/Undifined均为NaN
④ parseFloat:将字符串转为数值
>>>使用方法同③。但是转换小数时会保留小数点
"123.5"->123.5
⑤typeof:用来检测数据类型
未定义->Undifined 字符串->string true/false->boolean
数值->NUmber 对象/null->Object 函数->function
[JS中的输入/输出语句]
1、在文档中打印输入:document.write();
输出语句,将write的()中的内容在浏览器屏幕上:
使用时注意:除变量/常量意外的任何内容,打印时必须放到""中;变量/常量必须放到""外。
打印的内容同时有多部分组成的时候,之间用+链接:
例如:document.write("左手中的纸牌:"+left+"<br/>");
2、弹窗输出:alert();
弹窗警告,()中的使用方式,同上
3、弹窗输入prompt("请输入您的名字:","XX");
两部分参数:①输入框上面的提示信息
②输入框里面的默认信息
两者之间用逗号分隔,只有一部分时,默认为提示信息;
默认接收到的数据为字符串
可以定义变量接收输入内容,例如var name=prompt("请输入您的名字:","XX");
点击确认按钮,输入更改点击取消按钮,name=null
JS运算符
[算术运算]
【 + 加】【- 减】【* 乘】【 / 除】【 % 取余】【++ 自增】【-- 自减】
+:有两种作用,链接字符串/加法运算;
① 当+两边均为数字时进行加法运算;
② 当+两边任意一边为字符串时进行字符串的链接,链接后的记过认为是字符串。
++:自增运算符,将变量在原有基础上+1;
--:自减运算符,将变量在原有基础上-1;
【N++与++N的异同】
N++:先使用N的值进行计算,然后再把N+1;
++N:先把N的值+1,再用N+1以后的值,运算;
相同点:不论N++还是++N,再执行完代码以后,均会把N+1。
[赋值运算]
【 = 赋值】【 += 】【 -= 】 【 *= 】 【 /= 】 【 %= 】
+=:a+=5;相当于a=a+5;前者的执行效率要比后者快。
[关系运算]
【== 等于】 【 != 不等于】【=== 严格等于】【>】【<】【>=】、【<=】
===:严格等于;类型不同返回false;类型相同,再进行下一步判断。
==:等于;类型相同,再进行下一步判断;类型不同,均用Number转化为数字再判断;
null==Undefined[对] null===Undefined[错]
[条件运算符(多目运算)]
a>b?true:false
有两个关键字符号 【 ?和:】
当?前面的部分运算结果为true时,执行前面的代码
当?前面的部分运算结果为false时,执行后面的代码
可以多次嵌套;例如:var jieguo=num>5?"输入太大":(num==5?"蒙对了!":"太小了");
[逻辑运算符]
【&& 与】【|| 或】【! 非】
[运算符的优先级]
()
! ++ --
% / *
+ —
> < >= <=
== !=
&&
||
各种赋值= += *= /= %=
JS条件语句
[if-else结构]
1、写法:
if(判断条件){
//条件为true时执行
}else{
//条件为flase时成立
}
2、if()中的表达式,运算之后的结果应该为:[重点]
①Boomlean:true真 flase假
②string:非空字符串为真;空字符串为假。
③Number:0为假;一切非0均为真。
④Null/NaN/Undefined:全为假
⑤Object:全为真
3、 else{}结构,可以根据具体情况省略;
[多重if/阶梯if]
1、写法:
if(条件一){
//条件一成立
}else if(条件二){
//条件一不成立,条件二成立
}else if(条件三){
//条件一不成立,条件不二成立,条件三成立
}else if(条件N){
//......
}
2、多重if结构中,各个判断条件是互斥的!只能选择一条。
3、if/else最好不要省略{}
如果省略{}则if/else结构包含的代码,仅为其后最近的一行(分号结束);
如果省略{}则else结构永远输入其前方最近的一个if结构。
[嵌套if]
1、写法
if(条件一){
//条件一成立
if(条件二){
//条件一成立&&条件二成立
}else{
//条件一成立&&条件二不成立
}
}else {
//条件一不成立
}
2、if结构可以多重嵌套,但原则上不超过3层
[switch-Case结构]
1、结构写法:
switch(表达式){
case常量表达式1;
语句1;
break;
case常量表达式2;
语句2;
break;
....
default;
语句N;
break;
}
2、注意事项:
① switch()的表达式,以及每个case后面的表达式,可以为任何JS支持的数据类型(对象和数组不行);
② case后面的常量表达式,必须各不相同,否则只会执行第一个;
③ case后的常量可以是任何数据;同一个switch结构的不同case,可以是多种不同的数据类型;
④ switch在进行判断的时候,采用的是全等判断===
⑤ break的作用,执行完case代码后,跳出当前switch结构;
缺少break的后果,从正确的case项开始,依次执行所有的case和default
⑥ switch结构在判断时只会判断一次正确答案,当遇到正确的case项后,将不再判断后续项目。依次执行下去
⑦ switch结构的执行速率要快于多重if结构。在多分枝时可优先考虑使用switch结构。
JS循环结构
循坏控制语句
1.break:终止本层循坏,继续执行本次循坏后面的语句;
当循坏有多层时,break只会跳过一层循坏
2.continue:跳过本次循坏,继续执行下次循坏
对于for循环,continue执行后,继续执行循环变量更新语句n++;
对于while,do-while,continue执行后,继续执行循环条件判断,
所以使用俩个循环是,必须注意,continue一定要在n++之后使用。
[嵌套循环特点]
外层循环控制行数,内层循环控制每行元素个数;
[做图形题思路]
1、确定图形一共几行,即为外层循环的次数
2、确定每行有几种元素,代表有几个内层循环的个数;
3、确定每种元素的个数,即为每个内层循环的次数;
Tips:通常,找出每个元素个数,与行号的关系式,即为当前内层循环的最大值;(从1开始循环)
[循环结构的步骤]
①声明循环变量
②判断循环条件
③执行循环体(while的{}中所有代码的操作)
④更新循环变量
然后循环执行2、3、4
[js中循环结构支持的数据类型]
① Boolean: true真 flase 假
② String:非空字符串为真 空字符串为假
③ Null/NaN/Undefined:全为假
④ Object:全为真
⑤ Number:0为假,一切非0均为真;
while循环
while循环特点:先判断,再执行;
[while写法:]
var n=1;// ① 声明循环变量
while (n<=5){// ② 判断循环条件
document.write("while你好啊<br/>");// ③ 执行循环体(while的{}中所有代码)操作
n++;// ④ 更新循环变量
}
do-while循环
do-while循环特点:先执行,再判断;即使初始条件不成立,do-while循环也至少执行一次;
[do-while写法:]
var m=1;
do{
document.write("do-while你好啊<br/>");
m++;
}while(m<=5);
[for循环]
1、for循环有三个表达式,分别为 :①定义循环变量; ② 判断循环条件; ③ 更新循环变量
三个表达式之间,用;分隔
for循环三个表达式均可以省略,但是两个;不可省略
2、for循环特点:先判断,再执行
3、for循环三个表达式,均可以有多部分组成,之间用逗号分隔;但是第二部分判断条件需要用&&链接,最终结果需要为真/假
for(var x=1;x<=5;x++){
document.write("for你好啊?<br/>")
}