JS趴趴往上走-for迴圈篇

-

for迴圈


當設定的條件值符合時，會執行{ }內的程式碼，直到條件不符合才停止


 for ( 初始值;條件;結束變動 ) {
　要執行的程式碼
}

帶入值範例

 for ( var i=0 ;i<10 code="" console.log="" i="">
預測初始值是i為0,限制i小於10的話會繼續執行，i++則是每次執行完迴圈都會+1,故當i加到10後，就會結束執行跳出迴圈


break和continue

除了讓他執行完後跳出迴圈之外，我們也可以使用break和continue指定迴圈活動方式

  • break:直接跳離迴圈
  • continue:會跳過一次然後繼續下一次迴圈


break用法
當i可以整除3時，就跳出迴圈

 for ( var i=1 ;i<10 break="" code="" console.log="" i="" if="">
以上若沒有使用break，則是會得到3 , 6, 9的答案


continue用法
當i可以整除3時，跳過它並繼續執行迴圈

 for ( var i=1 ;i<10 code="" console.log="" continue="" i="" if="">


多重迴圈

for迴圈內部也可以執行多個for迴圈

以下示範寫99乘法表:

 //設定從2到9
 for(var i=2 ;i<10 code="" console.log="" for="" i="" j="" result="" var="" x="">


以上，大家可以試著做做看:)

留言

張貼留言

這個網誌中的熱門文章

HTML5-使用其他語意標籤代替div

-
<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...
閱讀完整內容

JS趴趴往上走-BOM

-
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 可獲得當前頁面網址，並將瀏覽器重定到新頁面;除了可以跳轉...
閱讀完整內容

JS趴趴往上走- AJAX基本應用

-
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個狀...
閱讀完整內容