JS和HTML和CSS的区别
1.HTML 标志性编程语言，给用户看他想看到的东西
2.CSS 对HTML语言内容样式的“美化”
3.JS 脚本语言，实现操作对象的行为的功能
浏览器执行JS [分为渲染引擎和JS引擎]
1.渲染引擎：用来解析HTML和CSS，俗称内核，比如chrome浏览器的blink、webkit[老版本]
2.JS引擎：也称JS解释器，用来读取网页中的JavaScript代码，对其处理后运行，比如chrome浏览器的V8
JS的作用
1.表单动态校验（密码强度检测等 减轻服务器的压力 JS产生的最初目的）
2.网页特效
3.服务器端开发(Node.js)
4.桌面程序(Electron)
5.App(Cordova)
6.控制硬件-物联网(Ruff)
7.游戏开发(cocos2d-js)
JS的组成：ECMAScript、DOM、BOM
1.ECMAScript是由ECMA国际进行标准化的一门编程语言；它规定了JS的编程语法和基础核心知识，是所有浏览器厂商共同遵守的一套JS语法工业标准 [可以在MDN中查看更多信息]
2.DOM--文档对象模型(Document Object Model)是W3C组织推荐的处理可扩展标记语言的标准编程接口，用户通过对DOM提供的接口可以对页面上的各种元素进行操作（大小、位置、颜色)
3.BOM--浏览器对象模型(Brower Object Model)是指浏览器的对象模型，它提供了独立于内容的可以与浏览器窗口进行互动的对象结构，比如弹出框、控制浏览器跳转、获取分辨率等
JS的书写位置 [三种方式：1.行内、2.内嵌、3.外部]
vscode手敲代码来体验一把
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style></style>
<!-- 2. 内嵌式的JS-->
<!-- <script>
alert('bunny很可爱')
</script> -->
<!-- 3.外部js引用 -->
<script src="01js入门.js">
</script>
</head>
<body>
<!-- 1.行内式的JS 直接写在元素的内部 -->
<!-- <input type="button" value="兔兔" onclick="alert('bunny')" /> -->
</body>
</html>
细节小技巧：新建html文件后 在vscode中输入！再按回车键，可快速输出html的模板 然后输入script 。另外， 注释可直接ctrl+?键就可以了。
JS的输入输出语句
常用的有alert(msg) 、 console.log(msg)、prompt(info)
1.prompt(info)浏览器弹出输入框，用户可以输入
2.alert(msg) 浏览器弹出警示框
3.console.log(msg)浏览器控制台打印输出信息
动手敲码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document2</title>
<style></style>
<script>
// 给用户的弹出输入框
prompt('请输入手机四位数尾号');
// alert()警示框 输出给用户看
alert('正在检测与处理');
// console 控制台输出 主要时给程序员测试时用的
console.log('程序员调试时用来查看语句的输出结果')
</script>
</head>
<body>
</body>
</html>
变量
什么是变量：可以理解为变量是个装东西的盒子，即变量是用于存放数据的容器，我们通过变量名获取数据，也可以用来修改数据
变量的本质：是程序再内存中申请的一块用来存放数据的空间 。通俗地助于地理解：类似于酒店的存在，要住进酒店，要申请入住的房间，可以N个人住进M个房间。请注意：变量名要找到对应的变量
变量的使用
1.声明变量
var age;//声明一个变量名称为age
var是JS 的关键字，用来声明变量（variable），使用改关键词声明变量后，计算机会自动为变量分配内存空间，不需要程序员另外管理。 age是变量名
2.赋值
age=10;//给age这个变量赋值为10
=用来把 右边的值赋给左边的变量空间 此处代表赋值的意思
变量值是程序员保存到空间变量里的值
3.查看输出结果
这里用console.log() 在浏览器端的控制台输出可查看到。
console.log(age)
4.变量-赋值初始化
声明一个变量并赋值，我们成为变量的初始化，例如：
var age = 18;//声明变量的同时，将18赋值给变量名age
变量语法扩展
一个变量被重新赋值后，它原有的值就会被覆盖，变量赋值将以最后一次赋值为准
var age = 18;
age=20;
//则console.log(age)输出的是20
同时声明多个变量
var age =18,name='bunny',sex=2;
报错情况：
如果只声明未赋值 报错undefined
如果不声明不赋值使用 报错 xxx is not defined
但是，不声明直接赋值 是可以使用的 但是最好还是要先声明的
变量的命名规范
1.首字母必须是字母、下划线（-）或者美元符号（$）
2.其他字母可以是下划线（_）、美元符号（$）、字母或者数字
3.一般采用驼峰法：第一个字母小写，其余有意义的单词首字母大写
等
变量的常见案例
JS是编程语言有很强的逻辑性在里面 实现这个要求的思路 先怎么做后怎么做要有个逻辑顺序
var tempt;
var a= '白兔子'；
var b = '小紫兔'；
temp = a;
a=b;
b=temp;
/*此时输出 ：
b= '白兔子'；
a= '小紫兔'；*/
自我检查：
1.为什么需要变量？
2.变量是什么?
3.变量的本质是什么?
4.变量怎么使用的?
5.什么是变量初始化
6.变量的命名规范
7.交换两个变量值的思路
小结：
1.一些数据需要保存，所以需要变量‘
2.变量就是一个容器，用来存放数据，方便我们以后使用里面的数据
3.变量是内存里的一块空间，用来存储数据
4.我们使用变量的时候，一定要声明变量再赋值
5.声明变量的本质是去内存申请空间
6.声明变量并赋值我们称为初始化
7.变量名要尽量规范，遵守驼峰命名法，会区分不合法的命名
8.学会交换两个变量值的逻辑思路
数据类型
为什么需要数据类型？
在计算机中，不同的数据类型所需要占用的存储空间是不同的，为了便于把数据分析成所需内存大小不同的数据，充分利用存储空间，所以要定义不同的数据类型。
简而言之就是数据类型是数据类别的型号，如姓名：“张三”，年龄：“18”，这些数据的类型是不同的。
变量的数据类型 变量属于什么样的数据类型呢？
变量是用来存储值的所在处，它们的名字和数据类型。
变量的数据类型决定了如何代表这些值的位存储到计算机的内存中，JavaScript是一种弱类型或者说动态语言 这意味着不用提前声明变量的类型，在程序运行过程中，类型会被自动确定。
在JavaScript，变量的数据类型是自由变化的，可自由转化类型。
int num =10; //java
var num;//这里的num我们是不确定属于哪种数据类型的
var num =10;//num得到的10可判断得出，num属于属于数据类型
var n =“abc”;// string 字符串型
也就是说，js的变量数据类型是只有程序在运行过程中，根据等号右边的值来确定该变量的数据类型的
简单数据类型
1.number
数字型，包含整型值和浮点型值，如21，0.21等 ；默认值为0
可以用二进制[0,1]、八进制[数字前加0]、十六进制[09,af，颜色#fffff，数字前加0x]等
数字型的最大值和最小值，简单了解即可，可输出
console.log(Number,MAX_VALUE)；//最大
console.log(Number,MIN_VALUE)；//最小
2.Boolean
布尔值型，包括true(真的、对的)，false(假的，错的)，布尔型和数字型相加的时候，true的值为1，false的值为0；默认值是false
console.log(true+1);//2
console.log(false+1);//1
3.string
字符串类型，如：“张三”；注意，在js里面，字符串都带引号，默认值：“ ”
转义字符：都是用 \ 开头，但是这些转义字符写到引号里面
常见的转义字符有：\n换行；\代表斜杠\；'代表单引号；''代表双引号；\t代表tab缩进；\b代表空格，b是blank的意思
var str ="这是男生\n这是女生" // \n自动换行
字符串长度
字符串是由若干个字符串组成的，这些字符的数量就是字符串的长度，通过字符串的length属性可以获取整个字符串的长度。
var str ='my name is bunny';
console.log(str.length);//16
另外，字符串拼接，用+连接，还是字符串类型
如果是含有变量的拼接
var age=20;
console.log("这个叫bunny的小孩今年"+age+'岁');
//变量要写到字符串里面，口诀：引引加加
image.png
4.underfined
未定义类型，如var a ;声明了变量为赋值，此时的a=underfined，默认值，underfined
5.null
var a=null;声明了变量a为空值，默认值，null
isNaN()的用法
isNaN()这个方法用来判断非数字，并且返回一个值，如果是数字返回的是false，如果不是数字返回的是true
利用js实现一个简单的交互界面
效果图
image.png
image.png
image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
//逻辑上：先理解需求，分析实现流程
//弹出一个输入框（prompt），让用户输入年龄（用户输入）
//把用户输入的值变量保存起来，把刚输入的年龄与所要输出的字符串拼接（程序员内部处理）
//使用alert语句弹出警示框（返回输出结果呈现给客户）
var age = prompt('请输入您的年龄');
var str = '您今年已经' + age + '岁了';
alert(str)
</script>
</head>
<body>
</body>
</html>
获取检测变量的数据类型
typeof是js的属性 ，可以直接写，检测变量的数据类型
var num = 10;
console.log(typeof num)；//打印出number，即数据类型。string/boolean等同一原理
字面量
自面量是在源代码中一个固定值的表示法，通俗来说，就是字面量是如何表示这个值
数字字面量：7，8，9
字符串字面量：‘小兔子’
布尔字面量：true,false
数据类型转化
根据需求可以把一种数据类型转化为另一种数据类型 ，常见的有：转换为字符串类型、转换为数字型、转换为布尔型
<script>
//1.把数字型转换为字符串型 变量.tostring()
var num = 10;
console.log(num);
console.log(typeof num);//检测变量的数据类型
var str = num.toString();
console.log(str);
console.log(typeof str);//检测变量的数据类型
// 2.我们利用string(变量)
console.log(String(num));
//3.利用+拼接字符串的方法实现转换效果
console.log(num + '');
</script>
转换为数字型
<script>
// var age = prompt('请输入您的年龄');
// //1,parseInt(变量) 可以把字符串的转换为数字型 得到整数
// console.log(parseInt(age));
console.log(parseInt(3.14));//3
console.log(parseInt(3.85));//3
console.log(parseInt('120px'));//120 会去掉px这个单位
console.log(parseInt('rem120px'));//NaN
//2.parseInt(变量)可以把字符型的转换为数字型 得到小数 浮点型
console.log(parseFloat(3.14));//3.14
console.log(parseFloat(3.85));//3.85
console.log(parseFloat('120px'));//120 会去掉px这个单位
console.log(parseFloat('rem120px'));//NaN
//3.利用Number(变量)
var str = '123';
console.log(Number(str));
console.log(Number('12'));
//4.利用运算 - * / 隐式转换
console.log('11' - 0);//11
console.log('123' - '120');//3
console.log('25' * '4');//100
</script>
image.png
小案例
<script>
//先弹出一个输入框，提示用户输入第一个值 保存起来
//再弹出一个输入框，提示用户输入第二个值 保存起来
//把这两个值相加，并将结果赋给新的变量（数据类型转换）
//弹出警示框（alert）把计算的结果返回
var num1 = prompt('请输入第一个值');
var num2 = prompt('请输入第二个值');
var result = parseInt(num1) + parseInt(num2);
alert("计算结果是：" + result);
</script>
image.png
image.png
转换为布尔型
Boonlean()函数
将其他转化为布尔型 ，例如：Boonlean('true');
注意
1.代表空、否定的值会被转化为false ,如 ‘’，0，NaN, null ,undefined
2.其余的值都会被转化为true
————————————————————————————
运算
计算机不能直接理解任何除机器语言以外的语言，所以必须要把程序员所写的程序语言翻译成机器语言才能执行程序。程序语言翻译成机器语言的工具，被称为翻译器。
编程语言 翻译器 机器语言(二进制)
翻译器翻译的方式有两种:一个是编译，另外一个是解释。两种方式之间的区别在于翻译的时间点不同编译器是在代码执行之前进行编译，生成中间代码文件
解释器是在运行时进行及时解释，并立即执行(当编译器以解释方式运行的时候，也称之为解释器)
js是解释型语言，对于浏览器而言，一边读一遍呈现页面效果，效果更佳。
标识字、关键字、保留字
标识字：自定义
关键字:是指JS本身已经使用了的字，不能再用它们充当变量名、方法名。
包括:break、case、catch、continue、default、delete、do、else、finally、for、function、if、in.
inlatceol ne retum suict. it. lh y tpeot wi oid ilt. wit.
保留字：意思是现在虽然还不是关键字，但是未来可能会成为关键字，同样不
保留字:实际上就是预留的“关键字”能使用它们当变量名或方法名。
包括:boolean、byte、char、class、const、debugger、 doubleenum.export、extends. fimal、float、goto、implements、import、int、interface、 long、mative、package、
private. protected, public. shof static、supersynchronizedthrows、transient、
volatile等。
运算符
运算符(operator)也被称为操作符，是用于实现赋值、比较和执行算数运算等功能的符号。
JavaScript中常用的运算符有:
算数运算符
递增和递减运算符
比较运算符
逻辑运算符
赋值运算符
前置递增和后置递增运算符可以简化代码的编写，让变量的值+1 比以前写法更简单单独使用时，运行结果相同
与其他代码联用时，执行结果会不同
后置:先原值运算，后自加(先人后己)
前置:先自加，后运算(先已后人)
开发时，大多使用后置递增/减，并且代码独占一行，例如:num++;或者num-;
运算符
<script>
// = 一个等号是赋值
// ==两个等号是判断 判断两个值是否相等（注意此时有隐式转换）
// ===三个等号是全等 判断两边的值和数据类型是否完全相同
//1.我们程序里等于符号是 == 默认转换数据类型 会把字符串型的数据转换为数字型
//逻辑运算符 && || ！即：与 或 非
//短路运算 （逻辑中断）
//1.用我们的布尔型参与的逻辑运算
//2.123 && 456 是值 或者是 表达式 参与逻辑运算？
//3.逻辑与短路运算 如果表达式1 结果为真 则返回表达式2 如果表达式1为假 那么返回表达式1
console.log(123 && 456);//123456
console.log(0 && 456);//0
console.log(0 && 1 + 2 && 456 * 56789);//0
console.log('' && 1 + 2 && 456 * 45678);//''
//如果有空的或者否定的为假 0 '' null undefined Nan ;其余是真的
//4.逻辑或短路运算 如果表达式1 结果为真 则返回的表达式1 ；如果表达式1 结果为假 则返回的表达式2
//5.赋值运算 = += -= *= /= %=
//6.运算优先级 小括号 一元运算符(++ -- ！) 算数运算(先*/后+-) 关系运算符(> >= < <=)
// 相等运算符(== != === !==) 逻辑运算付(先&&后||) 赋值运算符(=) 逗号运算符(,)
</script>
JavaScript流程控制 分支
//1，流程控制(顺序结构 分支[条件]结构 循环结构)
//2，if 的语法结构 如果if
// if (条件表达式) {
// //执行语句
// }
//2.执行思路 如果if里面的条件表达式结果为真 true 则执行大括号里面的 执行语句
//如果 if 条件表达式结果为假 则不执行大括号里面的语句 则执行if 语句后面的代码
//3.案例
// if (3 < 5) {
// alert('沙漠骆驼');
// }
// //4.进入网吧 案例
// //弹出prompt输入框，用户输入年龄，程序把这个值取过来保存在变量中
// //使用if条件语句来判断年龄 如果年龄大于18 就执行 if大括号里面的输出语句
// //if(){} else{}
// var age = prompt('请输入你的年龄：');
// if (age > 18) {
// alert('欢迎您进入游戏厅！祝您玩得愉快！')
// } else {
// alert('未成年人禁止进入游戏厅！请退出！')
// }
// //5.案列 润年
// var year = prompt('请输入年份');
// if (year % 4 == 0 && year % 100 != 0 || year % 4 == 0) {
// alert('您输入的是闰年');
// } else {
// alert('您输入的是平年');
// }
// //6.if(条件){{else if(条件){}}多分枝语句 利用多个条件 得到不同的结果 多选的过程
// var score = prompt('请输入你的分数:');
// if (score >= 90) {
// alert('等级为：优秀');
// } else if (score >= 80) {
// alert('等级为：良好');
// } else if (score >= 70) {
// alert('等级为：合格');
// } else if (score <= 60) {
// alert('等级为：不及格');
// }
//7.三元表达式
//(1)有三元运算符组成的式子我们称为三元表达式
//(2)++num 3+5 ？：
//(3)语法结构 条件表达式 ？ 表达式1 ： 表达式2
//(4)执行思路 如果条件表达式结果为真 则返回表达式1 为假则返回表达式2 等同于if else
//(5)案例
// var num = 10;
// var result = num > 5 ? 'Yes' : 'No';
// console.log(result);//Yes
// //等同于
// if (num > 5) {
// result = 'Yes';
// } else {
// result = 'NO'
// }
// console.log(result);//Yes
// //8.案例 数字补零案例 可用于倒计时补零
// //用户输入(prompt)0~59之间的一个数字
// //如果这个数字小于10 则在这个数字前面补零，(加0 拼接) 否则 不做操作
// //用一个变量接受这个返回值 输出
// var time = prompt('请您输入0~59之间的一个数组');
// //三元表达式
// var result = time < 10 ? '0' + time : tiem;//把返回值赋给一个变量
// alert(result);
//9.(1)switch语句也是多分支语句 也可以实现 对选1 ; (2)语法结构 switch 转换 开关 case 小例子 或者选项的意思
//(3)执行思路 利用我们的表达式的值 和 case 后面的选项值相匹配 如果匹配上就执行case里面的语句 如果没有匹配上就执行default里面的语句
//(4)案例
// switch (2) {
// case 1:
// console.log('这是1');
// break;
// case 2:
// console.log('这是2');
// break;
// case 3:
// console.log(这是3);
// break;
// default:
// console.log('没有匹配到结果');
// }
var num = 3;
switch (num) {
case 1:
console.log('1');
break;
case 3:
console.log('3');
break;
}
//注意事项：(1)我们在开发里 表达式经常写成变量
//(2)我们num的值 和 case 里面的值相匹配的时候是 全等 必须是值和数据类型一致才可以 num ===1
//(3)break 如果当前的case里面的值没有break 则不会退出 switch是继续执行下一个case
//案例 ： 超市输入水果，返回价格
var fruit = prompt('请输入要查询的水果名称')
switch (fruit) {
case '苹果':
alert('苹果的价格是每斤3.5/斤');
break;
case '香蕉':
alert('香蕉的价格是每斤2.5/斤');
break;
case '水蜜桃':
alert('水蜜桃的价格是每斤6.5/斤');
break;
default:
alert('出错了！请联系工作人员');
}
//switch 和 if else 的区别
//switch用于处理比较确定的值的情况下
//if else if用于范围的判断
循环
for循环总结
1.for 循环可以重复执行某些相同的代码
2.for循环可以重复执行些许不同的代码 因为我们有计数器
3.for循环可以重复执行某些操作，比如算术运算符加操作
4.双重for循环可以做更多跟好看的效果
5.双重for循环，外层循环一次，内层for循环全部执行
6.for循环是循环条件和数字直接相关的循环
7.分析要别写代码更重要
8.举一反三，自己经常总结一些常用到且相似的案例
代码以及解析
//循环的目的：重复执行某些语句
//循环：for循环 while循环 do while循环
//1.for 循坏 重复执行某些代码 通常跟计数有关系
//2，for 语法结构
// for (初始化变量; 条件表达式; 操作表达式) {
// //循环体
// }
//3，初始化变量，就是用Var声明的一个普通变量，通常用于作为计数器使用
//4，条件表达式，就是用来决定每一次循环是否继续执行就是中止的条件
//5，操作表达式，是每次循环最后执行的代码 经常用于我们计数器变量进行更新（递增或者递减）
//6，代码体验
// for (var i = 1; i <= 100; i++) {
// console.log('你好吗？');
// }
// //for 循环的执行过程
// //1，首先执行里面的计数器变量 var i = 1,但是这句话在for里面只执行一次 index
// //2.去 i<=100来判断是否满足条件，如果满足条件，就去执行 循环体，不满足条件退出循环
// //3.最后去执行i++ i++是单独写的代码 递增 第一轮结束
// //4.接着去执行 i<= 100 如果满足条件 就去执行循环体 不满足条件 就退出循环体 第二轮
// //断点调式 在浏览器中 sources里面看
// //第一步 在行号上打断点 点一下行号即可； 第二步 刷新一下我的浏览器
// //for 可以循环执行相同的代码
// var num = prompt('请您输入循环的次数')
// for (var i = 1; i <= num; i++) {
// console.log("你是小可爱");
// }
// //for 也可以循环执行不同的代码 这主要原因是有 计数器i的存在 i每次循环值都会变化
// for (var i = 1; i <= 100; i++) {
// console.log('今年' + i + '岁');
// }
// //for 循环重复某些相同的操作 比如做1-100之间所有整数的累加和
// //分析：需要循环100次 需要一个计数器
// //需要一个存储变量的sum 但是初始值一定是0
// //核心算法：1+2+3+...+100，sum = sum+i;
// var sum = 0;//求和的变量
// for (var i = 0; i <= 100; i++) {
// //sum = sum + i;
// sum += i;
// }
// console.log(sum);
// //求1-100之间的所有数的平均值
// var sum = 0;
// var average = 0
// for (var i = 1; i <= 100; i++) {
// sum += i;
// }
// average = sum / 100;
// console.log(average);
// //求1-100之间的偶数和奇数的和 分析：我们需要一个偶数的和变量 even 还需要一个奇数 odd
// var even = 0;
// var odd = 0;
// for (var i = 1; i <= 100; i++) {
// if (i % 2 == 0) {
// even = even + i;
// } else {
// odd = odd + i;
// }
// }
// console.log("1-100之间所有的偶数之和是：" + even);
// console.log("1-100之间所有的奇数之和是：" + odd);
// //求1-100之间所有能被5整除的数字的和 分析：需要一个接受结果的变量 result
// var result = 0;
// for (var i = 1; i <= 100; i++) {
// if (i % 5 == 0) {
// result = result + i;
// }
// }
// console.log('所有能被5整除的数字的和是：' + result);
// //案例
// //弹出输入框输入的总的班级人数(num)
// //依次输入学生的成绩（保存起来 score）,此时我们需要用到
// //for 循环 弹出的次数跟班级总人数有关 条件表达式 i<=num
// //进行业务处理：计算成绩 先求总成绩(sum) 再求平均成绩(average)
// //弹出结果
// var num = prompt('请输入班级人数:');//num总的班级人数
// var sum = 0;//求和的变量
// var average = 0;//平均值的变量
// for (var i = 1; i <= num; i++) {
// var score = prompt('请输入第' + i + '个学生的成绩');
// //sum = sum+score; 注意 ：这里要用parseFloat转化数字类型
// //因为prompt取过来的数据是字符串型，需要转化为数字型
// sum = sum + parseFloat(score)
// }
// average = sum / num;
// alert('班级的总分是：' + sum)
// alert('班级平均分是：' + average)
// //一行打印五个心心 采用追加字符串的方式 str =str+'💛'
// var str = '';
// for (var i = 1; i <= 5; i++) {
// str = str + '💛';
// }
// console.log(str);
// //用户好评 由用户输出♥的个数
// var num = prompt('请输入评分数： [满意6~10分，良好4~5分，一般2~3分，差评0~1分]')
// var str = '';
// for (var i = 0; i < num; i++) {
// str = str + '💛'
// }
// console.log(str);
//双重for循环 嵌套实现
// //1.语法结构
// for(外层的初始化变量;外层的条件表达式;外层的操作表达式){
// for(里层的初始化变量;里层的条件表达式;里层的操作表达式){
// //执行语句
// }
// }
//2.我们可以把里面的循环看做是外层循环的语句
//3.外层循环 循环一次 里面的循环执行全部
//4.代码验证
// for (var i = 1; i <= 3; i++) {
// console.log('外层循环的第' + i + '次');
// for (var j = 1; j <= 3; j++) {
// console.log('外层循环的第' + j + '次');
// }
// }
// //打印五行五列的♥
// var str = '';
// for (var i = 1; i <= 5; i++) {
// for (var j = 1; j <= 5; j++) {
// str = str + '♥';
// }
// //如果一行打印完毕五个♥，就要另起一行 加 \n
// str = str + '\n';
// }
// console.log(str);
// //由用户定义行列
// var rows = prompt('请输入行数：');
// var cols = prompt('请输入列数：')
// var str = '';
// for (var i = 1; i <= rows; i++) {
// for (var j = 1; j <= cols; j++) {
// str = str + '♥';
// }
// //如果一行打印完毕五个♥，就要另起一行 加 \n
// str = str + '\n';
// }
// console.log(str);
// //打印倒三角型
// //一共有10行 但每一行的个数都不同 10 9 8 7 6 5 4 3 2 1
// var str = '';
// for (var i = 1; i <= 10; i++) {//外层循环控制行数
// for (var j = i; j <= 10; j++) {//里层循环打印的个数不一样，注意：i和j的关系
// str = str + '♥';
// }
// str = str + '\n';
// }
// console.log(str);
//九九乘法表 一共九行 每行的个数不同 因此要用到双重for循环
//外层的for 循环控制 i 循环9次 可以打印9次
//内层的for 循环控制每行公式 j
//核心算法：每一行的公式的个数正好与行数一致，即可表达为：j<=i;
var str = '';
for (var i = 1; i < 10; i++) {
for (var j = 1; j <= i; j++) {
// str = str + (i * j);
//1X2=2
str += j + 'x' + i + '=' + i * j + '\t';//+'\t'是调整间距的
}
str += '\n'
}
console.log(str);
while循环
循环小结：
JS中有for、 while、do...while三种循环方式
三个循环在很多情况下都可以相互代替作用
如果用来计数次数，跟数字相关的，三者使用基本相同，通常来说，用for比较多
while、do...while可以做更复杂的判断条件，比for更灵活一些
while、do...while的执行顺序不同，while是先判断后执行，do...while是先执行一次后判断
while、do...while的执行次数不同，do...while至少会少执行一次循环体，而while可能一次都不执行
学习的重点是for循环的应用
//1.whlie循环语法结构 whlie当...的时候
//while(条件表达式){
//循环体
//}
//2.执行思路 当条件表达结果为true 则执行循环体 否则 退出循环
//3.代码
// var num = 1;
// while (num <= 19) {
// console.log(num);
// num++;
// }
//4.里面应该也有计数器 初始化变量
//5.里面应该也有操作表达式 完成计数器的更新 防止死循环
// //6.案列 年龄
// var age = 1;
// while (age <= 21) {
// console.log('今年' + age + '岁');
// age++;
// }
// //7.计算1~100之间所有的整数和
// var sum = 0;
// var i = 1;
// while (i <= 100) {
// sum += i;
// i++;
// }
// console.log(sum);
// //8.弹出一个对话框 ，你爱我吗？如果输入我爱你，就提示结束，输入其它，则一致询问
// var mes = prompt('请回答，你爱我吗？')
// while (mes !== '我爱你') {
// mes = prompt('你爱我吗？');
// alert('你确定吗？');
// }
// //do...while
// //1.语法结构
// do {
// //循环体
// } while (条件表达式) {
// }
//2.执行思路 与while不同的地方在于 do ..while先执行一次循环体 再判断条件
//如果条件表达式结果为真，则继续执行循环体，否则退出循环
// //例1
// var i = 1;
// do {
// console.log('今年' + i + '岁');
// i++;
// } while (i <= 100)
//例2 1~100整数和
var sum = 0;
var j = 1;
do {
sum = sum + j;
j++;
} while (j <= 100)
console.log(sum);
continue break关键字
//continue关键字 退出本次（当前执行的循环） 继续执行剩余次数循环
for (var i = 1; i <= 6; i++) {
if (i == 3) {
continue;//只要遇见 continue就退出本次循环 直接跳到i++
}
console.log('我正在看第' + i + '本书');
}
//求1~100之间 除了能被7整除之外的整数和
var sum = 0;
for (var i = 1; i <= 100; i++) {
if (i % 7 == 0) {
continue;//只要遇见 continue就退出本次循环 直接跳到i++
}
sum += i;
}
console.log(sum);
image.png
// //break关键字 退出整个循环
// for (var i = 1; i <= 6; i++) {
// if (i == 3) {
// break;//退出循环
// }
// console.log('我正在看第' + i + '本书');
// }
//求1~100之间 除了能被7整除之外的整数和
var sum = 0;
for (var i = 1; i <= 100; i++) {
if (i % 7 == 0) {
break;//只要遇见 continue就退出本次循环 直接跳到i++
}
sum += i;
}
console.log(sum);
数组
1.为什么要有数组？
2.创建数组
3.获取数组中的元素
4.对数组进行遍历
5.给数组新增一个元素
6.独立完成冒泡排序的案例
//1.什么是数组？有什么用？数组(Array):就是一组数据的集合 存储在单个变量下的优雅方式
//2.数组的创建方式？利用new创建数组
//var arr = new Array();//创建一个新的数组
//3.数组的创建方式？利用数组字面量创建数组 var arr=[];//创建一个空的数组
//4.数组里面的数据一定要用逗号隔开 数组里面的数据 称为数组元素
// //5.注意：数组有索引号 从0开始
// var arr = [1, 2, 6, 'bunny', '兔兔']
// console.log(arr);//获取数组元素 获取全部
// console.log(arr[3]);//获取数组的其中的数组元素bunny
// //6.遍历数组 把数组里的所有元素提取出来 遍历：把数组中的每个元素从头到尾访问一次[类似上课前对全部同学的点名]
// //用for循环来遍历 i是指数组的索引号 索引号是从0开始的
// var arr1 = ['red', 'green', 'blue', 'pink'];
// for (var i = 0; i < 4; i++) {
// console.log(arr1[i]);
// }
// //7.数组的长度 :指的是元素个数 不要跟索引号混淆
// console.log(arr1.length);
// //8.灵活使用
// var arr = [1, 2, 35, 6, 7, 8, 9, 99, 45, 3232, 23]
// for (var i = 0; i < arr.length; i++) {
// console.log(arr[i]);
// }
// console.log(arr.length);
// //9.数组求和和求平均值
// //分析：求数组[3,4,6,8,1]里面所有元素的和以及平均值
// //先声明求和的变量和求平均值的变量：sum average
// //sum等于数组里每个元素相加 average等于sum除以数组长度 length
// var arr = [10, 4, 6, 8, 2];
// var sum = 0;
// var average = 0;
// for (var i = 0; i < arr.length; i++) {
// sum += arr[i];
// }
// average = sum / arr.length;
// console.log(sum, average);//直接输出和以及平均值。注意：中间用逗号隔开
//10.求数组里的最大值和最小值
//分析：声明一个保存最大元素的变量max
//默认最大值可以取数组中的第一个元素
//遍历这个数组，把里面的每个数组元素和max比较
//如果这个值大于max 就把这个数组元素存放到max里面，否则继续下一轮比较
// var arr = [999, 4, 6, 8, 2];
// max = arr[0];
// for (var i = 0; i < arr.length; i++) {
// if (arr[i] > max) {
// max = arr[i];
// }
// }
// console.log(max);
// //最小值
// var arr = [999, 4, 6, 8, 2, 0];
// min = arr[0];
// for (var i = 0; i < arr.length; i++) {
// if (arr[i] < min) {
// min = arr[i];
// }
// }
// console.log(min);
// //11.数组转化为字符串
// //将数组var arr = [1, 2, 6, 'bunny', '兔兔']转化为字符串，并且用|或其它符号分割
// //分析：需要一个新的变量用于存放转换完的字符串；遍历原来的数组，分别把里面的数据提出来，加到字符串里，最后，同时在后面多加一个分隔符
// var arr = [1, 2, 6, 'bunny', '兔兔'];
// var str = '';
// // var sep = '*';
// for (var i = 0; i < arr.length; i++) {
// // str += arr[i] + sep;
// str += arr[i] + '|'
// }
// console.log(str);
// //12.新增数组元素 修改length长度
// var arr = [1, 2, 6, 'bunny', '兔兔']
// console.log(arr.length);
// arr.length = 7;//把数组的长度加长，里面应该有7个元素，含两个空数组
// var arr = [1, 2, 6, 'bunny', '兔兔']
// arr[5] = '小白'
// console.log(arr);
// arr[0] = 'pink';//替换原来的数组
// arr = '替换全部';//非必要，不要直接给数组名赋值 否则里面的数组元素都没有了
// //13.新建一个数组，里面存放10个整数[1~10]
// //分析：核心原理：用循环来追加数组
// //声明一个空数组arr
// //循环中的计数器i 可以作为数组元素存入
// //由于数组的索引号是从0开始的，因此计数器从0开始更合适，存入的数组元素要+1
// var arr = [];
// for (var i = 0; i < 10; i++) {
// arr[i] = i + 1;
// }
// console.log(arr);
// //14.筛选数组 方法一 将数组var arr =[1,45,77,8,4,8,2,9,3,98,66,12]中大于10的筛选出来，存放于新数组中
// //分析：声明一个新的数组存放新数据：newArr ;遍历原来的数组，找出大于等于10的元素；依次追加给新数组
// var arr = [1, 45, 77, 8, 4, 8, 2, 9, 3, 98, 66, 12];
// var newArr = [];
// var j = 0;
// for (var i = 0; i < arr.length; i++) {
// if (arr[i] > 10) {
// newArr[j] = arr[i];
// //新数组索引号应该从0开始 一次递增
// j++;
// }
// }
// console.log(newArr);
// //方法二
// var arr = [1, 45, 77, 8, 4, 8, 2, 9, 3, 98, 66, 12];
// var newArr = [];
// for (var i = 0; i < arr.length; i++) {
// if (arr[i] > 10) {
// newArr[newArr.length] = arr[i];
// //新数组索引号应该从0开始 一次递增
// j++;
// }
// }
// console.log(newArr);
// //15.数组去重 删除指定的数组元素 将var arr = [1, 1, 2, 0，0，5，0];
// //分析：需要一个新数组用于存放筛选之后的数据；遍历原来的数组，把不是0的添加到数组里面（此时要注意采用数组名+索引的格式接收数据）
// //新数组里面的个数用length不断累加
// var arr = [1, 1, 2, 0, 0, 5, 0];
// var selcet = [];
// for (var i = 0; i < arr.length; i++) {
// if (arr[i] !== 0) {
// selcet[selcet.length] = arr[i];
// }
// }
// console.log(selcet);
// //16.翻转数组 var arr = [1, 2, 3, 4, 5 ]
// //分析：声明一个新数组 ；把旧数组索引号第四个取过来，给新数组索引号为0的数组元素newArr.length;采用递减的方式 i--
// var arr = [1, 2, 3, 4, 5];
// var newArr = [];
// for (var i = arr.length - 1; i >= 0; i--) {
// newArr[newArr.length] = arr[i];
// }
// console.log(newArr);
//17.冒泡排序（排序从小到大或者从大到小） 交换两个变量
var arr = [4, 5, 1, 2, 3];
for (var i = 0; i <= arr.length - 1; i++) {//外层循环 负责管理循环的总次数
for (var j = 0; j <= arr.length - i - 1; j++) {//内层循环 负责管理每一轮的交换的总次数
//内部交换2个变量的值 前一个和后面一个数组元素相比较
if (arr[j] > arr[j + 1]) {
var temp = arr[j];
arr[j] = arr[j + 1];
arr[j + 1] = temp;
}
}
}
console.log(arr);
函数
//1.什么是函数？为什么需要函数？
//2.函数就是封装了一段可以被重复执行调用的代码块 目的：让大量代码重复使用
//3.函数的使用？声明函数 和 函数调用 function 函数名（）{ //函数体 }
//（1）function是声明函数的关键字 全部小写
//（2）函数是做某件事情 函数名一般是动词
//（3）函数不调用是不会被执行的 必须要调用才能执行
//（4）调用时千万不要忘记添加小括号
//函数封装：就是把一个或者多个功能通过函数的方式封装起来，对外只提供一个接口
// function getSum(num1, num2) {
// var sum = 0;
// for (var i = num1; i <= num2; i++) {
// sum += i;
// }
// console.log(sum);
// }
// getSum(1, 100);
// getSum(10, 50);
// getSum(1, 99);
// //4.利用函数计算1-100之间的累加和
// //(1)声明函数
// function getSum() {
// var sum = 0;
// for (var i = 1; i <= 100; i++) {
// sum += i;
// }
// console.log(sum);
// }
// //(2)调用函数
// getSum();
// //5.可以利用函数的参数去实现函数重复不同的代码
// function 函数名(形参1,形参2,...){
// //声明函数的小括号里是 形参 （即形式上的参数）
// }
// 函数名(实参1,实参2,...);//在函数调用的小括号里面是实参（实际的参数）
// 形参和实参的执行过程
//形参是接收实参的 形参类似于一个变量
//函数的参数可以有 也可以没有 个数不限
// function cook(food) {
// console.log(food);
// }
// cook('这是龙虾');
// cook('这个鱼')
//6.利用函数求任意两个数的和
// function getSum(num1, num2) {
// console.log(num1 + num2);
// }
// getSum(2, 3);
// getSum(77, 3)
//7.函数总结
//函数可以带参数也可以不带参数
//声明函数的时候 函数名括号里面的是形参，形参默认为undefined
//调用函数的时候，函数名包括里面的实参
//多个参数中间用逗号隔开
//形参的个数可以和形参的个数不匹配，但是结果不可预计，应当尽量匹配
// //函数的返回值 return 需要返回的结果
// //（1）函数是做某件事或者实现某种功能
// //（2）函数的返回值格式
// //（3）我们函数只是实现某种功能，最终的结果需要返回给函数的调用者函数名() 通过return实现的
// //（4）只要函数遇到return 就把后面的结果 返回给函数的调用者 函数名()=return后面的结果
// function getRes() {
// return 123
// }
// getRes();//getRes()= 123
// console.log(getRes());
// //8.求任意两个数的和
// function getSum(num1, num2) {
// return (num1 + num2);
// }
// getSum();
// console.log(getSum(50, 50));
// //9. [12,1,3,45,88,99]
// function getMax(arr) {
// var max = arr[0];
// for (var i = 0; i < arr.length; i++) {
// if (arr[i] > max) {
// max = arr[i];
// }
// }
// return max;
// }
// var re = getMax([12, 1, 3, 45, 88, 99]);
// console.log(re);
//注意：在我们实际开发中，我们经常用一个变量来接受函数的返回结果 这里的var re=...
//函数的返回值注意事项 （1）return终止函数 （2）return一次只能返回一个值
//10.求任意两个数 加减乘除的结果
function getRe(num1, num2) {
return [num1 + num2, num1 - num2, num1 * num2, num1 / num2];
}
var re = getRe(4, 2);//返回的是一个数组
console.log(re);
//11.我们的函数 如果有return 则返回的是return后面的值 如果函数没有return 则返回 undefined
//12.break、continue、return的区别
arguments的使用
请查阅：bunny笔记| JS基础入门到精通[02]
<更多，请关注，后续将会持续更新>
网友评论