JavaScript流程控制及函数
1 流程控制
1.1 条件语句 分支结构
单向分支
if (条件表达式) {
code...
}
双向分支
if (条件表达式){
} else {
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>同志交友</title>
<style>
input {
width: 300px;
padding: 10px;
font-size: 16px;
border: 1px solid #ccc;
}
button {
padding: 10px 20px;
border: 1px solid #ccc;
background: #f5f5f5;
}
#res {
margin-top:20px;
width: 300px;
min-height: 100px;
padding: 10px;
border:1px solid #ccc;
} </style>
</head>
<body>
<h1>同志交友</h1>
<hr>
<h3>请输入您的成绩：</h3>
<!-- 通过id来获取用户输入的值 -->
<input type="number" id="score">
<!-- 触发事件，也就是为了通过提交按钮，来触发该函数的执行 -->
<button onclick="makeScore()">提交</button> <!-- 通过id来将函数中逻辑运算的结果显示到div元素中 -->
<div id="res"></div> <script>
//声明函数
function makeScore() {
//获取用户输入的成绩
var score = Number(document.getElementById('score').value); //对成绩进行判断
if (score > 60) {
var resContent = '你的成绩及格, 来快活吧';
} else {
var resContent = '您的成绩你不及格，去死吧';
} //先定位到id，然后在点innerHTML，把结果写入到div中 id=res
document.getElementById('res').innerHTML = resContent; } </script>
</body>
</html>
双向分支
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>语句简写</title>
</head>
<body>
<script> var score = 10; if (score > 100)
console.log('OK') //条件不成立只有这一条语句会被执行
console.log('哈哈哈') //执行if语句这一句也会被执行，因为他其实并不是if语句内的代码，js中缩进并没有意义
console.log('直接来这里')
</script>
</body>
</html>
分支和循环的简写（了解）
多向分支
if (条件表达式) {
} else if(条件表达式) {
} else if (条件表达式) {
} else {
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>同志交友</title>
<style>
input {
width: 300px;
padding: 10px;
font-size: 16px;
border: 1px solid #ccc;
}
button {
padding: 10px 20px;
border: 1px solid #ccc;
background: #f5f5f5;
}
#res {
margin-top:20px;
width: 300px;
min-height: 100px;
padding: 10px;
border:1px solid #ccc;
} </style>
</head>
<body>
<h1>同志交友</h1>
<hr>
<h3>请输入您的成绩：</h3>
<input type="number" id="score">
<button onclick="makeScore()">提交</button> <div id="res"></div> <script>
//声明函数
function makeScore() {
//获取用户输入的成绩
var score = Number(document.getElementById('score').value); //对成绩进行判断
var resContent = ''; //空字符串 声明定义 变量
if (score >= 90) {
resContent = '不错哦，小同志，很优秀'; //修改变量的值,也就是对定义的变量进行重新赋值
} else if (score >= 80) {
resContent = '小同志，还行';
} else if (score >= 60) {
resContent = '小同志，及格了';
} else {
resContent = '你不是我的同志';
} //把结果写入到div中 id=res
document.getElementById('res').innerHTML = resContent; } </script>
</body>
</html>
多向分支
switch (条件表达式) {
case 表达式可能的结果：code... break;
case 表达式可能的结果：code... break;
case 表达式可能的结果：code... break;
case 表达式可能的结果：code... break;
default code...
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>同志交友</title>
<style>
input {
width: 300px;
padding: 10px;
font-size: 16px;
border: 1px solid #ccc;
}
button {
padding: 10px 20px;
border: 1px solid #ccc;
background: #f5f5f5;
}
#res {
margin-top:20px;
width: 300px;
min-height: 100px;
padding: 10px;
border:1px solid #ccc;
} </style>
</head>
<body>
<h1>同志交友</h1>
<hr>
<h3>请输入您的生日：</h3>
<input type="date" id="yearInput">
<!-- 触发事件，本质就是点击按钮，会调用该函数的执行 -->
<button onclick="makeFn()">提交</button> <div id="res"></div> <script>
//声明函数
function makeFn() {
//获取用户输入的日期
var date = document.getElementById('yearInput').value; //从日期中获取年 并且转换为Number
var year = Number(date.split('-')[0]); //判断
var animal = '';
switch (year % 12) {
case 0: animal = '猴'; break;
case 1: animal = '鸡'; break;
case 2: animal = '狗'; break;
case 3: animal = '猪'; break;
case 4: animal = '鼠'; break;
case 5: animal = '牛'; break;
case 6: animal = '虎'; break;
case 7: animal = '兔'; break;
case 8: animal = '龙'; break;
case 9: animal = '蛇'; break;
case 10: animal = '马'; break;
case 11: animal = '羊'; break;
default: animal = '驴'; //前面的条件都不满足
} //把结果显示到页面中
document.getElementById('res').innerHTML = '您的生肖是： '+animal; /*
year % 12 -- 0 ~ 11
鼠 4 2008 奥运会 + 12 （2020）
牛 5 2009
虎 6 2010
兔 7
龙 8
蛇 9
马 10
羊 11
猴 0
鸡 1
狗 2
猪 3
*/ } //console.log(2020 % 12) </script>
</body>
</html>
引用：根据年份判断该年份生肖
嵌套分支
if (条件表达式) {
if (条件表达式) {
} else {
}
} else {
if (条件表达式) {
}
}
1.2 循环语句
while循环
while (循环条件) {
//循环体
}
do...while 循环
do {
//循环体
} while (循环条件)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS循环</title>
</head>
<body>
<h1>同志交友</h1>
<hr> <!-- 三种循环方式： -->
<script>
//循环输出 0-10 //方式一：while循环
var m = 0;
while (m <= 10) {
console.log(m);
m ++; // m += 1 m累加
} console.log(''); //方式二：do ... while 循环
var n = 0;
do {
console.log(n)
n ++; // n += 1 n累加
} while(n <= 10); console.log('') //方式三：for 循环
for (var i = 0; i <= 10; i ++) {
console.log(i);
} </script>
</body>
</html>
while和do...while循环
for 循环
for (变量定义；循环条件; 变量变化) {
//循环体
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>for循环</title>
</head>
<body>
<h1>同志交友</h1>
<hr> <script>
// 输出 0 到 10之间的偶数，循环的次数比下面的一种方法多，可以通过console。count（）查看循环的次数
for (var a = 0; a < 11; a ++) {
if (a % 2 === 0) {
console.log(a) }
} console.log('');
// 输出 0 到 10之间的偶数
for (var i = 0; i < 11; i += 2) {
console.log(i)
} console.log('');
console.log(i); //12 因为i每次是加2
console.log(a) //11 因为i每次是加1
</script>
</body>
</html>
for循环
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>九九乘法表</title>
<style>
body {
color: #333;
}
table {
width: 900px;
table-layout: fixed;
border-collapse: collapse;
}
td {
border: 1px solid #ccc;
padding: 10px;
}
</style>
</head>
<body>
<h1>九九乘法表</h1>
<hr> <script>
//JavaScript生成九九乘法表
document.write('<table>'); //循环 输出tr 行
for (var i = 1; i <= 9; i ++) {
document.write('<tr>'); //输出 td 单元格
for (var j = 1; j <= i; j ++) {
document.write(`<td>${i}×${j} = ${i * j}</td>`);
} document.write('</tr>');
} document.write('</table>'); </script> </body>
</html>
for循环应用：九九乘法表
1.3 其他语句
跳转语句
continue; 跳出当前循环 继续下一次
break; 结束循环
return; 结束函数
异常
try {
} catch(err) {
}
try {
} catch(err) {
} finally {
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>异常语句</title>
</head>
<body>
<script>
try {
console.log(username)
} catch(err) {
console.log(err)
} finally {
//无论怎么都执行
}
</script>
</body>
</html>
try捕捉异常
catch相当于python的except
严格模式
//写在所有代码的最前面
//开启严格模式
‘use strict’
严格模式下 声明不加
var会报错eval()在严格模式不能用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>严格模式</title>
</head>
<body>
<script>
//js存在严格格式
//开启严格模式
'use strict' var username = '小丽丽';
//userage = 100; //严格模式下 声明变量必须加 var,不加var就会报错 console.log(username)
</script>
</body>
</html>
js严格模式
1.4 注意
当分支语句和循环语句 结构体(
{}内) 只有一行代码的时候，可以省略{}
if (条件)
代码
2 函数
2.1 定义函数
//function 关键字方式
function 函数名(参数1, 参数2) {
code...
}
//表达式方式
var 函数名 = function(参数1, 参数2) {
code...
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS如何定义函数</title>
</head>
<body>
<script>
//定义函数 多种方式 demo(); //函数提升 （特殊情况）
//fn(); //不存在变量提升 //方式一：function 关键字方式 def
function demo (a, b) {
console.log('demo');
} //方式二：表达式方式 --------相当于将一个匿名函数赋值给了一个变量
var fn = function(a, b){
console.log('fn');
} console.log('')
demo();
fn(); var a = demo; a(); console.log(typeof demo) //函数也是一种数据类型(对象类型)
console.log(typeof fn)
console.log(typeof fn()) console.log('') //方式三：第三种函数 定义方式 (了解)
var myFun = new Function('a', 'b', 'c', 'console.log("myFun")'); myFun(); </script>
</body>
</html>
定义函数的三种方式：
2.2 函数特点
函数名就是变量名
函数调用 必须加
()关键字方式定义的函数， 会存在函数提升 （在函数定义的前面 调用函数）
2.3 函数的参数问题
形参和实参
实参数量>形参数量 多给的实参会被忽略
实参数量<形参梳理 多出的形参，默认值
undefined
参数默认值
//ES6 新增的语法
function demo(a, b=默认值) {
}
//有默认值的参数 一定在后面
可变数量的参数
arguments对象 可以获取所有的实参
只能在函数中使用
arguments是类数组对象，用法同数组，可以使用for循环遍历
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>函数的参数</title>
</head>
<body>
<h1>同志交友</h1>
<hr> <script> //形参和实参数量
//定义函数
function demo(a, b) {
/*
ES6之间 默认值的写法 了解
if (b === undefined) {
b = '默认值'
}*/
console.log(a+' 和 '+b+' 正在一起交友');
} demo('小丽丽', '小刚刚');
demo('大丽丽', '大刚刚', '大花花'); //多给的实参 会被忽略
demo('老丽丽'); //如果少给了实参。 有个形参没有对应的实参，该形参默认值 undefined
demo(); //不传实参也不会报错，默认的形参都是undefined console.log('') //参数默认值
function fn(a, b='小梅梅') {
console.log(`${a} 和 ${b} 一起跳舞`);
} fn('小刚刚');
fn('小刚刚', '小丽丽'); console.log(''); //可变数量的参数
//声明函数 实现 所有参数累加的和
function sum() {
//arugments 只能在函数里面用
var s = 0; //遍历 arguments 取出其中的每一个值,arguments.length统计传入参数的长度
for (var i = 0; i < arguments.length; i ++) {
s += arguments[i]
} //返回，调用函数拿到返回值，但是要打印一下才能在控制台进行显示
return s; } console.log(sum(1,2,3,4))
console.log(sum(1,2,3,4,123,123,1231231,123123123123)) </script>
</body>
</html>
函数的参数
2.4 return
return 可以结束函数
return返回值
js return 只能返回一个值
2.5 回调函数
一个函数就可以接收另一个函数作为参数，这种函数就称之为回调函数(高阶函数)
函数的参数 还是 函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS回调函数</title>
</head>
<body>
<script>
//回调函数 （高阶函数）-------我们为f1和f2传入的不是连个具体的值，而是两个函数
function fn(f1, f2) {
return f1(1)+f2(1)
} function demo(n) {
return n * 100;
} console.log(fn(Math.abs, demo)) console.log(''); //有名函数 从小到大
function mySort(v1,v2) {
/*if (v1 > v2) {
return 5 //换过来 只要是正数 就会交换
} else {
return -7 //不变 只要是负数 就不换
}*/ return v1 - v2;
} //有些方法的参数 要求就是函数
var list = [10,23,1,456,8,3,5]; //数组 Array
console.log(list);
//排序 字符串排序---------即按位进行比较，然后在进行排序
//list.sort();
//按照自然排序
//list.sort(mySort)
list.sort(function(v1, v2){
return v1 - v2;
}) console.log(list); </script>
</body>
</html>
高级函数之回调函数
2.6 自调函数
函数声明完直接调用
(function(){
})();
(function 函数名(){
})()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自调函数</title>
</head>
<body> <script>
// 就是将函数整体放到小括号中进行调用，有名函数
(function demo() {
console.log('啊，我被调用了');
})(); // 既然整体放到小括号中被执行，所以可以将器设置为匿名函数，然后在加小括号进行调用
(function(){
console.log('啊，我也被调用了')
})() </script> </body>
</html>
自调函数
//如果多个自调函数连续写， 中间必须加 ; 否则报错
//产生局部作用域
//有效避免全局变量污染
2.7 递归
函数内部调用自己就是递归函数，
//用递归 实现阶乘
function multiply(n) {
if (n == 1) {
return 1
}
return n * multiply(n - 1)
}总结
流程控制 分支： 单向分支 双向分支 多向分支(else if switch..case) 嵌套分支
流程控制 循环： while循环 do...while循环 for循环
其他控制语句： 跳转、异常、严格模式
函数 （定义、特点、参数 、自调、回调、递归）
JavaScript流程控制及函数的更多相关文章
- javascript 流程控制及函数
回顾 基本语法 在html的使用 <script></script> 注释 ///* */ 指令结束符 ;换行 输出 console.log()document.write() ...
- javaScript流程控制与函数
流程控制 1.1 条件语句 分支结构 单向分支 if (条件表达式) { code... } <!DOCTYPE html> <html> <head> <m ...
- flutter--Dart基础语法（二）流程控制、函数、异常
一.前言 Flutter 是 Google 开源的 UI 工具包,帮助开发者通过一套代码库高效构建多平台精美应用,Flutter 开源.免费,拥有宽松的开源协议,支持移动.Web.桌面和嵌入式平台. ...
- Javascript流程控制
Javascript流程控制 1.条件语句 (1)if(exp)执行一句代码 (2)if(exp){执行代码段;} (3)if(exp){exp为true执行代码段}else{exp为false执行的 ...
- Go语言学习之3 流程控制、函数
主要内容: 1. strings和strconv使用2. Go中的时间和日期类型3. 指针类型4. 流程控制5. 函数详解 1. strings和strconv使用 //strings . strin ...
- Linux基础-shell脚本知识整理和脚本编写----------变量、运算符、流程控制、函数、计划任务（发送邮件）
I:知识整理:变量.运算符.流程控制.函数.计划任务 变量 系统变量:set:显示所有变量 env:环境变量 常用系统变量: path pwd lang home his ...
- JavaScript 流程控制-分支
JavaScript 流程控制-分支 1.流程控制 在一个程序执行的过程中,各条代码的执行顺序对程序的结果是有直接影响的,很多时候我们要通过控制代码的执行顺序来实现我们要完成的功能. 简单理解:流程控 ...
- Javascript初识之流程控制、函数和内置对象
一.JS流程控制 1. 1.if else var age = 19; if (age > 18){ console.log("成年了"); }else { console. ...
- python 之 前端开发（ JavaScript变量、数据类型、内置对象、运算符、流程控制、函数）
11.4 JavaScript 11.41 变量 1.声明变量的语法 // 1. 先声明后定义 var name; // 声明变量时无需指定类型,变量name可以接受任意类型 name= " ...
随机推荐
- Linux rpm命令详解
rpm命令是RPM软件包的管理工具.rpm原本是Red Hat Linux发行版专门用来管理Linux各项套件的程序,由于它遵循GPL规则且功能强大方便,因而广受欢迎.逐渐受到其他发行版的采用.RPM ...
- mysql 批量插入500W 测试
set_time_limit(800);$dsn = 'mysql:host=localhost;dbname=test';$db = new PDO($dsn,'root','',array(PDO ...
- Elasticsearch 填坑记
前言 技术的发展日新月异,传统企业数据库Oracle.SqlServer.DB2,Mysql等在今日不断的被各种大厂自研数据库取代,当然也有类似Elasticsearch等优秀的满足海量数据所使用的开 ...
- Stacks And Queues
栈和队列 大型填坑现场,第一部分的还没写,以上. 栈和队列是很基础的数据结构,前者后进先出,后者先进先出,如下图: 下面开始将客户端和具体实现分开,这样有两个好处:一是客户端不知道实现的细节,但同时也 ...
- zookeeper for windows
1,安装java环境,安装完java之后,添加用户变量.并在命令行中测试 java -version . 2,下载zookeeper http://mirrors.shu.edu.cn/apache/ ...
- spring中MessageSource的配置使用方法2--ReloadableResourceBundleMessageSource【转】
本文转载仅供自己学习收录,不做任何商业用途,如有需要可访问原地址:http://blog.csdn.net/qyf_5445/article/details/8124362 如何在spring mvc ...
- CSS3 Transform变形理解与应用
CSS3 Transform变形理解与应用 Transform:对元素进行变形:Transition:对元素某个属性或多个属性的变化,进行控制(时间等),类似flash的补间动画.但只有两个关键贞.开 ...
- 第三周：Excel分析
Excel常用于敏捷,快速,需要短时间相应的场景下是非常便捷的数据处理工具. 相对于语言类例如python和R等则用于常规的,规律的场景中应用,便于形成日常规则统计分析. 对于学习的路径:Excel函 ...
- HDU4609:3-idiots(FFT)
Description Input Output Sample Input Sample Output Solution 题意:给你$n$根木棍,问你任选三根能构成三角形的概率是多少. 写挂sb细节心 ...
- 洛谷 P1073 最优贸易
题目描述 CC C 国有 n n n 个大城市和 m mm 条道路,每条道路连接这 nnn 个城市中的某两个城市.任意两个城市之间最多只有一条道路直接相连.这 mmm 条道路中有一部分为单向通行的道路 ...