進階網頁設計

排版快捷鍵: alt+f+control

各種工具:
- spline 線上3D建模

沒雙引號就沒括號

基本git更新資料

cd desktop
cd 資料夾名稱
git status
gut add .
git status
git config --global user.email "jiarong701@gmail.com"
git config --global uaer.name "jiarongm"
git commit -m "註解"
git push

第十五周

各種物件

第十三周 Canvas

在畫布上顯示圖片













<canvas id="cc" width="320" height="300"></canvas>

<script>
    var cc = document.getElementById("cc");
    var ctx = cc.getContext("2d");
        
    var img = new Image();
    img.src = "images/2.jpg";
    img.onload = function(){ //在畫布上畫圖
        //ctx.drawImage(img, 10, 10, 160, 150); //顯示圖片
        ctx.drawImage(img, 200, 100, 80, 75  ,10, 10, 160, 150); //裁切圖片
    }
</script>

Image Not Showing Possible Reasons

The image was uploaded to a note which you don't have access to
The note which the image was originally uploaded to has been deleted

Learn More →

截取影片
























<style>
    #cc{
        width: 320px;
        height: 180px;
        border: medium solid blue;
        position: absolute;
        top: 400px;
        left: 50px;
    }
</style>

<video id="vv" src="movie/mov1.mp4" width="640" height="360" controls></video> <br>
<button onclick="snap()">CLIP</button>
<canvas id="cc" width="320" height="180"></canvas>

<script>
    var vv = document.getElementById("vv");
    var cc = document.getElementById("cc");
    var ctx = cc.getContext("2d");

    function snap(){
        ctx.drawImage(vv, 0, 0, 320, 180);
    }
</script>

Image Not Showing Possible Reasons

The image was uploaded to a note which you don't have access to
The note which the image was originally uploaded to has been deleted

Learn More →

同步出現灰階影片













































<style>
    #cc{
        width: 320px;
        height: 180px;
        border: medium solid blue;
        position: absolute;
        top: 400px;
        left: 50px;
    }
</style>

<video id="vv" src="movie/mov1.mp4" width="640" height="360" controls></video> <br>
<canvas id="cc" width="320" height="180"></canvas>

<script>
    var vv = document.getElementById("vv");
    var cc = document.getElementById("cc");
    var ctx = cc.getContext("2d");

    vv.addEventListener("play", setTimer);
    vv.addEventListener("pause", clearTimer);
    vv.addEventListener("ended", clearTimer);

    var timer;
    function setTimer(){
        timer = setInterval(snap,30);
    }
    function clearTimer(){
        clearInterval(timer);
    }
    function snap(){
        ctx.drawImage(vv, 0, 0, 320, 180);
        var p = ctx.getImageData(0,0,320,180); //得到影像的資料(r,g,b,a)，p為一維陣列
        for(var i=0; i<p.data.length; i+=4){ 
            var r = p.data[i];
            var g = p.data[i+1];
            var b = p.data[i+2];
            var gray = (r+g+b)/3;
            p.data[i] = gray;
            p.data[i+1] = gray;
            p.data[i+2] = gray;
        }
        ctx.putImageData(p,0,0); //繪製影像的資料到canvas上
    }
</script>

Image Not Showing Possible Reasons

The image was uploaded to a note which you don't have access to
The note which the image was originally uploaded to has been deleted

Learn More →

即時函數

( function() ) ()

(前括號): 要執行的函式
(後括號): 傳參數

網頁載入就會執行的函式，因為函示沒名稱，所以只會執行一次





<script>
    (function(a){ //即時函式
        console.log(a); //網頁載入就會執行的函式，因為函示沒名稱，所以只會執行一次
    })("hi");   
</script>

建構函式

屬性age，方法print









function MyObject(){
    this.age = 28;
    this.print = function(){
        console.log(this.age);
    }
}
var c = new MyObject();
//c.age = 100;
c.print();

第十二周 Canvas

在畫布上畫矩形

取得渲染環境及其繪圖函數 canvas.getContext("2d") 輸入參數'2d':渲染環境類型










<canvas id="cc" width="600" height="800"></canvas>
    <script>
        var cc=document.getElementById("cc");
        var ctx=cc.getContext("2d");
        ctx.fillStyle="rgb(200,0,0)";
        ctx.fillRect(20,20,150,100);

        ctx.fillStyle="rgb(0,200,0,0.5)";
        ctx.fillRect(40,40,150,100);//座標
    </script>

開始話、結束畫







    ctx.beginPath();
            ctx.moveTo(100,20);//在畫布上的起點
            ctx.lineTo(180,180);//畫線到180,180
            ctx.lineTo(20,180);
    ctx.closePath();
    ctx.fillStyle="blue";
    ctx.fill();//填滿

用滑鼠畫圖

準備好滑鼠事件










var cc=document.getElementById("cc");
        var ctx=cc.getContext("2d");
        cc.addEventListener("mousedown",start);
        cc.addEventListener("mouseup",end);
        function start(){
            console.log("start");
        }
        function end(){
            console.log("end");
        }

跟著滑鼠畫線

用點連成線 arc(x, y, radius, startAngle, endAngle)


















var isdrawing = false;
cc.addEventListener("mousemove", draw);
        function start() {
            isdrawing = true;
        }
        function end() {
            isdrawing = false;
        }
        function draw(e) {
            if(isdrawing==false)return;
            var x = e.pageX-50;//要扣掉畫布偏移的位置
            var y = e.pageY-50;
            ctx.beginPath();
            ctx.arc(x, y, 10, 0, 2 * Math.PI);//畫圓
            ctx.closePath();
            ctx.fillstyle = "rgb(0,0,0)";
            ctx.fill();
        }

使用另一種方法創造畫布






var cc=document.creatElement("canvas");//1.創
    cc.width=600;//1.5 設屬性
    cc.height=500;
document.body.appendChild(cc);//2. 加到網頁中
//3. 其他使用方法皆同

第十一周 Spline

第十周卷軸

使用卷軸向下滑時觸發淡出淡入動畫卷軸事件


winodw.onscroll()

卷軸的移動量window.pageYoffset

淡出淡入用樣式控制屬性來做動畫關鍵影格@keyframes








        @keyframes fadeOut { //名稱
            from{opacity:1.0}//開始
            tp{opacity: 0;}//結束
        }
        .title_fadeOut{
            animation:fadeOut 2s 1;//執行的animation名稱 持續時間 執行次數(infinite無限次)
            animation-fill-mode: forwards;//播放前後狀態 停在結束狀態，希望動畫結束停在最後一格時使用。
        }

使用:要設一個開關器(status)













if(y>250){
                if(status==0){
                    title.classList.remove("title_fadeIn");
                    title.classList.add("title_fadeOut");
                    status=1;
                } 
            }else{
                if(status==1){
                    title.classList.remove("title_fadeOut");
                    title.classList.add("title_fadeIn");
                    status=0;
                }
            }

畫到下面讓影片撥放 v.play() 往上滑暫停影片 v.pause()

Array in javascript

陣列 index 一樣從0開始宣告var array=[] 用中括號，可以同時儲存不同資料類型

新增/刪除元素
- 在末端新增array.push("test") 刪除array.pop()
- 在開頭新增array.shift() 刪除array.shift()

走訪

迴圈for(var i=0;i<array.length;i++)
對於每個//53s/6tj06gj456



array.forEach(function(a)
              {console.log(a)
});

使用實例用類別來抓元素var g=document.getElementsByClassName("a") 如果class為a的有很多個，就會將抓下來的元素儲存為陣列g、從0開始依照元素出現次序擺放
二維陣列製作遊戲地圖





var map=[
    [1,1,1,1,1,1],//map[0]
    [1,2,2,2,2,1],//map[1]
    [1,2,2,2,2,1]
];

畫地圖

先設一個物件放圖用 innerHTML 渲染網頁(重畫圖)


<div id='world'><div>

用陣列加圖片









var el=document.getElementById('world');
el.innerHTML="";
map.forEach(function(a){//可視為map[a][v]
        a.forEach(function(v){
            if(v==1)el.innerHTML+="<div class="wall"></div>";
            if(v==2)el.innerHTML+="<div class="coin"></div>";
        });
    el.innerHTML+="<br>";
});

讀入陣列裡，所有數值的方法







var c = ["vox","luca","ike","mysta","shu"];
/*for(var i=0; i<c.length; i++){ //for迴圈
    console.log(c[i]);
}*/
c.forEach(function(d){ //新寫法，一個一個讀入，但只能傳數字or字串，不能傳物件
    console.log(d);
});

第九周 side project

構想:like動態島滑鼠控制盤子去接球球碰到會反彈

去背的球、盤子與樣式

注: 去背的圖只能用.png不然還是會留白喔

控制球與盤子的位置
- 固定在視窗中solid 用百分比
滑鼠事件控制盤子移動
- 滑鼠點一下元素 onclick –->開始移動 or 暫停移動–->設定一個開關
- 盤子跟隨滑鼠移動–->找到盤子( 相對於視窗) 的座標 getBoundingClientRect()
- 把滑鼠放在盤子中間–-> 滑鼠的位置=滑鼠(相對於視窗)的位置再減掉一半的盤子大小
- 更改盤子的位置–->開關打開時盤子位置=滑鼠位置
按開始鍵後，球掉下來
- 球相對於視窗的座標 + 加速度dx、dy = 移動
- 要show出掉落的過程–-> 需要一直重畫畫面 ，用迴圈會閃現(中間過程要短暫停留，肉眼才看得到) –-> 用計時器重複執行 "球掉落的函式"
- 觸底結束–->Y方向:球的位置By視窗高度 window.innerHeight ball.offsetHeight元素高度(包含邊框跟padding)
- 左右碰到反彈–->dx*=-
- 讓球邊動邊 "轉"
重來鍵
教學說明+demo影片 //os:只有80分青菜辣

第八周 Video Object

影片

避免載入影片的等待時間，先載影片才在背景裡，按按鈕後再重播。

藏影片

背景圖片放在最下面、先不show影片、播放鍵置頂

#bg{
    position:absolute;
    z-index=-99;//底圖
}
#v{
    position:absolute;
    display:none;//先藏影片
}
#play{
    position:absolute;
}
#play:hover{
    border:medium solid blue;
}

播放/播完換影片

controls 下方有播放按鈕 autoplay自動撥放


<video id='v' controls autoplay width='1024' src=""></video>

影片開始撥放影格時會觸發 timeupdate

播放時間 v.currentTime (可以用它來製作播放進度條)

播放影片 video.play()

video.ended是布林變數，影片結束時會==True

















<img id='bg' src='背景圖片' alt=''>
<video id='v' src="要放的影片"></video>
<button id='play' onclick="playVideo()">Play</button>
<script>
    var v=document.getElementById("v");
    v.addEventListener("timeupdate",checkEnd);//注意不用() 
    //開始播放時呼叫checkEnd，確認是不是播完了

    function playVideo(){
        v.style.display="block";
        v.currentTime=0;//顯示播放的時間
        v.play();
    }
    function checkEnd(){
        if(v.ended)location.herf="new/video_path";
    }
</script>

複習淡出淡入

待打

第六周鍵盤事件/

樣式表

避免重複載入造成的呆滯時間–->加上開關 document.addEventListener("ketdown", move);

圖片隱藏/顯示樣式設定display: none; 程式控制moodbox.style.display = "block";

免命名函式





p.onclick = function () {
            count++;
            if (count <= 3) p.src = "images/plant/plant_" + count + ".gif";
            if (count == 3) status = 1;
        }

改善剛按鍵盤的卡頓–->用計時器每0.03秒執行乙次

setInterval(moving,30);
function moving(){
    var y=parseInt(char.style.top);
    var x=parseInt(char.style.left);
    x=x+dx;
    y=y+dy;
}

第五周物件/Event物件

物件的N種寫法

{} 代表一個物件或是程式區塊
在大括號裡面直接設定物件的屬性用冒號
用逗號分行
物件裡面的方法 fun_name:function(){}
this 呼叫自己

方法一:














 <script>
        a = {//物件
            name:"Wang",//屬性:
            age:"18",
            score:{
                englisg:90,
                math:70,
            },
            print:function(){//物件裡面的方法
                alert(this.score.math);//this呼叫自己
            }
        }
        a.print();//呼叫並使用他
</script>

結果

方法二:

用 new 建出物件
用分號分隔
物件.屬性= 直接給值
物件.函式名=function(){}













<script>
    b=new Object();
    b.name="Zoe";
    b.age=20;
    b.score={
        englisg:90,
        math:78,
    }
    b.print=function(){
        alert(this.score.math);
    }
    b.print();
</script>

Event物件事件










<body>
    <img id="p1" src="images/1.jpg" alt="" width="450" onclick="show(event)">
    <img id="p2" src="images/2.jpg" alt="" width="450" onclick="show(event)">
    <img id="p3" src="images/3.jpg" alt="" width="450" onclick="show(event)">
<script>
function show(a){
    alert(a.target.src);
}
</script>
</body>

課堂作業

水果籃，設定水果單價、點案後圖片消失金額加總



















<body>
    <img id="p1" src="images/西瓜.jpg" alt="30" width="100" onclick="show(event)">
    <img id="p2" src="images/香蕉.jpg" alt="5" width="100" onclick="show(event)">
    <img id="p3" src="images/橘子.jpg" alt="10" width="100" onclick="show(event)">
    <img id="p4" src="images/荔枝.jpg" alt="25" width="100" onclick="show(event)">
    <img id="p5" src="images/芭樂.jpg" alt="10" width="100" onclick="show(event)">
    <img id="p6" src="images/蘋果.jpg" alt="15" width="100" onclick="show(event)">
<div id="sum">0</div><div>元</div>
<script>
    var sum=0;
    var total=document.getElementById("sum");    
function show(a){
    alert("單價:"+a.target.alt+"$");
    sum+=parseInt(a.target.alt);
    a.target.style.display="none";
    alert("總金額 = "+sum);
    total.innerHTML=sum;
}
</script>

第四周 CSS樣式

CSS樣式

padding:70px 元素內邊框的留白
- padding-right/padding-bottom 可以指定方向
- 所有填充的屬性單位:px/pt/%，可用繼承(指定從老爸填充)
- 用比例的方式可以在縮放時跟著動
z-index:1 不會被遮蓋(值>0就好)

id裡面的類別樣式(老爸裡面的兒子的孫子..)：

  <div id='main'>
      <div class="page">
          <img class="p1" src="1.png" alt="">
      </div>
  </div>

#main{
    //位置寬度
}
#main.page{//相對於main
    width:100%; //填滿
}
#main.page.p1{

}

不要有卷軸:

刪掉預設的留白

<style>
    body{
        margin-top:10;
        overflow:hidden;
    }
</style>

第三周背景/類別/樣式/繼承

背景圖/類別/樣式

樣式存放在

<head>
    <style>
        //放在這裡
    </style>
</head>

幫id 加樣式 #id_name{}
幫類別class 加樣式 .class_name{}

<style>
        .scene{ ///for class
            background-image: url(images/image3.jpg);//圖片
            background-repeat: no-repeat;
            width: 600px;
            height: 440px;
            border: medium solid #ff3;
            position: relative;
        }
        #balloon{ ///for id
            background-image: url(images/balloon.png);
            background-repeat: no-repeat;
            width: 90px;
            height: 90px;
            position: absolute;
            bottom: 50px;
            right: 50px; 
        }
    </style>

position樣式設定

solid預設:固定
relative:相對於預設值
absolitive:固定於老爸
fixed:固定於視窗(就算滾動頁面還是在同一位置

繼承關係

讓氣球在背景圖的範圍內飄動

step1 設定階層、樣式

背景圖當老爸氣球當兒子



<div class="scene">
    <div id="balloon"></div>
</div>

設定position樣式讓氣球位置可移動 position: absolute;

step2 控制style中的屬性(控制氣球座標)

設變數


var b=document.getElementById("balloon");
b.style.top="460px";//要先給值 像是在宣告

轉換型態 parseInt()






function move(){
            var y=parseInt(b.style.top);
            y=y-3;//y變小，氣球往上飄
            b.style.top=y+"px";//要把單位寫上
            console.log("y="+y);//除錯
        }

加上Y方向左右飄動四捨五入變整數 Math.round()



var x=parseInt(b.style.left);
x=x+Math.round(Math.random()*10-5);//四捨五入
b.style.left=x+"px";//要把單位寫上

超過底圖的範圍就看不到 ：在底圖的樣式中新增覆蓋overflow:hidden 或是id.style.visibility="hidden"

把程式、樣式分開

樣式放在.html，程式碼放在.js

html的物件可以使用js的程式控制

<script src="程式名稱.js"></script>

第二周計時器

倒數計時器

在固定的一段時間結束後重複執行某事 依電腦效能不同電腦時間不一致

setInterval(時間到要執行的程式,1000)//時間1000(毫秒)=10秒

覆蓋原本的內容

id.innerHTML=變數;










//顯示倒數計時器
var n =10;
var count = document.getElementById("count");        
setInterval(showNum,1000); //計時器

function showNum(){
        n--;
        count.innerHTML = n; //顯示數字
        if(n==0)location.href="home.html"; //煥頁
}

每1秒，圖片切換一次






















<body>
    <img id="p" src="images/img1.jpg" alt="">
    <div id="count">10</div> 

    <script>
        var n =1;  //每1秒，圖片切換一次
        var p = document.getElementById("p");

        setInterval(showNum,1000); //計時器
        
        function showNum(){
            if(n==1){
                p.src = "images/img2.jpg";
                n=2;
            }
            else if(n==2){
                p.src = "images/img1.jpg";
                n=1;
            }
        }
    </script>
</body>

隨機切換多張圖片

陣列放圖片


//index也是從0開始
name=["p1.jpg","p2.jpg","p3.jpg","p4.jpg"];

隨機 Math.random()得到0-1之間的數





//得到一個介於0~3之間的數得到一個介於0~3之間的數
function change(){
    n=Math.random()*4;//隨機得到n 因圖有4張所以*4 (index在0~4之間不會是4，不會溢位)
    console.log(n);//show出n 看看
}

計時器開關

重複觸發





//開
setInterval(時間到要執行的程式,time);

///關
clearInterval()//跟一般函式一樣 接收回傳值執行

只觸發一次 在一段時間time後，執行一次函式






let timeID = setTimeout(founction_name,time);
//呼叫時 會回傳一個值 放到timeID裡
//let是區域變數 多用在for條件裡

//關
clearTimeout(timeoutID);

匿名函式 (不用命名直接綁定在事件上)



id.onclick=function (){
    clearInterval()
}

作業二點按圖片漸消失

方法一

放圖、點擊事件onclick、給id用id控制換圖
每0.1秒換圖–->每幾秒重複呼叫換圖，直到沒圖

<body>
    <img id="photo" onclick="GoRun()" src="disappear/chars_0.png" alt="">
    <script>
        var i = 0;
        var p1 = document.getElementById("photo");
        function GoRun() {
            p1.src = "disappear/chars_" + i + ".png"
            if (i < 29) {
                i++;
                setTimeout(GoRun, 100);//遞迴 每0.1秒呼叫自己換圖
            }
        }
    </script>
</body>

第一周圖片/滑鼠/物件監聽

使用工具vs code
裝外掛可以在瀏覽器中呈現
開啟專案的資料夾
創造一個html檔案
操作快捷鍵: ! + enter 網頁架構、Tab系統推薦程式

滑鼠事件換圖片

圖片放在專案的資料夾內
放圖片 + 滑鼠事件


<img src="圖1" alt="" onmouseover=" src='圖2' " onmouseleave=" src='圖1' "
onclick="showMesg()"">

自定義函式







<script>
//自定義函式放在此標頭下
function showMesg(){
    alert("Hi"); //除錯的方式1:會跳出視窗 要點掉
    console.log("OK");//在console裡秀出
}
<script>

除錯的方式(在網頁按F12)
按鈕事件



<button onclick="showMesg('可以放字串喔')">按鈕名稱</button><br>
//換行
<button onclick="showMesg('可以放字串喔')">按鈕名稱</button>

Demo












<body>
    <img src="images/img1.jpg" alt="" onmouseover=" src='images/img2.jpg'"
    onmouseleave="src='images/img1.jpg'" onclick="showMesg()"><br>
    <button onclick="showMesg('b1 is used')">b1</button><br>
    <button onclick="showMesg('b2 is used')">b2</button>
    <script>
        function showMesg(s){
            alert(s);
            console.log("Ok");
        }
    </script>
</body>

回到上頁 X 多頁的網頁

新增另一頁
前往指定的頁 javascript語法


location.href='路徑'

包在自訂義涵式裡再放到按鈕事件







<button onclick="gotoPage()">Home</button>

<script>
 function gotoPage(){
            location.href='w1_01.html';      
        }
</script>

事件監聽器

設定變數


var b3=document.getElementById("b3");

利用id做偵聽 document.getElementById("id")








<button id="b3">b3</button> 

<script>
    var b3=document.getElementById('b3'); //設定變數b3  為 id是b3的物件
    b3=document.addEventListener("click",gotoPage);
    
    //監聽id為 'b3' 的這個物件，當此物件發生"click'事件時，執行gotoPage函式
</script>

開啟&關閉新視窗 window物件

設定全域變數




<script>
    var newwin;
    //需要是全域變數,否則變數會只存在 在某段程式中
</script>

按鈕


<button onclick="opNewPage()">open new page</button>
<button onclick="clNewPage()">close new page</button>

開啟額外視窗 window.open("url","name","width=,height= ")













<script>
    var newwin;//全域變數
    function opNewPage(){
        newwin = window.open("http://tw.yahoo.com","yahoo","width=450,height=400");
        //newwin = window.open("URL","名稱","視窗大小")
        //newwin是一個視窗物件
        newwin.moveTo(300,300); 
        //將視窗移到300*300的位置
    }
    function clNewPage(){
        newwin.close(); //視窗關閉
    }
</script>

作業一

滑鼠點按小圖片後，將大圖片置換成對應的小圖片

方法一

放圖片設定長寬與排版
滑鼠點擊事件onclick=""
自己定義換圖片的函式
用id設定物件變數，更改物件屬性以置換圖片




























<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <table>HW1 09161141江佳蓉：滑鼠點按小圖片後，將大圖片置換成對應的小圖片。</table><br>
    <img  id='p1'src="images/img1.jpg" alt="" width="733" height="460"><br>
    <img onclick="changePho('1')" src="images/img1.jpg" alt="" width="180" height="150">
    <img onclick="changePho('2')" src="images/img2.jpg" alt="" width="180" height="150">
    <img onclick="changePho('3')" src="images/img3.jpg" alt="" width="180" height="150">
    <img onclick="changePho('4')" src="images/img4.jpg" alt="" width="180" height="150">

    <script>
        var p1;
        var p1=document.getElementById('p1');
        function changePho(s){
            if(s=='1')p1.src='images/img1.jpg';
            if(s=='2')p1.src='images/img2.jpg';
            if(s=='3')p1.src='images/img3.jpg';
            if(s=='4')p1.src='images/img4.jpg';
        }

    </script>
</body>
</html>

方法二

設定5張圖片的大小，並將5張圖片都設上id 和 onclick事件(滑鼠點擊)
定義一個函式後，設定var變數
用if判斷id為哪張圖片，接著再置換圖片









































<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img src="images/img1.jpg"  width="810" id="m"><br>

    <img src="images/img1.jpg" alt="" width="200" id="b1" onclick="change_pic('b1')">
    <img src="images/img2.jpg" alt="" width="200" id="b2" onclick="change_pic('b2')">
    <img src="images/img3.jpg" alt="" width="200" id="b3" onclick="change_pic('b3')">
    <img src="images/img4.jpg" alt="" width="200" id="b4" onclick="change_pic('b4')">

    <script>
        function change_pic(s){
            var main_pic = document.getElementById("m");
            var b1, b2, b3, b4;

            if(s=='b1'){
                b1 = document.getElementById("b1");
                main_pic.src = b1.src;
            }
            if(s=='b2'){
                b2 = document.getElementById("b2");
                main_pic.src = b2.src;
            }
            if(s=='b3'){
                b3 = document.getElementById("b3");
                main_pic.src = b3.src;
            }
            if(s=='b4'){
                b4 = document.getElementById("b4");
                main_pic.src = b4.src;
            }
        }
        
    </script>
</body>
</html>

方法三

















<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img src="images/img1.jpg"  width="810" id="m"><br>

    <img src="images/img1.jpg" alt="" width="200" id="b1" onclick="m.src = images/img1.jpg">
    <img src="images/img2.jpg" alt="" width="200" id="b2" onclick="m.src = images/img2.jpg">
    <img src="images/img3.jpg" alt="" width="200" id="b3" onclick="m.src = images/img3.jpg">
    <img src="images/img4.jpg" alt="" width="200" id="b4" onclick="m.src = images/img4.jpg">

</body>
</html>

第十五周

各種物件

第十三周 Canvas

在畫布上顯示圖片

截取影片

同步出現灰階影片

即時函數

建構函式

第十二周 Canvas

在畫布上畫矩形

用滑鼠畫圖

使用另一種方法創造畫布

第十一周 Spline

第十周 卷軸

Array in javascript

第九周 side project

第八周 Video Object

影片

複習淡出淡入

第六周 鍵盤事件/

樣式表

第五周 物件/Event物件

物件的N種寫法

Event物件事件

課堂作業

第四周 CSS樣式

CSS樣式

第三周 背景/類別/樣式/繼承

背景圖/類別/樣式

position樣式設定

繼承關係

把程式、樣式分開

第二周 計時器

倒數計時器

隨機切換多張圖片

計時器開關

作業二 點按圖片漸消失

第一周 圖片/滑鼠/物件監聽

滑鼠事件換圖片

Demo

回到上頁 X 多頁的網頁

事件監聽器

開啟&關閉新視窗 window物件

作業一

Read more

視訊分析

NN & DL導論

從零開始的資料結構 X Leetcode

Wave SDK 5.3.2

第十周卷軸

第六周鍵盤事件/

第五周物件/Event物件

第三周背景/類別/樣式/繼承

第二周計時器

作業二點按圖片漸消失

第一周圖片/滑鼠/物件監聽