JS的入门到真实项目的实践

• js的历史由来js书写的位置js的基本语句js的变量以及变量命名规范数据类型 (面试)运算符循环数组函数作用域预解析完结

前面更新了h5的相关知识，接下来学习js，根据上面的学习可以知道js属于高级语言，而js就是来规范行为的。

首先，我们用思维导图来看一下学完这篇JavaScript你会学到什么？

js的历史由来

js:是运行在客户端的脚本语言。

是由布莱登*艾奇(现在还存在)——用了10天的时间研发出的——研发出来的时候，为livescript在网景公司——由于sun公司收购后(当时sun公司比较流行的语言就是java)所以，更名为JavaScript。
由以上的由来你就可以知道，javascript与Java之间没有任何联系，只是简单的蹭了一个热度。
而JavaScript的组成，分为三部分。1，ECMAscript 2，DOM(页面文档)3，BOM(浏览器)

js书写的位置

1，行内
当写少量的代码的时候，这时候我们可以写在行内。
例如：

注：1，单行或者少量的代码写在HTML的body中，一定要以on开头。2，关于引号的问题，在书写习惯的时候，写HTML的内容，我们用双引号，写js的内容的时候，我们用单引号。

2，内嵌

写js的相关代码的时候，可以直接写在head里面，但是在写多行的js的代码的时候一定要用script包裹起来。

1

3，外部
可以新建一个文件夹用来写js的相关内容，然后再引进来。

js的基本语句

alert(msg)     //浏览器弹出小方框console.log(msg) //  控制台打印出信息prompt('info')//浏览器弹出输入框，用户输入信息

例如：

alert('Hello world')

显示为：

prompt('请输入你的名字')

显示为：

js的变量以及变量命名规范

注：
1，变量(定义)：用于存储数据的容器。
2，首先要声明变量的类型其次在进行赋值。
3，更新变量：当更新变量的时候，以最后一次为准。
4，当声明多个变量的时候，中间使用逗号进行隔开，以分号结尾。

1，只声明不赋值         显示为：undefined2，不声明不赋值直接用     显示为：报错3，只赋值不声明          显示为:可以使用但不建议，不符合常用规范

变量命名规范：
1，由字母，数字，下划线以及美元$符号组成
2，严格区分大小写。小写和大写是完全不同的
3，不能以数字开头，不能是关键字以及保留字
4，变量名要有意义，遵守驼峰命名。

驼峰命名：

myFristname(属于驼峰命名法，第一个字母小写第二个字母开始大写)

数据类型 (面试)

数据类型的定义：根据数据占不同的储存空间，所以把数据划分不同的类型。
js的变量数据类型是只有程序在运行的过程中，由等号右边的值所确定的。即：变量的数据类型是由js引擎根据等号右边的变量值的数据类型进行判断。

数据类型的分类：

1，简单：

number类型 、string类型(字符串类型)、Boolean类型、undefined类型、NUll(空类型)

2，复杂

object类型

注：数据类型是入门的常识一定一定要知道！而且面试也会考！！！

表现形式

Number类型       数字类型                    默认值：0Boolean类型      布尔类型 值为true或者false   默认值：falseString类型       字符串类型，必须带上引号      默认值：""undefined        声明变量无值               默认值:undefinedNull          声明 var a = Null，声明a为空值   默认值：null

Number 类型

1，number类型

主要分为二进制，八进制 ，十进制 ，十六进制

举例：

八进制 ： 0 - 7之间，一般数字前面加0表示八进制

十六进制 ：数字0 - 9，字母a - f 之间，比如：#ffffff 表示的是白色，一般数字前面加0X表示十六进制

2，数字范围(了解)

最大：alert(Number.Max_VALUE)//1.709769e + 308
最小：alert(Number.Min_VALUE)// 5e -324

3 ，特殊值(了解 NaN是一个重点)

1，infinity:无穷大

alert(Infinity)

2，负的 infinity 就为无穷小

3，NaN 意思就是 not a Number 代表非数值

例如：

当我们利用prompt让用户传输一个数字的时候，传进来就是一个字符串的形式，没有转换为数字，直接参与运算，返回的值就为NaN

注：

isNaN ( X ) 判断数字：

x为非数字，返回的值是：truex为数字，返回的值是：false

String类型

String类型表示形式为字符串类型，一般字符串的表现形式为 : 进行加单引号或者双引号

1 ， 字符串转义符：转义符以 开头：

 n : 换行       " : 双引号      :斜杠      t : 缩进    b :空格

2，字符串的引号嵌套：外双内单 或者 外单内双

3，字符串的长度 ：使用length来获取字符串的长度

var str = 'my name is andy';console.log( str.length) // 15

4，字符串的拼接

字符串 + 任何类型 = 拼接后的新字符串
注：
1, 结果一定为字符串类型
2, 数值相加，字符相连

var age = 19 ;console.log('我今年已经'+ 19 +'岁了');//属于字符串类型，符号可巧记为 ：引引加加

undefined 类型

举例：

var str = undefined;console.log(str + 'pink')//undefinedpink

Null 类型

举例：

var str = Null;console.log( str + 'pink')//Nullpink

使用typeof检测数据类型

举例：

var num = 10;console.log( typeof num);//number类型

类型转换

转为字符串 ：
1，变量.toString()

1，变量.toString()   var num = 10;alert(num.toString())

2，String变量

var num = 1;alert(String(num));

3，加号拼接：数字加一个字符串等于一个字符串

var num = 1;alert(num + '字符串');

转换成数字型
1，parseInt(String)函数

parselnt('18');//转换成整形

2，parseFloat(string)函数

parseFloat('78.21')//转换成浮点型

3，Number(’ ')强制转换

Number('12');

注：
parseInt(’ 120px’) 结果为120 会去掉px, parsefloat类似。
rem(‘120px’) 结果为NAN

4,利用算法运算加 减 乘以及除实现隐式转换
比如：

console.log('12'-0);//双引号的12为字符串类型，当减去零的时候，字符串转换成数字类型，结果为12

4，转换为布尔类型

方式：Boolean( ) 函数

注：
1，当出现 0 、NAN、null、undefind以及空时，出现的值都是false.
2,其余的值为true.

标识符

标识符：开发人员为变量起的名字
关键字：js本身以及使用的名字，不能充当为变量名
保留字：未来可能成为关键字

算数运算符：加、减、乘和除前置递增运算符：

运算符

++num类似于num = num + 1先加1在参与运算

后置递增运算符：

num++类似于 num = num + 1先参与运算后加1

关于等于

一个等于：是进行赋值；两个等于：判断两边的值是否相等三个等于：判断两边的值和类型是否完全相等

逻辑运算符

&&：and的作用||：or的作用！：not的作用

赋值运算符

= ：直接赋值+=、-=：加减一个数后再进行赋值*=、/=、%=:乘除取模后再进行复制

循环

if else循环

if(条件表达式){语句1}else if(条件表达式){语句2}

三元表达式

条件表达式 ? 表达式 1 ：表达式 2执行思路：1，当条件表达式为真，则返回到表达式1的值2，当条件表达式为假，则返回到表达式2的值

倒计时准备——小热身

用户输入数字，若num<10，则前面补0则不补0

var time = prompt("请输入一个0-59之间的数字");

switch语句

switch(表达式){case value1:执行语句1；break;case value2:执行语句1；break;case value3:执行语句1；break;case value4:执行语句1；break;...default;执行最后的语句；}

小面试(switch 与if else if语句的区别)
1, switch:确定某个值的情况，if else确定于某个范围
2，条件判断后直接执行到某一个语句，效率比较高，而if else需要经过多次判断
3，一般情况下，可以互相转换

for循环

for(初始变量；条件表达式1；操作表达式){}

小面试：
continue与break的区别：
continue：跳出本次循环，继续执行下一次循环
break：立即跳出整个循环

数组

定义数组以及获取数组

var arr = [ ]//定义数组数组名[索引号]//获取数组里的数

遍历

1，使用for循环来进行遍历数组的元素
2，for循环里面的i表示的是计算器的索引号
3，通过length来获取数组里面的元素，如arr.length

举例：把元素里面的所有数都进行遍历了一遍

var arr = ['red','green','blue'];for (var i = 0；i < arr.length ; i++){console.log(arr[i]);}

小面试：
如何在数组中增加元素？
通过1，通过修改length的长度；
原因：
1，通过length长度实现数组扩容的目的；
2，length属性有可读写
通过2，索引号增加数组元素；

建议(关于学习数组需要练习的习题的经典例题)：
1，利用数组求最大值
2，筛选数组
3，翻转数组
4，冒泡数组

函数

函数就是封装一段可以被重复的代码块

1，声明函数

function 函数名( 形参1，形参2){//函数体}函数名(实参1，实参2)

注：
1，function声明函数的关键字，全部小写
2，函数是做某件事情，函数名一般是动词
3，函数不调用自己不执行

调用函数

函数名()；//调用函数的时候一定要加小括号

举例：

function cook(aru){console.log(aru);}cook('Hello word')//实参的值hello word传到形参，之后在进行执行下去

函数的返回值return

function 函数名(){return 需要返回的结果；}函数名()；

只要函数遇到return就把后面的结果返回到函数的调用者，在实际开发过程中，经常用一个变量来接受函数的返回结果。

函数有return,则返回到return后面的值；函数没有return，则返回到undefined；

小面试：
break、continue以及return的区别:
1,break:结束当前的循环(比如for循环)
2,continue:结束本次循环，继续执行下一个循环
3,return:不仅可以退出循环，还能够返回到值，同时还结束当前的函数体

argument的使用

在js当中，每一个函数都有一个内置的函数对象，所有函数都有一个内置的argument对象，argument对象中存储了传递的所有实参

function fn(){console.log(arguments);}fn(1,2,3)

其中，fn是以一个伪数组的形式存储，即

argument(3)

argument具有的属性：
1，具有数组的length的属性；
2，按照索引的方式进行存储；
3，没有真正的数组的方法

作用域

变量的作用域根据全局作用域主要分为全局变量以及局部变量(局部变量只能在函数内部进行使用)

全局变量：只有浏览器关闭的时候才会销毁，比较占内存资源。
局部变量：当我们程序执行完毕就会销毁，比较节约内存资源

作用域链

当内部函数访问外部函数的变量，采取的是链式查找方式，决定选取哪一个值，采取就近原则

举例：

var num = 10;function fn(){var num = 20;}function fun(){console.log(num);//查找上一层是否有num，有num即为20}}

预解析

由于js代码是由浏览器中的js解析器来执行，js解析器主要分为预解析以及代码执行

预解析：js引擎会把js里面的所有的var还有function提升到当前作用域的最前面
代码执行：依次从上往下进行执行。