1. JS 组成
1. ECMAScript - JS的核心语法
2. 内置对象 - BOM DOM
BOM :Browser Object Model 浏览器对象模型,主要提供
一组操作浏览器的方法
DOM :Document Object Model 文档对象模型,提供一组操作
文档的方法
3. JS 自定义对象
2. JS 引入
1. 元素绑定
将JS代码以事件的形式绑定在元素上。
事件 :用户行为触发的操作,(鼠标操作,键盘操作)
et :
<h1 οnclick="alert('弹窗显示文本');">点击</h1>
2. 文档内嵌
使用<script></script>标签,在标签中书写JS代码
et :
<script>
alert("文档内嵌");
</script>
注意 :脚本标签可以书写在任意位置,
但是位置会影响执行效果
3. 外部JS文件
创建.js文件,在文件中书写JS代码,
使用<script src=""></script>标签在文档中引入,
如果脚本标签做引入操作,那么标签内不能再书写JS代码
4. 常用JS语句
1. alert(); 以警告框的形式提示信息
2. prompt(); 接收用户输入的弹框,输入结果会以函数返回值
的形式给出
3. console.log(); 在控制台输出,常用于调试
4. document.write(); 在网页中输出
注意 :
1. document.write()方法会根据当前的书写位置在
网页中插入内容
2. 如果以元素绑定事件的方式在网页中写入内容,
οnclick="document.write();",会清空当前页,只显示
写入的内容。
3. 使用document.write()方法写入内容,可以识别
HTML标签
3. JS 基础语法
1. JS代码是由语句组成的,每一条语句以分号结尾;
语句是由关键字,运算符,表达式组成的;
2. JS代码严格区分大小写
et :
console.log(); 正确
Console.log(); 错误
3. 所有的标点符号,都是英文的
4. JS中的注释
// 表示单行注释
/* 注释内容 */ 多行注释
4. JS 中的变量与常量
1. 变量:
1. 创建变量
1. 先声明,后赋值
使用var关键字进行变量的声明
使用=进行变量的赋值
自定义变量名
et :
var a;
a = 10;
var b,c,d;
b = 100;
2. 声明的同时赋值
et :
var age = 20;
var uname="zhangsan",height=180;
2. 命名规范
1. 由数字,字母,下划线和$组成,禁止以数字开头
2. 避免与关键字,保留字冲突(name var new for if
do while function class break switch... )
3. 做到见名知意
4. 严格区分大小写
5. 多个单词组成的变量名,采用小驼峰标识
et :
goodsCount
goodsPrice
userName
3. 使用注意
1. 变量声明可以省略关键字var,直接使用变量名赋值,
不推荐省略关键字,涉及到变量作用域。
2. 变量如果只声明,未赋值,默认值为undefined
3.赋值符号表示将右边的值赋给左边变量,要求左边
必须是变量。
et :
var a = 10;
a = 10 + 10;
2. 常量
变量可以在程序任何地方修改
常量一经定义就不能更改
1. 创建
使用 const 关键字创建常量,声明的同时必须赋值
2. 语法规范
为了区分变量与常量,一般变量名采用小写或驼峰标识
常量采用全大写的形式
et :
const PI = 3.14;
练习 :
1. 定义常量PI,3.14
2. 定义变量 r ,表示半径
3. 计算圆的周长与面积并进行输出
3. 小数位的操作
1. 小数在计算机的存储中是不精确的,存在误差
2. 指定保留小数位
方法 :toFixed(n); n表示要保留的位数
使用 :
var num = 1.23456;
var res = num.toFixed(2); //返回最终的结果
5. JS 中的数据类型
1. 简单数据类型(基础)
1. number 类型
数值类型,包含整数和小数
整数在内存中占用4个字节(32位),小数占8个字节(64位)
1. 整数
可以使用十进制,八进制,十六进制表示整数
八进制 :以0开头
8为基数,取值0-7,逢8进1
et :
0 * 8(0) + 1 * 8(1) = 8
var a = 010;
var b = 011;
八进制转十进制,逢8进1
十进制转八进制,需要首先将十进制转为二进制,
从右向左,每三位为一组,转换数值,就是八进制
十六进制 :以0x为前缀,取值0-9,a-f
et :
var c = 0x25; //37
十六进制转十进制,参考八进制
十进制转十六进制,先将十进制转换二进制,
从右向左,每四位为一组,不足为补0,计算数值
1111 -> 15 -> f
注意 :
不管是哪一种进制表示的整数,在使用控制台输出时
都会转换为10进制输出显示
2. 小数
也叫浮点数
1. 使用小数点,给出小数位
var a = 3.14;
2. 使用科学计数法
var b = 1.5e3;
e 表示 10 为底
e 后面的数值,表示 10 的次方数
计算方式 :
1.5 * 10(3)
2. string 类型
1. JS中字符串使用引号引起来,单双引号都可以
et :
var a = 10;
var b = '10';
2. 字符串中每个字符都有对应的Unicode码值
1. 查看字符的Unicode码
方法 :charCodeAt(index)
字符串中每个字符都对应有一个下标,从0开始
这个方法根据给定下标获取该字符的Unicode码
2. Unicode码
Unicode码值中前128位与ASC码对应一致
中文字符的范围 (十六进制表示)
"\u4e00" - "\u9fa5"
3. 将汉字的Unicode码转换为汉字字符
1. Unicode码转换为十六进制
toString(16):将十进制数字转换为十六进制
返回字符串
2. 在十六进制字符串前添加\u转义,转换为汉字
4. 转义字符
\n 换行
\t 制表符
\\ 表示\
\" 表示"
\' 表示'
3. boolean类型
只有真和假 true false,表达式进行关系运算的结果
一定是布尔类型
true false 可以转换为number数值
true = 1
false = 0
任何非零值都为真
4. undefined
1. 变量声明未赋值,默认为undefined
2. 访问对象不存在的属性时,也为undefined
5. null
空类型,一般用来解除对象的引用
2. 复杂数据类型 (引用)
对象 函数
3. 判断数据类型
操作符 typeof typeof()
var a = 10;
console.log(typeof a);
6. JS 中的数据类型转换
1. 自动类型转换(隐式)
1. number + string
字符串使用+参与运算,都视为字符串的拼接,
不再是数学运算
转换规则 :将参与运算的非字符串类型,自动转换
为string类型,再进行字符串拼接,返回最终字符串
2. boolean + string
涉及字符串的+操作,都为字符串拼接
true + "10" // true10
3. number + boolean
将布尔值转换为number类型,再进行相加运算
true = 1;
false = 0;
2. 强制类型转换
1. 字符串转换number类型
1. Number(value)
可以将非数字类型转换为number
1. 数字字符串 "100" 可以使用该方法转换类型
2. 包含非数字的字符串 '100a',转换结果为NaN,
not a number,表示转换失败
3. 布尔类型转换number,对应 1和0
2. 从字符串中解析数字
1. parseInt(str)
1. 用来解析字符串中的整数,参数如果不是字符串,
会自动转换为字符串再进行解析
2. 只对字符串开头部分进行解析,如果首个字符
不是数字,直接返回NaN
2. parseFloat(str)
用来解析字符串中的整数和小数部分
2. 将非字符串类型转换为string类型
方法 : toString();
使用 :
var a = 100;
var res = a.toString();
7. 运算符
1. 算术运算符
+ - * / %
++ -- 自增和自减运算
1. + - * / %
1. 字符串+,表示拼接
2. 数字字符串参与数学运算(- * / %),
会自动转换数据类型,转成number后参与运算,
非数字字符串,转换number结果都为NaN,参与
数学运算结果也为NaN
3. 布尔类型的数据会自动转换为number 1或0,参与
数学运算
2. ++ --
1. 自增运算符,自减运算符,表示在自身基础上进行+1或
-1的操作
2. 只有变量能使用++ --,常量不能自增或自减
3. 单独使用++ / --与变量结合,做前缀或后缀没有区别,
都是对变量进行+1 或 -1操作
et :
var a = 10;
++a;
a++;
4. 如果与其他运算符结合,前缀和后缀会影响结果
et :
与赋值符号结合
var a = 10;
var r = a++; //先赋值,后自增
var r1 = ++a;//先自增,后赋值
练习 :
var n = 5;
var res = n++ + ++n + n++ + ++n + n;
解 :
var r = n++; //r = 5, n = 6
var r1 = ++n; //r1 = 7, n=7
var r2 = n++; //r2 = 7, n = 8
var r3 = ++n; //r3 = 9
var r4 = n; //r4 = 9
2. 关系运算符(比较运算符)
> >= < <= == != === !==
1. 数字与数字之间的比较
et :
var r = 10 > 5; //true
2. 字符串之间的比较
1. string 与 number 之间进行关系运算:
自动将string转换为number,再进行比较;
如果string无法转换为number,则进行NaN与number
的比较,结果永远为false
2. string 与 string 之间进行关系运算
进行每一位字符Unicode码值得比较,从前往后,
如果第一位字符可以比较出结果,就直接获取结果,
如果无法出结果,依次进行后一位字符的比较
3. 判断相等于恒等
== 判断相等,只进行值得比较,包含数据类型转换
=== 判断恒等,不允许数据类型转换,比较类型与值
判断相等时,会发生自动类型转换,最终结果相等,
即为 true
判断恒等,要求操作数数据类型一致,值相等,才
返回true
4. 判断不等和不恒等
!= 判断不等,两个操作数的值不相等时返回true
!== 判断不恒等,两个操作数类型与值之间只要有一项
不同,都返回true
3. 逻辑运算
逻辑与 :&&
逻辑或 :||
逻辑非 :!
逻辑运算与关系运算的结果都为布尔类型
1. 逻辑与
两个表达式同时为真,逻辑与运算的结果才为真。
条件1 条件2 结果
true true true
false true false
true false false
&& false false false
2. 逻辑或
两个条件,只要有一个为真,逻辑或的结果就为真
3. 逻辑非
非真即假 。对表达式的结果进行取非操作
1
"1"
练习 :
1. 用户输入年份 prompt()
var year = prompt(); //字符串
2. 判断是否为闰年
不能被100整除,但是可以被4整除
可以被400整除
除法 使用 / 表示 使用取模 % (取余)
Number(year);
逻辑或 ||
逻辑与 &&
if(条件表达式){
//条件成立时执行
}