前端入门之JavaScript基础

JavaScript概述

JavaScript是一种解释性的、基于对象的脚本语言，主要是基于客户端运行的。
JavaScript具有的特点：

• 脚本编写语言——采用小程序端方式来实现编程的脚本语言。是解释性语言，在运行过程中被逐行解释。它可以与HTML标识结合在一起，方便用户使用。
• 基于对象的语言——是一种基于对象的语言，可以看作是一种面向对象的语言。他能运用自己已经创建的对象，许多功能可能来自脚本环境中对象的方法与脚本的相互作用。
• 简单性——首先它是一种基于Java基本语句和控制流之上的简单而紧凑的设计，其次他的变量类型是采用弱类型，并未使用严格的数据类型。
• 安全性——JavaScript是一种安全性语言。他不允许访问本地的硬盘，并不能把数据存入到服务器上，不允许对网络文档进行修改和删除，只能通过浏览器实现信息浏览或动态交互，从而有效的防止数据丢失。
• 动态性——JavaScript是动态的，它可以直接对用户输入做出响应，无需经过web服务程序。它采用事件驱动的方式对用户的反映做出响应。
• 跨平台性——JavaScript依赖于浏览器本身，与操作环境无关。

JavaScript变量的操作

变量是用来临时存储数值的容器

变量的声明

JavaScript是弱类型的脚本语言，变量可以在不声明的情况下直接使用。但实际使用过程中最好先用var关键字对变量进行声明。
声明变量的规则：

• 可以使用var同时声明多个变量，变量之间用,隔开。
• 可以在声明变量的同时对其赋值。
• 如果只是声明了变量。并未对其赋值，变量值会为undefined。
• var语句可以用作for循环和for/in循环的一部分。可以使得循环变量的声明成为循环语法自身的一部分，使用起来较方便。

注意：

• 当给一个未声明的变量赋值时，JavaScript会自动用改变量名创建一个全局变量。如果变量在函数内部，则创建的是一个局部变量，只在函数内部起作用。
• JavaScript变量声明时，不指定变量数据类型。一个变量一旦声明，可以存放任何数据类型的信息， JavaScript会根据存放的信息类型，自动为变量分配合适的数据类型。

变量的作用域

变量的作用域分为全局变量和局部变量。

• 全局变量：　全局变量的作用域是全局性的，在整个JavaScript程序中，全局变量处处存在。
• 局部变量：　局部变量是函数内部的声明。只作用于函数内部，其作用域是局部性的；函数的参数也是局部性的，只在函数内部起作用。

变量的优先级

在函数内部，局部变量的优先级高于同名的全局变量，也就是说在函数内部声明了与全局变量同名的局部变量，全局变量将不起作用。

注意：

• 虽然全局变量可以不使用var声明，但是局部变量一定要使用 var声明 。
• JavaScript没有块级作用域，函数中的所有变量无论是在哪里声明的，在整个函数中都有意义。JavaScript引擎的工作方式是：先解析代码，获取所有被声明的变量，然后再一行一行地运行。所有的变量声明语句都会被提升到代码的头部，这就叫做变量提升。但是变量提升只对var声明的变量有效。

JavaScript中的数据类型

JavaScrip中共有9种数据类型，常用的6种分别是：未定义（undefined）、空（null）、布尔型（boolean）、字符串（string）、数值（number）、对象（object），其余3种分别是引用（reference）、列表（list）、完成（completion），仅仅作为JavaScript运行时中间结果的数据类型，不能在代码中使用。

未定义类型

undefined是没有定义类型的变量。表示变量还没有赋值，或者赋予一个不存在的属性值。

var a;  //这时a的数据类型就是undefined

空类型

null是一个特殊值，表示空值，用于定义空的或不存在的引用，表示一个变量被赋予了空值。

var a=null;  //这时a的数据类型就是null

布尔类型

Boolean类型只有两个合法的值，分别是真true和假false。
Boolean类型的toString()方法只输出true或false

var a1=Boolean(" ")  //空字符串，返回false
var a2=Boolean("ttt ")  //非空字符串，返回true
var a3=Boolean("0")  //数字0，返回false
var a4=Boolean("1 ")  //非0数字，返回true
var a5=Boolean("-1 ")  //非0数字，返回true
var a6=Boolean(null)  //返回false
var a7=Boolean(undefined)  //返回false
var a8=Boolean(new obj1())  //返回true

字符串类型

字符串由0个或者多个字符构成，字符可以是字母、数字标点符号和空格。字符串类型应该使用''或者“”括起来
字符串的定义方法：

var str1 = “字符串”;  //方法一
var str2 = new String("字符串");  //方法2

字符串的使用：

• 两个字符串可以使用+拼接起来
• 可以使用length方法访问字符串的长度，例如str1.length
• toLowerCase()、toUpperCase()方法可以进行字符串的大小写转换。

数值类型

JavaScript的数值表示一个数字，内部只使用64位浮点型。可以是正数，负数，指数等类型。

注意：
JavaScript有一种特殊的数字常量NaN，表示非数字。当程序以由于某种原因发生计算错误时，将产生一个没有意义的数字，此时返回的数字值就会是NaN。

对象类型

Object是对象类型，该数据类型包括Object、Function、String、Number、Boolean、Array、Regexp、Date、Globel、Math、Error、以及宿主环境提供的object类型

JavaScript中的运算符

算术运算符

算数运算符包括：加+，减-，乘*，除/，求余%，自增++，自减--。用于各类数值之间的运算。

var num1 = 1+3;
var num2 = 9 -6;
var num7 = 9 *6;
var num3 = 9/6;
var num4 = 9%6;
var num5 = 9++; 
var num6 = ++9;  

算术运算符中，自增/自减运算符如果在变量后面，执行顺序为“先赋值，再运算”，如果在前面则会“先运算，再赋值”

逻辑运算符

逻辑运算符包括：逻辑与&&、逻辑或||、逻辑非!。逻辑运算符 用于测定变量或值之间的逻辑，操作数一般是逻辑型数据。
注意：

• && 运算中，如果左边操作数为false，则后面的操作数将不再执行，直接输出结果false。
• || 运算中如果左边操作数为true，则后面的操作数将不再执行，直接输出结果true。

位运算符

位运算符包括：按位与&、按位或|、按位异或^、按位非！。位运算符是将操作数以二进制为单位进行操作的符号。操作数会自动转换成二进制进行运算，将结果以十进制整数返回。

赋值运算符

= 为赋值运算符，主要是将右边的操作数的值赋给左边的操作数

var str1 = "hello";
var num1 = 9;
var b1 = true;

赋值运算符可以与算术运算符和位运算符 组合，实现更多功能。赋值运算符的优先级低于算术符和位运算符，所以组合使用会优先进行运算再将运算结果进行赋值。

条件运算符

条件运算符是构成快速条件分支的三目运算符，语法形式为：逻辑表达式？语句1：语句2; 逻辑表达式结果为true则执行语句1，反之则执行语句2。

移位运算符

移位运算符包括：左移位<<（不会改变操作数的符号）、算数右移位>>（负操作数的符号会被改变）、逻辑右移位>>> （不会改变操作数的符号）。左操作数会自动转换成二进制，按照右操作数进行移位，最后将结果以十进制整数返回。

字符串运算符

+是可以对字符串进操作的符号，一般用于连接字符串。

var str1 = "hello"+"word";

+将两边的操作数连接起来赋值给str1。

比较运算符

比较笨运算符包括：等于==、不等于!=、大于>、大于等于>=、小于<、小于等于<=。比较运算符在逻辑运算中使用，用于连接操作数组成比较表达式，并对两边的操作数进行比较，运算结果为true或者false。

注意：
==运算符如果错误的使用了=，会将右操作数的值赋给左操作数。

其他运算符

JavaScript有一些特特殊运算符：逗号运算符,、void运算符void 、typeof运算符typeof 。

• 逗号运算符：变量 = 表达式1,表达式2。将多个表达式连接成一个表达式，新表达式的值为最后一个表达式的值。
• void运算符：void 表达式。对表达式求值并返回undefined。该运算 符通常用于避免输出不应该输出的值。
• typeof运算符：typeof 表达式。返回一个字符串指明操作数的数据类型，返回值有：number string boolean object function undefined

JavaScript中表达式语句的应用

表达式语句是 JavaScript中最简单的语句，赋值、删除、函数调用这三类即是表达式，又是语句，所以叫表达式语句。

赋值语句

赋值语句是JavaScript中最常用的语句。
语法格式：变量名 = 表达式；

删除(delete)

delete是JavaScript中使用频率较低的操作之一，需要做delete或者清空动作才会使用。
语法格式：delete 对象名； ，删除对象。

函数调用

函数被调用后才可以执行函数中的代码。函数调用也属于表达式的一种类型。
语法格式：函数名（参数...）；

注意：

• JavaScript中的表达式是不需要;结尾的，一旦使用了就会被视为语句，会产生一些没有意义的语句。

JavaScript中条件判断语句的应用

条件判断语句是一种比较简单的选择结构语句，它包括if语句及其各种变种，以及switch语句。

if语句

if语句是最常用的条件判断语句，判断条件表达式的结果为true或false来决定执行顺序。
语法格式：if(条件表达式){代码块;}
当且仅当条件表达式 结果为true 时，执行{} 内的内容，当代码块部分只有一条语句时，{}可以省略。

if…else语句

if…else语句选择两个代码块之一来执行。
语法格式：

if(条件表达式)
	{代码块1;}
else
	{代码块2;}

当且仅当条件表达式 结果为true 时，执行代码块1 ，反之则执行代码块2部分。

else if语句

else if语句在判断条件超出1种的情况下使用。
语法格式：

if(条件表达式1)
	{代码块1;}
else if(条件表达式2)
	{代码块2;}
else if(条件表达式3)
	{代码块3;}
else
	{代码块4;}

当条件表达式1 结果为true 时，执行代码块1 ，否则判断条件表达式2 ，结果为true 时，执行代码块2 ……以此类推，所有的条件表达式都为假的情况下，则执行else下的代码块。

switch语句

switch用于基于不同的条件来执行不同的动作。
语法格式：

switch(n)
{
case 1:
		代码块
		break;
case 2:
		代码块
		break;
default:
	代码块
}

JavaScript中循环语句的应用

循环语句的作用是反复执行同一段代码，只要满足给定的条件就能一直重复执行。

while 语句

while 语句语法格式:

while(条件表达式)
{
	代码块
}

while循环为不确定性循环，当条件表达式的结果为true时，则执行循环中的语句块，反之则不执行，结束循环。

do …while语句

do…while 语句语法格式:

do
{
	代码块
}
while(条件表达式)

do …while循环是while循环的变体，会先执行一次代码块，再进行条件判断，当条件表达式的结果为true时，则执行循环中的语句块，反之则不执行，结束循环。为不确定性循环。

for语句

for语句非常灵活，完全可以替代while与do…while循环。
for 语句语法格式:

for(语句1;语句2;语句3)
{
	代码块
}
//语句1:初始化表达式，代码块第一次执行前执行的语句。
//语句2:判断表达式，定义循环条件的语句，代码块每次执行前执行的语句。
//语句3:循环表达式，代码块每次执行后执行的语句。

判断表达式结果为false时结束循环。

跳转语句

循环语句中，某些情况需要立即跳出循环或者跳过循环体内剩余语句进行下一次循环。可以使用break 和continue。

break语句

break语句的作用是立即结束循环。
break语句的主要使用场景：

• 在switch语句中，用于终止case语句序列，跳出switch。
• 在循环语句中，用于终止循环序列，跳出循环结构。
• 与标签语句配合使用，从内层循环或者内层程序块中退出。

continue语句

continue语句的作用是立即结束当次循环，并进入下一次循环。只能出现在循环语句的循环体内。