从零基础入门JavaScript(1)

时间:2021-11-28 13:26:25

从零基础入门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));