8.20 一周学习总结
2017-08-20 23:29 之晴 阅读(174) 评论(0) 编辑 收藏 举报一、使用JS的三种方式
1、html标签中直接内嵌JS
<button onclick="alert('小婊砸！你真点！')">有本事点我呀！！</button>
不符合W3C内容与行为分离的要求，不提倡使用
2、html页面中使用<script></script>包裹JS代码
<script type="text/javascript">
JS多行注释,中间 * 号可删掉 Ctrl+Shift+/
JS单行注释 Ctrl+/
//JS代码
</script>
>>><script></script>标签可以放到页面中任何一个位置
3、引入外部js文件
<script language="JavaScript" src="js/01.js"></script>
注意事项：
①<script></script>标签可以嵌入到页面中任意位置；但位置不同会导致JS代码执行顺序不同
例如：<script></script>放到<body></body>前面，则JS代码会在页面加载之前就执行
②引入外部JS代码，<script></script>必须是成对出现的代码，而且标签中不能再有任何的JS代码（有也不会生效）
二、JS中变量
1、JS中变量声明的写法：
var num=10;//使用var声明的变量，属于局部变量，只在当前作用域有效
num=10; //不用var声明的变量，属于全局变量(即使是全局变量，作用范围也仅仅是这一行+这一行往下的范围，
再往上，超出了它的作用域)，在整个JS文件中有效
var x=8,y,z=10;使用一行语句，同时声明多个变量,这条语句表明，x初值8,y未赋初值,z初值10
声明变量的注意事项
①JS中所有变量的声明，均使用var关键字。变量具体是什么类型，取决于赋给变量值的类型。
②JS中同一个变量，可以在多次不同赋值时，修改变量的数据类型：
var a=10; //初始声明时，a属于int型
a = "哈哈哈";//重复赋值时，a被修改为string型
③变量可以使用var声明，也可不使用var声明
[区别]：使用var声明为局部变量，不使用var声明为全局变量
④只用var声明，但是不赋值，结果为undefined(未赋值)
例如：var a;//a为undefined
但不赋值也不声明a，直接使用会报错
⑤同一变量名，可以多次使用 var声明。但后面的var并没有什么用，第二次var声明时，只会被理解为普通的赋值操作。
2、变量名的命名要求：
①变量名只能有字母数字下划线组成
②开头不能是数字
③变量名区分大小写 ，大写字母与小写字母为不同变量
大写字母用来声明常量
3、变量名命名规范：
①要符合小驼峰法则(骆驼命名法)，第一个单词首字母小写，剩下的每个单词首字母大写，myNameIsHuiRui
②匈牙利命名法，所有字母小写，下划线分隔,my_name_is_hui_rui
4、JS中的数据类型
①Undefined:未定义。已经使用var声明，但没有赋值的变量，例: var a;
②Null:表示空的引用。
③Boolean:布尔类型。表示真假，只有两个值：true/false
④Number:数值类型。可以是整数，也可以是小数
⑤String:字符串类型，用 "" 或 '' 包裹的内容，称为字符串
⑥Object:对象类型
面试重点:6种数据类型
5、[常用的数值函数]
①isNaN():判断一个变量或常量是否是NaN(not a num 非数值);
使用isNaN()判断时，会尝试使用Number()函数进行转换，若能进行转换成数字，则不是NaN,结果为false
②Number()函数:将其他类型的数据尝试转为数值型
字符串类型
>>>字符串为纯数值字符串，转为对应的数字 "111"->111
字符串为空字符串， 转为数字0 ""->0
字符串包含其他任意字符时，都不能转为数字 "1a"->NaN
*
Boolean类型: true转为1,false转为0
Null/Undefined:Null->0 Undefined->NaN
③ParseInt():将字符串转换为整数类型
>>>纯数值字符串，能转。
"12"->12;"12.9"->12(小数转换时，不进行四舍五入)
>>>空字符串不能转 ""->NaN
>>>包含其他字符的字符串，会截取第一个非数值字符串前的数字部分 "123a456"->123 "a123456"->NaN
>>>ParseInt()只能转字符串,转其他类型,全是NaN
面试重点:Number()函数与ParseInt()函数的区别：a、Number()函数可以转各种数据类型,
ParseInt()函数只能转字符串
b、两者在转字符串时,结果全然不同,见上详解
④ParseFloat():将字符串转换为数值型
转换规则与ParseInt()相同,只是如果有小数点,则保留小数点,如果没有,则依然是整数
"12.5"->12.5 "12"->12
⑤typrof():检测变量数据类型
字符串->String 数值->Number true/false->Boolean
未定义->Undefined 对象{}/Null->Object 函数->function
三、JS中常用的输入输出语句
1、document.write():将()中的内容打印输出到浏览器屏幕上
使用需注意:除变量、常量外的所有内容,必须放到 "" 中; 变量和常量必须放到 "" 外;
如果同时有变量和字符串,必须用+连接;
eg: document.write("左手中的纸牌: "+left+"<br />");
2、alert():使用弹窗输出
弹窗警告,()中的内容与上述要求相同
3、prompt():弹窗输入
接受两部分布参数: ①输入框上面的提示内容，可选
②输入框里面的默认信息，可选
当只写一部分时，表示输入框上面的提示内容
可以定义变量，接受输入的内容。点击确定按钮，变量将被赋值为输入的内容，点击取消按钮，变量将被赋值为null
输入内容时，默认接受的数据类型都是字符串
四、算术运算符
1、算术运算(单目运算符) : + 、 -、 *、 /、 %、 ++ 、 --
加 减 乘 除 取余 自增运算符 自增运算符
+: 有两种作用，连接字符串/加法运算符。当 + 两边全为数字时，进行加法运算；
当 + 两边有任意一边为字符串时，起连接字符串的作用，，连接之后的结果为字符串
除 + 外，其余符号运算时，会先尝试将左右变量用Number函数转为数字
/ :结果将会保留小数(可以保存16位)
++: 自增运算符 ,将变量在原有基础上加1
--: 自减运算符 ,将变量在原有基础上减1
a++ 和 ++a的异同:
①相同点:无论 a++ 还是 ++a,运算完后结果相同
②不同点:
a++:先用a的值去运算,语句执行完后a再+1
++a:先把a的值+1,然后再用加完后的值(a+1)去执行语句
eg:var a=3,b=a++ +2,c=++a +2;
alert(a);
alert(b);
alert(c);
结果为:5 5 7
2、赋值运算: = += -= *= /= %=
赋值号
+=: a+=b,相当于 a=a+b;但是,前者运算效率快，推荐使用前者
3、关系运算: ==、 !=、 === !== >、<、>=、<=
严格等于 不严格等于
>>> 关系运算符,运算之后的结果只能是Boolean类型,true/false
>>> 判断一个数字是否处于某个区间，必须用 && 连接
eg:a<10 && a>0 √
10>a>0 ×
>>> ===: 严格等于；不但要求值相同，类型也必须相同，类型不同，结果直接为false;类型相同，再进行下一步判断
==: 等于。类型相同，与===效果一样。类型不同时，会尝试用Number函数将两边转为数字，再进行判断
特例:aNull==false × Null==Undefined √ NaN==NaN ×
4、条件运算符(多目运算): a>b?true:false
有两个重要符号： ? 和 :
? 前面部分 成立,执行: 前面的代码
? 后面部分 成立,执行: 后面的代码
:两边可以为数值, 则整个式子用于赋值 var a= 1<2?1:2;
:两边可以为代码块,将直接执行代码 1<2?alert(1):alert(2);
多目运算符可以直接嵌套 var a=1<2?alert(1):(1>0?4:5);
5、位运算符、 逻辑运算符: &&、 ||、 ！ && 和 || 同时存在时,&&的优先级高于||
与 或 非
&& 两边都成立,结果为true
|| 两边有任意一边成立,结果为true
alert(!true);
6、运算符的优先级
() 小括号最高
! ++ -- 单目运算符
* / %
> >= < <=
+ -
== !=
&& && 和 || 同时存在时,&&的优先级高于||
||
= += -= *= /= 最低的是各种赋值
五、if-else 结构1、结构的写法:
if(条件){
//条件为 true 时，执行 if 中语句
}
else{
//条件为 false 时，执行 else 中语句
}
2、注意事项:
①else{} 语句块可以根据情况省略
②if 和 else 后的大括号可以省略，但是省略{}后,if 和 else 只能能跟一条语句，所以并不建议省略 {}
3、if 中的判断条件,支持的情况——面试常考
①Boolean: true 为真, false 为假
②String :空字符串为假，所有非空字符串(空格也算非空字符串)为真
③Number :零为假，一切非零数字为真
④Null/Undefined/NaN :假
⑤Object :全为真
多重 if、阶梯 if 结构
1、结构写法:
if(条件1){
//条件1成立执行
}
else if(条件2){
//条件1不成立且条件2执行
}
else{
//所有条件都不成立时执行
}
2、多重if结构中，各个判断条件是互斥的，选择其中一条执行；遇到正确选项并执行完后，直接跳出结构，不再判断后续分支
嵌套 if 结构
1、结构写法:
if(条件1){
//条件1成立
if(条件2){
//条件1不成立 && //条件2成立
}
else{
//条件1不成立 && //条件2不成立
}
}
else{
//条件1不成立
}
2、嵌套 if 结构中，如果省略 {},则 else 结构 永远属于离它最近的一个 if 结构
3、嵌套结构可以多层嵌套，但一般不推荐超过三层
能用多重 if 结构的一般不推荐使用嵌套 if
