下定决心还是再学一遍JS等前端知识

• 前端技术
  • HTML：简单易学，掌握常用的标签即可
  • CSS：CSS属性规则较多，多做练习和项目
  • JavaScript：上手容易，但是精通很难 学会它只需要几分钟，掌握它需要很多年

1.1 认识编程语言​

1.1.1 编程语言定义​

• 计算机语言

  • HTML是一种标记语言，CSS是一种样式语言，属于计算机语言
  • JS adds life to a web page!

• JavaScript准确的说一门编程语言

  • 编程语言(英语:programming language)，是用来定义计算机程序的形式语言。它是一种被标准化的交流技巧用来向计算机发出指令，一种能够让程序员准确地定义计算机所需要使用数据的计算机语言，并精确地定义在不同情况下所应当采取的行动。

• 编程语言具备的特点

  • 数据和数据结构
  • 指令以及流程控制
  • 引用机制和重用机制
  • 设计哲学

1.1.2 常见的编程语言​

• 比如LISP，现在仍然非常有用

  • 《黑客与画家》，人工智能

• 早期的语言，更接近机器的思维方式

• 近代更接近于人类的思维方式

1.2 编程语言发展历史​

1.2.1 阶段一：机器语言​

• 计算机的存储单元只有0和1两种状态，因此一串代码要让计算机“读懂”，这串代码只能由数字0和1组成。

• 像这种由数字0和1按照一定的规律组成的代码就叫机器码，也叫二进制编码

• -定长度的机器码组成了机器指令，用这些机器指令所编写的程序就称为机器语言

• 优点

  • 代码能被计算机直接识别，不需要经过编译解析直接对硬件产生作用
  • 程序的执行效率非常高

• 缺点

  • 程序全是些0和1的指令代码，可读性差，还容易出错
  • 不易编写(目前没有人这样开发);

1.2.2 阶段二：汇编语言​

• 为了解决机器语言的缺陷，人们发明了另外一种语言--汇编语言,

• 这种语言用符号来代替冗长的、难以记忆的0、1代码,(mov/push指令，经过汇编器，汇编代码再进一步转成0101)

• 优点

  • 像机器语言一样，可以直接访问、控制计算机的各种硬件设备
  • 占用内存少，执行速度快;

• 缺点

  • 第一，不同的机器有不同的汇编语言语法和编译器，代码缺乏可移植性 也就是说，一个程序只能在一种机器上运行，换到其他机器上可能就不能运行;
  • 第二，符号非常多、难记 即使是完成简单的功能也需要大量的汇编语言代码，很容易产生BUG，难于调试，

• 应用场景

  • 操作系统内核，驱动程序，单片机程序

1.2.3 阶段三：高级语言​

• 好的编程语言应该是什么?自然语言

• 而高级语言,就是接近自然语言,更符合人类的思维方式

• 跟和人交流的方式很相似,但是大多数编程语言都是国外发明的,因为都是接近于英文的交流方式

• 优点

  • 简单、易用、易于理解，语法和结构类似于普通英文
  • 远离对硬件的直接操作，使得一般人经过学习之后都可以编程，而不用熟悉硬件知识，
  • -个程序还可以在不同的机器上运行，具有可移植性;

• 缺点

  • 程序不能直接被计算机识别需要经编译器翻译成二进制指令后，才能运行到计算机上，
  • 种类繁多:JavaScript、c语言、C++、C#、Java、Objective-C、Python等,

1.3 JavaScript的历史​

1.3.1 认识JavaScript​

• 维基百科对JavaScript的定义:

  • JavaScript(通常缩写为JS)是一种高级的、解释型的编程语言
  • JavaScript是一门基于原型、头等函数的语言，是一门多范式的语言，它支持面向对象程序设计，指令式编程，以及函数式编程;

• 上面的定义中,我们会发现很多关键词:

  • 解释型语言?原型?头等函数?多范式?面向对象程序设计？指令式编程？函数式编程?
  • 这些改变往挂会让人不知所云，需要我们完全掌握JavaScript再来回头看，每一个词语描述的都非常准确;

• 现在只需要知道，通俗的说法:

  • JavaScript是一门高级编程语言,是前端开发的重要组成部分!

• HTML和CSS也是前端开发的重要组成部分，而JavaScript是前端开发的灵魂

1.3.2 JavaScript的起源​

• 1994年，网景公司(Netscape)发布了Navigator浏览器0.9版口

  • 这是历史上第一个比较成熟的网络浏览器，轰动一时。
  • 但是，这个版本的浏览器只能用来浏览，不具备与访问者互动的能力。
  • 网景公司急需一种网页脚本语言，使得浏览器可以与网页互动，

• 网景公司当时想要选择一种语言来嵌入到浏览器中:

  • 采用现有的语言，比如Perl、Python、Tel、Scheme等等,允许它们直接嵌入网页;
  • 1995年网景公司招募了程序员Brendan Eich，希望将Scheme语言作为网页脚本语言的可能性;

• 就在这时，发生了另外一件大事:1995年Sun公司将0ak语改名为Java，正式向市场推出;

  • Java推出之后立马在市场上引起了轰动，Java当初有一个口号:"write once run anywhere"
  • 网景公司动了心，决定与Sun公司结成联盟，希望将Java嵌入到网页中来运行;
  • Brendan Eich本人非常热衷于Scheme，但是管理层那个时候有点倾向于Java，希望可以简化Java来适应网页脚本的需求

• 但是Brendan Eich对此并不感兴趣，他用10天时间设计出来了JavaScript;

  • 最初这门语言的名字是Mocha(摩卡)
  • 在Navigator2.0 beta版本更名为LiveScript,
  • 在Navigator2.0 beta 3版本正式重命名为JavaScript，当时是为了给这门语言搭上Java这个热词;

• 当然10天设计出来语言足够说明Brendan Eich是天才，但是这门语言当时更像是一个多种语言的大杂烩:

  • 借鉴c语言的基本语法;
  • 借鉴Java语言的数据类型和内存管理;
  • 借鉴Scheme语言，将函数提升到"第一等公民"(first class)的地位;
  • 借鉴Self语言，使用基于原型(prototype)的继承机制。

• Brendan Eich曾经这样描述过JavaScript:

  • 与其说我爱Javascript，不如说我恨它，它是C语言和Self语言一夜情的产物口
  • 十八世纪英国文学家约翰逊博士说得好:"它的优秀之处并非原创，它的原创之处并不优秀 (the part that is good is not original, and the part that is original is not good.)

• 微软公司于1995年首次推出InternetExplorer， 从而引发了与Netscape的浏览器大战。

  • 微软对Netscape Navigator解释器进行了逆向工程,以与处于市场领导地位的网景产品同台竞争; 创建寸JScript，
  • 这个时候对于开发者来说是一场噩耗:因为需要针对不同的浏览器进行不同的适配; 1996年11月，网景正式向ECMA(欧洲计算机制造商协会)提交语言标准。
  • 1997年6月，ECMA以JavaScript语言为基础制定了ECMAScript标准规范ECMA-262口 ECMA-262是一份标准，定义了ECMAScript;
  • JavaScript成为了ECMAScript最著名的实现之除此之外，ActionScript和JScript也都是ECMAScript规范的实现语言;

1.4 JavaScript的分类​

1.4.1 JavaScript的组成​

• ECMAScript是JavaScript的标准，描述了该语言的语法和基本对象。

  • JavaScript是ECMAScript的语言层面的实现;
  • 因为除了语言规范之外，JavaScript还需要对页面和浏览器进行各种操作
  • 除了基本实现之外，还包括DOM操作和BOM操作;

• JavaScript的组成

  • ECMAScript 定义语言规范
  • DOM 用于操作文档的API
  • BOM 用于操作浏览器的API

• 目前我们会针对性的学习ECMAScript，也就是语言层面的内容，特别是ES5之前的语法

1.5 JavaScript运行引擎​

1.5.1 JavaScript由谁来运行​

• 我们经常会说:不同的浏览器有不同的内核组成

  • Gecko:早期被Netscape和Mozila Firefox浏览器浏览器使用
  • Trident:微软开发，被IE4~IE11浏览器使用，但是Edge浏览器已经转向Blink
  • Webkit:苹果基于KHTML开发、开源的，用于Safari，Google Chrome之前也在使用;
  • Blink:是Webkit的一个分支，Google开发，目前应用于Google Chrome、Edge、Opera等;
  • 等等.

• 事实上，我们经常说的浏览器内核指的是浏览器的排版引擎:

  • 排版引擎(layout engine)，也称为浏览器引擎(browserengine)
  • 页面渲染引擎(rendering engine)或样版引擎

• JavaScript代码由谁来执行？

  • JavaScript引擎

1.5.2 认识JavaScript引擎​

• 为什么需要JavaScript引擎呢?
  • 我们前面说过，高级的编程语言都是需要转成最终的机器指令来执行的;
  • 事实上我们编写的JavaScript无论你交给浏览器或者Node执行，最后都是需要被CPU执行的;
  • 但是CPU只认识自己的指令集，实际上是机器语言，才能被CPU所执行，
  • 所以我们需要JavaScript引擎帮助我们将JavaScript代码翻译成CPU指令来执行;

比较常见的JavaScript引擎有哪些呢?

• SpiderMonkey:第一款JavaScript引擎，由Brendan Eich开发(也就是JavaScript作者)
• Chakra:微软开发，用于IE浏览器
• JavaScriptCore: WebKit中的JavaScript引擎，Apple公司开发;
  • 手机端比较多，
  • IOS-> UIWebView
  • 小程序
• V8:Google开发的强大JavaScript引擎，也帮助Chrome从众多浏览器中脱颖而出;
• 等等...

1.5.3 浏览器内核和JS引擎的关系​

• 这里我们先以WebKit为例，WebKit事实上由两部分组成的:

  • WebCore:负责HTML解析、布局、渲染等等相关的工作
  • JavaScriptCore:解析、执行JavaScript代码:

• 小程序中也是这样的划分

  • 在小程序中编写的JavaScript代码就是被JSCore执行的;

1.6 JavaScript应用场景​

1.6.1 著名的Atwood定律​

• Stack Overflow的创立者之一的 Jeff Atwood 在2007年提出了著名的 Atwood定律:
  • Any application that can be written in JavaScript, will eventually be written in JavaScript.
  • 任何可以使用JavaScript来实现的应用都最终都会使用JavaScript实现

1.6.2 JS应用越来越广泛​

2. JavaScript基础

3. 变量与数据类型

3.1 认识JavaScript变量​

3.2 变量的定义，规范等​

3.3 数据类型和typeof​

3.4 常见的数据类型​

3.5 数据类型的转换​

下定决心还是再学一遍JS等前端知识

1. JavaScript编写方式​

1.1 编写在HTML内部​

<a href="#" onclick="alert('百度一下')">百度-下</a>

<a href="alert('百度一下')">百度-下</a>

1.2 编写在Script元素内​

<a class="google" href="#">Google一下</a>

<script>
var google = document.querySelector(".google");
google.onclick = function() {
  alert("google");
}
</script>

1.3 独立的js文件​

• 通过script的src属性来引入外部文件
• bing.js

var bing = document.querySelector(".bing");
bing.onclick = function() {
  alert("bing");
}

• .html

<script src="./bing.js"></script>

2. noscript元素的使用​

<noscript>
您的浏览器不支持JavaScript
</noscript>

3. JavaScript注意事项​

注意一: script元素不能写成单标签 口在外联式引用js文件时，script标签中不可以写JavaScript代码，并且script标签不能写成单标签 口即不能写成; 注意二: 省略type属性 口 在以前的代码中，

<script>标签中会使用 type="text/javascript"口 现在可不写这个代码了，因为JavaScript 是所有现代浏览器以及 HTML5 中的默认脚本语言</script>

注意三: 加载顺序 口 作为HTML文档内容的一部分，JavaScript默认遵循HTML文档的加载顺序，即自上而下的加载顺序;口 推荐将JavaScript代码和编写位置放在body子元素的最后一行 注意四: JavaScript代码严格区分大小写 口 HTML元素和CSS属性不区分大小写，但是在JavaScript中严格区分大小写后续补充:script元素还有defer、async属性，我们后续再详细讲解

4. JavaScript交互方式​

4.1 JavaScript交互方式​

• JavaScript有如下和用户交互的手段

• 最常用的是console.log

• 交互方法

  • alert
    • 接受一个参数，弹窗查看
  • console.log
    • 接受多个参数，在浏览器控制台查看
  • document.write
    • 接受多个字符串，在浏览器页面查看
  • prompt
    • 接受一个参数，在浏览器接受用户输入

4.2 Chrome的调试工具​

• 使用Console来查看JavaScript的一些内容

• 补充

  • 1.如果在代码中出现了错误，那么可以在console中显示错误
  • 2.console中有个>标志，它表示控制台的命令行
    • 在命令行中我们可以直接编写JavaScript代码，按下enter会执行代码;
    • 如果希望编写多行代码，可以按下shift+enter来进行换行编写;
  • 3.在后续我们还会学习如何通过debug方式来调试、查看代码的执行流程

5. JavaScript语句和分号​

• 语句是向浏览器发出的指令，通常表达一个操作或者行为(Action)
  • 语句英文是Statements;
  • 比如我们前面编写的每一行代码都是一个语句，用于告知浏览器一条执行的命令

alert("Hello World");

• 通常每条语句的后面我们会添加一个分号，表示语句的结束:

  • 分号的英文是semicolon
  • 当存在换行符(line break)时，在大多数情况下可以省略分号
  • JavaScript 将换行符理解成"隐式"的分号
  • 这也被称之为自动插入分号(an automatic semicolon)

• 推荐

  • 前期在对Javascript语法不熟悉的情况推荐添加分号
  • 后期对JavaScript语法熟练的情况下，任意!

6. JavaScript注释方式​

• 单行注释

  • // xxx

• 多行注释

  /*
  ...
  */
  

• 文档注释

  • 使用插件: jsDoc

  /**

  • 和某人打招呼的函数
  • @param {string} name 姓名
  • @param {number} age 年龄 function sayHello(name, age)

  sayHello("jie", 28) */

7. VSCode 插件和配置​

• 推荐一个VSCode的插件:(个人经常使用的)
  • ES7+ React/Redux/React-Native snippets
  • 这个插件是在react开发中会使用到的，但是我经常用到它里面的打印语句，

另外再推荐一个插件:

• Bracket Pair Colorizer2，但是该插件已经不再推荐使用了

  • 因为VSCode已经内置了该功能，我们可以直接通过VSCode的配置来达到插件的效果;
  • 如何配置呢？
    • 右上角打开设置 -> 出现配置文件,放到最下面的位置即可
    • 文件 -> 首选项 -> 设置 ->

  "editor.bracketPairColorization.enabled": true,
  editor.guides.bracketPairs":"active"
  
  

• 比如敲console.log(),

  • 可以直接打log，会出来console.log()
  • 另一种方式是，敲clg,使用的插件是react插件

8. 变量与数据类型​

8.1 认识JavaScript变量​

8.1.1 程序中的变量​

• 在我们平时开发中，使用最多的并不是固定的数据，而是会变换的数据:
  • 比如购物车商品的数量、价格的计算等等
  • 比如一首歌曲播放的时间、进度条、歌词的展示等等
  • 比如微信聊天中消息条数、时间、语音的长度、头像、名称等等;
  • 比如游戏中技能的冷却时间、血量、蓝量、buff时间、金币的数量等等;

8.1.2 变化数据的记录-变量​

• 如果我们希望记录某一个之后会变量的数据，在JavaScript中我们可以定义一个 变量

  • 一个变量，就是一个用于存放数值的容器
  • 这个数值可能是一个用于计算的数字，或者是一个句子中的字符串，或者其他任意的数据
  • 变量的独特之处在于它存放的数值是可以改变的；

• 我们可以把变量想象成一个盒子，盒子里面装着我们的数据，我们需要给盒子进行一个特性的名称。

  • 例如，变量 message 可以被想象成一个标有"message"的盒子，盒子里面的值为"Hello!"
  • 并且，这个盒子的值，我们想改变多少次，就可以改变多少次;

8.2 变量的定义，规范等​

8.2.1 变量的命名格式​

• 在JavaScript中如何命名一个变量呢?包含两部分:

  • 变量的声明:在JavaScript中声明一个变量使用var关键字(variable单词的缩写)(后续学习ES6还有let、const声明方式)
  • 变量的赋值:使用=给变量进行赋值;

• 也可以分开操作

  var name;
  name = "Jie";
  

• 同时声明多个变量

  var name, age, height;
  name = "Jie";
  age = 18;
  height = 188;
  

8.2.2 变量的命名规范​

• 变量命名规则:必须遵守 1.第一个字符必须是一个字母、下划线(_)或一个美元符号($) 2.其他字符可以是字母、下划线、美元符号或数字 3.不能使用关键字和保留字命名

• 什么是关键字，什么是保留字?

  • https://developer.mozilla.org/zh-CN/docs/web/javascript/reference/lexical_grammar

变量命名规范:建议遵守

• 多个单词使用驼峰标识
• 赋值 =两边都加上一个空格
• 一条语句结束后加上分号;也有很多人的习惯是不加!
• 变量应该做到见名知意

8.2.3 练习​

• 定义两个变量保存两个数字，对两个变量中的数字进行交换
  • 方法一：借助第三个变量
  • 方法二：不借助第三个变量

    num1 = num1 + num2
    num2 = num1 - num2
    num1 = num1 - num2
    

8.2.3 注意​

• 如果一个变量没被声明，就直接使用，会报错

• 如果一个变量声明了，但是没被赋值，默认值是 undefined

• 如果没有使用var声明变量也可以，但是不推荐，（事实上会被添加到window对象上）

8.3 数据类型和typeof​

8.3.1 JavaScript的数据类型​

• JavaScript 中的值都具有特定的类型。

  • 例如，字符串或数字。
  • 我们可以将值赋值给一个变量，那么这个变量就具备了特定的类型
  • 一个变量可以在前一刻是个字符串，下一刻就存储一个数字,
  • 允许这种操作的编程语言，例如JavaScript，被称为"动态类型"(dynamically typed)的编程语言;

• 在JavaScript 中有8种基本的数据类型(7 种原始类型和1种复杂类型)

  • Number
  • String
  • Boolean
  • Undefined
  • Null
  • Object
  • Bigint(后续了解)
  • Symbol(后续了解)

8.3.2 typeof操作符​

• 因为 ECMAScript 的类型系统是松散的，所以需要一种手段来确定任意变量的数据类型

  • typeof 操作符就是为此而生的。

• 对一个值使用 typeof 操作符会返回下列字符串之一:

  • "undefined"表示值未定义;
  • "boolean"表示值为布尔值;
  • "string"表示值为字符串;
  • "number"表示值为数值;
  • "object"表示值为对象(而不是函数)或 null;
  • "function"表示值为函数;
  • "symbol"表示值为符号

• typeof()的用法:

  • 你可能还会遇到另一种语法:typeof(x)，它与 typeof x 相同
    • 类似 var result = (2+3)*4;, ()是将 2+3作为一个整体
  • typeof是一个操作符，并非是一个函数，()只是将后续的内容当做一个整体而已

8.4 常见的数据类型​

8.5 数据类型的转换​