H5学习第四周

Posted 2020-09-08 吴建锐

本周。我们结束了html标签和css样式部分，开始了JS的学习。JS是的内容和css，html基本上没有什么联系而且它比较需要逻辑思考能力，所以要从新开始学习。

使用js的三种方式：
1.html标签中内嵌js(不提倡使用):
<button onclick="javascript:alert(‘qoqoqoq‘)">kkkkkkkkkkkkkkkkkkkkkkk</button>
2.html页面中直接使用js：
<script type="text/javascript">
js代码；
</script>
3.应用外部js文件：
<script language="JavaScript" src="js文件路径"></script>


注意事项：
①页面中js代码和引用js代码可以嵌入html页面的任何位置，但是位置不同会影响到js代码的执行顺序。
例如<script>放在body之前会使页面在加载之前执行js代码。

②页面中js代码使用type="text/javascript"
引用外部js代码使用language="JavaScript"

③引用外部js文件的<script></script>标签必须成对出现且标签内部不能有任何代码。

js中的注释
//单行注释 ctrl+/
/*段落注释 ctrl+shift+/*/
//alert("kakakak")；

[js中的变量]
1.js中变量声明的写法：
var width=10;使用var声明的变量只在当前函数作用域有效，
width=10;不实用var直接赋值生成的变量默认为全局变量，整个js文件都有效。

var a,b,c=1 同一声明语句同时声明多个变量，变量之间用英文逗号分隔，但赋值需要单独赋，例如上
式只有c赋值为1，ab为undefined（未定义）。

[声明变量注意事项]
①所有变量类型声明均使用var关键字，变量的具体数据类型，取决于给变量赋值的类型。

②同一变量可以在多次不同赋值时修改变量的数据类型：
var width=10； width为整形变量。
width="啊啊"；width被改为字符串类型。

③变量可以用var声明也可以省略var。不使用var默认为全局变量。

④同一变量名可以多次用var声明，没有任何含义也不会报错，
第二次及之后的声明只会被理解为赋值。

2.变量的命名规范.
①变量名只能有字母数字下划线$组成，
②开头不能是数字，
③变量区分大小写，大写字母与小写字母为不同变量。
3.变量名命名需要符合驼峰法则：
变量开头为小写，之后每个单词首字母大写，或每个单词之间用下划线分隔（不推荐）。


【js中的输入输出语句】
1.文档中打印输出：document.write();
输出语句，将write的()中的内容打印在浏览器屏幕上；

使用时注意：除变量、常量以外的任何内容打印时必须放到
 ""中，变量，常量必须放到""外。

打印的内容同时包括多部分组成时，之间用+链接。
document.write("左手中的纸牌："+left+"<br/>");
2.弹窗输出alert();
弹窗警告，同上
3.弹窗输入:prompt("请输入您的名字","xx");
两部分参数：
① 输入框上面的提示信息。
② 输入框里的默认信息，
两部分之间用逗号分隔，只写一部分时默认为提示信息。

可以定义变量接收输入内容，例如
var name = prompt("请输入您的名字","xx");
点击确认按钮，输入成功，点击取消按钮name=null；
默认接受输入的格式为字符串格式。

var name = prompt("请输入您的名字","xx");
document.write("您的名字"+name)
【js中的变量的数据类型】
Undefined：未定义，用var声明的变量，没有进行初始化赋值。 var a；
Null：表示为空的引用。例如：空对象，空数组。
Boolean：(布尔)真假，可选值true、false
Number：数值类型，可以是小数，也可以是整数。
String：字符串，用""或‘‘包裹的内容，称为字符串。
Object（复杂数据类型）：函数，数组等。

【常用的数值函数】
①isNaN()：用于判断一个变量或常量是否为NaN(非数值)
使用isNaN()判断时会尝试使用Number()函数进行转换。
如果能转换为数字则结果为false，不是非数值，"111"
纯数字字符串，false 空字符串，false "1a"包含其他
字符，true ture、false布尔类型，false。

②Number():将其他类型转换为数值类型。
【字符串类型转数值】
>>>字符串为纯数值字符串，转为对应的数字。"111">111
>>>字符串为空字符串时会转为0。"">0
>>>字符串包含其他非数字字符时，不能转换。"111a">NaN

【布尔Boolean类型转数值】
true>1 false>0
【null，Undefined转数值】
null>0 Undefined>NaN

【Object类型转数值】
会先调用Valueof函数，确定函数是否有返回值，再根据上述情况判断。

③parseInt();将字符串转成数值。
>>>空字符串不能转，结果为NaN。
>>>纯数值字符串，能转，"123">123 "123.5">123(小数转化时抹掉小数点，不进行四舍五入)。
>>>包含其他字符的字符串，会第一个非数字字符前的数值部分。
"123a456">123 "a123a456">NaN
>>>parseInt()只能转string类型，Boolean、null，Undefined均为NaN。

④parseFlaot():将字符串转为数值，使用方式同parseInt()，
但是转化小数字符串时保留小数点，转化整数字符串时保留整数。
"123.5">123.5 "123">123

⑤typeof：用于检测变量的数据类型。
未定义>Undefined
字符串>String
true，false>Boolean
数值>Number
对象，null>Object
函数>function

 

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

+:有两种作用，链接字符串/加法运算；当+两边均为数字时进行加法运算
当+两边任意一边为字符串时进行字符串链接，连接之后的结果是字符串。
++：自增运算符，将变量在原来的基础上加一。
n++：先使用n的值计算，再把n+1。
++n：先把n的值加一，再把n+1后的值拿去计算。
二者在代码执行完以后均会把n+1。
--：自减运算符，将变量在原来的基础上减一。

var a = 3;
var b,c;
b = a++ +2; a=3 b=5 a=4
c = ++a +2; a=4 a=5 c=5

2.赋值运算
= 赋值， += -= *= /= %=

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

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

===：严格等于；类型不同直接返回false，类型相同，进行下一步判断；
==：等于，在类型相同时同===,类型不同，将等式两边均（用Number函数）转为数字再判断。
null==Undefined成立 null===Undefined不成立

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

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

多目运算符可以多层嵌套。
例如：var name = num>5?"输入太大":(num==5?"正确":"输入太小")

5.逻辑运算符
&& 与、|| 或、！非。与和或同时存在时与的优先级比或高。

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

 

[if-else结构]

1.结构写法：
if(判断条件){
　　条件为true时执行
}else{
　　条件为false时执行
}

2.if()中的表达式（可以是任何类型），运算之后的结果应该为：
① Boolean ：true 真 false 假。
② String ：非空字符串为真，空字符串为假。
③ Null/NaN/Undefined : 全为假。
④ Object ：全为真。
⑤ Number ：0为假，非0数字均为真。

3.else{}结构可以根据具体情况省略。



[多重if结构/阶梯if结构]
1.结构写法：
if（条件1）｛
　　条件1成立；
｝else if（条件二）｛
　　条件1不成立&&条件二成立；
　　else if 部分可以有n个。
｝else｛
　　条件1不成立&&条件二不成立；
｝
2.多重if结构中多个判断条件是互斥的，只能选择其中一条路。
3.if/else的大括号可以省略，但不提倡，如果省略，则if/else包
含的代码只包括其后最近的一行（分号结束）；else结构永远属于
其前方最近的一个if结构。



[嵌套if结构]
1.结构写法：
if(条件1){
　　条件1成立
　　if(条件2){
　　　　条件1成立&&条件2成立
　　}else{
　　　　条件1成立&&条件2不成立
　　}
}else{
　　条件1不成立
}

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

var a = parseFloat(prompt("请输入第一个数："));
var b = prompt("请输入运算符：");
var c = parseFloat(prompt("请输入第三个数："));

switch(b){
case "+":
document.write(a+b+c+"="+(a+c));
break;
case "-":
document.write(a+b+c+"="+(a-c));
break;
case "*":
document.write(a+b+c+"="+(a*c));
break;
case "/":
document.write(a+b+c+"="+(a/c));
break;
default:
document.write("输入错误");
break;
}

[循环结构的步骤]
1.声明循环变量。
2.判断循环条件。
3.执行循环体（while的｛｝中的内容）操作。
4.更新循环变量。
5.循环执行2，3，4.

[JS中循环条件支持的数据类型]
支持js中的所有数据类型。
① Boolean ：true 真 false 假。
② String ：非空字符串为真，空字符串为假。
③ Null/NaN/Undefined : 全为假。
④ Object ：全为真。
⑤ Number ：0为假，非0数字均为真。

[do-while循环]
while循环特点：先判断再执行。
do-whlie循环特点：先执行再判断，即使初始条件不成立也至少执行一次。
不会影响执行次数。
do-while结构：
do

｝while()；



[for循环]
for循环的结构：for(<初始循环变量>;<循环条件>;<变量的变化>){
　　语句；
}
1.for循环有三个表达式，分别为
①定义循环变量，
②判断循环条件，
③更新循环变量。
for三个表达式均可以省略，两个分号不能缺少。
2.for循环特点：先判断，后执行。
3.for循环三个表达式均可以由多部分组成，之间用逗号分隔，但是的二部分判断条件要用&&链接最终结果为真/假。

例：输出斐波那契数列的前20个数：

var a = 1;
var b = 1;
var c;
var i=3;
document.write(a + "<br/>");
document.write(b + "<br/>");

while (i<=20) {

c = a + b;
a = b;
b = c;

i++;
document.write(c + "<br/>");

}

找出所有水仙花数：

var i = 100;

var a, b, c;

while (i < 1000){

a = parseInt(i / 100);
b = parseInt(((i / 10) % 10));
c = i % 10;

if (i == a * a * a + b * b * b + c * c * c)
{
document.write(‘水仙花数： ‘ + i + ‘<br/>‘);
}
i++;
}