标签：libs   bubble   按钮   循环   日常   服务器   复杂数据类型   xtend   重置   

前端基础学习-JavaScript

JavaScript 简介

JS的简介

在上个世纪的1995年，当时的网景公司正凭借其 Navigator 浏览器成为 Web时代开启时最著名的第一代互联网公司。由于网景公司希望能在 静态HTML页面上 添加一些动态效果，于是叫 Brendan Eich 这哥们在两周之内设计出了JavaScript语言。

为什么起名叫 JavaScript？原因是当时Java语言非常红火，所以网景公司希望借Java的名气来推广，但事实上JavaScript除了语法上有点像 Java，其他部分基本上没啥关系。

在JavaScript中，是以对象为王的，在JavaScript中几乎所有的东西都是对象或者以对象的形式展现出来的。所以在学习之前，先理解一下什么叫面对对象编程。

面向对象编程介绍

面向对象是一种编程思想，其实跟Java、C++是一样的,JavaScript也是一门面向对象的编程语言。说到面向对象就不得不提出来面向过程的编程思想，可以和面向对象做一个对比。

面向过程就是分析出来解决问题所需要的步骤，然后使用方法函数将这些步骤一步一步的实现，使用的时候再一个一个的一次调用就可以了，比如C语言，性能比面向对象高，因为类调用时需要实例化，开销比较大，比较消耗资源;比如单片机、嵌入式开发、 Linux/Unix等一般采用面向过程开发，性能是最重要的因素。没有面向对象易维护、易复用、易扩展。

面向对象是把事务分解成一个个对象，然后由对象之间分工与合作，面向对象是以独享功能来划分问题的，而不是步骤。在面向对象程序开发思想中，每一个独享都是功能中心，具有明确的分工，面向对象编程具有灵活性、可复用性、易维护性、和容易开发等优点，适合多人合作的大型软件项目。

面对对象编程的特性：

• 封装性

把客观事物封装成抽象的类，并且类可以把自己的数据和方法只让可信的类或者对象操作，对不可信的进行信息隐藏。

• 继承性

指可以让某个类型的对象获得另一个类型的对象的属性的方法。它支持按级分类的概念。继承是指这样一种能力：它可以使用现有类的所有功能，并在无需重新编写原来的类的情况下对这些功能进行扩展。 通过继承创建的新类称为“子类”或“派生类”，被继承的类称为“基类”、“父类”或“超类”。

• 多态性

指一个类实例的相同方法在不同情形有不同表现形式。

JS 的组成

js = ECMAScript + DOM + BOM + 高级

ECMAScript（前身为欧洲计算机制造商协会）：JavaScript的语法规范

DOM（Document Object Model 的文档对象模型简称）：JavaScript操作网页上元素的API

BOM（Browser Object Model 的浏览器对象模型简称）：JavaScript操作浏览器部分功能的API

JS的作用与书写位置

JavaScript的最基本功能是控制网页中的元素

当然，第一点应该是把JavaScript脚本写在脚本对里。并且JavaScript语言是区分大小写的。所以一般情况下，JavaScript的书写位置有内嵌式和外链式两种

内嵌式：
　　一般放在body里面的最后，有时放在head标签中（需要写页面加载函数）。

      

        hello
      
      
JS 的书写位置
    

  

? 因为代码的顺序都是从上往下加载，在 body 中的元素，如果在js中获取body中元素的时候，会报错找不到。

外链式：
　　src=”外部js文件路径”

变量和流程控制

变量的声明和初始化

var number               // 变量的声明，没有赋值 undefined
var name = "Hello";      // 变量的初始化
var NAME= "hello"
var 你好 = "你好" // 不推荐

命名规则（驼峰命名）

和Java一样，JavaScript采用的是驼峰式命名，

• 变量命名必须以字母或是下标符号 "_" 或者 "$" 为开头。
• 变量名长度不能超过 255 个字符。
• 变量名中不允许使用空格，首个字不能为数字。
• 不用使用脚本语言中保留的关键字及保留符号作为变量名。
• 变量名区分大小写。
• 汉语可以作为变量名。但是不建议使用！

数据类型

基本数据类型

• String 字符串
• Number 数字
• Boolean ： true / false
• undefined 未定义
• null 空
• symbol （ES6 引入了一种新的原始数据类型）

复杂数据类型

• Object 对象
• Function 函数
• Array 数组
• Date 日期
• Error 错误

类型判断 instanceof / typeof

var arr = []
console.log(typeof arr) //object
console.log(arr instanceof Array) // true

类型转换

var weightIncrease ="2.5斤"
parseInt(weightIncrease)  //2
parseFloat(weightIncrease) //2.5

文本字符串操作

var words="十三是个大胖子"
words.length  //7
words.charAt(0)  //十
words.charAt(words.length-1)  //胖
words.indexOf("胖") //5
words.substring(0,2) //十三
words.replace(‘胖子‘,‘瘦子‘)  //"十三是个大瘦子"
var words="十三，是个大胖子"
words.split(‘,‘)  //["十三，是个大胖子"] 

文本字符串的操作跟其他语言的操作时差不多的，具体的用到时候可以再查。

数组操作

var arr=[]; 
typeof(arr) //"object"
arr=[‘十三‘,‘是个‘,‘大胖子‘]; //(3)["十三", "是个", "大胖子"]
arr.length; //3
arr[0]; //"十三"
arr[3] =‘?‘; //"?"    数组变成  (4)["十三", "是个", "大胖子", "?"]
arr.push(‘@‘);   //5   数组变成  (5)["十三", "是个", "大胖子", "?","@"]
arr.pop();  //@   删除掉数组中的最后一个元素，并返回这个元素   数组变成 (4)["十三", "是个", "大胖子", "?"]
arr.shift(); //十三  删除掉数组中的第一个元素，并返回这个元素   数组变成 (3)[ "是个", "大胖子", "?"]
delete arr[2]； //true  删除数组指定位置的元素，但不改变数组长度返回true  数组变成： ["是个", "大胖子", empty]
arr.splice(2)  //[empty]  删除指定位置元素，并返回删除的元素，改变数组长度  数组变成["是个", "大胖子"]
var arr1=["32","1","0"] 
var arr2=arr1.concat(arr);   //合并数组   (5)?["32", "1", "0", "是个", "大胖子"]

null和undefined的理解和应用

undefined是JavaScript中的一大特点，是JAVASCRIPT独有的数据和数据类型（这种数据类型只有这个一值，就是undefined，它的类型也是undefied），既然它是JAVASCRIPT独有的一种数据类型，所以需要特殊关注一下

在JAVASCRIPT里，null和undefined都表示不存在的数据，并且undefined也是从null中继承而来，那null是什么？undefined又是什么？它们两个又有什么共性和区别呢，请看下面的描述：

1. null和undefined都是表示没有的、不存在的值。它们两个在进行逻辑转换时都是false，这两个值进行比较是true。
2. null表示空引用，它是object类型。undefined表示未定义， 它是undefined类型。
3. 如果一个变量的值是null，那么必须主动的给它赋值null。
4. 一个变量未定义，或一个变量定义了未赋值，则是undefined。需要注意的是：一个变量如果没有定义，是不能直接在程序里使用的（就不是不能直接读取这个变量，但可以赋值）。比如说：本来没有定义一个叫a的变量
   但我直接去alert(a);//在浏览器里这样是个语法错误，但是可用typeof去运算
   但如果a定义了，未赋值，可以读，它的值就是undefined,如果用typeof去运算，那它的类型也是undefined。
5. 对说属性来说：如果原来没有这个属性，根本就不存在这个属性，那么它的值就是undefined。对象的属性不需要定义，如果不存在也可以直接去读，不会报错，而会给出一个undefined的值来。
6. 如果这个对象以后要用，但是现在还没有值，一般情况下，会给它一个null值。
7. 在函数（方法）里，如果必须返回值，但是值又计算不出来，那就返回一个null（这是规范，而不是语法规定，JAVASCRIPT里遵循这一规范）。比如网页中没有一个id是div2的元素，则下面的这句脚本则返回null
   document.getElementById(‘div2‘);//返回null。
   但是，没有返回值的函数，它的返回值都是undefined。

在JavaScript编程实践中，如果一个变量以后要用到，现在就要定义，那我们就主动给它一个null值，虽然只定义不赋值也没有什么错误。比如以后在动画中要定义一个定时器变量，就是：var timer=null;就表示这个timer是提前定义的，以后要用，当然你也可以不给它这个null，就是直接写一个var timer;这样也没问题，不会有什么语法错误，它的值自动就是undefined，也表示一个不存在的值的。主动把null赋给timer，就是为了强调这个变量是提前预留出来的。

判断JavaScript中一些对象的属性时，也遵循这个原则，如果一个对象的属性根本就没定义过，则它是undefined；如果是null，则表示这是个本来就有的属性，只是没有值。比如说一个网页元素的parentNode这个属性，表示是这个网页元素的父节点，这是个系统规定的（法定的）的法性，一般情况这个属性的值是一个网页元素，但它的值也有为null的时候，比如:document.parentNode，这个就是null，因为它有parentNode这个属性，只不过它是顶级元素，不存父节点而已。但是它不是undefined，如果是undefined表示这个属性根本就没有定义（声明）过。

这个在调试JavaScript时非常有用，如果你调试某一个属性的值是undefined，那说明你可能把这个属性写错了，除非你在直接读取一个你从来没有操作过的自定义属性。

运算符

比较运算符

比如x=5

逻辑运算符

给定 x = 6 且 y = 3，下表解释了逻辑运算符：

条件（三元）运算符

JavaScript 也包含了可基于某些条件向变量赋值的条件运算符。

语法

variablename = (condition) ? value1:value2

实例

var voteable = (age 

js中不同类型作比较的规律（布尔运算）

流程控制

流程控制和java中是差不多的

• if...else...

var weather=‘sunny‘,tempperature=26  ;

if((weather === ‘sunny‘) && (tempperature 

• while (true) {}

var i=0;
while(i

• for(var a=0;a

for (var i=1;i 

• switch

//注意： switch 底层用的是 === 比较
switch ("1"){
    case 1:
        alert(1);
        break;
    case 1:
        alert(1);
        break;
    case 3:
        alert(3);
        break;
    default :
        alert("都不是！");
        break;
}

注意：如果 switch 的判断条件为 false 的话，case的所有语句都不执行，只执行default的语句

js代码的注意问题：

1. 在一对script的标签中有错误的js代码，那么该错误的代码后面的js代码不会执行。
2. 如果第一对的script标签中有错误，不会影响后面的script标签中的js代码执行。
3. script标签里面可以写的内容：type="text/javascript" 标准写法，或者 language="JavaScript"，都是可以省略的，原因是在html开头写了遵循h5标准。
4. script标签可以出现多对。
5. 如果使用引入外部js文件的方式，那么不要在script标签里面写任何js代码，如果想写，就新开一对script标签。

异常捕获

try...catch...finally

在程序中都会有对于异常的处理，这里看一下JavaScript对于异常的处理和java中的异常处理是一样的，都是用try，catch去捕获处理的。

try{
	//可能会发生异常的代码
}catch(err){
	//错误的处理
}

写个demo

Throw

可以通过throw语句创建一个自定义错误，大致用法和java中一样，但是js中不分那么多异常类，都是弱类型，直接抛出字符串就可以，下面看一个demo

其实还有一种onerror() 语法可以用来捕获网页中的错误，但是这是一种老式的标准，除了IE之外主流的浏览器不太支持。所以不多赘述。

函数和变量

函数

函是fnuction一词翻译过来的，也叫方法，其实叫“功能”我认为更妥当，就是对一个功能的描述或定义，在JavaScript中，function关键定义了一个功能（或叫函数、方法、行为）。

函数本来就是对象类型的数据，但由于在JavaScript语言中有着非常突出的地位，所以把函数也单独成一种数据类型了，就是function类型。就是说你首先要知道函数本身是对象类型的。

定义方法

定义方法有两种方式 声明式 和函数表达式

声明式

函数就是包裹在花括号中的若干代码块，前面使用了关键词 function：

function functionName (parmeter1&a