提示: 在JavaScript中,所有代码指令都会以分号结尾
;
如果忘记加分号,你的单行代码可能执行正常,但是在多行代码在一起的时候就可能出错。所以,最好是养成主动以分号作为代码结尾的习惯。
一、计算机编程基础
1、编程语言
编程:
就是让计算机为解决某个问题而使用某种程序设计语言编写程序代码,并最终得到结果的过程。
计算机程序:
就是计算机所执行的一系列的指令集合
,而程序全部都是用我们所掌握的语言来编写的,所以人们要控制计算机一定要通过计算机语言向计算机发出命令。
注意:
上面所定义的计算机指的是任何能够执行代码的设备,可能是智能手机、ATM机、黑莓PI、服务器等等。
计算机语言
指用于人与计算机之间通讯的语言
,它是人与计算机之间传递信息的媒介
。
计算机语言的种类
非常的多,总的来说可以分成机器语言
,汇编语言
和高级语言
三大类。
实际上计算机最终所执行
的都是 机器语言
,它是由“0”和“1”组成的二进制数,二进制
是计算机语言的基础。
0 = 0000 0000 | 1 = 0000 0001 | 2 = 0000 0010 | 3 = 0000 0011 | 4 = 0000 0100 |
5 = 0000 0101 | 6 = 0000 0110 | 7 = 0000 0111 | 8 = 0000 1000 | 9 = 0000 1001 |
可以通过类似于人类语言的 ”语言”来控制计算机,让计算机为我们做事情,这样的语言就叫做编程语言
(Programming Language
)。
编程语言
是用来控制计算机的一系列指令,它有固定的格式和词汇(不同编程语言的格式和词汇不一样),必须遵守。
如今通用的编程语言有两种形式:汇编语言
和高级语言
。
汇编语言
和机器语言实质是相同的,都是直接对硬件操作,只不过指令采用了英文缩写的标识符,容易识别和记忆。
高级语言
主要是相对于低级语言而言,它并不是特指某一种具体的语言,而是包括了很多编程语言,常用的有C语言、C++、Java、C#、Python、PHP、JavaScript、Go语言、Objective-C、Swift
等。
C语言: puts("你好");
PHP: echo "你好";
Java: System.out.println("你好");
JavaScript: alert("你好");
高级语言所编制的程序不能直接被计算机识别,必须经过转换才能被执行,为此,我们需要一个翻译器
。
翻译器可以将我们所编写的源代码转换为机器语言,这也被称为二进制化
。 记住1和 0。
编程语言
有很强的逻辑和行为能力。在编程语言里, 你会看到很多 if else 、for 、while
等具有逻辑性和行为能力的指令,这是主动的。
标记语言
(html
)不用于向计算机发出指令,常用于格式化和链接。标记语言的存在是用来被读取的, 他是被动的。
2、计算机基础
数据存储
- 计算机内部使用二进制
0
和1
来表示数据。 - 所有数据,包括文件、图片等最终都是以二进制数据(0 和 1)的形式存放在硬盘中的。
- 所有程序,包括操作系统,本质都是各种数据,也以二进制数据的形式存放在硬盘中。平时我们所说的安装软件,其实就是把程序文件复制到硬盘中。
- 硬盘、内存都是保存的二进制数据。
数据存储单位
bit < byte < kb < GB < TB<.....
- 位(bit): 1bit 可以保存一个 0 或者 1 (最小的存储单位)
- 字节(Byte):
1B = 8b
- 千字节(KB):
1KB = 1024B
- 兆字节(MB):
1MB = 1024KB
- 吉字节(GB):
1GB = 1024MB
- 太字节(TB):
1TB = 1024GB
程序运行
- 打开某个程序时,先从硬盘中把程序的代码加载到内存中
- CPU执行内存中的代码
注意:
之所以要内存的一个重要原因,是因为 cpu 运行太快了,如果只从硬盘中读数据,会浪费cpu性能,所以,才使用存取速度更快的内存来保存运行时的数据。(内存是电,硬盘是机械)
二、初识JavaScript
1、初识JavaScript
布兰登·艾奇
(Brendan Eich,1961年~),神奇的大哥用10天完成 JavaScript 设计。最初命名为LiveScript
,后来在与 Sun 合作之后将其改名为JavaScript
。JavaScript 是世界上最流行的语言之一
,是一种运行在客户端的脚本语言 (Script 是脚本的意思)。脚本语言
:不需要编译,运行过程中由js 解释器
( js 引擎)逐行来进行解释并执行。现在也可以基于Node.js
技术进行服务器端编程。
JavaScript的作用
- 表单动态校验(密码强度检测) ( JS 产生最初的目的 )
- 网页特效
- 服务端开发(Node.js)
- 桌面程序(Electron)
- App(Cordova)
- 控制硬件-物联网(Ruff)
- 游戏开发(cocos2d-js)
HTML/CSS标记语言–描述类语言
HTML
决定网页结构和内容( 决定看到什么 ),相当于人的身体CSS
决定网页呈现给用户的模样( 决定好不好看 ),相当于给人穿衣服、化妆
JS 脚本语言–编程类语言
- 实现业务逻辑和页面控制( 决定功能 ),相当于人的各种动作
浏览器执行 JS 简介
- 浏览器分成两部分:渲染引擎和 JS 引擎
渲染引擎
:用来解析HTML与CSS,俗称内核
,比如 chrome 浏览器的 blink ,老版本的 webkitJS 引擎
:也称为JS 解释器
。 用来读取网页中的JavaScript代码,对其处理后运行,比如 chrome 浏览器的 V8- 浏览器本身并不会执行JS代码,而是通过内置 JavaScript 引擎(解释器) 来执行 JS 代码 。
- JS 引擎执行代码时逐行解释每一句源码(转换为机器语言),然后由计算机去执行,所以 JavaScript 语言归为脚本语言,会逐行解释执行。
JS组成
ECMAScript
是由ECMA 国际( 原欧洲计算机制造商协会)进行标准化的一门编程语言,这种语言在万维网上应用广泛,它往往被称为 JavaScript 或 JScript,但实际上后两者是 ECMAScript 语言的实现和扩展- ECMAScript 规定了JS的编程语法和基础核心知识,是所有浏览器厂商共同遵守的一套JS语法工业标准
文档对象模型
(Document Object Model,简称DOM
),是W3C组织推荐的处理可扩展标记语言的标准编程接口
。通过 DOM 提供的接口可以对页面上的各种元素进行操作(大小、位置、颜色等)BOM
(Browser Object Model,简称BOM) 是指浏览器对象模型
,它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口,比如弹出框、控制浏览器跳转、获取分辨率等。
2、JavaScript书写位置
JS 有3种书写位置,分别为行内
、内嵌
和外部
(1)行内式JS
-
<input type="button" value="唐伯虎" onclick="alert('秋香姐')">
-
可以将
单行或少量 JS 代码
写在HTML标签的事件属性中(以 on 开头的属性),如:onclick
-
注意单双引号的使用:在
HTML
中我们推荐使用双引号
,JS
中我们推荐使用单引号
-
可读性差, 在html中编写JS大量代码时,不方便阅读;
-
引号易错,引号多层嵌套匹配时,非常容易弄混;
-
特殊情况下使用
(2)内嵌JS
<script>
alert('沙漠骆驼');
</script>
- 可以将多行JS代码写到
<script>
标签中 - 内嵌 JS 是
学习时常用
的方式
(3)外部JS文件
<script src="my.js"></script>
- 利于HTML页面代码结构化,把大段 JS代码独立到 HTML 页面之外,既美观,也方便文件级别的复用
- 引用外部 JS文件的
script 标签中间不可以写代码
适合于JS 代码量比较大的情况
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style></style>
<!-- 2.内嵌式的js -->
<script>
alert('沙漠骆驼');
</script>
<!-- 3. 外部js script 双标签 -->
<script src="my.js"></script>
</head>
<body>
<!-- 1. 行内式的js 直接写到元素的内部 -->
<input type="button" value="唐伯虎" onclick="alert('秋香姐')">
</body>
</html>
3、JavaScript注释
(1)单行注释
// 我是单行注释
(2)多行注释
/*
我是多行注释
我是多行注释
我是多行注释
*/
4、JavaScript输入输出语句
方法 | 说明 | 归属 |
---|---|---|
alert(msg) | 浏览器弹出警示框 | 浏览器 |
console.log(msg) | 浏览器控制台打印输出信息 | 浏览器 |
prompt(info); | 浏览器弹出输入框,用户可以输入 | 浏览器 |
alert()
主要用来显示消息给用户,console.log()
用来给程序员自己看运行时的消息。
三、变量
- 变量是程序在内存中申请的一块用来
存放数据的空间
。
1、声明变量
var age;
或let age;(推荐使用)
- var 与 let 的区别见详情
2、赋值
age = 30;
3、变量的初始化
let myName = 'Chris';
- 声明一个变量并赋值, 我们称之为变量的初始化。
<script>
// 1. 用户输入姓名 存储到一个 myname的变量里面
let myname = prompt('请输入您的名字');
// 2. 输出这个用户名
alert(myname);
</script>
4、变量的语法扩展
- 一个变量被重新复赋值后,它原有的值就会
被覆盖
,变量值将以最后一次赋的值为准。
<script>
let myname = 'pink老师';
console.log(myname); //pink老师
myname = '迪丽热巴';
console.log(myname); //迪丽热巴
</script>
同时声明多个变量
时,只需要写一个 let, 多个变量名之间使用英文逗号隔开。
<script>
let age=10,myname,sex='女';
console.log(age,myname,sex); // 10 undefined '女'
</script>
情况 | 说明 | 结果 |
---|---|---|
let age;console.log(age); | 只声明,不赋值 | undefined |
console.log(myAge); | 不声明,不赋值 ,直接使用 | 报错 (myAge is not defined ) |
age = 10;console.log(age); | 不声明,只赋值 | 10 (未报错,但不推荐) |
5、变量命名规范
- 由字母(
A-Za-z
)、数字(0-9
)、下划线(_
)、美元符号($
)组成,如:usrAge
,num01
,_name
- 严格区分大小写。
var app;
和var App;
是两个变量 - 不能 以数字开头。
18age
是错误的 - 不能 是关键字、保留字。例如:
var
、for
、while
- 变量名必须有意义
- 遵守驼峰命名法。首字母小写,后面单词的首字母需要大写。
myFirstName
- 推荐翻译网站: 有道 爱词霸
6、交换两个变量
<script>
// js 是编程语言有很强的逻辑性在里面
// 1. 我们需要一个临时变量帮我们
// 2. 把apple1 给我们的临时变量 temp
// 3. 把apple2 里面的苹果给 apple1
// 4. 把临时变量里面的值 给 apple2
let temp; // 声明了一个临时变量为空
let apple1 = '青苹果', apple2 = '红苹果';
temp = apple1; // 把右边给左边
apple1 = apple2;
apple2 = temp;
console.log(apple1);//红苹果
console.log(apple2);//青苹果
</script>
四、数据类型
JavaScript
是一种弱类型或者说动态语言。这意味着不用提前声明变量的类型,在程序运行过程中,类型会被自动确定。- JavaScript 拥有动态类型,同时也意味着
相同的变量可用作不同的类型
let a = 1; //a为数字
a = '书'; //a为字符串
- JS 把数据类型分为两类: 简单数据类型 (
Number,String,Boolean,Undefined,Null
) 复杂数据类型 (object
)
1、简单数据类型
简单数据类型 | 说明 | 默认值 |
---|---|---|
Number | 数字型,包含整型值和浮点型值,如21、0.21 | 0 |
Boolean | 布尔值类型,如true、false,等价于1 和 0 | false |
String | 字符串类型,如"张三",注意js里面,字符串都带引号 | "" |
Undefined | let a; 声明了变量 a,但是没有赋值,此时 a = undefined | undefined |
Null | let a = null; 声明了变量 a为空值 | null |
(1)数字型Numeber
let a = 12; //a为整数
let b = 23.134; //a为小数
数字型进制
- 最常见的进制有二进制、八进制、十进制、十六进制。
- 现阶段我们只需要记住,在JS中八进制前面加
0
,十六进制前面加0x
// 1.八进制数字序列范围:0~7
let num1 = 07; // 对应十进制的7
// 2.十六进制数字序列范围:0~9以及A~F
let num = 0xA; // 10
数字型范围
- 最大值:
Number.MAX_VALUE
,这个值为: 1.7976931348623157e+308 - 最小值:
Number.MIN_VALUE
,这个值为:5e-32
console.log(Number.MAX_VALUE); // 1.7976931348623157e+308
console.log(Number.MIN_VALUE); // 5e-324
数字型三个特殊值
Infinity
,代表无穷大,大于任何数值-Infinity
,代表无穷小,小于任何数值NaN
,Not a number,代表一个非数值
alert(Infinity); // Infinity
alert(-Infinity); // -Infinity
alert(NaN); // NaN
isNaN()
- 用来判断一个变量是否为非数字的类型,返回 true 或者 false
isNaN(X)
, X是数字,返回 false;X不是数字,返会 true
console.log(isNaN('andy')); // true,'andy'是一个非数字
console.log(isNaN(13)); // false,13不是一个非数字
(2)字符型String
- 字符串型可以是引号中的任意文本,其语法为 双引号
""
和 单引号''
- 因为 HTML 标签里面的属性使用的是双引号,
JS 这里我们更推荐使用单引号
。
字符串引号嵌套
- JS 可以用单引号嵌套双引号 ,或者用双引号嵌套单引号 (外双内单,外单内双)
let strMsg = '我是"高帅富"程序猿'; // 可以用''包含""; 我是"高帅富"程序猿
let strMsg2 = "我是'高帅富'程序猿"; // 也可以用"" 包含''; 我是'高帅富'程序猿
// 常见错误
let badQuotes = 'What on earth?"; // 报错,不能 单双引号搭配
字符串转义符
转义符 | 解释说明 |
---|---|
\n | 换行符,n 是 newline 的意思 |
\\ | 斜杠\ |
\' | ' 单引号 |
\" | " 双引号 |
\t | tab 缩进 |
\b | 空格,b 是 blank 的意思 |
alert('酷热难耐,火辣的太阳底下,我挺拔的身姿,成为了最为独特的风景。\n 我审视四周,这里,是我的舞台,我就是天地间的王者。\n这一刻,我豪气冲天,终于大喊一声:"收破烂啦~"');
字符串长度
- 字符串是由若干字符组成的,这些字符的数量就是字符串的长度。通过字符串的
length
属性可以获取整个字符串的长度。
let strMsg = "我是帅气多金的程序猿!";
console.log(strMsg.length); // 显示 11
let strMsg1 = "hello world";
console.log(strMsg1.length); // 显示 11
字符串拼接
- 多个字符串之间可以使用
+
进行拼接,其拼接方式为 字符串 + 任何类型 = 拼接之后的新字符串 - 拼接前会把与字符串相加的任何类型转成字符串,再拼接成一个新的字符串
// 字符串的拼接 + 只要有字符串和其他类型相拼接
console.log('沙漠' + '骆驼'); // 字符串的 沙漠骆驼
console.log('pink老师' + 18); // 'pink老师18'
console.log('pink' + true); // pinktrue
console.log(12 + 12); // 24
console.log('12' + 12); // '1212'
console.log('12' + undefined); // '12undefined'
console.log('12' + null); // '12null'
字符串拼接加强
- 我们经常会将字符串和变量来拼接,因为变量可以很方便地修改里面的值
变量是不能添加引号的
,因为加引号的变量会变成字符串- 如果变量两侧都有字符串拼接,口诀“
引引加加
”,删掉数字,变量写加中间
<script>
console.log('pink老师' + 18); // pink老师18
console.log('pink老师' + 18 + '岁'); //pink老师18岁
let age = 19;
console.log('pink老师age岁'); //pink老师age岁
// 我们变量不要写到字符串里面,是通过和 字符串相连的方式实现的
// 变量和字符串相连的口诀: 引引加加
console.log('pink老师' + age + '岁'); //pink老师19岁
</script>
(3)布尔型Boolean
- 布尔类型有两个值:
true
和false
,其中 true 表示真(对),而 false 表示假(错)。 - 布尔型和数字型相加的时候, true 的值为 1 ,false 的值为 0
console.log(true + 1); // 2
console.log(false + 1); // 1
(4)Undefined 和 Null
- 一个声明后没有被赋值的变量会有一个默认值 undefined ( 如果进行相连或者相加时,注意结果)
let variable;
console.log(variable); // undefined
console.log('你好' + variable); // 你好undefined
console.log(11 + variable); // NaN
console.log(true + variable); // NaN
- 一个声明变量给 null 值,里面存的值为空
let vari = null;
console.log('你好' + vari); // 你好null
console.log(11 + vari); // 11
console.log(true + vari); // 1
2、获取变量数据类型
typeof
可用来获取变量的数据类型
let num = 18;
console.log(typeof num) // 结果 number
类型 | 例 | 结果 |
---|---|---|
String | typeof "小白" | "string" |
Number | typeof 18 | "number" |
Boolean | typeof true | "boolean" |
Undefined | typeof undefined | "undefined" |
Null | typeof null | object |
字面量
是在源代码中一个固定值的表示法,通俗来说,就是字面量表示如何表达这个值。
- 数字字面量:8, 9, 10
- 字符串字面量:‘黑马程序员’, “大前端”
- 布尔字面量:true,false
3、数据类型转换
(1)转换为字符串类型
-
第一种:
toString()
,例:let num = 10; let str = num.toString();
-
第二种:
String()
,强制转换,例:let num = 10;console.log(String(num));
-
第三种:
+
拼接字符串,例:let num = 10;console.log(num + '');
-
toString()
和String()
使用方式不一样。 -
三种转换方式,第三种加号拼接字符串转换方式, 也称之为
隐式转换
。
(2)转换为数字型
- 第一种:
parseInt(string)函数
,将string类型转换成整数数值型 - 第二种:
parseFloat(string)函数
,将string类型转换成浮点数数值型 - 第三种:
Number()强制转换函数
,将string类型转换成数值型 - 第四种:
js隐式转换( - * / )
,利用算数运算隐式转换为数值型 - 注意 :
parseInt
和parseFloat
单词的大小写 隐式转换
是我们在进行算数运算的时候,JS 自动转换了数据类型
// 1. parseInt(变量) 可以把 字符型的转换为数字型 得到是整数
console.log(parseInt('3.14')); // 3 取整
console.log(parseInt('3.94')); // 3 取整
console.log(parseInt('120px')); // 120 会去掉这个px单位
console.log(parseInt('rem120px')); // NaN
// 2. parseFloat(变量) 可以把 字符型的转换为数字型 得到是小数 浮点数
console.log(parseFloat('3.14')); // 3.14
console.log(parseFloat('120px')); // 120 会去掉这个px单位
console.log(parseFloat('rem120px')); // NaN
// 3. 利用 Number(变量)
let str = '123';
console.log(Number(str));// 123
console.log(Number('12'));// 12
// 4. 利用了算数运算 - * / 隐式转换
console.log('12' - 0); // 12
console.log('123' - '120');// 3
console.log('123' * 1);// 123
console.log('123' / 2);// 61.5
(3)转换为布尔型
Boolean()函数
,其它类型转换成布尔型- 代表空、否定的值会被转换为 false ,如
''、0、NaN、null、undefined
- 其余值都会被转换为 true
<script>
console.log(Boolean('')); // false
console.log(Boolean(0)); // false
console.log(Boolean(NaN)); // false
console.log(Boolean(null)); // false
console.log(Boolean(undefined)); // false
console.log('------------------------------');
console.log(Boolean('123'));// true
console.log(Boolean('你好吗'));// true
console.log(Boolean('我很好'));// true
console.log(Boolean(12));// true
</script>
五、扩展
1、解释型语言和编译型语言
- 翻译器翻译的方式有两种:一个是
编译
,另外一个是解释
。两种方式之间的区别在于翻译的时间点不同
编译器
是在代码执行之前
进行编译,生成中间代码文件解释器
是在运行时进行及时解释
,并立即执行(当编译器以解释方式运行的时候,也称之为解释器)
2、标识符、关键字、保留字
标识(zhi)符
:就是指开发人员为变量、属性、函数、参数取的名字。- 标识符不能是关键字或保留字。
关键字
:是指 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 等。
- 注意:如果将保留字用作变量名或函数名,那么除非将来的浏览器实现了该保留字,否则很可能收不到任何错误消息。当浏览器将其实现后,该单词将被看做关键字,如此将出现关键字错误。