javascript发展历史和入门基础

一、javascript简介

    1.JavaScript的用途

        前端的三层：

            结构层：html                 从语义的角度描述页面内的结构

            样式层：css                  从审美的角度装饰页面

            行为层：javascript           从交互的角度提升用户体验

        js可以干啥：

            轮播图

            tab栏

            表单提交 ajax技术

            广告

    2.js诞生

        js技术诞生于1995年(Netscript 网景公司,首次提出了交互的概念，提出了用户体验的概念；Branden Eich:是可以和乔布斯平起平坐的地位)，最初名字叫livescript(活力脚本)，随着Java的兴起，改名为javascript，但是两者之间没有任何的关系，

        随着IE3推出与ie3兼容的版本叫JScript，Ecma international（一个欧洲标准化组织），

        1997年这个组织为JavaScript制定第一版标准，1999年第三版标准诞生，由于委员会对语言特性产生分歧，，导致ecmascript第四版还没有诞生就已经夭折，2009年12月，ECMAScript第五版发布，2015年6月第六版发布

        ECMAScript是JavaScript的标准，我们学习的是 ES5，

    3.javascript的成长历程

        2003：牛皮癣的时代，禁用广告，禁用js，

        2004：谷歌提出了ajax技术，不刷新页面更新页面内容，配合使用js使用，异步请求数据

        2007：iPhone出世，交互体验受到重视，web页面的交互有js写，所以js被推崇到很高的地位

        2008：谷歌退出chrome浏览器，v8引擎出现，使得js在web页面中解析速度加快，推动js的发展

        2009：jQuery流行，解决了浏览器的兼容性问题，jQuery中接近50%的代码是做兼容的，是页面变得简单

        2010年：canvas画布技术的得到了广泛的支持，canvas逐渐取代flash，并且可以制作小游戏，flappy bird，俄罗斯方块，消消乐。

        2011：node.js得到了广泛的运用，三p的后台语言都有自己的语法，但是node使用的就是js，让js运行在后台，单线程非阻塞io，节省了后台的成本，以前万块的服务器会卡，但是使用node，4千块的服务器都很666

        2012：HTML5和CSS3问世，又一次推动JS向上发展

        2013：hybird app 模式，就是手机app,公司需要三班人来分别作：安卓，iOS，Windowsphone，后来人们开发了web app 使用web 技术开发手机app，hybird app混合app，就是web技术和手机原生开发混合

        2015：ECMA 6 发布，ECMA 2015 ，对JS进行了重量级的颠覆性增强

    4.JavaScript非常好学

        为什么说好学？

            1.js有明显的界面效果，容易记忆，不像c语言，黑底白字，很丑

            2.js语言来源于c和java，学习过c或java 的会很 easy；

            3.js是弱引用类型，动态数据类型的语言

            4.js不需要考虑内存问题，和垃圾回收的问题

        不好学的点：

            1.兼容性问题：ie8是个怪胎 ，很多方法跟别人不一样，需要造轮子，

            2.花式写法太多，太抽象从简单的的人手，慢慢品味，用轮播图来穿插讲解

            3.细节太多；认真记笔记，认真做实验，

    5.js 学习方法

        1.要去品味程序，思考逻辑，读懂每一行代码

        2.js 的机械重复性的劳动几乎为零，基本是创造性的劳动，html,css都是重复性的劳动，

        3.千万不要背程序，没一个程序必须要独立写出来，要有自己的看法和逻辑，每天都要有创新性。

二，Hello word

    输出语句是最简单的语句

    1.js的书写位置

        script标签里面

       

        这个script标签可以放在HTML文件中的任意位置

        在HTML页面加载的 时候， js会一起运行，也就是说js代码运行需要宿主环境，我们最常见的宿主环境就是浏览器

        这个type，文件类型，在HTML4以前是一定要写的，H5可以不用写，也可以写，写的话一定不能写错

    2.alert（）语句

        我们学习的第一个输出语句

        alert：警告 能够让浏览器弹出警告框

        alert()这实际就是一个内置函数的调用，函数调用：函数名（）

        alert('hello word');

        这是一条语句每条语句之间使用分号分开，';',这个分号必须是英文状态下的

        js语句是顺序执行的，也就是先执行上边的，再执行下边的;

    3.控制台

        控制台在chrome中就是检查里面的内容，快捷键是F12,英文名叫做console

        程序中所有被捕获的错误都会在控制台输出，控制台是检查错误的一种利器

        eg：alert('你好')；==>后面的分号是中文的

        “SyntaxError”==>语法错误

        我们可以主动地在控制台输出内容:

            console.log(); 打印日志

        console 控制台

        log 日志

        console是一个内置的对象，log是这个对象的方法，学习语言最重要的是学习方法二属性（函数和对象）

        console.log('你好');

        要养成打开控制台调试的习惯

    4.js行文特性

        js语句和语句之间的换行，空格，和缩进不敏感

       

        ==>

       

        每个语句后边 的分号不是必须写的，前提是代码一行一行写，如果两行代码在 一行中书写，或者压缩后的代码，美剧代码后的分号是十分重要的，必须写

        以下代码是错误的，不能执行

       

    5.js 注释

       

        /* css注释*/

        //js注释    单行注释

        /*js

        多行注释*/

    注释不可以嵌套！！

    eg:

        /*我是注释

            /*这个嵌套注释是不允许的

            */

        */

三、字面量

    字面量：literals,或者叫直接量，就是看到的是什么就是什么

    1.数字的字面量

        数字字面量就是数字自己，不需要任何符号来界定这个数字，在js中数字字面量的可以有三种进制：

            10进制：就是普通的数字0-9组合

            8进制：如果以0开头，或者以0o开头，或者以0O开始头的都是八进制，0-7组合

            16进制：以0x开头的都是16进制， 0-9 a-f表示

        NaN:not a number 不是一个数字，这也是一个数字字面量

        Infinity：无穷大 这也是一个数字字面量

        整数字面量：整数字面量（十进制，八进制，十六进制），浮点数自字面量，Infinity：无穷大，NaN:not a number

    2.字符串

        字符串是一个术语，人类所说的语句，词

        字符串的字面量，必须使用双引号或者单引号包裹，字符串被限定在同种引号中间，必须成对出现的引号

        console.log("nihao");

        console.log('hello word');

        如果一个数字被双引号或者单引号包裹，那么这个数字就变成了字符串

        转义字符:

            \n    回车换行

            \t    tab缩进

            alert（'你好\n啊\n小摩纳哥\n'）

        Uncaught ReferenceError    引用错误,报错，将爆出异常；

        引号转义：

            1）正常情况下，使用不同种类的引号

            console.log("hello ''word");

            2)使用转义符

                console.log('c:\\hello\a\b.jpg');

                console.log("hello\"kmd\"");

四。变量

    变量（variables）,数学中的xyz这些位置数其实就是变量一种形式，是一个蕴含着某一个值得符号

    和直接量不同，看见一个a，但是这并不是字母a,其中蕴含了一个值

    1.整体感知

        变量，使用var关键字来定义，

            eg：var a;定义一个变量a

        这个变量a存在电脑的内存中，会开辟一个空间，来存储这个变量a可以给这个变量赋值，js中变量赋值使用等号，等号右边的值赋给左边的量

            a = 12; = 赋值号

        console.log(a);    //12

    2.变量必须先声明，必须先进行var，这个var的过程就是声明的过程declaration，也可以叫做定义definition

    变量的名称是一个标识符（identifiers）,任何标识符都要有统一调度命名规则：

        在js中，一个标识符可以是由字母、下划线、$开头,数字组成，不能以数字开头，大小写敏感，a和A是两个变量，不能使用js的保留字作为变量名

            abstract、boolean、byte、char、class、const、debugger、double、enum、export、extends、fimal、float

            goto、implements、import、int、interface、long、mative、package、private、protected、public、short、static、super、synchronized、throws、transient、volatile

        变量的长度规则每个浏览器不一样，不用在意

    3.变量的赋值

        变量的赋值使用等号，等号就是赋值号，子js中=没有其他含义，就是赋意思

        var a;

        a = 100;

        console.log(a);

        可以将变量的定义和赋值放在一起；

        var a = 100;

        console.log(a);

        等号 = 右边的值赋值给左边，等号右边的值不变

        var a = 100;

        var b = 200;

        a = b;

        console.log(a);//200

        console.log(b);//200

        如果一个变量定以后没有赋值，这个变量是什么？

        var m;

        console.log(m);//   Undefined不明确的,未被定义的

        其实这个m已经被定义了，但是浏览器认为没有赋值就是没有完成定义，值就是undefined

        如果不使用var定义一个变量，会怎么样？

        n = 100;

        console.log(n);//100

        看上去没有区别，没有使用var定义了一个全局变量

    4.变量声明的提升

        只能提升变量的声明，不能提升变量的初始值

        a = 100;

        var a;//提升到开头执行

        console.log(a);

        console.log(b);//变量声明的提升，只能提升定义，不能提升初值，输出undefined

        var b = 200;//提升声明,不提升变量的初始值

        ==>

        var b;

        console.log(b);

        b = 200;

        console.log(b);

    5.变量的传递

        使用=赋值号传递变量的值

    6.区分变量还是直接量

        区分字符串还是变量，有引号的是字符串，没引号的是变量