本文是学习陆老师的《python全栈工程师 - web开发前端基础》课程的笔记,欢迎学习交流。同时感谢陆老师的精彩传授!
一、课程目标
- 语句与注释
- 赋值语句
- 条件语句
- while语句
- for语句
二、详情解读
2.1.单行语句与语句注释
1.//用于单行注释
2./*用于多行注释*/
3.每行语句以;结束
4.console.log、console.info、console.debug、console.warn
代码示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
// 单行注释
/*
一次性注释多行
可以大块大块的注释
*/
// console.log、console.info、console.debug、console.warn、console.error
//var a = 10
var b = 20
var c = 20
</script>
</body>
</html>
运行结果:
2.2.赋值语句
1.var a = 10;
2.var a = b = c = 10;
3. var a = 10, b = 12, c = 13
4. 复合赋值 -=、+=、*=、/=、<<=、>>=、>>>=
代码示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
/*
var a = 10;
var a=b=c=10;
var a=10, b=12, c=13;
复合赋值 -=、+=、*=、/=、<<=、>>=、>>>=
移位: 首先转换为二进制,比如 2 转为 0000...0000010
取反码: 1111....1111101
取补码: 1111....1111110
*/
// var a = 10;
// a = b = c = 20
// a = b = c = 100-81
</script>
</body>
</html>
运行结果:
2.3.条件语句
比较运算符:>、<、>=、<=、==、!=、===、!==:
1.如果操作数是数值,直接比较,返回true或者false
2.如果操作数是字符串,则比较字符串的对应字符编码值
3.如果一个操作数是数值,则将另一个操作数变为数值进行比较
4.如果有一个值是布尔值,先转换为数值再比较
5.null与undefined相等
6.NaN不等于任何数,包括NaN
7.使用相等比较两个对象时,如果两个对象指向同一个对象,返回true
8.全等与全不等比较前不做任何类型转换
示例结果:
2.3.1.逻辑表达式
布尔操作符-逻辑非!:
1.如果操作数是一个对象,返回false
2.如果操作数是一个空字符串,返回true
3.如果是非空字符串,返回false
4.如果操作数是0,返回false
5.如果操作数是任意非0数,返回false
6.如果操作数是null、NaN、undifiend,返回true
示例结果:
布尔操作符-逻辑与&&:
var res = 操作数1 && 操作数2
1.如果第一个操作数为对象,返回第2个操作数
2.如果第一个操作数是false、null、undeifined,NaN,"",0,直接返回第一个操作数
短路操作:如果操作数1的布尔值为false,那么不会对操作数2求值
a = 10
b = 10
c = 11
a - b && c++
示例结果:
布尔操作符-逻辑或 ||:
var res = 操作数1 || 操作数2
1.如果第一个操作数是对象,返回第一个操作数
2.如果第一个操作数的求值结果是false,返回第二个操作数
短路操作: 如果操作数1的布尔值是true,那么不会对操作数2求值
a = 10
b = 10
c = 11
a - b || c++
示例结果:
2.3.2.条件语句if…else…
if(condition)
//单行语句
else if(condition) {
//多行语句
}
else {
//多行语句
}
示例代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
a = 10
b = 11
condition = a < b
if (!condition) {
console.log(condition)
}
if (!condition) {
console.log(condition)
} else {
console.info(condition)
}
a = 1
b = 2
condition = a + b
if (condition==1) {
console.log("condition=",condition)
} else if (condition==2) {
console.info("condition=", condition)
} else if (condition==4){
console.warn("condition=", condition)
} else {
console.debug("condition=", condition)
}
</script>
</body>
</html>
2.3.3.多条件分支语句switch
// 注意每个分支都要有break,不然会执行下面的分支
switch(expression){
case value:
//语句
break;
case value:
//语句
break;
default:
//语句
}
2.3.4.三元条件操作符
var = (condition) ? true_value: false_value;
//例子:
a = 12
b = 11
c = (a>b) ? a : b; // c = 12
2.4.while循环语句
// 第一种:
while(condition){
// do
}
// 第二种:该语句结构至少执行一次循环
do{
//do
} while(condition)
// 注意:一般不使用死循环,否则浏览器会卡死导致崩溃
//示例:
a = 10
while(a > 0) {
a--
console.log(a)
}
do{
a--
console.log(a)
}while(a > 0)
运行结果:(两个程序运行结果都是一样的)
2.5.for循环语句
for(initialization; expression; post-loop-expression) {
//do
}
// 示例:
for (i=0;i<=10; i++) {
console.log(i)
console.log("hello")
}
i = 5
for (;i<10; i++) {
console.log(i)
}
i = 5
for (;i<10;) {
i++
console.log(i)
}
i = 5
for (i=0, j=0;i<10 && j < 18;i++, j+=1) {
console.log(i, j)
}
2.6.for…in…循环语句
for(item in items) {
// do
}
该语句结构为迭代语句
示例:
array = [1,2,3,4,5]
for (item in array) {
console.log(array[item])
}
运行结果:
2.7.循环控制
2.7.1.break语句
break语句 用于中断循环
2.7.2.continure语句
continue语句 用于跳过本次循环
2.7.3.label语句
label语句 可以添加一个标签,用于break、continue引用
代码示例:
No1:
for (i=0;i<10;i++) {
for (j=0;j<3;j++){
if (j > 1) {
console.warn(j)
break No1
}
console.log("j=", j)
}
console.debug("i=",i)
}
运行结果:
i = 0
No2:
while (i < 100){
i++
console.debug("i=", i)
for (j=0; j<5; j++){
if (i%2==0) continue No2
console.warn(j)
}
console.log("---------------------------")
}
运行结果:
三、课程小结
1.学习了javascript的基本语句
2.学习了javascript的条件语句
3.学习了javascript的循环语句
4.学习了javascript的循环控制