javascript 流程控制及函数

回顾

基本语法

在html的使用

<script></script>

注释

//
/*  */

指令结束符

;
换行

输出

console.log()
document.write()
alert()

变量

var 变量名 = 值;
var 变量名;   //默认值undefind
var v1=100,v2=200,v3=400;  //同时声明多个变量

变量名的命名规范
由数字、字母、下划线和$ 组成，不能以数字开头
严格区分大小写。 建议使用小驼峰命名法
变量名不能使关键字和保留字

JS程序

获取页面中元素对象 getElementById()
对元素对象进行操作属性
事件 onclick
函数

数据类型

原始类型 Number String Boolean Null Undefined

对象类型 Object Array ...

Number 数字

NaN isNaN(参数)

String

声明方式：单引号双引号反引号(ES6) ${}

Boolean

true false

Null和Undefined

函数的默认返回值是null
没有赋值的变量是undefined

数据类型转换

自动转换: 取决于运算符
强制转换： Number() String() Boolean()

弱类型和强类型动态类型和静态类型（了解）

动态类型：不需要提前为变量指定数据类型
静态类型：需要为变量提前指定数据类型
强类型：数据类型不能自动转换
弱类型：数据库可以自动转换

JavaScript：  弱类型   动态类型
Python：      强类型   动态类型

运算符

算术运算符

+  - * / %  ++  --

比较运算符

==
===  建议
!=
!==
> >= < <=

逻辑运算符

&&
||
!

位运算符

赋值运算符

=
+=
-=
*=
/=
%=

其他运算符

?: 
typeof
+ 字符串连接符
in
instanceof
void

优先级

课堂笔记

1 流程控制

1.1 条件语句分支结构

单向分支

if (条件表达式) {
    code...
}

双向分支

if (条件表达式){
    
} else {
    
}

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>grade</title>
 6     <style>
 7         #item {
 8             border:2px solid #ff6700;
 9             width:300px;
10             height:30px;
11             font-size: 16px;
12             /*padding:10px;*/
13         }
14         #item1 {
15             width:300px;
16             height:200px;
17             border:2px solid #ff6700;
18             margin-top:20px;
19         }
20 
21 
22     </style>
23 
24 </head>
25 <body>
26     <h1>请输入您的成绩</h1>
27     <input type="number" id = "item">
28     <button onclick="outer()">submit</button>
29 
30     <div id = "item1"></div>
31 
32     <script>
33         function outer(){
34             var obj1 = Number(document.getElementById("item").value);
35             if (obj1>60) {
36                 var res = "你怎么这么菜，还不去学习"
37             }else {
38                 var res = "你比上一个还菜，还不快点去学习"
39             }
40 
41             
42             document.getElementById("item1").innerHTML = res
43         }
44 
45         
46     </script>
47 
48 
49     
50 </body>
51 </html>

双向分支

多向分支

if (条件表达式) {
    
} else if(条件表达式) {
    
} else if (条件表达式) {
    
} else {
    
}

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>同志交友</title>
 6     <style>
 7         input {
 8             width: 300px;
 9             padding: 10px;
10             font-size: 16px;
11             border: 1px solid #ccc;
12         }
13         button {
14             padding: 10px 20px;
15             border: 1px solid #ccc;
16             background: #f5f5f5;
17         }
18         #res {
19             margin-top:20px;
20             width: 300px;
21             min-height: 100px;
22             padding: 10px;
23             border:1px solid #ccc;
24         }
25 
26     </style>
27 </head>
28 <body>
29     <h1>同志交友</h1>
30     <hr>
31     <h3>请输入您的成绩：</h3>
32     <input type="number" id="score">
33     <button onclick="makeScore()">提交</button>
34 
35 
36     <div id="res"></div>
37 
38 
39     <script>
40         //声明函数
41         function makeScore() {
42             //获取用户输入的成绩
43             var score = Number(document.getElementById('score').value);
44 
45             //对成绩进行判断
46             var resContent = '';  //空字符串 声明定义 变量
47             if (score >= 90) {
48                 resContent = '不错哦，小同志，很优秀'; //修改变量的值
49             } else if (score >= 80) {
50                 resContent = '小同志，还行';
51             } else if (score >= 60) {
52                 resContent = '小同志，及格了';
53             } else {
54                 resContent = '你不是我的同志';
55             }
56 
57 
58             //把结果写入到div中 id=res
59             document.getElementById('res').innerHTML = resContent;
60 
61         }
62 
63     </script>
64 </body>
65 </html>

多向分支1

switch (条件表达式) {
        case 表达式可能的结果：code... break;
        case 表达式可能的结果：code... break;
        case 表达式可能的结果：code... break;
        case 表达式可能的结果：code... break;
        default code...
}

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>同志交友</title>
 6     <style>
 7         input {
 8             width: 300px;
 9             padding: 10px;
10             font-size: 16px;
11             border: 1px solid #ccc;
12         }
13         button {
14             padding: 10px 20px;
15             border: 1px solid #ccc;
16             background: #f5f5f5;
17         }
18         #res {
19             margin-top:20px;
20             width: 300px;
21             min-height: 100px;
22             padding: 10px;
23             border:1px solid #ccc;
24         }
25 
26     </style>
27 </head>
28 <body>
29     <h1>同志交友</h1>
30     <hr>
31     <h3>请输入您的生日：</h3>
32     <input type="date" id="yearInput">
33     <button onclick="makeFn()">提交</button>
34 
35 
36     <div id="res"></div>
37 
38 
39     <script>
40         //声明函数
41         function makeFn() {
42             //获取用户输入的日期
43             var date = document.getElementById('yearInput').value;
44             
45             //从日期中获取年 并且转换为Number
46             var year = Number(date.split('-')[0]);
47 
48 
49             //判断
50             var animal = '';
51             switch (year % 12) {
52                 case 0: animal = '猴'; break;
53                 case 1: animal = '鸡'; break;
54                 case 2: animal = '狗'; break;
55                 case 3: animal = '猪'; break;
56                 case 4: animal = '鼠'; break;
57                 case 5: animal = '牛'; break;
58                 case 6: animal = '虎'; break;
59                 case 7: animal = '兔'; break;
60                 case 8: animal = '龙'; break;
61                 case 9: animal = '蛇'; break;
62                 case 10: animal = '马'; break;
63                 case 11: animal = '羊'; break;
64                 default: animal = '驴';  //前面的条件都不满足
65             }
66 
67 
68             //把结果显示到页面中
69             document.getElementById('res').innerHTML = '您的生肖是： '+animal;
70 
71             /*
72                year % 12 --  0 ~ 11
73                 鼠   4     2008  奥运会   + 12  （2020）
74                 牛   5     2009
75                 虎   6     2010
76                 兔   7
77                 龙   8
78                 蛇   9
79                 马   10
80                 羊   11
81                 猴   0
82                 鸡   1
83                 狗   2
84                 猪   3
85             */
86 
87         }
88 
89         //console.log(2020 % 12)
90 
91     </script>
92 </body>
93 </html>

多向分支2

嵌套分支

if (条件表达式) {
    if (条件表达式) {
    
    } else {

    }   
} else {
    if (条件表达式) {
        
    }
}

1.2 循环语句

while循环

while (循环条件) {
    //循环体
}

do...while 循环

do {
    //循环体
} while (循环条件)

for 循环

注意for括号后的值用分号隔开

for (变量定义；循环条件; 变量变化) {
    //循环体
}

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>js cycle</title>
 6 </head>
 7 <body>
 8     <script>
 9         var i = 0;
10         while(i<11){
11             
12             console.log(i);
13             i++;
14         }
15         var m = 0;
16         do{
17             
18             console.log(m)
19             m++;
20         }while(m<11);
21 
22         for (var n = 0;n<11;n++){
23             console.log(n);
24 
25         }
26     </script>
27 </body>
28 </html>

三种循环

for循环奇偶筛选

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>for循环</title>
 6 </head>
 7 <body>
 8     <h1>同志交友</h1>
 9     <hr>
10 
11     <script>
12         // 输出 0 到 10之间的偶数
13         for (var a = 0; a < 11; a ++) {
14             if (a % 2 === 0) {
15                 console.log(a)
16             }
17         }
18 
19         console.log('');
20         // 输出 0 到 10之间的偶数
21         for (var i = 0; i < 11; i += 2) {
22             console.log(i)
23         }
24 
25         // 输出0-10之间的奇数
26         for (var m = 1;m<11;m+=2){
27             console.log(m)
28         }
29 
30         console.log('');
31         console.log(i);
32         console.log(a)
33         console.log(m);
34     </script>
35 </body>
36 </html>

for循环奇偶筛选

1.3 其他语句

跳转语句

continue;   跳出当前循环  继续下一次
break;      结束循环
return;     结束函数

异常

try {
    
} catch(err) {
    
}


try {
    
} catch(err) {
    
} finally {
    
}

catch相当于python的except

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>异常语句</title>
 6 </head>
 7 <body>
 8     <script>
 9         try {
10             console.log(username)
11         } catch(好多好) {
12             //括号里可自定义异常
13             console.log("error123uehufhf") 
14         } finally {
15             console.log("you should not do that")
16             //无论怎么都执行
17         }
18     </script>
19 </body>
20 </html>

异常捕捉

严格模式

//写在所有代码的最前面
//开启严格模式
//一般不用在代码前加上，自己写的代码要严格遵守规定，该缩进就缩进。
‘use strict’

严格模式下声明不加 var 会报错
eval() 在严格模式不能用

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>严格模式</title>
 6 </head>
 7 <body>
 8     <script>
 9         //js存在严格格式
10         //开启严格模式
11         'use strict'
12         
13         var username = '小丽丽';
14         //userage = 100; //严格模式下 声明变量必须加 var
15 
16         console.log(username)
17     </script>
18 </body>
19 </html>

严格模式

1.4 注意

当分支语句和循环语句结构体({}内) 只有一行代码的时候，可以省略{}

if (条件) 
    代码

如果有代码和唯一的一行代码缩进相同，第二行及以后的代码不受该条件限制。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>语句简写</title>
 6 </head>
 7 <body>
 8     <script>
 9         
10         var score = 10;
11 
12         if (score > 100) 
13             console.log('OK')
14         
15         console.log('哈哈哈')
16         console.log('直接来这里')
17     </script>
18 </body>
19 </html>

函数体内只有一行代码

2 函数

2.1 定义函数

//function 关键字方式
function 函数名(参数1, 参数2) {
    code...
}

//表达式方式
var  函数名 = function(参数1, 参数2) {
    code...
}

2.2 函数特点

函数名就是变量名
函数调用必须加 ()
关键字方式定义的函数，会存在函数提升（在函数定义的前面调用函数）function demo(){ }

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>JS如何定义函数</title>
 6 </head>
 7 <body>
 8     <script>
 9         //定义函数  多种方式
10 
11         demo(); //函数提升 （特殊情况） dem0
12         //fn(); //不存在变量提升
13 
14 
15         //function 关键字方式 def
16         function demo (a, b) {
17             console.log('demo');   
18         }
19 
20         //表达式方式 
21         var fn = function(a, b){
22             console.log('fn');     
23         }
24 
25         console.log('')  //空格
26         demo();             //demo
27         fn();             //fn
28 
29         var a = demo;
30 
31         a();
32 
33         console.log(typeof demo) //函数也是一种数据类型(对象类型)
34         console.log(typeof fn)
35         console.log(typeof fn())  //underfined
36 
37         // console.log('')
38 
39         //第三种函数 定义方式 (了解)
40         var myFun = new Function('a', 'b', 'c', 'console.log("myFun")');
41 
42         myFun();
43 
44 
45 
46 
47 
48 
49     </script>
50 </body>
51 </html>

js 函数定义的三种方式

2.3 函数的参数问题

形参和实参

实参数量>形参数量多给的实参会被忽略
实参数量<形参梳理多出的形参，默认值undefined

参数默认值

//ES6 新增的语法
function demo(a, b=默认值) {
    
}
//有默认值的参数 一定在后面

可变数量的参数

arguments对象 可以获取所有的实参
只能在函数中使用
arguments是类数组对象，用法同数组，可以使用for循环遍历

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>函数的参数</title>
 6 </head>
 7 <body>
 8     <h1>同志交友</h1>
 9     <hr>
10 
11     <script>
12         
13         //形参和实参数量
14         //定义函数
15         function demo(a, b) {
16             /*
17             ES6之间 默认值的写法  了解
18             if (b === undefined) {
19                 b = '默认值'
20             }*/
21             console.log(a+' 和 '+b+' 正在一起交友');
22         }
23 
24 
25         demo('小丽丽', '小刚刚');
26         demo('大丽丽', '大刚刚', '大花花'); //多给的实参 会被忽略
27         demo('老丽丽');    //如果少给了实参。 有个形参没有对应的实参，该形参默认值 undefined
28         demo();
29 
30         console.log('')
31 
32 
33         //参数默认值
34         function fn(a, b='小梅梅') {
35             console.log(`${a} 和 ${b} 一起跳舞`);
36         }
37 
38         fn('小刚刚');
39         fn('小刚刚', '小丽丽');
40 
41         console.log('');
42 
43 
44 
45         //可变数量的参数
46         //声明函数 实现 所有参数累加的和
47         function sum() {
48             //arugments 只能在函数里面用
49             var s = 0;
50             
51             //遍历 arguments 取出其中的每一个值
52             for (var i = 0; i < arguments.length; i ++) {
53                 s += arguments[i]
54             }
55 
56             //返回
57             return s;
58 
59         }
60 
61         console.log(sum(1,2,3,4))
62         console.log(sum(1,2,3,4,123,123,1231231,123123123123))
63 
64 
65 
66 
67 
68 
69     </script>
70 </body>
71 </html>

函数的参数

2.4 return

return 可以结束函数
return返回值
js return 只能返回一个值

2.5 回调函数

函数的参数还是函数

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>JS函数</title>
 6 </head>
 7 <body>
 8     <script>
 9         //回调函数 （高阶函数）
10         function fn(f1, f2) {
11             return f1(1)+f2(1)
12         }
13 
14         function demo(n) {
15             return n * 100;
16         }
17 
18         console.log(fn(Math.abs, demo))
19 
20         console.log('');
21 
22         //有名函数 从小到大
23         function mySort(v1,v2) {
24             if (v1 > v2) {
25                 return 5 //换过来 只要是正数 就会交换
26             } else {
27                 return -7 //不变  只要是负数 就不换
28             }
29 
30             return v1 - v2;
31         }
32 
33 
34         //有些方法的参数 要求就是函数
35         var list = [10,23,1,456,8,3,5]; //数组 Array
36         console.log(list);
37         //排序 字符串排序
38         //list.sort();
39         //按照自然排序
40         //list.sort(mySort)
41         list.sort(function(v1, v2){
42             return v1 - v2;
43         })
44 
45         console.log(list);
46 
47 
48     </script>
49 </body>
50 </html>

回调函数

2.6 自调函数

(function(){
    
})();

(function 函数名(){
    
})()

//如果多个自调函数连续写， 中间必须加 ; 否则报错
//产生局部作用域
//有效避免全局变量污染

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>自调函数</title>
 6 </head>
 7 <body>
 8 
 9     <script>
10     
11         (function demo() {
12             console.log('啊，我被调用了');
13         })();
14 
15 
16 
17         (function(){
18             console.log('啊，我也被调用了')
19         })()
20 
21 
22 
23 
24     </script>
25     
26 </body>
27 </html>

自调函数

(function() {

//所有的代码都写在这里
//函数局部作用域写在这里的变量都是局部变量
//全局变量容易造成全局变量污染

})()

如果你和同事在同一个html文件导入不同的js藜麦你有相同的变量名，会造成全局变量污染，所以都写成局部变量。

2.7 递归

总结

流程控制分支：单向分支双向分支多向分支(else if switch..case) 嵌套分支
流程控制循环： while循环 do...while循环 for循环
其他控制语句：跳转、异常、严格模式
函数（定义、特点、参数、自调、回调、递归）

posted @ 2018-08-09 18:57 Roc_Atlantis 阅读(158) 评论(0) 编辑收藏举报

刷新页面返回顶部

javascript 流程控制及函数

回顾

基本语法

在html的使用

注释

指令结束符

输出

变量

JS程序

数据类型

Number 数字

String

Boolean

Null和Undefined

数据类型转换

弱类型 和 强类型 动态类型和静态类型 （了解）

运算符

分类

算术运算符

比较运算符

逻辑运算符

位运算符

赋值运算符

其他运算符

优先级

课堂笔记

1 流程控制

1.1 条件语句 分支结构

单向分支

双向分支

多向分支

嵌套分支

1.2 循环语句

while循环

do...while 循环

for 循环

1.3 其他语句

跳转语句

异常

严格模式

1.4 注意

2 函数

2.1 定义函数

2.2 函数特点

2.3 函数的参数问题

形参和实参

参数默认值

可变数量的参数

2.4 return

2.5 回调函数

2.6 自调函数

2.7 递归

总结

公告

弱类型和强类型动态类型和静态类型（了解）

1.1 条件语句分支结构