CSS&javascript javascript初步概念

javascript是網頁互動的基礎，以function概念來實現

可以結合css的樣式設計來達成互動

例如原本設定css屬性為顯示

按下對應的function裡設定將css的屬性改為消失

如此即形成按下後即消失的效果

javascript之後的還有一個叫jQuery的函式庫，是建立在

javascript之上，應用的效能強大、花樣繁多

如果依此函式庫設計網頁將會減少許多互動效果的開發時間

此函式庫已受到MicroSoft及Google等軟體企業所認可

雖尚未成為國際標準的語言，但實質上也幾乎差不多了

缺點是執行上花俏亮麗，但相對會犧牲效能

目前電腦、網路都滿夠力了，手機就可能會有些問題

為此還針對手機端設計了手機專用的jQuery函式庫

使手機端也能有豐富的網頁互動效果





這是設定原本的css格式：

<style type="text/css">
        p:first-letter {
            /*
                p的偽標籤，意指的每個p中首字母
                字型18pt，粗體，顏色紅色
            */
            font-size:18pt;
            font-weight:bold;
            color:red;
        }

        /*-------------------------------------------------*/
        p:nth-child(2) {
            /*
                p的偽標籤，意指網頁中第2順位的p
                顏色藍色
            */
            color: blue;
        }

        /*-------------------------------------------------*/
        p:nth-child(3) {
            /*
                p的偽標籤，意指網頁中第3順位的p
                意指：邊界 為5pt大小 固體 顏色紫色
            */
            border: 5px solid purple;
            /*
                border-color:purple;
                border-width:5px;
                border-style:dashed;
                javascript裡有簡化寫法，上面一句等於下面3句
                
            */
            border-radius: 10px 10px;
            /*
                邊界的角角，圓10pt
                border-top-right-radius:10px 10px;
                border-bottom-left-radius:10px 10px;
            */
        }

        /*-------------------------------------------------*/
        #Btn1 {
            /*
                id為btn1的按鈕，寬100px 長30px
            */
            width:100px;
            height:30px;
        }

        /*-------------------------------------------------*/
        #MyDiv {
            /*
                id為MyDiv的div標籤
                背景色：#FF0
                寬300，長200
                絕對位置
                z軸的順位為2，意指較上層
            */
            background-color: #FF0;
            width: 300px;
            height: 200px;
            position: absolute;
            z-index: 2;
        }       
</style>

接著以下都是用jQuery來撰寫
通常都是以$開頭
例如：
$( ).ready{function( ){
.......
......
}}
上面的意思是當網頁載入後對應的程式要是寫在
function裡面，這寫法不需要去想function的名字
javascript裡是弱型別，一律用var宣告變數
不用int、string、byte等等

另外程式碼的第1行是引入jQuery函式庫，javascirpt可以用
*.js檔來另存，要使用時引入即可載入網頁，如此可
以設定好function在全網站使用，大部份是放在/scripts資料夾裡

<script src="scripts/jquery-1.11.1.min.js"></script>  
<!--要使用jQuery 需要引入涵式庫的js -->

<script type="text/javascript">       
    //網頁載入後，document是文件，意指網頁
    $(document).ready(function (){
        //--------------------------------------------------------------
        $("body").keydown(MoveDiv); //body標籤，keydown行為，對應moveDiv方法
             
        //moveDiv方法
        function MoveDiv() {
            //變數a 對應 id為MyDiv的標籤
            var a = document.getElementById("MyDiv");
            switch (event.keyCode) {
                //按上下左右按鍵MyDiv標籤會上下左右移動
                case 37: a.style.left = (parseInt(a.style.left) - 5) + "px"; break;
                case 38: a.style.top = (parseInt(a.style.top) - 5) + "px"; break;
                case 39: a.style.left = (parseInt(a.style.left) + 5) + "px"; break;
                case 40: a.style.top = (parseInt(a.style.top) + 5) + "px"; break;
            }
        }

        //--------------------------------------------------------------
        //id為Btn2按鈕，按下的行為改變id為p2的屬性
        $("#Btn2").click(function () {
            $("#p2").css({ "color": "#FF0000", "font-size": "16pt", "font-weight": "bold" });
        });

        //--------------------------------------------------------------
        //id為Btn3按鈕，按下的行為改變id為p2的屬性
        $("#Btn3").click(function () {
            $("#p2").css({ "color": "#000000", "font-size": "12pt", "font-weight": "normal" });
        });

        //--------------------------------------------------------------
        //id為Btn4按鈕，按下的行為將MyDiv隱藏
        $("#Btn4").click(function () {
            $("#MyDiv").hide();
        });

        //--------------------------------------------------------------
        //id為Btn5按鈕，按下的行為將MyDiv顯示
        $("#Btn5").click(function () {
            $("#MyDiv").show();
        });

        //--------------------------------------------------------------
        //id為Btn6按鈕，按下的行為
        //p1會滑上，速度為快
        $("#Btn6").click(function () {
            $("#p1").slideUp("fast");
        });

        //--------------------------------------------------------------
        //id為Btn7按鈕，按下的行為
        //p1會滑下，速度為慢，並跳出警告視窗顯示：做完啦
        $("#Btn7").click(function () {
            $("#p1").slideDown("slow", function () {
                alert("做完啦");
            });
        });

        //--------------------------------------------------------------
        //id為Btn7按鈕，按下的行為
        //p1會跟據目前顯示情況 滑上或滑下
        $("#Btn8").click(function () {
            $("#p1").slideToggle();
        });

    });
    //--------------------------------------------------------------
</script>