1. 什么是 JavaScript
2. 快速入门
2.1 引入JavaSciprt
- 内部标签
<!-- script标签内, 写JavaScript代码 -->
<script>
alert('hello, world');
</script>
- 外部引入
abs.js
<script src="abc.js></script>
测试代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- script标签内, 写JavaScript代码 -->
<!-- <script>-->
<!-- alert('hello, world');-->
<!-- </script>-->
<!-- 外部引入-->
<!-- 注意: script标签必须成对出现-->
<script src="./js/qj.js"></script>
<!-- 不用显示定义type, 也默认就是 JavaScript-->
<script type="text/javascript"></script>
</head>
<body>
<!-- 这里也可以存放 -->
</body>
</html>
2.2基本语法入门
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
// 1. 定义变量 变量类型 变量名 = 变量值;
const num = 1;
const zzz = 2;
const name = "weifengcheng";
alert(name);
//2. 条件控制
if (2 > 1) {
alert("true");
}
// console.log(name) 在浏览器的打印变量 System.out.println()
</script>
</head>
<body>
</body>
</html>
浏览器必备调试须知;
2.3 数据类型
数值, 文本, 图形, 音频, 视频…
变量
var 1a = 1 //不可以, 以数字开头. 就可以
var 王者荣耀 = "青铜";
number
js不区分小数和整数, Num
123 //整数123
123.1 //浮点数123.1
1.123e3 //科学计数法
-99
NaN // not a number
Infinity //表示无限大
字符串
'abc' "abc"
'\n'
布尔值
略
逻辑运算
&&
||
!
比较运算符 !!! 重要
=
== 等于(类型不一样, 值一样, 也会判断为true)
=== 绝对等于(类型一样, 值一样, 结果为true)
这是一个JS的缺陷, 坚持不要使用 == 比较
须知:
- NaN == NaN, 这个与所有的数值都不相等, 包括自己
- 只能通过 isNaN(NaN) 来判断这个数是否NaN
浮点数
<script>
console.log((1/3) === (1-2/3))
</script>
尽量避免使用浮点数进行运算, 存在精度问题!
<script>
console.log((1/3) === (1-2/3))
console.log(Math.abs(1/3-(1-2/3)) < 0.00001)
//Math.abs(1/3-(1-2/3))
</script>
结果: falst true
null 和undefined
- null 空
- undefined 未定义
数组
java的数值
一些列相同类型的对象~,
//保证代码的可读性, 尽量
var arr = [1, 2, 3, 4, 'weifc', null, true];
new Array(1, 2, 3, 4, 'weifc');
区数组下标: 如果越界了, 就会
undefined
对象
对象是大括号, 数组是中括号~~
, 每个属性之间使用逗号隔开, 最后一个不需要添加
// 对象 Person person = new Person(1, 2, 3, 4, 5);
var person = {
name: "weifc",
age: 3,
tags: ['js', 'java', 'web', '...']
}
取对象的值
person.name
>"weifc"
person.age
>3
2.4 严格检查格式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
前提, IDEA 需要设置ES6 语法
局部变量建议都使用 ler 去定义~
必须写在JavaScript 的第一行!
局部变量建议使用 let 去定义~
-->
<script>
'use strict'; //尽量加上, 严格检查模式, 预防javascript的随意性导致产生一些问题.
//全局变量,
let i = 1;
//ES6 let
</script>
</head>
<body>
</body>
</html>
3. 数据类型
3.1 字符串
- 正常字符串我们使用 单引号, 或者双引号包裹
- 注意转义字符\
\'
\n
\t
\u4e2d \u### Unicode字符
\x41 AsCll字符
3. 多行字符串编写
// tab 上面 esc 键下面
var msg = `hello java
js
c++`
4. 模板字符串
let name = "weifc";
let msg = '你好啊, ${name}';
console.log(msg);
5. 字符串长度
str.length
6. 字符串的可变性, 不可变
== 7.大小写转换 ==
//注意, 这里是方法, 不是属性了
student.toUpperCase()
student.toLowerCase()
8.
student.indexOf('t')
9
student.substring(1, 3)); //[1, 3)
[)
//从第一个字符串截取到最后一个字符串
3.2 数组
Array 可以包含任意的数据类型
var arr = [1, 2, 3, 4]; //通过下标取值和赋值
arr[0]
arr[0] = 1;
- 长度
arr.length
注意: 加入给arr.length 赋值, 数组大小就会发生变化~, 如果赋值过小, 元素就会丢失
- indexOf , 通过元素获得下标索引
arr.indexOf(2)
字符串的"1" 和 数字的 1 不同的
- slice() 截取Array的一部分, 返回一个新数组,
类似于String 中的 substring
4. push, pop
1. push: 压入到尾部
2. pop: 弹出尾部的第一个元素
5.unshift, shift() 头部
3. unshift: 压入到头部部
4. shift: 弹出头部部的第一个元素
6.排序sort()
7元素反转
8. concat()
注意: concat() 并每一个修改数组, 只是会返回一个新的数组
9连接符join
打印拼接数组, 使用特定的字符串连接
多维数组
== 数组: 存储数据(如何存, 如何取方法都可以自己定义) ==
3.3 对象
若干个建值对
var 对象名 = {
属性名: 属性值
属性名: 属性值
属性名: 属性值
}
//定义了一个person对象, 它有四个属性!
<script>
'use struct';
var person = {
name: "weifc",
age: 19,
email: "2418060010@qq.com",
score: 0
}
</script>
Js 中对象, {…} 表示一个对象, 键值对描述属性 XXXX: XXXX, 多个属性之间使用逗号隔开, 最后一个属性不加逗号!
javaScript 中的所有的键都是字符串, 值是任意对象!
1.对象赋值
2.使用一个不存在的对象属性, 不会报错
只会 undefined
3.动态的删减属性
java c++ 是不行的
4.那也可以动态添加
5.判断属性值是否在这个对象中! XXX in XXX!
'age' in person
true
//继承
'toString' in person'
true
6.判断一个属性是否是这个对象自身拥有的 hasOwnProperty
3.4流程控制
if 判断
<script>
'use struct';
var age = 3;
if (age > 3) {
alert("age > 3");
} else {
alert("other");
}
</script>
while循环
<script>
'use struct';
var age = 3;
while (age < 100) {
age = age + 1;
console.log(age);
}
</script>
for循环
for (let i = 0; i < 100; i++) {
console.log(i);
}
///
var age = [12, 13, 14, 15];
for (let i = 0; i < age.length; i++) {
console.log(age[i]);
}
///
var age = [12, 13, 14, 15];
// for (let i = 0; i < age.length; i++) {
// console.log(age[i]);
// }
//函数
age.forEach(function (value) {
console.log(value);
})
for…in
//for (var index in object) {}
for (var num in age) {
if (age.hasOwnProperty(num)) {
console.log("存在");
console.log(age[num]);
}
}
感觉没啥用
3.5 Map 和 Set
ES6 新特性
Map:
<script>
'use strict'
new Map();
new Set();
// ES6
// 学生的成绩, 学生的名字
// var names = ["tom", "jack", "weifc"];
// var scores = [100, 90, 80];
let map = new Map([['tom', 100],['jack', 90],['weifc', 80]]);
let name = map.get('tom'); //通过key获取value
map.set('admin', 1234);
console.log(name);
</script>
Set: 无序不重复的集合
set.add(2); //添加
set.delete(1); //删除
console.log(set.has(3)); //是否包含某个元素
3.6 iterator
作业: 使用iterator 来遍历迭代我们Map, Set !
通过for of / for in 下标
遍历数组
<script>
'use strict';
var arr = [3, 4, 5];
for (var x of arr) {
console.log(x);
}
</script>
遍历map
let map = new Map([["tom", 100], ["jack", 90], ["weifc", 80]]);
for (let x of map) {
console.log(x);
}
遍历set
var set = new Set([5, 6, 7]);
for (let x of set) {
console.log(x);
}
漏动
let arr = [3, 4, 5];
//arr.name = "213"; 早期的漏动~
for (let x in arr) {
console.log(x);
}