前端之JavaScript基础

JavaScript介绍

JavaScript是运行在浏览器端的脚步语言，JavaScript主要解决的是前端与用户交互的问题，包括使用交互与数据交互。 JavaScript是浏览器解释执行的，前端脚本语言还有JScript（微软，IE独有），ActionScript( Adobe公司，需要插件)等。

前端三大块
1、HTML：页面结构
2、CSS：页面表现：元素大小、颜色、位置、隐藏或显示、部分动画效果
3、JavaScript：页面行为：部分动画效果、页面与用户的交互、页面功能

JavaScript嵌入页面的方式

1、行间事件（主要用于事件）

<input type="button" name="" onclick="alert('ok！');">

2、页面script标签嵌入

<script type="text/javascript">        
    alert('ok！');
</script>

3、外部引入

<script type="text/javascript" src="js/index.js"></script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js</title>
    <!-- 第三种嵌入页面方式-外部引入 -->
    <script type="text/javascript" src="js/01-hello.js"></script>
    
    <!-- 第二种嵌入页面方式-页面script标签嵌入 -->
    <script type="text/javascript">
        alert('how are you')
    </script>

</head>
<body>
    
    <!-- 第一种嵌入页面方式-行间事件 -->
    <input type="button" name="" value="点击" onclick="alert('hello world')">
    
</body>
</html>

变量

JavaScript 是一种弱类型语言，javascript的变量类型由它的值来决定。定义变量需要用关键字 'var'
 var iNum = 123;
 var sTr = 'asd';

 //同时定义多个变量可以用","隔开，公用一个‘var’关键字

 var iNum = 45,sTr='qwe',sCount='68';
变量类型

5种基本数据类型：
1、number 数字类型
2、string 字符串类型
3、boolean 布尔类型 true 或 false
4、undefined undefined类型，变量声明未初始化，它的值就是undefined
5、null null类型，表示空对象，如果定义的变量将来准备保存对象，可以将变量初始化为null,在页面上获取不到对象，返回的值就是null

1种复合类型：
object

jivascript注释

1、一条javascript语句应该以“;”结尾
<script type="text/javascript">    
var iNum = 123;
var sTr = 'abc123';
function fnAlert(){
    alert(sTr);
};
fnAlert();
</script>
2、javascript注释
<script type="text/javascript">    

// 单行注释
var iNum = 123;
/*  
    多行注释
    1、...
    2、...
*/
var sTr = 'abc123';
</script>
变量、函数、属性、函数参数命名规范

1、区分大小写
2、第一个字符必须是字母、下划线（_）或者美元符号（$）
3、其他字符可以是字母、下划线、美元符或数字

匈牙利命名风格：

对象o Object 比如：oDiv
数组a Array 比如：aItems
字符串s String 比如：sUserName
整数i Integer 比如：iItemCount
布尔值b Boolean 比如：bIsComplete
浮点数f Float 比如：fPrice
函数fn Function 比如：fnHandler
正则表达式re RegExp 比如：reEmailCheck

获取元素方法一

可以使用内置对象document上的getElementById方法来获取页面上设置了id属性的元素，获取到的是一个html对象，然后将它赋值给一个变量，比如：
<script type="text/javascript">
    var oDiv = document.getElementById('div1');
</script>
....
<div id="div1">这是一个div元素</div>
上面的语句，如果把javascript写在元素的上面，就会出错，因为页面上从上往下加载执行的，javascript去页面上获取元素div1的时候，元素div1还没有加载，解决方法有两种：

第一种方法：将javascript放到页面最下边
....
<div id="div1">这是一个div元素</div>
....

<script type="text/javascript">
    var oDiv = document.getElementById('div1');
</script>
</body>
第二种方法：将javascript语句放到window.onload触发的函数里面,获取元素的语句会在页面加载完后才执行，就不会出错了。
<script type="text/javascript">
    window.onload = function(){
        var oDiv = document.getElementById('div1');
    }
</script>

....

<div id="div1">这是一个div元素</div>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <script type="text/javascript">
        window.onload = function(){
        var oDiv = document.getElementById('div1');
        oDiv.style.color = "red";
        oDiv.style.fontSize = "30px";
       }
    </script>

</head>
<body>
    <div id="div1">这是一个div</div>
    
</body>
</html>

操作元素属性

获取的页面元素，就可以对页面元素的属性进行操作，属性的操作包括属性的读和写。

操作属性的方法
1、“.” 操作
2、“[ ]”操作

属性写法

1、html的属性和js里面属性写法一样
2、“class” 属性写成 “className”
3、“style” 属性里面的属性，有横杠的改成驼峰式，比如：“font-size”，改成”style.fontSize”

通过“.”操作属性：

<script type="text/javascript">

    window.onload = function(){
        var oInput = document.getElementById('input1');
        var oA = document.getElementById('link1');
        // 读取属性值
        var sValue = oInput.value;
        var sType = oInput.type;
        var sName = oInput.name;
        var sLinks = oA.href;
        // 写(设置)属性
        oA.style.color = 'red';
        oA.style.fontSize = sValue;
    }

</script>

......

<input type="text" name="setsize" id="input1" value="20px">
<a href="http://www.itcast.cn" id="link1">传智播客</a>

通过“[ ]”操作属性：

<script type="text/javascript">

    window.onload = function(){
        var oInput1 = document.getElementById('input1');
        var oInput2 = document.getElementById('input2');
        var oA = document.getElementById('link1');
        // 读取属性
        var sVal1 = oInput1.value;
        var sVal2 = oInput2.value;
        // 写(设置)属性
        // oA.style.val1 = val2; 没反应
        oA.style[sVal1] = sVal2;        
    }

</script>

......

<input type="text" name="setattr" id="input1" value="fontSize">
<input type="text" name="setnum" id="input2" value="30px">
<a href="http://www.itcast.cn" id="link1">传智播客</a>

innerHTML
innerHTML可以读取或者写入标签包裹的内容

<script type="text/javascript">
    window.onload = function(){
        var oDiv = document.getElementById('div1');
        //读取
        var sTxt = oDiv.innerHTML;
        alert(sTxt);
        //写入
        oDiv.innerHTML = '<a href="http://www.itcast.cn">传智播客<a/>';
    }
</script>

......

<div id="div1">这是一个div元素</div>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    
    <script type="text/javascript">

        window.onload = function(){
            // var oDiv = document.getElementByΙd('div1');
             var oDiv = document.getElementById('div1');

            var oA = document.getElementById('link');

            oDiv.style.color = "red";
            // var oDiv = document.getElementById('div1');
        // oDiv.style.color = "red";

            //  读取属性
            var sdiv = oDiv.id
            alert(sdiv);

            // 写属性
            // oDiv.style.color = "red";
            oA.href = "http://www.baidu.com";
            oA.title = "这是一个去百度的链接";
        }
    </script>



</head>
<body>
    <div id="div1">这是一个div</div>
    <a href="#" id="link">这是一个a链接</a>
</body>
</html>

函数

函数就是重复执行的代码片。

函数定义与执行

<script type="text/javascript">
    // 函数定义
    function fnAlert(){
        alert('hello!');
    }
    // 函数执行
    fnAlert();
</script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function fnShow() {
            alert("hello world")
        }

        function fnChange() {
            var oDiv = document.getElementById("div1")
            oDiv.style.color = "red";
            oDiv.style.fontSize = "30px";
        }



    </script>
</head>
<body>
    <div id="div1" onclick="fnShow()">这是一个div</div>
    <input type="button" value="改变div" onclick="fnChange()">
</body>
</html>

变量与函数预解析

JavaScript解析过程分为两个阶段，先是编译阶段，然后执行阶段，在编译阶段会将function定义的函数提前，并且将var定义的变量声明提前，将它赋值为undefined。

<script type="text/javascript">    
    fnAlert();       // 弹出 hello！
    alert(iNum);  // 弹出 undefined
    function fnAlert(){
        alert('hello!');
    }
    var iNum = 123;
</script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>

        // 预解析会让变量声明提前
        alert(iNum); //弹出undefined

        // 预解析会让函数的声明和定义提前
        fnMy()

        var iNum = 1

        // 使用一个未声明的变量，出错
        alert(iNum2)

        function fnMy() {
            alert("hello")
        }


    </script>
</head>
<body>

</body>
</html>

提取行间事件

在html行间调用的事件可以提取到javascript中调用，从而做到结构与行为分离。

<!--行间事件调用函数   -->
<script type="text/javascript">        
    function fnAlert(){
        alert('ok!');
    }
</script>
......
<input type="button" name="" value="弹出" onclick="fnAlert()">

<!-- 提取行间事件 -->
<script type="text/javascript">

window.onload = function(){
    var oBtn = document.getElementById('btn1');
    oBtn.onclick = fnAlert;
    function fnAlert(){
        alert('ok!');
    }
}    
</script>
......
<input type="button" name="" value="弹出" id="btn1">

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>

        window.onload = function () {
            var oBtn = document.getElementById("btn");
            oBtn.onclick = fnChange;



        function fnChange() {
            var oDiv = document.getElementById("div1");
            oDiv.style.color = "red";
            oDiv.style.fontSize = "30px";
        }

}

    </script>
</head>
<body>
    <div id="div1">这是一个div</div>
    <input type="button" value="改变div" id="btn">
</body>
</html>

匿名函数

定义的函数可以不给名称，这个叫做匿名函数，可以将匿名函数直接赋值给元素绑定的事件来完成匿名函数的调用。

<script type="text/javascript">

window.onload = function(){
    var oBtn = document.getElementById('btn1');
    /*
    oBtn.onclick = myalert;
    function myalert(){
        alert('ok!');
    }
    */
    // 直接将匿名函数赋值给绑定的事件

    oBtn.onclick = function (){
        alert('ok!');
    }
}

</script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>

        // 预解析会让变量声明提前
        alert(iNum); //弹出undefined

        // 预解析会让函数的声明和定义提前
        fnMy()

        var iNum = 1

        // 使用一个未声明的变量，出错
        alert(iNum2)

        function fnMy() {
            alert("hello")
        }


    </script>
</head>
<body>

</body>
</html>

综合练习

网页换肤

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/01-skin.css" id="lk">
    <script>
        window.onload = function () {

            var oBtn1 = document.getElementById("btn1")
            var oBtn2 = document.getElementById("btn2")
            var oLk = document.getElementById("lk")

            oBtn1.onclick = function () {
                oLk.href = "css/01-skin.css"
            }

             oBtn2.onclick = function () {
                oLk.href = "css/02-skin.css"
            }
        }
    </script>
</head>
<body>
    <input type="button" id="btn1" value="样式1">
    <input type="button" id="btn2" value="样式2">
</body>
</html>

函数传参

<script type="text/javascript">
    function fnAlert(a){
        alert(a);
    }
    fnAlert(12345);
</script>

函数'return'关键字

函数中'return'关键字的作用：
1、返回函数执行的结果
2、结束函数的运行
3、阻止默认行为

<script type="text/javascript">
function fnAdd(iNum01,iNum02){
    var iRs = iNum01 + iNum02;
    return iRs;
    alert('here!');
}

var iCount = fnAdd(3,4);
alert(iCount);  //弹出7
</script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
       window.onload = function (mystyle,val) {

           // function myalert(a) {
           //     alert(a)
           // }
           //
           // myalert("hello world")
           function fnAdd(a,b) {
               var c = a+b;
               // 返回c的值，然后结束函数的运行
               return c;
               alert("内部的c="+c);
           }
            var iSum = fnAdd(3,5);
                alert(iSum);

            function fnChange(mystyle,val) {
                var oDiv = document.getElementById("div1");
                oDiv.style[mystyle] = val;
            }
           fnChange("color","red")
           fnChange("fontSize","30px")
       }
    </script>
</head>
<body>
    <div id="div1">这是一个div</div>
</body>
</html>

条件语句

通过条件来控制程序的走向，就需要用到条件语句。

运算符

1、算术运算符： +(加)、 -(减)、 *(乘)、 /(除)、 %(求余)
2、赋值运算符：=、 +=、 -=、 *=、 /=、 %=
3、条件运算符：==、===、>、>=、<、<=、!=、&&(而且)、||(或者)、!(否)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        var iNum = 12;
        var iNum2 = 23;
        if (iNum>iNum2){
            alert("12>23")
        }
        else{
            alert("12<23")
        }


    </script>
</head>
<body>

</body>
</html>

制作单个按钮点击切换元素的显示和隐藏效果(点击关闭页面再点击打开页面）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width:200px;
            height: 200px;
            background-color: gold;
        }
    </style>
    <script>
        window.onload = function () {
            var oBtn = document.getElementById("btn");
            var oBox = document.getElementById("box1");

            // oBox.style.display是读取的标签里的dispaly值，如果没写，这个值为空。
            oBtn.onclick = function () {
                if (oBox.style.display == "block" || oBox.style.display == "")
                {
                    oBox.style.display = "none";
                }
                else
                {
                    oBox.style.display = "block";
                }
        }
        }

    </script>
</head>
<body>
    <input type="button" id="btn" value="切换">
    <div class="box" id="box1" ></div>

</body>
</html>

switch语句

多重if else语句可以换成性能更高的switch语句就，个人感觉用法跟c语言差不多。

制作随着星期换背景的页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        window.onload = function () {
            var iWeek = 5;
            var oBody = document.getElementById("bd");
            switch (iWeek) {
                case 1:
                    oBody.style.backgroundColor = "red";
                case 2:
                    oBody.style.backgroundColor = "green";
                case 3:
                    oBody.style.backgroundColor = "red";
                case 4:
                    oBody.style.backgroundColor = "red";
                case 5:
                    oBody.style.backgroundColor = "red";
                default:
                    oBody.style.backgroundColor = "red";
            }
        }
    </script>
</head>
<body id="bd">

</body>
</html>

数组及操作方法

数组就是一组数据的集合，javascript中，数组里面的数据可以是不同类型的。

定义数组的方法

//对象的实例创建（不推荐这种）
var aList = new Array(1,2,3);

//直接量创建
var aList2 = [1,2,3,'asd'];

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        window.onload = function () {


        // 对象的实例创建，不推荐
        // var alist1 = new Array("1,2,3,4")

        // 对象的量创建
        var aList2 = ['a','b','c'];

        // 1、获取数组的长度：aList.length;
            alert(aList2.length);

        // 2、用下标操作数组的某个数据：aList[0]
            alert(aList2[0]);

        // 3、join() 将数组成员通过一个分隔符合并成字符串
        //     alert(aList2.join('/'));
        // 4、push() 和 pop() 从数组最后增加成员或删除成员
            aList2.push('d');
            alert(aList2);

            aList2.pop('d');
            alert(aList2);
        // 5、unshift()和 shift() 从数组前面增加成员或删除成员
            aList2.unshift('a')
            alert(aList2);
            aList2.shift("a")
            alert(aList2);
        // 6、reverse() 将数组反转
            alert(aList2.reverse());
        // 7、indexOf() 返回数组中元素第一次出现的索引值
            alert(aList2.indexOf('a'));
        // 8、splice() 在数组中增加或删除成员
        //    aList.splice(2,1,7,8,9); //从第2个元素开始，删除1个元素，然后在此位置增加'7,8,9'三个元素
            aList2.splice(2,0,"r",'r')
            alert(aList2);

    }

    </script>
</head>
<body>

</body>
</html>

循环语句

有规律的重复性操作需要用到。

for循环

for(var i=0;i<len;i++)
{
    ......
}

课堂练习
1、将数组中的数据分别用弹框弹出

使用for循环遍历数组，而后使用alert弹出即可。
2、将数组中的数据放入到页面中的列表中

（1）定义空列表和数组数据

（2）使用for循环遍历数组，同时使用push语句将每一次的结果添加到列表中

while循环

var i=0;

while(i<8){
    ......
    i++;
}

数组去重

通过indexOf方法获取要去重的数组的索引值是不是跟for循环遍历的值相等，如果不相等，则已经重复。

var aList = [1,2,3,4,4,3,2,1,2,3,4,5,6,5,5,3,3,4,2,1];

var aList2 = [];

for(var i=0;i<aList.length;i++)
{
    if(aList.indexOf(aList[i])==i)
    {
        aList2.push(aList[i]);
    }
}

alert(aList2);

获取元素方法二

可以使用内置对象document上的getElementsByTagName方法来获取页面上的某一种标签，获取的是一个选择集，不是数组，但是可以用下标的方式操作选择集里面的标签元素。

<script type="text/javascript">
    window.onload = function(){
        var aLi = document.getElementsByTagName('li');
        // aLi.style.backgroundColor = 'gold'; // 出错！不能同时设置多个li
        alert(aLi.length);
        aLi[0].style.backgroundColor = 'gold';
    }
</script>
....
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>

课堂练习
使用循环操作列表中的每个元素

  // var aLi = document.getElementsByTagName('li');
            // var iLen = aLi.length;
            // alert(iLen);
            // 同时给所有的li加背景色
            // for (var i=0;i<iLen;i++)
            // {
            //     aLi[i].style.backgroundColor = 'green';
            // }

            var oLi2 = document.getElementById('list2');
            var aLi2 = oLi2.getElementsByTagName('li');
            var iLen2 = aLi2.length;
            alert(iLen2);
            for (var i=0;i<iLen2;i++){
                aLi2[i].style.backgroundColor = 'pink';
            }
        }
...
<ul id="list1">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
        <li>11</li>
        <li>12</li>
    </ul>
    <ul id="list2">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>

Javascript组成

1、ECMAscript javascript的语法（变量、函数、循环语句等语法）
2、DOM 文档对象模型操作html和css的方法
3、BOM 浏览器对象模型操作浏览器的一些方法

字符串处理方法

1、字符串合并操作：“ + ”

var iNum01 = 12;
var iNum02 = 24;
var sNum03 = '12';
var sTr = 'abc';
alert(iNum01+iNum02);  //弹出36
alert(iNum01+sNum03);  //弹出1212 数字和字符串相加等同于字符串相加
alert(sNum03+sTr);     // 弹出12abc

2、parseInt() 将数字字符串转化为整数

var sNum01 = '12';
var sNum02 = '24';
var sNum03 = '12.32';
alert(sNum01+sNum02);  //弹出1224
alert(parseInt(sNum01)+parseInt(sNum02))  //弹出36
alert(sNum03)   //弹出数字12 将字符串小数转化为数字整数

3、parseFloat() 将数字字符串转化为小数

var sNum03 = '12.32'
alert(parseFloat(sNum03));  //弹出 12.32 将字符串小数转化为数字小数

4、split() 把一个字符串分隔成字符串组成的数组

var sTr = '2017-4-22';
var aRr = sTr.split("-");
var aRr2= sTr.split("");

alert(aRr);  //弹出['2017','4','2']
alert(aRr2);  //弹出['2','0','1','7','-','4','-','2','2']

5、charAt() 获取字符串中的某一个字符

var sId = "#div1";
var sTr = sId.charAt(0);
alert(sTr); //弹出 #

6、indexOf() 查找字符串是否含有某字符

var sTr = "abcdefgh";
var iNum = sTr.indexOf("c");
alert(iNum); //弹出2

7、substring() 截取字符串用法： substring(start,end)（不包括end）

var sTr = "abcdefghijkl";
var sTr2 = sTr.substring(3,5);
var sTr3 = sTr.substring(1);

alert(sTr2); //弹出 de
alert(sTr3); //弹出 bcdefghijkl

8、toUpperCase() 字符串转大写

var sTr = "abcdef";
var sTr2 = sTr.toUpperCase();
alert(sTr2); //弹出ABCDEF

9、toLowerCase() 字符串转小写

var sTr = "ABCDEF";
var sTr2 = sTr.toLowerCase();
alert(sTr2); //弹出abcdef

字符串反转

var str = 'asdfj12jlsdkf098';
var str2 = str.split('').reverse().join('');

alert(str2);

类型转换

1、直接转换 parseInt() 与 parseFloat()

alert('12'+7); //弹出127
alert( parseInt('12') + 7 );  //弹出19 
alert( parseInt(5.6));  // 弹出5
alert('5.6'+2.3);  // 弹出5.62.3
alert(parseFloat('5.6')+2.3);  // 弹出7.8999999999999995
alert(0.1+0.2); //弹出 0.3000000000000004
alert((0.1*100+0.2*100)/100); //弹出0.3
alert((parseFloat('5.6')*100+2.3*100)/100); //弹出7.9

2、隐式转换 “==” 和 “-”

if('3'==3)
{
    alert('相等');
}

// 弹出'相等'
alert('10'-3);  // 弹出7

3、NaN 和 isNaN

alert( parseInt('123abc') );  // 弹出123
alert( parseInt('abc123') );  // 弹出NaN

定时器
定时器在javascript中的作用
1、制作动画
2、异步操作
3、函数缓冲与节流

定时器类型及语法

/*
    定时器：
    setTimeout  只执行一次的定时器 
    clearTimeout 关闭只执行一次的定时器
    setInterval  反复执行的定时器
    clearInterval 关闭反复执行的定时器

*/

var time1 = setTimeout(myalert,2000);
var time2 = setInterval(myalert,2000);
/*
clearTimeout(time1);
clearInterval(time2);
*/
function myalert(){
    alert('ok!');
}

课堂练习
1、定时器制作移动动画


    <style>
        .box{
            width:200px;
            height: 200px;
            background-color: gold;
            border:1px solid #000;
            position: absolute;
            left: 0px;
        }
    </style>
    <script>
        window.onload = function () {
          var oDv = document.getElementById('div1');
          var iLeft = 0;
          var iSpeed = 5;
          var time1 = setInterval(function ()
          {
              iLeft += iSpeed;
              oDv.style.left = iLeft + 'px';
              if (iLeft>500)
              {
                  iSpeed = -5;
              }
              if (iLeft<0)
              {
                  iSpeed = 5;
              }
          },30)


        }
    </script>
</head>
<body>
    <div class="box" id="div1"></div>
</body>
</html>

2、定时器制作无缝滚动

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>无缝滚动</title>
	<style type="text/css">
		*{
			margin:0;
			padding:0;
		}

		.list_con{

			width:1000px;
			height:200px;
			border:1px solid #000;
			margin:10px auto 0;
			background-color:#f0f0f0;
			position:relative;
			overflow:hidden;
		}

		.list_con ul{
			list-style:none;
			width:2000px;
			height:200px;
			position:absolute;
			left:0;
			top:0;
		}


		.list_con li{
			width:180px;
			height:180px;
			float:left;
			margin:10px;
		}

		.btns_con{
			width:1000px;
			height:30px;
			margin:50px auto 0;
			position:relative;
		}

		.left,.right{
			width:30px;
			height:30px;
			background-color:gold;
			position:absolute;
			left:-40px;
			top:124px;
			font-size:30px;
			line-height:30px;
			color:#000;
			font-family: 'Arial';
			text-align:center;
			cursor:pointer;
			border-radius:15px;
			opacity:0.5;
		}

		.right{
			left:1010px;
			top:124px;
		}

	</style>
	<script>
		window.onload = function () {
			var oDiv = document.getElementById('slide');
			var oBtn01 = document.getElementById('btn01');
			var oBtn02 = document.getElementById('btn02');
            // 通过标签获取的元素，得到的选择集，加上下标获取的是元素
			var oUl = document.getElementsByTagName('ul')[0];
			// 将ul里面的内容复制一份，就有了10个ul
			oUl.innerHTML = oUl.innerHTML + oUl.innerHTML;
			var iLeft= 0;
			var iSpeed = -5;
			var iNowspeend = 0;
			var time = setInterval(moving,30);

			function moving() {
			    iLeft += iSpeed;

			    // 当ul向左滚动到第五个li时，瞬间拉回到初始位置。
				if (iLeft<-1000)
				{
					iLeft = 0;
				}
				// 当ul向右开始滚动时，瞬间将li拉回到往左的第五个位置。
				if (iLeft>0)
                {
                    iLeft = -1000;
                }
				oUl.style.left = iLeft + 'px';
			}

			oBtn01.onclick = function () {
                iSpeed = -5;
            }
            oBtn02.onclick = function () {
                iSpeed = 5;
            }

            // 当鼠标移入的时候
            oDiv.onmouseover = function () {
                iNowspeend = iSpeed
			    iSpeed = 0;
            }

            // 当鼠标移出的时候
            oDiv.onmouseout = function () {
                iSpeed = iNowspeend;
            }
		}


	</script>

</head>
<body>
	<div class="btns_con">
		<div class="left" id="btn01">&lt;</div>
		<div class="right" id="btn02">&gt;</div>
	</div>
	<div class="list_con" id="slide">
		<ul>
		<li><a href=""><img src="images/goods001.jpg" alt="商品图片"></a></li>
		<li><a href=""><img src="images/goods002.jpg" alt="商品图片"></a></li>
		<li><a href=""><img src="images/goods003.jpg" alt="商品图片"></a></li>
		<li><a href=""><img src="images/goods004.jpg" alt="商品图片"></a></li>
		<li><a href=""><img src="images/goods005.jpg" alt="商品图片"></a></li>
		</ul>
	</div>
</body>
</html>

3、定时器制作时钟

<script type="text/javascript">
    window.onload = function(){    
        var oDiv = document.getElementById('div1');
        function timego(){
            var now = new Date();
            var year = now.getFullYear();
            var month = now.getMonth()+1;
            var date = now.getDate();
            var week = now.getDay();
            var hour = now.getHours();
            var minute = now.getMinutes();
            var second = now.getSeconds();
            var str = '当前时间是：'+ year + '年'+month+'月'+date+'日 '+toweek(week)+' '+todou(hour)+':'+todou(minute)+':'+todou(second);
            oDiv.innerHTML = str;
        }
        timego();
        setInterval(timego,1000);
    }

    function toweek(n){
        if(n==0)
        {
            return '星期日';
        }
        else if(n==1)
        {
            return '星期一';
        }
        else if(n==2)
        {
            return '星期二';
        }
        else if(n==3)
        {
            return '星期三';
        }
        else if(n==4)
        {
            return '星期四';
        }
        else if(n==5)
        {
            return '星期五';
        }
        else
        {
            return '星期六';
        }
    }


    function todou(n){
        if(n<10)
        {
            return '0'+n;
        }
        else
        {
            return n;
        }
    }
</script>
......
<div id="div1"></div>

4、定时器制作倒计时

<script type="text/javascript">
    window.onload = function(){
        var oDiv = document.getElementById('div1');
        function timeleft(){
            var now = new Date();
            var future = new Date(2016,8,12,24,0,0);
            var lefts = parseInt((future-now)/1000);
            var day = parseInt(lefts/86400);
            var hour = parseInt(lefts%86400/3600);
            var min = parseInt(lefts%86400%3600/60);
            var sec = lefts%60;
            str = '距离2016年9月12日晚24点还剩下'+day+'天'+hour+'时'+min+'分'+sec+'秒';
            oDiv.innerHTML = str; 
        }
        timeleft();
        setInterval(timeleft,1000);        
    }

</script>
......
<div id="div1"></div>

变量作用域

变量作用域指的是变量的作用范围，javascript中的变量分为全局变量和局部变量。

1、全局变量：在函数之外定义的变量，为整个页面公用，函数内部外部都可以访问。
2、局部变量：在函数内部定义的变量，只能在定义该变量的函数内部访问，外部无法访问。
<script type="text/javascript">
    //全局变量
    var a = 12;
    function myalert()
    {
        //局部变量
        var b = 23;
        alert(a);
        alert(b);
    }
    myalert(); //弹出12和23
    alert(a);  //弹出12    
    alert(b);  //出错
</script>

封闭函数

封闭函数是javascript中匿名函数的另外一种写法，创建一个一开始就执行而不用命名的函数。

一般定义的函数和执行函数：
function myalert(){
    alert('hello!');
};

myalert();
封闭函数：
(function myalert(){
    alert('hello!');
})();
还可以在函数定义前加上“~”和“!”等符号来定义匿名函数（不推荐）
!function myalert(){
    alert('hello!');
}()
封闭函数的好处
封闭函数可以创造一个独立的空间，在封闭函数内定义的变量和函数不会影响外部同名的函数和变量，可以避免命名冲突，在页面上引入多个js文件时，用这种方式添加js文件比较安全，比如：
var iNum01 = 12;
function myalert(){
    alert('hello!');
}
(function(){
    var iNum01 = 24;
    function myalert(){
        alert('hello!world');
    }
    alert(iNum01);
    myalert()
})()
alert(iNum01);
myalert();

常用内置对象

1、document

document.getElementById //通过id获取元素
document.getElementsByTagName //通过标签名获取元素
document.referrer  //获取上一个跳转页面的地址(需要服务器环境)


    <script>
        window.onload = function ()
        {
            // 存储上一个页面跳转的地址
            // var sUrl = document.referrer;

            // var oBtn = document.getElementById('btn01');
            //
            // oBtn.onclick = function () {
            //   // window.location.href = sUrl,要有服务器
            //   window.location.href = 'http://www.baidu.com';
            // }

            var oBody = document.getElementById('body01');
            var sData = window.location.search;

            var sHash = window.location.hash;
            alert(sHash);
            if(sData!='')
            {
                var aRr = sData.split('=');
                // alert(aRr);
                var iNum = aRr[1];
                alert(iNum);

                if(iNum==1)
                {
                    oBody.style.backgroundColor = 'gold';
                }
                else if(iNum==2)
                {
                   oBody.style.backgroundColor = 'green';
                }

            }


        }
    </script>
</head>
<body id="body01">
    <!--<input type="button" value="跳转" id="btn01">-->
</body>
</html>

2、location

window.location.href  //获取或者重定url地址
window.location.search //获取地址参数部分
window.location.hash //获取页面锚点或者叫哈希值

课堂练习
通过地址栏的参数改变页面状态

3、Math

Math.random 获取0-1的随机数
Math.floor 向下取整
Math.ceil 向上取整

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        var iPi = Math.PI;
        // alert(iPi);

        // 返回0～1的随机数
        var iNum = Math.random();
        // alert(iNum)

        var arr = [];

        for(var i=0;i<20;i++){
            var iNum = Math.random();
            arr.push(iNum);
        }
        // alert(arr);

        console.log(arr);

        // 向下取整，弹出5
        alert(Math.floor(5.6));

        // 向上取整,弹出6;
        alert(Math.ceil(5.6));

        // 10 -20之间的随机数
        var iN01 = 10;
        var iN02 = 20;
        var iN03 = Math.floor((iN02-iN01)*Math.random()+iN01);
        alert(iN03);


    </script>
</head>
<body>

</body>
</html>

调试程序的方法

1、alert

2、console.log

3、document.title

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        // window.onload = function () {

            // var oBody = document.getElementById('body01')


            var iNUm01 = 12;

            // alert会阻止程序的运行
            // alert(iNUm01);

            console.log(iNUm01);
            // oBody.style.backgroundColor = 'green';

            var iNum02 = 24;

            var iNum03 = 36;

            console.log(iNum02);
            // alert(iNum02);

            setInterval(function () {
                iNum03++;

                // console.log(iNum03);
                document.title = iNum03;
            },100)

        // }

    </script>
</head>
<body id="body01">

</body>
</html>

以上内容为自己复习JavaScript做准备，也希望可以给大家一点帮助。我每天都会把自己所学的知识和敲的代码发布到博客上，如果有错误，请大家指出，谢谢。