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.<