基本数据和js的使用-CSDN博客

1.1 计算机基本概念及概述

1.1.1 计算机组成部分

计算机包括硬件（hardware）和软件（software）两部分。一般来说，硬件包括计算机中可以看得见的物理部分，而软件提供看不见的指令，这些指令控制硬件并且使得硬件完成特定的任务。学习一种程序设计语言，并不一定要了解计算机硬件知识，但是如果你了解一些硬件知识的话，它的确可以帮助你更好地理解程序中指令对于计算机及其组成部分的功效。一台计算机是由一下几个主要的硬件组成构成的：

中央处理器（Center Processing Unit，CPU）
内存
存储设备
输入设备
输出设备
通信设备

这些组件通过一个称为总线（bus）的子系统链接。你可以将总线想象成一个连接计算机组件的道路系统，数据和电信号通过总线在计算机的各个部分之间传输。在个人计算机中，总线搭建在主板上，主板是一个连接计算机各个部分的电路板。

中央处理器

中央处理器是计算机的大脑。它从内存中获取指令，然后执行这些指令。CPU通常由两部分组成：控制单元（control unit）和算术/逻辑单元（arithmetic/logic unit）。控制单元用于控制和协调其他组件的动作。算术/逻辑单元用于完成数值运算（加法、减法、乘法、除法）和逻辑运算（比较）。

比特和字节 计算机就是一些列的电路开关。每个开关存在两种状态：关（off）和开（on）。简单而言，在计算机中存储信息就是将一系列的开关设置为开或者关。如果电路是开的，它的值是1。如果电路是关的，它的值是0。这些0和1被解释为二进制数字系统中的数，并且将它们成为比特（bit，二进制数）。计算机中字节（byte）是最小的存储单元。每个字节由8个比特构成。像3这样的小数字就可以存储在单个字节中。为了存储单个字节放不下的大数字，计算机需要使用几个字节。

内存计算机的内存由一个有序的字节序列组成，用于存储程序及程序需要的数据。你可以将内存想象成计算机执行程序的工作区域。一个程序和它的数据在被CPU执行前必须移到计算机的内存中。每个字节都有一个唯一的地址，使用这个地址确定字节的位置，以便于存储和获取数据。因为可以按任意顺序存取字节，所以内存也被称为随机访问存储器（Random-Access Memory，RAM）。内存中字节的内容永远非空，但是它的原始内容可能对于你的程序来说是毫无意义的。一旦新的信息被放入内存，该字节的当前内容就会丢失。

存储设备 计算机的内存是一种易失的数据保存形式：断电时存储在内存中的信息就会丢失。程序和数据被永久地存放在存储设备上，当计算机确实使用它们时再移入内存，因为从内存读取从存储设备读取要快得多。存储设备主要有以下三种类型：

输入设备和输出设备让用户可以和计算机进行通信。最常用的输入设备是键盘和鼠标，而最常用的输出设备是显示器和打印机。

通信设备 计算机可以通过通信设备进行联网，例如，拨号调制解调器、DSL、电缆调制解调器、有线网络接口卡、或者无线适配器。

1.1.2 人机交互方式

那我们一般又是如何和计算机“打交道”的呢？用户和计算机交互的方式有两种：

图形化界面方式（Graphical User Interface，GUI）：这种方式简单直观，使用者易于接受，容易上手操。
命令行方式（Command Line Interface，CLI）：需要有一个控制台，输入特定的指令，让计算机完成一些操作。较为麻烦，需要记住一些命令

通过命令行可以和计算机进行相应的沟通，也就是说只要我们输入命令即可完成和计算机沟通的目的。那么命令都有那些呢？这里主要介绍一些常用的dos命令： dir ：列出当前目录下的文件以及文件夹 md ：创建目录 rd ：删除目录 remove directory cd path ：进入指定目录 cd ..：退回到上一级目录 cd \ ：退回到根目录 del：删除文件 exit：推出dos命令行 help：帮助命令 cls：dos窗口中清屏可以使用早期操作电脑常用dos命令，因为需要记住很多命令，不利于普及，后期发展成图形界面，通过鼠标点击界面的形式完成对电脑的操作，其实内部运行的还是这些命令。

1.1.3 计算机语言

计算机不理解人类的语言，所以，计算机程序必须使用计算机可以使用的语言编写。现在有数百种编程语言，对于人们来说，开发它们是编程过程更容易。但是，所有的程序都必须转换成计算机可以执行的指令。

机器语言

计算机的原生语言因计算机类型的不同而有差异，计算机的原生语言就是机器语言（machinelanguage），即一套内嵌的原子指令集。因为这些指令都是以二进制代码的形式存在，所以，为了以机器原生语言的形式给计算机指令，必须以二进制代码输入指令。例如，为进行两个数的相加，可能必须写成如下的二进制形式：

101101010010010101010101110

面向机器的语言

用机器语言进行程序设计是非常单调乏味的过程，而且，所编写的程序也非常难以读懂和修改。为此，在计算机的早期就创建了面向机器的二代编程语言，其他典型代表就是汇编语言，作为机器语言的替代品。汇编语言（assembly language）使用短的描述性单词（称为助记符）来表示每一条机器语言指令。例如助记符 add 一般表示数字相加，sub 表示数字相减。将数字2和数字3相加得到结果，可以编写如下汇编代码：

add 2, 3, result

汇编语言的出现降低了程序设计的难度。然而，由于计算机不理解汇编语言，所以需要使用一种称为汇编器的程序将汇编语言程序转为机器代码。

使用汇编语言编写代码比使用机器语言容易。然而，用汇编语言编写代码依然很不方便。汇编语言中的每一条指令对应机器代码中的一条指令。用汇编语言写代码需要知道CPU是如何工作的。汇编语言被认为是低级语言，因为汇编语言本质上非常接近机器语言，并且是机器相关的，而且硬件的兼容性特别的不好，这样软件的兼容性就很差

高级语言

20世纪60年代末，随着C语言的出现，新一代编程语言，即众所周知的高级语言出现了。它们是平台独立的，这意味着可以使用高级语言编程，然后在各种不同类型的机器上运行。高级语言很像英语，易于学习和使用。高级语言中的指令称为语句。

用高级语言编写的程序称为源程序（source program）或源代码（source code）。由于计算机不能运行源程序，源程序必须被翻译成可执行的机器代码。翻译可以由另外一种称为解释器或者编译器的编程工具来完成。

解释器：从源代码中读取一条语句，将其翻译为机器代码或者虚拟机器代码，然后立刻运行。
编译器：将整个源代码翻译为机器代码文件，然后执行该机器代码文件。

1.2 hello world

在电脑磁盘上创建一个文本文档，命名为index.html，注意：后缀名必须是html！书写代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>js,hello world</title>
	</head>
	<body>
		<script> 
			 alert('hello JavaScript， I am coming！！！');
			 alert('点你一下咋地？');
             document.write("刘建宏是大帅锅~~~~");
		</script>
	</body>
</html>

运行结果如图

通过这个案例，我们可以看出JavaScript是鞋子啊script标签中。alert是一个函数，接收一个字符串参数，表示在浏览器弹出一个对话框，输出参数中的字符串内容。

1.3 js的书写方式

在css阶段时，css当时有三种写法，js同样有三种写法。

1.3.1 行内js

使用HTML标签的onxxx这种属性（这种属性一般都是js和html互动的事件属性），完成js的书写。

注意：事件中引号中不是字符串，是JavaScript代码！！！

<button onclick="alert('你点我干嘛？');alert('点你一下咋地？')">一点下试试</button>

1.3.2 页面内嵌js

就像刚刚写的第一个js程序--hello world，js写在script标签中。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>js,hello world</title>
	</head>
	<body>
		<script> 
			 alert('hello JavaScript， I am coming！！！');
			 alert('点你一下咋地？');
		</script>
	</body>
</html>

注意：script标签在head和body中都可以书写，大家一般习惯写在head中，和css一样，但是基于优化原则，建议script写在body的最后部分。

1.3.3 外联js文件

W3C在2007年，提出了三层分离原则，就是将HTML、css、JavaScript分离开，以便于程序的维护和开发。

结构层 HTML
表示层 CSS
行为层 JavaScript

我们就可以在外部定义xx.js脚本（注意：后缀名必须是js），使用script标签引入，src属性就是地址。
```
<script src="js/index.js"></script>
```
1.4 对话框

JavaScript为我们主要提供了三种对话框：警告框、确认框、输入框

1.4.1 警告框

警告框是JavaScript中使用较多的一种对话框，主要用来向用户展示警告信息。
```
alert('hello JavaScript， I am coming！！！');
alert('点你一下咋地？');
```
警告框，只有一个标题信息和一个确定按钮。

1.4.2 确认框

确认框又叫做疑问框，主要用来确定用户的操作，防止误操作所使用的
```
<!DOCTYPE html>
<html>
<head>
    <title>确认框示例</title>
</head>
<body>
    <button onclick="showConfirm()">点击显示确认框</button>
    <script>
        function showConfirm() {
            var result = confirm("你确定要执行这个操作吗？");
            if (result) {
                console.log("用户点击了确定");
            } else {
                console.log("用户点击了取消");
            }
        }
    </script>
</body>
</html>
```
当点击按钮时，showConfirm函数被调用。这个函数会弹出一个确认框，然后根据用户的选择在控制台输出相应的信息

var isDelete = confirm("您确定要删除您的账号吗？");
alert(isDelete)
if (isDelete) {
	alert("数据删除了")
}

确认框，有两个按钮，分别是确认和取消，如果用户点击了确认，则返回一个真（true）的数据，如果用户选择了取消，则返回一个假（false）的数据，我们就可以通过这个值判断用户选择了什么，从而确定执行的代码。

1.4.3 输入框

输入框主要用来接收用户在页面输入的值（真正开发中几乎不用），主要用来测试代码。

// 注意：三种对话框函数都是window对象的方法，所以可以通过window.alert()这种方式来调用
// 当然也可以不写，直接调用，因为js中window就是全局对象，默认访问就是window对象
var age = window.prompt("请输入您的年龄：", "20");
alert("您今年是"+ age + "岁了");

第二个参数可以不写。不写，则输入框默认没有值，如果写了则默认就是写的值。运行结果如图

1.5 关键字

在程序（不管什么编程语言）开发中，一般都存在着一些表示特殊含义的单词或者词组，这些单词和词组都表示一些特定的意思，所以我们把这些单词就叫做关键字或者保留字，如 if、for、while、else、try、function等。

关键字：已经在程序中表示特定的意思，如：for表示循环。

保留字：目前没有特定的含义，但是将来版本准备使用，如ES6之前的class保留字，当然现在class也是关键字了。

ECMAScript6 描述了一组具有特定用途的关键字，一般用于控制语句的开始或结束，或者用于执行特定的操作等。关键字也是语言保留的，不能用作标识符。

break	else	new	var	case
finally	return	void	catch	for
switch	while	continue	function	this
with	default	if	throw	delete
in	try	do	instanceof	typeof
abstract	enum	int	short	boolean
export	interface	static	byte	extends
long	super	char	final	native
synchronized	class	float	package	throws
const	goto	private	transient	debugger
implements	protected	volatile	double	import
public	async	await	yield	let

1.6 注释

注释：就是用来给程序员看和解释的语句，计算机不会去识别这些语句，需要使用专门的标注来告诉电脑，不用解释。

JavaScript的注释分为单行注释、多行注释和文档注释。在注释上，JavaScript和Java、C语言都保持一致的风格。

// 单行注释 ，使用双斜杠，不能换行，不然第二行就不是注释了
alert("hello world");

/**
* 多行注释
* 可以写多行
* 代码
*/
console.log("liushuaige")

/*!
*
* 文档注释，将来js压缩时
* 文档注释不允许删除。
*/

1.7 变量

1.7.1 什么是变量

变量：是计算机语言中能储存计算结果或能表示值抽象概念。一般表示一个运行时可以变化值的名称引用，是一个命名的内存。

1.7.2 程序中为什么需要变量

直接使用具体的值运行，则如果该值多次运算的话，就需要多次书写，将来修改维护是成本较高，而如果使用变量代指的话，只需要修改最开始的值，则全部修改，方便灵活，类似于数学上的未知数x。

1.7.3 如何定义变量

JavaScript中定义变量很简单，使用关键字var。

语法结构如下
var 变量名称 = 变量值;

注意：JavaScript中每个语句结束后建议使用;作为结束符，虽然可以不加（换行），但是建议大家养成良好习惯，每行代码加;一行只写一个语句，不要将几行写在一行。

// 定义一个变量，名称叫age，值是10
var age = 10;
console.log(age);

// 也可以先声明
var gender;
// 之后在赋值
gender = prompt("请输入您的性别：", "男");
console.log(gender)

// 注意：虽然这样写，js也能正常执行，但是禁止这样定义变量，没有使用var关键字
// 直接变量名=变量值的方式，定义的是全局变量，作用域太大！！！
test = "刘建宏";
consol.log(test);

// 即便是使用var申明变量，作用域也存在一定的扩大问题（后面讲解）
// 所以ES6，也就是ECMAScript2015，重新定义了两个关键字let、const
// let 定义变量（推荐以后使用）
// const定义常量
let name = "刘建宏";
const VERSION = "1.0";

console.log(name);
console.log(VERSION)

1.7.4 变量的命名规范

在JavaScript中，变量的名称命名是存在规范的，主要需要遵循如下几条规则：

变量名只能有有效符号组成（大小写字母、数字、下划线_、$），注意：在有些编程语言中$并不是有效符号，如python
变量名不能以数字开头！！切记
变量名不能使用关键字或者保留字
变量名最好有意义，如年龄使用age、姓名使用name，不要使用a、b这种无意义的单词或者字母
变量名应当尽量遵循小驼峰法名称，如userName、classRoom等，当然下划线法也行，如user_name。但是建议跟官方保存一致，使用小驼峰法，类的名称使用大驼峰法。
1.8 常量

常量：和变量对应，变量是指在程序运行时可以值发生变化的量，而常量就是在程序运行时不能变化、固定的量，JavaScript早期并没有专门的关键字来定义常量，一般就是变量充当常量，在ES6之后，专门提供了const关键字来定义常量。
```
 // 定义了一个版本的常量
const VERSION = "1.0"
console.log(VERSION)

// 修改值，常量不允许，会报错
VERSION = "2.0"
```
运行时，第一次输出1.0，之后修改常量，则报错，如图

所以常量主要用来申明一些固定的值，如PI、E等。

1.9 数据类型

JavaScript提供了两大类数据类型：基本数据类型和引用数据类型（对象、指针）。
基本数据类型
- 数值类型（Number）
  - int 整数
  - float 小数、浮点数
- 布尔类型（Boolean）
  - 只有两个值 -- true、false
- 字符串（String）
  - 被单引号或者双引号引起来的符号，ES6中两个`符号引起来的也是字符串
- 空（null）
  - 表示不存在
- 未定义（undefined、空的特殊表现）
  - 表示引用未定义的变量
- 不是数字（NaN - Not a Number）
  - 判断不是数字
引用数据类型
- 数值（Array）
- Object（对象）万物皆对象