發表文章

目前顯示的是 9月, 2019的文章

JS趴趴往上走-插入HTML標籤的兩種方式

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 會重新覆蓋

JS趴趴往上走-JS選取DOM元素

圖片
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節點選取 每個載入瀏覽器的

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=""> 以上,大家可以試著做做看:)

JS趴趴往上走-switch篇

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;

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>內容</div&g

JS趴趴往上走-if篇

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

JS趴趴往上走-運算式與運算子篇

圖片
運算式與運算子 運算式是由運算元與運算子組成,可以取得值 運算子則是對變數或值進行操作的字元 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趴趴往上走-陣列篇

陣列 陣列,是一種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); //["

JS趴趴往上走-物件篇

圖片
物件 除了原始型別,其他都是物件,例如我們常見的 function 、 array ...都是物件的一種 關於型別,我們可以使用 typeof 來檢測,但是你會發現 typeof 'Hello'; //string typeof 12345; //number typeof true; //boolean typeof null; //object typeof undefined; //undefined typeof [1,3,5]; //object typeof function(){}; //function null 其實是一個早期JS設計時的一個Bug,現在因為重新改可能會造成以前一些問題,所以就沒修了,但 null 還是屬於原始型別哦,而 function 雖然顯示 function ,但是它是屬於物件的一種 來源 建立物件 物件(object) 是個零至多種屬性的集合,而屬性是鍵 (key) 與值 (value) , 一個屬性的「值」可以是某個基本型別,或者另一個物件、函數...等 目前最常使用的是巢狀方式,使用 {} ,把你要的資訊放入 var house={ houselife:10, livingRoom:{ char:['紅色椅子','白色椅子','藍色椅子'], table:"圓形桌子" }, bedRoom:{ char:false, bed:true, window:function(){ console.log('沒有開啟'); } }, kitchen:"沒有廚房"; } 我們也可以 new 一個新物件,之後在新物件裡新增屬性與方法 var house=new Object(); //新建一個物件 house.houseliee=10; //在house底下新增houseliee

JS趴趴往上走-函式新手篇

函式 函式是一種用來執行某一事件或計算的語法,它可以包含一段或多段語法,可以重複使用;但是你使用 typeof 時你會得到 function 的結果,但是它是屬於物件 object 哦 一個函式的組成為: 1.函式名稱 2.參數列表:放置括號 ( ) 內 3.執行內容:放置大括號 { } 內 fumction 名稱([參數]){ //執行內容 } 此組成屬於 函式陳述句 也稱 函式宣告 ,我們帶入值會變成 function abc(number){ //abc為函數名稱 number為參數 var a=1; console.log(a+number); }//大括號為內容 abc(2);//執行abc函式,()內的參數會傳到number內 //所以console.log(a+number)的結果為3 全域變數和區域變數的差異 在變數篇有提到變數在不同地方,它能使用的區域也會不一樣 var x=1; console.log(x); 這邊答案是 1 那這樣呢? var x=1; function abc(){ var x=2; } abc(); console.log(x); 猜出來答案是多少嗎? 答案也是 1 哦! 在這邊,因為 var x=2;  是在 function 內部宣告的, function 內宣告的只會在 function 裡執行完成,所以在這裡的x是屬於區域變數,而 console.log(x); 是在 function 外執行,所以它拿到的 x 值是外面 x 的哦 接下來下面這題呢 var x=1; function abc(num){ var x=2+num; console.log(x); } abc(2); 答案是 4 哦! ,依照上述所說, console.log() 是寫在 function 內部,所以它執行是內部的 x ,接著abc的參數為 2 ,故 2+2=4 接著這題範例答案大家猜猜看 x 和 b 是多少 var x=123; function abc(){ var b=456 x=2; } abc(); console.log(x); consol

JS趴趴往上走-變數篇

嗨大家好,我是yanennn 關於這篇系列的產生,是因為我是個超級金魚腦(? 看一次忘一次,所以這次想記錄下來,之後忘記還能再翻一次來看看 有可能會有點像隨手筆記,希望不要太在意,也希望看到這邊的你和我都能有一些小收穫:) 變數 變數是個存放資料的基本單位,當你要使用變數時,在ES5需使用 var 來宣告,到ES6才會有其他宣告變數(eg: let 和 const ),宣告變數時有些規則要注意,名稱開頭不能使用數字、 關鍵字 ,中文字是可以使用的,但通常怕編碼有問題,所以基本都是使用英文字 最後要注意的事,JavaScript 的語法是有區分大小寫的,也就是說,當你的 var apple; 時,你在下面所寫的都只能是 apple 不能有隨意大小寫(eg:Apple、APPLE) 變數區域 變數有全域變數和區域變數 全域變數為在 window 上的變數,位置通常是寫在最外面,而區域變數則是宣告在 func 函式內的變數,這邊要注意,若當在func的變數沒有用 var 宣告,所產生的一樣是全域變數哦! //宣告變數a為0 var a=0; //在function test()內給宣告變數b和a值 function test(){ var b=123; a=456; console.log(b); //因為是內部宣告的值,屬於區域變數影響所以產生值為123 } //執行 test(); console.log(a);//答案為456 //原本預期是產生結果是0,但因test()內的a沒使用var宣告導致這邊的a為全域變數, //所以產生的結果為456 變數常見型別 變數一共有五種型別,分別為 string (字串)、 number (數字)、 boolean (布林)、 null (空值)和 undefined (),以下簡單介紹一下,想知道你的值為哪個型別,我們可以使用 typeof 來判別 string(字串) 字串通常都是用 "  "  (雙引號)或 '  '  (單引號)包覆 例如下範例: var string1="字串"; var string2='我是字串&#

Bootstrap-絕對定位失靈了?

圖片
以下建議有 position 一些小基礎和Bootstrap小基礎會比較清楚哦 position 屬性是用於指定一個元素的定位方式,它含有的屬性值有: static (預設值)、 absolute (絕對)、 relative (相對)、 fixed (固定) 設定完屬性值後,就要設定 top 、 right 、 bottom 和 left 決定該元素的最終位置 上述有些了解後,接著我們實作在Bootstrap上 以下範例設定為在大螢幕時背景圖片在左邊,文字在右邊,當螢幕變小後,文字會和背景圖片重疊,所以這邊為了不讓背景圖片佔空間可以和文字重疊,所以把背景圖片設定為絕對定位 See the Pen Bs #position by yennnnyu ( @yennnnn ) on CodePen . 這時大家有發覺到奇怪現象嗎,為什麼已經設定絕對定位了,但是圖片卻在下面呢?不是應該浮在最上面嗎? 這邊就要請大家打開 F12 ,會看到我們的 開發人員工具 ,接著移到我們寫的程式,會發現原來 col 其實也有設定相對位置,導致背景圖片明明有設定絕對定位了卻沒有浮在最上面(當元素都有設定位置的話,最上面先寫的程式會在下面,一層一層堆疊哦) 所以假如說想讓以上面範例,若想讓背景圖片移到上面,只要設定 z-index 就可以囉!大家也可以試試看把上面範例的 z-index 註解移除掉看看效果 關於 z-index 若有些不懂得也可以到我另一篇看看哦: )

css-關於z-index一些小事

z-index 是一個可以設定元素推疊順序,當 z-index 的值愈高,順序就愈上面,反之,若想讓他的順序在下面,也可以使用負值 z-index 會伴隨著 position (定位),除了屬性值: static (預設值)不能使用外,其他 absolute (絕對)、 relative (相對)、 fixed (固定)都能使用 如下範例1當寫入 z-index=1 而沒有 position ,產生的畫面完全不為所動 See the Pen z-index-1 by yennnnyu ( @yennnnn ) on CodePen . 範例2當寫入 z-index=1也 有設置 position ,產生結果box2會比box1的堆疊順序變成在上面了 See the Pen z-index-2 by yennnnyu ( @yennnnn ) on CodePen . 範例3當寫入 z-index=-1 也有設置 position ,產生結果box3會比box1的堆疊順序變成在下面 See the Pen z-index-3 by yennnnyu ( @yennnnn ) on CodePen . 大家也可以試著修改看看哦~ See the Pen z-index by yennnnyu ( @yennnnn ) on CodePen .