310 lines
6.7 KiB
HTML
310 lines
6.7 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>
|
||
|
||
<style>
|
||
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
|
||
</body>
|
||
<script>
|
||
// console.warn("111")
|
||
// console.error("111")
|
||
// console.log(window)
|
||
|
||
// js 基础语法
|
||
// js 变量
|
||
// 变量：计算机内部用来存储数据的地方，可以被修改的
|
||
// 定义变量？
|
||
// 系统关键字： class var let const
|
||
// var 变量名称 = 变量初始数值;
|
||
// 先定义 后 使用
|
||
|
||
// var UserName;
|
||
|
||
// UserName = 100
|
||
|
||
// console.log(UserName);
|
||
|
||
// 变量名命名规则？
|
||
// 不能以数字和特殊符号(_ $)开头
|
||
// 变量名可以用中文，但是杜绝使用！！！
|
||
// 变量名区分大小写
|
||
// 变量名命名的时候要具有含义（看得懂），一般是英文翻译
|
||
// 变量名要遵守驼峰命名发
|
||
|
||
// 常量
|
||
// 不能修改的（定期的存折）
|
||
// const test = "dddd";
|
||
// console.log(test);
|
||
|
||
// es5
|
||
// es6
|
||
|
||
/*
|
||
* 你好
|
||
* njbnij
|
||
*/
|
||
|
||
// 数据类型
|
||
// 基本类型: string 字符串，boolean 布尔类型，number 数字类型，null 空，undefined 未定义
|
||
// 引用数据类型：array 数组，object 对象，function 方法
|
||
|
||
//undefined 未定义 变量定义了，但是没有赋值返回的就是undefined
|
||
|
||
// 运算符
|
||
// + ++ --
|
||
// +两边只有都是number类型，才会进行 数学 加法运算
|
||
// + 两边只要有一个是字符串类型，就会进行拼接
|
||
// var a = 1, b = "2";
|
||
// console.log(a+b);
|
||
|
||
// a++ 先使用a，然后让a自加1
|
||
// ++a 先让a自加1，然后使用a
|
||
|
||
// var a = 2, b = "2", c = 3;
|
||
// console.log(
|
||
// ( --a + (++b) ) + ( (a++) - (c--) + a ) - ( b- (--a) + (c+b--) )
|
||
// );
|
||
// console.log(
|
||
// (a++ + (--a) - (c++) ) * ( --c + (b++) + a ) - ( c * (c--) + b - a )
|
||
// );
|
||
|
||
// 赋值运算符
|
||
// += -= *= /= %=
|
||
// console.log(a+=b); // a = a+b
|
||
|
||
// = 赋值
|
||
// == 相等 只会判断数值是否一样
|
||
// === 强相等 会判断数值是否一样，还会判断 类型是否一样
|
||
|
||
// console.log( a === b );
|
||
|
||
|
||
// 逻辑运算符
|
||
|
||
// && and 条件表达式两边结果都为true，才为true
|
||
// || or 只要有一个为true，就返回true
|
||
// ! 非 取反的意思
|
||
|
||
|
||
// if 条件语句
|
||
// switch if 语句判断条件很多的时候，这时候if写起来不好看，所以换 switch
|
||
// 三目（元）运算符
|
||
// if (true) {
|
||
// console.log(true);
|
||
// } else {
|
||
// console.log(false);
|
||
// }
|
||
|
||
// 简写
|
||
// 1==2 ? console.log(true) : console.log(false);
|
||
|
||
|
||
// var type = 4
|
||
|
||
// switch (type) {
|
||
// case 1:
|
||
// console.log("1");
|
||
// break;
|
||
// case 2:
|
||
// console.log("2");
|
||
// break;
|
||
// default:
|
||
// console.log("3");
|
||
// break;
|
||
// }
|
||
|
||
|
||
// js 数组？
|
||
// 通下标来存储数据的一种方式
|
||
|
||
// var arr = new Array();
|
||
// arr[0] = 1
|
||
// arr[1] = 3
|
||
// arr[2] = 5
|
||
// var arr = new Array(1,3,5)
|
||
|
||
// var arr = [1, 3, 5, 7, 9];
|
||
|
||
// 数组还自带很多方法
|
||
// https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide
|
||
|
||
|
||
// for(var i = 0;i< arr.length; i++) {
|
||
// console.log(arr[i]);
|
||
// }
|
||
|
||
|
||
// var a = 10;
|
||
|
||
// while (a > 20) {
|
||
// console.log(a);
|
||
// a++
|
||
// }
|
||
|
||
// do {
|
||
// console.log(a);
|
||
// a++
|
||
// } while (a > 20);
|
||
|
||
|
||
// for in 遍历对象
|
||
// 通过 key(名字) value（值） 来存储数据
|
||
// 存储的数据应该是 某个事物 具体的属性
|
||
|
||
// var obj = new Object();
|
||
// obj.name = "刘兵";
|
||
// obj.age = 18;
|
||
|
||
// var obj = new Object({ name: '刘兵', age: 18 })
|
||
|
||
// es5 是没有 class
|
||
// var obj = {
|
||
// name: '刘兵',
|
||
// age: 18,
|
||
// like: ['骑车', '编程']
|
||
// }
|
||
|
||
// console.log(obj);
|
||
|
||
// es6 class
|
||
// 面向对象的三大特征
|
||
// 封装 继承 多态
|
||
|
||
// class ren {
|
||
// name;
|
||
// age;
|
||
// like;
|
||
// eat() { }
|
||
// sleep() { }
|
||
// }
|
||
|
||
// class ren1 extends ren {
|
||
|
||
// // 构造函数，类被初始化的时候第一个默认运行的方法
|
||
// // 类参数的保存，或者默认方法的调用
|
||
// constructor(name, age, like) {
|
||
// super()
|
||
// this.name = name;
|
||
// this.age = age;
|
||
// this.like = like;
|
||
// }
|
||
|
||
// sport() { }
|
||
|
||
// getName() {
|
||
// return this.name;
|
||
// }
|
||
// }
|
||
|
||
|
||
// class ren2 extends ren {
|
||
// constructor(D,F,G) {
|
||
// super()
|
||
// this.name = D
|
||
// }
|
||
// study() { }
|
||
// }
|
||
|
||
// var aaa = new ren1("刘兵", 18, [])
|
||
// var bbb = new ren2("张三")
|
||
// console.log(bbb.name);
|
||
// console.log(aaa.getName());
|
||
|
||
|
||
// function 方法 函数
|
||
// 作用？？？
|
||
// 降低代码冗余
|
||
// 匿名方法
|
||
|
||
// function test() {
|
||
// console.log("test方法");
|
||
// }
|
||
|
||
|
||
|
||
|
||
// var test = function (par, par2, par3) {
|
||
// console.log(par, par2, par3);
|
||
// }
|
||
|
||
// var c = test;
|
||
// console.log(c);
|
||
|
||
// test("你好1", "你好2", "你好3");
|
||
|
||
// 简写 => 箭头函数 es6
|
||
|
||
// var test = (par, par2) => console.log(par, par2);
|
||
// test("你好1", "你好2");
|
||
|
||
// 作用域
|
||
// 全局作用域
|
||
// 局部作用域
|
||
// var num = 100;
|
||
|
||
// function he(a,b) {
|
||
// // 不加 var 会做 变量提升（提升到全局，变成全局变量）
|
||
// var num2 = 200;
|
||
// return a + b + num;
|
||
// }
|
||
|
||
// var c = he(10,20);
|
||
// console.log(c);
|
||
// console.log(num2);
|
||
|
||
|
||
// 回调函数 es5 的方案
|
||
// 作用？？
|
||
// 异步 一般用来处理 耗时 操作
|
||
// 同步
|
||
|
||
|
||
// function getTime(call) {
|
||
// var res = "默认数值"
|
||
// setTimeout(function() {
|
||
// res = "你好"
|
||
// call(res)
|
||
// }, 3000)
|
||
// }
|
||
|
||
// getTime( function(par) {
|
||
// console.log(par);
|
||
// } );
|
||
|
||
|
||
// function a(call) {
|
||
// call("你好")
|
||
// }
|
||
|
||
|
||
// a( function(par) {
|
||
// console.log(par);
|
||
// } )
|
||
|
||
|
||
// function a () {
|
||
// console.log(arguments);
|
||
// }
|
||
|
||
// a(1,2,3,4,5,6,7,8,9,0)
|
||
|
||
|
||
// 自执行函数
|
||
// 封装插件，避免变量污染
|
||
// (function () {
|
||
// console.log("11");
|
||
// })()
|
||
|
||
</script>
|
||
|
||
</html> |