JavaScript基础------有待完善

Posted 2020-09-07 夕照希望

最近开始学习javascript，整理了一些相关的基础知识，日后继续完善~~~

 

JS注释方式：
// 单行注释（Ctrl+/ ）
/*
段落注释(Ctrl+shift+/ )
*/

JavaScript基础
JavaScript：
基于浏览器 、基于（面向）对象、事件驱动、脚本语言
JavaScript的作用：
表单验证,减轻服务的压力，添加页面动画效果，动态更改页面内容，Ajax网络请求（Ajax：可以实现页面局部刷新）
JavaScript组成部分；ECMAScript（5.1/6）、DOM、BOM
ECMAScript脚本程序语言：
语法标准：语法；变量和数据类型；运算符；逻辑控制语句；关键字、保留字；对象
DOM文档对象模型
BOM浏览器对象模型

JavaScript的基本结构：
<script type="text/javascript">
JS语句;
</script>

变量的声明和变量：
先声明变量再赋值：
var width; width=5;
var——用于声明变量的关键字；width——变量名
...
同时声明变量和赋值
不声明直接赋值

【使用JS的三种方式】

1、html标签中内嵌JS；
<button onclick="alert(‘小样你真点啊！‘)">有本事点我呀！！！</button>
2、HTML页面中直接使用JS：
<script type="text/javascript">
JS语句;
</script>
3、引用外部JS文件：
<script language="JScript" src="JS文件路径"></script>

【注意事项】
1)页面中JS代码与引用JS代码，可以嵌入到HTML页面的任意位置。但是，位置不同会影响到JS代码的执行顺序；
例如：<script>在body前面，会在页面加载之前执行JS代码;
2)页面中JS代码，使用type="text/javascript"
引用外部的JS文件，使用language="JScript"
3)引用外部JS文件的<script></script>标签，必须成对出现，且标签内部不能有任何代码！

【JS中的变量】
1、JS中变量声明的写法:
var width = 10;//使用var声明的变量，只在当前函数作用域有效
width1 = 11;//不适用var，直接赋值生成的变量，默认为全局变量，整个JS文件有效
var a,b,c=1;//同一声明语句同时声明多个变量，变量之间用英文逗号分隔，但是，赋值需要单独赋值，例如上式中，只有c赋值为1，a b为undefined(未定义)。

【声明变量注意事项】
1）JS中所有变量类型声明，均使用var关键字。变量的具体数据类型，取决于给变量赋值的执行。2）同一变量可在多次不同赋值时，修改变量的数据类型
var width = 10;//width 为整型变量
width="hahaha";//width 被改为字符串类型
3）变量可以使用var声明，也可以省略var，[区别]不使用var，默认为全局变量
4）同一变量名，可以多次用var声明，但是并没有任何含义，也不会报错，第二次之后的声明，只会被理解为赋值。

2、变量的命名规范
1）变量名，只能有字母，数字，下划线，$组成
2）开头不能是数字
3）变量区分大小写，大写字母与小写字母为不同变量

3、变量命名名要符合驼峰法则：
变量开头为小写，之后每个单词首字母大写；
XiaoXiZhenMeng √
xiao_xi_zhen_meng √
xiaoxizhenmeng ×

4、JS中的变量的数据类型
Undefined：未定义，用var声明的变量，没有进行初始化赋值。var a;
Null：表示为空的引用。var a = null;（其中一种情况）eg:空对象，空数组。。。
boolean:真假，可选值true/false
Number:数值类型。可以是小数，也可以是正数。
String：字符串类型。用""和‘‘包裹的内容，称为字符串。
Object（复杂数据类型）：后续讲解，函数、数组等。。。

5、常用的数值函数：
1）isNaN：用于判断一个变量或常量是否为NaN（非数值）
使用isNaN判断时，会尝试使用Number（）函数进行转换，如果能转换为数字，则不是非数值，结果为false
"111" 纯数字字符串，false "" 空字符串，false "la" 包含其他字符，true
true/false 布尔类型，false
2)Number():将其他类型转换为数值类型
[字符串类型转数值]
>>字符串为纯数值字符串，会转为对应的数字"111"->111
>>字符串为空字符串时，会转换为0 ""->0
>>字符串包含其他非数字字符时，不能转换 "111a"->NaN

[布尔Boolean类型转数值]
true->1 false->0

[null/Undefined转数值]
null->0 Undefined->NaN

[Object类型转数值]
（以后再了解哦~）先调用ValueOf方法，确定函数是否有返回值，再根据上述各种情况判断。
3）parseInt:将字符串转成数值
>>>空字符串，不能转。结果为NaN
>>>纯数值字符串，能转。"123"->"123" "123.5"->123(小数转化时，会直接抹去小数点，不进行四舍五入)
>>>包含其他字符的字符串，会截取第一个非数值字符串前的数值部分。"123a456"->123 "a123b345"->NaN
>>>parseInt只能转String类型，Boolean/null/Undefined 均为NaN
4)parseFloat:将字符串转为数值
>>>使用方式同parseInt，但是，当转化小数字符串时，保留小数点；转化整数字符串时，保留整数；
"123.5"->123.5 "123.0"->123
5)typeOf:用来检测变量类型
未定义—>Undefined 字符串->string true/false->boolean 数值->Number
对象/null->Object 函数->function

 

【JS中的输出语句】
document.write();
输出语句，将write的（）中的内容打印在浏览器屏幕上
使用时注意：除变量/常量以外的任何内容，打印时必须放在""中，变量/常量必须放到""外
打印的内容同时有多部分组成，之间用“+”链接
例如：document.write("输出互换前手中的纸牌："+left+"<br />");
alert();弹窗警告

1、【算术运算】
+ 加、- 减、* 乘、 / 除、 % 取余、++ 自增、-- 自减

+:有两种作用，链接字符串/加法运算；当+两边均为数字时，进行加法运算；
当加号两边有任意一边为字符串时，进行字符串链接，链接之后的结果认为字符串
++：自增运算符，将变量在原来基础上+1；
--：自减运算符，将变量在原来基础上-1；

*【n++ 与 ++n 的异同】
* n++：先使用n的值进行计算，然后再把n+1;
* ++n: 先使用n的值+1，然后再用n+1以后的值，去运算；
* 相同点：不论是n++还是++n，在执行完代码以后，均会把n+1;
* eg: var a = 3;
var b,c;
b = a++ +2; //a=3 b=5 c=4
c = ++a +2; //a=4 b=5 c=7

document.write("a:"+a);
document.write("b:"+b);
document.write("c:"+c);

2、赋值运算
= 赋值、 += -= *= /= %=
+=：a += 5;相当于a = a + 5;但是，前者的执行效率要比后者快，

3、关系运算
== 等于、=== 严格等于、 ！= 不等于 、>、<、>=、<=

===：严格等于；类型不同，返回false；类型相同，再进行下一步判断
==：等于；类型相同，同===；类型不同，尝试将等式两边转为数字，再判断；
特例：null==Undefined √ ； null===Undefined ×

4、条件运算符(多目运算)
a>b?true:false

有两个关键符号：？和：
当？前面的部分运算结果为true时，执行：前面的代码；
当？前面的部分运算结果为false时，执行：后面的代码；

>>>多目运算符可以多层嵌套：
例如：var jieguo =

5、逻辑运算符
&& 与、|| 或、！ 非

6、【运算符的优先级】
（）
！ ++ --
% / *
+ -
> < >= <=
== !=
&&
||
各种赋值= =+ *= /= %=

【if-else结构】
1、结构写法：
if（判断条件）{
//条件为ture时执行
}else{
//条件为false时执行
}
2、if（）中的表达式，运算之后的结果应该为：
1）Boolean：true 真 ; false 假
2）string：非空字符串为真 ；空字符串为假
3）Number：0为假 ；一切非0均为真
4）Null/NaN/Undefined:全为假
5)Object:全为真
3、else{}结构，可以根据具体情况省略；

【多重if、阶梯if】
1、结构写法：
if(条件一){
//条件一成立
}else if(条件二){
//条件一不成立&&条件二成立

//else if 部分，可以有多个
}else{
//条件一不成立&&条件二不成立
}

2、多重if结构中，各个判断条件是互斥的，只能选择其中一个
3.if/else的大括号可以省略，但不提倡，如果省略，
则if/else包含的代码只包括其后最近的一行（分号结束）；
else结构永远属于其前方最近的一个if结构。

【嵌套if结构】
1、结构写法：
if（条件一）{
//条件一成立
if（条件二）{
//条件二成立
}else{
//条件为false时执行
}
}else{
//条件为false时执行
}
2、if结构可以多重嵌套，但是原则上不超过三层

【Switch-Case结构】
1、结构写法：
switch（表达式）{
case 常量表达式1：
语句一；
break；
case 敞亮表达式2：
语句二；
break；
。。。
default：
语句N
}
2、注意事项：
1）switch（）中的表达式，以及每个case后面的表达式，可以为任何JS支持的 数据类型；（对象和数组不同）；
2）case后面的所有常量表达式，必须各不相同，否则只会执行第一个；
3）case后的常量可以是任何数据类型；同一个switch结构的不同case，可以是多种不同的数据类型；
4）switch在进行判断时，采用的是全等判断===
5）break的作用：执行完case代码后，跳出当前switch结构；
缺少break的后果：从正确的case项开始，依次执行所有的case和defalse
6）switch结构在判断时，只会判断一次正确答案，当遇到正确的case项后，将会不再判断后续项目，依次往下执行；
7）switch结构的执行速率要快于多重if结构。在多路分支时，优先考虑switch结构。

 

【循环结构的步骤】
1)声明循环变量
2)判断循环条件
3)执行循环体(while的{}中所有代码)操作
4)更新循环变量
然后，循环执行2）3）4）

【JS中循环条件支持的数据类型】
1）Boolean：true 真 ; false 假
2）string：非空字符串为真 ；空字符串为假
3）Number：0为假 ；一切非0均为真
4）Null/NaN/Undefined:全为假
5)Object:全为真

while循环特点:先判断，在执行
do-while循环特点:先执行，在判断；即使初始条件不成立，do-while循环也至少执行一次

【For循环】
1、for循环有三个表达式，分别为：①定义循环变量 ② 判断循环条件 ③更新循环变量（三个表达式之间，用;分隔。）
for循环三个表达式可以省略，两个;缺一不可
2、for循环特点：先判断，再执行；
3、for循环三个表达式，均可以有多部分组成，之间用逗号分隔，但是第二部分判断条件
需要用&&链接，最终结果需要为真/假