JavaScript初识——1

1. 编程语言

1.1 编程语言和标记语言的区别

编程语言有很强的逻辑和行为能力，在编程语言里，你会看到很多if else、for、while等具有逻辑性和行为能力的指令，这是主动的；
标记语言（HTML）不用于向计算机发出指令，常用于格式化和链接，标记语言的存在是用来被读取的，他是被动的。

1.2 总结

1. 计算机可以帮助人类解决某些问题；
2. 程序员利用编程语言编写程序发出指令控制计算机来实现这些任务；
3. 编程语言有机器语言、汇编语言、高级语言；
4. 高级语言需要一个翻译器转化为计算机识别的机器语言；
5. 编程语言是主动的，有很强的逻辑性；

2. 计算机基础

2.1 计算机组成

2.2 计算机基础

1. 计算机内部使用二进制 0 和 1 来表示数据。
2. 所有数据，包括文件、图片等最终都是以二进制数据（0 和 1）的形式存放在硬盘中的。
3. 所有程序，包括操作系统，本质都是把各种数据，也以二进制形式存放在硬盘中。平时我们所说的安装软件，其实就是把程序复制到硬盘中。
4. 硬盘、内存都是保存的二进制数据。

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

1. 打开某个程序时，先从硬盘中把程序的代码加载到内存中；
2. CPU执行内存中的代码；
3. 注意：之所以要内存的一个重要原因，是因为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 的关系

1. html/css标记语言–描述类语言

• HTML决定网页结构和内容（决定看到什么），相当于人的身体；
• CSS决定网页呈现给用户的模样（决定好不好看），相当于给人穿衣服、化妆；

2. JS脚本语言–变成类语言

• 实现业务逻辑和页面控制（决定功能），相当于人的各种动作；

2.1.4 浏览器执行JS简介

1. 浏览器分成两部分：渲染引擎何JS引擎；

• 渲染引擎：用来解析HTML与CSS，俗称内核，比如chrome浏览器的blink，老版本的webkit；
• JS引擎：也成为JS解释器，用来读取网页中的JavaScript代码，对迄今处理后运行，比如chrome浏览器的V8

浏览器本身并不会执行JS代码，二十通过内置JavaScript引擎（解释器）来执行JS代码。JS引擎执行代码时逐行解释每一句源码（转换为机器语言），然后由计算机去执行，所以JavaScript语言归为脚本语言，会逐行解释执行。

2.1.5 JS的组成

1. ECMAScript
   ECMAScript是由ECMA国际（原欧洲计算机制造商协会）进行标准化的一门编程语言，这种语言在万维网上应用广泛，他往往被称为JavaScript或Jscript，但实际上后两者是ECMAscript语言的实现和拓展
   
   ECMAScript：ECMAScript规定了JS的编程语法和基础核心知识，是所有浏览器厂商共同遵守的一套JS语法工业标准
2. DOM——文档对象模型
   文档对象模型，是W3C组织推荐的处理可拓展标记语言的标准编程接口。通过DOM提供的接口可以对页面上的各种元素进行操作（大小、位置、颜色等）。
3. BOM——浏览器对象模型
   BOM是指浏览器对象模型，它提供了独立于内容的、可以与浏览器窗口进行互动的结构对象，通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等；

2.1.6 JS初体验

JS有三种书写位置：行内、内嵌、外部

1. 行内式
   <input type="button" value="点我试试" onclick="alert('Hello World')">
   

• 可以将单行或者少量JS代码写在HTML标签的事件属性中（以 on开头的属性），如：onlink
• 注意单双引号的使用：在HTML中我们推荐使用双引号，JS中我们推荐使用单引号；
• 可读性差，在HTML中编写JS大量代码时，不方便阅读；
• 引号易错，引号多层嵌套匹配时，非常容易弄混；
• 特殊情况下使用

2. 内嵌JS

<script>
    alert('hello world');
</script>

• 可以将多行JS代码写到<script>标签中
• 内嵌JS是学习时常用的样式

3. 外部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 变量概述

1. 变量的定义：变量是用于存放数据的容器。我们通过变量名获取数据，甚至数据可以修改；
2. 变量在内存中的存储本质：变量是程序在内存中申请的一块用来存放数据的空间。

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 数字型

1. 数字型进制：八进制前面加 0 ，十六进制前面加 0x;
2. 数字型的三个特殊值

alert(Infinity); //Infinity
alert(-Infinity);//-Infinity
alert(NaN)//NaN

• Infinity，代表无穷大，大于任何数值；
• -Infinity，代表无穷小，小于任何数值；
• NaN，Not a number，代表一个非数值；

3. isNaN()

用来判断一个变量是否为非数字的类型，返回ture或者false

4.2.4 字符串型String

1. 字符串引号嵌套：外单内双，外双内单；

var str1 = '我是"高富帅"';
var str2 = "我是'高富帅'";

2. 字符串拼接加强

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

小总结

在本次培训中,学会了使用浮动的操作,网页的空间排布更加优化.分清楚padding和margin.
新学会了伪元素的使用.
我去搜索了更多盒子模型样式的使用,比如文字与盒子阴影,实现盒子水平居中的方法