初识js
- 由网景公司开发,基于浏览器,基于面向对象,基于事件驱动的网页脚本语言。主要用来做表单验证、网页特效、网页小游戏、服务器异步交互。
js书写位置
- 内联式js的写法与css类似
<script type="text/javascript'>
代码内容
</script>
- 可以看出只是包裹的标签不一样,js使用script包裹起来的。
- 外联式使用
<script type="text/javascript" src="文件地址"></script>
,来进行引入。 - 拓展两个不常用的script标签属性
-
async="async"
设置外部js文件异步加载,相当于既加载html又加载js,当js加载完毕后立即执行 -
defer="defer"
设置文件最后加载,就是当其他的代码都加载完毕后,再加载js并运行。
-
JS-API介绍
- 应用程序编程接口。其实它就是一些预定于的函数。提供程序员基于某些硬件和软件访问一组程序的能力,无需访问源码,无需知道源码的运行机制
- 常见的接口:百度地图、豆瓣电影、爱奇艺影视等
js语法格式
- 推荐使用每行一句代码,并用分号结束
var num = 1;
var string= "你好";
- 注意,在js中就要区分大小写了,和css不同
alert弹出警示框
- 语法:
alert("内容");
- 写全是window.alert();也可以省略,为了方便一般会用简单的写法。
- 注意alert你写几个它就弹几次。由于兼容性问题,不同浏览器显示的弹出框样式不同,所以一般很少用,主要是用来调试程序的。
prompt弹出输入框
- 语法:
prompt("参数1","参数2");
- 参数1是提示或者问题信息,参数2是输入框默认值,如果不写参数2输入框就为空。当用户点击了确定会返回输入框中的值,点击取消返回null
console.log控制台输出日志记录
- 语法:
console.log("内容");
- 这个输出的结果是不在页面中显示的,只能在调试工具的控制台中看到。
document.write文档打印输出
- 语法:
document.write("内容");
- 这个也是打印内容,但是和console.log不同的是,document.write输出的内容是直接显示到页面中,用户是可以看到的。
变量
- 声明方式:
var string = "变量值";
- 可以看出,为了证明这是一个变量,要用var来声明,然后跟上变量名和赋值。并且变量只能存放一个值,前面的值会被后面的赋值替换掉。
- 想要获取变量存放的值,直接打印变量名就能取得。
- 总结:变量是一个存放最后一次赋值的容器。
变量命名规范
- 变量只能由字母、数字、下划线、$来组成,且不能由数字开头
- 变量名长度不能超过255字符
- 变量名中不能有空格
- 变量名不能使用关键字或者保留字(百度有表格),命名时应尽量用相同语义的英文单词,理论上可以用中文但是不建议。
- 变量名严格区分大小写
- 书写变量建议使用驼峰式写法
不通过第三个变量,让两个变量值互换
- 代码如下:
var a=10, b=20;
a = a + b; 此时a的值是两个变量的和
b = a - b; 用两个值的和减去b的值,就剩下原来a的值,此时b就是原来a的值
a = a - b; 用两个值的和减去b(原a值),就剩下原来的b的值,这样就实现了互换
- 很有理解价值的案例
变量的类型
- js是弱类型语言,不用声明变量的类型,它会根据里面的内容来转换类型。
- 虽然可以通过给变量赋不同类型的值来转换类型,但是不推荐这么用。
数值型number
- 给变量放入数字或者浮点数(小数),这个变量就是
数值型变量
。 - 数值型变量有一个特殊的返回值
NaN
,如果数值型变量因为操作错误哦不能返回一个数值时,就会返回NaN
(依然是数值型),这样代码运行就不会报错。如果变量值是NaN,那么它自己和自己都不相等。 - 使用
isNaN()
可以判断里面的值是否是有效数值,是有效数值返回false,不是有效数值返回true。Infinity是有效数值。 - number的直接量显示
- 直接量也叫做字面量,有多种显示方式,只做认识
- 十进制,10,这是最常见的不作说明
- 八进制[0开头],用八个字符来表示所有值(01234567),想表示8时,因为没8就要进位用010来显示
- 十六进制[0x开头],用十六个字符来表示所有值(0123456789abcdef),0x10就是表示16
- 科学计数法6e+5,实际上是6*(10的5次方)
- 拓展
- 浮点数因为精度的问题,所以千万不要用来做等于比较判断,只能作为范围条件判断。
- 直接量也叫做字面量,有多种显示方式,只做认识
- JS能显示数字的最大和最小值
-
Number.MAX_VALUE
可以返回js能显示的最大正数,超过就Infinity
(无穷大) -
Number.MIN_VALUE
可以返回js能显示的最小正数,再小就是0 - 负数和正数返回方法是一样的,加个负号就行,负数小到超过限制就是
-Infinity
(负无穷大)
-
字符型string
- 把字符串放入变量,该变量就是字符型变量。
- 只要被单引号或者双引号包裹的内容就是字符串,包括数字被包裹后就不是数值而是字符串了。
- \反斜杠是转义字符,它可以把普通字符转义为有意义的特殊字符,也可以把有意义的字符转义为普通字符。转义字符有很多,搜索去查。
- 字符串的不可变性
- 在栈内层中,字符型变量重新赋值不是直接覆盖值,而是开辟一个新的空间,把新的字符串值引用给变量,原字符串不变,所以字符串值一旦创建是不能改变的。
- 正因为这样,所以一旦大量拼接字符型变量非常消耗资源,不建议这么做。
- 字符串拼接小技巧:引号加加,可以迅速完成字符中加插入拼接变量的操作。
布尔型boolean
- 把两个逻辑判断值
true
和false
放入变量,该变量就是布尔型,两个值都必须是小写 - true是真,false是假
未定义数据类型
- 当声明了变量却没有赋值,这个变量就是未定义数据类型
- 在调试工具中打印类型,会显示undefined
空类型
var num = null;
- 当给变量赋值null后,变量就是空类型了,可以理解为清空变量。
typeof检测变量类型运算符
typeof xxx;
- 要注意typeof是一个运算符不是方法,所以不用括号直接书写就行。他可以检测该变量或者该值是什么的类型。
- 返回的是类型英文名。
- 用typeof检测空类型,返回对象类型,这是错的。这个问题是js遗留的BUG,实际就是个空类型。
- 用typeof检测函数调用时,函数返回什么值,就是什么类型。
js操作符
基础运算符
-
+ - * / %
五个基础运算符,对应加、减、乘、除、取余数。 - 这里+号比较特殊要注意。当加法运算中出现了字符串时,它就不会再计算相加的结果(有字符串也加不了),而是把所有参与运算的值连接起来。
- 就是说在js中连接符号是+
- 例如
"10" + 1
,是一个字符串加一个数值,实际结果是101,它们被连起来了。 - 除了加号以外的基础运算符,如果字符串是数字正常运算,不是返回NaN
- 用有效数字除以空或者0,会返回Infinity(无穷大)
- 任何数%0都是NaN,取余比自己大的数返回自己
一元运算符
- 一元运算符就是只靠一个数就能完成运算操作的符号,常见的集中一元运算符:
-
+
正号。注意这里不是加号,是正号 -
-
负号。注意这里不是减号,是负号 -
++
自增符号,每写一次自己+1,例如num++就相当于num=num+1(只是相当于不是完全相同)- 自增符号可以前置也可以后置,都是自增的意思。
- 前置和后置的区别:++前置是先自加再运算,++后置是先把值参与运算再自加。简单来说就是:后置参与运算的还是原值,到下一次运算时才自增(如果是自己加自己,那么第二个就是自增后的值了);前置在运算过程中就自加了。
比较运算符
- 比较运算符用来判断条件是否成立,成立返回true,不成立返回false
<
左边小于右边,条件成立
>
左边大于右边,条件成立
<=
左边小于或等于右边,条件成立
>=
左边大于或等于右边,条件成立
==
左边等于右边,条件成立(默认会做类型转换)
===
左边全等于右边(值和类型都相等才是全等),条件成立
!=
左边不等于右边,条件成立(默认会做类型转换)
!==
左边不全等于右边(值和类型都不等才是不全等),条件成立 - 运算符优先级,
< > <= >=
高于== === != !==
,先比较和后比较的区别。
逻辑操作符
- 逻辑操作符是用来判断多个条件结果的,比较对象是布尔值,返回的是决定结果的值
&&
逻辑与(并用),需要多个条件都满足,才返回true,有一个false就返回false
||
逻辑或,只要满足一个条件就返回true,全部为false才返回false
!
把结果取反 - 执行优先级:
!>&&>||
- 当执行短路运算时(即比较的值不是布尔值),虽然它会暂时隐式的转换为布尔值进行运算,但是返回的还是原值,具体返回的是起决定性作用的值,就是决定该次运算结果是true还是false的值。
赋值操作符
- 在JS中等于号是双等
==
,单等=
是赋值符号,意思是把右边的结果赋值给左边。 - 赋值运算符的拓展:
-
num += 2
是num = num + 2
的简写 -
num -= 2
是num = num - 2
的简写 -
num *= 2
是num = num * 2
的简写 -
num /= 2
是num = num / 2
的简写 -
num %= 2
是num = num % 2
的简写 - 实际上就是类似于一元运算符的简写方法。
-
逗号操作符
- 没什么好记的,就是css并集的意思,可以用于通用声明。