从零基础入门JavaScript（1）

从零基础入门JavaScript(1)

1.1  Javascript的简史

1995年的时候   由网景公司开发的，当时的名字叫livescript    为了推广自己的livescript，搭了java顺风车，改名为javascript

与此同时，     微软因此在自身的浏览器里，也推出了自己的脚本语言

jscript

1997年时候，  由ECMA(欧洲计算机制造商协会)出面，推出了一套javascript的规范，Ecmascript ,规范提出js由三部分组成

JS的组成：

ECMAScript         基础语法

DOM    文档对象模型

BOM 浏览器对象模型

2003之前，网页界面上的弹窗广告几乎都是由js做的，被人称做牛皮癣

2004年的时候，JS的命运发生改变   ajax(谷歌公司)

2007的时候  苹果公司推出的手机，可以用来上网

2010的时候  H5的出现    canvas  又推高了js的地位

2011年的时候， node.js   将js这种语言伸向后服务器端

1.2  JS语言的特性

JavaScript是世界上用的最多的脚本语言

脚本语言：不需要编译，直接运行时边解析边执行的语言

JavaScript是一种客户端(本地PC的浏览器)的脚本语言

JavaScript是一种弱类型的动态语言(当JS被引擎解析执行的时候，才会最终的确定变量的数据类型是什么;动态添加一些属性或是方法)

弱类型：对于数据类型的要求不严格，JS中的所有变量声明只有一个关键字就是var     var    a = 123;

后台语言对于数据类型要求相当严格：string   bool  int  char  double

基于对象：内置大量现成对象，编写少量程序可以完成目标

编译： 一般后台语言都是编译执行的 ，将编写好的代码的一次性的编译成可执行文件，例如.exe文件，

小结：

1. 简单易用

可以使用任何文本编辑工具编写   记事本，其它编辑器

只需要浏览器就可以执行程序

2. 解释执行

事先不编译

逐行执行

无需进行严格的变量声明

3. 基于对象

内置大量现成对象，编写少量程序可以完成目标

1.3 浏览器的工作原理

浏览器工作原理地址：http://www.2cto.com/kf/201202/118111.html

1、User Interface  用户界面，我们所看到的浏览器

2、Browser engine  浏览器引擎，用来查询和操作渲染引擎

3、Rendering engine用来显示请求的内容，负责解析HTML、CSS

4、Networking   网络，负责发送网络请求

5、JavaScript Interpreter(解析者)   JavaScript解析器，负责执行JavaScript的代码

6、UI Backend   UI后端，用来绘制类似组合框和弹出窗口

7、Data Persistence(持久化)  数据持久化，数据存储  cookie,HTML5中的sessionStorage

1.4  JS的书写位置

js代码写在一对script标签内，Type可以省略。

这对script标签可以放在很多位置，比如head标签内，body标签内，甚至在body标签与html标签之间。但是如有页面中有html代码，尽量将js代码写在这些标签之后。

输出的五句话：

alert(“这是浏览器弹出来的一个警告框”);

Console.log(“这是在控制台输出的一句话”);

Prompt(“记录用户输入信息”);

Document.write(“向文档页面中输出内容”);

Confrim(“写入信息”);

1.5  变量

变量是用来帮助我们往计算机中存储数据的。

1.5.1 变量的命名

变量的命名一定要有意义，一看变量名就知道是什么意思

1.5.2 命名规则：

变量名必须以字母或下划线“_”或$开头

变量可以包含字母(从A至Z的大小字母)，数字,下划线或是$

JavaScript严格区分大小写，computer和Computer是两个完全不同的变量

建议：

变量的名称要有意义

变量的命名遵守驼峰命名法，首字母小写,第二个单词的首字母大写

例如：userName   userPwd   hightSchool

禁止使用javascript的保留字和关键字作为变量名（见下面的保留关键字图）

1.6  直接量

就是可以直接拿过来使用的数据值

1.7  +运算符

在变量和直接量(字符串)之间或两个字符串之间，用+起连接的作用

如果是两个数字之间用+的话，就是起加法运算中的加法运算

1.8  变量的重复赋值

var age = 18; // 在内存中开辟一块空间，空间名是age,然后将18这个数据存到这块内存空间当中，
    age = 81; // 将81这个数据存到age这块内存空间当中,原来的值就覆盖掉了，不存在了，只存有现有的值81
age = 200;
console.log(age);

1.9 Typeof 关键字用来检测变量的数据类型

string      这个就很多

Number     阿拉伯数字，不管正负，整浮，都是number

1.10 算术运算符

一元运算符：++   --

根据操作数来说，一元运算符，就是只需要一个操作数的运算符，二元，是需要两个操作数。

前加后加或是前减或是后减的区别：

后加加，参与运算的时候，先用自身的原值参与运算，之后再将自身的值加1，而前加加，是先将自身的值加1，而后拿着现在加1后的值，再参与运算。

减减同理。

二元运算符： +    -    *     /     %

1.11  转义符

\+一个特殊的字符，组成有一个有意义的或者其它功能的一个字符

\”

\t    制表符有四个字符的空格

\b      backspace的缩写  往前删除一个

\n      换行

1.12  复合赋值运算符

将=(赋值运算符)和算术运算符进行了一个合写

// 复合赋值运算符
    var a = 100;
//    a = a+5;
    a+=5;  //  a = a+5;
    console.log(a);

b+=200;// b = b +200;
    c *= 30; // c = c*30;

d /=50;   d = d/50;

e %= 20;  e = e%20;

1.13  关系运算符  

关系运算符是用来描述事物两者之间的关系，

>  <  >=  <=  ==   !=   ===   !==

1.14  Boolean类型

True

False

1.15  JS中的数据类型

string  number   boolean  undefined  null   基本数据类型

复杂数据类型 对象   Date   Array  function

Undefined是一种数据类型，只有一个值就是undefined，代表变量声明了，没有赋值的一种状态。

变量声明与定义的区别 ：

变量声明指的量，只给变量起了一个名字，并没有数据值，var name;

变量的定义，就是连声明加赋值，var name = “张三”;

1.16  逻辑运算符

&&   ||   ！

&&: 表示在&&两边的表达式同时为真是才为真，只要有一个假就为假；

||：表示在||两边的表达式中只要有一个真即为真，不然同时假才为假；

！：真变假；假变真；

1.17 运算符的优先级

1.18 数据的类型转换

转成number

隐式转换  +    -   *    /   %

强制转换  使用外部的方法或是函数进行的数据转换

Number()    parseInt()     parseFloat()

1.18.1  Number()函数

var a = "123";
var b = true;
console.log(Number(a)); // 123
console.log(Number(true)); // 1
console.log(Number(null)); // 0
console.log(Number(undefined)); // NaN
console.log(Number("123.456")); // 123.456
console.log(Number(" ")); //0

boolean类型的值转换成Number类型true-->1    false-->0

unerfined-----> NaN

如果能将值转换成数字，就转换成对应的值，如果不能转换，则报NaN.

Number()函数的特点：

a.如果转换的内容可以转成数字，那么就直接返回这个内容对应的数字。

b.将整体进行转换，如果有一个不可以转换那么返回NaN.

c.如果在内容中出现小数，那么小数会保留，也会输出小数。

d.如果内容为空(null)，那么转换成0;

1.18.2  转string

隐式类型转换   +“”

强制类型  toString()    String();

万物皆对象，JS中的对象几乎都有toString();  null，undefined是没有toString()方法，如果要强制转换的话，只能使用String();

能用toString()转换的对象，对String()都可以

1.18.3  转boolean类型

隐式类型       !!

强制类型       Boolean()

数据类型转boolean的时候，为false的情况：

0, “”,null,undefined,NaN, 这些转成boolean类型的时候都为false，其它的都为true;

1.19  NaN    number类型

NaN : not   a   number   不是一个数字

是数字类型的一种，代表数字的一种不正常的状态，也就是说，本来可以转换成数字或是参与运算的变量，并没有转换过来，这个时候就报一个NaN,这样就避免了程序报错。

NaN是非常特殊 的，特殊到凡是与NaN进行的运算，最终结果都是NaN,更特殊的是，NaN与谁都不相等，包括自己。

isNaN()    是    不是一个数字   非数字

1.20  JS中的语言结构

顺序结构

分支结构     if      if-else

选择结构     if  else-if  else-if ...else    swicth-case

循环结构     while  do-while   for    for-in

1.21  If()  

If(判断条件){  一般是一个boolean类型的值或是关系表达式或是逻辑表达式

要执行的代码;

}

执行过程：

当程序运行到if处的时候，首先进入小括号，判断括号里面的条件是否成立，如果成立，也就是括号里是true，则进入大括号执行里面的代码，如果条件不成立，也是返回false，则直接跳过大括号，执行后面的代码。

If只能判断 一种情况，如果想判断两种情况

If小括号中如果不是boolean类型的值，也不是关系表达式也不是逻辑表达式的时候，会隐式的调用Boolean()，将传进来的值，进行一个boolean类型的转换。

1.22  If..else

If(判断条件){ 一般是boolean类型的值或是关系表达式或是逻辑表达式

要执行的代码;

}else {

要执行的代码;

}

执行过程：

程序运行到if处，首先进入小括号，判断里面的条件是否成立，如果条件成立，也就是返回true,则进入大括号，执行里面的代码，如果判断条件不成立，也就是返回false,则进入else对应的大括号里面，执行里面的代码，执行完毕之后直接跳出if-else语句。两种情况肯定会执行其中一个大括号中的代码。

1.23 三元运算符  

表达式1(关系表达式或是逻辑表达式)? 表达式2:表达式3;

如果表达式1成立，也就是最终求解出一个True的结果或是 表达式1返回true，则表达式2的值是整个表达式的值，如果表达式1不成立，也就是求解出的结果是false，则表达式3是整个表达式的值。

一般多用于两种情况的语境。

var sex = 1;
//    if(sex == 1) {
//        console.log("男");
//    }else{
//        console.log("女");
//    }

var a = sex == 1?"男":"女";
    console.log(a);

var str = prompt("请输入两个人名中的一个，‘秦桧’，‘岳飞’");
//    if(str =="岳飞"){
//        console.log("忠臣");
//    }else {
//        console.log("奸臣");
//    }
    var s =   str =="岳飞"?"忠臣":"奸臣";
    console.log(s);

表达式：  就是一个可以计算出结果的式子

var a = 100;

比如说： a=1, “abc”， 100>20; a;

1.24  Switch-case  

switch(值){ 一般是一个变量或是计算后的定值

case 值1：

要执行的代码;

break;

case 值2：

要执行的代码;

Break;

Case 值3：

要执行的代码;

Break;

Case 值4：

要执行的代码;

Break;

...

Default:

要执行的代码;

Break;

}

执行过程：

当程序执行到switch处，先进入小括号，计算里面值，然后拿着这个定值依次和大括号中case里面的值进行匹配，如果匹配成功，则执行对应的case中的代码，遇到break,则跳出当前swicth-case结构,如果匹配都不成功，则要看结构是否有default,如果有，则执行default中的代码，遇到break跳出结构，如果没有default，则直接跳出swicth-case结构，执行后面的代码。

多用于多条件的定值判断 。

注意：case中的值的数据类型一定要与switch小括号中的值的数据类型一致。

1.25  If-elseif  与switch-case的区别

相同点:都可以实现多分支结构

不同点:

if-else if:可以处理区间范围

switch:一般 只能用于定值比较

三者的区别：

if有条件的执行一条语句     一种情况

if-else有条件的执行一条或另一条语句    两种情况中的一种

switch有条件的执行一组语句中的一条语句   多种情况中的一种

1.26 While

循环： 所谓循环就是重复的做同一件事情

while 循环

while(循环条件){

循环体(要执行的代码);

}

执行过程：

当程序 运行到while处，首先进入小括号判断循环条件是否成立，如果成立，也就是值为true,则进入大括号执行里面的循环体，执行完毕之后，再次回到小括号中判断 循环条件是否成立，如果成立则再次进入大括号执行里面的循环体，往复循环。只要是循环，肯定会有一行代码能够改变循环条件，如果没有代码改变循环条件，我们称这样的循环叫死循环。

while(true){

循环体;

}

1.27  Do- while  

Just   do   IT

Do{

循环体;

} while(循环条件)

执行过程：

程序执行到do处，先进入大括号执行里面的循环体，然后带着执行结果到达while的小括号，判断里面的循环条件是否成立，如果成立，则再次进入大括号执行里面的循环体，如果不成立，则跳出当前do-while循环。

特点，至少执行一次循环体，然后再判断 循环条件。

While的特点：

先判断循环条件，再执行循环体，有可能 一次循环体都不执行。

1.28  For循环

一般多用于已知次数的循环

for(表达式1;表达式2;表达式3){

循环体;

}

执行过程：

程序运行到for处，进入小括号中，先执行表达式1，声明变量，并赋初值，然后执行表达式2，判断循环条件是否成立，如果条件成立，则进入大括号执行里面的循环体，第一次循环的时候，并不执行表达式3，第一次循环执行完毕之后，执行表达式3，改变循环条件，然后再执行表达式2，判断循环条件是否成立，如果成立，则再次执行循环体，如果不成立，则跳出循环。

1.29  循环的嵌套

一个循环里面包含着另一个的循环

对于循环的嵌套来说，外面的循环循环一次，里面的循环循环N次

for(var i=0;i<6;i++){
     for(var j=0;j<10;j++){
         console.log("循环嵌套");
    }
}

1.30  break  

两种用法 ：

第一种用在swicth-case 用于跳出当前程序

第二种，是用在循环当中，一般是用while或是for循环当中，与if搭配使用，作用就是立即跳出当前循环，后面的代码都不再执行。

也常见用于死循环的跳出。

While(true){

}

1.31  continue    继续的意思

一般也是用于循环当中，当遇到continue关键字的时候，立马停止本次循环，然后回到循环条件处，判断 循环条件是否成立，如果成立则继续下一次循环，如果不成立，则退出当前循环。

只结束当前本次循环，continue后面的代码都不再执行。

1.32  数组

数组 就是数据的有序列表。存储的是一组数据，这组数据可以是任意类型，而且数组中的元素可以随时的动态添加。

1.32.1 使用构造函数创建数组

// 第一种，用构造函数的方式创建 数组
 var  arr = new Array();// 创建了一个空数组,长度为0
// 数组就是数据的有序列表，这个顺序是按编号来的，默认以0开始,这个编号 叫做数组的索引或是下标
arr[0] = 100;
arr[1] = 99;
arr[2] = 98;
 arr[10]=96;
 console.log(arr.length);
 console.log(arr);// 直接打印数组 ，就可以看到数组里面的数据
 alert(arr);

var arr = new Array(6); //创建了一个长度为6的数组
arr[0]=100;
arr[7]=102;
console.log(arr.length);
console.log(arr);

JS的特性就是弱类型的动态语言，比如数组里面的元素是可以随时动态添加的，数组的长度会随着里面数据的变化而变化。

JS中的数组可以存储任何类型的数据，而且大小可以动态的改变，与PC中的内存大小相当。

1.32.2  使用字面量的方式创建数组

var arr = [100,98,96,99,93,95,97,69,89,58,87];
//console.log(arr[0]);
//console.log(arr[arr.length-1]);

for(var i=0;i<arr.length;i++){
    console.log(arr[i] +"===="+i);
}
 //console.log(arr.length);

1.33 冒泡排序

冒泡排序是将数据从大到小或是从小到大排列的一种算法。

是首先拿着当前的值，依次的和后面的值进行比较，如果是从大到小排列的话，当前的值 小于后面的值的时候，就两两交换，

例：

var ex;

var arr = [65, 97, 76, 13, 27, 49, 58];

for (j = 0; j < arr.length - 1; j++) {            //交换次数

for (i = 0; i < arr.length - 1 - j; i++) {

if (arr[i] > arr[i + 1]) {

ex = arr[i + 1];

arr[i + 1] = arr[i];

arr[i] = ex;

}

}

}

alert(arr);

1.34 函数

函数就是代码复用的一种机制或是封装某种功能的代码段。

函数的定义：

有两种，第一种，是使用函数声明的方式定义函数

function 函数名([参数列表]){

函数体(都是可执行的或是要执行的代码);

}

函数名一般是一个动词，代表某种功能，名字最好也要遵循驼峰命名法

函数声明了之后，自己是不会自动调用的，需要我们来执行调用，函数的调用就是:   函数名();

函数的好处：一次声明或是定义，多次调用或是多次执行或是只定义一次，可以被执行或是调用多次。

1.35  函数的组成

函数的三要素： 函数名(函数的功能)，参数，返回值

其中，参数不是必须的，也就是说可以没有参数，返回值是每个函数都有的，如果没有明确的返回值的话，默认是undefined.

其实我们可以将函数看成是专门做某件事情的人或是机构，有时候做某件事情的时候，需要我们提供一些数据给它，它在执行或是运算完毕之后或许会有某些结果返回给我们，我们提供的数据就叫做参数，返回给我们的结果就叫做返回值。

比如说：我们去银行ATM机取款，我们需要输入一些密码和取款金额，那么 我们输入的这个密码和金额就是参数，如果输入正确，最终取到的钱，就是返回值。

1.36  形参和实参的关系

定义好了函数之后，在函数调用的时候，会将函数的实参复制一份传到函数定义时的形参里面，会和之前的一一对应起来，如果实参和形参的个不一样的时候，会先按之前的分配。实参和形参的个数是可以不一样的。

var i= 0;
function getSum(a,b,c){ // 在函数定义的时候，使用的参数叫做形参，起占位置的作用
    // arguments
    a = a || 0;
    b = b || 0;
    c = c || 0;
    console.log(a+b+c);
}

getSum(10,20);//在函数真正的调用的时候，传入的数据，才是实参

1.37  Return 的用法

在函数当中，return一般是用于返回函数当中的数据，如果return后面跟着数据，则后面的数据是整个函数的返回值，程序运行到这里的时候，会先将返回值返回出去，然后立即跳出当前函数，后面的代码不再执行。

如果return 后面没有数据的话，程序运行到return处，则表示直接立即跳出当前函数，后面的代码都不执行。

function getSum(a,b){
    a = 100;
    return  a + b ; //将计算后的结果用关键字return返回出去
    console.log("看我执行了没有。。。。"); // return后面的代码不再执行
}
var num = getSum(a,b);
console.log(num*2);

1.38  函数的嵌套

所谓函数的嵌套就是在一个函数里，调用另一个函数。

例：

利用比较两个值大小的函数，以嵌套的形式形成一个比较三个大小的函数。

function getMax(a,b){
    return c = a>b?a:b;
}
function getMax1(a,b,c){
    return getMax(a,getMax(b,c));
}
console.log(getMax1(1,5,3));