JS基础

Posted 2020-10-04

01-JS中的变量和输入输出

　　一、【使用JS的三种方式】

　　1、在html标签中直接内嵌js。（不提倡使用，不符合w3c关于内容与行为分离的要求）

　　2、在html页面中使用<script></script>包裹js代码。（Script标签可以放到页面的任何位置)　　

　　　　<script type="text/javascript">
　　　　　　js代码
　　　　</script>

　　3、引入外部的js文件，使用script标签

　　　　<script type="text/javascript" language="JavaScript" src="js/01.js" ></script>　　　　

　　【注意】

　　1、<script></script>可以嵌入到界面的任意位置，但是位置的不同会导致js代码的执行顺序不同

　　　　比如：<script></script>放到body前面，js代码会在页面加载之前执行。

　　2、引入外部js代码的script，必须是成对出现的标签，而且标签中不能再有任何js代码。

　　二、【js中的变量】

　　1、js中变量声明的写法

　　（1）、var num = 10;使用var声明的变量属于局部变量，只在当前作用域内有效

　　（2）、num = 10;不用var声明的变量，默认为全局变量，在整个js文件中都有效

　　（3）、var x=8,y,z=10;使用一行语句同时声明多个变量，上式中y属于已声明但是未赋值状态，结果为undefined；

　　三、【声明变量的注意事项】

　　1、js中所有变量的声明均使用var关键字，变量具体是什么数据类型取决于给变量赋值的类型；

　　2、js中同一个变量可以在多次不同赋值时，修改变量的数据类型　　

　　　　例如：var a=10；初始声明a是整数型
　　　　　　   a="哈哈哈"；重复赋值时，整数型a被修改为字符串型。

　　3、变量可以使用var声明，也可以不使用var声明，其区别在于使用var声明的变量属于局部变量，不用var声明的变量，默认为全局变量。

　　4、只用var声明但是不赋值，结果为undefined，如果不声明也不赋值的a，直接使用会报错。

　　　　例如：var a； a为undefined

　　5、同一个变量名可以多次使用var声明，但是后面的var只会被理解为普通的赋值操作。

　　四、【变量名的命名要求】

　　1、变量名只能有字母数字下划线组成

　　2、开头不能是数字

　　3、变量名区分大小写，大写字母与小写字母为不同变量

　　五、【变量名的命名规范】

　　1、要符合小驼峰法则(骆驼命名法)：首字母小写，之后每个单词的首字母大写  例如：myNameIsLiuPeng

　　2、匈牙利命名法：所有字母小写，单词之间用_分隔  例如：my_name_is_liu_peng

　　六、【js中的数据类型】（重点）

　　1、undefined：意思是未定义，已经使用var声明的变量，但是没有赋值，此时var a；中的a就是未定义。

　　2、null：空的引用

　　3、boolean：布尔类型，表示真假，只有两个值：true/false

　　4、number：数值类型，可以是整数，也可以是小数

　　5、string：字符串类型，用双引号或单引号包裹的内容称为字符串。

　　6、object：对象类型

　　七、【常用的数值函数】

　　1、is NaN()：判断一个变量或常量是不是NaN（not a num 非数值）

　　　注：使用isNaN()判断时，会尝试使用Number()函数进行转换，如果最终结果能够转为数字，则不是NaN，结果为false

　　2、Number()函数：将其它类型的数据尝试转为数值型；

　　[字符串类型]

　　（1）、字符串为纯数值字符串，会转为对应的数字；"111"->111

　　（2）、字符串为空字符串，会转为0；""->0

　　（3）、字符串包含任何其它字符时，都不能转；"1a"->NaN

　　[boolean类型]  true->1    false->0

　　[null/undefined]  null->0    undefined->NaN 

　　3、parseInt()：将字符串转为整数类型；（只能是字符串，转其它类型全是NaN。）

　　（1）、纯数值字符串，直接转为相应的数字。"12"->12;  "12.9"->12（小数转化不进行四舍五入）

　　（2）、空字符串不能转。""->NaN

　　（3）、包含其它字符的字符串，会截取第一个非数值字符串前的数字部分。"123a456"->123

　　[Number与parseInt函数的区别]

　　（1）、Number函数可以转各种数据类型，parseInt只能转字符串

　　（2）、两者在转字符串时，结果不完全相同，详见上面解释。

　　4、parseFloat()：将字符串转为数值型；"12.5"->12.5;   "12"->12；

　　　　转换规则与parseInt相同，只是如果有小数则保留小数点，如果没有小数则为整数

　　5、typeof:检测变量的数据类型：字符串->string；数值->number；未定义->undefined；true/false->boolean；对象/null->object；函数->function

　　八、【js中常用的输入输出语句】

　　1、document.write()；将括号中的内容打印输出到浏览器屏幕上；

　　注意：除变量常量外的所有内容，必需放到""里面，变量和常量必需放到""外面；如果同时有变量和字符串，必需用+链接。

　　　　eg：document.write("左手中的纸牌"+left+"<br />")；

　　2、alert();使用弹窗输出。其作用为弹窗警告，()中的内容与上述要求相同。

　　3、prompt();弹窗输入，接收两部分参数：

　　（1）、输入框上面的提示内容，可选

　　（2）、输入框里面的默认信息，可选

　　当只写一部分时，表示输入框上面的提示内容。可以定义变量接收输入的内容，点击确定按钮，变量将被赋值为输入的内容，点击取消按钮，变量将被赋值为null。

　　（3）、输入内容时，默认接收的类型都是字符串

02-JS中的运算符

　　一、【算术运算(单目运算符)】

　　1、+加 、-减、*乘、 /除、 %取余、++自增 、--自减

　　2、＋号有两种作用，分别是链接字符串/加法运算。当＋两边全为数字时，进行加法运算；当＋两边任意一边为字符串时，起链接字符串的作用，链接之后的结果为字符串。

　　注意：除加号外，其余符号运算时会先尝试将左右两边用number函数转为数字。除号结果会保留小数点。

　　3、++：自增运算符，将变量在原有基础上加1； --：自减运算符，将变量在原有基础上减1

　　【a++和++a的异同】

　　1、相同点：最后的运算结果，a的值均会加1

　　2、不同点：a++先用a的值去运算，再把a+1；++a先把a+1，再用a+1以后的值去运算　　

　　　　eg：var a=3,b,c;
　　　　　　b=a++ +2;//先用a运算，b=3+2，再把a+1，a=4
　　　　　　c=++a +2;//先把a+1，a=5，再用a+1以后的值去运算，c=5+2

　　二、【赋值运算】

　　1、=赋值号、+=  -=  *=  /=  %=

　　+=：a+=b；相当于a=a+b，但是前者的运算效率要比后者快，所以推荐+=的写法。（其余的类推）　　

　　三、【关系运算】

　　1、==等于、===全等、  !=不等、!==不全等、>大于、<小于、>=大于等于、<=小于等于

　　2、关系运算符，运算之后的结果只能是boolean类型

　　3、判断一个数字是否处于某个区间，必须用&&链接 a<10 && a>0正确    10>a>0错误

　　4、===：严格等于（全等），要求不但要类型相同，值也相同，类型不同，结果直接为false，类型相同再进行下一步判断

　　5、==：等于，类型相同与===效果一样，类型不同时，会先尝试用number函数将两边转为数字再进行判断。但是有个别特列，如：null==false 错误；null==undefined 正确

　　四、【条件运算符(多目运算)】

　　1、a>b?true:false

　　2、有两个重要符号：？和：

　　（1）、当？前面部分运算结果为true执行：前面的代码。当？前面部分运算结果为false执行：后面的代码

　　（2）、冒号两边可以为数值，则整个式子可用于赋值 var a=1<2?1:2;

　　（3）、冒号两边可以为代码块，将直接执行代码：1<2?alert(1):alert(2)

　　（4）、多目运算符可以多层嵌套。var a=1<2?alert(1):1>0?4:5;

　　五、【位运算符、 逻辑运算符】

　　1、&&与、||或、!非

　　2、&&两边都成立结果为true；||两边有任意一边成立结果为true；

　　六、【运算符的优先级】　

　　　　　()                         //小括号最高
　　　　　! ++ --                 //单目运算符
　　　　　* / %
　　　　　+ -
　　　　    > < >= <=
　　　　　== !=
　　　　　&&                      //与或同时存在时，&&比||高
　　　　　||
　　　　　= += -= *= /=       //最低的是各种赋值

03-JS中的分支结构

　　一、【if-else结构】

　　1、结构的写法：　

　　　　if(判断条件){
　　　　　　条件为true时，执行
　　　　}else{
　　　　　　条件为false时，执行
　　　　}

 

　　2、注意事项

　　（1）、else{}语句块可以根据情况进行省略

　　（2）、if和else后面的大括号可以省略，但是省略后，if、else后面只能跟一条语句（不建议省略大括号）

　　3、if()中的判断条件支持的情况

　　（1）、boolean类型：true为真，false为假

　　（2）、string类型：所有非空字符串为真，空字符串为假

　　（3）、number类型：一切非零数字为真，零为假

　　（4）、null、undefined、NaN：全为假

　　（5）、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。

　　四、【switch-case结构】

　　1、结构写法：在下面

　　　　var num=2;
　　　　switch (num>3){
　　　　　　case true:
　　　　　　document.write("第一个case")
　　　　　　break;
　　　　　　case false:
　　　　　　document.write("第二个case")
　　　　　　break;
　　　　　　case 3:
　　　　　　document.write("第三个case")
　　　　　　break;
　　　　　　default:
　　　　　　document.write("case都不成立，执行default")
　　　　　　break;
　　　　}

　　2、注意事项：

　　（1）、switch结构()中的表达式，可以是各种js支持的数据类型；

　　（2）、switch结构在进行判断的时候使用的是===(全等)判断；

　　（3）、case后面的表达式可以是各种数据类型，但是值要求各不相同，否则也只会执行第一个case；

　　（4）、break作用：执行完case代码后跳出当前switch结构

　　（5）、缺少break的后果：从第一个正确的case项之后，执行后面所有代码。

　　（6）、原因：switch结构在进行判断时，只会判断一次正确答案，当遇到正确的case之后，将不会再进行判断。

　　（7）、switch结构的执行效率要比多重if快，在多路分支结构中，推荐优先使用。

　　JS基础先讲这些，下周介绍一下JS中的重要两部分循环和函数。。。。。