JavaScript学习

最新推荐文章于 2024-05-03 23:30:14 发布

钟记小前端--全栈

最新推荐文章于 2024-05-03 23:30:14 发布

阅读量67

点赞数

分类专栏：学习

本文链接：https://blog.csdn.net/qq_40997551/article/details/104222080

版权

学习专栏收录该内容

8 篇文章 0 订阅

订阅专栏

第十三课

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);

钟记小前端--全栈

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript学习

第十三课HTML<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-...
复制链接

扫一扫

专栏目录