一、前言:
有过学习其他语言的经历,会比较好上手。但是,没有学过也无关大雅。只要认真学,都会学好。毕竟,都只是一些基础的语句。关键在于要会运用。 掌握好语句的嵌套,以及要的逻辑思维能力,就已经成功一大半了。
二、JS中的变量和输入输出
使用JS的三种方式
1. 在HTML标签中直接内嵌js (并不提倡使用)不符合W3C关于内容与行为分离的要求!!!!
<button onclick="alert('快点点点点啊')">点啊</button>
2. 在HTML页面中,使用<script></script>标签包裹代码;
<script type="text/javascript"> //js代码 </script>
<script></script>标签可以放在页面的任何位置 也可放多个,但一般只放一个
3. 引入外部的JS文件
<script language="JScript"src="js文件路径"></script>
注意事项
1. <script></script>可以嵌入到页面的任意位置,但是位置的不同,会导致js代码执行的顺序不同
比如<script></script>放到<body></body>前面则js代码会在页面加载之前就执行
2. 引入外部的JS代码,<script></script>必须是成对出现的标签。而且,标签中不能再有任何的代码
JS中的变量
1.JS中变量声明的写法
var num = 10; // 使用var声明的变量属于局部变量,只在当前作用域内有效。
但是,如果是在<script>中直接声明,那就相当于是全局变量
num = 10; // 不用var声明的变量,默认为全局变量,在整个JS文件中(该语句下面)都有效。
var x=8,y, z = 10; // 使用一行语句同时声明多个变量。上式中,y属于已声明,但是未赋值状态,结果为undefined
声明变量的注意事项
①.JS中,所有变量的声明,均使用var关键字。变量具体是什么类型,取决于给变量所赋值的类型;
②.JS,同一个变量,可以在多次不同赋值时,修改变量的数据类型;
var a = 10; // 从初始声明时,a属于整数型
a =" hahaha”; // 重赋值时,整数型的a被修改为字符串类型;
③. 变量可是使用var声明,也可以不是用var声明;
【区别】使用 var声明是局部变量,不是用var是全局变量
④.只用var声明但是不赋值。结果为undefined。
例如:var a;//只声明不赋值的a为undefined。但是,如果不声明也不赋值的a,直接使用会报错。
⑤.同一变量名,可以多次使用var声明但是后面的var并没有任何作用。第二次使用var声明时,只会被理解为普通的赋值操作
2.变量名的命名要求
①.变量名只能有,字母,数字,下划线组成;
②.开头不能是数字;
③.变量名区分大小写。大小写字母为不同变量 大写字母一般声明常量
3.变量名的命名规范
①.要符合小驼峰法则(骆驼命名法):
首字母小写,之后每个单词的首字母大写; 如: myNameIsPengWei √
②.或者使用匈牙利命名法:
说有字母小写,单词之间用_分隔 my_name_is_peng_wei √
③.mynameispengwei 能用,但是不规范
4.js中的数据类型 :均用var声明,但变量具体是什么类型,取决于给变量所赋值的类型;
ndefined:未定义。已经使用var声明的变量,但是没有赋值。 var a;
null: 表示空的引用。
boolean:布尔类型。表示真假。只有两个值:true/flase
number:数值类型。可以是整数,也可以是小数。
string:字符串类型。用双引号或单引号包裹的内容,称为字符串。
object:对象类型。后续讲解。。。。
5.常用的数值函数
① isNaN():判断一个变量或常量,是否是NaN(not a number 数值)
NaN 不等于 NaN
使用isNaN()判断时,会尝试使用Number()函数进行转换,如果最终能够转成数字,则不是NaN,结果为flase
② Number()函数:将其他类型的数据尝试转为数值型;
【字符串类型】
》》字符串为纯数值字符串,会转为对应的数字:“11”—->11
》》字符串为空字符串,会转为0; ""-->0
》》字符串包含任何其他字符时,都不能转;“1a”-->NaN
【Boolean类型】
true->1 flase->0
【null和undefined类型】
null->0 undefined->NaN
【object】
*(后续讲解)
③ ParseInt():将字符串转为整数类型
》》空字符串,不能转。“”-->NaN
》》包含其他字符的字符串会截取第一个非数值字符串前的数字部分
“12a23”-->"12" "aqw12"-->NaN
》》parseInt()只能转字符串和整型(能将小数转为整数),转其他类型,全是NaN
☆☆ 【Number函数与ParseInt函数的区别】 重点
1.number函数能转各种数据类型,parseint函数只能转字符串
2.两者在转字符串时,结果不完全相同(详见上面解释)
④ parsefloat:将字符串转为数值型
转换规则与parseint相同,只是如果有小数,则保留小数点,如果没有小数,则依然是整数;
“12.5”-->12.5 "12"-->12
⑤ typeof:监测变量的数据类型:
字符串-->string 数值-->Number 未定义-->Undefined
true/flase-->boolean 对象/noll-->object 函数-->function
【js中常用的输入输出语句】
1.document.write()。将()中的内容打印输出到浏览器屏幕上
使用时,需注意,除变量常量外的所有内容,必须放到""中。变量和常量之外的内容必须放到""外面
如果同时有变量和字符串,必须用+链接 eg:document。write("左手中的纸牌"+left+"<br/>");
2.alert():使用弹窗输出
弹窗警告,()的内容与上述要求相同
3.prompt():弹窗输入;
接受两部分参数
① 输入框上面的提示内容,可选
② 输入框里面的默认信息,可选
当只写一部分时,表示输入框上面的提示内容;
可以定义变量,接受输入的内容。点击确定按钮,变量将被赋值为输入的内容,点击取消按钮,变量将被赋值为null
输入内容时,默认接受的数据类型都是字符串!!
三、运算符
1. 算术运算(单目运算符)
+ 加、 -减、 *乘、 /除、 % 取余、 ++ 自增、 -- 自减
注意::有加减运算时,要注意是否要将数字转为数值型
① + :有两种作用:链接字符串 和 加法运算。
当+两边全为数字时,进行加法运算;
当+两边任意一边为字符串时,起链接字符串的作用,链接之后的结果为字符串
除+外,其余符号运算时,会尝试将作用两边变量用number函数转为数字
② / : 结果会保留小数点
③ ++ :自增运算符,将变量在原有基础上+1
④ -- : 自减运算符,将变量在原有基础上-1
a++与++a的异同
1. 同: 无论是a++还是a--,运算完后的值均会加1;
2. 异: a++,先用a的值去运算,,再把a加1
++a,先把a+1,再用a+1之后的值去运算。
例如
var a = 3,b,c; b = a++ + 2; //先用a运算:b = 3 + 2; 再将a+1:a = 4 c = ++a + 2; //现将a+1:a = 5; 再用a值运算:c = 5 + 2; //a=5 b=5 c=7
2.赋值运算
= 赋值 += -= *= /= %=
+=: a+=b: 相当于a=a+b;但是,前者的运算效率要比后者快,所以推写法荐前的者
3.关系运算
==等于、===严格等于 !=不等于、 !== 不全等 >、 <、 >=、 <=
① 关系运算符,运算之后的结果,只能是boolean类型;
② 判断一个数字是否处于某个区间,必须用&&连接
eg: a<10 && a >0 √ 10>a>0 ×
③ ===: 严格等于:要求不但要类型相同,值也必须相同;类型不同,结果直接为false;类型相同,再进行下一步判断
==: 等于:类型相同,与===效果一样。类型不同时,会先尝试用number函数将两边转为数字,然后再进行判断
但是,有个别特例
alert(null === flase) 结果为false
var a;
alert(a == null) 结果为true
alert(NAN == NaN) 结果为false
alert(1!="1") 结果为false
alert (1!=="1") 结果为true
4.条件运算符(多目运算)
a>b?true:false
有两个重要符号: ? 和 :
当?前面部分,运算结果为true时,执行:前面的代码
当?前面部分,运算结果为false时,执行:后面的代码
冒号两边可以为数值,则整个式子可用于赋值。 var a = 1 > 2 ? 1 : 2;
冒号两边可以为代码块,将直接执行代码。 1 < 2 ? alert(1 : alert(1);
多目运算符可以多层嵌套。 var a = 1< 2 ? alert(1) : alert(1);
5.位运算符、 逻辑运算符
&& 与、 || 或、 ! 非(单目运算符)
&&:两边都成立时结果为true
||:两边有任意一边成立时,结果为true
6.运算符的优先级
() 小括号最高
! ++ --
* / %
+ -
> < >= <=
== !=
&& || 和 && 同时存在时,&&优先级高于||
||
= += -= *= /= 赋值符最低
四.分支结构
1. 多目运算符
a>b?true:false
2. if-else结构
①结构的写法
if(判断条件){
//条件为true时,执行if的{}
}else{
//条件为false时,执行else的{}
}
②.注意事项
① else语句块。可以根据情况进行省略。
② if和else后面的{}可以省略,但是省略{} 后,if和else后面只能跟一条语句,所以,并不建议省略{}。
③ if 的()中的判断条件,支持的情况:
① boolean: true为真,flase为假;
② string: 非空字符串为真,空字符串为假;
③ number: 非0数字为真, 0为假;
④ null/undefined/NaN: 全为假;
⑤ object: 全为真。
3. 多重if,阶梯if结构
①.结构写法
if(条件1){
条件1成立时,支持语句
}else if(条件2){
条件1不成立,并且条件2成立时,执行的语句
}else{
上述所有条件都不成立时,执行的语句
}
②.多重if结构中,各个判断条件是互斥的,执行选择其中一条路执行。遇到正确选项并执行完后,直接跳出结构,不在判断后续分支
4.嵌套if结构
①结构写法
if(条件1){
条件1,成立
if(条件2){
条件1,并且条件2,成立
}else{
条件1成立,条件2不成立
}
}else{
条件1,不成立
}
②.在嵌套if结构中,如果省略{}、则else结构永远属于离它最近的if结构
③嵌套结构可以多次嵌套,但是一般不推荐超过三层
能用多重if结构的时候一般不推荐使用嵌套if。
5.switch - case结构
①.结构写法: 如下
②注意事项:
① switch机构()中的表达式,可以使用JS支持的各种数据类型。
② switch机构在进行判断时,使用 === 判断。
③ case后面的表达式(允许有多个语句),可以是各种数据类型,但是,case的值要求各不相同,否则,也只会执行,第一个case
④ break作用:执行完case代码后,跳出当前switch机构
缺少break后果:
从第一个正确的case项开始执行后面的所有case 和default;
原因: switch结构在进行判断的时候,只会判断一次正确答案,当遇倒正确的case后,将不再判断后续的项目
⑤ switch结构的执行效率要比多重if快。在多路分支中,推荐优先使用switch
五.循环结构
1.while循环结构的执行步骤
①.声明循环变量
②判断循环条件
③.执行循环体操作
④更新循环变量
然后,循环执行2~4,直到条件不成立时,跳出循环。
while循环结构()中的表达式,运算结果可以是各种类型。但是最终都会转为真假,转换规则同if结构。
var num = 0; //声明循环变量 while (num < 10){ //判断循环条件 document.write(num + "<br />"); //执行循环体操作 num=num+1; //更新循环变量 }
2.do-while循环结构
do-while循环特点:先判断,再执行。
do-while循环特点:先执行,再判断。即使初始条件不成立,do-while循环也至少循环一次。
var num = 10; do{ document.write(num );/ num--; }while(num >= 0);
3.for循环结构
1. for循环有三个表达式:① 声明循环变量; ② 判断循环条件; ③ 更新循环变量
三个表达式之间,用分号分隔
for循环的三个表达式都可以省略,但是俩个分号缺一不可
2. for循环的执行特点:先判断,再执行;与while相同。
3 .for循环三个表达式,都可以有多部分组成,第二部分中的多个判断条件用&& ||连接,第一,三部分用逗号连接。
【循环控制语句】
1. break: 跳出本层循环,继续执行循环后面的语句。
如果,循环有多层嵌套,则break只能跳出一层
2. continue:跳过本次循环剩余的代码,继续执行下一次循环。
① 对于for循环,continue之后执行的语句,时循环变量更新语句i++;
② 对于while,do-while循环,continue之后执行的语句是循环条件判断,
因此,使用,这两个循环时,必须将continue放到i++之后使用。否则,continue将跳过i++,导致死循环。
for (var num = 1, num1= 20; num <= 9 && num1 >= 14; num++, num1--) { document.write(num + "<br />"); }
六.函数
1.函数的声明及调用
①.函数的声明格式
function 函数名(参数1,参数2,...){ //函数体代码 return 返回值; }
②函数的调用:
① 直接调用: 函数名(参数1的值,参数2 的值,....);
② 事件调用方式: 在HTML标签中,使用事件名 = " 函数名(参数1的值,参数2 的值,....)"
<button onclick="saySth('blue','哈哈哈哈')">点击,打印</button>
2.函数的注意事项
① 函数名必须要符合小驼峰法则:首字母小写,之后每个单词首字母大写
② 函数名后面的括号中,可以有参数,也可以没有参数,分别称为有参函数,无参函数。
③ 声明函数时的参数列表称为形参列表,形式参数。(变量的名字)
function saySth(color,str){}
调用函数时的参数列表,称为实参列表。实际参数(变量的赋值)
saySth("red","换个影子");
④ 函数的形参列表个数与实参列表的个数没有实际关系。
函数参数的个数,取决于实参列表。
如果,实参列表的个数,小于形参列表,则未赋值的形参,将为undefined
⑤ 函数可以有返回值,使用return返回结果。
调用函数时,可以使用一个变量接受函数的返回结果。
如果,函数没有返回值,则接受的结果为undefined。
function fun(){ return "hahah"; } var num = fun(); //num = hahah
⑥ 函数中变量的作用域:
JS中只有函数才有作用域:函数作用域。
即,函数{}中的局部变量只能在函数域中使用。而其他的{}(如:for{})中的局部变量能在{}外面使用。
函数中,使用var声明的变量,为局部变量,只能在函数内部访问;
不用var声明的变量,为全局变量,在函数外也能访问。
函数的形参列表,默认为局部变量,只能在函数内部使用。
⑦ 函数的声明与函数的调用没有先后之分,即,可以在函数声明之前调用函数
fun(); //在fun声明之前调用也可以 function fun(){ return "hahah"; }
七.匿名函数的声明与使用
1.声明一个匿名函数直接赋值给某一个事件
window.onload = function(){}
2.使用匿名函数表达式,将匿名函数赋值给一个变量。
声明:var func = function(){}
调用:func();
注意:使用匿名函数表达式时,函数的调用语句,必须放在函数声明语句之后!!!!(与普通函数的区别!!!)
3.自执行函数:
① !function(){}(); //可以使用多种运算符开头,但一般用!
!function(形参列表){}(实参列表);
② ( function(){}() ); //使用()将函数及函数后的括号包裹
③ (f unction(){} )(); //使用()只包裹函数部分
三种写法的特点:
① 使用!开头,结构清晰,不容易混乱,推荐使用;
② 能够表明匿名函数与调用的()为一个整体,官方推荐使用;
③ 无法表明函数与之后的()的整体性,不推荐使用。
4.函数的内部属性
1. Arguments对象
① 作用:用于储存调用函数时的所有实参。当我们调用函数,并用实参赋值时,实际上参数列表已经保存到Arguments数组中,
可以在函数中,使用Arguments[n],的形式调用。n从0开始。
② Argument数组的个数,取决于实参列表,与形参无关。
但是,一旦第n个位置的形参,实参,arguments都存在时,形参将于arguments绑定,同步变化。
(即在函数中修改形参的值,arguments也会改变。反之,亦成立)
③ arguments.callee()是arguments的主要属性。表示arguments所在函数的引用地址;
在函数里面,可以使用arguments.callee()调用函数本身。
在函数内部,调用函数自身的写法,叫做递归。
结构上类似do-while结构
var num = 1; function func(){ //递归 console.log(num); //do,循环开始处 num++; //循环体操作 if(num<=4){ //while,判断条件 arguments.callee(); //递 } num--; //归 console.log(num); } func();
代码执行顺序:
递归分为两部分:递 和 归。以递归调用语句为界限,可以将函数分为上下两部分。
递:当函数执行上半部分,遇到自身的调用语句时,继续进入内层函数,再执行上半部分。直到执行完最内层函数。
归: 当最内层函数执行完以后,再从最内层函数开始,逐渐执行函数的下半部分。
当最外层函数执行时,遇到自身的调用语句,会进入内层函数执行,而外层函数的后半部分暂不执行。
直到最内层函数执行完以后,在逐渐向外执行。
console.log(history);