简单快捷键:win+shift+S 任意截图;F12,调出开发者工具;
目录
3、String(字符串类型)——可以双引号/单引号 ,推荐单引号
1、if、if else、if else if、三元表达式、switch
一、JS中的基础知识
1、基础介绍
JS中有错误不会再往下执行;
JS操作流程:用户输入,JS处理,最后结果返回给用户。
想要控制台输出多个变量,中间用逗号隔开,eg:console.log(sum,average);
JS逻辑性强:先怎么做,后怎么做。
javascript运行在客户端(即运行在浏览器中);
script(脚本)——不需要编译,逐行编译;
JavaScript可以基于Node.js技术进行服务器端编程;
PHP、Java、python都用JavaScript;
2、浏览器分为渲染引擎和JS引擎
渲染引擎用于解析HTML和CSS,俗称内核;
JS引擎(JS解释器);
3、JavaScript组成
①JavaScript基础:ECMAScript(JavaScript)规定JavaScript语法
②JavaScript API(接口):DOM(页面文档对象模型),BOM(浏览器对象模型)
通过DOM可以对页面上的各种元素进行操作(大小、位置、颜色)。
通过BOM可以操作浏览器窗口,比如弹出框、控制浏览器跳转、获取分辨率。
4、书写基本规范
HTML推荐双引号,JS推荐单引号。
JS分为内嵌、外部、行内三种写法。
通常使用内嵌JS,代码量大用外部JS,行内JS可读性差。
JS注释,单行(//)ctrl+/,多行(/* */)默认shift+alt+a,设置图标中vscode中修改快捷键
prompt输入框:(注意:取出来的值为String)(注意:此输入框为网页弹出的输入框)
二、变量
1、 变量
变量是内存中申请一个存储数据的空间。
①声明变量var xx;②赋值。
“=”把右面的值输给左面的变量。
2、变量名命名规则
变量名命名规则:数字、字母、下划线、美元符号;数字不能开头;采取驼峰式(eg:myNameTime)。
注意:name有浏览器为特殊含义,尽量不用name做变量名,可以myname
3、推荐画图软件
4、变量归纳
三、基本数据类型+其他的一些零碎知识
JS数据类型(弱语言类型/动态语言类型)
简单数据类型(5种):Number、Boolean、String、Undifined、NULL。
复杂数据类型:Object。
0...,0x....;//十进制,十六进制;
1、Number数字型:
2、isNaN();
3、String(字符串类型)——可以双引号/单引号 ,推荐单引号
4、换行
不能用标签<br/>,要用转义字符
5、转义字符
6、字符串拼接 “+”(数值相加,字符相连)
7、年龄案例(字符串拼接案例)
8、布尔型Boolean
布尔型和数字型相加时,参与运算,true的值为1,false的值为0;
console.log(true+1); // 2
console.log(false+1); // 1
9、检测数据类型typeof
var num = 1;
console.log(typeof num); // number
10、通过控制台颜色区别数据类型
11、数据类型转换
①转换为字符型
②转换为数字型,parse表示解析
12、计算年龄案例(转换类型的案例)
13、简单加法器案例(转换类型的案例)
14、转换布尔型
15、浮点数计算
浮点数计算容易出问题,不要直接判断两个浮点数进行比较是否相等
16、 通过取余%判断是否能够被整除
17、自增
var age =10;
console.log(++age + 10); //(10+1)+10=21——先age++,再返回值21——口号:先自增, //再返回值
console.log(age++ + 10); //(10)+10=20——先返回值20,再age++;——口号:先返回原 //值进行加减,再自增
console.log(age); //即再age++;age=11
18、自增案例
19、“==”比较,“=”赋值
20、“==”与“===”的区别
21、逻辑“与”运算断路
22、逻辑“或”运算断路
23、逻辑短路
逻辑短路很重要,影响结果,案例(逻辑“或”运算断路)
var num=0;
console.log(123 || num++); //123,num++不执行,所以num=0
console.log(num); //0
24、运算符优先级
四、流程语句使用
流程控制:顺序、分支、循环控制
分支控制:根据条件来进行分支
1、if、if else、if else if、三元表达式、switch
①if:条件表达式为真输出执行语句,为假执行if后的其他语句
if(条件表达式){
//执行语句
}
②if else 双分支语句
③if else if 多分支语句,适用于多条件——比较适用于判断范围的情况
④三元表达式——比较适用于双分支语句,比if else的情况快
三元表达式语句——条件表达式 ?表达式1 : 表达式2
表达式具有返回值,返回值赋予一个变量result——eg:var num = 10;var result = num > 5 ? '是的' : '不是的';
三元表达式的案例(可用于京东秒杀倒计时):
⑤switch(直接跳转判断):把表达式的值与value的值相比较——比较适用于固定值或特定值的情况,比if else(一个一个的判断)快
switch(表达式,通常直接写成变量 eg:num){
case value1(eg:1):
执行语句1;break;
case value1:
执行语句1;break;
.........
default :
执行最后的语句;
}
注意:num与value值要全等“===”
案例(水果switch):
2、if else if 与switch的区别
3、JS其他书写规范之空格
4、continue关键字
若continue的条件为真,则不执行下面语句,跳出本次循环。
1、案例:共五个包子,吃到第3个的时候吃到个虫子,第三个不吃了,继续吃完。
2、案例:求1~100之间,除了能被7整除之外的整数和。
5、break关键字
break关键字:退出整个循环
案例:共五个包子,吃到第3个的时候吃到个虫子,就不吃了。
6、for循环
1.案例(for循序):打印倒三角形
2.案例(for循序):让用户控制输出“ .......”的次数。
3.案例(for循序):九九乘法表
4、案例(for循序):学生成绩
7、for、while、do while之间的区别总结
五、数组
访问:获取得到的意思。
遍历:把数组中的元素从头到尾访问一次
索引(下标),索引号从0开始。
获取数组元素方式:数组名[下标]。
没有数组元素,默认值为undefined。
案例(数组):求数组中的最大值
案例(数组):数组元素用分隔符隔开并连接成字符串的形式输出。
新增数组元素的两种方式:
案例(数组):数组存放1~10个值。
案例(数组):把数组中大于等于10中的元素放到新数组中。
案例(数组):翻转数组元素(即反过来存放的新数组中)
方法一:
方法二:
案例:5个元素从大到小排序之冒泡排序
第一趟:两两之间,判断大小,(<)最后最小1的到最后,即比较4次;
第二趟:两两之间,判断大小,(<)最后最小2的到倒数第二的位置,最后1已经最小不用比较,即比较3次;
第三趟:两两之间,判断大小,(<)最后3的到倒数第三的位置,最后1、2已经最小不用比较,即比较2次;
第四趟:两两之间,判断大小,(<)最后4的到倒数第四的位置,最后1、2、3已经最小不用比较,即比较1次;
形成了5、4、3、2、1的顺序
六、函数
函数目的(为什么使用函数):为了调用重复的代码块。
函数:就是封装了一段可以被重复执行调用的代码块。
函数封装(打包):把一个或多个功能通过函数的方式封装起来,对外只提供一个简单的函数接口。
函数使用:分为两步——声明函数和调用函数。
函数是做某件事情,函数名基本为动词。
声明函数:function 函数名(){
//函数体
}
调用函数:函数名(); //不用忘记小括号
1、函数的形参和实参
可以利用函数的参数实现来函数重复不同的代码。
function 函数名(形参1,形参2...){
}
函数名(实参1,实参2...);
形参:在声明函数的小括号里面的是形参,形参为形式上的参数,形参为接收实参的,形参为不用声明的变量。
实参:在函数调用的小括号里面的是实参,实参为实际的参数,实参是传递给形参的。
2、形参与实参个数匹配的关系
函数内部不应该有输出语句,应该把值返回给调用函数(函数名();)。
调用函数=调用者=函数名()。
3、return注意事项
①return 终止函数:声明函数中,return后面的语句不会被执行。
②return只会返回一个值,若return返回多个值,以最后一个值为准返回。eg:return num1,num2;//只会返回num2的值。
③若想return返回多个值,可以把多个值弄到数组中。
④若函数无return,则函数返回undefined。
⑤return不仅可以退出循环,还能够返回return语句中的值,同时还可以结束当前的函数体内的代码。——break结束当前循环体,continue跳出本次循环且继续执行下次循环。
4、arguments的使用
arguments为函数都有的内置对象,每个函数都内置好了,只有函数才有arguments;
arguments里面存储着所有实参;
不知道实参到底为几个的时候,可以用arguments。
————————————————
伪数组,并不是真正意义上的数组:
1.有length属性
2.按照索引方式进行存储
3.没有真正数组的方法,eg:push()
5、注意:if的()中的值应为true或false:
6、函数的两种声明方式
7、作用域
作用域,减少用名冲突,在es6之前分为全局作用域和局部作用域(函数作用域):
<script>
var num=10;//全局变量
console.log(num);//输出num=10
function fn(){
var num=20;//局部变量
console.log(num);//输出num=20
}
</script>
//注意:即这两个num不冲突
es6中新加了块级作用域{},eg:if{},for{}中的,{}外中不可调用其中的变量
内部函数可以调用外部函数的变量,采用作用域链的链式查找(就近原则),向上查找。
8、预解析
注意 JS引擎(解析器)先预解析再代码执行:
案例1(预解析):
//案例1:输出结果为undefined
案例2(预解析):
//案例2:输出结果如下:
//undefined
//20
重点案例3(预解析):
//案例3输出结果如下:
①//9
②//9
③//9
④//9
⑤//9
⑥//报错 a is not defined
——————————————————————
其中
注意:var a=b=c=9;
//相当于
//var a;
//a=9;
//b=9; 没有var,直接相当于全局变量b=9
//c=9; 没有var,直接相当于全局变量c=9
——————————————————————
注意:集体变量声明赋值正确为中间用逗号隔开
var a=9,b=9,c=9;
七、对象(使结构表达更清晰):
对象:一个具体的事物,是能够看的见莫得找的;
对象是无序的由属性和方法组成的;
属性:事物的特征,外在的特性,用名词;
方法:是能干什么,用动词。
1、创建对象、使用对象的三种方法
方法一(用对象字面量来创建对象):
方法二(用new Object来创建对象):
方法三(构造函数来创建对象):
方法调用如下:
2、构造函数和对象的区别
3、变量、属性和函数、方法的区别
4、new关键字的执行过程
5、遍历对象(for..in)
6、对象小结
未完待续。。。