[TOC]

✊总有人要成为第一，为什么不是你

2021年07月26日

工作重点

1 工作重点事项 进度 已完成
2 早上 摸鱼 已完成
- [x]

| | 3 | 下午 将js基础(一部分) | 已完成 |
- [x]

| | 4 | 晚上 做练习 | 已完成 |
- [x]

|

遇到的问题和解决思路

遇到的问题

  1. 在window.onload写document.write会把页面内容覆盖了


  2. 解决思路

  3. 您只能在 HTML 输出中使用 document.write。如果您在文档加载后使用该方法，会覆盖整个文档。

避免方法：

  1. 在onload之前使用document.wriet()方法；

    1. 今日总结

(1)js简介

<!DOCTYPE html>











(2)js基础

<!DOCTYPE html>











弹窗

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius ullam harum quasi mollitia libero. Quidem
voluptates libero molestiae distinctio facilis officia laboriosam in omnis dolorum numquam, praesentium, minima
assumenda temporibus.





(2.1)index.js

//警告框
//参数是:弹窗的内容
//返回值类型和值:undefined
//alert(‘helloworld’);
// console.log(alert(‘helloworld’));
// 确认框
/*
返回值类型是Boolean
确定:返回true
取消:返回false
*/
// confirm(“是否退出”);
// console.log(confirm(“是否退出”));
//输入框
// 参数 提示信息
/*
返回值:确认时返回的类型字符串 值是输入的值
:取消时 是null
*/
// prompt(“请输入数字”);
// console.log(typeof prompt(“请输入数字”));
window.onload = function () {
// 输入信息
// window.console.log(document.getElementById(“app”));
// 输入提示的错误信息
// window.console.error(‘world’);
// 输入提示警告的信息
// window, console.warn(“zzz”);
// 输入普通信息
// window.console.info(“ccc”);
// 输入debug(一般不显示)
// window.console.debug(“nnn”);
//可以将对象元素展开
// window.console.dir(document.getElementById(“app”));
};
document.write(“1”);
document.write(“2”);
// 全局用var定义变量时，变量会被添加到window上
// 同时声明多个变量
// var a , b = “1234”;
var a = b = “12334”;
function test(){
var a;
// 默认是undefined(定义但未赋值)
var b = “123”;

// 容易覆盖window上的属性
//容易污染全局
c = “c”
}
// test();
console.log(a);
console.log(b);
// console.log(window.c);

1. 计算机基础

1.1 计算机组成

view.jpg

1.2 数据存储(重点)

  1. 计算机内部使用二进制 0 和 1来表示数据。
  2. 所有数据，包括文件、图片等最终都是以二进制数据（0 和 1）的形式存放在硬盘中的。
  3. 所有程序，包括操作系统，本质都是各种数据，也以二进制数据的形式存放在硬盘中。平时我们所说的安装软件，其实就是把程序文件复制到硬盘中。
  4. 硬盘、内存都是保存的二进制数据。

1.3 数据存储单位

大小关系：bit < byte < kb < GB < TB<…..

  • 位(bit)： 1bit 可以保存一个 0 或者 1 （最小的存储单位）
  • 字节(Byte)：1B = 8b
  • 千字节(KB)：1KB = 1024B
  • 兆字节(MB)：1MB = 1024KB
  • 吉字节(GB): 1GB = 1024MB
  • 太字节(TB): 1TB = 1024GB

1.4 程序运行（重点）

图片6.png

计算机运行软件的过程：

  1. 打开某个程序时，先从硬盘中把程序的代码加载到内存中
  1. CPU执行内存中的代码
    注意：之所以要内存的一个重要原因，是因为cpu运行太快了，如果只从硬盘中读数据，会浪费cpu性能，所以，才使用存取速度更快的内存来保存运行时的数据。（内存是电，硬盘是机械）

2. 编程语言

2.1 编程

  • 编程：
    • 就是让计算机为解决某个问题而使用某种程序设计语言编写程序代码，并最终得到结果的过程。
  • 计算机程序：
    • 就是计算机所执行的一系列的指令集合，而程序全部都是用我们所掌握的语言来编写的，所以人们要控制计算机一定要通过计算机语言向计算机发出命令。

2.2 计算机语言

  • 计算机语言指用于人与计算机之间通讯的语言，它是人与计算机之间传递信息的媒介。
  • 计算机语言的种类非常的多，总的来说可以分成机器语言，汇编语言和高级语言三大类。
  • 实际上计算机最终所执行的都是 机器语言，它是由“0”和“1”组成的二进制数，二进制是计算机语言的基础。

图片1.png

2.3 编程语言（重点）

编程语言：

可以通过类似于人类语言的“语言”来控制计算机，让计算机为我们做事情，这样的语言就叫做编程语言（Programming Language）。

编程语言是用来控制计算机的一系列指令，它有固定的格式和词汇（不同编程语言的格式和词汇不一样），必须遵守。

如今通用的编程语言有两种形式：汇编语言和高级语言。

语言类型 说明
汇编语言 汇编语言和机器语言实质是相同的，都是直接对硬件操作，只不过指令采用了英文缩写的标识符，容易识别和记忆，面向机器的程序设计语言.汇编语言是一种功能很强的程序设计语言,也是利用计算机所有硬件特性并能直接控制硬件的语言，是低级语言。
高级语言 高级语言主要是相对于低级语言而言，它并不是特指某一种具体的语言，而是包括了很多编程语言，常用的有C语言、C++、Java、C#、Python、PHP、JavaScript、Go语言等。

2.4 翻译器

高级语言所编制的程序不能直接被计算机识别，必须经过转换才能被执行，为此，我们需要一个翻译器。翻译器可以将我们所编写的源代码转换为机器语言，这也被称为二进制化。

图片22.png

2.5 解释型语言和编译型语言区别

计算机不能直接理解任何除机器语言以外的语言，所以必须要把程序员所写的程序语言翻译成机器语言才能执行程序。程序语言翻译成机器语言的工具，被称为翻译器。

  • 翻译器翻译的方式有两种：一个是编译，另外一个是解释。两种方式之间的区别在于翻译的时间点不同
  • 编译器是在代码执行之前进行编译，生成中间代码文件
  • 解释器是在运行时进行及时解释，并立即执行(当编译器以解释方式运行的时候，也称之为解释器)

图片23.png

3. JavaScript起源

3.1 JavaScript的由来（重点）

1995年2月发布的，Netscape Navigator 2浏览器开发一种名为 LiveScript 的脚本语言。为了赶在发布日期前完成 LiveScript的开发，Netscape 与 Sun 公司建立了一个开发联盟，共同开发 LiveScript。在 NetScape
Navigator 2 发布前夕，网景为了更好地推广这个脚本语言（利用 Java语言的知名度），临时把 LiveScript 改名为 JavaScript，实际上两者没有任何关系。

3.2 浏览器战争

JavaScript 1.0 发布之后获得了巨大的成功，Netscape 随即在 Netscape Navigator 3
中又发布了JavaScript 1.1。与此同时，微软公司在推出 IE3的时候也发布了自己的脚本语言，JScript。JScript 和 JavaScript差异很大，互不兼容，编程人员不得不痛苦地为两种浏览器分别编写脚本。

3.3 制定标准（标准）

1997年，网景公司给欧洲计算机制造商协会（ECMA, European Computer Manufacturers
Association）提了一个建议，以 JavaScript 1.1 为蓝本，由该协会主导制定了一套
JavaScript 语言开发规范。于是 ECMAScript 诞生了，这是一个国际标准化的 JavaScript
开发标准，所有浏览器厂商在开发浏览器脚本语言时，都要准守这套规范。这样的话，编程人员在写代码时只要写一次，就可以在所有的浏览器上执行了。

3.4 JavaScript和HTML、CSS的区别

HTML：结构层，提供网页的结构，提供网页中的内容。
CSS: 表示层，用来美化网页。
JavaScript：行为层，可以用来控制网页内容，给网页增加动态的效果，用于跟用户的交互。

3.5 浏览器介绍

3.5.1浏览器概念简述

浏览器（browser application）是用来访问和浏览万维网页面的客户端软件，也是现代计算机系统中应用最为广泛的软件之一，重要性也可想而知，也是我们前端工程师经常打交道的；

3.5.2浏览器的组成部分

liulanqi.png

3.5.3浏览器内核(内壳)

  • 英文叫做：Rendering Engine，中文翻译很多，排版引擎、解释引擎、渲染引擎，现在流行称为浏览器内核.
    浏览器内核可以分成两部分：渲染引擎(layout engineer 或者 Rendering Engine)和 JS 引擎,以及其他模块。
  • 渲染引擎：它负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入 CSS 等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。
  • JS 引擎：则是解析 Javascript 语言，执行 javascript语言来实现网页的动态效果。
  • 常见的浏览器内核可以分这四种：Trident、Gecko、Blink、Webkit。

（1）Trident(IE内核)
国内很多的双核浏览器的其中一核便是 Trident，美其名曰 “兼容模式”。
代表： IE、Window10 发布后，IE 将其内置浏览器命名为 Edge，Edge 最显著的特点就是新内核 EdgeHTML。
（2）Gecko(firefox)
Gecko(Firefox 内核)： Mozilla FireFox(火狐浏览器) 采用该内核，Gecko 的特点是代码完全公开，因此，其可开发程度很高，全世界的程序员都可以为其编写代码，增加功能。 可惜这几年已经没落了， 比如 打开速度慢、升级频繁、猪一样的队友flash、神一样的对手chrome。
（3） webkit(Safari)
Safari 是苹果公司开发的浏览器，所用浏览器内核的名称是大名鼎鼎的 WebKit。
现在很多人错误地把 webkit 叫做 chrome内核（即使 chrome内核已经是 blink 了）。
代表浏览器： Apple Safari (Win/Mac/iPhone/iPad)、Android 默认浏览器。
（4） Chromium/Blink(chrome)
在 Chromium 项目中研发 Blink 渲染引擎（即浏览器核心），内置于 Chrome 浏览器之中。Blink 其实是 WebKit 的分支。

大部分国产浏览器最新版都采用Blink内核。二次开发

（5） Presto(Opera)
Presto（已经废弃） 是挪威产浏览器 opera 的 “前任” 内核，为何说是 “前任”，因为最新的 opera 浏览器早已将之抛弃从而投入到了谷歌怀抱了。

浏览器 内核 备注
IE Trident IE、Edge
firefox Gecko 可惜这几年已经没落了，打开速度慢、升级频繁。
Safari webkit 现在很多人错误地把 webkit 叫做 chrome内核（即使 chrome内核已经是 blink 了）。
chrome Chromium/Blink 在 Chromium 项目中研发 Blink 渲染引擎（即浏览器核心），内置于 Chrome 浏览器之中。Blink 其实是 WebKit 的分支。大部分国产浏览器最新版都采用Blink内核。二次开发
Opera Presto/blink 现在跟随chrome用blink内核。

*我可以

介绍一下你对浏览器内核的理解？常见的浏览器内核有哪些？

浏览器内核包括两部分，渲染引擎和js引擎。渲染引擎负责读取网页内容，整理讯息，计算网页的显示方式并显示页面，js引擎是解析执行js获取网页的动态效果。 后来 JS 引擎越来越独立，内核就倾向于只指渲染引擎。

IE：Trident
firefox：Gecko、Quantum
chrome、safari：webkit
chrome：blink
Opera：Presto、blink
Microsoft Edge：EdgeHTML、Blink

4. JavaScript可以做什么

JavaScript的用途已经不仅局限于浏览器了，Node.js的出现使得开发人员能够在服务器端编写JavaScript代码，使得JavaScript的应用更加广泛。

5. Javascript的特点（重点）

  • Javascript是一个脚本语言，可跨平台，支持面向对象。
  • 脚本（Script）简单地说就是一条条的文本命令，按照程序流程执行。
    常见的脚本语言：JavaScript、VBScript、Perl、PHP、Python等。
    非脚本语言：C、C++、Java、C#等。
  • 脚本语言与非脚本语言的区别：
    非脚本语言一般需要编译、链接，生成独立的可执行文件后才能运行。
    脚本语言依赖于解释器，只在被调用时自动进行解释或编译。
  • 几乎所有的浏览器，包括手机等各类移动设备。
    特点：JavaScript语言不依赖操作系统，仅需要浏览器的支持。

5.1 Javascript的组成（重点）

📝第一天 每日总结(JS简介) - 图7

5.2 ECMAScript - JavaScript的核心

ECMA 欧洲计算机制造联合会
网景：JavaScript
微软：JScript
定义了JavaScript的语法规范

JavaScript的核心，描述了语言的基本语法和数据类型，ECMAScript是一套标准，定义了一种语言的标准，与具体实现无关。

5.3 DOM(Document Object Model) - 文档对象模型

一套操作页面元素的API(API（Application Programming Interface，应用程序接口）)
DOM可以把HTML看做是文档树，通过DOM提供的API可以对树上的节点进行操作。

5.4 BOM(Browser ObjectModel) - 浏览器对象模型

一套操作浏览器功能的API（接口-类库-方法）,通过BOM可以操作浏览器窗口，比如：弹出框、控制浏览器跳转、获取分辨率等。

6. 服务端-客户端理解

fuwukehu.png

  • 服务端是为客户端服务的，服务的内容诸如向客户端提供资源，保存客户端数据。是实现游戏特色化的重要途径，也是最直接可以通过游戏表现出来的技术，比如你要修改某个NPC的参数，重加载后，在游戏内立刻体现出来。
  • 客户端（Client）或称为用户端，是指与服务器相对应，为客户提供本地服务的程序。除了一些只在本地运行的应用程序之外，一般安装在普通的客户机上，需要与服务端互相配合运行。因特网发展以后，较常用的用户端包括了如万维网使用的网页浏览器，收寄电子邮件时的电子邮件客户端，以及即时通讯的客户端软件等。对于这一类应用程序，需要网络中有相应的服务器和服务程序来提供相应的服务，如数据库服务，电子邮件服务等等，这样在客户机和服务器端，需要建立特定的通信连接，来保证应用程序的正常运行。

7. 使用JavaScript（重点）

7.1 行内代码

  • 使用 javascript: 前缀构建执行 JavaScript 代码的 URL。
<a href="javascript:alert('Hello JavaScript')">点我</a>

所有可以设置 URL 的地方都可以使用这种以 javascript: 作为前缀的 URL，当用户触发该
URL 时，javascript: 之后的 JS 代码就会获得执行。

  • 将 JS 代码写到元素的事件属性值中
<div onclick="window.alert('Hello JavaScript!')"></div>

这两种方式只适用于代码量比较少的时候，如果代码比较多，建议使用内部代码或写到单独的
JS 文件中。

7.2 内部代码（内嵌式）

如果页面需要中包含大量的 JavaScript 代码，则建议将这些JavaScript脚本放在