回顾

基本语法

在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 {
   
}
 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>grade</title>
<style>
#item {
border:2px solid #ff6700;
width:300px;
height:30px;
font-size: 16px;
/*padding:10px;*/
}
#item1 {
width:300px;
height:200px;
border:2px solid #ff6700;
margin-top:20px;
} </style> </head>
<body>
<h1>请输入您的成绩</h1>
<input type="number" id = "item">
<button onclick="outer()">submit</button> <div id = "item1"></div> <script>
function outer(){
var obj1 = Number(document.getElementById("item").value);
if (obj1>60) {
var res = "你怎么这么菜,还不去学习"
}else {
var res = "你比上一个还菜,还不快点去学习"
} document.getElementById("item1").innerHTML = res
} </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>

多向分支1

 
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>

多向分支2

 

嵌套分支

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

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

1.2 循环语句

while循环

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

do...while 循环

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

for 循环

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

for (变量定义;循环条件; 变量变化) {
   //循环体
}
 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js cycle</title>
</head>
<body>
<script>
var i = 0;
while(i<11){ console.log(i);
i++;
}
var m = 0;
do{ console.log(m)
m++;
}while(m<11); for (var n = 0;n<11;n++){
console.log(n); }
</script>
</body>
</html>

三种循环

for循环奇偶筛选

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>for循环</title>
</head>
<body>
<h1>同志交友</h1>
<hr> <script>
// 输出 0 到 10之间的偶数
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)
} // 输出0-10之间的奇数
for (var m = 1;m<11;m+=2){
console.log(m)
} console.log('');
console.log(i);
console.log(a)
console.log(m);
</script>
</body>
</html>

for循环奇偶筛选

1.3 其他语句

跳转语句

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

异常

try {
   
} catch(err) {
   
}


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

catch相当于python的except

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>异常语句</title>
</head>
<body>
<script>
try {
console.log(username)
} catch(好多好) {
//括号里可自定义异常
console.log("error123uehufhf")
} finally {
console.log("you should not do that")
//无论怎么都执行
}
</script>
</body>
</html>

异常捕捉

严格模式

//写在所有代码的最前面
//开启严格模式
//一般不用在代码前加上,自己写的代码要严格遵守规定,该缩进就缩进。
‘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 console.log(username)
</script>
</body>
</html>

严格模式

1.4 注意

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

if (条件) 
代码

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

 <!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('哈哈哈')
console.log('直接来这里')
</script>
</body>
</html>

函数体内只有一行代码

2 函数

2.1 定义函数

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

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

2.2 函数特点

  • 函数名就是变量名

  • 函数调用 必须加 ()

  • 关键字方式定义的函数, 会存在函数提升 (在函数定义的前面 调用函数)function demo(){  }

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS如何定义函数</title>
</head>
<body>
<script>
//定义函数 多种方式 demo(); //函数提升 (特殊情况) dem0
//fn(); //不存在变量提升 //function 关键字方式 def
function demo (a, b) {
console.log('demo');
} //表达式方式
var fn = function(a, b){
console.log('fn');
} console.log('') //空格
demo(); //demo
fn(); //fn var a = demo; a(); console.log(typeof demo) //函数也是一种数据类型(对象类型)
console.log(typeof fn)
console.log(typeof fn()) //underfined // console.log('') //第三种函数 定义方式 (了解)
var myFun = new Function('a', 'b', 'c', 'console.log("myFun")'); myFun(); </script>
</body>
</html>

js 函数定义的三种方式

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(); console.log('') //参数默认值
function fn(a, b='小梅梅') {
console.log(`${a} 和 ${b} 一起跳舞`);
} fn('小刚刚');
fn('小刚刚', '小丽丽'); console.log(''); //可变数量的参数
//声明函数 实现 所有参数累加的和
function sum() {
//arugments 只能在函数里面用
var s = 0; //遍历 arguments 取出其中的每一个值
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>
//回调函数 (高阶函数)
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>

自调函数

(function() {

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

})()

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

2.7 递归

总结

  • 流程控制 分支: 单向分支 双向分支 多向分支(else if switch..case) 嵌套分支

  • 流程控制 循环: while循环 do...while循环 for循环

  • 其他控制语句: 跳转、异常、严格模式

  • 函数 (定义、特点、参数 、自调、回调、递归)

javascript 流程控制及函数的更多相关文章

  1. JavaScript流程控制及函数

    1 流程控制 1.1 条件语句 分支结构 单向分支 if (条件表达式) { code...} 双向分支 if (条件表达式){    } else {    } <!DOCTYPE html& ...

  2. javaScript流程控制与函数

    流程控制 1.1 条件语句 分支结构 单向分支 if (条件表达式) { code... } <!DOCTYPE html> <html> <head> <m ...

  3. flutter--Dart基础语法(二)流程控制、函数、异常

    一.前言 Flutter 是 Google 开源的 UI 工具包,帮助开发者通过一套代码库高效构建多平台精美应用,Flutter 开源.免费,拥有宽松的开源协议,支持移动.Web.桌面和嵌入式平台. ...

  4. Javascript流程控制

    Javascript流程控制 1.条件语句 (1)if(exp)执行一句代码 (2)if(exp){执行代码段;} (3)if(exp){exp为true执行代码段}else{exp为false执行的 ...

  5. Go语言学习之3 流程控制、函数

    主要内容: 1. strings和strconv使用2. Go中的时间和日期类型3. 指针类型4. 流程控制5. 函数详解 1. strings和strconv使用 //strings . strin ...

  6. Linux基础-shell脚本知识整理和脚本编写----------变量、运算符、流程控制、函数、计划任务(发送邮件)

    I:知识整理:变量.运算符.流程控制.函数.计划任务 变量 系统变量:set:显示所有变量                env:环境变量 常用系统变量: path pwd lang home his ...

  7. JavaScript 流程控制-分支

    JavaScript 流程控制-分支 1.流程控制 在一个程序执行的过程中,各条代码的执行顺序对程序的结果是有直接影响的,很多时候我们要通过控制代码的执行顺序来实现我们要完成的功能. 简单理解:流程控 ...

  8. Javascript初识之流程控制、函数和内置对象

    一.JS流程控制 1. 1.if else var age = 19; if (age > 18){ console.log("成年了"); }else { console. ...

  9. python 之 前端开发( JavaScript变量、数据类型、内置对象、运算符、流程控制、函数)

    11.4 JavaScript 11.41 变量 1.声明变量的语法 // 1. 先声明后定义 var name; // 声明变量时无需指定类型,变量name可以接受任意类型 name= " ...

随机推荐

  1. Rsyslog 日志相关内容

    [root@server vusers_home]# rpm -ql rsyslog|more       ###.so结尾为模块,模块有分im为输入模块,om 为输出模块/etc/logrotate ...

  2. BZOJ_3781_小B的询问_莫队

    BZOJ_3781_小B的询问_莫队 Description 小B有一个序列,包含N个1~K之间的整数.他一共有M个询问,每个询问给定一个区间[L..R],求Sigma(c(i)^2)的值,其中i的值 ...

  3. PHP/Javascript 数组定义 及JSON中的使用 ---OK

    PHP数组定义 一维数组: 1.$a=array(1,2,4,5,6); 2.$a= Array("cec"=>"cecValue","logo ...

  4. 比利牛斯獒犬 flask web

    1. 使用 session.get('name') 直接从会话中读取 name 参数的值.和普通的字典一样,这里使用 get() 获取字典中键对应的值以避免未找到键的异常情况,因为对于不存在的键, g ...

  5. PowerDesigner里怎样查找特定的表

    转自:https://blog.csdn.net/u013178480/article/details/78261650 crtl+f查找,在code处输入你要查找的表名,然后点击“find now& ...

  6. Python_XML的三种解析方法

    什么是XML? XML 指可扩展标记语言(eXtensible Markup Language). XML 被设计用来传输和存储数据. XML是一套定义语义标记的规则,这些标记将文档分成许多部件并对这 ...

  7. Flutter实战视频-移动电商-10.首页_FlutterSwiper轮播效果制作

    10.首页_FlutterSwiper轮播效果制作 博客地址: https://jspang.com/post/FlutterShop.html#toc-5c2 flutter_swiper http ...

  8. POJ - 2796 Feel Good 单调递增栈+前缀和

    Feel Good Bill is developing a new mathematical theory for human emotions. His recent investigations ...

  9. E20190409-hm

    viable  adj. 切实可行的; 能养活的; 能自行生产发育的; 有望实现的; resolution  n. 分辨率; 解决; 决心; 坚决; produce vt. 产生; 生产; 制作; 创 ...

  10. 1118 Birds in Forest (25 分)

    Some scientists took pictures of thousands of birds in a forest. Assume that all the birds appear in ...