目录
前言人间生活实录
第二个阶段,html、css基础用了20天,不过也只是了解了皮毛,虽然对于我来说这几天的日子不过是单调而重复的漫长生活中的寥寥几天,但当我在这里坐看云起,我的世界已经发生了截然的变化,是我无法改变又无可奈何的,唯有一身热血不负期望,只有满腔赤诚无以为报。
一、JS简介
JavaScript实现包含了三个部分: ECMAScript、DOM和BOM
JS的特点:
- 解释型语言
- 动态语言
- 基于原型的面向对象
/*
*控制浏览器弹出一个警告框
*/
alert("请先登录!");
/*
*让计算机在页面中输出一个内容
*/
document.write("我在页面显示!");
/*
*向控制台输出一个内容
*/
console.log("我在控制台显示!");
1.可以将JS代码编写到标签的onclick属性中,当我们点击按钮时,JS代码才会被执行
<button onclick="alert('点我干嘛');">点我一下</button>
2.可以将JS代码写在超链接的href属性中,这样当点击超链接时,会执行js代码
<a href="javascript:alert('你点我干嘛');">点我一下</a>
虽然可以将代码写在标签的属性中,但是他们属于结构与行为耦合,不方便维护,不推荐使用
3.可以将JS代码写到script标签中
<script type="text/javascript">
alert("我是script标签中的代码!");
</script>
4.推荐使用的方式:用script标签引入外部文件
<script type="text/javascript" src="js/script.js"></script>
script标签一旦用于引入外部文件,就不能再编写代码了,即使编写了浏览器也会忽略,如果需要则可以再建立一个新的script标签用于编写内部代码
1.JS中严格区分大小写
2.JS中每一条语句以“;”结尾
如果不写分号,浏览器会自动添加,但是会消耗一些系统资源
而且有些时候,浏览器会加错分号,所以在开发中分号必须写
3.JS中会忽略多个空格和换行,所以我们可以利用空格和换行对代码进行格式化
二、字面量和变量
字面量,都是一些不可改变的值
比如:1,2,3,4,5
字面量都是直接使用的,但一般不会直接使用
变量,可以用来保存字面量,而且变量的值可以随意改变
变量更方便使用,所以在开发中通过变量去保存一个字面量,很少直接使用字面量
还可以通过变量对自变量进行描述
//声明变量
//在js中使用var关键字来声明一个变量
var a;
//为变量赋值
a = 123;
//声明和赋值通时进行
var b = 395;
console.log(a);
三、标识符
在JS中所有可以由我们自主命名的都称为标识符
例如:变量名、函数名、属性名......
命名一个标识符需要遵守以下规则:
- 标识符中可以含有字母、数字、_、$
- 标识符不能以数字开头
- 标识符不能是ES中的关键字或者保留字
- 标识符一般都采用驼峰命名法:首字母小写,每个单词首字母大写,其余字母小写
JS底层保存标识符时实际上是采用的Unicode编码,所以理论上讲,所有utf-8中含有的内容都可以作为标识符
四、字符串
数据类型指的就是字面量的类型,在JS中一共有六种数据类型:
- string 字符串
- number 数值
- boolean 布尔值
- null 空值
- undefined 未定义
- object 对象
其中string number boolean null undefined属于基本数据类型
而object属于引用数据类型
1.String字符串
在JS中字符串需要使用引号引起来
使用单引号和双引号都可以,但是不能混着用
引号不能嵌套,但可以在单引号里放双引号,反之亦然
在字符串中我们可以使用 \ 作为转义字符,当表示一些特殊符号时可以使用 \ 进行转义
转义字符:
\" —— "
\ ' —— '
\n ——换行
\t ——制表符
\\ —— \
2.Number数值
在JS中所有的数值都是number类型,包括整数和浮点数(小数)
可以使用一个运算符typeof,来检查一个变量的类型
语法:typeof 变量
JS中可以表示的数字的最大值:Number.MAX_VALUE —— 1.797693...e+308
JS中可以表示的大于零的最小值:Number.MIN_VALUE —— 5e-324
如果使用number表示的数超过了最大值,则会返回一个Infinity,表示正(负)无穷
注:Infinity是一个字面量,不是变量
NaN是一个特殊的数字,表示Not A Number,使用typeof检查一个NaN也会返回number
在JS中整数的运算基本可以保证精确,浮点数运算可能得到一个不精确的结果,所以不要进行精确度高的计算
3.Boolean布尔值
布尔值只有两个,主要用来做判断 true —— 真;false —— 假;
4.Null空值
null类型的值只有一个,就是null,null专门表示一个为空的对象
使用typeof检查一个null值时,会返回object
5.Undefined未定义
undefined类型的值只有一个,就是undefined
当声明一个变量,但是不给变量赋值,它的值就是undefined
使用typeof检查一个undefined,也会返回一个undefined
五、强制类型转换
指将一个数据类型强制转换为其他的数据类型,转换为:String、Number、 Boolean
1.转换成String
方式一:调用被转换数据类型的toString()方法
该方法不会影响到原来的原变量,它会将转换的结果返回
但是注意:null和undefined这两个值没有toString,如果调用他们的方法就会报错
//调用a的toString()方法
//调用xxx的yyy()方法,就是xxx.yyy
var b = a.toString();
console.log(typeof b);
console.log(b);
a = null;
a = a.toString();//报错
a = undefined;
a = a.toString();//报错
方式二: 调用String()函数,并将被转换的数据作为参数传递给函数
使用String()函数做强制类型转换时,
对于Number和Boolean实际上即使调用的toString()方法,
但是对于null和undefined,就不会调用toString()方法,
它会将null直接转换为"null"
将undefined直接转换为"undefined"
//调用String()函数,来讲a转换为字符串
a = String(a);
2.转换成Number
方式一:使用Number()函数
使用Number()函数
- - 字符串 - - > 数字
1.如果是纯数字的字符串,则直接将其转换为数字
2.如果字符串中有非数字的内容,则转换为NaN
3.如果字符串中是一个空串或者是一个全是空格的字符,则转换为0
- - 布尔 - - > 数字
1.true 转成 1
2.false 转成 0
- - Null - - > 数字 = = 0
- - Undefined - - > 数字 = = NaN
//调用Number()函数将a转换为Number
var a = "123";
a = Number(a);
console.log(typeof a);
console.log(a);
方式二:专门用来转换字符串
parseInt()、parseFloat()
parseInt()可以将一个字符串中的有效的整数内容取出来,然后转换成Number
parseFloat()的作用和parseInt()类似,但它可以获得有效的小数
注:如果对非String使用parseInt()或parseFloat(),它会先将其转换成String然后再操作
//调用parseInt()函数将a转换为Numbr
a = "123px"
a = parseInt(a);
console.log(typeof a);
console.log(a);
3.转换成Boolean
使用Boolean()函数将a转换为布尔值
- - 数字 - - > 布尔
除了0和NaN,其余的都是true
- - 字符串 - - > 布尔
除了空串,其余的都是true
- - null和undefined都会转换为false
- - 对象也会转换为true
六、其他进制的数字
在JS中,如果需要表示16进制的数字,则需要以0x开头
如果需要表示8进制的数字,则需要以0开头
如果需要表示2进制的数字,则需要以0b开头(但不是所有的浏览器都支持)
所以,像"070"这种字符串,有些浏览器会当成8进制解析,有些会当成10解析
//解决方法
a = "070";
a = parseInt(a,10);
console.log(typeof a);
console.log(a);
七、运算符
运算符也叫操作符,可以对一个或多个值进行计算,并获取运算结果
比如:typeof就是运算符,可以来获得一个值的类型,它会将该值的类型以字符串的形式返回
1.算术运算符
当对非Number类型的值进行运算时,会将这些值转换为Number然后再计算
任何值和NaN计算都得NaN
+ 如果对两个字符串进行运算,会进行拼串操作,拼成一个新的字符串
任何值和字符串做加法运算,都会先转换成字符串,然后再拼串
- -利用这一特性,我们只需为任意一个数据类型 + 一个 "" 即可转换为String类型,实际上也是调用了String()函数
-
*
/
% 取模运算(取余数)
任何值和字符串做 - * / 运算,都会转换成Number
- -利用这一特性,我们只需为任意一个值-0或者*1或者/1,来将其转换为Number,原理和Number()函数一样
2.一元运算符
+ 正号
- 负号
对于非Number的值,会先转换成Number,再计算,可以对一个其他数据类型的值加一个“+”,转换成数值型,原理和Number()函数一样
3.自增和自减
对于一个变量自增后,原变量的值会立即自增
无论是a++还是++a都会使原变量的值立即自增1
a++的值等于原变量的值(自增前)
++a的值等于原变量新值(自增后)
同理:a--的值等于变量的原值(自减前)
--a的值等于变量的新值(自建后)
4.逻辑运算符
!非 对一个布尔值进行取反操作 true- ->false,false- ->true
对一个非布尔值进行运算,先转换成布尔值再运算
可以为任意数据类型做两次非运算,来转换成布尔值,原理和Boolean()函数一样
&& 与 两个值中只要有一个false,就返回false,如果第一个为false,则直接输出false
|| 或 两个之中只要有一个true,就返回true,如果第一个为true,则直接输出true
对于非布尔值进行与和或运算时,会先将其转换成布尔值,再运算
与运算:如果第一个值为true,则返回第二个值
如果第一个值为false,则返回第一个值
或运算:如果第一个值为true,则返回第一个值
如果第一个值为false,则返回第二个值
5.赋值运算符
= 将符号右侧的值赋值给符号左侧的变量
+= a += 5 等价于 a = a + 5
-= a -= 5 等价于 a = a - 5
*= a *= 5 等价于 a = a * 5
\= a \= 5 等价于 a = a \ 5
%= a %= 5 等价于 a = a % 5
6.关系运算符
关系成立返回true,关系不成立返回false
>
>=
<
<=
对于非数值进行比较时,会将其转换成数字然后再比较
如果符号两边的值都是字符串时,不会将其转换为数值进行比较,而是分别计较字符串中字符的Unicode编码
比较字符编码时是一位一位的进行比较,如果前一位一样则比较下一位,可以借用这一特点对英文进行排序
如果比较的是两个字符串类型的数字,可能会得不到预期的结果,所以比较两个字符串类型的数字时,要先转换类型
任何值和NaN作比较都是false
console.log("137597283" < +"5");
1.在JS中,字符串中使用转义字符输入Unicode编码
\u四位编码
eg:console.log("\u2620");
2.在网页中,使用Unicode编码
&#编码; (这里的编码是10进制)
console.log("\u2620"); = <h1>☠</h1>
7.相等运算符
== 比较两个值是否相等
!= 比较两个值是否不相等
=== 判断两个值是否全等,与相等类似,但它不会做自动的类型转换,如果两个值的类型不同,直接返回false
!== 不全等,...(同上)
undefined衍生自null,所以这两个值做相等判断时,会返回true
NaN不和任何值相等,包括它本身
可以用isNaN()函数判断一个值是否是NaN,如果是返回true
var b = NaN;
console.log(isNaN(b));
8.条件运算符
条件运算符也叫三元运算符,语法:表达式?语句1:语句2;
执行的流程:
首先对条件表达式进行求值,如果该值为true,则执行语句1,并返回执行结果
如果该值为false,则执行语句2,并返回执行结果
在不知道优先级的情况下,可以用括号提升优先级
在JS中,可以使用{}来为语句分组,用一个{}中的语句为一组,要么都执行,要么都不执行,也成为一个“代码块”,代码块只具有分组作用,没有其他用途