目录
2.3 第三种:通过script标签引入外部js文件,跟CSS类似
【写在前面】
前文链接:
1. 第一个JS脚本
2. JS编写位置
2.1 第一种:类似CSS的内联方式
比如:可以在标签的onclick属性中编写JS代码 (点击,激发)。
<button οnclick=“alert(‘clicked’)”>click</button>
<a href=“java:alert(‘clicked’);”>a标签</a>
缺点:这种写法将结构和行为相互耦合了,不方便维护,不推荐。
2.2 第二种:在script标签中编写JS代码
只能对当前网页起作用,不能跨页面进行复用
2.3 第三种:通过script标签引入外部js文件,跟CSS类似
代码内容放到另外的 .js 文档中(不带<script>标签)
引用:<script type=“text/javascript” src=“./js/script.js”></script>
3. JS语法
3.1 注释,输出,规范
(1)注释
单行注释 //, 多行注释/* */
(2)输出
alert提示框
页面输出
控制台输出 console.log()
(3)规范
JS语句以分号结尾。如果不写分号,浏览器自动添加。开发中最好写。
JS严格区分大小写。
JS中忽略多个空格和换行,所以我们可以利用空格和换行进行格式化。
3.2 字面量和变量
字面量:一些不可改变的值,一般可以直接使用,比如1,2
变量:可用来保存字面量,且变量值可以任意改变。
声明变量:var a;
变量赋值:a = 1;
变量声明和赋值同时进行:var a = 123;
3.3 标识符
定义:js中我们自主命名的,都可成为标识符,比如变量,函数名,属性名等
命名规则:
(1)标识符可包含字母,数字,下划线_,$
(2)不能以数字开头
(3)不能使用ES中的关键字,保留字
(4)一般使用驼峰命名法,即首个单词以小写字母开头,之后的单词以大写开头
(5)JS底层保存标识符时实际上是采用的Unicode编码,理论上讲,所有的utf-8中含有的内容都可以作为标识符 (可以,但不建议这么用)
3.4 数据类型
3.4.1 定义
数据类型即字面量的类型,js中共6种(5种基本数据类型,1种引用数据类型)。
声明时都用 var, 不用声明种类,赋值是用哪种类型赋值,就成为哪种变量。JS是动态语言的一个特点。
String 字符串
Number 数值
Boolean 布尔值
Null 空值
Undefined 未定义
Obeject 对象
3.4.2 分类
(1)String 字符串
字符串需要用引号引起来,单引号和双引号都可以。
同种引号不能嵌套,即双引号里不能放双引号。
字符串的转义,用\作为转义字符,比如:
\" 表示"
\' 表示‘
\n 表示换行
\t 制表符
\\ 表示\
(2)Number 数值
JS中所有的数值都是Number类型,包括整数和浮点数。
Number的最大值:var a = Number.MAX_VALUE;
Number的最小值: var b = Number.MIN_VALUE (不是负数,是一个大于零的一个最小值)
正无穷:var c = Number.MAX_VALUE * Number.MAX_VALUE 得出一个Infinity, 类型还是Number
负无穷: var d = - Number.MAX_VALUE * Number.MAX_VALUE 得出 -Infinity
typeof检查Infinity,返回number
NaN是一个特殊的Number, 表示 Not A Number。 var d = “abd” * “ghj”;
typeof检查NaN,返回number
JS中整数的运算可以保证精度,但如果js进行浮点数运算,结果可能不精确。
(3)Boolean 布尔值
只有 true, false 两个值,用来逻辑判断
用typeof 检查boolean时,返回boolean
(4)Null 空值(空对象)
Null只有一个值,就是null
typeof 检查Null,得到 object,表示一个空对象
(5)Undefined 未定义
只有一个值,就是undefined
var b, 相当于 var b = undefined. 即声明一个变量时,没有给它赋值,那它的值就是undefined
typeof 检查undefined,得到 undefined
(6)Object 对象 (详解见链接文章)
3.5 类型转换(强制类型转换)
3.5.1 定义
将一个数据类型强制转换为其他的数据类型。主要是转换为 String, Number, Boolean。
3.5.2 将其他数据类型转换为String
(1)方式1: 调用被转换数据类型的 toString()方法
var a = 123;
var b = a.toString() ;
注意: 调用.toString之后,a本身的数据类型不会变,只是调用后它的一个返回值变了. 即返回一个新的String类型的数据。
Number, Boolean有toString()方法。
null, undefined没有这个方法(此时用下面的String()函数转)
(2)方式2:调用String()函数
var b = String(a);
对Number和Boolean来说,实际上就是调用了toString()方法。
对于null和undefined,就不会调用toString方法。这里会将null直接转换为"null",将undefined转换为“undefined”
3.5.3 将其他数据类型转换为Number
(1)方式1:Number()函数
var a = Number(a);
字符串-->数字:
如果是纯数字的字符串,则直接转为数字
如果不是纯数字的字符串,则转换为NaN
如果字符串是一个空串或者是一个全是空格的字符串,则转换为0
布尔-->数字:
如果是boolean,则转换为1或者0
null --> 数字:
如果是null, 则转换为0
undefined --> 数字:
如果是undefined, 则转换为NaN
(2)方式2: parseInt(), parseFloat()
var a = “123px”
var b = parseInt(a);
a = “123.456px”
var c =parseFloat(a)
parseInt() 把一个字符串转换为一个整数。可以将一个字符串中的有效的整数内容取出来。
parseFloat() 把一个字符串转换为一个浮点数。类似parseInt, 它可以获得有效的小数。
如果对非String使用parseInt()或parseFloat(),会先将其转换为String后再操作。
3.5.4 将其他数据类型转换为Boolean
方式:Boolean()函数
var a = Boolean(a);
数字-->布尔:
如果是数字转,则除了0和NaN, 转后是false, 其余转了之后得到true
字符串-->布尔:
如果是字符串转,除了空串是false, 其余都是true
null --> 布尔:
如果是null, 则得到false
undefined --> 布尔:
如果是undefined, 则得到false
对象 --> 布尔:
如果是对象,则得到true
3.6 运算符
3.6.1 定义
运算符也叫做操作符。通过运算符可以对一个或者多个值进行运算,并获取运算结果。
比如, typeof就是运算符。
3.6.2 算术运算符
加 减 乘 除 取余
(1)对非Number类型的值进行运算-*/时,会将这些值转换为Number,然后再运算。
(2)任何值和NaN做运算,都得NaN。
(3)两个字符串用+, 实现拼接。
(4)任何值和字符串用+, 都会先转为字符串,然后和字符串拼接。
利用该特点,可以将一个任意的数据类型,转换为String: 将任意数据类型+"" (空字符串),即可转为String. (隐式的类型转换,由浏览器自动完成,也是调用的String函数)
一些特殊情况:
(1)一个数值跟true相加,会将true转为1然后相加
(2)null + 数值 = 数值
(3)undefined +数值 = NaN
(4)NaN + 数值 = NaN
(5)数值+字符串 (不管前后)= 字符串(把数字转换成字符串区拼接)。
即字符串的+拼接,要比加法+等级高 !!!字符串和数值多次拼接,跟顺序有关!!!!
3.6.3 一元运算符
只需要一个操作数
正号+: 对于数字类型,不会产生效果。对其他数据类型使用+, 就是将其转换为number
负号-:数字类型,取反
对于非数字类型,相当于调用了Number()函数,然后再运算
3.6.4 自增自减
自增
前自增:++a 先自增,后取值
后自增: a++ 先取值,后自增
自减
前自减:--a
后自减: a- -
3.6.5 逻辑运算符
与 &&, 或||,非!
非!:
对于非boolean类型,会先将变量或字面量转换为boolean,然后再运算(取反...)。
可以利用该特点,可将一个其他数据类型,转换为布尔值:取两次反,即可将其转换为布尔值,规则与Boolean()函数相同。
短路与 &&,短路或 ||
符号两边都有表达式,会先判断前面的表达式,如果前面的表达式已经可以决定结果了,那就不会进行后面的表达式(或者其他的操作)了
3.6.6 赋值运算符
=,+=,-=,*=, /=,%=
3.6.7 关系运算符
用于比较两个值之间的大小关系。关系成立返回true, 反之返回false。
>:大于
>=:大于等于
<:小于
<=:小于等于
== :用来判断两个值是否相等,如果类型不同,会自动进行类型转换再比较
!= :会自动进行类型转换再比较
=== :用来判断两个值是否全等,不会自动进行类型转换
!== :不会自动进行类型转换再比较
有时会用一些非数字类型来进行比较,非数值会先转为数值
字符串的关系运算:JS是一位一位的(ASCII码)去比较
3.6.8 相等运算符
定义:用来比较两个值是否相等,相等返回true
注意:可以通过 isNaN()函数来判断一个值是否是NaN
分类:
==(等于)
会先判断两边两个类型是否一样,不一样的话,会先转换。一般情况下,转换成数字比较多。
一些特殊的情况:
比如:
null == 0 返回true ( 因为null转换成数字是0)
null == undefined 返回true. 因为undefined衍生自null
NaN == NaN , 返回false, 因为NaN不和任何值相等,包括它本身
!= (不等于)
使用!=来做不相等运算,不相等也会先对变量进行自动的类型转换,如果转换后相等,它也会返回false (没毛病,这里是不等,只有不等才返回true)
===(全等)
null === undefined, 返回false
它不会做自动的类型转换,类型不相同的话,直接返回false. 整体比==更严格。
!==(不全等)
不会做自动的类型转换,如果两个值的类型不同,则直接返回true
3.6.9 条件运算符(三目运算符)
语法: 条件表达式?语句1:语句2
如果表达式为true, 则执行语句1, 否则执行语句2。
如果条件表达式的求值结果是一个非布尔值,会将其转换为布尔值然后再运算。
3.7 流控制语句
3.7.1 if 语句
3.7.2 if else 语句
3.7.3 if elseif else 语句
3.7.4 switch 条件分支语句
语法:
switch(判断条件/条件表达式){
case 判断条件的取值1:
语句;
break;
case 判断条件的取值2:
语句;
break;
default:
语句;
break
}
注意:break跳出当前switch,要是没有break,可能在满足某个case之后,随后的多个case语句都会执行(没必要)。
3.8 其他进制的数字
16进制:以0x开头,如 a = 0x1f
8进制:以0开头,如 a = 070
2进制:以 0b开头,如 a = 0b10
进制转换:可以在parseInt()中传递第二个参数,来指定数字的进制。
var a = "070";
a = parseInt(a,10); //得到70
3.9 循环语句
3.9.1 while 循环语句
语法:
while(条件表达式){
语句…
}
while语句在执行时,先对条件表达式进行判断,如果为true,则执行循环体
补充:
document.write(n + “<br>”); //该句子打印的内容显示在网页上,console.log是显示在控制台上
document.write(“<br>”); //页面上打印换行
3.9.2 do while循环语句
语法:
do{
语句;
}while(判断条件);
3.9.3 for 循环语句
语法:
for(1初始化表达式;2条件表达式;4更新表达式){
3语句;
}
3.9.4 嵌套for循环语句
!!!双层for 循环
3.9.5 break 和 cotinue
break:
一般情况下,break作用于最近的循环中。也可以设置一个label来标识一个循环,并且通过 break: label 来跳出某个循环。
continue:
结束当前迭代 (不执行当前迭代的剩余语句),进入下一个循环。也可以设置label。