第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">1</li>
<li class="item2">2</li>
<li class="item3">3</li>
</ul>
注意:如果生成 两位数 则使用两个连续的 $$,更多位数以此类推~~
2.7 Emmet生成CSS语法
- Emmet 不仅能生成 HTML,还可以生成 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: 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.深度阅读 @
第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;
- 由字母(A-Za-z)、数字(0-9)、下划线(_)、美元符号( $ )组成,如:
-
规范 建议遵守的,不遵守的话 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 开头,数字序列范围:09以及AF
//1.十进制
var num = 9;
// 进行算数计算时,八进制和十六进制表示的数值最终都将被转换成十进制数值。
//2.八进制 数字序列范围:0~7
var num1 = 07; // 对应十进制的7
var num2 = 019; // 对应十进制的19
var num3 = 08; // 对应十进制的8
//3.十六进制 数字序列范围:0~9以及A~F
var 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 - age
alert('您今年已经:' + 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); // false
var 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
-
计算年龄
-
加法器
四. 深度阅读@
第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.十六进制 数字序列范围:09以及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() // 控制台打印输出