JS第一天
目录：
- JS语言介绍
- 三种存在位置
- 解释性语言特性决定JS代码位置
- 变量的定义
- 三种弹出框
- 四种调试方式
- 数据类型
- 运算符
一、JS语言介绍
1、概念
- 浏览器脚本语言
- 可以编写运行在浏览器上的代码程序
- 属于解释性、弱语言类型编程语言
2、组成
ES语法：ECMAScript、主要版本ES5和ES6
DOM：文档对象模型(Document Object Model)，是W3C组织推荐的处理可扩展标志语言的标准编程接口。
BOM：浏览器对象模型(Browser Object Model)，提供了独立于内容的、可以与浏览器窗口进行互动的对象结构；且由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象。
二、三种存在位置
HTML代码示例：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>三种存在位置</title>
</head>
<!-- 1.行间式:js代码块需要出现在事件中 -->
<!-- <body id="body" onload="body.style.backgroundColor='red'"> -->
<!-- <body id="body" onload="alert('hello wolrd')"> -->
<body id="body">
<!-- 2.内联式:js代码块需要出现在script标签中 -->
<script type="text/javascript">
body.style.backgroundColor='orange'
</script>
<!-- 3.外联式:js代码块出现在外部js文件中,需要通过script标签src属性进行链接 -->
<script type="text/javascript" src="./js/01.js"></script>
<!-- 总结 -->
<!-- 三种方式不存在优先级,谁在逻辑下方,谁起作用 -->
</body>
</html>
JS代码示例：
body.style.backgroundColor='pink'
1、行间式：存在于行间事件中
<body id="body" onload="body.style.backgroundColor='#0ff'">
</body>
2、内联式：存在于页面script标签中
<body id="body">
<script type="text/javascript">
body.style.backgroundColor='#0ff'
</script>
</body>
3、外联式：存在于外部JS文件，通过script标签src属性链接
index.js文件
body.style.backgroundColor='#0ff'
index.html文件
<script src="./js/index.js"></script>
三、解释性语言特性决定JS代码位置
HTML代码示例：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>js位置</title>
<!-- 位置② -->
<!-- 出现在head标签底部：依赖型JS库 -->
<!-- <script>
bd.style.backgroundColor = '#0ff';
</script> -->
<script>
var color = "cyan";
</script>
</head>
<!-- 内联使用场景:某页面的特有逻辑,可以书写该该页面的script标签内 -->
<!-- 外联使用场景:适用于团队开发,js代码具有复用性 -->
<!-- js为解释性语言 -->
<body id="bd">
<!-- 位置① -->
<!-- <script>
bd.style.backgroundColor = '#0ff';
</script> -->
<!-- 需求1:操作div,让其字体颜色变为红色 => 功能(style.color) => 尽可能下移 -->
<!-- 需求2:让div背景颜色变为提供的颜色 => 依赖(color变量) => 尽可能上移 -->
<div id="div">123</div>
<!-- 需要使用color变量这个资源 -->
<script>
div.style.backgroundColor = color;
</script>
</body>
<!-- 位置③ -->
<!-- 出现在body标签底部：功能型JS脚本 -->
<!-- <script>
bd.style.backgroundColor = '#0ff';
</script> -->
<!-- 完成需求1 -->
<script>
div.style.color = 'red';
</script>
<!-- 外联出现位置同内联 -->
<!-- 拥有src的外联script标签,会自动屏蔽标签内部的代码块 -->
<script src="js/02.js">
alert(123)
</script>
</html>
- 出现在head标签底部：依赖型JS库
- 出现在body标签底部：功能型JS脚本
四、变量的定义
HTML代码示例：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>变量的定义</title>
</head>
<body>
变量的定义
</body>
<script>
// script标签内,代表js,采用的是js语法
// 1.简单规范
// 单行注释
/*
多行注释
*/
// 语句以分号结尾
// 2.变量的定义: 声明 + 初始化
// ES5变量的定义
// 注:ES5标准下无块级作用域,只有方法可以产生实际的局部作用域
// 无块级作用域的局部变量
var a = 10;
// alert(a);
// 全局变量
b = 20;
// alert(b);
// eg:验证
// 方法的自调用,就会产生一个局部作用域
(function () {
var x = 10;
y = 20;
})()
// alert(x) 报错,x只能在局部作用域中使用
// alert(y); 正常使用
// 块级作用域
{
var n = 10; // 无视块级作用域
m = 20; // 全局变量,更无视块级作用域
}
// alert(n) // 可以
// alert(m) // 可以
// ES6变量的定义
// 有块级作用域的局部变量
let aa = 100;
// alert(aa);
// 有块级作用域的常量
const bb = 200;
// alert(bb);
{
let xx = 100;
const yy = 200;
}
// alert(xx); // 无法访问
// alert(yy); // 无法访问
// 函数产生的局部作用域同该情况
let nn = 100;
nn = 200;
// alert(nn); // 200
// 命名规范:常量名全大写
const MM = 1000;
// MM = 2000; // 常量值不允许更改
// alert(MM);
// 3.变量名的命名规范
// ① 可以由字母,数字,_,$组成,但是不能以数字开头(可以包含中文,采用驼峰命名法)
// ② 区分大小写
// ③ 不能与关键字保留字重名
</script>
</html>
1、ES5定义变量
var num = 10; // 无块级作用域变量
num = 10; // 全局变量
2、ES6定义变量
let num = 10; // 局部变量
const NUM = 10; // 常量
3、变量(标识符)的命名规范
- 由字母，数字，_，$组成，不能以数字开头（可以包含中文字符）
- 区分大小写
- 不能出现关键字及保留字
| abstract | arguments | boolean | break | byte |
| case | catch | char | class* | const |
| continue | debugger | default | delete | do |
| double | else | enum* | eval | export* |
| extends* | false | final | finally | float |
| for | function | goto | if | implements |
| import* | in | instanceof | int | interface |
| let | long | native | new | null |
| package | private | protected | public | return |
| short | static | super* | switch | synchronized |
| this | throw | throws | transient | true |
| try | typeof | var | void | volatile |
| while | with | yield |
五、三种弹出框
HTML代码示例：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>三种弹出框</title>
</head>
<body>
三种弹出框
</body>
<script>
// 弹出框: 一个弹出框只能弹出一条信息
// alert("普通弹出框", "呵呵"); // 呵呵被忽略了
// 确认框
// var res = confirm("你是男的吗?"); // true | false
// alert(res);
// 输入框
// var res = prompt("请输入你的小名!"); // 确定为输入值, 取消为null
// alert(res);
</script>
</html>
- alert：普通弹出框
- confirm：确认框
- prompt：输入框
六、四种调试方式
HTML代码示例：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>四种调试方式</title>
</head>
<body>
四种调试方式
</body>
<script type="text/javascript">
var a = 10;
var b = 20;
// 四种查看变量的值的方式
// alert(a);
// alert(b);
// console.log(a);
// console.log(b);
// document.write(a);
// document.write(b);
// 断点调试
</script>
</html>
- alert()
- console.log()
- document.write()
- 浏览器断点调试
七、数据类型
代码示例：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>数据类型</title>
</head>
<body>
数据类型
</body>
<script type="text/javascript">
// 一. 值类型
// 1.number:数字类型
var a = 10;
// typeof()查看类型,可以省略()
console.log(a, typeof a);
// 判断
console.log(typeof a == 'number');
a = 3.14;
console.log(a, typeof a);
a = 314e2
console.log(a, typeof a);
// 2.string:字符串类型
var a = '字符串';
console.log(a, typeof a);
a = "字符串";
console.log(a, typeof a);
// ES6会检测变量的重复定义,报错
// let x = 10;
// let x = '10';
// 3.boolean:布尔类型 true|false
a = true;
console.log(a, typeof a);
// 4.undefined:未定义类型
var b;
console.log(b, typeof b);
var c = undefined;
console.log(c, typeof c);
// 二.引用类型
// 5.function:函数类型
var m = function () {};
console.log(m, typeof m);
// 6.object:对象类型
var obj = {};
console.log(obj, typeof obj);
obj = new Object();
console.log(obj, typeof obj);
// 判断
// instanceof:对象类型判断
console.log(obj instanceof Object);
// 三.特殊的Object
// Number() String() Boolean() Math
// 7.null:空对象
var o = null;
console.log(o, typeof o);
// 判断
console.log(o == null);
// 8.Array:数组对象
o = new Array(1, 2, 3, 4, 5);
console.log(o, typeof o);
console.log(o instanceof Object);
// 判断
console.log(o instanceof Array);
// 9.Date:时间对象
o = new Date();
console.log(o, typeof o);
// 10.RegExp:正则对象
o = new RegExp();
console.log(o, typeof o);
</script>
</html>
1、值类型
- number：数字类型
var a = 10;
console.log(a, typeof a)
// 判断方式
console.log(typeof a == 'number')
- string：字符串类型
var a = '10';
console.log(a, typeof a)
// 判断方式
console.log(typeof a == 'string')
- boolean：布尔类型
var a = true;
console.log(a, typeof a)
// 判断方式
console.log(typeof a == 'boolean')
- undefined：未定义类型
var a = undefined;
console.log(a, typeof a)
// 判断方式
console.log(typeof a == 'undefined')
console.log(a == undefined)
2、引用类型
- function：函数类型
var a = function(){};
console.log(a, typeof a)
// 判断方式
console.log(typeof a == 'function')
- object：对象类型
var a = {};
console.log(a, typeof a)
// 判断方式
console.log(typeof a == 'object')
console.log(a instanceof Object)
3、具体的对象类型
- null：空对象
var a = null;
console.log(a, typeof a)
// 判断方式
console.log(typeof a == 'object')
console.log(a == null)
- Array：数组对象
var a = new Array(1, 2, 3, 4, 5);
console.log(a, typeof a)
// 判断方式
console.log(typeof a == 'object')
console.log(a instanceof Object)
console.log(a instanceof Array)
- Date：时间对象
var a = new Date();
console.log(a, typeof a)
// 判断方式
console.log(typeof a == 'object')
console.log(a instanceof Object)
console.log(a instanceof Date)
- RegExp：正则对象
var a = new RegExp();
console.log(a, typeof a)
// 判断方式
console.log(typeof a == 'object')
console.log(a instanceof Object)
console.log(a instanceof RegExp)
4、类型转换
- 数字|布尔 转换为 字符串
var a = 10 or true
String(a)
a.toString()
- 布尔|字符串 转换为 数字
var a = true or '10'
Number(a)
+ a
parseFloat()
parseInt()
- 字符串|数字 转换为 布尔
var a = 10 or '10'
Boolean(a)
- 自动转换
5 + null // 5
"5" + null // "5null"
"5" + 1 // "51"
"5" - 1 // 4
- 特殊产物
// NaN: 非数字类型
// 不与任何数相等，包含自己
// 利用isNaN()进行判断
数据类型转换代码示例：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>类型转换</title>
</head>
<body>
类型转换
</body>
<script>
// 类型转换针对 值类型
// number string boolean
// 一.显性转化
// 1. num,bool => str
var a = 10;
var b = true;
// var c = new String(a);
// console.log(c, typeof c); // '10', object
var c = String(a);
console.log(c, typeof c); // '10', string
c = String(b);
console.log(c, typeof c); // 'true', string
c = a.toString();
console.log(c, typeof c); // '10', string
c = b.toString();
console.log(c, typeof c); // 'true', string
// 2.bool,str => num
var aa = true;
var bb = '10';
var cc = Number(aa);
console.log(cc, typeof cc); // 1 number
cc = Number(bb);
console.log(cc, typeof cc); // 10 number
cc = + aa;
console.log(cc, typeof cc); // 1 number
cc = + bb;
console.log(cc, typeof cc); // 10 number
// 针对字符串
cc = parseFloat('3.14.15.16abc');
console.log(cc, typeof cc); // 3.14
cc = parseInt('10.35abc'); // 10
console.log(cc, typeof cc);
// 字符串以非数字开头,结果为NaN
// 1.非数字类型
// 2.不与任何数相等,包含自己
// 3.通过isNaN()进行判断
var res = parseInt("abc10def");
console.log(res, isNaN(res))
// 二.隐性转换(自动转换)
// 5 + null // 5
// "5" + null // "5null"
// "5" + 1 // "51"
// "5" - 1 // 4
console.log("5" - 1);
// "" + ? // "?"
</script>
</html>
八、运算符
代码示例：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>运算符</title>
</head>
<body>
运算符
</body>
<script type="text/javascript">
// 一.算数运算符
var a = 5;
var res = a / 2;
// 只存在number类型运算
console.log(res); // 2.5
var res = a % 2;
console.log(res); // 商为2余1 1
// 自增自减
// 总结:
// 1.++/--在前在后,自身值一定改变, a++/++a => a = a + 1
// 2.++/--在前先自运算,再他运算
// 1.++/--在后先他运算,再自运算
// a=5
var res = a++;
console.log("res:" + res + ", a:" + a); // 5, 6
// a=6
var res = ++a;
console.log("res:" + res + ", a:" + a); // 7, 7
// 二.赋值运算符
// 三.比较运算符
console.log('5' == 5); // true, 值相等即可
console.log('5' === 5); // false, 值与类型均要相等
console.log('5' != 5); // fasle
console.log('5' !== 5); // true
// 四.逻辑运算符
// 运算结果为true|false
var a = 10;
var b = 20;
var c = 30;
var res = a < b && c == 30;
console.log(res);
// 真,真 => 真
// 真,假 => 假
// 假,真 => 假 短路
// 假,假 => 假 短路
// &&运算,有假即假,所有前面为假,后面没必要被执行,所以被短路
// 短路
var res = a > b && ++c;
console.log(res, c); // c=30
// ||运算,有真即真,所有前面为真,后面没必要被执行,所以被短路
// 真,真 => 真 短路
// 真,假 => 真 短路
// 假,真 => 真
// 假,假 => 假
// !运算,真则假,假则真,负负得正
console.log(!1, !!1);
// 三目运算符(三元运算符)
// 结果 = 条件表达式 ? 结果1 : 结果2;
// 结果不一样要与表达式有关系,但表达式为真则结果为结果1,反之为结果2,
var tq = prompt("天气(晴|雨)")
var res = tq == '晴' ? "今天天气挺好" : "请假回家收衣服";
console.log(res);
</script>
</html>
1、算数运算符
前提：n = 5
算术运算符.jpg
2、赋值运算符
前提：x=5，y=5
| 运算符 | 例子 | 等同于 | 运算结果 |
|---|---|---|---|
| = | x=y | 5 | |
| += | x+=y | x=x+y | 10 |
| -= | x-=y | x=x-y | 0 |
| *= | x*=y | x=x*y | 25 |
| /= | x/=y | x=x/y | 1 |
| %= | x%=y | x=x%y | 0 |
3、比较运算符
前提：x=5
| 运算符 | 描述 | 比较 | 结果 |
|---|---|---|---|
| == | 等于 | x=="5" | true |
| === | 绝对等于 | x==="5" | false |
| != | 不等于 | x!="5" | fales |
| !== | 不绝对等于 | x!=="5" | true |
| > | 大于 | x>5 | false |
| < | 小于 | x<5 | false |
| >= | 大于等于 | x>=5 | true |
| <= | 小于等于 | x<=5 | true |
4、逻辑运算符
前提：n=5
| 运算符 | 描述 | 例子 | 结果 |
|---|---|---|---|
| && | 与 | x=n>10&&++n | x=false,n=5（短路） |
| || | 或 | x=n<10||n-- | x=true,n=5（短路） |
| ! | 非 | x=!n | x=false,x=5 |
5、ES6语法解构赋值
- 数组的解构赋值
let [a, b, c] = [1, 2, 3]
// a=1,b=2,c=3
let [a, ...b] = [1, 2, 3]
// a=1,b=[2,3]
- 对象的解构赋值
let {key: a} = {key: 10}
// a=10
- 字符串解构赋值
let [a,b,c] = 'xyz'
// a='x',b='y',c='z'
