1. JavaScript 概述
1. 介绍 :
简称JS,是浏览器解释型语言,直接交给浏览器,由浏览器的
解释引擎运行(脚本语言)
2. 作用 :
实现页面动态效果和用户交互.
3. 组成
1. 核心语法 ECMAScript
2. 内置对象 (Number,DOM)
1. 基础对象类型
2. DOM (重点 Document Object Model)
3. BOM (Browser Object Model)
3. 自定义对象
2. 使用JS
在HTML文档中引入JS代码,有三种方式
1. 通过元素绑定事件的方式引入JS代码
事件 : 用户行为触发的操作
语法 :
<元素 事件函数名="JS代码语句">
事件函数 :
鼠标单击事件 onclick
JS 代码 :
弹框显示信息 alert('文本');
控制台输出信息 console.log('文本信息');
2. 通过<script></script>标签书写JS代码,标签内容就是JS
代码.可以书写在任意位置,书写任意多次.
注意 :
浏览器遵循从上到下执行代码,书写位置可能会影响效果
JS代码语句 :
1. prompt(''); 带有输入框的弹框,可用来接收用户输入
2. document.write(''); 在网页中写入内容
使用 :
1. 普通的书写方式,按照从上到下的执行顺序,依次
在网页的相应位置插入内容,可以识别标签
2. 如果以元素绑定事件的方式,在页面中写入内容,
相当于重写页面
3. 外部的JS文件
1. 创建外部的.js文件
2. 在HTML文档中使用<script src="url"></script>引入
3. 如果<script></script>做外部文件的引入操作,标签
内部就不能再写JS代码
3. JS的基础语法
1. JS 代码是由语句组成的,每条语句以分号作为结束的标志
2. JS严格区分大小写,标点符号一律采用英文标点
3. JS中使用
// 表示单行注释
/* */ 表示多行注释
4. JS 的变量与常量
1. 变量
1. 在程序运行过程中可以随时修改的数据
2. 语法 :
var 变量名; //使用关键字var声明变量
变量 = 值; //为变量赋值
3. 使用 :
1. var 关键字可以省略,但是一般不建议省略,关系到
变量的的作用域
2. 变量如果只使用var关键字声明,不赋值,默认为undefined
3. 如果变量未使用var关键字声明,也不赋值,会报错
4. 变量的命名规范
1. 变量名由数字,字母,下划线,$组成,不能以数字开头
2. 变量名尽量见名知意,禁止与JS的保留字和关键字冲突
et :
var function while for in each switch case
break default continue class name new Number
String Array do if else...
3. 变量名由多个单词组成,采用小驼峰标识
et :
userName
2. 常量
1. 常量一经定义就不能更改,强制修改会报错
2. 语法 :
const 常量名 = 值;
常量在定义时,必须声明并赋值
3. 使用 :
常量名采用全大写字母,与变量名区分
3. 小数位的操作
小数在计算机中存储或是计算都存在误差,不准确.
可以设置小数的显示位数
方法 : toFixed(n)
n表示保留的小数位数
et :
var n = 62.800004;
n = n.toFixed(2);
5. JS 数据类型
1. 简单数据类型 (基础)
1. Number 数字类型
整数和小数统称为Number类型.
1. 整数
1. 十进制表示方法
var n = 100;
2. 八进制表示整数
八进制以 0 为 前缀 ,表示逢8进1
et :
var num = 015;// 5*8(0) + 1 * 8(1)
十进制转八进制,需要先将十进制转二进制,从右向左
每三位为一组,再将二进制的结果计算出来
111 : 十进制的7
八进制 : 以八位存数据
3. 十六进制
十六进制以 0x 为前缀
et :
var num2 = 0x35; // 5*16(0)+3*16(1) = 53
十进制转十六进制,先将十进制转换为二进制,从右向左
每四位为一组,计算结果
1111 : 15 -> f
4. 如果使用console.log输出整数值,不管是什么进制
表示,都转换十进制输出
2. 小数
1. 直接以小数点表示小数
var f1 = 10.5;
2. 科学计数法
var f2 = 1.5e3;
e : 表示10为底
3 : 表示10的次方数
1.5 * 10 (3) = 1500;
2. String 字符串类型
1. 所有使用''或者""引起来的内容,都是字符串
2. 字符串中的所有字符都是以Unicode码存储的,
字母和数字的Unicode码值与ASC码值一致,
中文字符的Unicode编码,在计算机中以16进制存储
3. 查看指定字符的Unicode码值
1. 方法 : charCodeAt(index)
index 表示指定字符的下标,字符串中默认从0开始
为每一位字符分配下标
et :
var str = "张三丰";
str.charCodeAt(0);
2. 中文字符在计算机中以16进制存储,查看中文的十六进制
使用 :
toString(16); //将Unicode码转换为16进制表示
3. 已知中文的十六进制字符串,想转换为中文显示,
添加\u转义即可
"\u5f20"
4. 中文的范围:
"\u4e00" ~ "\u9fa5"
5. 转义字符
\u
\n 换行
\t 制表符
\' 表示'
\\ 表示\
3. Boolean 布尔类型
只有真和假两个值 true/false
true = 1
false = 0;
4. undefined
当变量声明未定义时,默认值为undefined
访问对象不存在的属性时, 默认值为undefined
5. null
空类型
6. 检测数据类型
使用 typeof
et :
typeof num;
typeof (num + str);
2. 引用数据类型
对象 Number String
6. 数据类型转换
1. 自动类型转换(隐式)
1. 不同类型的数据在做运算时,会自动转换
2. 分类 :
1. 字符串与其他数据类型做 + 法运算
+ 一旦与字符串结合使用,变成字符串的拼接运算,
最终结果都为字符串类型
et :
var r1 = 15 + "18"; //"1518"
var r2 = 15 + 18 + "15"; //"3315"
var r3 = "15" + 18 + 15; //"151815"
2. number + boolean
会将boolean类型自动转换为number:
true = 1
false = 0
转换之后参与数学运算,最终结果为number
3. 其他情况
et :
var res3 = 100 + undefined; //NaN (Not a Number)
var res4 = 100 + null; // 100
var res5 = true + undefined; //NaN
var res6 = false + null; //0

2. 强制类型转换
1. 将其他数据类型转为字符串类型
方法 : toString();
返回字符串结果
2. 将字符串或布尔值转换为number类型
方法 : Number(变量)
返回转换后的结果 :
1. 数字字符串"100",可以直接转换为number 100
2. 非数字字符串 "100a" "张3",转换失败,返回NaN
3. 布尔类型转number :
true = 1
false = 0
3. 解析字符串中的数字
方法 :
parseInt(变量) : 解析字符串中的整数部分
parseFloat(变量) : 解析字符串中的number部分
注意 :
解析时,从第一个字符开始向后解析,对每一位进行
转number的操作,碰到非数字,停止解析,返回结果
et :
"100a" // 100
"a100" // NaN
参数使用 :
如果传递的数据为非字符串类型,方法中,会先将参数
转换成string,再对每一位字符转number解析
et :
parseInt(18.5); // "18.5" -> 18
parseInt(true); // "true" -> NaN
7. 运算符
1. 赋值运算符
= : 将右边表达式的值,赋给左边的变量
2. 算数运算符
+ - * / %(取余数)
1. 字符串使用 + ,表示字符串拼接
2. 在其他的运算符中,会将非数字转换为number类型,
参与数学运算
NaN 与任意类型结合运算,结果都为NaN
null 为空值,与其他类型结合运算,不影响结果
3. 自增和自减运算
++ : 自增 表示在自身基础上+1
-- : 自减 表示在自身基础上-1
et :
var n = 10;
n++; // n += 1; n = n + 1;
++n;
console.log(n); //12
使用 :
1. 自增与自减运算符在单独与变量结合使用时,做前缀
或后缀没有区别,都表示在自身基础上+1 或 -1
2. 如果与其他运算符结合使用,前缀与后缀有区别:
做前缀,先++/--
做后缀,后++/--
et :
var num = 5;
var r1 = num ++; //r1=5,num=6
var r2 = ++ num; //r2=7,num=7
思考 :
var n = 5;
var res = n++ + ++n + n++ + ++n + n;
计算 :
表达式1 : var r1 = n ++; //5,6
表达式2 : var r2 = ++ n; //7,7
表达式3 : var r3 = n ++; //7,8
表达式4 : var r4 = ++ n; //9,9
表达式5 : var r5 = n; //9
5 + 7 + 7 + 9 + 9 = 37;