JS基础语法（一）

JavaScript基础语法（一）

一、基本概念

1、 编程

编程：就是让计算机为解决某个问题而使用某种程序设计语言编写程序代码，并得到结果的过程

计算机程序：就是计算机所执行的一系列问题的指令集合，而程序全部都是用我们所掌握的语言来编写的，所以人们要控制计算机一定要通过计算机语言向计算机发出命令

2、 计算机语言

计算机语言指用于人与计算机之间通讯的语言，它是人与计算机之间传递信息的媒介。计算机语言种类非常多，总的来说课可以分成机器语言、汇编语言和高级语言三大类

3、 编程语言

可以通过类似于人类语言的“语言”来控制机器，让计算机为我们做事情，这样的语言就叫做计算机语言

编程语言是用来控制计算机的一系列指令，它有固有的格式和词汇（不同编程语言的格式和词汇不一样），必须遵守

如今通用的编程语言有两种形式：汇编语言和高级语言

• 汇编语言和机器语言实质是相同的，都是直接对硬件操作，只不过指令采用了英文缩写的标识符，容易识别和记忆
• 高级语言主要是相对于低级语言而言，它并不是特指某一种具体的语言，而是包括了很多编程语言

4、 编程语言和标记语言的区别

编程语言：有很强的逻辑和行为能力。在编程语言里，有很多具有逻辑性和行为能力的指令，这是生动的

标记语言：不同于向计算机发出指令，常用于格式化和链接。标记语言的存在是用来被读取的。这个是被动的

5、总结

• 计算机可以帮助人类解决某些问题
• 程序员利用编程语言编写程序发出指令控制计算机来实现这些任务
• 编程语言有机器语言、汇编语言、高级语言
• 高级语言需要一个编译器转换为计算机识别的机器语言

6、 计算机基础

计算机组成

硬件

• 输入设备

• 输出设备

• CPU

  • 负责数据处理和运算

• 硬盘

• 内存

  • 硬盘和内存都是负责存储数据，硬盘永久存储数据，内存暂时存储数据

软件

• 系统软件
  • Windows、Linux、macOS
• 应用软件

数据存储

1. 计算机内部使用二进制表示数据

2. 所有数据，包括文件、图片等最终都是以二进制数据的形式存放在硬盘中的

3. 所有程序，包括操作系统，本质都是各种数据，也以二进制数据的形式存放在硬盘中，平时我们所说的安装软件，其实就是把程序文件复制到硬盘中

4. 硬盘、内存都是保存二进制数据

5. 存储单位

   bit < byte < kb < MB < GB < TB

   1byte = 8 bit / 其他的都与 1 kb = 1024 byte 类似

程序运行

1. 打开某个程序时，先从硬盘中把程序的代码加载到内存中

2. CPU执行内存中的代码

   注意：之所以要内存的重要原因，是因为CPU运行太快了，如果只是从硬盘中读取数据，会浪费cpu性能。所以，才使用存取速度更快的内存来保存运行时的数据

二、 初识JavaScript

1、JS简介

JavaScript是一种运行在客户端的脚本语言

• 脚本语言：不需要编译，运行过程中由js解释器（js）引擎逐行进行解释并执行

现在也可以基于Node.js技术进行服务端编程

浏览器执行JS简介

• 渲染引擎：用来解析HTML与CSS，俗称内核
• JS引擎：也称为JS解释器。用来读取网页中的JS代码，对其处理后运行
• 浏览器本身并不会执行JS代码，而是通过内置的JS引擎（解释器）来执行JS代码。JS引擎执行代码时逐行解释每一句源码（转换为机器语言），然后由计算机去执行，所以JS语言归为脚本语言，会逐行解释执行

JS的组成

• JavaScript语法：ECMAScript
• 页面文档对象模型：DOM
  • 通过DOM提供的接口可以对页面上的各种元素进行操作（大小、颜色、位置等）
• 浏览器对象模型：BOM
  • 通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等

2、 JS初体验

JS有3种书写位置，分别为行内、内嵌和外部

• 行内式

  • <!-- 内嵌式，弹出警示框 -->
    <input type="button" value="唐伯虎" onclick="alert('秋香姐')">   	
    

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

• 内嵌式

  • <!-- 在头标签写入 -->
    <script>alert("js")</script>
    

    • 可以将多行JS代码写到<script>标签中

• 外部式

  • alert("一个警示框")
    

  • <!-- 外部导入 -->
    <script src="./homework.js"></script>
    

    • 利于HTML页面代码结构化，把大段JS代码独立到HTML页面之外，既美观，也方便文件级别的复用
    • 引用外部JS文件的script标签中间不可以写代码
    • 适用于JS代码量比较大的情况

3、 JS注释

// 单行注释  Ctrl + /

/*
这为多行注释  默认：Shift + Alt + A
*/

4、 输入输出

为了方便信息的输入和输出，JS提供了一些输入输出语句

方法	说明	归属
alert(msg)	浏览器弹出警示框	浏览器
console.log(msg)	浏览器控制台打印输出信息	浏览器
prompt(info)	浏览器弹出输入框，用户可以输入	浏览器

<script>
prompt("请输入你的年龄");  // 这是一个输入框
alert("弹出警示框");  // 弹出警示框，输出展示给用户的
console.log("我是程序员能看到的");  // 控制台输出的 
</script>

三、 变量

1、变量的主要作用

变量就是一个存放数据的容器，我们通过变量名获取数据，甚至数据可以修改

变量是程序在内存中申请用来存放数据的空间

2、 变量的使用

变量在使用的过程中分为两步：1. 声明变量 2. 赋值

声明变量

var age;  // 声明一个名称为age的变量

1. var是一个JS关键字，用来声明变量（variable）。使用该关键字声明变量后，计算机会自动为变量分配内存空间，不需要程序员管理
2. age是程序员定义的变量名，我们要通过变量名来访问内存中分配的空间

赋值

age = 10;  // 给age这个变量赋值为10
console.log(age);  // 输出结果

1. 用来把右边的值赋给左边的变量空间中，赋值
2. 变量值是程序员保存到变量空间里面的值

变量初始化

var age = 18;  // 声明变量的同时赋值为18

声明变量的同时赋值叫做变量的初始化

小案例

    var name;  
    name = prompt("请输入你的名字");  // 输入姓名之后，存储到一个name变量里面
    alert(name);  // 输出姓名

3、 变量扩展

更新变量

一个变量被重新赋值以后，它原有的值就会被覆盖，变量值将以最后一次赋的值为准

声明多个变量

同时声明多个变量时，只需要写一个var，多个变量名之间使用英文的逗号隔开

var age = 18;
var name = "李华";

// 这样写太麻烦了，可以这样写
var age = 18,
    name = "李华";

特殊情况

情况	说明	结果
var age; console.log(age)	只声明变量 不赋值	underfined
console.log(age)	不声明，不赋值，直接使用	报错
age = 10;console.log(age)	不声明，只赋值	10

4、 命名规范

• 由字母、数字、下划线、美元符组成
• 严格区分大小写
• 不能以数字开头，18age是错误的
• 不能是关键字、保留字
• 变量名必须有意义
• 遵守驼峰命名法。首字母小写，后面单词的首字母大写 ，myFirstName

5、 交换变量

var name1 = "lihua";
var name2 = "xiaoming";  // 交换名字

var temp = name1;  // temp存储临时值
name1 = name2;
name2 = temp;   

四、 数据类型

1、 数据类型简介

在计算机中，不同的数据所占用的存储空间是不同的，为了便于吧数据分成所需内存大小不同的数据，充分利用存储空间，于是定义了不同的数据类型

2、 变量的数据类型

变量是用来存储值的所在处，它们有名字和数据类型。变量的数据类型决定了如何将代表这些值的位存储到计算机内存中。JS是一种弱类型或者说动态语言。这意味着不用提前声明变量的类型，在程序运行的过程中，类型会被自动确定

var num;  // 不确定是什么数据类型
num = 10;  // 数字类型
num = "hello";  // 重新赋值后，变成字符串类型

在代码运行时变量的数据类型是由JS引擎根据 = 右边变量值的数据类型来判断的，运行完毕之后，变量就确定了数据类型

js是动态语言，变量的数据类型是可以变化的

3、 简单数据类型

JS把数据类型分为两类

• 简单数据类型（Number, String, Boolean, Undefined, Null）
• 复杂数据类型（object）

数据类型	说明	默认值
Number	数字型，包含整型值和浮点型值	0
Boolean	布尔型值	false
String	字符串类型	“”
Undefined	var a;声明了变量但是没有赋值	undefined
Null	var a = null; 声明了变量a为空值	null

数字型

数字型进制

最常见的进制有二进制、八进制、十六进制、十进制