1.初识JavaScript

1.2 JavaScript是什么

JavaScript是世界上最流行的语言之一，是一种运行在客户端的脚本语言

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

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

1.3 JavaScript的作用

表单动态效验（密码强度检测）

网页特效

服务器开发（Node.js）

桌面程序（Electron）

APP（Cordova）

控制硬件-物联网（Ruff）

游戏开发（cocos2d-js）

1.4 HTML/CSS/JS的关系

HTML/CSS标记语言--描述类语言

HTML决定网页结构和内容（决定看到什么），相当于人的身体

CSS决定网页呈现给用户的模样（决定好不好看）相当于给人穿衣服、化妆

js脚本语言--编程类语言

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

浏览器执行JS简介

浏览器分成两部分 渲染引擎和JS引擎

渲染引擎：用来解析HTML与CSS，俗称内核，比如chrome浏览器的blink，老版本的webkit

JS引擎：也成为了JS解释器。用来读取网页中的JavaScript代码，对其处理后运行，比如chrome浏览器的V8

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

1.5 JS组成

ECMAScript——JavaScript语法：是由ECMA国际（原欧洲计算机制造商）进行标准化的一门编程语言，这种语言在万维网上应用广泛，它往往被称为JavaScript或jscript，但实际上后两者是ECMAScript语言的实现和扩展

ECMAScript：ECMAScript规定了JS的编程语法和基础核心知识，是所有浏览器厂商共同遵守的一套JS语法工业标准

DOM——页面文档对象模型

文档对象模型，是W3C组织推荐的处理可扩展标记语言的标准编程接口通过DOM提过的接口可以对页面上的各种元素操作（大小、位置、颜色等）

BOM——浏览器对象模型

浏览器对象模型，它提供了独立于内容的、可以与浏览器窗口进行活动的对象结构。通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器挑战、获取分辨等。

1.6 JS

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

行内：<input type=button value="怎样学习JS行内" onclick="alert('这就是JS行内')">

[注]：

可以将单行或少量代码写在HTML标签的事件属性中（以on开头的属性），如：onclick

注意单双引号的使用：在HTML种我们推荐使用双引号，JS种我们推荐使用单引号

可读性差，在HTML中编写JS大量代码时，不方便阅读

引号易错，引号多层嵌套匹配时，非常容易弄混

特殊情况下使用

可以将单行或少量JS代码写在HTML 标签的实践属性中（）

内嵌：<script>alert('我是一个警示框')</script>

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

内嵌JS是学习时常用的方式

外部：<script src="xxx.js"></script>

利用HTML页面代码结构化，把大段JS代码独立到HTML页面之外，既美观，也方便文件级别的服用

应用外部JS文件的script标签中间不可以写代码

适合于JS代码量比较大的情况

---

JavaScript注释

单行Ctrl+/

多行Ctrl+shift+/（需要在快捷式菜单设置）

JavaScript输入输出语句

prompt()

浏览器弹出输入框，用户可以输入（展示给用户的）

alert()

浏览器弹出警示框

console.log()

浏览器控制台打印输出信息（给程序员测试的）

---

1.变量概述

1.1什么是变量

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

1.2变量在内存中的存储

本质：变量是程序在内存中申请的一块用来存放数据的空间

变量的使用

变量在使用时分为两步：

1.声明变量

如：var age；

var 是一个JS关键字，用来声明变量使用该关键字声明变量后，计算机会自动为变量分配内存空间，不需要程序员管

    示例中的age是程序员定义的变量名，我们要通过变量名来访问内存中分配的空间

    2.赋值

    如：var age = 18；

    声明一个变量并赋值，我们称之为变量的初始化

---

    变量案例：有个卡卡西的人在旅店登记的时候前台让他填一张表，这张便利的内容要存到电脑上，表中的内容有：姓名、年龄、邮箱、家庭住址和工资，存储之后需要把这些信息显示出来，所显示的内容如下：我叫旗木卡卡西，我住在火影村，我今年30岁了，我的邮箱是kakaxi@itcast.cn，我的工资2000

    代码如下：

    <script>

    var myname ='旗木卡卡西'，age =18，address = kakaxi@itcast.cn，home = '火影村'，money =2000；

    console.log( myname)；

    console.log( age)；

    console.log( address)；

    console.log( home)；

    console.log( money)；

    </script>

解析：变量myname、age、address、home、money

---

    案例：变量的使用

    1.弹出一个输入框，提示用户输入姓名

    var myname=prompt('请输入您的名字')；

    2.弹出一个对话框，输出用户刚才输入的姓名

    alert(myname)；

---

1.4变量语法扩展

1.更新变量

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

如：var age = 18；

        age = 81；

        console.log(age)；

2.声明多个变量

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

如：var age = 10，name = '张帅'，sex = 2；

3.声明变量的特殊情况

只声明不赋值

如：var sex；

console.log(sex)；

结果：undefined

原因：程序也不知道里面存的是什么，所以结果是undefined（未定义）

不声明，不赋值，直接使用

如：console.log(tel)；

结果：报错

原因：因为没有声明且也没有赋值，直接使用变量导致报错

不声明只赋值使用

如：qq = 100；

console.log(qq)；

结果100

原因：此用法的变量会变成全局变量

1.5变量命名规范

有字母（A-Za-z）、数字（0-9）、美元符号（$）组成，如：usrAge，num01，_name

严格区分大小写 var app；和var App；是两个变量

不能以数字开头 18age是错误的

不能是关键字、保留字如：var、for、while

变量名有意义

遵守驼峰命名法首字母小写，后面单词的首字母需要大写 如：myFirstName

如果有不知道的英文变量名可以百度翻译、有道翻译等翻译网页或软件

【注】尽量不要使用name作为变量名因为有特定含义

如：console.log(name)；

结果：显示为空白

---

案例：

要求：交换两个变量的值（实现思路：使用一个临时变量用来做中间存储）

<script>

var apple1 ='青苹果'；

var apple2 ='红苹果'；

temp = apple1；//右边给左边

apple1 = apple2；

apple2 = temp；

</script>

【注】如果第一时间做不出来时最好的方法是画图去分析并了解逻辑关系

解析：我们需要一个临时变量temp, 把apple1给临时变量temp把apple2交给apple1把temp给apple2，最后实现apple1与apple2交换位置

---

1.5 总结

为什么需要变量？

因为我们需要一些数据需要保存

变量是什么？

变量就是一个容器，用来存放数据方便我们以后使用里面的数据

变量的本质是什么？

变量是内存里的一块空间，用来存储数据

变量怎么使用？

我们使用变量的时候，一定要声明变量，然后赋值

声明变量本质失去内存申请空间

什么是变量的初始化？

声明变量并赋值我们称之为变量的初始化

变量命名规范有哪些？

变量名尽量要规范，使用驼峰命名法

区分哪些变量名不合法

交换2个变量值的思路？

如：分析题干要求是什么？应该怎样做？如何做？解决方法是什么？首先可以先画图，把逻辑关系理清楚，了解清楚原理后，最后在转换成代码形式表示

---

1.数据类型简介

1.1 为什么需要数据类型

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

简单来说，数据类型就是数据的类别型号。比如姓名张三，年龄18这些数据的类型是不一样的，因为姓名张三语言是字符串，而年龄18是数字类型

1.2变量的数据类型

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

如：var age = 10；

        这是一个数字型

        var areYouok = '是的'；

        这是一个字符串

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

JavaScript拥有了动态类型，提示也意味着相同的变量可用作不同的类型：

如：var x = 6；

        x为数字型

        var x = "Bill"；

         x为字符串

        console.log(x)；

         显示：Bill

原因：因为JavaScript是一个动态语言，当你给变量赋值为6时就显示为6当你又给变量赋值Bill时又会显示Bill，所以在例子中最后显示结果就是Bill。

1.3 数据了类型的分类

JS把数据类型分类两类：

简单数据类型（Number（数字型）、String（字符串型）、Boolean（布尔型）、Undefined（未定义）、Null（空））

复杂数据类型（object）

2.简单数据类型

2.1简单数据类型（基本数据类型）

Number  数字型，包含整型和浮点型值，如21、0.21

String   字符串型，如"张三" 注意JS里面，字符串都带引号

Boolean  布尔型，如true、false，等价于1和0

Undefined  var a；声明了别来a但是没有给支，此时a = undefined

Null  var a = null 声明了变量a 为空值

2.2数字型Number

JavaScript数字类型既可以用来保存整数值，也可以保存小数（浮点数）

var age = 21；（整数）

var age = 21.3747；（小数）

数字型进制

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

八进制 （0~7 ）：程序里面数字前面加0表示八进制

如：var num1 = 010；

        console.log(num1)；

十六进制 （0~9 a~f ）：数字前面加0x表示十六进制

如：var num2 = 0x010；

        console.log(num2)；

数字型范围（了解即可）

JavaScript中数值的最大值和最小值

如：数字型的最大值

console.log(Number.MAX_VALUE)；

数字型的最小值

console.log(Number.MIN_VALUE)；结果就不在这里写了

数字型三个特殊值（了解即可）

infinity，代表无穷大，大于任何数值

如：console.log(Number.MAX_VALUE*2)；

-infinity，代表无穷小，小于任何数值

如：console.log(-Number.MAX_VALUE*2)；

NaN，Not a number，代表一个非数值

如：console.log('张三'-100)；

扩充：isNaN()：这个方法是用来判断非数字并且返回一个值如果是数字返回的是false如果不是数字返回的是true

如：console.log(isNaN(12))；

结果：false

如：console.log(isNaN('张三'))；

结果：true

2.3字符串型String

字符串型可以是引号中的任意文本，其语法为双引号和单引号

如：var myname = "中国人"；

        var myhome = '中国'；

【注】因为HTML标签里面的属性使用的是双引号，JS中尽量使用单引号，便于区分

字符串转义符

类似HTML里面的特殊字符，字符串中也有特殊字符，我们称之为转义符。

转义符都是\开头的，常用的转义符：

\n：换行符

\\：斜杠\

\'：单引号

\''：双引号

\t：缩进与tab用法相同

\b：空格

---

案列：弹出网页警示框

<script>

alert('红彤彤的柿子不仅好看，也很好吃，他说道："快来摘柿子喽!" \n忘不了故乡的父老乡亲！忘不了故乡的一草一木！\n而且随着年龄的增长，儿童和青少年时代的一些美好的记忆只要稍微触碰就会像冲开堤坝的潮水奔涌而来。')

</script>

解析：在alert是弹出警示框，/n是转义符里的换行字符所以如果在一段文字里需要换行就需要用到转义字符里的换行符/n

---

字符串长度

字符串是由若干字符组成，这些字符的数量就是字符串的长度。通过字符串的length属性可以获取整个字符串的长度

如：var myname = '中国人炎黄子孙'

        alert(myname.length)；

显示：7

字符串拼接

多个字符之间可以使用 + 进行拼接，其拼接方式为字符串+任何类型=拼接之后的新字符串

拼接前会把与字符串相加的任何类型转成字符串，在拼接成一个新的字符串

字符串相加：

console.log('我是'+'中国人')；

显示：我是中国人

数值字符串相加：

console.log('今年我'+18)；

显示：今年我18

数字字符串加数值：

console.log('12'+15)；

显示：1215

【注】数字字符串是在数值上加上单引号，加上单引号的数值就会变成数字字符串即字符串

提升记忆：

+号口诀：数值相加，字符相连

字符串拼接加强

如：console.log('我今年'+18+'岁')

显示：我今年18岁

var age = 18；

console.log('我今年'+age)

显示：我今年18

经常会将字符串和变量来拼接，因为变量可以很方便的修改里面的值

变量是不能添加引号的，因为加引号的变量会变成字符串

如果变量两侧都有字符串拼接，口诀引引加加，删掉数字，变量写加中间

---

案例：显示年龄

弹出一个输入框，需要输入用户年龄，之后弹出一个警示框显示您今年xx岁（xx表示刚才输入的年龄）

<script>

var age = prompt(' 请输入您的年龄：')；

alert('您今年+age+'岁')；

</script>

显示：您今年xx岁（输入多少岁就会显示多少岁）

解析：弹出一个输入框（prompt）、把输入的值用变量保存起来，把刚才输入的年龄与索要输出的字符串拼接、是alert语句弹出警示框

2.4布尔型Boolear

布尔型有两个值：true和false，其中true表示真，而false表示假

布尔型和数字型相加的时候，true的值为1，false的值为0

如：

console.log(true+1)；

显示：2

console.log(false+1)；

显示：1

2.5undefined和null

undefined：如果一个变量声明为赋值就是undefined 未定义数据类型

如：var age；

       console.log(age)；

显示：undefined

非定义数据类型与数字相加时

如：var age；

       console.log(age+1)；

显示：NaN（非数值）

null：一个声明变量给null值，里面存的值为空

如：var age = null；

        console.log(age)；

显示：null（空）

3.获取变量数据类型

3.1获取检测变量的数据类型

typeof可用来获取检测变量的数据类型

如：var num = 10；

        console.log(typeof num)；

显示：number