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 type="text/javascript">

            // 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语句和语句之间的换行，空格，和缩进不敏感

        <script>

            alert("你好");alert("word");

                alert("helo word");

        </script>

        ==>

        <script>

            alert("你好");

            alert("hello");

            alert("word");

        </script>

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

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

        <script>

            alert("hello")alert("word")

        </script>

    5.js 注释

        <!-- html注释 -->

        /* 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.区分变量还是直接量

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