javascript
- 是一种编程语言
javascript语言的组成
- ECMAScript
确定js语言的语法规范 一些特定的可以被计算机识别的代码) - DOM
文档对象模型
js动态操作网页内容 一套操作页面元素的API
通过DOM提供的API对文档树(HTML)进行节点操作 - BOM
浏览器对象模型
js动态操作浏览器窗口 一套操作浏览器功能的API
通过BOM可以操作浏览器窗口
应用场景
- 网页特效
- 游戏开发(通过cocos2d.js)
- 服务端开发(通过node.js)
- 命令行工具(通过node.js)
- 桌面程序(Electron)
- App(Cordova)
- 控制硬件(物联网Ruff)
凡是能用js实现的功能 最终都会用js来实现
js三种书写位置
- 行内式
写在标签内部
<div onclick="alert('我是行内写法')"></div>
- 内嵌式
写在script标签中
script标签可以写在head标签中 也可以写在body标签中
<script>
alert('我是内嵌写法')
</script>
- 外联式
写在js文件中
要用script标签的src属性导入
<script src='1.js'></script>
注意
如果script标签没有写src属性 是内联写法 js代码要写在标签里面
如果script标签写了src属性 是外联写法 js代码写在js文件中 此时script标签里面的代码无效
js代码注释
-
单行注释
//
注释内容只能是一行 -
对行注释
/**/
注释内容可以使多行
单行注释快捷键 ctrl + /
多行注释快捷键 ctrl + shift + /
js常用五句话
- 主要用于调试以及浏览器的简单交互
alert('弹出一个提示框');
console.log('在控制台输出');
prompt('弹出一个输入框');//得到的数据是字符串类型
confirm('弹出一个确认框');
document.write('动态给页面添加内容')
注意
console.log()是给程序员自己看的 不是给用户看的
document.write()可能会覆盖网页原本的内容
计算机工作原理
-
计算机组成
-
软件(安装在操作系统上 操作系统的底层又运行在硬件当中)
应用软件: 浏览器 qq 微信 webstorm…
系统软件: Windows Linux iOS… -
硬件
三大件: CPU 内存 硬盘
输入设备 鼠标 键盘 摄像头…
输出设备 显示器 打印机 投影机… -
代码进行的原理
-
代码在运行时 计算机主要做两件事
1.识别并实现语法
2.处理数据(计算和存储)
数据类型与直接量
-
直接量(字面量)
js可以直接拿来使用的数据
这里的数据是指符合数据类型的数据 -
数据类型
代码在运行的时候 会产生各种不同的数据 不同的数据 CPU处理与存储的方式是不一样的 所以 需要对数据进行数据类型的分类
字符串类型String
用于显示网页文本
一切以单引号或双引号引起来的内容 都是字符串类型
数值类型Number
用于数学计算
一切数学中的数字
- 数字的极值(了解)
console.log ( Number.MAX_VALUE );//1.7976931348623157e+308 无限接近于正无穷的数
console.log ( Number.MIN_VALUE );//5e-324 无限接近于0的正数
console.log (Infinity );//正无穷
console.log (- Infinity );//负无穷
布尔类型Boolean
表示事物的对立面
只有两个值 true真 false假
注意
谷歌控制台小技巧
字符串显示黑色 数字显示蓝色
typeof 检测数据所属的数据类型
- 两种语法
typeof(数据)
typeof 数据
typeof结果会得到数据所对应类型的
字符串
可以检测除null和数组之外的数据类型
console.log ( typeof 123 );//'number'
console.log ( typeof( 123 ) );//'number'
console.log ( typeof "123" );//'string'
console.log ( typeof true );//'boolean'
function fn(){
}
console.log(typeof fn);//function
var a ;
console.log(typeof a);//undefined
var nu = null;
console.log(typeof nu);//object
var arr = [1,2,3];
console.log(typeof arr);//object
数组数据类型检测
Array.isArray(数据)- 检测数据是否是数据 是数组返回true 不是数组返回false
var arr = [1,2,3];
console.log(Array.isArray(arr));//true
数据 instanceof Array- 检测数据是否是数据 是数组返回true 不是数组返回false
var arr = [1,2,3];
console.log(arr instanceof Array);//true
万能的数据类型检测
Object.prototype.toString.call(数据)- 可以检测所有的数据类型
var arr = [1,2,3];
console.log(Object.prototype.toString.call(arr));//[Object Array]
var nu = null;
console.log(Object.prototype.toString.call(nu));//[Object Null]
变量
- var (variable)关键字
内存中用来保存数据的一块空间 - 用于声明变量
用于在内存中存储数据
var num;//声明变量
num = 10;//赋值
console.log(num);//取值
注意
=号在js中是赋值运算符
作用是将等号右边的数据存入左边的变量对应的空间中
注意 不要把变量与字符串搞混淆
console.log('num');//打印的是num字符串
console.log(num);//打印num变量中存储的数据
-
变量的初始化
var num = 10; -
变量的批量声明(同时声明多个变量)
var a,b,c; -
变量的批量声明赋值
var a=10,b=10,c=10; -
变量的重新声明(会覆盖已经存在的变量)
var num = 20; -
变量的重新赋值(先销毁旧值 然后存入新值)
num = 10; -
变量的值是另一个变量的值
-
是将变量中的数据复制一份给另一个变量
var a = 10;
//将a变量中的值复制一份给变量b
var b = a;
- 交换两个变量的值
var n1 = 10;
var n2 = 20;
var temp = n1;
n1 = n2;
n2 = temp;
console.log(n1);
console.log(n2);
- 不适用临时变量 交换两个变量的值
var a = 10;
var b = 20;
a = b - a;//b=20 a=10
b = b - a;//b= 10 a=10
a = a + b;//a = 20 b=10
console.log(a);
console.log(b);
变量的命名规则与规范
规则
必须遵守 不遵守程序会报错
变量名由字母 数字 下划线_ $符号组成 不能以数字开头
不能以js关键字和保留字作为变量名
规范
所有程序员需要遵守的代码习惯
命名要有意义 一般用英语名词
使用驼峰命名法 第一个英语单词首字母小写 后面每个单词首字母大写 如fontSize
js中的+号的两个作用
字符串连接符
- 把加号两边的数据连接成一个新的字符串
- 加号两边只要有一边是字符串 会拼接成字符串
console.log(100+'100');//'100100'
数学加号
- 两边都要是数字
console.log(1+1);//2
算术运算符与算术表达式
- 算术运算符
+ - * / % - 运算符只是一种运算符的符号 单独存在没有意义 通常与数字在一起组成式子 也就是表达式
- 表达式一定有结果 要么直接打印出结果 要么存入变量中
console.log(1+1);//2
var a = 1+1;
console.log(a);//2
//%取模
console.log(10%3);//1
注意
除法中 0不能作为除数 如果一个数字除以0 会得到Infinity
如果一个除法的结果是无限循环小数 js只会保留小数点后的15-17位 对开发没有影响 可以忽略
- 复合算术运算符
+=
-=
*=
/=
%=
var num =10;
num = num % 3;
//等价于
var num = 10;
num %= 3
自增自减运算符
自增运算符++
- 自增表达式 由自增运算符组成的式子
num++ - 变量自身+1
自减运算符--
-
自减表达式 由自减运算符组成的式子
num-- -
变量自身-1
-
前自增与后自增
++num
num++
相同点:无论是前自增还是后自增 对于变量自身而已没有区别 都是自身+1
不同点 表达式结果不同
//后自增
var num =10;
num++;
console.log(num);//11
//先赋值 后自增
//将变量的值赋值给表达式的结果 再变量自身+1
var res = num++;
console.log(res);//11
//前自增
var num =10;
++num;
console.log(num);//11
//先自增 后赋值
//将变量自身+1 在将变量的值赋值给表达式的结果
var res = ++num;
console.log(res);//12
- 测试题1
var a = 1;
var b = a++ +a++;
//b=1+ a=2
//b=1+2=3 a=3
console.log(a);//3
console.log(b);//3
- 测试题2
var c = 10;
var d = c++ + ++c -c--;
//d=10+ c=11
//d=10+12- c=12
//d=10+12-12 c=11
console.log(c);//11
console.log(d);//10
关系表达式与关系运算符
关系运算符
- 比较两个数字之间的关系(判断某种条件是否成立)
>>=<<===!====!==
关系表达式
- 由关系运算符组成的式子
- 结果一定是布尔类型 true关系成立 false关系不成立
console.log(10<2);//false
console.log(1=='1');//true
console.log(1==='1');//false
==相等与===全等的区别
==相等运算符 只比较数据的值 不比较数据的类型
===全等运算符 先比较数据的值 后比较数据的类型
注意
区别于=号
=号是赋值运算符
将等号右边的数据存入左边的变量中
逻辑运算符与逻辑表达式
逻辑运算符
- 计算多个条件之间的关系
&&逻辑与 一假则假
||逻辑或 一真则真
!逻辑非 取反 true变false false变true
逻辑运算符的短路运算
- 如果左边的式子能够决定逻辑表达式的结果 那么右边的式子不会执行
- 逻辑与 一假则假
找假
如果左边的式子能够转换为false 就无条件返回左边式子的值 反之无条件返回右边式子的值 - 逻辑或 一真则真
找真
如果左边的式子能够转换为true 就无条件返回左边式子的值 反之无条件返回右边式子的值 - 逻辑非
没有短路运算
因为逻辑非只有一个式子
var num = 10;
var res = 1>2 && num++;
console.log(res);//false 一假则假 &&后面的式子不会执行
console.log(num);//10
var res = 1 || null;
console.log(res);//1
var res = undefined || null;//一真则真
console.log(res);//null
- 逻辑表达式的结果不一定是布尔类型 ! ! ! ! !
var num =10 && 20;
console.log(num);//20
逻辑表达式
- 由逻辑运算符组成的式子
console.log(20>10 && 20<5);//false
console.log(20>10 || 20<5);//true
console.log(!true);//false
运算符的优先级(了解)
- 不同的运算符运算的顺序不一样
- 小括号()
作用 提升优先级 - 自增自减运算符
- 算数运算符
- 关系运算符
- 逻辑运算符
- 赋值运算符
![[运算符优先级]](https://img-blog.csdnimg.cn/20190715174356553.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0RlbmlzZWRhbg==,size_16,color_FFFFFF,t_70)
Math高级数学函数
| Math语法 | 描述 |
|---|---|
| Math.PI | 圆周率 |
| Math.abs() | 绝对值(返回一个数字距离坐标原点的距离) |
| Math.ceil() | 天花板函数(向上取整) |
| Math.floor() | 地板函数(向下取整) |
| Math.max() | 取一组数字的最大值 |
| Math.mix() | 取一组数字的最小值 |
| Math.round() | 四舍五入 |
| Math.pow(x,y) | 幂运算 (求x的y次方) |
| Math.random() | 随机数(生成0-1之间的小数) |
console.log(Math.PI);//3.141592653589793
console.log(Math.abs(-2));//2
console.log(Math.ceil(1.2));//2
console.log(Math.floor(1.2));//1
console.log(Math.max(10,20,30));//30
console.log(Math.min(10,20,30));//10
console.log(Math.round(10.5));//11
console.log(Math.pow(2,3));//8
console.log(Math.random());//生成0-1之间的随机小数
console.log(Math.random()*100);//生成0-100之间的随机小数
console.log(Math.ceil(Math.random()*100));//生成1-100之间的随机整数 需要向上取整
console.log(Math.floor(Math.random()*100));//生成0-100之间的随机整数 需要向下取整
数据类型
-
基本数据类型
number
string
boolean
null
undefined -
复杂数据类型
Array
Object
Function -
undefined
只有一个值 就是undefined
未定义
如果变量只声明 未赋值 默认值就是undefined -
null
只有一个值 就是null
空值
必须手动设置 变量在任何时候自己的值都不会是null
如果使用typeof检测null 结果会得到object 无法用typeof检测null
如果要检测 可以使用Object.prototype.toString.call(null);来检测 结果是[Object Null]
undefined与null的区别(重点)
undefined与null的数据类型不同 但是值的比较的时候是相同的
console.log(undefined==null);//true 它们的值都是空
console.log(undefined===null);//false 它们的值相等 但是数据类型不同
NaN与isNaN
NaN (not a number)
是number数值类型中的一个特殊的值
表示数学错误的计算结果
如果数学计算结果不是一个数字 就会得到NaN
注意
NaN与任何数字计算的结果都是NaN
NaN与任何数字都不等 包括它自身
console.log('字符串'-20);//NaN
console.log(NaN+1);//NaN
console.log(NaN==0);//false
console.log(NaN==NaN);//false
console.log(typeof NaN);//'number'
检测一个数据是不是NaN
- 语法 isNaN(数据)
- 如果结果是数字 返回false 结果不是数字 返回true
console.log(isNaN(NaN));//true
console.log(isNaN('字符串'-1));//true
console.log(isNaN(10-1));//false
显式类型转换
- 程序员主动调用关键字来转换
其他数据类型转number
1.string字符串类型转number
- .
parentInt(数据)转整数
工作原理: 从左往右逐个解析字符 遇到非数字字符会结束解析 并返回已经解析好的整数 如果第一个字符串就是非数字字符 直接返回NaN parentFloat(数据)转浮点数
工作原理: 从左往右逐个解析字符 可以识别第一个小数点 后面再遇到非数字字符会结束解析 并返回已经解析好的数字 如果第一个字符串就是非数字字符 直接返回NaN
2.其他数据类型转number
Number(数据)
工作原理: 可以解析整数与小数 将整个数据进行解析 只要有一个非数字字符就会返回NaN- 常见的是布尔类型转数值类型 会得到0或1
true转1 false转0 - undefined转数值类型 会得到NaN
- null转数值类型 会得到0
console.log(Number(true));//1
console.log(Number(false));//0
console.log(Number(undefined));//NaN
console.log(Number(null));//0
console.log(Number(''));//0
一般数字字符串转数字使用parseInt和parseFloat 其他数据类型转数字用Number()
其他数据类型转string
String(数据)
可以识别undefined与null变量名.toString()
不能识别undefined与null
其他数据类型转boolean
Boolean(数据)
布尔类型只有两个值
false: 八种情况会得到false
0 -0 NaN '' undefined null false document.all()
true: 除开得到false的八种情况之外的一切数据
隐式类型转换
- 当运算符两边的数据类型不一样 编译器会偷偷帮我们转成一致在进行计算
转number的情况
- 算数运算符(
+ - * / %) - 关系运算符(
> >= < <=
最低0.47元/天 解锁文章
436
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
