书籍网站推荐

JavaScript权威指南
JavaScript高级程序设计
W3Cschool网站
↑作为查阅工具使用，不是阅读使用

课程目录

JavaScript基础知识
函数&对象
DOM,BOM,Ajax,jQuery

职业发展

成长，不可替代性
三年定理

前端三大基础知识+MVC

前端三大基础知识
- HTML
- CSS
- JavaScript
MVC
- M：模型
- V：视图
- C：控制

动手实验

淘宝导航栏

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            div.taobao{
                background-color: #ff9000;
                width: 990px;
                height: 30px;
            }
            *{
                margin: 0;
                padding: 0;
            }
            ul{
                list-style: none;
            }
            li{
                margin: 0 10px;
                color: #ffffff;
                float: left;
                font-weight: bold;
                font-size: 16px;
                line-height: 30px;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div class="taobao">
            <ul>
                <li>天猫</li>
                <li>聚划算</li>
                <li>天猫超市</li>
            </ul>
        </div>
    </body>
</html>

JS实现一个百变空间首页炫酷轮播图

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            ul{
                list-style: none;
            }
            li{
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
                height: 484px;
            }
        </style>
    </head>
    <body>
        <div id="banner">
            <ul>
                <li><img src="img/banner1.png" alt="" /></li>
                <li><img src="img/banner2.png" alt="" /></li>
                <li><img src="img/banner3.png" alt="" /></li>
                <li><img src="img/banner4.png" alt="" /></li>
                <li><img src="img/banner5.png" alt="" /></li>
                <li><img src="img/banner6.png" alt="" /></li>
            </ul>
        </div>
        <script type="application/javascript">
            main();
            
            function main(){
                var obj1=document.getElementById('banner');
                var li=obj1.getElementsByTagName('li');
                var j=0;
                var iIndex=1;
                var timer;
                
                for(var i=0;i<li.length;i++){
                    if(i==j){
                        li[i].style.opacity='1';
                        continue;
                    }
                    li[i].style.opacity='0';
                }
                function starRoll(){
                    j++;
                    if(j>=li.length){
                        j=0;
                    }
                    li[j].style.zIndex=iIndex;
                    iIndex++;
                    fadeIn(li[j],1)
                };
                function fadeIn(obj,period){
                    var COUNT=50;
                    clearInterval(obj.timer);
                    obj.timer=setInterval(function(){
                        var opacityValue=Number.parseFloat(obj.style.opacity);
                        opacityValue+=period/COUNT;
                        if(opacityValue<1){
                            obj.style.opacity=opacityValue;
                        }else{
                            obj.style.opacity=1;
                            clearInterval(obj.timer);
                            for(var i=0;i<li.length;i++){
                                if(i==j){
                                    li[i].style.opacity='1';
                                    continue;
                                        }
                    
                                    }
                            }
                    },1000/COUNT);
                    
                    
                }
                timer=setInterval(starRoll,2000);
            }
        </script>
    </body>
</html>

框架

三大框架
- AngularJS（学它）
- React
- Vue
其他
- bootstrap
- jQuery（JavaScript库）
- node.js

浏览器发展史

浏览器发展史.PNG

内核

浏览器内核
- IE：Trident
- Chrome、Safari：Webkit
- Firefox：Gecko
- Opera：Presto
历史年表
- 2001年，IE6：从内核中剥离JS引擎
- 2008年，Chrome：V8 JS引擎
- node.js把V8引擎从浏览器里面包装一下，放到服务器端
- JavaScript只能在浏览器中存在（×，有node.js存在）

解释性语言

JavaScript是一种解释性语言

语言	优点	缺点
解释语言	速度慢	可以跨平台，针对不同平台不需要重新编译
编译语言	运行速度快	不可以跨平台，针对不同平台需要重新编译

JavaScript是一种解释性语言.PNG

线程：1-8

JavaScript只支持单线程
- 同步调用
- 异步调用

角色

产品经理
职责
- 市场/用户调研
- 产品定义&产品需求
- 项目管理
- 产品宣讲
- 产品生命周期管理
开发工程师（以技术为中心）
- 职责
  - 审定产品需求
  - 代码的设计&开发
  - 代码重构&二次开发
  - 代码维护
测试工程师（以用户为中心）
- 职责
  - 审定产品需求
  - 审定代码设计
  - 测试设计&用例开发
  - 测试集执行
  - 回归测试&代码管理
  - 灰度发布
运维工程师
- 职责
  - 维护生产环境
    - 硬件
    - 操作系统&软件
    - 应用服务
  - 上线
  - 紧急情况处理，甚至回滚