新手走走跳跳亂看看

此為F2E 精神時光屋 - 口罩地圖的筆記 作品原始碼 作品連結 AJAX 為了抓取有販售的藥局，我們使用XMLHttpResquest API請求伺服器資料 var xhr = new XMLHttpRequest(); //準備和某某伺服要藥局剩餘口罩資料 xhr.open("get", "https://raw.githubusercontent.com/kiang/pharmacies/master/json/points.json"); //執行要資料的動作 xhr.send(); xhr.onload = function() { var data = JSON.parse(xhr.responseText).features; } 這樣我們就可以從 data 抓取資料 地圖 由於Google Map需要收錢，這邊我就使用openstreetmap圖資以及 leaflet 框架 地理位置定位 由於我們的位置需要判斷是否使用地理位置定位 (Geolocation)，所以在使用地圖前先透過Promise方式取得位置在進行下一步 let newpromise = new Promise(function(resolve, reject) { navigator.geolocation.getCurrentPosition(success, error) function success(position) { let userPosition = [position.coords.latitude, position.coords.longitude] resolve(userPosition) } function error() { let userPosition = [25.047702, 121.5151848]; resolve(userPosition) } }) newpromise.then(function(userPosition) { //內容 } 上面抓取定位後，接著我們設定地圖 //地圖的中心點與縮放距離 ...

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):移動到哪個座標 ...

Events 在之前我們曾經介紹過如何監聽事件，接著我們來說可以使用EventTarget.addEventListener()我們可以使用的type有哪些 下面介紹會以自行學過而新增，若想知道更多可到 MDN 或者 W3C 查看哦~ clcik事件 on-處理器: onclick 當使用者點擊時觸發事件 //html <button class="btn">點擊按鈕</button> //JS btn=document.querySelector('.btn'); btn.addEventListener('click',function(){ alert("我被點擊了"); },false); change事件 on-處理器: onchange 當使用者對目標元素做更改時而觸發事件 See the Pen JS-Change練習 by yanennn ( @yennnnn ) on CodePen . blur事件 on-處理器: onblur 當使用者離開 input 時沒寫入任何值觸發事件提醒 See the Pen JS-blur事件練習 by yanennn ( @yennnnn ) on CodePen . mousemove事件 on-處理器: onmousemove 當使用者把滑鼠移到目標時觸發事件 See the Pen JS-mousemove練習 by yanennn ( @yennnnn ) on CodePen . 以上，還有其他event Wibibi

Event.preventDefault() 上次提到了Event.stopPropagation()，它是能阻止事件傳遞， Event.preventDefault() 則是能取消「默認事件」 Event.preventDefault() :可以取消該元素的預設行為，但不會影響事件的傳遞 我們使用 a 來舉例子 <a href="https://tw.yahoo.com/">連結到yahoo!</a> 上面範例以正常來說，點擊後會跳轉到yahoo頁面 這時若當你不想要 a 再去連結網頁時，就可加入Event.preventDefault()使它取消默認事件 See the Pen e.preventDefault() by yanennn ( @yennnnn ) on CodePen . 尤其是我們在某些時候，會使用 a 觸發事件，即使我們使用 href="#" ，也是會觸發它的默認事件，這時就可以使用Event.preventDefault()取消預設行為 而且不止 a 連結,也有其他元素也是會有預設事件，例如:表單的 submit ..等 雖說可以取消行為， 但是不會影響事件傳遞 ，假如說以上面範例來說，你在 div 也有綁定事件，當你點擊 a 也是會被觸發哦 See the Pen e.preventDefault()還是會傳遞事件 by yanennn ( @yennnnn ) on CodePen .

Event Bubbling & Event Capturing 要了解捕獲與冒泡機制之前首先我們要知道事件是怎麼處理的 大家還記得DOM是一層一層下來的 <html> <head> <title>網頁標題</title> </head> <body> <h1>Header</h1> <a href="#">快速連結</a> </body> </html> 對應的的圖片: 而他們重疊的樣子就是 所以當你點擊目標( target )時，在這邊我們假設點擊了 <a> 連結，其實除了 <a> 被點擊之外，包含它的 <body> 其實也被點擊了哦, <html> 、 document 也被點擊了,會一層一層往上找 所以我們可以知道點擊了一個 <a> ，有包覆它的元素也會跟著被點擊，可以說是整個網頁都被點擊了! 那麼除了目標之外，有包覆著他的都會被點擊，那它們是誰先傳遞續訊息呢? DOM在傳遞訊息順序有兩種方法: 事件冒泡 Event Bubbling 事件捕獲 Event Capturing Event Bubbling 事件冒泡是指，當您點擊目標元素後，會一層一層往上傳遞，直到最上面的根結點，就是我們的 document 以下面範例來說: <html> <head> <title>網頁標題</title> </head> <body> <ul> <li></li> <li></li> <li><a href="#"></a></li> </ul> </body> </html> 當我們點擊 ...

EventTarget.addEventListener() 能將指定的事件監聽到 EventTarget物件上 簡單來說就是當使用者觸發HTML的元素，可使用監聽去觸發不同事件 //綁定被觸發的變數.監聽('觸發事件',執行內容,捕獲/冒泡傳遞機制); test.addEventListener(type,listener,useCapture); 例如:點擊 button ，回傳hello 首先設置一個 button <button id="btn">點我</button> 點擊 button 使用 EventTarget.addEventListener() 監聽,回傳Hello var btn=document.getElementById('btn'); btn.addEventListener('click',function(){ console.log('Hello'); },false); on-event處理器 除了使用 addEventListener() 觸發事件，也可以使用 on-event 處理器觸發事件 通常是根據它的屬性事件(on+屬性名)來對應所觸發的事件 var btn=document.getElementById('btn'); btn.onclick=function(){ console.log('Hello'); } 但使用 on-event 處理器只能執行一個事件 var btn=document.getElementById('btn'); btn.onclick=function(){ console.log('Hello'); } btn.onclick=function(){ console.log('Hiiiiiiii'); } 以上範例就只會產生 Hiiiiiiii 而相對於 addEventListener() ，能處理多個相同的事件 var btn=document.getElementById(...

這次心得會像寫日記那樣，小冗長又無趣，想說做個紀念: ) 09/30參加六角同學會，在還沒參加前內心其實閃過很多小劇場ww，會發生甚麼事，會有什麼人...等之類的，帶著既期待又好奇的心情去看看 那天下午微熱，想說自己會不會穿太多(穿長袖)，還好現場不會很熱，進去後看到一堆人已經到場了!大家都好踴躍，我也開始找位子就坐，剛好選到講台最旁邊等活動開始，結果準備開始前洧傑老師竟然下台找我們聊了一下!!!超級驚訝，雖然只是閒聊一下，但對我來說我超緊張的，就好像遇到電視上的人那樣，很興奮 介紹六角學院的發展，我覺得他們真的很用心，能為學員想的很多，像是最近出的接案，就很受用，若是未來有機會能接到，一定對我很有幫助!! 在學長姊經驗談這一部分，了解每個人的面試、轉職的部分，希望哪天我也能像他們一樣走的那麼高那麼遠ww 接下來是 老師學員聊天時間，對於這邊我就比較可惜，因為不敢搭訕人，所以就也沒有接觸到其他學員，但在旁邊看大家都好熱絡!尤其是老師旁邊滿滿一堆人 接著是遊戲: 誰是前端王 其實沒想到我會拿到獎品，當初想說應該後面就會被刷掉，結果就這樣存活到最後一題，之後還跟我朋友競爭2、3名！ 轉蛋 可惜只有轉到貼紙~~ 最後，一路參加下來我覺得蠻有趣的，不會很乾也不會無聊！雖然很可惜和他人交流很少，但至少是有些收穫的 然後也謝謝我朋友願意陪我一起來: )   

innerHTML innerHTML可以設定HTML中的元素，也可以單純的字串寫入HTML中的某一部分,傳進語法進行渲染，是用來設計與網友互動的網頁特效方法 請先新增HTML再新增Javascript看效果哦! 範例:跟改文字 //html <p class="text"></p> //Javascript //定義p var pt=document.querySelector('.text'); //更換文字 pt.innerHTML="我變更了!"; 範例:內部新增元素 //html <ul class="text"></ul> //Javascript //定義ul var ult=document.querySelector('.text'); //新增元素 ult.innerHTML="<li>我是清單</li>"; 優點:效能快 缺點:資安風險，要確保來源沒問題 差異:是一次性渲染，會把前面資料給覆蓋過去 Document.createElement() 創建一個新元素,以DOM節點來處理 語法: var element = document.createElement(創建元素); 範例: //html <ul class="text"></ul> //Javascript //創建li元素 var str=document.createElement('li'); //新增文字 str.textContent="新增清單!"; //在.text下新增子節點(str) document.querySelector('.text').appendChild(str); 優點:安全性高 缺點:效能差 差異:產生的結果會繼續接在原本有的元素後面，不像 innerHTML 會重新覆蓋

DOM DOM (Document Object Model，文件物件模型)可以讓JavaScript存取網頁內的元素，是一個將HTML文件的元件轉換成樹狀結構，我們稱之為「DOM Tree」 我們可以透過JavsScript與DOM新增、搜尋、刪除網頁元素 在網頁中，我們會看到的HTML樣子是 <html> <head> <title>網頁標題</title> </head> <body> <h1>Header</h1> <a href="#">快速連結</a> </body> </html> 而對應的DOM DOM節點類型 DOM節點類型常見有幾種: Node.ELEMENT_NODE (HTML元素節點),對應數值: 1 例如: <h1> 、 <p> 範例: //這些都是元素節點 <body> <p></p> <div> <a href=""></a> <span></span> </div> </body> Node.TEXT_NODE (文字節點),對應數值: 3 除了文字外，它還包含換行與空格 範例: <p>//這邊是換行 我是文字 //這邊是文字+換行 </p> Node.COMMENT_NODE (註解節點),對應數值: 8 範例: //就這是註解 Node.DOCUMENT_NODE (跟節點),對應數值: 9 就是 document Node.DOCUMENT_TYPE_NODE (文件類型的 DocumentType 節點),對應數值: 10 例如 HTML5 的 <!DOCTYPE html> Node.DOCUMENT_FRAGMENT_NODE (DocumentFragment 節,對應數值: 1 DOM節點選取 每個載入瀏覽器的...

for迴圈 當設定的條件值符合時，會執行 { } 內的程式碼，直到條件不符合才停止 for ( 初始值;條件;結束變動 ) { 　要執行的程式碼 } 帶入值範例 for ( var i=0 ;i 預測初始值是 i 為 0 ,限制 i 小於 10 的話會繼續執行， i++ 則是每次執行完迴圈都會 +1 ,故當 i 加到 10 後，就會結束執行跳出迴圈 break和continue 除了讓他執行完後跳出迴圈之外，我們也可以使用 break 和 continue 指定迴圈活動方式 break :直接跳離迴圈 continue :會跳過一次然後繼續下一次迴圈 break 用法 當 i 可以整除 3 時，就跳出迴圈 for ( var i=1 ;i 以上若沒有使用 break ，則是會得到 3 , 6, 9 的答案 continue 用法 當 i 可以整除 3 時，跳過它並繼續執行迴圈 for ( var i=1 ;i 多重迴圈 for 迴圈內部也可以執行多個 for 迴圈 以下示範寫99乘法表: //設定從2到9 for(var i=2 ;i 以上，大家可以試著做做看:)

switch 上一回我們講到 if..else ，這節來說說 switch switch 也是條件判斷，不同條件執行不同動作 switch(條件內容){ case 判斷為此: ..執行內容..; break; case 判斷為此: ..執行內容..; break; case 判斷為此: ..執行內容..; break; case 判斷為此: ..執行內容..; break; default: ..執行內容..; break; } 用範例來說我們可以(判斷日期) var week="Wednesday"; switch(week){ case "Monday": console.log("今天星期一"); break; case "Tuesday": console.log("今天星期二"); break; case "Wednesday": console.log("今天星期三"); break; case "Thursday": console.log("今天星期四"); break; case "Friday": console.log("今天星期五"); break; case "Saturday": case "Sunday": console.log("放假日!"); break; default: console.log("錯誤"); break; ...

<div> <div> 是沒有語意的標籤，若你單單使用它，你會發現它不會像 h1~h6 或者 a連結 那樣有自己的語意;我們可以解釋成它是一個區塊，將網頁內容包覆並使用 CSS 做排版用的標籤 <body> <h1>網頁標題</h1> <div> 把內容放進裡面 <div>也可以區塊包覆區塊</div> </div> <div>可增加多個區塊做排版</div> </body> 範例: See the Pen Float by yennnnyu ( @yennnnn ) on CodePen . 通常一個網頁會有header、nav、content、footer..等，我們都使用 <div> 去排版的話 1.程式碼上很亂，無法快速知道你寫的是屬於哪個部分  2.網頁軟體或者搜尋引擎不清楚你這是甚麼功能導致SEO效果低 以下幾個是和 div 一樣沒語意但又能讓網頁了解的意思的標籤 <header> :用在於標頭上，通常會包含網站標題、Logo..等內容 <nav> :網頁的選單、導覽列 <main> :使用在網站的主題、主要內容 <aside> :用於側邊欄位或者需要標記的部分、附加內容 <article> :使用在文章、新聞雜誌、留言論壇..等 <section> :它一個區塊，類似網頁大綱，通常一個 <section> 內會包含一個標題 <footer> :為頁尾，可放聯絡方式、著作權..等相關連結內容 以上述方式，我們假如都是用 div 原本會是這樣 <body> <div>logo <div>選單</div> </div> <div> <div>內容</div> <div>內容</div> <div>內容</d...

if...else if...else 是條件判斷式，用來判別你所需要的內容，如同語法所說，假如怎樣怎樣...否則怎樣怎樣 if(條件內容){ ..執行內容.. }else(條件內容){ ..執行內容.. } 條件內容是回傳 boolean 值 true 和 flase ，當第一條件為 true ，就會執行 { } 的內容，若為 false 則執行下一步 而當你需要判斷的數量多時，可以使用 else if 來增加條件判斷 if(分數>0並且 =60並且 =80 除了 if...else ，我們也可以使用 if...retrun 回傳錯誤 所以有 retrun ，就不需要 else if(分數 但是使用 if..else 方式若你條件判斷很多的話，會導致效能不好，每跑一次就會重新執行，所以這時 switch 就會是你的好選擇! 資料來源: https://blog.wu-boy.com/2013/01/you-must-be-known-js-condition/ https://www.ithome.com.tw/voice/108380

運算式與運算子 運算式是由運算元與運算子組成，可以取得值 運算子則是對變數或值進行操作的字元 var a=1+3; 上列透過 = 賦值，而右側分別為 1+3 :運算式 1 , 3 :運算元 + :運算子 JavsScript有以下運算子 算數運算子 賦值運算子 比較運算子 位元運算子 邏輯運算子 字串運算子 條件運算子 逗點運算子 一元運算子 關係運算子 有關運算子可以參考 MDN 算數運算子 此為最常見的運算子，也跟我們息息相關，就是小時候就學過的「加、減、乘、除」，其功能就和數學一樣(比較特別的是，在除數為0時 Infinity) 加號 var a=1+3; console.log(a);//4 減號 var a=2-1; console.log(a);//1 乘法 var a=2*3; console.log(a);//6 除法 var a=6/3; console.log(a);//2 餘數 var a=9%2; console.log(a);//1 而除數為0時 var a=6/0; console.log(a);//Infinity 而除0得到的餘數 var a=9%0; console.log(a);//NaN NaN :Not a number 在使用不是數字的時候，使用 Number() ，會得到這種結果 Number("HELLO"); //NAN 另外若是使用字串的話 100+"100" //"100123" 100*"100" //10000 "200"-100 //100 "300"/100 //3 500%"40" //20 你會發現，除了加號，其他的JavaScript會先在背後透過 Number() ，轉成數字再進行運算 比較運算式 在語法上 = 為賦值，那等於該怎麼寫呢 var a=1; var b=1; //假如a等於b就會回傳true a==b //true; 就是用雙等於 == ...

陣列 陣列，是一種JS儲放資料的物件，可以放零到多個集合，它的值是有順序序列的，已 [ ] 包覆資料 陣列基本樣式 var 陣列名稱=[]; 可在 [ ] 放置資料 var a=[123,46,"Hello",45,"oole"]; 我們也可以使用 new 來建立 var a=new Array("aaa","bbb",124); 陣列有個屬性: length ，提供存取陣列的長度，以下範例來說答案是5 var a=[123,46,"Hello",45,"oole"]; //共五筆 a.length; //5 存取 當我們想把資料取出來時，就需要使用到 索引編號 這邊要提醒的是陣列的索引是從 0 開始計算的哦! 當我們取得第三個的 Hello ，但它的索引是 2 var a=[123,46,"Hello",45,"oole"]; //共五筆 //陣列名稱[索引編號]; a[2]; //Hello 建立陣列 我們可以透過元素帶入陣列 一種是帶入你要的順序和元素 var a=[] //空字串 a[0]='aaa'; //第0順位帶入'aaa' a[1]='bbb'; a[2]='ccc'; console.log(a); //["aaa","bbb","ccc"] 以上面方式，我們也可以更改哪個順位的元素 var a=["aaa","bbb","ccc"]; a[1]=123; console.log(a); //["aaa",123,"ccc"]; 或者也可以元素直接帶入想要的順位 var a=["aaa","bbb","ccc"]; a[6]=123; console.log(a); //["...