新手走走跳跳亂看看

AJAX 非同步 JavaScript 及 XML（Asynchronous JavaScript and XML，AJAX），利用 XMLHttpRequest 物件來與伺服器進行通訊，可以傳送並接收多種格式的資訊，包括:JSON、XML、HTML以及文字檔案。AJAX最吸引人的特點是「非同步」的本質，這代表它可以與伺服溝通、交換資料、以及更新頁面，且無須重整網頁。 透過XMLHttpRequest撈資料 為了使用JavaScript向伺服器撈取資料，首先我們要送出一個HTTP請求，這時就需要建立一個能和伺服器溝通的橋梁，也就是 XMLHttpRequest 物件 //建立一個XMLHttpRequest物件 var xhr=new XMLHttpRequest(); 打開xhr會發現會裡面有各種狀態，這時我們看 readyState:0 意思就是request目前的狀態 創建好溝通的橋樑後，呼叫HTTP request類別的 open() 及 send() 方法讀取資料 xhr.open('GET','網址',true); xhr.send(null); open()的第一個參數是 HTTP request 的方法，也就是從 GET(讀取資料)、POST(傳送資料到伺服器)...等伺服器支援的方法中擇一使用。 第二個參數為請求資料的網址。 第三個參數為是否要不同步進行，設定為 true 表示不同步進行，即使伺服器尚未傳回資料也會繼續執行其餘的程式，此時的 readyState 狀態就會跳到1 接者使用 send() ， send() 的參數則是Post資料給伺服器，而伺服器則以字串的方式回傳資料;而若你沒有想傳送任何資料，可以在參數寫上 null (空的資料)，此時 readyState 狀態就會跳到2 readyState 一共有四種狀態，分別是: 0(還沒開始):已經產生一個XMLHttpRequest，但還沒有連結要撈取的資料 1(讀取中):你使用了open(),但還沒把資料傳送過去 2(已讀取):偵測到使用了send() 3(資訊交換中):loading 4(一切完成):撈到資料，數據已經完全接收，準備就緒 第2、3、4狀態若資料很少的話通常會很快跳到第4個狀

BOM BOM(Browser Object Model，瀏覽器物件模型)是用來操作瀏覽器功能，BOM沒有自己的一套規範，不像JavaScript的規範是ECMAScript而DOM的規範是W3C，在DOM模型還沒出現前BOM模型就已經存在了，所以也可以被稱為Level 0 DOM BOM主要核心為window物件，所有的BOM都可透過window來存取，也就是在ECMAScript的全域變數擔任重要腳色，負責管理JavaScript和瀏覽器的通訊，而window物件提供的屬性主要為: document 、 location 、 navigator 、 screen 、 history 、 frames 由於window是最頂層的物件，所以呼叫window下屬/方法可不必明確指明window 例如我們在全域變數宣告一個 a ; 但它其實是 window.a var a=123; console.log(a);//123 console.log(window.a);//123 還有我們常用的 alert() 也是window下的函式方法 var a=123; alert(a);//123 alert(window.a);//123 示範部分window屬性 window.history 提供了進入瀏覽歷史的方式,可以在歷史紀錄中回上一步或到下一步 回到上一頁: window.history.back(); 移動到下一頁: window.history.forward(); 或者使用 go() 從頁面的 session history紀錄中載入特定紀錄，以目前頁面的相對位置而定使前往上一頁或下一頁 //回到上一頁 window.history.go(-1); //刷新本頁 window.history.go(0); //移動到下一頁 window.history.go(1); window.print() 列印功能 可放進函式，觸發此屬性 function myPrint() { window.print(); } myPrint(); window.location 可獲得當前頁面網址，並將瀏覽器重定到新頁面;除了可以跳轉

<ul> <li data-num="1" data-item="one" class="number">數字1</li> <li data-num="2" data-item="two" class="number">數字2</li> <li data-num="3" data-item="three" class="number">數字3</li> </ul> 在有些網頁裡會看到 data-* 的屬性，但這是什麼呢?又能幹嘛 HTMLElement.dataset 其實 data-* 是一種可以自定義的屬性，可以幫助工程師在HTML上自創屬性來綁定和驗證資料 data-* 有幾個規則 dash後面的 * 屬性名稱不能使用大寫字母，e.g.data-Num或者data-Size...等 * 不能包含分號 * 絕對不能以 xml 起頭，無論是否用於 xml data-* 的應用 當你想取出 data-* 的值，JS上你可以使用 dateset 物件取值 var num=document.querySelectorAll('.number'); //取多個data-* console.log(num[0].dataset);//{item:"0",num:"1"} //取一個data-*,在後面填寫data-*的屬性 console.log(num[0].dataset.num); //1 另外範例:把JS上的陣列渲染到HTML上 See the Pen JS-data-*應用 by yanennn ( @yennnnn ) on CodePen . 另外也可以使用 data-* 取得特定元素的CSS ul li[data-item="one"]{ color:red; } ul li[data-item="two"]{ co

Web Storage Web Storage是一種能在HTML5中能讓網頁資料儲存於本地端的技術，使用key / value pair的方式 給值或取值，其作用和cookie很像，相起cookie只有4KB的儲存空間，Web Storage擁有5MB空間，但是只有高版本的瀏覽器才能支持，只能儲存字串 Web Storage分為兩種: 1.localStorage 2.sessionStorage 其主要差異儲存在localStorage的資料可以一直保存，即使關閉視窗或者分頁，資料依然不會消失;反之sessionStorage則是只要關閉瀏覽器或者分頁資料就會消失 localStorage的使用 存儲Storage: 新增/更新資料 //'mylocal'為key,hi為你要儲存的value localStorage.setItem('mylocal', 'hi'); 產生的結果就像下面那張圖 讀取Storage: 讀取存放在localStorahe的資料 //取得存放在mylocal鍵值的value localStorage.getItem("mylocal") 刪除Storage: 刪除資料 //刪除存放於key(mylocal)和value localStorage.removeItem('mylocal'); 全部刪除: //localStorage內的key/vlaue全部清空 localStorage.clear(); 將JSON存儲到localStorage裏 上面有提到儲存在Web Storage內的值只能是字串，當你使用其他型別存資料，使用getItem取資料你會發現都會變成字串(String) var test=124; var test2='hiiii'; var test3=true; var test4=[5,6,7,'hoo']; var test5={a:124,b:'yoooo'} localStorage.setItem('mylocal', test); localStorage.setItem('my

Event Object 還記得當我們要監聽事件時，會使用 addEventListener() 也就是我們的事件處理器(Event Handler)，這時候事件被觸發，瀏覽器就會為創造一個物件，就是我們稱為的的事件物件(Event Object)，裏面包含了所有與這個事件有關的屬性，並已參數形式傳給事件處理器，像是 e.preventDefault() 或者 e.stopPropagation() 也屬於事件物件 當使用者點擊時觸發事件( e 為參數，可以自行定義名稱) //html <button class="btn">點擊按鈕</button> //JS btn=document.querySelector('.btn'); btn.addEventListener('click',function(e){ console.log(e); },false); 點擊 button 後產生的結果，會發現 e 所代表的就是我們觸發的事件物件(Event Object) 接下來來介紹一些事件物件: target:了解目前所在元素位置 target 再打開可以發現它也有事件物件可以使用，例如此範例的 e.target.Nodename :了解目前的節點名稱(請點進去看console.log喔) See the Pen e.target by yanennn ( @yennnnn ) on CodePen . 了解 screen、page、client箇中差異 screen :使用者整個顯示器的位置 page :當前網頁的相對位置 client :當前網頁中區域的位置 首先給個範例: See the Pen screen、page、client箇中差異 by yanennn ( @yennnnn ) on CodePen . 使用滑鼠移動看看， sceen 的數字都比其他兩個大一些，也就是說它也把不屬於網頁的地方也計算了進去，而 page 和 client 從左上角開始X,Y就為0表示它們只計算網頁位置;接下來試著滾動卷軸，就能看出 page 的Y數字變大了，也就是說它會計算此網頁的大小，而 page 只會計算你當前網頁的大

新手JS-地下城:2F-時鐘 紀錄一下這次使用的 Canvas See the Pen 2F-Clock by yanennn ( @yennnnn ) on CodePen . 不知道Canvas如何使用的人可以參考 六角學院-使用Canvas製作遊戲 並搭配 MDN 會加深很大的印象 前置作業: 首先在html使用 canvas 標籤,像是再瀏覽器產生一個固定大小的繪圖畫布，當瀏覽器抓到 canvas 了，再來就是要告知它要使用何種方式渲染環境，在這邊我們是使用平面繪圖，所以 getContext 就要輸入2d。 接著輸入你畫布的尺寸，在這邊是要全部瀏覽器都是畫布，所以使用 widow.innerWidth 、 window.innerHeight var mycanvas=document.querySelector('#canvas'); var ctx = mycanvas.getContext("2d"); var ww=window.innerWidth; var wh=window.innerHeight; mycanvas.width=ww; mycanvas.height=wh; 這邊要提醒，繪製一個圖形我們需要以下步驟: 1.ctx.save();儲存 2.ctx.beginPath();開始繪圖 3.ctx.restore();復原上一階段 當開始繪畫後，首先我們要先儲存當前狀態，畫完後使用 ctx.restore() 還原狀態，才不會導致之後的圖會因為剛剛的動作導致重複或者飄移，再來每當要畫一個地方就要使用 beginPath 產生一個新路徑，告訴JS說我要開始畫圖了，那有一個 ctx.closePath() 關閉路徑,這個方法會在現在所在點到起始點間畫一條直線以閉合圖形，如果圖形已經閉合或是只含一個點，這個方法不會有任何效果。 在這邊介紹幾個常見功能 1.填色: fillStyle實心顏色、SrokeStyle空心顏色，有使用填色後面要記得使用 fill() 、 stroke() 表示結束 2.lineWidth(線寬): lineWidth=2 表示你要使用的線寬是2 3.moveTo(x,y):移動到哪個座標