第十三课
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>引用、自定义类</title>
<script src="13.js"></script>
</head>
<body>
</body>
</html>
js
// 引用和赋值
// var person1 = {
// name:"xiaoming",
// sex:"male",
// age:"19",
// slogan:function(){
// console.log("wo shi xiaoming");
// }
// }
// var person2 = person1;
// person2.name = "xiaoming2";
// 定义了对象 001
// {
// name:"xiaoming",
// sex:"male",
// age:"19",
// slogan:function(){
// console.log("wo shi xiaoming");
// }
// }
// 001柜子 地址
// 定义一个变量来使用这个对象
// var person1 = 001; // -> var 容器很小 值 数字 字符串
// 创建新的对象 xiaoming2
// var person2 = person1; //001 地址
// person2.name = "xiaoming2";
// person1 - > xiaoming?
// person2 - > xiaoming2?
// 赋值 : 复制地址001 叫引用(和对象相关)
// var num = 100;
// var person1 = {
// name:"xiaoming",
// sex:"male",
// age:"19",
// slogan:function(){
// console.log("wo shi xiaoming");
// }
// }
// xiaohong 对象 人
// 用类的形式来创建对象
// 人的类:
var person2 = new PersonClass();
// Es5 function -> Es6 you class
// 为了区分函数和类 类
// function PersonClass(){
// // var name;
// this.name = "xiaoming";
// this.sex = "male";
// this.age = "19";
// this.slogan = function(){
// console.log("wo shi xiaoming");
// }
// }
// // 构造函数的方式
// var person1 = new PersonClass();
// var person2 = new PersonClass();
// person2.name = "xiaohong"
// function PersonClass( pName,pSex,pAge){
// // var name;
// this.name = pName; //pName || "xiaoming"
// this.sex = pSex;
// this.age = pAge;
// this.slogan = function(){
// console.log("wo shi xiaoming");
// }
// }
// // 构造函数的方式
// var person1 = new PersonClass("xiaoming","male",18);
// var person2 = new PersonClass("xiaohong","male",19);
function PersonClass( pName,pSex,pAge){
// var name;
this.name = pName; //pName || "xiaoming"
this.sex = pSex;
this.age = pAge;
this.slogan = function(){
// for(var i=0;i<10;i++)
console.log("wo shi :" + this.name);
}
}
// 构造函数的方式
var person1 = new PersonClass("xiaoming","male",18);
var person2 = new PersonClass("xiaohong","male",19);
// 命名空间: 多个人 方法的存放 方便使用
// var cc = {
// };
// cc.Age = 100;
// 系统提供很多类 -》 用的 方法
第十四课
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>基本包装类型和data、math</title>
<script src="14.js"></script>
</head>
<body>
</body>
</html>
js
// 对象 类 自定义类
// 对象 和 类
// var obj1 = {};
// var obj2 = new Object(); //空的对象
// 对象: 值 + 方法
// Object -> 打包 最底层 类
// 值 万物皆对象 + 值 方法
// 数字 123 ->对象 类型 Number
// 字符串 "abc" String
// 布尔型 true false Boolean
// 查找 看文档
// var n1 = 123;
// var str1 = n1.toString();
// Array
// 时间相关: Date();
// 计算代码的性能: 耗时
// var time1 = new Date();//获得了当前的时间 本地电脑的时间
// var t = 0;
// for( var i = 0; i<100000000; i++){
// t++;
// }
// var time2 = new Date();
// var n = time2.getTime() - time1.getTime();
// Math -> 数学相关 不是一个类
// new Object();
// 命名空间
// Math.
// 随机数
// Math.random()
// for( var i = 0; i<10;i++)
// console.log(Math.random());
// for( var i = 0; i<10;i++)
// console.log(Math.random()*10);
// for( var i = 0; i<10;i++)
// console.log(Math.floor(Math.random()*10));
for( var i = 0; i<10;i++)
console.log(Math.floor(Math.random()*10) + 1);
第十五课
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="15.js"></script>
</head>
<body>
<div id="div1">aaaa</div>
<div id="div2">bbbb</div>
</body>
</html>
js
// js的核心语法: 编程 -》 逻辑
// 业务 -》 交互
// web 编程 浏览器 方法
// 页面: img 文字 DOM
// 底层 : 浏览器 -》BOM
// 浏览器 加载页面 : 简单操作系统
// 1.输入一个网址 www.baidu.com/Map
// 2.把网址转换为IP地址: 服务器 -》 IP 10.10.10.10
// 域名: www.baidu.com -> 不是很好记
// DNS 服务器 : 浏览器把 www.baidu.com 发送给DNS服务器8.8.8.8 -> 10.10.10.10
// 3.浏览器 收到10.10.10.10 -》 缓存本地
// 4.浏览器 就像http://www.baidu.com 请求:
// http 浏览器 -》 服务器 比如坐车 飞机
// 5.服务器收到了一个请求http://www.baidu.com:80
// 服务器 -》 政府的办公大楼 -》窗口 1——65536
// 端口 80
// 6.服务器把请求的内容 处理 返回给浏览器 页面的内容
// 7.浏览器收到文件 内容 -》 解析
// 8.看到页面
// 浏览器: 多线程
// 1.js引擎
// 2.UI渲染
// 3.事件线程
// 4.发起请求的线程
// 5.定时器的线程
// Js -》 单线程 -》 编程方便
// 银行 一个柜台 js相关的事情
// 排队
// 单线程: 1. 2.
// 多线程: A:C在聊天5分钟 我要存1万
// B: 老婆拿5千
// js -》 单线程
// 同步任务
// 异步任务
// 存钱 我要存1万 柜台间 把钱给里面
// 排队
// 同步:存一万
// 异步:我有一堆问题 我填了一堆单子 -》 在旁边 先做了 -》 排队
// js 的时间线
// 第一阶段:载入阶段 默认:同步 loading
// 1.获取页面内容 2.html -》 解析
// 2.DOM树 : html
// head
// meta title Script
// 3.同步:15.js 下载
// js解析器 脚本解析 执行
// 4.DOM树 : html
// head
// meta title Script
// body
// 。。。。
// 5.解析完成
// 6.渲染 -》 文件在下载 图片
// 7.载入阶段结束
// 第二阶段 事件阶段 异步 onload
// 获取节点
var n = document.getElementById("div1");
console.log(n);
n = document.getElementById("div2");
console.log(n);
// 延迟加载:
// 异步加载:
第十六课
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="16.js"></script>
</head>
<body>
</body>
</html>
js
// DOM BOM
// window 对象 -》 全局对象 全局的方法
// console.log(window.cc);
// var cc = 100;
// console.log(window.cc);
// window 可以不写
// BOM
// 弹窗 -》 浏览器的弹窗
// 同步: 阻断
// alert("alert 弹窗");
// var bcf = confirm("confirm 弹窗");
// console.log("点击 : "+ bcf);
// if(bcf){
// 提交
// }else...
// var strpt = prompt("prompt 输入:");
// console.log("填了:"+ srtpt);
// var strpt = prompt("prompt 输入:","默认是cc");
// console.log("填了:"+ srtpt);
// 浏览器的导航栏的信息
// window.location 对象
// 属性: url 的各个部分
// location.href;
// location.toString();
// 刷新页面,打开新的页面
// location.reload();
// var bcf = confirm("confirm 弹窗");
// location.replace("http://www.baidu.com/");
// var bcf = confirm("confirm 弹窗");
// if(bcf){
// location.replace("http://www.baidu.com/");
// }
// else location.reload();
// 浏览器的历史 :前进 后退
// hostorty
// 浏览器的信息:版本 厂家
// navigator
// 获取浏览器分辨率
// screen
// // 计时器
// 循环执行 :var sil = setInerval(函数名,时间);
// 暂停: clearInterval(sil);
// 一次执行: var sil = setTimeout(函数名,时间);
// clearTimeout(sil);
// var num = 0;
// function add (){
// console.log("num = "+ ++num);
// }
// var sil = setInterval(add,1000);
// function end(){
// clearInterval(sil);
// }
// setTimeout(end,10000);
var num = 0;
function add (){
console.log("num = "+ ++num);
}
var sil = setInterval(add,1000);
function end(){
console.log("setTimeout clearInterval ");
clearInterval(sil);
}
setTimeout(end,5000);