js基础day01小结
第02阶段.前端基本功.前端基础.入门语法
计算机知识补充
学习目标
- 理解
- 简单了解计算机组成
- 认识计算机内存
一. 核心内容
1. 计算机组成
1.1 软件（程序）
- 系统软件：Windows、Linux、macOS
- 应用软件：浏览器(Chrome/IE/Firefox)、QQ、VSCode、Sublime、Word
1.2 硬件
- 1.2.1 输入设备：
- 鼠标、键盘、手写板、摄像头等
- 1.2.2 输出设备：
- 显示器、打印机、投影仪等
- 1.23 三大件：
- CPU、内存、硬盘，而 主板 是起到连接主要硬件的作用
- 主板：起到连接各个硬件桥梁作用
- CPU（中央处理器）
- 负责处理数据与运算
- 负责通过几十个针脚连接控制主板上不同的硬件
- 内存条
- 临时存放数据，断电后不能保存数据
- 读写速度很快
- 空间小（单价高） 4g 8g 16g
- 硬盘
- 永久储存数据，断电后依然保存数据
- 读写速度较慢
- 空间大（单价低)
- CPU、内存、硬盘，而 主板 是起到连接主要硬件的作用
1.3程序运行介绍
-
关于二进制简述
简单来说 用 0 和 1 来表示数据。具体的说，是用 0 和 1 的各种不同组合 代表 不同的数据，如
0=00000000 1=00000001 2=00000010 3=00000011 4=00000100 5=00000101
6=00000110 7=00000111 8=00001000 9=00001001 10=00001010
- 关于数据储存
- 所有数据，包含文件、图片等最终都是以二进制数据（0 和 1）的方式存放在硬盘中
- 所有程序，包括操作系统，本质都是各种数据，也以二进制数据的方式存放在 硬盘里。平时我们所说的安装软件，其实就是把程序文件复制到硬盘中
- 硬盘、内存都是保存的 二进制数据
- 关于数据存储单位（bit < byte < kb < GB < TB<…）
- 位：1bit 可以保存一个 0 或者 1
- 字节：1byte = 8bit
- 千字节：1kb = 1024byte
- 兆：1mb = 1024kb
- 1GB = 1024mb
- 1TB = 1024GB
- 关于运行
- 打开某个程序时，先从硬盘中把程序的代码加载到内存中
- CPU执行内存中的代码
- 注意：之所以要内存 的一个 重要原因，是因为 cpu 运行太快了，如果只从硬盘各种读数据，会浪费cpu性能。所以，才使用 存取速度更快 的 内存 来 保存 运行时 的数据。
2 硬件真实模样
- 主板
- CPU 内存条 硬盘
3 为什么内存读写比硬盘快?
- 硬盘是有机械结构的，磁头要运动到相应的位置，转片还在转动，然后读取磁信号。
- 内存是没有机械结构的，是电，瞬间到达。电的到达速度要比磁头的运动快得多，比盘算转动也快得多。所以，有机械结构的磁头的读取速度是不能和无机械结构电的速度相比的。
- 补充：固态硬盘，硬盘一般分为机械硬盘和固态硬盘。固态硬盘使用的是闪存，比机械硬盘的磁盘要快得多，但也不能和真正的RAM去比速度。
第02阶段.前端基本功.前端基础.入门语法
VSCode开发工具
学习目标
- 应用
- 使用 VSCode 编辑单个文件
- 使用 VSCode 编辑文件夹内文件，并新建 文件和文件夹
- 能熟练使用扩展中心进行插件安装
- 使用基本Emmet语法创建 HTML 标签
- 使用常用快捷键
一. 核心内容
1. VSCode介绍
-
Visual Studio Code（以下简称vscode）是一个微软提供的轻量且强大的 代码编辑器
-
插件安装方便
-
VSCode 安装注意
把 其它 里的 第 1、2、4 个 选中，方便使用时直接 右键通过 VSCode 打开文件夹和文件右键通过 VSCode 打开文件夹和文件
1.1 界面主要区域介绍
左侧导航区 有5个选项，我们前期主要使用 第1个，偶尔使用第5个。（2、3、4 暂时用不到）
1.2 资源管理区使用
-
单个文件编辑
当我们用 VSCode 打开单个文件时，在资源管理区 会在打开的编辑器区 显示文件 -
文件夹文件编辑
打开文件夹 + 新建文件 和 文件夹 + 关闭文件夹
1.打开文件夹方式
1.1通过
打开文件夹按钮 来选择文件夹
1.2通过 在
文件夹上 右键鼠标Open With Code
2.可以通过 快捷按钮 直接在 打开的文件夹中 新建 文件 和 子文件夹
3.关闭文件夹
菜单栏 文件 --> 关闭文件夹
1.3 扩展(插件中心)使用
- VSCode 提供了众多插件，让我们可以更高效便捷的工作。这些插件 有各种官方提供的，也有用户自己编写的
-
现在需要使用的插件： Color Highlight，Emmet，open in browser
-
Color Highlight 一款用来在 样式表 代码 中直接显示 颜色块 的插件
-
Emmet 一款 VSCode内置 的快速 生成代码 的插件（详细语法参见扩展内容1），如：
**1.**快速生成 HTML 页面结构：使用
!或者html5+ tab键**2.**快速生成 div：使用
标签名+ tab键**3.**快速生成 3 个 li 标签
- open in browser 一款用来直接调用默认浏览器打开 文件 的插件
2. 常见操作
2.1 放大缩小字体
- 快捷键
放大Ctrl+=
缩小Ctrl+-
2.2 注释
- 快捷键
切换注释行Ctrl+/
切换块注释Alt+Shift+A
二.扩展内容
1. Emmet 语法规则
-
介绍
Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的一个工具。在前端开发的过程中，一大部分的工作是写 HTML、CSS 代码。特别是手动编写 HTML 代码的时候，效率会特别低下，因为需要敲打很多尖括号，而且很多标签都需要闭合标签等。于是，就有了 Emmet，它可以极大的提高代码编写的效率，它提供了一种非常简练的语法规则，然后立刻生成对应的 HTML 结构或者 CSS 代码，同时还有多种实用的功能帮助进行前端开发。VsCode内置了Emmet语法,在后缀为.html/.css中输入缩写后按
Tab键即会自动生成相应代码 -
语法规则
E 代表HTML标签。 E#id 代表id属性。 E.class 代表class属性。 E[attr=foo] 代表某一个特定属性。 E{foo} 代表标签包含的内容是foo。 E>N 代表N是E的子元素。 E+N 代表N是E的同级元素。 E^N 代表N是E的上级元素。
2. Emmet 详细语法(常用)
2.1 元素(Elements)
可以使用元素的名称，如div或p来生成HTML标签。
div => <div> div>
foo => <foo> foo>
html:5 => 将生成html5标准的包含body为空基本dom
html:xt => 生成XHTML过渡文档类型,DOCTYPE为XHTML
html:4s => 生成HTML4严格文档类型,DOCTYPE为HTML 4.01
a:mail => <a href="mailto:">a>
a:link => <a href="http://">a>
base => <base href="">
br => <br>
link => <link rel="stylesheet" href="">
script:src => <script src="">script>
form:get => <form action="" method="get">form>
label => <label for="">label>
input => <input type="text">
inp => <input type="text" name="" id="">
input:hidden => <input type="hidden" name=""> input:h亦可
input:email => <input type="email" name="" id="">
input:password => <input type="password" name="" id="">
input:checkbox => <input type="checkbox" name="" id="">
input:radio => <input type="radio" name="" id="">
select => <select name="" id="">select>
option => <option value="">option>
bq => <blockquote>blockquote>
btn => <button>button>
btn:s => <button type="submit">button>
btn:r => <button type="reset">button>
2.2 文本操作符(Text)
div{这是一段文本} => <div>这是一段文本div>
a{点我点我} => <a href="">点我点我a>
2.3 属性操作符(Attribute)
属性运算符用于修改输出元素的属性，如：id 和 class ( elem#id and elem.class )
div.test => <div class="test">div>
div#pageId => <div id="pageId">div>
2.4 嵌套操作符(Nesting)
嵌套操作符用于将缩写元素放置在生成的树中，是否应放置在上下文元素的内部或附近
- 子级：通过
>字符标识元素生成嵌套子级元素，可以配合元素属性进行连写，如：
div#pageId>ul>li
=>
<div id="pageId">
<ul>
<li>li>
ul>
div>
- 同级：通过
+字符表示生成兄弟级元素，如：
div#pageId+div.child
=>
<div id="pageId">div>
<div class="child">div>
- 父级：
^用于生成父级元素的同级元素，从这个^字符所在位置开始，查找左侧最近的元素的父级元素并生成其兄弟级元素，如：
div>p.parent>span.child{有趣的代码}^ul.brother>li
=>
<div>
<p class="parent">
<span class="child">span>
p>
<ul class="brother">
<li>li>
ul>
div>
2.5 乘法(Multiplication)
- 使用 N 即可自动生成重复项，N是一个正整数。
ul>li*3
=>
<ul>
<li>li>
<li>li>
<li>li>
ul>
2.6 自动计数(numbering)
- 生成重复项时增加一个序号，只需要加上
$符号即可。
ul>li.item${$}*3
<ul>
<li class="item1">1li>
<li class="item2">2li>
<li class="item3">3li>
ul>
注意：如果生成 两位数 则使用两个连续的 $$，更多位数以此类推~~
2.7 Emmet生成CSS语法
- Emmet 不仅能生成 HTML，还可以生成 CSS
参考：【emmet系列之CSS语法】
3. VSCode 常用快捷键
上下移动一行：Alt + Up / Alt + Down
向下复制行：Shift + Alt + Down
代码行缩进：tab / shift tab
列选择：ALT＋左键单击
转到行首/行尾：Home / End
转到文件头/文件尾：Ctrl + Home / Ctrl + End
html代码格式化：Shift＋Alt + F
文件切换：Ctrl + Tab
文件/文件夹重命名：F2
转定义：F12 / Ctrl + click
预览定义：Alt + F12
查看引用：Shift + F12
命令面板：F1
-
可以修改快捷键：菜单 文件 --> 首选项 --> 键盘快捷方式
小技巧：可以通过 这个方式 了解所有 快捷方式
三.深度阅读
《VsCode中使用Emmet神器快速编写HTML代码》
《vscode: Visual Studio Code 常用快捷键》
第02阶段.前端基本功.前端基础.入门语法
认知 JavaScript
学习目标
- 理解
- 能说出 JavaScript 是什么
- 能说出 HTML、CSS、JS 的关系
- 能说出 JS 基本运行原理
- 能说出JS有那三部分组成
- 简单了解js 的发展历史
一.核心内容
1. JavaScript 是什么
概念：
- JavaScript 是世界上最流行的语言。
- JavaScript是一种运行在客户端*** 的脚本语言* script
- 脚本语言： 不需要编译，-运行过程中由js解释器(js引擎）逐行来进行解释 并执行
- 现在也可以基于Node.js技术进行服务器端编程。
1.1 为什么要学 JavaScript
演示：
- 页面各类动态广告
- 表单动态校验（密码强度检测） （也是我们js 产生最初的目的）
- 各类动画效果（百度地图）
- 在线游戏（偷菜、三国志）
1.2 HTML/CSS/JS 关系####
-
HTML/CSS 是 标记语言–描述类语言
HTML 决定网页结构和内容( 决定看到什么 )，相当于人的身体
-
CSS 决定网页呈现给用户的模样( 决定好不好看 )，相当于给人穿衣服、化妆
-
JavaScript 是 脚本语言–编程类语言
实现业务逻辑和页面控制( 决定功能 )，相当于人的各种动作
2.浏览器执行JS简介
JavaScript是一种运行在客户端*** 的脚本语言*
浏览器内核分成两部分渲染引擎和js引擎，由于js引擎越来越独立，内核就倾向于只指渲染引擎
渲染引擎：用来解析HTML与CSS，俗称内核。比如 chrome 浏览器的 blink
JS引擎 : 我们成为js 解释器 用来 读取网页中的JavaScript代码，对其处理后运行 比较经典 就是 chrome 浏览器的 V8
总结：
- 浏览器本身并不会执行JS代码，而是通过内置 JavaScript引擎(解释器) 来执行JS代码,并且转换为机器语言
- JS引擎执行代码是逐行解释每一句源码，所以 JavaScript语言 归为 脚本语言，逐行解释执行。
3. JavaScript 的组成（重要）
-
ECMAScript （ECMA 欧洲计算机制造联合会） 是 javascript 的核心 也是我们后面学习的重点
ECMAScript是一套JS语言设计标准，描述 JavaScript 语言基本语法和数据类型，以及其它实现标准。
简单理解 ECMAScript是JavaScript的语言规范，JavaScript是ECMAScript的实现和扩展。
-
BOM - 浏览器对象模型
一套提供给程序员 操作浏览器功能 的API
alert()
通过BOM可以操作浏览器窗口，比如：弹出框、控制浏览器跳转、获取分辨率等
-
DOM - 文档对象模型
一套提供给程序员 操作页面元素 的API
通过DOM提供的API可以对页面上的各种元素进行操作（大小、位置、颜色等）
3.扩展内容 @
3.1 JS 历史(了解)
布兰登·艾奇（Brendan Eich，1961年～）
Netscape在最初将其脚本语言命名为LiveScript，后来Netscape在与Sun合作之后将其改名为JavaScript。
Java 服务器端的编程语言
JavaScript 运行在客户端(浏览器)的编程语言
3.2 JavaScript 应用场景(了解)
JavaScript 发展到现在几乎无所不能。
- 网页特效
- 服务端开发(Node.js)
- 命令行工具(Node.js)
- 桌面程序(Electron)
- App(Cordova)
- 控制硬件-物联网(Ruff)
- 游戏开发(cocos2d-js)
3.3 解释型语言 和 编译型语言
计算机不能直接理解任何除机器语言以外的语言，所以必须要把程序员所写的程序语言翻译成机器语言，计算机才能执行程序。程序语言翻译成机器语言的工具，被称为编译器
编译器翻译的方式有两种：一个是编译，另外一个是解释。两种方式之间的区别在于翻译时间点的不同。
编译器是在代码执行之前进行编译，生成中间代码文件。
解释器是在运行时进行及时解释，并立即执行。(当编译器以解释方式运行的时候，也称之为解释器)
4.深度阅读 @
《前端必读：浏览器内部工作原理》
《漫谈JS引擎的运行机制 你应该知道什么》
第02阶段.前端基本功.前端基础.入门语法
基础语法
学习目标
- 理解
- 掌握 JS 三种书写位置
- 能用自己的话解释变量与数据类型概念
- 能说出常见的数据类型
- 能说出常见数据类型的转换
- 算数运算符和自增自减
- 应用
- 能编写输入输出代码
- 能编写“问好案例”
- 能编写简单加法器
一.核心内容
如何学好js
- 首先学习基础语法(书写位置，书写格式，命名规范，语言特性，变量，运算符，表达式，分支语句，循环语句等)
- 再学习高级的语法结构，常用API，面向对象的思维等
- 第三方API
- 学习完以上的或是部分内容再根据实际业务逻辑需求，书写可执行的代码，交给计算机去执行
1. JS代码书写位置
联想：CSS 样式的书写方式？
JS的书写位置如样式表一样有3种书写位置，分别为 行内、内部、外部
1.1 行内 JS
- 可以将 单行或少量JS代码 写在HTML标签的事件属性（以
on开头的属性），如：onclick - 注意单双引号的使用：在HTML中我们推荐适应双引号
<input type="button" value="点我试试" onclick="alert('Hello World')" />
缺点：
- 可读性差， 在html中编写JS大量代码时，不方便阅读；
- 引号易错，引号多层嵌套匹配时，非常容易弄混；
1.2 内嵌 JS
- 可以将 多行JS代码 写到