257 lines
5.2 KiB
HTML
257 lines
5.2 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Document</title>
|
||
</head>
|
||
|
||
<body>
|
||
|
||
</body>
|
||
|
||
<script>
|
||
// js es5,es6,7,8,9.....
|
||
// 注释
|
||
// 单行注释
|
||
// 多行 /** 这是注释 **/
|
||
// console.log("111")
|
||
// console.warn("111")
|
||
// console.error("111")
|
||
|
||
// 变量
|
||
// 程序内部存储的可变的数据
|
||
// 如何定义变量
|
||
// var 变量名 = 变量默认数值(可选, 定义变量未赋值就是 undefined);
|
||
// let 变量名 = 变量默认数值(可选, 定义变量未赋值就是 undefined);
|
||
// 先定义 后 使用
|
||
|
||
let a = 1, b;
|
||
console.log(a);
|
||
|
||
b = 3
|
||
console.log(b);
|
||
|
||
|
||
// 变量名 定义的规则？
|
||
// 严格区分大小写
|
||
// 不能以数字或者特殊符号（_ $）开头
|
||
// 需要遵守驼峰命名法
|
||
// 禁止使用中文
|
||
|
||
|
||
// 常量
|
||
// 程序内部存储的不可变的数据
|
||
// const 常量名 = 常量默认数值(必选);
|
||
|
||
const test = 123;
|
||
console.log(test);
|
||
|
||
|
||
// 数据类型
|
||
|
||
// 基本数据类型
|
||
// 字符串（String）、数字(Number)、布尔(Boolean)、空（Null）、未定义（Undefined）。
|
||
// 引用数据类型
|
||
// 对象(Object)、数组(Array)、函数(Function)
|
||
|
||
|
||
// 字符串（String） 双（单）引号包裹的
|
||
|
||
let abc = "ni";
|
||
console.log(abc);
|
||
|
||
// 布尔(Boolean)
|
||
// true（真）1 false（假）0
|
||
|
||
|
||
// = 赋值
|
||
// == 判断是否相等
|
||
// === 强等于 判断是否相等(但会判断数据类型)
|
||
|
||
// 运算符 + - * / % （求余）
|
||
// ++ --
|
||
// + 只能用于number
|
||
// 字符串拼接
|
||
// console.log(a+abc);
|
||
console.log(a * abc); // NaN 非数字
|
||
|
||
console.log(++a); // 1
|
||
|
||
// 赋值运算符 = += -= *= /= %=
|
||
console.log(a += b); // a = a+b
|
||
|
||
//比较运算符 != !== <> <= >=
|
||
|
||
//逻辑运算符
|
||
// && || !
|
||
|
||
// 对象(Object)
|
||
// 类（模拟后端的class）
|
||
// 类是现实生活中事物（属性，功能）在编程中的映射（存储）
|
||
// 构造函数constructor 类被初始化的时候默认执行的函数
|
||
// 作用：接受参数
|
||
// 析构函数
|
||
// 类的三大特征？？
|
||
// 封装 继承 多态
|
||
// this 指向
|
||
|
||
var car1 = {
|
||
color: 'red',
|
||
speed: '4.3s',
|
||
forward: function () {
|
||
console.log("前进: ");
|
||
},
|
||
retreat: function () {
|
||
console.log("后退");
|
||
},
|
||
stop: function () {
|
||
console.log("停止");
|
||
}
|
||
}
|
||
|
||
|
||
car1.forward()
|
||
|
||
|
||
// 语法糖
|
||
class baseCar {
|
||
color;
|
||
speed;
|
||
forward() {
|
||
console.log("前进");
|
||
}
|
||
retreat() {
|
||
console.log("后退");
|
||
}
|
||
stop() {
|
||
console.log("停止");
|
||
}
|
||
}
|
||
|
||
class smallCar extends baseCar {
|
||
constructor() {
|
||
super()
|
||
this.color = "red"
|
||
console.log("this.color: ", this.color);
|
||
}
|
||
}
|
||
|
||
class Car119 extends baseCar {
|
||
constructor() {
|
||
super()
|
||
this.color = "green"
|
||
console.log("this.color: ", this.color);
|
||
}
|
||
}
|
||
|
||
var sc = new smallCar();
|
||
var c1 = new Car119();
|
||
|
||
// 基本数据类型
|
||
// 对象名(key): 对象值(value)
|
||
// 定义？
|
||
|
||
// var obj = new Object();
|
||
// obj.name = "刘兵";
|
||
// obj.age = 18
|
||
|
||
// var obj = new Object({ name: '刘兵', age: 18 });
|
||
// var r = "age"
|
||
// var obj = { name: [1,2,3,4], age: 18 };
|
||
|
||
// console.log(obj.r);
|
||
// console.log(obj[r]);
|
||
// delete obj.age
|
||
// console.log(obj);
|
||
|
||
// obj.like = "你好"
|
||
// console.log(obj);
|
||
|
||
|
||
// if () {
|
||
|
||
// }
|
||
|
||
// if () {
|
||
|
||
// } else {
|
||
|
||
// }
|
||
|
||
// if () {
|
||
|
||
// } else if ( a > 1 && a < 3) {
|
||
|
||
// } else {
|
||
|
||
// }
|
||
|
||
// 三元运算符
|
||
// 1 == 1 ? console.log("true") : console.log("false");
|
||
|
||
// switch
|
||
// switch (key) {
|
||
// case value:
|
||
// break;
|
||
// case value:
|
||
// break;
|
||
// case value:
|
||
// break;
|
||
// default:
|
||
// break;
|
||
// }
|
||
|
||
|
||
// for (let i = 0; i<10; i++) {
|
||
// console.log(i);
|
||
// }
|
||
|
||
// forEach map for of for in filter while (do while)....
|
||
|
||
// 数组
|
||
// 下标 0开始
|
||
// let arr = new Array();
|
||
// arr[0] = 1;
|
||
// arr[1] = 2;
|
||
|
||
// let arr = new Array(1,2);
|
||
// let arr = [1,2,3,4,5,6,7,8,9];
|
||
|
||
// for(let i =0;i< arr.length;i++) {
|
||
// console.log(arr[i]);
|
||
// }
|
||
|
||
// arr.forEach(function (val, index) {
|
||
// console.log(val);
|
||
// })
|
||
|
||
// prototype 原型
|
||
|
||
// prototype.lb Array.= function (callback) {
|
||
// for(let i =0;i< this.length;i++) {
|
||
// callback(this[i], i, this)
|
||
// }
|
||
// }
|
||
|
||
// arr.lb(function (val, index) {
|
||
// console.log(val);
|
||
// })
|
||
// arr[0] = 1000
|
||
// arr.push(10)
|
||
// arr.splice(1,2)
|
||
// console.log(arr);
|
||
|
||
|
||
// 函数(Function) 事件 写特效（从易到难） 项目前ajax（http） 写项目...
|
||
|
||
// 函数 方法
|
||
// 作用：封装代码的
|
||
|
||
|
||
|
||
</script>
|
||
|
||
</html> |