第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
  - 硬盘
    - 永久储存数据，断电后依然保存数据
    - 读写速度较慢
    - 空间大（单价低)

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">1</li><li class="item2">2</li><li class="item3">3</li>
</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 + Endhtml代码格式化：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代码 写到 <script> 标签中

<head><script>alert('Hello  World~!');</script>
</head>

内嵌 JS 是学习是常用的方式

1.3 外部 JS 文件

利于HTML页面代码结构化，把大段 JS代码独立到 HTML页面之外。既美观，也方便文件级别的复用：

从而让不同的 HTML页面可以引入同一个 JS文件。

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

**注意：**引用外部 js 文件的 script 标签中不可以写代码

1.4 小结

三种JS书写位置：行内、内嵌标签 ( 学习期间推荐 )、外部引入 ( 工作后看情况 )

前置讲解：alert() 方法，console.log()方法，prompt()方法 –

2.变量

2.1 为什么要用变量

有些数据，我们可以把它存储起来，方便以后使用。

2.2 什么是变量？

通俗：变量就是一个装东西的盒子
概念：变量是用于存放数据的容器，我们通过变量名 获取数据，甚至数据可以修改
本质：变量是程序在内存中申请的一块用来存放数据的空间

内存原理图：

仓库有了，也保存了，我们应该能找到他们，所以，应该找个名称来区别每个存放的小盒子（容器）

2.3 变量的使用

1）变量的使用分为2步

//  1.  声明变量
var  age ; //  声明一个 age 的变量     var 是 一个 JS关键字，用来 声明变量
//  2.  赋值
age  = 10; // 给 age  这个变量赋值为 10     此时的 =  不是数学中的等号

详解
- var 是一个 JS关键字，用来声明变量 ( variable 变量的意思 ) 电脑会自动分配内存空间，不需要我们管。
- age 是程序员定的 变量名，但是我们程序员要通过变量名来访问这个空间。
  
  PS：变量名在代码执行时都换成了变量空间的内存地址
- = 用来把右边的值赋给左边的变量空间中 此处的= 不是数学中的等号此处代表赋值的意思
- 变量值 是程序员保存到变量空间里的值
1、可以是数字、字母、下划线、美元符$ 等组成

2、不可以是数字开头

3、区分大小写

4、建议使用驼峰命名。 myfirstname myFirstName gongZi

2）声明变量，并赋值( 推荐写法 )

语法：var 变量名 = 变量值;

var age = 10;

声明一个变量并赋值，我们也称为变量的初始化。

课堂练习：

有个叫卡卡西的人在旅店登记的时候前台让他填一张表,这张表的里的内容要存到电脑上,有姓名、年龄、邮箱、家庭住址,工资.之后把这些信息显示出来我叫卡卡西，我住在火影村，我今年30了我的邮箱是kakaxi@qq.com，我的工资2000.

2.4 变量内部值的更改

一个变量被重复赋值后它原有的值是会被覆盖，以最后一次赋值的值为准

var  age = 10;
age = 20;
最后的结果就是  20   因为 10 覆盖掉了

2.5 语法扩展

同时声明多个变量

var age, name, sex;  // 等价于   var  age;  var name; vae sex;
age = 10;
name = 'zs';
sex = 2;

同时声明多个变量并赋值

var age = 10, name = 'zs',sex = 2;

**变量使用注意点 **

变量使用注意点
只声明不赋值	var age ; console.log (age); // undefined
不声明不赋值直接使用	console.log(age) ; // 报错
不声明只赋值	age = 10; console.log(age); // 10 不推荐这样写

课堂练习：

利用同时声明多个变量方法，存储名字是pink老师，年龄是18岁, 然后发现pink老师的年龄不是18岁,要把pink老师的年龄修改成81岁,最后把pink老师姓名和年龄输出到控制台上?

2.6 变量命名规则和规范

规则必须遵守的，不遵守的话 JS引擎发现并报错

规则相当于人类社会的法律，犯法就坐牢
- 由字母(A-Za-z)、数字(0-9)、下划线(_)、美元符号( $ )组成，如：var usrAge, num01, _name
- 区分大小写 强调：JS 严格区分大小写 ，var app; 和 var App; 是两个变量
- 不能以数字开头
- 不能是关键字、保留字和代码符号，例如：var、for、while、&
```
// JS 区分大小写，所以当 大小写 不一样时，JS引擎 会认为是两个变量
var age = 1;
var Age = 2;
```
规范建议遵守的，不遵守的话 JS引擎也不会报错

规范相当于人类社会的道德，违反了不会有警察找你，但任何人都可能指责你
- 变量名必须有意义
- 遵守驼峰命名法。首字母小写，后面单词的首字母需要大写。
  
  如：usrName 和 usrPassword 和 xian 和 xiAn

提问：以下哪些变量名不合法

第一组	第二组	第三组
var a	var userName 合法	var theWorld
var 1 不合法	var $name合法	var the world 不合法不能有空格
var age18 合法	var _sex 合法	var the_world 合法
var 18age 不合法	var &sex 不合法	var for 不合法不能是关键字

课堂案例 5分钟
要求：交换两个变量的值 ( 实现思路：使用一个临时变量用来做中间存储 )

2.7 小结

因为我们一些数据需要保存，所以需要变量
变量就是一个容器，用来存放数据的。方便我们以后使用里面的数据。
变量是内存里的一块空间，用来存储数据。
我们使用变量的时候，一定要声明变量。
声明变量本质是去内存申请空间。
声明变量并赋值我们成为变量的初始化
变量名尽量要规范，见名知意。— 驼峰命名法
区分那些变量不合法的
学会交换2个变量。

3.注释

HTML 和 CSS 中我们不需要浏览器显示的我们可以通过注释，那么JS中呢？

3.1 单行注释

用来注释单行文字（快捷键 ctrl + / ）

// 我是一行文字，不想被 JS引擎 执行，所以 注释起来

3.2 多行注释

用来注释多行文字（快捷键 alt + shift + a ）

/*获取用户年龄和姓名并通过提示框显示出来
*/

学会修改为 ctrl + shift + /

vscode – 左下角设置 – 键盘快捷方式 ---- 查找原来的快捷键 — 修改为新的快捷键 — 回车确认。

4. 数据类型简介

4.1 什么是数据类型？

比如名字 “张三” 比如年龄 18 这些数据的类别型号是不一样的。所以我们程序的数据是分不同种类的，不同数据他们存储和使用方式是不一样的。

4.2 变量属于那种数据类型？

在代码运行时，由 JS引擎 根据 = 右边 变量值的数据类型 来判断的

var age = 10; //  这是一个数值型
var areYouOk = '是的'; //这是一个字符型

运行完毕之后，变量就确定了数据类型

我们JavaScript是弱数据类型，变量是没有固定数据类型的，总之，你给变量一个什么值，它就是什么数据类型的变量。

5. 字面量

在源代码中一个固定值的表示法。

通俗点字面量表示如何表达这个值.

数值字面量：8, 9, 10

字符串字面量：‘黑马程序员’, “大前端”

布尔字面量：true，false

字面量都是可以直接使用，但是我们一般都不会直接使用字面量

6. 简单数据类型

JavaScript 中的数据类型分两类：简单数据类型 和 复杂数据类型，我们今天讲常用的简单数据类型

简单数据类型	说明	默认值

Number	数值类型，包含整型值和浮点型值，如 21、0.21	0
Boolean	布尔值类型，如 true 、false，等价于 1 和 0	false
String	字符串类型，如 “张三” 注意咱们js 里面，字符串都带引号	“”
Undefined	var a; 声明了变量a 但是没有给值，此时 a = undefined	undefined
null	typeof 返回为 object

tepeof ''    //  返回值为  string

Number string boolean 既属于基本包装类型又属于简单数据类型所以他们也有类似对象的属性： string.length

6.1 Number 数值类型

JavaScript 只有一种数字类型，既可以用来保存 整数值，也可以保存 小数
数值字面量：数值的固定值的表示法

110 1024 60.5

var usrAge = 21;// 整数
var doubleNum = 21.3747;// 小数

这个小数，我们也成为浮点小数

1）数值的进制

八进制 07 016 0开头 数字范围 0-7

十六进制： 0x 开头，数字序列范围：0_9以及AF

//1.十进制var num = 9;// 进行算数计算时，八进制和十六进制表示的数值最终都将被转换成十进制数值。//2.八进制 数字序列范围：0~7var num1 = 07;   // 对应十进制的7var num2 = 019;  // 对应十进制的19var num3 = 08;   // 对应十进制的8//3.十六进制 数字序列范围：0~9以及A~Fvar num = 0xA;//如果字面值中的数值超出了范围，那么前导零将被忽略，后面的数值将被当作十进制数值解析

2）浮点数的精度问题

浮点数值的最高精度是 17 位小数，但在进行算术计算时其精确度远远不如整数。
注意：了解即可，不用纠结。
注意不要用浮点数进行计算
比如价格： 8.8

var result = 0.1 + 0.2;    // 结果不是 0.3，而是：0.30000000000000004
console.log(0.07 * 100);   // 结果不是 7，  而是：7.000000000000001
// 所以：不要直接判断两个浮点数是否相等 !

3）数值范围

JavaScript中数值的最大和最小值
- 最大值：Number.MAX_VALUE，这个值为： 1.7976931348623157e+308
- 最小值：Number.MIN_VALUE，这个值为：5e-324

alert(Number.MAX_VALUE); // 1.7976931348623157e+308
alert(Number.MIN_VALUE); // 5e-324

三个特殊值

无穷大：Infinity ，代表无穷大，大于任何数值

任何正值乘以 Infinity 为 Infinity

任何数值（除了Infinity 和 -Infinity）除以 Infinity 为 0

无穷小：-Infinity ，代表无穷小，小于任何数值

非数值：NaN ，Not a number，代表一个非数值

alert(Infinity); // Infinity
alert(-Infinity); // -Infinity
alert(NaN); // NaN
// 也不要 用 NaN 相比较

4） isNaN(x) 方法

用来判断一个变量是否为非数值 的类型

课堂练习： 5分钟
要求：编写如下代码并运行，注意 isNaN() 返回的值

var usrAge = 21;
var isOk = isNaN(userAge);
console.log(isOK); // false ，21 不是一个 非数值var usrName = "andy";
console.log(isNaN(userName));//true ，"andy"是一个 非数值

isNumber() 是不是数值*

6.2 Boolean 布尔类型

布尔类型有两个值：true 和 false

6.3 String 字符串类型

1.带有引号的都是字符型（在js’中单双引号没有区别，更推荐用单引号）

2.数据后台打印出来的如果颜色为黑色就是字符型如果为蓝色就是数值型

3.变量一定不能加引号

用于表示 文本数据 ，语法为双引号 "" 和单引号''

var strMsg = "我爱北京天安门~";  // 使用 双引号 表示字符串
var strMsg2 = '我爱广州小蛮腰~'; // 使用 单引号 表示字符串// 常见错误
var strMsg3 = 我爱上海黄浦江;    // *报错*，没使用引号，会被认为是 js代码，但js没有这些语法

1）字符串的嵌套

如何显示 我是"高帅富"程序猿 ？（注意里面包含一对双引号）

var strMsg = '我是"高帅富"程序猿';  // 可以用   '' 包含 ""
var strMsg2 = "我是'高帅富'程序猿"; // 也可以用 "" 包含 ''// 常见错误
var badQuotes = 'What on earth?"; // *报错*，不能 单双引号搭配

JS 可以用单引号嵌套双引号，或者用双引号嵌套单引号 (外双内单，外单内双)
那开发时，到底用单引号还是双引号来表示字符串呢？
规范统一用 单引号

2）字符串转义符

不能在字符串中包含相同的引号 (单引号中不能再嵌套单引号双引号中不能再嵌套双引号)

下面将会出现错误，因为它会混淆浏览器和字符串的结束位置：

// 请注意 i'm 中的 单引号
var badQuotes02 = 'I'm the GOD of my world ~!'; // 报错！

你可以用别的方式来达到一样的目的，例如. \", 除此之外有一些特殊的代码，常见如下表：

字面量	含义
\n	换行符（重要） newline
\ \	斜杠 \
’	单引号 ’
"	双引号 "
\t	Tab
\b	空格 blank
\r	回车符

注意： \n 和 \r 都起到换行的作用，但平时用 \n 比较合适。因为 \n 是 windows/mac/ninux 都支持，\r 只有 windows 支持。

课堂练习
要求：编写一个字符串变量，用 alert 方法显示如下图：

站在广州小蛮腰之上,
忍不住大声喊道 :“论苍茫大地,谁主沉浮?”
'扑通’一声,太激动,摔倒椅子了…

3）字符串的长度

字符串是若干 字符 组成的 串，这些 字符的数量 就是 字符串的长度。 我 是 字 符 组 合 而 成 的 ！

字符串的 length 属性可以获取 整个字符串 的长度空格也计算在内

var strMsg = "我是帅气多金的程序猿！--- 恩，我看出了你的自信。";
alert(strMsg.length); // 显示 26

4）字符串的拼接

多个字符串之间可以使用 +号 进行拼接

注意： 区分 字符串拼接 与 数值运算

字符串 + 任何类型 = 拼接之后的新字符串
拼接前会把与字符串相加的任何类型转成字符串，再拼接成一个新的字符串

//1.1 字符串 "相加"
alert('hello' + ' ' + 'world'); // hello world
//1.2 数值字符串 "相加"
alert('100' + '100'); // 100100
//1.3 数值字符串 + 数值
alert('11' + 12); // 1112

总结 + 口诀：

数值相加字符相连

课堂练习 用时：5分钟
要求：练习并体验上例代码

弹出一个输入框，需要用户输入年龄，之后弹出一个警示框显示刘德华 xx 岁了（xx 表示刚才输入的年龄）

6.4 Undefined 未定义类型

一个声明后没有被赋值的变量会有个默认值 undefined。

var usrName; // 声明变量后没有直接赋值，此时它的默认值就是 undefined
alert(usrName); // 显示 undefined

6.5 获取检测变量的数据类型

typeof 可用来获取检测变量的数据类型
语法：

var num = 3747;
var isNum = typeof num; // 也可以 写成 typeof(num)
alert(isNum); // "number"

不同类型返回值。

类型	例	结果
String	typeof “小白”	“string”
Number	typeof 3747	“number”
Boolean	typeof true	“boolean”
Undefined	typeof undefined	“undefined”

1、数值型  var age= 18；2、 字符串 var age='18';   带引号的都是字符串3、布尔型  var flase = true ； 只有失败和正确两个值4、未定义型  var age；//  undedined
console.log(typeof age);// undedined

6.6 简单数据类型小结

Number ：JS中的数值类型变量可以保存整型数值和浮点型数值
- isNaN()
String ：字符串用 ```` 和 "" 都可以，但前端开发统一规范使用单引号 var usrName ='字符串值'
- 多个字符串可以用 + 号相拼接
- length属性获取字符串长度
- 转义符
Boolean：布尔值用 true 和 false
Undefined：声明后未赋值的变量的默认值
可用 typeof 获取数据类型

7.数据类型转换

我们表单 prompt 获取过来的数据默认是字符型的，此时就不能直接简单的进行加法运算。此时需要转换。

通俗：就是把一种数据类型的变量转换成另外一种数据类型

通过调用系统函数进行类型转换，主要分3类：转 字符串、转 数值、转 布尔值

6.1 转换为字符串

方式	说明	案例
toString()	把变量转成字符串	var num= 1; alert(num.toString());
String() 强制转换	把特殊值转成字符串	String(undefined);
加号拼接字符串	和字符串拼接的结果都是字符串	var str = 215 + “我是字符串”;

toString() 方法（知晓）

toString() 方法可把一个逻辑值转换为字符串，并返回结果

布尔类型的 toString() 只会输出 “true” 和 “false”

var isFound = false;
alert(isFound.toString()); // 输出"false"

var num01 = 27; // alert(num01)输出"27"
var num02 = 27.37; // alert(num02)输出"27.37"
console.log(num01.toString())

String() 方法（简单了解）

String()函数存在的意义：有些值没有toString()，这个时候可以使用String()。

var  timer = null;
console.log(String(timer));

加号拼接字符串（重点掌握）

当 + 两边一个是 字符串类型，另一个是 其它类型 的时候，会先把 其它类型 转换成 字符串 再进行字符串拼接，最后返回字符串
```
alert(21 + "小白"); // 输出"21小白"
alert(false + "小白"); // 输出"false小白"
```

提问： alert(167 + “90”) 输出的是什么呢？

总结

方式	说明	案例
toString()	把变量转成字符串	var num= 1; alert(num.toString());
String() 强制转换	把特殊值转成字符串	String(undefined);
加号拼接字符串	和字符串拼接的结果都是字符串	var str = 215 + “我是字符串”;

6.2 转换为数值(重点)

我们前面说过**，表单获取过来的数据默认是字符型**，我们需要转换为数值型。

方式	说明	案例
parseInt(string) 函数	将string类型参数转成整数	parseInt(‘78’)
parseFloat(string) 函数	将string类型参数转成浮点数	parseFloat(‘78.21’)
Number() 强制转换函数
js 隐式转换	利用算术运算隐式转换	- * /

parseInt(string) 函数

概念： 将数值字符串转成整数数值

var numAge = parseInt("912"); // 912

执行规则：

//规则1.永远记住它是取整函数
var numLove = parseInt(18.08); // 18
var numLove = parseInt(18.88); // 18//规则2.如果第一个字符不是数字符号或者负号，返回NaN
var numLove = parseInt("aboard211"); // NaN//规则3.如果第一个字符是数字，则继续解析直至字符串解析完毕 或者 遇到一个非数字符号为止
var numLove = parseInt("520littlecat"); // 520

提问：

var numLove = parseInt(“abc12.3”) 执行后 numLove 的值是什么？

var num = parseInt(“12.3abc”) 执行后 num 的值是什么？

parseFloat(string)函数

概念： 将浮点数值字符串转成浮点数值

var num = parseFloat("12.3abc"); // 12.3

注意：parseFloat函数如果用来转换整型数值字符串，则也是返回整型数值

var num = parseFloat("12"); // 12，而不是 12.0

Number() 强制转换函数
- 里面如果只要出现非数字字符或者undefined，则就返回 NaN
- 如果该值是空字符串、数字0、或null、false 则返回 0 如果是 true 则返回 1
利用js隐式转换

利用了js的弱类型的特点，进行算术运算，实现了字符串到数字的类型转换，我们也成为隐式转换。

var   str= '123 ';
var   x   =   str-0;
var   x   =   x*1;

总结

以上4种方法，我们用的最多的是 parseInt() 和 parseFloat ();

课堂练习：

计算年龄，弹出一个输入框，我们输入出生年份，能计算出我们的年龄。

   var age = prompt('请输入您的出生年份：')// 因为此时的age 用到了 减法， 就不用转换为数值了var result = 2018 - agealert('您今年已经：' + result + '岁了');

课堂案例演示：加法计算器V0.01版本

计算两个数的值，用户输入第一个值，继续弹出输入第二个值，最后弹出两者的结果。

 // 1. 先弹出第一个框， 提示 用户输入第一个值 var num1 = prompt('请输入第一个值：');// 2. 再弹出第二个框， 提示 用户输入第二个值 var num2 = prompt('请输入第二个值：');// 3. 千万别忘了转换数值型思密达   我们吧这两个值 进行相加 （坑）  var result = parseFloat(num1) + parseFloat(num2);// 4. 弹出结果alert('结果是:' + result);

6.3 转换为Boolean值

方式	说明	案例
Boolean()函数	将布尔字符串转成布尔值	Boolean(‘true’);

代表空、否定的值会被转换为 false 有五种 “ ‘’、0、NaN、null、undefined
其余任何值都会被转换为 true

var res = Boolean(''); // false
res = Boolean(0); // false
res = Boolean(NaN); // false
res = Boolean(null); // false
res = Boolean(undefined); // falsevar res2 = Boolean('小白'); // true
var res2 = Boolean(12); // true

学习提醒：请同学们不要去背上面一句，大概有个印象就行。

8. 基础输入输出

为了方便JS基础入门课程的学习，我们在此教大家简单使用的输入输出方式

所谓输入，就是 用代码 获取用户键盘等硬件输入的信息，如：去银行取钱，在 ATM 上输入密码
所谓输出，就是用代码显示数据给用户看。
我们本节获取用户在键盘上的输入信息，需要使用到浏览器 prompt 函数

函数	说明	归属
alert(msg)	用浏览器提示框显示msg	浏览器提供
prompt(info)	用浏览器对话框接收用户输入，info是提示信息	浏览器提供
*console.log(msg)	用浏览器控制台显示msg	浏览器提供

9.2 alert() 显示消息

消息弹出窗：在 JS 中可以使用浏览器提供的 alert 函数显示消息
语法如下：

var usrMsg = "请问有空吗？"
alert(usrMsg);

思考：如何显示用户输入的数据？

9.3 prompt(info) 获取输入

消息输入窗：在 JS 中可以使用浏览器提供的 prompt 函数从键盘接收用户的输入
- 括号中的参数 info 是用来显示在输入窗给用户看的提示信息
用户输入的 任何内容 都是一个 字符串
语法如下：

var usrMsg = prompt();
var usrName = prompt('请输入您的名字'); //会在输入窗显示给用户看的提示信息
alert(usrName); // 打印用户名字

课堂案例演示：加法计算器V0.01版本

// 在浏览器控制台 显示 欢迎消息
alert("欢迎使用 加法计算 ！");
// 获取 用户输入 的 第一个数
var num01 = prompt("请输入第一个数："); // 注意：prompt 获取的用户输入都是字符串类型
num01 = parseFloat(num01); // 将 用户输入的数值字符串 转成 数值类型// 获取 用户输入 的 第二个数
var num02 = prompt("请输入第二个数：");
num02 = parseFloat(num02); // 将 用户输入的数值字符串 转成 数值类型// 计算两数之和
var sNum = num01 + num02;
// 按照 1 + 1 = 3 的格式 显示
alert('最后的结果是'+ sNum); // 用 + 号拼接字符串

课堂练习：10分钟
要求：编写减法计算器

9.4 console.log() 控制台输出

360极速浏览器、谷歌浏览器、火狐浏览器、IE11 等新浏览器支持 开发者工具
开发人者工具 提供一些列浏览器工具来帮助进行浏览器段代码调试，通过 f12 快速开启
console.log(msg) 可以把页面JS 执行过程中，把需要的数据显示在开发者工具的控制台界面，如：

var tempMsg = '50年后，我国是否已统一全球？';
console.log(tempMsg);

console.log() 输出内容在浏览器显示的位置：

有同学说：有了 alert() 为什么还要 console.log() 呢？

回答：alert() 主要用来显示消息给用户，console.log() 用来给程序员自己看运行时的消息。所以实际上用什么都可以，看自己喜欢。

二. 扩展内容@

1. 关键字、保留字、标识符

标识符：就是指开发人员为变量、属性、函数、参数取的名字。
标识符不能是 关键字 或 保留字
关键字：是指 JS本身已经使用了，不能再用它们充当变量名啊方法名啊什么的。
包括：break、case、catch、continue、default、delete、do、else、finally、for、function、if、in、instanceof、new、return、switch、this、throw、try、typeof、var、void、while、with 等。
保留字：实际上就是预留的“关键字”，意思是现在虽然现在还不是关键字，但是未来可能会成为关键字的，你一样是不能使用它们当变量名或方法名。
包括：boolean、byte、char、class、const、debugger、double、enum、export、extends、fimal、float、goto、implements、import、int、interface、long、mative、package、private、protected、public、short、static、super、synchronized、throws、transient、volatile 等。
注意：如果将保留字用作变量名或函数名，那么除非将来的浏览器实现了该保留字，否则很可能收不到任何错误消息。当浏览器将其实现后，该单词将被看做关键字，如此将出现关键字错误。

三. 课后综合练习（作业）

1. 给同桌讲讲交换两个数值变量的值（不管他愿不愿听）

2. 依次询问并获取用户的姓名、年龄、性别，并打印用户信息如图。

图一：

图二：

今天重点：

js 的三个组成部分 ECMAscript DOM BOM
js 书写的三个位置
变量命名（规则）
转义字符 — 弹出小蛮腰的那个框框
typeof 检测数据类型
转换为数值型 parse
计算年龄
加法器

四. 深度阅读@

《详解 ECMAScript 数据类型》

《浏览器内核、渲染引擎、JS引擎》

《浏览器内核与js引擎》

第01阶段前端基本功

前端整体学习路线图

阶段02.前端基本功学习路线图

JS基础

学习目标：
掌握基础编程语法
训练程序思维(用代码实现业务的思维)

WebAPI.学习目标
JQuery.学习目标
JS进阶
JQuery封装&插件

小结：

1.js 是一门基于客户端的脚本语言是一门弱数据类型的编程语言；

2.js书写位置：

1、行内式以on开头的一系列事件

<p onclick="alert('我曹真点啊！');">点我</p>

2、内嵌式它的顶级对象是window 在这里是自调用的可以放在dom文档的任何位置一般放在代码行后面

<head><script>alert('Hello  World~!');</script>
</head>

3、外联式

注意：

这里引入使用script 标签自带的src属性不是link标签
在引入外部js的script标签内不能在嵌套任何代码否则引入的js文件无效

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

3、js由 DOM BOM 和 ECMAscript语法三大部分组成 ECMA（欧洲计算机联盟的简称）

4、保存数据主要保存在变量、数组、对象中本地存储是 LocalStorage 设置本地存储是

localstorage.setItem(‘需要储存数据的名字这个名字可以自己起’，‘数据的值’)

localStorage.getItem（）获取本地存储的数据

5.变量的定义：在空间中的一小块空间又来储存数据具有可变性 = 是赋值的意思不是相等如果要交换两个变量的数据必须借助于第三个变量以var 关键字来声明变量

3种情况   ： 声明未赋值  undefined   ||      未声明直接赋值     默认转化为全局变量 可以正常使用  不推荐使用这种命名方法      ||   未声明也未赋值   报错

命名规范：

可以由字母、数字、下划线、特殊符号$等组成驼峰命名法首字母小写第二第三个单词首字母大写

。不能以数字开头可以以 _ 开头

。不是关键字或保留字 name 、var、 for、 if

。变量名中间不能有空格

数据类型：简单数据类型和复杂数据类型

简单数据类型又分：

数值型（Number）：整数、小数（浮点数）浮点数不参与计算打印输出为蓝色如果+两边都是数值型则两者是相加云算两者之间有一个不是数值型就是字符串拼接 - 会隐式转换一方为数值型就都会转换为字符型

字符串型（string）：带有引号的都是字符型（js不分单双引号推荐使用单引号）变量名不能加引号打印为黑色

布尔型（）只有 false 和true 两种值

未定义型（undefined）声明未赋值就是undefined

进制八进制（0X）：01 、07； 3.十六进制数字序列范围：0_9以及AF

转义符： \n 换行 \t tab 缩进不要用\t来换行它只支持 Windows系统

检测数据类型 typeof

var a = '123';
console.log(typeof a);// string

isNaN() // 检测是不是非数值

isNumber // 检测是不是数值型

转化为字符串：

a.toStiong(); 把a转化为字符串类型

string( a) 强制转化

“+” 隐式转换

转化为数值

parseInt() 转化为整数

parsefloat（）转化为浮点数

Number 强制转化为字符串 ‘’ 0 null null flase 会输出 0 true 会输出 1 只要出现 undefined 或者非数值型就返回NaN

Boolean（）转化为布尔型五个值转化为false（“ ‘’、0、NaN、null、undefined ）其余全部转化为 true；

操纵BOM的三种方法：

alert（）// 弹出警告框

prompt() // 弹出输入框

console.log() // 控制台打印输出

js基础day01小结相关推荐

小汤学编程之JavaScript学习day01——认识JS、JS基础语法
一.认识JS 1.JavaScript的组成 2.浏览器执行js简介 3.JavaScript是什么? 4.扩展内容二.JS基础语法 1.代码书写位置 2.变量 ...
【 js基础 Day4】面向过程，面向对象，自定义对象，内置对象
01 复习函数:把一些重复的代码封装在一个地方,在需要的时候直接调用这个地方的代码就可以了函数作用:代码重用函数的参数: 1.形参:函数定义的时候,函数名字后面的小括号里的变量 2.实参:函数调 ...
JS基础-Java Class类以及获取Class实例的三种方式
JS基础-Java Class类以及获取Class实例的三种方式由于JVM为每个加载的class创建了对应的Class实例,并在实例中保存了该class的所有信息,包括类名.包名.父类.实现的接口. ...
Javascript基础篇小结
Javascript基础篇小结随手翻阅以前的学习笔记,顺便整理一下放在这里,方便自己复习,也希望你有也有帮助吧第一课时入门基础知识点: 操作系统就是个应用程序只要是应用程序都要占用物理内存 ...
构建node.js基础镜像_我如何使用Node.js构建工作抓取网络应用
构建node.js基础镜像 by Oyetoke Tobi Emmanuel 由Oyetoke Tobi Emmanuel 我如何使用Node.js构建工作抓取网络应用 (How I built a ...
构建node.js基础镜像_在Android上构建Node.js应用程序
构建node.js基础镜像 by Aurélien Giraud 通过AurélienGiraud 在Android上构建Node.js应用程序-第1部分:Termux,Vim和Node.js (Bu ...
好程序员分享24个canvas基础知识小结
好程序员分享24个canvas基础知识小结,非常全面详尽,推荐给大家. 现把canvas的知识点总结如下,以便随时查阅. 1.填充矩形 fillRect(x,y,width,height); 2.绘制 ...
JS基础知识学习（一）
JS基础知识前端开发常用的浏览器谷歌浏览器(chrome):Webkit内核(v8引擎) 火狐浏览器(firefox):Gecko内核欧朋浏览器(opera):Presto内核 IE浏览器:Tr ...
# vue.js 之对vue.js基础理解
vue.js 之对vue.js基础理解 Vue构造器 1 . Vue.js是一个构造函数,编程中称之为构造器 2 . 每一个new Vue() 都是一个Vue构造函数的实例,这个过程叫做实例化 3 ...

js基础day01小结

计算机知识补充

学习目标

一. 核心内容

1. 计算机组成

1.1 软件（程序）

1.2 硬件

1.3程序运行介绍

2 硬件真实模样

3 为什么内存读写比硬盘快?

VSCode开发工具

学习目标

一. 核心内容

1. VSCode介绍

1.1 界面主要区域介绍

1.2 资源管理区使用

1.3 扩展(插件中心)使用

2. 常见操作

2.1 放大缩小字体

2.2 注释

二.扩展内容

1. Emmet 语法规则

2. Emmet 详细语法(常用)

2.1 元素(Elements)

2.2 文本操作符(Text)

2.3 属性操作符(Attribute)

2.4 嵌套操作符(Nesting)

2.5 乘法(Multiplication)

2.6 自动计数(numbering)

2.7 Emmet生成CSS语法

3. VSCode 常用快捷键

三.深度阅读

《vscode: Visual Studio Code 常用快捷键》

认知 JavaScript

学习目标

一.核心内容

1. JavaScript 是什么

1.1 为什么要学 JavaScript

1.2 HTML/CSS/JS 关系####

2.浏览器执行JS简介

3. JavaScript 的组成（重要）

3.扩展内容 @

3.1 JS 历史(了解)

3.2 JavaScript 应用场景(了解)

3.3 解释型语言 和 编译型语言

4.深度阅读 @

基础语法

学习目标

一.核心内容

1. JS代码书写位置

1.1 行内 JS

1.2 内嵌 JS

1.3 外部 JS 文件

1.4 小结

2.变量

2.1 为什么要用变量

2.2 什么是变量？

2.3 变量的使用

1） 变量的使用分为2步

2） 声明变量，并赋值( 推荐写法 )

2.4 变量内部值的更改

2.5 语法扩展

2.6 变量命名规则和规范

2.7 小结

3.注释

3.1 单行注释

3.2 多行注释

4. 数据类型简介

4.1 什么是数据类型？

4.2 变量属于那种数据类型？

5. 字面量

6. 简单数据类型

6.1 Number 数值类型

1）数值的进制

2） 浮点数的精度问题

3） 数值范围

三个特殊值

4） isNaN(x) 方法

6.2 Boolean 布尔类型

6.3 String 字符串类型

3.3 解释型语言和编译型语言

1）变量的使用分为2步

2）声明变量，并赋值( 推荐写法 )

2）浮点数的精度问题

3）数值范围

2）字符串转义符

3）字符串的长度

4）字符串的拼接

第01阶段前端基本功