JS
Day01
什么是js的组成？
- ECMAScript（es） 其实就是js的规范（规则）
- DOM 文档对象模型 div span
- BOM 浏览器对象模型
JS的使用方式
-
行内样式的书写(不经常使用)
<div onclick="alert("您好！")"></div> -
内嵌式
<script> alert("你好！") </script> -
外链式
<script src="./js/xx.js"></script>
变量
-
变量的意义？
存储某一个东西，方便后续的使用
-
变量的定义：创建一个变量（后续可以使用）
-
变量的赋值：往 创建的变量内 存储某一个值（未赋值的内部有一个默认的值 undefined ）
-
定义的语法
//var 变量名 //var:关键字 代表后续使用的变量 var a; //创建一个变量 名为a var a1 //创建一个变量 名为a1 a=100; //变量的赋值 /* a=100; a:变量名 =赋值号 100 值（放到盒字里面的东西） */ var a=200; /* var a=200; var 代表关键字：代表后续创建变量 b 变量名 =赋值号 将它右侧的值，存储到左侧的变量中（不是等号） 200 值 （自定义）可以是任何数值 */ -
console.log
-
在浏览器控制台中，打印一些 我们想要的值
-
语法：console.log (我们想要打印的数据)
console.log(100) console.log("梦想从这里起飞！")//打印文本时，需要使用引号包裹（单引号双引号都可以） //打印单词时，需要使用 单引号 || 双引号 都可以
-
-
如何使用变量？？
- 声明变量 var a=100
- 将变量a的值打印到控制面板 console.log(a)
-
命名规范（最好最守，否则报错）
规范：= 左右空格
命名要见名知意
尽力不用拼音
行尾号 推荐加 但是需要根据公司的要求
规则一定遵守。否则 报错
-
变量的命名规范
-
字母、数字、$ 符号（数字、不能开头）
var a=1; var a1=1; //var 1a=11 数字开头，导致报错 var a$=1; var a_=11; //-、* 不可以 有其他作用 -
不能使用关键字或者保留字
-
关键字：var if function
-
保留字：现在还没有特殊功能，但将来可能会有 如：let
var var=1； //var作为关键字，不能用做变量名
-
-
驼峰命名法：
- 横杠连接（中划线） .big-box(class类名可以，变量名不行)
- 下划线 big_box (class 类名 ，变量都可以)
- 驼峰命名法，bigBox （两个单词拼接时，第二个首字母大写）
-
预解析：
- var a；
- var b；
- log
- a=123
结果 undefined
-
值的类型
-
值的类型
-
基础数据类型（简单数据类型）
-
数字类型（number类型）
整数，浮点数
-
字符串类型（需要使用引号包裹）string类型
-
undefined类型（未定义）
-
布尔类型：true/false
-
null类型（空）
-
-
复杂数据类型（引用数据类型）
- object类型
-
-
检测值类型的方法
语法：
-
typeof（要检测的数据）
-
typeof 要检测的数据
console.log(typeof 100) //number console.log(typeof '100')//string console.log(typeof undefined)//undefined console.log(typeof true)//boolean console.log(typeof null) //object /*null的类型就是null 之所以typeof 会检测出object 类型，是typeof的问题，与null的类型无关。 解决方法：使用Object.prototype.toString.call(null) */ console.log(Object.prototype.toString.call(null))//任何数据都能精确的打印 [object null]
-
-
值类型的转换
-
Number(数据)方法
-
转型函数Number()可以用于任何数据类型，将其他数据类型转为数字
-
字符串：纯数字字符串转为对应数字，空字符串和空白字符串转为0，非空非纯数字字符串转为NaN
-
布尔值：true转为1，false转为0
-
undefined：转为NaN
-
null：转为0
var a='100' Number(a) console.log(typeof Number(a)) var b=""//空字符串 var c=" "//空白字符串 console.log(Number(b)) //0 console.log( Number(c))//0 //根据js的转换规则 console.log(typeof Number(undefined)) //NaN 非数字的数字 console.log(typeof Number(null))//0 console.log(typeof Number(false))//0 console.log(typeof Number(true))//1
-
-
parseInt()方法：字符串转整数方法
-
对浮点数进行取整操作
- 对数字取整直接舍弃小数部分，只保留整数
-
将字符串转为整数数字
- 将字符串转为整数数字，也包含取整功能
-
字符串中，必须是纯数字字符串或者数字字符开头的字符串，才能转换为正常数字，且只取整数部分
-
如果不是数字打头的字符串，会转换为NaN
//parseInt 用来将其他类型的数值 转换为整数 console.log(parseInt(1.1)) //1.1 console.log(parseInt(1.9)) //1 console.log(parseInt(1.3456789)) //1.1.
-
-
parseFloat()方法：字符串转浮点数方法
-
将字符串转为浮点数数字
-
满足浮点数数字字符必须在字符串开始，如果不在开始返回值都是NaN
-
parseFloat console.log(1.1) // 1.1 console.log(parseFloat(1.1)) // 1.1 console.log(parseFloat('1.1')) // 1.1 console.log(parseFloat('1.1abc')) // 1.1 console.log(parseFloat('abc')) // NaN console.log(parseFloat(undefined)) // NaN console.log(parseFloat(null)) // NaN console.log(parseFloat(true)) // NaN console.log(parseFloat(false)) // NaN
-
-
-
转换字符串
-
变量.toString()`方法
-
String(变量)方法，有些值没有toString()，这个时候可以使用String()。比如undefi【ned和null -
+ 号拼接字符串方式
- num + “” ,当 + 两边一个操作符是字符串类型，一个操作符是其他类型的时候，会先把其他类型转换成字符串在进行字符串拼接，返回字符串
var a=100; console.log(typeof(a+'')) console.log(100 + 300)//400 console.log(100 + '300') //100300 /* +号，在js在代表将左右两侧的值，如100+300 等于400 但是，如果在+号两侧 出现一个字符传类型，那不在运算两者相加而是运算，两者的拼接，且得到的值，对字符类型的值 */ //toString 方法， //number 类型 可以调用 //boolean 类型，可以调用 //undefined 不能使用 toString 方法 //null 不能使用 toString 方法 //如果想要将undefined 或者null 转换为string类型 //1、可以通过+ ''的方式 //2、String(变量) var a; console.log(typeof a.toString())//报错
-
-
转布尔类型
-
Boolean(变量)方法
- 转型函数Boolean()可以用于任何数据类型，将其他数据类型转为布尔类型的值
- 转为false：NaN、0、“”空字符串、null、undefined
- 转为true：非0 非NaN数字、非空字符串
-
//数字转换为布尔值，非0即为真
console.log(Boolean(100))//true
console.log(Boolean(0))//false
console.log(Boolean(-100))//false
----------------------------
//转为false：NaN、0、"" 空字符串、null、undefined
//转为true：非0 非NaN数字、非空字符串
console.log(Boolean(''))//false
console.log(Boolean(' '))//true
console.log(Boolean('cmx'))// true
作业：去掘金搜索一些其他的值类型的检测方法
tyepof [value] ：检测数据类型的运算符
[example] instanceof [class] ： 检测某一个实例是否属于这个类
[example].constructor===[class] ：检测实例和类关系的，从而检测数据类型
Object.prototype.toString.call([value])：检测数据类型
详情：https://juejin.cn/post/6844904115097567239#heading-1
Day02
运算符
- 隐式转换：JS内部帮助我们转换的
- 显示转换：我们自己手动通过方法转换数据类型
- 除了加法数据类型不是number类型时会进行拼接，其他的都不会拼接，会隐式转换
console.log(1+2) //3
console.log(1+'2') //12(String)
console.log(2-2) //0
console.log(2-'2') //0
---------------------------------------
console.log(2 *2) //4
console.log(2*'2') //4
---------------------------------------
console.log(2/2) //1
console.log(2/'2') //1
---------------------------------------
console.log(7%2) //1
console.log(7%'2')//1
JS的赋值
-
可以用赋值号赋值
-
+=、-=、*=\、/= 、%=
var a=1; //a=a+1 ==>a+=1 //我自身 赋值为 我自身+1 ----------------------------- a=a-1 ==>a-=1 ----------------------------- a=a*2 ===>a*=2 ----------------------------- a=a/2 ===>a/=2 ----------------------------- a=a%2 ===>a%=2-
做什么的？
运算
-
可以不用？？
可以
-
用了有什么好处？？？
简化代码量
-
-
// >、<、 >=、 <= 、==、 =、 !=、 !
// >、<、 >=、 <= 、==、 ===、 !=、 !==
console.log(1>2)//false
console.log(1<2)//true
-------------------------------
/*
== 等于
= 赋值
=== 全等于
==和===作用一样，用于对比两侧数据是否相等
==只对比数据，不对比数据类型
=== 对比数据，其对比数据类型
== 在对比数据类型时。两侧数据不同，比如，一侧数字，一侧字符串。会进行隐式转换
*/
console.log(2==2) //true
console,log(2==='2') //false
-------------------------------
/*
!= 不等于
!== 不全等于
两者作用不相同，用与对两侧数据是否相同。相同时返回false，不相同返回true
!= 只对比数据。不对比数据类型（会进行隐式转换。转换为相同类型）
!== 对比数据，且对比数据类型
*/
console.log(2!=2) //false
console,log(2!='2') //false
console,log(2!=='2') //true
-
逻辑运算符： &&的优先级高于 ||
-
&&（逻辑与 逻辑且）
/* 逻辑与 语法：1、变量1 && 变量2 2、 表达式1 && 表达式2 返回方式： 前真后假：false 前假，直接返回false 全真为真，返回true */ var a=true && false //前一个为真。返回后一个 var b=false && true //第一个为假。直接返回前一个。所以会把false 返回 /* var a=0 && 1 逻辑与 左侧为0 右侧为1 0转换为布尔值，会转换为false（非0即为真） 按照逻辑与的返回方式，前一个为假（左侧为假），那么会返回第一个（左侧的值） var a=1 && 0 逻辑与 左侧为1 右侧为0 1转换为布尔值，会转换为true（非0即为真） 按照逻辑与的返回方式，前一个为真（左侧为真），那么会返回后一个（右侧的值） */ -
||（逻辑或）
/* 逻辑或 */ var a=1 ||0 //1 /* 逻辑或 左侧为1 右侧为0 1转换为布尔值为真，转换为true （非0即为真） 按照逻辑或的返回方式 第一个为真（左侧为真），返回左侧 第一个为假（左侧为假），会返回右侧的（后一个，第二个） */ var a= 0||1 //1 /* 逻辑或 左侧为0 右侧为1 0转换为布尔值为真，转换为false（非0即为真） 按照逻辑或的返回方式 第一个为真（左侧为真），返回左侧 第一个为假（左侧为假），会返回右侧的（后一个，第二个） */ -
！（逻辑非，取反、非）
var a=true； console.log(a) //true console.log(!a) //false /* 作用： 改变变量值的布尔值 */ var b=0 console.log(b) //0 console.log(!b) //true 0-->false 取反-->true var c=1 console.log(typeof c)//number console.log(typeof !c)//false console.log(typeof !!c)//true -
自增自减（++/–）
/* 变量名 前 或者 后 写在++（--） var a=0; a++; ++a; */ var a=0; var b=++a;//1 //++在前 ，先运算，然后参与周围表达式 /* var b=++a 1、先给a自增1，a的值为1 2、参与周围表达式的运算，把a的值赋值给变量b var c=a++ 1、把a的值直接赋值给c（此时还未自增，也就是说a的值为0） 2、a 自增1 */ var a=0 var b=--a /* --在前，先参与自减，然后参与周围表达式 var b=--a 1、a先参与自减，此时值为-1 2、把a自减的值，赋值给吧（此时b为-1） 在后，先参与周围表达式，然后参与自减 var b=a-- 1、a参与周围表达式的运算，也就是说把a赋值c（此时a为0 ，所以b的值也是0） 2、然后a自减（此时b为-1） */
-
分支语句
-
什么是分支语句？
基于某一个条件。决定执行哪一段代码 -
if分支语句
-
需求：基于某一个条件，只打印123 或者 456
-
语法：if（条件）{当条件为真时，执行的代码}
var a=1; if(a===1){ console.log(1) console.log(2) console.log(3) } if(a===2){ console.log(4) console.log(5) console.log(6) }
-
if(){}…else{}
- if关键字
- ()条件
- {} 要执行的代码
- else{} 当前边所有的条件都为假的时，他会执行
if(a==1){ console.log(1) console.log(2) console.log(3) } else{ console.log(4) console.log(5) console.log(6) } -
if…else if …else
-
新需要：
/*a==1，打印1 a==2,打印2 a==3,打印3 如果a不满上述条件打印 ，打印100*/ if(a==1){ console.log(1) } else if(a==2){ console.log(2) } else if(a==3){ console.log(3) } else{ console.log(100) }
-
总结：if判断从上到下一次检查，查询是否满足条件
如果满足，则仅执行当前分支，其他不执行
如果不满足，则会进行下一个if的判断，成功则执行， 不成功则继续往下执行，直到最后一个if成功则执行， 不成功则不执行
最后，查看是否有else 分支。如果有，且前边所有的if 条件都为假
-
-
switch…case
switch（条件）{ case 1： 满足case 1 时，执行的代码 break; case 2: 满足case 2 时，执行的代码 break; ..... default: console.log("xxxxx") }var a=1; switch(a){ case 1: console.log('a为1') break; case 2: console.log('a为2') break; default: console.log("上述代码都没有执行") }-
switch case 在做对比的时候，使用的是严格的全等，也就是说会对比，数据类型
-
default 会在上述条件（case）都不满足时，执行的
-
swtich…case的 穿透现象
- 当case后没有跟随break时，会从第一个满足条件的case开始执行，一直到最后一个
- 或者说 到后续 的最近一个break
var num=5 switch(num){ case 1: console.log("现在时1月") case 2: console.log("现在时2月") case 3: console.log("现在时3月") case 4: console.log("现在时4月") break; case 5: console.log("现在时5月") }
-
-
三元表达式
-
什么式三元表达式？
也式JS分支语句的一种
-
语法：条件 ？ 条件为真时执行：条件为假时执行
true ? console.log("条件为真"):console.log('条件为假') -
三元表达式：他执行的代码段只有一行。
-
-
//1、
var a = 3; //a==3
a++; //a==3
a++; //a==4
var b = a+2; //b==7 a==5
++a; //a==6
console.log(a) //a=6
//2、
console.log(3 - "36" % 5 + "2" - 2);
//3-1+"2"-2
//2+"2"-2
//"22"-2
//20
//3、
var a = 4; //a==4
var num = 1 * (2 + 3) && a++ || 5 > 6 && 7 < 8 || !9;
console.log(num);
//5 && 4 || false && true || false
// 4 || false || false
// 4 || false
// 4
//4、
var a = 3; // a == 3
var b = a++; // b == 3 a == 4
a + b + a++
// a + b + a++
// 4 + 3 + 4
// 11
//5、
console.log(parseInt(1 * 100 / 3 + ""))
/**
* parseInt(1 * 100 / 3 + "")
* parseInt(100 / 3 + "")
* parseInt(33.333333333... + "")
* parseInt('33.333333333...')
* 33
*/
Day03
循环语句
什么是循环语句？？
帮助我们多次执行某一个代码段
- 需要：在浏览器控制台打印50次1（循环语句）
while循环
-
基于某一个条件。循环处理 某一段代码
-
语法：
while(条件){ //要循环执行的代码 } -
死循环
var num=1; while(num<5){ //死循环 console.log(1) } -
循环
var num=1; while(num<5){ console.log(1) num++ //自增1 直到5跳出循环 } -
循环的组成
- 初始化条件
- 条件判断，不符合是结束循环
- 循环执行的代码
- 改变自身。如果不写，死循环
do…while（）循环
-
语法：
do{ //要执行的代码 } while(条件) -
和while循环的差异
while循环首次执行就会判断条件，条件不符合就不会执行 do...while循环，首次就执行，不需要判断条件，执行完毕在去 -
循环代码
var num=10 do{ console.log(1) num++ } while(num<6) /* 首次执行 1、直接执行{...}代码，所以会打印1，num++ 2、判断条件 num<6 ,此时num一定大于6 ，所以条件为 false，条件false直接停止循环 */
for循环
-
语法
for(1、声明变量;2、判断条件;3、改变自身){} -
小案例：
-
输出10次1
//1、输出10次1 for(var i=0;i<10;i++){ console.log(1) } -
在1000到2000的数字内，需要求出是4的倍数。且不是100的倍数的那个数字
新需求：不打印到控制台，输出在页面
新新需求：持续输出在页面， 但是每4个换行
var num=0 //计数器，计算达到每4个换行 for(var i=1000;i<2000;i++){ if(i%4==0 && i%100 !=0){ console.log(i) document.write(i+'') num++ if(num == 4){ document.write("<br>") num=0 } } } -
水仙花
- 有一个二位数，个位 十位 百位 三个位置的3次方 的和等于它自身
for(var i=100;i<1000;i++){ //现在拿到了三位数，我们现在应该拿到了三位数，各个位置上的数字 var bai=parseInt(i / 100) var shi=parseInt(i % 100 / 10) var ge=i % 10 // var sum=bai*bai*baid +shi*shi*shi + ge*ge*ge; var sum=bai**3 + shi ** 3 + ge ** 3 //** 表示返回 肉测的变量或值的X次方。这个X就是**右侧数字 if(i==sum){ console.log(i + '这个数字是水仙花数') } } -
质数
- 当一个数字 只能被1和它本身整除，那么它是一个质数
- prompt() ：JS当中可以让用户输入一些文本传递给JS
- 注意：prompt返回的用户输入值是string类型;如果用户点击了取消。则返回 null
-
-
（console.log(num,typeof num);）
//var num=+prompt("请输入一个数字"); var num=prompt("请输入一个数字")-0; var count=0; for(var i=2; i<num;i++){ if(num % i == 0){ count =count +2 } } count==0?console.log("是质数"):console.log("不是质数") ------------------------------------- var num=prompt("请输入一个数字")-0; for(var i=2; i<num;i++){ if(num % i == 0){ break; } }
流程控制语句
- break；关键字的应用
- continue 关键字 的应用
- 共同点：都可以打断循环
- 不同点：
- break：当我们想满足某一个条件时，停止整个循环，可以使用break；
- continue：当我们想满足某一个条件时，停止当前本轮循环，后续的循环正常执行
循环嵌套
-
什么是循环嵌套。
循环嵌套，两个循环叠在一起 -
语法
for(var i=0;i<3;i++){ console.log('第'+i+'次循环'); for(var j=0;j<3;j++){ console.log(j) } } -
外层循环执行一次，内层循环 就会完整的 执行一次
-
案例 一
*** *** ***代码：
for(var i=0;i<3;i++){ //行数 for(var j=0; j<3 ;j++){ //列数 document.write('*') } document.write("<br>") } -
注意：循环嵌套的条件或变量，不能与内层循环的相同
-
案例 二
* ** *** ****代码：
for(var i=1;i<=4;i++){ for(var j=1;j<=i;j++){ document.write('*') } document.write('<br>') } /* 第一次执行 i==1 该执行的内层循环 j==1 因为j<=i 此时 i的值为1 所以内层循环 此时会执行1次 也就是只会打印一次* 内层循环的结束后，执行document.write('<br>'),外层循环第一次执行 第二次执行 i==2 该执行的内层循环 j==1 因为j<=i 此时 i的值为2 所以内层循环 此时会执行2次 也就是只会打印两次* 内层循环的结束后，执行document.write('<br>'),外层循环第二次执行 第三次执行 i==3 该执行的内层循环 j==1 因为j<=i 此时 i的值为3 所以内层循环 此时会执行3次 也就是只会打印三次* 内层循环的结束后，执行document.write('<br>'),外层循环第三次执行 第四次执行 i==4 该执行的内层循环 j==1 因为j<=i 此时 i的值为4 所以内层循环 此时会执行4次 也就是只会打印四次* 内层循环的结束后，执行document.write('<br>'),外层循环第四次执行 第五次执行 i==5 因为外层循环的条件为i<=4 所以本轮不执行没停止循环 */ -
案例三：九九乘法表
<!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> *{ padding: 0; margin: 0; } tr{ height: 50px; } td{ width: 150px; text-indent: 20px; background-color: #333; color: white; font-size: 20px; font-weight: bold; font-family: '宋体'; border: 1px solid #fff; border-top: 0; } </style> </head>   <body> <script> for(var i=1;i<=9;i++){ document.write(`<table cellspacing=0><tr>`) for(var j=1;j<=i;j++){ document.<
最低0.47元/天 解锁文章
365
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
