1. 编程语言
1.1 编程语言和标记语言的区别
编程语言有很强的逻辑和行为能力,在编程语言里,你会看到很多if else
、for
、while
等具有逻辑性和行为能力的指令,这是主动的;
标记语言(HTML)不用于向计算机发出指令,常用于格式化和链接,标记语言的存在是用来被读取的,他是被动的。
1.2 总结
- 计算机可以帮助人类解决某些问题;
- 程序员利用编程语言编写程序发出指令控制计算机来实现这些任务;
- 编程语言有机器语言、汇编语言、高级语言;
- 高级语言需要一个翻译器转化为计算机识别的机器语言;
- 编程语言是主动的,有很强的逻辑性;
2. 计算机基础
2.1 计算机组成
2.2 计算机基础
- 计算机内部使用二进制 0 和 1 来表示数据。
- 所有数据,包括文件、图片等最终都是以二进制数据(0 和 1)的形式存放在硬盘中的。
- 所有程序,包括操作系统,本质都是把各种数据,也以二进制形式存放在硬盘中。平时我们所说的安装软件,其实就是把程序复制到硬盘中。
- 硬盘、内存都是保存的二进制数据。
2.3 数据的存储单位
bit < byte < KB < GB < TB <……
- 位(bit):1bit 可以保存一个 0 或者 1(最小的单位)
- 字节(byte):1B =8b
- 千字节(KB):1KB = 1024 B
- 兆字节(MB):1 MB = 1024 KB
- 吉字节(GB):1 GB = 1024 MB
- 太字节(TB):1 TB = 1024 GB
- ……
2.4 程序运行
硬盘 ——>内存条——>CPU
- 打开某个程序时,先从硬盘中把程序的代码加载到内存中;
- CPU执行内存中的代码;
- 注意:之所以要内存的一个重要原因,是因为CPU运行太快了,如果只从硬盘中读数据,会浪费CPU性能,所以,才使用存取速度更快的内存来保存运行时的数据(内存是电,硬盘是机械)
2. JS初识
2.1 初识JavaScript
2.1.1JavaScript是什么
- JavaScript是世界上最流行的语言之一,是一种运行在客户端的脚本语言(script是脚本的意思);
- 脚本语言:不需要翻译,运行过程中由js解释器(js引擎)逐行来解释并运行;
- 现在也可以基于Node.js技术进行服务器端编程;
2.1.2JavaScript 的作用
- 表单动态校验(密码强度检测)(**js产生的最初的目的)
- 网页特效
- 服务端开发(Node.js)
- 桌面程序(Electron)
- App(Cordova)
- 控制硬件 - 物联网(Ruff)
- 游戏开发(cocos2d-js)
2.1.3 HTML/CSS/JS 的关系
- html/css标记语言–描述类语言
- HTML决定网页结构和内容(决定看到什么),相当于人的身体;
- CSS决定网页呈现给用户的模样(决定好不好看),相当于给人穿衣服、化妆;
- JS脚本语言–变成类语言
- 实现业务逻辑和页面控制(决定功能),相当于人的各种动作;
2.1.4 浏览器执行JS简介
- 浏览器分成两部分:渲染引擎何JS引擎;
- 渲染引擎:用来解析HTML与CSS,俗称内核,比如chrome浏览器的blink,老版本的webkit;
- JS引擎:也成为JS解释器,用来读取网页中的JavaScript代码,对迄今处理后运行,比如chrome浏览器的V8
浏览器本身并不会执行JS代码,二十通过内置JavaScript引擎(解释器)来执行JS代码。JS引擎执行代码时逐行解释每一句源码(转换为机器语言),然后由计算机去执行,所以JavaScript语言归为脚本语言,会逐行解释执行。
2.1.5 JS的组成
- ECMAScript
ECMAScript是由ECMA国际(原欧洲计算机制造商协会)进行标准化的一门编程语言,这种语言在万维网上应用广泛,他往往被称为JavaScript或Jscript,但实际上后两者是ECMAscript语言的实现和拓展
ECMAScript:ECMAScript规定了JS的编程语法和基础核心知识,是所有浏览器厂商共同遵守的一套JS语法工业标准 - DOM——文档对象模型
文档对象模型,是W3C组织推荐的处理可拓展标记语言的标准编程接口。通过DOM提供的接口可以对页面上的各种元素进行操作(大小、位置、颜色等)。 - BOM——浏览器对象模型
BOM是指浏览器对象模型,它提供了独立于内容的、可以与浏览器窗口进行互动的结构对象,通过BOM可以操作浏览器窗口,比如弹出框、控制浏览器跳转、获取分辨率等;
2.1.6 JS初体验
JS有三种书写位置:行内、内嵌、外部
- 行内式
<input type="button" value="点我试试" onclick="alert('Hello World')">
- 可以将单行或者少量JS代码写在HTML标签的事件属性中(以 on开头的属性),如:onlink
- 注意单双引号的使用:在HTML中我们推荐使用双引号,JS中我们推荐使用单引号;
- 可读性差,在HTML中编写JS大量代码时,不方便阅读;
- 引号易错,引号多层嵌套匹配时,非常容易弄混;
- 特殊情况下使用
- 内嵌JS
<script>
alert('hello world');
</script>
- 可以将多行JS代码写到
<script>
标签中 - 内嵌JS是学习时常用的样式
- 外部JS文件
<script src="js文件名.js"></script>
- 利于HTML页面代码结构化,把大段JS代码独立到HTML页面之外,既美观,也方便文件级别的复用;
- 引用外部JS文件的script标签中间不可以写代码;
- 适用于JS代码量较大的情况
2.2 JavaScript输入输出语句
为了方便信息的输入输出,JS中提供了一些输入输出语句,其常用的语句如下:
方法 | 说明 | 归属 |
---|---|---|
alert(msg) | 浏览器弹出警示框 | 浏览器 |
console.log(msg) | 浏览器控制台打印输出信息 | 浏览器 |
prompt(info) | 浏览器弹出输入框,用户可以输入 | 浏览器 |
alert——警示框
alert('hello world');
console——打印输出
console.log('我是程序员能看到的');
prompt——弹出输入框
prompt('hello world');
3. 变量
3.1 变量概述
- 变量的定义:变量是用于存放数据的容器。我们通过变量名获取数据,甚至数据可以修改;
- 变量在内存中的存储本质:变量是程序在内存中申请的一块用来存放数据的空间。
3.2 变量的使用
变量在使用过程中分成两步:声明变量、赋值;
3.2.1 声明变量
//声明变量
var age;//声明一个名称为 age 的变量
- var 是一个关键字,用来声明变量(variable 变量的意思)。使用该关键字声明变量后,计算机会自动为变量分配内存空间,不需要程序员管
- age 是程序员定义的变量名,我们要通过变量名来访问内存中分配的空间。
3.2.2 赋值
age = 10;//给 age 这个变量赋值为 10
- = 用来把右面的值赋给左面的变量空间中,此处代表赋值的意思
- 变量值是程序员保存到变量空间里的值
3.3 变量语法扩展
声明变量的特殊情况
情况 | 说明 | 结果 |
---|---|---|
var age;console.log(age); | 只声明,不赋值 | undefined |
console.log(age) | 不声明,不赋值,直接使用 | 报错 |
age = 10; console.log(age); | 不声明,只赋值 | 10 |
3.4 变量命名规范
- 由字母(A~Z, a-z)、数字(0-9)、下划线(_)、美元符号($)组成;
- 严格区分大小写;
- 不能以数字开头;
- 不能是关键字、保留字;
- 变量名必须有意义;
- 遵循驼峰命名法。首字母小写,后面的单词的首字母需要大写;
3.5 小结
- 为什么需要变量?
因为我们一些数据需要保存,所以需要变量
- 变量是什么?
变量就是一个容器,用来存放数据的,为了方便后续使用里面的数据。
- 变量的本质是什么?
变量是呢村里的一块空间,用来存储数据。
- 变量是怎么使用的?
先声明变量,再赋值
声明变量本质是去内存申请空间
- 什么是变量的初始化?
声明变量并赋值我们称之为变量的初始化;
- 变量的命名规范有哪些?
变量名尽量要规范,见名知意——驼峰命名法
- 交换两个变量值的思路?
使用一个临时变量,用来做中间存储
3.5 交换变量案例
/* JS是编程语言有很强的逻辑性在里面: 实现这个要求的思路
1. 需要一个临时变量 temp
2. 把a得知给临时变量 temp
3. b——》a
3. temp——》b
*/
var temp;//声明了一个临时变量为空;
var a;
var b;
temp = a;
a = b;
b = temp;
console.log(a);
console.log(b);
4. 数据类型
4.1 数据类型简介
在计算机中,不同的数据类型所占据的纯初空间是不同的,为了便于把数据分成所需内存大小不同的数据,充分利用存储空间,于是定义了不同的数据类型。
4.1.1 变量的数据类型
变量是用来存储值的所在处,他们有名字和数据类型。变量的数据类型决定了如何将代表这些值的位存储到计算机的内存中。JavaScript是一种弱类型或者说动态语言。这意味着不用提前声明变量的类型,在程序运行过程中,类型会被自动确定。
var age = 10;//这是一个数字型;
var name = daming;//这是一个字符串;
在代码运行过程中,变量的数据类型是由JS引擎根据 = 右边变量值的数据类型来判断的,运行完毕后,变量就确定了数据类型。
JavaScript拥有动态类型,同时也意味着相同的变量可用作不同的类型,
var age = 10;//age为数字型;
var age = "ten";//age为字符串;
4.2 简单数据类型
4.2.1 数据类型的分类
- 简单数据类型
- 复杂数据类型
4.2.2 总结
简单数据类型 | 说明 | 默认值 |
---|---|---|
Number | 数字型,包含整形和浮点数形,如21,0.21 | 0 |
Boolean | 布尔值类型,如true false ,等价于 1 和 0 | false |
String | 字符串类型,如“张三”。JS中,字符串都带引号 | “” |
Undefined | var a; 声明了变量 a 但是没有给值,此时 a = undefined | undefined |
Null | var a = null; 声明了变量 a 为空值 | null |
4.2.3 数字型
- 数字型进制:八进制前面加 0 ,十六进制前面加 0x;
- 数字型的三个特殊值
alert(Infinity); //Infinity
alert(-Infinity);//-Infinity
alert(NaN)//NaN
- Infinity,代表无穷大,大于任何数值;
- -Infinity,代表无穷小,小于任何数值;
- NaN,Not a number,代表一个非数值;
- isNaN()
用来判断一个变量是否为非数字的类型,返回ture或者false
4.2.4 字符串型String
- 字符串引号嵌套:外单内双,外双内单;
var str1 = '我是"高富帅"';
var str2 = "我是'高富帅'";
- 字符串拼接加强
console.log('我'+18);//只要有字符就会相连;
var age = 18;
//console.log('我今年age岁啦');——>输出我今年age岁啦
console.log('我今年'+age);//——>我今年18;
console.log('我今年'+age+'岁啦');//——>我今年18岁啦;
4.2.5 布尔型Boolean
布尔类型有两个值:ture和false,其中ture 表示真(对),而 false 表示假(错)。
布尔型和数字型相加的时候,ture 的值为 1,false 的值为 0;
console.log(true+1);//——>2
console.log(false+1);//——>1
4.2.6 Undefined 和 Null
一个声明后没有被赋值的变量会有一个默认值Undefined(如果进行相连或者相加时,注意结果)
var variable;
console.log(variable);//undefined
console.log('你好'+ variable);//你好undefined
console.log(11+ variable);//NaN
console.log(ture+ variable);//NaN(NaN,Not a number,代表一个非数值);
一个声明变量给null值,里面存的值为空(学习对象时,我们继续研究null)
var vari;
console.log('你好'+ vari);//你好null
console.log(11+ vari);//11
console.log(ture+ vari);//1
5. 运算符
运算符也被称为操作符,是用与实现赋值、比较和执行算术运算等功能的符号。
5.1 算术运算符
5.1.1 介绍
算术运算符概念:算术运算使用的符号,用于执行两个变量或值的算术运算
表达式概念:是由数字、运算符、变量等组成的式子,我们称之为表达式
运算符 | 描述 | 实例 |
---|---|---|
+ | 加 | 10 + 20 = 30 |
- | 减 | 10 - 20 = 30 |
* | 乘 | 10 * 20 = 30 |
/ | 除 | 10 / 20 = 30 |
% | 取余数(取模) | 返回除法的余数 9 % 2 = 1 |
<script>
// 加
console.log(1 + 1);//2
// 减
console.log(1 - 1);//0
// 乘
console.log(1 * 1);//1
// 除
console.log(1 / 1);//1
// 取余
console.log(5 % 2);//1
</script>
5.1.2 浮点数的精度问题
浮点数值的最高精度是17位小数,但在进行算数运算时其精确度远远不及整数。
<script>
console.log(0.1+0.2);
console.log(0.07*100);
</script>
5.2 递增递减运算符
5.2.1 前置运算符
++num前置递增,就是自加1,类似于 num = num + 1,但是 ++num写起来更简单;
先自加,后返回值
<script>
var num = 10;
console.log(++num + 10);//先加1,后返回值
</script>
5.2.2 后置运算符
**num++**后置递增,就是自加1,类似于 num = num + 1,但是 num++写起来更加简单;
先返回原值,后自加
<script>
var num = 10;
console.log(num++ + 10);//先加1,后返回值
</script>
3.2.3 小结
- 前置递增和后置递增运算符可以简化代码的编写,让变量的值 +1 比以前写法更简单
- 单独使用时,运行结果相同
- 与其他代码连用时,执行结果会不同
- 后置:先原值计算,后自加(先人后己)
- 前置:先加,后运算(先己后人)
- 开发时,大多使用后置递减/增,并且代码独占一行,例如:num++; 或者:num- -;
5.3 比较运算符
5.3.1 比较运算符概述
- 概述:比较运算符(关系运算符)是两个数据进行比较时所使用的运算符,比较运算后,会返回一个布尔值(ture / false)作为比较运算的结果。
运算符名称 | 说明 | 案例 | 结果 |
---|---|---|---|
< | 小于号 | 1 < 2 | ture |
> | 大于号 | 1 > 2 | false |
>= | 大于等于号(大于或者等于) | 2 >= 2 | ture |
<= | 小于等于号(小于或者等于) | 3 <= 2 | false |
== | 判等号(会转型) | 37 == 37 | true |
!= | 不等号 | 37 != 37 | false |
=== !== | 全等 要求值和数据类型都一致 | 37 === ‘37’ | false |
5.3.2 = 小结
符号 | 作用 | 用法 |
---|---|---|
= | 赋值 | 把右边给左边 |
== | 判断 | 判断等号两边是否相等(注意此时有隐式转换 |
=== | 全等 | 判断两边的值判断两边的值和数据类型是否完全相同 |
5.4 逻辑运算符
5.4.1 基础
概念:逻辑运算符是用来进行布尔值运算的运算符,其返回值也是布尔值。后面开发中经常用于多个条件的判断。
逻辑运算符 | 说明 | 案例 |
---|---|---|
&& | ”逻辑与”,简称“与” and | true && false |
|| | “逻辑或”,简称“或” or | true || false |
! | “逻辑非”,简称“非” not | !ture |
<script>
//1.逻辑与 && 两侧结果都为 true,结果才是 true;只要有一侧是false,结果就为false
console.log(3 > 5 && 3 > 2);//false
console.log(3 < 5 && 3 > 2);//true
//2.逻辑或 ||,两侧都为false,结果才是false;只要有一侧为true,结果就是true
console.log(3 > 5 && 3 > 2);//true
console.log(3 < 5 && 3 < 2);//false
//3.逻辑非
console.log(!true);//false
</script>
5.4.2短路运算(逻辑中断)
短路运算的原理:当有多个表达式(值)时,左边的表达式值可以确定结果时,就不再继续运行右边的表达式的值。
- 逻辑与
- 语法:表达式1 && 表达式2
- 如果第一个表达式的值为真,则返回表达式2;
- 如果第一个表达式的值为假,则返回表达式1;
- 逻辑或
- 语法:表达式1 || 表达式2;
- 如果第一个表达式的值为真,则返回表达式1;
- 如果第一个表达式的值为假,则返回表达式2;
<script>
//逻辑与短路运算
console.log(123 && 456);//456
console.log(0 && 456);//0
console.log(0 && 1 +2 && 123 + 456);//0
console.log('' && 1 + 2 && 123 + 456);//''
//如果有空的或者否定的为假(0 '' null undefined NaN),其余都是真的
//逻辑或短路运算
console.log(123 || 456);//123
console.log(123||456||789);//123
console.log(0||123||456+123);//456
</script>
5.5 赋值运算符
概念:用来把数据赋值给变量的运算符
赋值运算符 | 说明 | 案例 |
---|---|---|
= | 直接赋值 | var num = 3 |
+=、-= | 加、减 一个数后再赋值 | var num = 10; num += 5;//15 |
*=、/=、%= | 乘、除、取模 后再赋值 | var num = 2; num *=2;//4 |
5.6 运算符优先级
优先级 | 运算符 | 顺序 |
---|---|---|
1 | 小括号 | () |
2 | 一元运算符 | ++ - - |
3 | 算术运算符 | 先* / %后+ - |
4 | 关系运算符 | >= > <= < |
5 | 相等运算符 | == != === !== |
6 | 逻辑运算符 | 先&& 后|| |
7 | 赋值运算符 | = |
8 | 逗号运算符 | , |