认识JavaScript
JS概括
html 骨架
css 美化
js 动效 nodejs(服务器端)
游戏,页面动效,表单验证,服务端,智能检索
js:运行在客户端(浏览器)的解释型脚本语言。
解释型:
高级语言---->二进制语言 翻译
翻译:编译型和解释型
解释型:代码从上向下一遍解释一遍运行,javascript。由js引擎来进行的
浏览器内核:渲染引擎,js引擎
编译:一次性编译成可以执行二进制文件,统一运行。java c
历史
1995年,网景公司发明了一款navigator0.9版本的浏览,公认成熟,
缺点:不能交互,不能进行表单验证,网景公司找到布兰登艾奇,livescript的语言,
用于表单校验,交互. navigator2.0 版本上运用. 10天 —> javascript
1996, 微软公司 exporer3.0 JScript。
1997年,网景公司把javascript1.0 版本ECMA(欧洲计算机制造商协会)做标准化、
ECMAScript
### JS和H5的关系
h5:狭义:html的第5个版本
h5:web开发所有技术
eg: html css js nodejs vue react
B/S 架构:
browser :浏览器 客户端
Server: 服务器 服务端
js组成:
ECMAScript(语法),DOM,BOM
DOM:document object model 文档对象模型
BOM:browser object model 浏览器对象模型
js本质:可以通过js代码操作文档,浏览器
JS的编写
行内式
外链式
外链式不要在script、标签中写代码,如果想写,再下面写
内嵌式:写在html结构的底部,为了能够获取页面中的内容才写到最下面的
JS的注释
// 单行注释 :代码的解释说明
/*
多行注释
*/
JS输出语句
console.log(‘控制台输出1’);
alert(‘弹框1’)
页面输出 document.write(‘
helloworld
’)提示框
var a = prompt(‘请输入…’);
console.log(a);
变量
字面量:12 ‘张三’ true
1.变量的概念:存储数据的容器
2.变量的定义:
2.1 先声明,后赋值
var x; //声明变量
x = 10;//赋值
2.2 声明的同时赋值
var y = 20;
注意:变量一定要先声明后赋值
2.3 可以同时声明多个变量,再进行赋值
var x,y,z; //声明了3个变量
x = 10;
y = 20;
z = 30;
-
变量的命名规则和规范
3.1 变量是由字母,数字,下划线,美元符号, 现在已经支持汉字了,不推荐
3.2 不能以数字开头
3.3 不能是关键字和保留字
3.4 区分大小写
3.5 规范:见名识意
3.6 驼峰命名法
如果多个单词组成,第一个单词全部小写,从第二个单词开始,首字母全部大写
JS数据类型种类
数据类型:对数据的分类
数据类型的种类:
基本数据类型:字符串(string),数字(number),未定义(undefined),空(null),布尔(boolean)
复杂数据类型:对象(了解)object
/*
姓名:“赵丽影” —》字符串
年龄:33 —>数字类型
体重:未知 ----> undefined
是否结婚: 否 ----> 布尔 true、false
空: —>null
三围:{腰围,臀围,胸围} —>对象
*/
JS数据类型检测
检测数据类型:typeof关键字
1.1 字符串(string): 单引号或者双引号引起来 ‘张丽英’ ‘123’ “true” ‘null’
数字和字符串是可以进行拼接的
1.2 数值类型(number):10, 20.1 , -10, 01010101, 0xabef001,054, NaN
整数,小数,二进制(0和),八进制(0-7),十六进制(0-9 a-f)
NaN: number类型,但是不是数字
NaN的由来:在参与运算的过程中,出现了无法表示的数字的时候
undefined 未定义
var x ;
console.log(x); // 只声明,未赋值
1.4 boolean 布尔
console.log(true);// 是 真 对
console.log(false);// 否 假 错
console.log(typeof true);//boolean 布尔类型
1.5 null 空
var a = null; // 后期a将重新赋值成对象
console.log(typeof a); // object
JS数据类型转换
字符串转为数值类型
1. Number()
结论一:Number()可以将纯数字的字符串转为数值
结论二:Number()可以将非纯数字的字符串转为NaN,也是数值类型
结论三:将true转为1,将false转为0.
2. parseInt()
结论一: parseInt()可以将纯数字的字符串转为数值
结论二: parseInt()可以将数字开头的字符串转为数字
结论三: parseInt()可以将非数字开头的字符串转为NaN,也是属于number类型
结论四: parseInt()保留整数
3. parseFloat()
结论一: parseFloat()保留小数点后面的数字
结论二: parseFloat()数字开头的字符串转为数字
.toFixed()保留几位小数。
4. 隐式转换 - * / %
console.log('--------------------Number()-------------------');
var str = '100';//字符串
console.log(typeof str);// 检测str的类型为string
console.log(typeof Number(str));//通过Number()将str转换为数字,再进行检测
结论:
1. Number()和parseInt()的不同点:
parseInt()可以将数字开头的字符串转为数字,Number()只能将纯数字转为数字类型
2. parseInt()和parseFloat()的不同点:
parseInt()将字符串转为整数
parseFloat()将字符串转为 小数
转为boolean类型:
-
Boolean()
console.log(Boolean(x));
-
!!
console.log(!!x);
“ ” 0 NAN underdined null 转为f
数字转为字符串
1. num.toString()
2. String(num)
- 算术运算符:+ - * / %
+: 拼接 (字符串和字符串,字符串和数字相加)
+: 求和
赋值运算符
var a = 10; //将10赋值给10
a += 20; //等价于 a = a+20 将左边a和右边20求和,再重新赋值给a
数值类型:10 10.1 NaN
NaN: 非数字的number类型
isNaN() :帮助我们检测是否是非数字,是非数字结果为true,不是非数字结果是false
底层会调用Number()方法
关系运算符:
< >= <= == != === !==
关系运算符比较出的结果是布尔类型值
console.log(10==‘10’); //只比较值,不比较类型
console.log(10===‘10’);//既比较值,也比较类型
逻辑运算符
&&(与) ||(或) !(非)
&&: 与
console.log(3>5>4);// 错误
console.log(3>5&&5>4); // 一假即假 false
||: 或 一真即真(整个表达式有一个真,结果就是真)
! : 非 取反
a++;在a的基础上加1
++a: 在a的基础上加1
区别:单独使用时,都是自身加1
在参与输出,赋值,等操作时,a++和++a是有区别的
1. a++ 先输出a,再自身加1
2. ++a 先加1,再输出
流程控制
1.流程控制语句的分类
流程控制语句:
1. 顺序语句
2.分支语句 (根据条件选择性执行)
if语句 switch语句
3. 循环(根据条件循环执行,不满足条件时终止循环)
2.if的嵌套
// 适合于检查多重条件。
if (条件表达式1) {
语句1;
} else if (条件表达式2) {
语句2;
} else if (条件表达式3) {
语句3; …
} else { // 上述条件都不成立执行此处代码 }
三种:
1. 单分支 if(条件表达式){}
2. 双分支 if(){}else{}
3. 多分支 if(){}else if(){} else if(){}… else{}
单分支
var x = 10;
对x变量进行判断,如果条件表达式为true,就执行紧挨着的大括号
如果条件表达式为false,就不执行紧挨着的大括号
if (x>=20) {
console.log('123');
}
console.log('over');
var x = +prompt('请输入...');
双分支
条件表达式的意思是:x是一个偶数
if (x%2==0) {
console.log('我是偶数');
} else {
console.log('我是奇数');
}
多分支
var x = +prompt(‘请输入数字…’);
if(x>=80&&x<=100){
alert(‘优秀’)
}else if(x>=60&&x<80){
alert(‘良好’)
}else if(x<60&&x>=0){
alert(‘差生’)
}else{
alert(‘你输入的数字超出成绩范围’)
}
3.switch语句
switch的语法
表达式:通过运算得到一个值,3+2 5>3
执行流程:拿匹配表达式和case后的常量进行比对,必对成功的,进入程序,输出该case选项的语句以及后面的语句,遇到break终止。
switch (匹配表达式) {
case 常量值:
语句;
break;
case 常量值:
语句;
break;
case 常量值:
语句;
break;
case 常量值:
语句;
break;
default:
语句;
break;
}
var x = ‘B’
// 常量: 1 3 ‘abc’ true ‘A’ ‘B’
switch (x) {
case ‘A’:
alert(‘A选项’);
break;
case ‘B’:
alert(‘B选项’);
break;
case ‘C’:
alert(‘C选项’);
break;
case ‘D’:
alert(‘D选项’);
break;
default:
alert(‘没有匹配到’);
break;
}
循环
顺序语句
分支语句 if switch
循环语句: 满足某个条件时一直执行,当条件不满足的时候,停止执行
break: 终止
break出现的场景:switch语句,循环中
continue: 中止本次循环,继续下一次循环
for循环
for(初始化语句;条件判断语句;变量更新语句){
循环体}
while循环
初始化语句;
while(条件判断){
语句体;
变量更新;
}
do while循环
初始化语句;
do{
语句体;
变量更新
}while(条件判断)
图形: 循环嵌套,外层循环控制行数,内层循环控制每行的个数
用法上:
// for循环针对循环次数已知;
// while针对循环次数未知
do while循环:针对于哪种,必须执行一次的循环。
函数
1.三元表达式
三元表达式
// 条件表达式?值1:值2
// 当条件表达式结果为true,选择的是值1
// 当条件表达式结果为false,选择的是值2
2.函数
函数的概念:完成特定功能的代码块的一个封装,这个封装的代码块可以重复执行
// 声明变量
// var x = 10;
// 声明函数
// function fn(){
// }
// 利用函数封装
function printSjx() {
document.write('<table>')
for (var i = 1; i <= 9; i++) {
document.write('<tr>')
for (var j = 1; j <= i; j++) {
// document.write('<td>'+i+'*'+j+'='+i*j+'</td>')
document.write(`<td>${i}*${j}=${i * j}</td>`)
}
document.write('</tr>');
}
document.write('</table>')
}
// 封装完的代码可以重复执行
// 调用函数
// printSjx()
// printSjx()
// printSjx()
// 函数不调用不执行。
定义函数的两种方式区别:
-
函数声明式,调用的时候可以放在函数定义的上面或者下面
function fn(){
}
-
表达式声明法:调用时只能写在函数定义的下面,放在上面会报错
var printSanJiaoXing = function(){
}
定义函数的两种方式:
// 函数名:驼峰命名法 动词 eatApple printSanJiaoXing
// (): 必须要带
// 参数列表:个数0个或者多个(根据实际需求进行改写)
// {}: 完成特定功能的代码都需要放在{}中
// function 函数名([参数列表]){}
1. 函数声明式。通过function关键字 来声明的
// function printSanJiaoXing(){}
2. 表达式声明法(函数赋值)
函数的参数:
形参: 函数定义时写的参数叫形参
实参: 函数调用时写的参数叫实参
函数调用的本质是:将实参赋值给形参
函数调用时,实参赋值给形参
形参和实参个数相同时,参数赋值会一一对应
形参个数>实参个数: 没有给赋值的形参,值为undefined
实参的数>形参个数:可以通过arguments来获取传入的实参
每一个函数内部都会有一个叫arguments:它会记录你传递过去的所有实参
// arguments: [2, 3, 6, 4, 5]
// arguments[0] arguments[1] arguments[2] arguments[3] arguments[4]
个数 形参 = 实参 一一兑现
形参 > 实参 多出来的参数 undefined
形参 < 实参 arguments
返回值
return:
通过return 关键字返回出来的结果,函数调用时,结果就可以被保存起来
带return的函数,函数调用的结果是一个值,可以直接输出,也可以存到变量中
函数如果带return了,函数调用的结果是 一个值,可以直接输出,也可以保存到变量里
return作用补充
// 1.没有手写return的话,系统会在程序{}的结尾处,写 return undefined
// 2.函数带 return了,函数调用的结果是return后面的值
// 3.函数只写一个return;函数调用结果还是undefined
// 4.函数只能带出来一个值
// 5.return终止函数,后面的代码将不再执行。
随机数
产生一个随机数
// var x = parseInt(Math.random() * (最大值-最小值)+最小值)
// document.write(x)
// function getColor() {
// var r = parseInt(Math.random() * 256)
// var g = parseInt(Math.random() * 256)
// var b = parseInt(Math.random() * 256)
// var str = `rgb(${r},${g},${b})`
// return str;
// }
// document.write(getColor());
截取字符串位数
字符串:x
x.substr(起始位,截取位数)
x.length :表示字符串x的长度。
保留几位小数
toFixed(x)
次方函数
x = Math.pow(2,3) // 表示2的3次方