JS入门

Posted 2020-09-07 老夫看你根骨奇特

一.

使用JS的三种方式
1html标签内嵌JS
<button onclick="javascrpt:alert(222222222)" >11111</button>
2.HTML页面中直接使用JS

<script type="text/javascript">

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

二.

JS中的变量
1JS中变量声明的写法：var width = 10;//使用var声明的函数只在当前函数作用域有效
width1 = 11;//不使用var,直接赋值生成变量，默认全局改变，整个JS文件有效
var a,b,c=1;同一声明语句同时声明多个变量，变量间用英文逗号分隔，但赋值需要单独赋，如上式只有c赋为1，a/b为undefine(未定义)
注意1JS中所有类型声明都用var关键字。变量的具体数据类型，取决于给变量赋值的执行
2同一变量，可以在多次不同赋值时，修改变量数据类型：
var width = 10;//为整形变量
width="哈哈"；//width 被改为字符串类型
3变量可以使用var声明，也可以省略var.区别：不使用var,默认为全局变量
4同一变量名可以多次用var声明。但是没有任何含义也不会报错。第二次之后的声明，为被理解为赋值；
2变量命名规范：
1变量名只能由字母数字下划线$组成
2开头不能是数字
3变量区分大小写，大写字母和小写字母为不同变量
3变量名命名要符合驼峰法则：
变量开头为小写，之后每个单词首字母大写（或单词间用下划线分隔）
jiaoYingCai√
jiao _ying_cai√
jiaoyingcai×
4JS中变量的数据类型
undefine:未定义，用var声明的变量，没有进行初始化赋值。var a;
null:null,表示空的饮用。var a = null;
boolean:真假，可选值true/false
number：数值类型，可以是小数，也可以是整数。
string：字符串类型。用""或‘‘包裹的内容，称为字符串
object：复杂数据类型：函数数组等
5常用的数值函数：
1 isNaN:用于判断一个变量或常量是否为NaN（非数值）
使用isNaN判断时，会常试用number（）函数进行转换，如果能转换成数字，则不是非数值，结果为false
"111"纯数字字符串，false""空字符串，false"1a"包括其他字符true
true/false布尔类型，false
2 number():将其他类型转换为数值类型
字符串类型转数字
1 字符串为纯数值字符串，会转化为数字
2 字符串为空字符串会转化成0
3字符串包含其他非数字字符时，不能转换:"111a" NaN
4 布尔boolean类型转数值 null 0 ;undefine NaN
5object类型转数值
先调用valueof函数，确定函数是否有返回值，再根据上述各种情况判断。
6parseint:将字符串转化为数值类型
空字符串，不能转，结果为NaN
纯字符串能转"123" 123;"23.4" 23;(小数转化时，抹掉小数点后边的)
包含其他字符的字符串。会截取第一个非数值字符前的数值部分。"123a1111" 123;"a1111" NaN;
parseint只能转string类型，boolean/null/undefined均为NaN
7parsefloat:将字符串转化为数值
使用方式同parseint.但是当转化小数字符串时，保留小数点后边的；转化整数字字符时保留整数
⑤typeof: 用来检测变量数据类型
未定义 ->Undefined 字符串 -> Sting true/false -> boolean
数值 -> Number 对象/null -> object 函数 ->

三.JS输出语句：document.weite()注意：除变量/常量以外的任何内容，打印时必须放在""中，变量/常量放在""外打印由多部分组成用+连起来。

    弹窗输出： alert()使用方式同输出语句

   弹窗输入：prompt("请输入您的名字"，"某某")；

* 两部分参数：1输入框上面的提示信息
* 2输入框里面的默认信息
* 两部分之间用逗号分隔，只写一部分默认为提示信息；
* 默认接收输入的内容，为字符
* 可以定义变量接受输入内容，例如var name = prompt("请输入您的名字"，"姜浩")；；点击确定按钮，输入成功；点击取消按钮，name = null;四。

四。运算符

 

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 a=4
c = ++a +2; // a=4 a=5 c=7

2、赋值运算
= 赋值、 += -= *= /= %=

+=： a += 5;相当于 a = a + 5; 但是，前者的执行效率要比后者快。

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

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

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

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

>>>多目运算符可以多层嵌套：
例如：var jieguo = num>5?"输入太大":(num==5?"蒙对了！":"输入太小");

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


[运算符的优先级]
()
! ++ --
% / *
+ -
> < >= <=
== !=
&&
||
各种赋值 = += *= /= %=

  五.JS中的分支结构

 

【if-else结构】
1、结构写法：
if(判断条件){
//条件为true时执行
}else{
//条件为false时执行
}
2、if()中的表达式，运算之后的结果应该为：
① Boolean： true 真 false 假
② String：非空字符串为真 空字符串为假
③ Number：0为假 一切非0，均为真
④ Null/NaN/Undefined： 全为假
⑤ Object：全为真
3、else{}结构，可以根据具体情况省略；
*/
var num = {};

if(num){
//条件为true时执行
document.write("if条件成立");
}else{
//条件为false时执行
document.write("if条件不成立");
}
// num<10?document.write("if条件成立"):document.write("if条件不成立");



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

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

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结构。

六.循环·

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

【JS中循环条件支持的数据类型】
① Boolean： true 真 false 假
② String：非空字符串为真 空字符串为假
③ Number：0为假 一切非0，均为真
④ Null/NaN/Undefined： 全为假
⑤ Object：全为真

while循环特点：先判断，再执行；
* do-while循环特点：先执行，再判断；即便初始条件不成立，do-while循环也至少执行一次；

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