-
Notifications
You must be signed in to change notification settings - Fork 2
/
search.json
1 lines (1 loc) · 328 KB
/
search.json
1
[{"title":"CSS 常用語法","url":"/2020/04/02/CSS-%E5%B8%B8%E7%94%A8%E8%AA%9E%E6%B3%95/","content":"<!-- build time:Sun May 23 2021 15:10:01 GMT+0800 (GMT+08:00) --><h2>css可以用來做什麼？</h2><p>css是用來編輯網頁元素的樣式，html是網頁元素的架構。簡單來說css就是用來美化網頁的內容；例如：大小、顏色、排版等等。</p><p>在這裡可以用以下的語法在html檔案的<code><head></head></code>中連結css檔案</p><figure class=\"highlight html\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\"><<span class=\"name\">link</span> <span class=\"attr\">rel</span>=<span class=\"string\">\"stylesheet\"</span> <span class=\"attr\">href</span>=<span class=\"string\">\"style.css\"</span>></span></span><br></pre></td></tr></table></figure><p></p><p><a id=\"more\"></a></p><h2>css寫法</h2><p>css的寫法格式如下</p><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">選擇器 {</span><br><span class=\"line\"> 屬性: 設定值;</span><br><span class=\"line\"> 屬性: 設定值;</span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure><p></p><p>舉例來說，如果想要將<code>h1</code>的顏色改成藍色，字體大小改成13px，就可以這樣寫</p><p></p><figure class=\"highlight css\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"selector-tag\">h1</span> {</span><br><span class=\"line\"> <span class=\"attribute\">color</span>: blue;</span><br><span class=\"line\"> <span class=\"attribute\">font-size</span>: <span class=\"number\">13px</span>;</span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure><p></p><h2>常見撰寫錯誤</h2><p>對於新手來說，常犯的css錯誤有以下這些 - HTML檔案中連結css檔案名稱輸入錯誤 - 連結css檔案的路徑錯誤 - 有兩個以上的屬性要用<code>;</code>隔開 - 單字拼寫錯誤 - 每個標籤的屬性都要在<code>{}</code>中，如果有遺漏會顯示錯誤</p><h2>選擇器</h2><h3>HTML標籤選擇器</h3><p>當我們要改變HTML標籤的樣式時，我們可以使用HTML標籤選擇器來選取所有標籤，這樣的畫網頁中所有的標籤都會套用到設定的樣式</p><p></p><figure class=\"highlight css\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"selector-tag\">h1</span> {</span><br><span class=\"line\"> <span class=\"attribute\">color</span>: red;</span><br><span class=\"line\">}</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"selector-tag\">p</span> {</span><br><span class=\"line\"> <span class=\"attribute\">color</span>: blue;</span><br><span class=\"line\">}</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"selector-tag\">a</span> {</span><br><span class=\"line\"> <span class=\"attribute\">color</span>: green;</span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure><p></p><h3>擬態選擇器</h3><p>擬態選擇器實務上較常用在<code>a連結</code>上，例如：滑鼠滑過<code>a連結</code>時改變的顏色和字體大小，就可以使用<code>a:hover</code>語法，當滑鼠右鍵按住不放時可以使用<code>a.active</code>語法</p><p></p><figure class=\"highlight css\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"selector-tag\">a</span> {</span><br><span class=\"line\"> <span class=\"attribute\">color</span>: black;</span><br><span class=\"line\">}</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"selector-tag\">a</span><span class=\"selector-pseudo\">:hover</span> {</span><br><span class=\"line\"> <span class=\"attribute\">color</span>: red;</span><br><span class=\"line\"> <span class=\"attribute\">font-size</span>: <span class=\"number\">20px</span>;</span><br><span class=\"line\">}</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"selector-tag\">a</span><span class=\"selector-pseudo\">:active</span> {</span><br><span class=\"line\"> <span class=\"attribute\">color</span>: blue;</span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure><p></p><h3>類別選擇器</h3><p>當同時有多個相同的標籤時，如果要對於其中一個內容進行客製化樣式就會用到類別選擇器。例如，在HTML檔案中有5個<code><p></P></code>段落，想要將其中的兩個變更顏色為紅色，就可以在HTML中為要修改的<code><p></P></code>段落加上<code>class</code>屬性，並在css中用<code>.class名稱</code>來為其加上樣式，覆蓋原來的樣式設定</p><p></p><figure class=\"highlight html\"><table><tr><td class=\"code\"><pre><span class=\"line\">// html標籤內容</span><br><span class=\"line\"><span class=\"tag\"><<span class=\"name\">p</span>></span>段落一<span class=\"tag\"></<span class=\"name\">P</span>></span></span><br><span class=\"line\"><span class=\"tag\"><<span class=\"name\">p</span>></span>段落一<span class=\"tag\"></<span class=\"name\">P</span>></span></span><br><span class=\"line\"><span class=\"tag\"><<span class=\"name\">p</span>></span>段落一<span class=\"tag\"></<span class=\"name\">P</span>></span></span><br><span class=\"line\"><span class=\"tag\"><<span class=\"name\">p</span> <span class=\"attr\">class</span>=<span class=\"string\">\"red\"</span>></span>段落一<span class=\"tag\"></<span class=\"name\">P</span>></span></span><br><span class=\"line\"><span class=\"tag\"><<span class=\"name\">p</span> <span class=\"attr\">class</span>=<span class=\"string\">\"red\"</span>></span>段落一<span class=\"tag\"></<span class=\"name\">P</span>></span></span><br></pre></td></tr></table></figure><p></p><p></p><figure class=\"highlight css\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"selector-tag\">p</span> {</span><br><span class=\"line\"> <span class=\"attribute\">color</span>: blue;</span><br><span class=\"line\">}</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"selector-class\">.red</span> {</span><br><span class=\"line\"> <span class=\"attribute\">color</span>: red;</span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure><p></p><p>使用類別選擇器時，因為類別選擇器的權重較高，所以會覆蓋標籤選擇器的樣式內容，而標籤中的class名稱是可以自訂的，在設定了class的樣式後，不論是在什麼樣的HTML標籤下，所有相同class名稱的標籤都會套用樣式設定。</p><p><strong>使用類別選擇器時，在class名稱前一定要有<code>.</code></strong></p><h2>使用 CSS 優化文字排版</h2><p>使用css可以優化文字的排版，常用的屬性有：</p><p></p><figure class=\"highlight css\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"selector-tag\">p</span> {</span><br><span class=\"line\"> <span class=\"attribute\">font-family</span>: verdana;</span><br><span class=\"line\"> <span class=\"attribute\">font-size</span>: <span class=\"number\">16px</span>;</span><br><span class=\"line\"> line-height: 1.5; // 1.5倍行高，也可設定px</span><br><span class=\"line\"> text-align: left; // 靠左對齊</span><br><span class=\"line\"> text-indent: 32px; // 首行縮排2字元(因為font-size是16px)</span><br><span class=\"line\"> text-decoration: underline; // 加下底線； 刪除線屬性值為line-through</span><br><span class=\"line\"> letter-spacing: 2px; // 字元和字元間的間距</span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure><p></p><p><strong>關於文字排版也可以參考新聞網站的排版方式，通常對於文字段落排版較為講究。</strong></p><h2>在 HTML 標籤上加入線條</h2><p>css也可以為html標籤加上線條，例如：</p><p></p><figure class=\"highlight css\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"selector-tag\">h1</span> {</span><br><span class=\"line\"> border: 1px solid green; // 參數分別為：線條粗細、 線條樣式、線條顏色</span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure><p></p><p>將會呈現以下效果</p><p><img src=\"/2020/04/02/CSS-常用語法/border.jpg\" title=\"border效果\"></p><p>常見的線條樣式： - 實心線條： solid - 虛線： dashed - 圓點虛線： dotted</p><p>在css語法中，線條也可以有變化性，除了上下左右圍繞以外，也可以只有分別設定每一邊的屬性，或是只有其中幾個。</p><p></p><figure class=\"highlight css\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"selector-tag\">h1</span> {</span><br><span class=\"line\"> <span class=\"attribute\">border-left</span>: <span class=\"number\">5px</span> solid green;</span><br><span class=\"line\"> <span class=\"attribute\">border-bottom</span>: <span class=\"number\">5px</span> solid blue;</span><br><span class=\"line\"> <span class=\"attribute\">border-top</span>: <span class=\"number\">5px</span> solid red;</span><br><span class=\"line\"> <span class=\"attribute\">border-right</span>: <span class=\"number\">5px</span> solid orange;</span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure><p></p><p>會呈現以下效果 <img src=\"/2020/04/02/CSS-常用語法/border2.jpg\" title=\"border效果變化\"></p><p>而border還有一種屬性是<code>transparent</code>透明色border，在撰寫<code>a:hover</code>時，使用border效果時，可以在原來的<code>a</code>標籤的css中先加入<code>trasparent</code>屬性，避免造成畫面高度變化而產生跳動</p><p></p><figure class=\"highlight css\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"selector-tag\">a</span> {</span><br><span class=\"line\"> <span class=\"attribute\">border-bottom</span>: <span class=\"number\">5px</span> solid transparent;</span><br><span class=\"line\">}</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"selector-tag\">a</span><span class=\"selector-pseudo\">:hover</span> {</span><br><span class=\"line\"> <span class=\"attribute\">border-bottom</span>: <span class=\"number\">5px</span> solid blue;</span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure><p></p><!-- rebuild by neat -->","categories":["HTML & css"],"tags":["css"]},{"title":"Git & GitHub 入門","url":"/2020/10/21/Git%20&%20GitHub%20%E5%85%A5%E9%96%80/","content":"<!-- build time:Sun May 23 2021 15:10:01 GMT+0800 (GMT+08:00) --><h2>Git & GitHub 入門</h2><h3>為什麼要學 Git ？</h3><ul><li>Git 是程式碼版本控制軟體</li><li>用網頁版型介紹用了 Git 的差異</li></ul><p><a id=\"more\"></a></p><h3>軟體與服務安裝</h3><p>*<a href=\"https://git-scm.com/\" target=\"_blank\" rel=\"noopener\">Git 軟體安裝</a> - 首頁 Download *<a href=\"https://github.com/\" target=\"_blank\" rel=\"noopener\">Github 會員註冊</a></p><ul><li><a href=\"https://www.sourcetreeapp.com/\" target=\"_blank\" rel=\"noopener\">SourceTree 軟體安裝</a></li></ul><p>### 終端機</p><ul><li>Win：<em>Git Bash</em><ul><li>開始 > 搜尋輸入 > Git Bash</li></ul></li><li>Mac：<em>終端機</em><ul><li>輸入「control + 空白」，關鍵字輸入「終端機」</li></ul></li></ul><h3>終端機指令學習</h3><ul><li>練習：前往到某資料夾，觀看內容</li><li>練習：嘗試用指令開一個新資料夾或檔案</li></ul><table><thead><tr><th style=\"text-align:center\">Windows</th><th style=\"text-align:center\">MacOS / Linux</th><th style=\"text-align:center\">說明</th></tr></thead><tbody><tr><td style=\"text-align:center\">cd [路徑]</td><td style=\"text-align:center\">cd [路徑]</td><td style=\"text-align:center\">前往資料夾路徑</td></tr><tr><td style=\"text-align:center\">cd</td><td style=\"text-align:center\">pwd</td><td style=\"text-align:center\">取得目前所在的位置</td></tr><tr><td style=\"text-align:center\">dir</td><td style=\"text-align:center\">ls</td><td style=\"text-align:center\">顯示資料夾裡的檔案</td></tr><tr><td style=\"text-align:center\">mkdir</td><td style=\"text-align:center\">mkdir</td><td style=\"text-align:center\">新增資料夾</td></tr><tr><td style=\"text-align:center\">無指令</td><td style=\"text-align:center\">touch</td><td style=\"text-align:center\">開新檔案</td></tr><tr><td style=\"text-align:center\">copy</td><td style=\"text-align:center\">cp</td><td style=\"text-align:center\">複製檔案</td></tr><tr><td style=\"text-align:center\">move</td><td style=\"text-align:center\">mv</td><td style=\"text-align:center\">移動檔案</td></tr><tr><td style=\"text-align:center\">del</td><td style=\"text-align:center\">rm</td><td style=\"text-align:center\">刪除檔案</td></tr><tr><td style=\"text-align:center\">cls</td><td style=\"text-align:center\">clear</td><td style=\"text-align:center\">清除畫面上的內容</td></tr></tbody></table><h3>嘗試 Git 是否有安裝成功</h3><ul><li>在終端機裡面輸入：git --version</li></ul><p></p><h3>設定個人資料</h3><ul><li>輸入姓名：git config --global user.name "USER_NAME"</li><li>輸入個人的 email：git config --global user.email "USER_EMAIL"</li><li>查詢 git 設定內容：git config --list (<code>USER_NAME</code> 與 <code>USER_EMAIL</code>替換成自己的使用者名稱與email)</li></ul><p>### 基本指令架構</p><p><img src=\"/2020/10/21/Git%20&%20GitHub%20入門/基本指令架構.jpg\" class=\"確認\" title=\"確認 基本指令架構\"></p><h3>Git 常用指令</h3><ul><li>初始化數據庫： git init</li><li><a href=\"https://helpx.adobe.com/tw/x-productkb/global/show-hidden-files-folders-extensions.html\" target=\"_blank\" rel=\"noopener\">開啟 .git 隱藏檔方案</a><ul><li>Mac command+shift+.</li></ul></li><li>查詢當前狀態：git status<ul><li>要將檔案加入到指定資料夾</li></ul></li><li>將檔案加入到索引：git add .</li><li>將索引檔案變成一個更新(commit)：git commit -m "新增網頁環境"</li><li>觀察 commit 歷史紀錄： git log</li><li>下載遠端數據庫： git clone 數據庫網址</li><li>更新遠端數據庫： git push origin master</li></ul><p><img src=\"/2020/10/21/Git%20&%20GitHub%20入門/Git圖解.png\" class=\"確認\" title=\"確認 Git流程圖解\"></p><!-- rebuild by neat -->","categories":["git"],"tags":["git"]},{"title":"Flex 網頁排版技巧","url":"/2020/04/03/Flex-%E7%B6%B2%E9%A0%81%E6%8E%92%E7%89%88%E6%8A%80%E5%B7%A7/","content":"<!-- build time:Sun May 23 2021 15:10:01 GMT+0800 (GMT+08:00) --><h2>flex排版</h2><p>flexbox，又稱css3彈性盒子，是為了適應不同螢幕尺寸和顯示設備而生的佈局模式。</p><p>其中需要了解的三個特性；</p><ol><li>外容器與內元件的相關屬性</li><li>軸線與方向</li><li>對齊的方法</li></ol><p><a href=\"https://developer.mozilla.org/zh-TW/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes\" target=\"_blank\" rel=\"noopener\">MDN對於flex的介紹</a></p><p><a id=\"more\"></a></p><h2>flex Container特性</h2><p>在flex排版中首先要知道的是外容器與內元件的概念，在flex排版中是由外容器包覆著內元件來進行排版，外容器可以視為是內元件的父元素。</p><p><img src=\"/2020/04/03/Flex-網頁排版技巧/flex屬性.jpg\" title=\"flex的外容器與內元件\"></p><p>而有了外容器與內元件的概念之後，下面列出了flex必備的屬性其中又分為<code>外容器屬性</code>與<code>內元件屬性</code>，外容器屬性的設定必須列在父元素的css語法中，內元件才會套用flex的特性。</p><p>Flex 外容器屬性：</p><ul><li>display</li><li>flex-flow<ul><li>flex-direction</li><li>flex-wrap</li></ul></li><li>justify-content</li><li>align-items</li></ul><p>Flex 內元件屬性：</p><ul><li>flex<ul><li>flex-grow</li><li>flex-shrink</li><li>flex-basis</li></ul></li><li>order</li><li>align-self</li></ul><p>在這裡先透過下列的語法來看一下效果</p><p><iframe id=\"cp_embed_ExjzPzP\" src=\"//codepen.io/mancen/embed/ExjzPzP?height=500px&theme-id=dark&slug-hash=ExjzPzP&default-tab=css,result&embed-version=2\" scrolling=\"no\" frameborder=\"no\" height=\"500px\" allowtransparency=\"true\" allowfullscreen class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\"></iframe></p><p>而在外容器設定了<code>display: flex;</code>後，將會有以下特性：</p><ul><li>當內元件的寬度總和超過外容器寬度時，內元件預設會依比例伸縮分配外容器的寬度，而不會超出外容器範圍之外</li><li>所有的內元件的預設高度會等高，若有其中一個元件高度較高，其他內元件也會同步延長拉伸，但若css有指定高度時，則依指定的高度顯示</li></ul><p><iframe id=\"cp_embed_dyoEwWo\" src=\"//codepen.io/mancen/embed/dyoEwWo?height=500px&theme-id=dark&slug-hash=dyoEwWo&default-tab=css,result&embed-version=2\" scrolling=\"no\" frameborder=\"no\" height=\"500px\" allowtransparency=\"true\" allowfullscreen class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\"></iframe></p><p>在上方範例中，在<code>.item1</code>中指定了高度150px，因此<code>.item1</code>高度會固定在150px，而不會隨著其他元素等高拉伸。</p><h2>flex軸線</h2><p>flex排版中最重要的重點就是軸線的觀念，齊中軸線分為主軸線（main axis）和交錯軸（cross axis）。</p><p><img src=\"/2020/04/03/Flex-網頁排版技巧/flex軸線.jpg\" title=\"flex軸線\"></p><p>用來決定主軸線的方向<code>flex-direction</code>屬性參數如下</p><ul><li>row(default) → 預設值，從左到右排列</li><li>row-reverse → 從右到左排列</li><li>column → 從上到下排列</li><li>column-reverse → 從下到上排列</li></ul><p>來看一下加上了<code>flex-direction</code>後效果</p><p><iframe id=\"cp_embed_ZEGNVRP\" src=\"//codepen.io/mancen/embed/ZEGNVRP?height=500px&theme-id=dark&slug-hash=ZEGNVRP&default-tab=css,result&embed-version=2\" scrolling=\"no\" frameborder=\"no\" height=\"500px\" allowtransparency=\"true\" allowfullscreen class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\"></iframe></p><h2>flex 主軸的對齊 justify-content</h2><p>決定了flex主軸的方向之後，接下來就是對齊的方式，這裡使用的是<code>justify-content</code>屬性，相關的參數有：</p><ul><li>flex-start → 預設值，從主軸起點開始對齊</li><li>flex-end → 從主軸終點開始對齊</li><li>center → 在主軸上兩邊留白置中對齊</li><li>space-between → 第一個與最後一個元素分別對齊主軸的起點與終點，然後均分</li><li>space-around → 中間的留白較多，左右佔一伴的空間</li><li>space-evenly → 邊界與所有元素間的間距均相等</li></ul><p>以預設的<code>flex-direction: row;</code>軸線設定下，<code>justify-content</code>屬性的參數值可以圖解如下</p><p></p><p>透過這些對齊的方式，就不用再為了元素間的間距去做複雜的運算。另外是<code>justify-content</code>仍然可以和border、margin與padding搭配使用，須視實際的需求或設計稿上的留白決定。</p><p><iframe id=\"cp_embed_WNvBmbv\" src=\"//codepen.io/mancen/embed/WNvBmbv?height=500px&theme-id=dark&slug-hash=WNvBmbv&default-tab=css,result&embed-version=2\" scrolling=\"no\" frameborder=\"no\" height=\"500px\" allowtransparency=\"true\" allowfullscreen class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\"></iframe></p><p>更多種組合方式的效果，可以參閱下方<code>Flex 六角線上模擬器</code></p><p><iframe id=\"cp_embed_WYzzYX\" src=\"//codepen.io/peiqun/embed/WYzzYX?height=500px&theme-id=dark&slug-hash=WYzzYX&default-tab=result&embed-version=2\" scrolling=\"no\" frameborder=\"no\" height=\"500px\" allowtransparency=\"true\" allowfullscreen class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\"></iframe></p><p>利用上面學到的語法來做一個並排選單</p><p><iframe id=\"cp_embed_ExjzMWQ\" src=\"//codepen.io/mancen/embed/ExjzMWQ?height=500px&theme-id=dark&slug-hash=ExjzMWQ&default-tab=css,result&embed-version=2\" scrolling=\"no\" frameborder=\"no\" height=\"500px\" allowtransparency=\"true\" allowfullscreen class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\"></iframe></p><h2>flex-wrap - 決定換行屬性</h2><p>前面提到了當內元件寬度總和超出外容器版面時，flex會預設讓內元件自動調整寬度去適應外容器的寬度，而如果想要使內元件在外容器中可以換行的話，可以使用<code>flex-wrap</code>語法。</p><p>flex-wrap屬性參數如下：</p><ul><li>nowrap → 預設值，調整元素大小不換行</li><li>wrap → 不調整內元件寬度，超出外容器寬度時換行</li><li>wrap-reverse →</li></ul><p><iframe id=\"cp_embed_yLNWrMq\" src=\"//codepen.io/mancen/embed/yLNWrMq?height=500px&theme-id=dark&slug-hash=yLNWrMq&default-tab=css,result&embed-version=2\" scrolling=\"no\" frameborder=\"no\" height=\"500px\" allowtransparency=\"true\" allowfullscreen class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\"></iframe></p><h2>align-items - 交錯軸對齊方式</h2><p>交錯軸是與主軸垂直的，當主軸是<code>row</code>或<code>row-reverse</code>時交錯軸的方向是由上至下；而主軸是<code>column</code>或<code>column-reverse</code>時交錯軸的方向是由左至右。</p><p>交錯軸的對齊方式使用的是<code>align-items</code>語法，相關參數如下：</p><ul><li>flex-start → 預設值，從交錯軸起點開始對齊</li><li>flex-end → 從交錯軸終點開始對齊</li><li>center → 在交錯軸上兩邊留白置中對齊</li><li>baseline → 用基準線來對齊內元件</li><li>stretch → 預設值，拉伸內元件填滿外容器</li></ul><p></p><h2>flex 裡面還可以有flex</h2><p>看完了上面這些，當於到了比較複雜的排版該怎麼辦呢？只要搞清楚外容器和內元件的概念，flex裡面其實還是可以有flex的，在這裡用常見的網頁nav bar 選單來畫一張圖來看一下：</p><p><img src=\"/2020/04/03/Flex-網頁排版技巧/flex加flex選單圖解.jpg\" title=\"flex選單圖解\"></p><p>在上圖中，最外層是整個header的外容器，其中的logo和ul選單分別分布在左右兩邊，因此使用了<code>justify-content: space-between;</code>來對齊；而ul又是裡面三個a連結的外容器，因此可以將三個a連結橫向排列，在這裡使用預設的<code>justify-content: flex-start;</code>即可(也可不寫)。</p><p><iframe id=\"cp_embed_zYGVNoE\" src=\"//codepen.io/mancen/embed/zYGVNoE?height=500px&theme-id=dark&slug-hash=zYGVNoE&default-tab=css,result&embed-version=2\" scrolling=\"no\" frameborder=\"no\" height=\"500px\" allowtransparency=\"true\" allowfullscreen class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\"></iframe></p><h2>column排版用法</h2><p>當網頁在區塊中希望有元素可以保持在div底部時，就可以利用<code>flex-direction</code>屬性中的<code>column</code>來處理，這裡用下面這張是意圖來舉例：</p><p><img src=\"/2020/04/03/Flex-網頁排版技巧/colum用法.jpg\" title=\"column使用時機舉例\"></p><p>假設在區塊的右側希望兩個a連結可以在區塊內置底，就可以在右側的藍色區域內加上flex語法，並使用<code>colum</code>語法使元素可以垂直排列，再搭配<code>justify-content: space-between;</code>來達到希望的效果。</p><!-- rebuild by neat -->","categories":["HTML & css"],"tags":["css","Flex"]},{"title":"HTML 基礎","url":"/2020/04/02/HTML%20%E5%9F%BA%E7%A4%8E/","content":"<!-- build time:Sun May 23 2021 15:10:01 GMT+0800 (GMT+08:00) --><h2>HTML 基本環境語法</h2><p>HTML基本環境語法如下，網頁顯示的內容寫在<code><body></body></code>裡面，其他像是網頁設定或是標題的內容寫在<code><head></head></code>中。</p><p><a id=\"more\"></a></p><p></p><figure class=\"highlight html\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"meta\"><!DOCTYPE html></span></span><br><span class=\"line\"><span class=\"tag\"><<span class=\"name\">html</span> <span class=\"attr\">lang</span>=<span class=\"string\">\"en\"</span>></span></span><br><span class=\"line\"><span class=\"tag\"><<span class=\"name\">head</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">meta</span> <span class=\"attr\">charset</span>=<span class=\"string\">\"UTF-8\"</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">meta</span> <span class=\"attr\">name</span>=<span class=\"string\">\"viewport\"</span> <span class=\"attr\">content</span>=<span class=\"string\">\"width=device-width, initial-scale=1.0\"</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">title</span>></span>Document<span class=\"tag\"></<span class=\"name\">title</span>></span></span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">head</span>></span></span><br><span class=\"line\"><span class=\"tag\"><<span class=\"name\">body</span>></span></span><br><span class=\"line\"> </span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">body</span>></span></span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">html</span>></span></span><br></pre></td></tr></table></figure><p></p><h2>emmet套件</h2><p>許多編輯器都可以使用emmet套件來輔助，使在撰寫網頁時能夠使用關鍵字提示更快速與方便，<a href=\"https://docs.emmet.io/cheat-sheet/\" target=\"_blank\" rel=\"noopener\">emmet快速鍵</a></p><h2>標題、段落與圖片</h2><p>在HTML中新增標題可以使用<code><h1></h1></code>，其中h1~h6分別代表標題的大小，<code><p></p></code>內用來新增段落的內容。</p><p></p><figure class=\"highlight html\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\"><<span class=\"name\">h1</span>></span>我是標題一<span class=\"tag\"></<span class=\"name\">h1</span>></span></span><br><span class=\"line\"><span class=\"tag\"><<span class=\"name\">p</span>></span>我是段落內容 我是段落內容 我是段落內容<span class=\"tag\"></<span class=\"name\">p</span>></span></span><br></pre></td></tr></table></figure><p></p><p>另外插入圖片則可以使用<code><img src="" alt=""></code>，src是圖片的位置，alt是圖片無法顯示時的替代文字，例如視障者無法得知圖片的內容，就會以<code>alt</code>內的文字替代顯示</p><p></p><figure class=\"highlight html\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\"><<span class=\"name\">img</span> <span class=\"attr\">src</span>=<span class=\"string\">\"logo.png\"</span> <span class=\"attr\">alt</span>=<span class=\"string\">\"我是logo\"</span>></span> // logo.png和html檔案均在相同資料夾</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"tag\"><<span class=\"name\">img</span> <span class=\"attr\">src</span>=<span class=\"string\">\"img/logo.png\"</span> <span class=\"attr\">alt</span>=<span class=\"string\">\"我是logo\"</span>></span> // img資料夾和html檔案均在相同資料夾下，img資料夾內有logo.png</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"tag\"><<span class=\"name\">img</span> <span class=\"attr\">src</span>=<span class=\"string\">\"https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png\"</span> <span class=\"attr\">alt</span>=<span class=\"string\">\"google logo\"</span>></span> // 使用網址載入遠端的圖片</span><br></pre></td></tr></table></figure><p></p><h2>a連結</h2><p>在需要在網頁加入連結時，使用的語法如下：</p><p></p><figure class=\"highlight html\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\"><<span class=\"name\">a</span> <span class=\"attr\">href</span>=<span class=\"string\">\"https://www.google.com/\"</span>></span>連到google<span class=\"tag\"></<span class=\"name\">a</span>></span></span><br><span class=\"line\"><span class=\"tag\"><<span class=\"name\">a</span> <span class=\"attr\">target</span>=<span class=\"string\">\"_blank\"</span> <span class=\"attr\">href</span>=<span class=\"string\">\"https://www.google.com/\"</span>></span>連到google<span class=\"tag\"></<span class=\"name\">a</span>></span></span><br></pre></td></tr></table></figure><p></p><p>而在<code><a href=""></a></code>中可依情況加入<code>target</code>屬性，其相關的參數如下：</p><table><thead><tr><th style=\"text-align:left\">參數值</th><th style=\"text-align:center\">描述</th></tr></thead><tbody><tr><td style=\"text-align:left\">_blank</td><td style=\"text-align:center\">在新視窗開啟</td></tr><tr><td style=\"text-align:left\">_self</td><td style=\"text-align:center\">預設，在原本的視窗開啟(與不加<code>target</code>屬性相同)</td></tr><tr><td style=\"text-align:left\">_parent</td><td style=\"text-align:center\">在父層視窗開啟</td></tr><tr><td style=\"text-align:left\">_top</td><td style=\"text-align:center\">將本身的分割視窗頁關閉，並在原處開啟一個單面的網頁。</td></tr><tr><td style=\"text-align:left\">framename</td><td style=\"text-align:center\">在指定的框架中開啟連結</td></tr></tbody></table><p>而在<code><a href=""></a></code>加入<code>title</code>屬性，在滑鼠移動到連結位置時，會出現浮動的小提示，也是一種對使用者友善的做法</p><figure class=\"highlight html\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\"><<span class=\"name\">a</span> <span class=\"attr\">title</span>=<span class=\"string\">\"google\"</span> <span class=\"attr\">href</span>=<span class=\"string\">\"https://www.google.com/\"</span>></span>連到google<span class=\"tag\"></<span class=\"name\">a</span>></span></span><br></pre></td></tr></table></figure><p></p><h2>列表</h2><p>在HTML中常用的列表有有序列表(order list)和無序列表(unorder list)，分別的寫法如下：</p><p></p><figure class=\"highlight html\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\"><<span class=\"name\">ul</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">li</span>></span>項目一<span class=\"tag\"></<span class=\"name\">li</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">li</span>></span>項目二<span class=\"tag\"></<span class=\"name\">li</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">li</span>></span>項目三<span class=\"tag\"></<span class=\"name\">li</span>></span></span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">ul</span>></span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"tag\"><<span class=\"name\">ol</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">li</span>></span>項目一<span class=\"tag\"></<span class=\"name\">li</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">li</span>></span>項目二<span class=\"tag\"></<span class=\"name\">li</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">li</span>></span>項目三<span class=\"tag\"></<span class=\"name\">li</span>></span></span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">ol</span>></span></span><br></pre></td></tr></table></figure><p></p><p>將會顯示以下效果： <img src=\"/2020/04/02/HTML%20基礎/ul&ol.jpg\" title=\"ul和ol非別的效果\"></p><!-- rebuild by neat -->","categories":["HTML & css"],"tags":["HTML"]},{"title":"JavaScript BOM - 瀏覽器功能探索","url":"/2020/03/28/JavaScript-BOM-%E7%80%8F%E8%A6%BD%E5%99%A8%E5%8A%9F%E8%83%BD%E6%8E%A2%E7%B4%A2/","content":"<!-- build time:Sun May 23 2021 15:10:01 GMT+0800 (GMT+08:00) --><h2>BOM(Browser Object Model)</h2><p>在使用者使用瀏覽器瀏覽網頁的過程，瀏覽器會產生一個<code>window</code>物件，裡面存有使用者瀏覽網頁的紀錄、網頁是否有使用iframe、瀏覽的網頁位址、DOM元素、使用的裝置screen資訊、以及網路連線狀態等等資訊。</p><p><img src=\"/2020/03/28/JavaScript-BOM-瀏覽器功能探索/BOM.jpg\" title=\"Browser Object Model\"></p><p>而在撰寫JavaScript程式的時候，又要如何利用這些資訊來使我們的程式對使用者更友善？因此，我們要在這裡透過幾個簡單的例子來探索<code>BOM</code>能帶給我們什麼樣的功能，可以用來改善使用者的體驗。</p><p><a id=\"more\"></a></p><h2>回上頁功能實作</h2><p>在網頁中時常可以看到的<code>回上頁</code>按鈕可以透過以下範例的事件綁定，以及<code>window.history.back()</code>來實現。</p><p></p><figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"built_in\">document</span>.getElementById(<span class=\"string\">'back'</span>).onclick = <span class=\"function\"><span class=\"keyword\">function</span> (<span class=\"params\"></span>) </span>{</span><br><span class=\"line\"> <span class=\"built_in\">window</span>.history.back();</span><br><span class=\"line\"> }</span><br></pre></td></tr></table></figure><p></p><p>當然，如果在瀏覽器所記錄的行為中存在有下一頁時，我們也可以透過這樣的功能來撰寫<code>前往下一頁</code>的按鈕</p><p></p><figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"built_in\">document</span>.getElementById(<span class=\"string\">'next'</span>).onclick = <span class=\"function\"><span class=\"keyword\">function</span> (<span class=\"params\"></span>) </span>{</span><br><span class=\"line\"> <span class=\"built_in\">window</span>.history.forward();</span><br><span class=\"line\"> }</span><br></pre></td></tr></table></figure><p></p><h2>透過 JS 設計列印或是頁面跳轉功能</h2><p>再使用瀏覽器瀏覽網頁的過程中，在頁面上加上<code>print</code>功能，可以放使用者不需要再使用滑鼠右鍵 → 列印，這樣較為麻煩的操作，在這裡可以使用<code>window</code>中內建的語法來實現這個想法。</p><p></p><figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"built_in\">document</span>.getElementById(<span class=\"string\">'print'</span>).onclick = <span class=\"function\"><span class=\"keyword\">function</span> (<span class=\"params\"></span>) </span>{</span><br><span class=\"line\"> <span class=\"built_in\">window</span>.print()</span><br><span class=\"line\"> }</span><br></pre></td></tr></table></figure><p></p><p>另外，也可以透過<code>window</code>中的<code>location</code>語法來查詢目前的位置</p><p></p><figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"built_in\">document</span>.getElementById(<span class=\"string\">'locat'</span>).onclick = <span class=\"function\"><span class=\"keyword\">function</span> (<span class=\"params\"></span>) </span>{</span><br><span class=\"line\"> <span class=\"built_in\">console</span>.log(location)</span><br><span class=\"line\"> }</span><br></pre></td></tr></table></figure><p></p><p>可以查詢位置之外，也可以使用<code>window</code>中的<code>open</code>語法來跳轉往頁</p><p></p><figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"built_in\">document</span>.getElementById(<span class=\"string\">'open'</span>).onclick = <span class=\"function\"><span class=\"keyword\">function</span> (<span class=\"params\"></span>) </span>{</span><br><span class=\"line\"> <span class=\"built_in\">window</span>.open(<span class=\"string\">'http://www.google.com.tw'</span>) <span class=\"comment\">// 預設為另開新視窗，也可設定相關參數再原視窗跳轉網頁</span></span><br><span class=\"line\"> }</span><br></pre></td></tr></table></figure><p></p><h2>動態擷取瀏覽器高度 - innerHeight</h2><p>假設今天在網頁上有一張banner的圖片，希望這張圖片不論瀏覽器高度為何都能夠滿版時，我們可以透過以下的語法來實現。</p><p></p><figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"comment\">// 透過window.innerHeight來擷取目前的瀏覽器高度</span></span><br><span class=\"line\"><span class=\"built_in\">document</span>.querySelector(<span class=\"string\">'.hero'</span>).style.height = <span class=\"built_in\">window</span>.innerHeight+<span class=\"string\">\"px\"</span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"comment\">// 當使用者縮放瀏覽器視窗的大小時，跟著動態調整圖片大小</span></span><br><span class=\"line\"><span class=\"built_in\">window</span>.onresize = <span class=\"function\"><span class=\"keyword\">function</span>(<span class=\"params\"></span>)</span>{</span><br><span class=\"line\"> <span class=\"built_in\">document</span>.querySelector(<span class=\"string\">'.hero'</span>).style.height = <span class=\"built_in\">window</span>.innerHeight+<span class=\"string\">\"px\"</span></span><br><span class=\"line\"> }</span><br></pre></td></tr></table></figure><p></p><p>這裡有個需要留意的小地方是，在桌面板的寬度可以使用寬版的圖片，而在行動版的寬度時，建議可以替換另一張高版的圖片，使在不同的裝置上能有更好的體驗。</p><p>還有就是，除了<code>innerHeight</code>之外，當然也還有<code>innerWidth</code>的語法可以用來動態擷取瀏覽器的寬度。</p><!-- rebuild by neat -->","categories":["JavaScript"],"tags":["JavaScript","BOM"]},{"title":"JavaScript localStorage - 瀏覽器資料儲存","url":"/2020/03/23/JavaScript-localStorage-%E7%80%8F%E8%A6%BD%E5%99%A8%E8%B3%87%E6%96%99%E5%84%B2%E5%AD%98/","content":"<!-- build time:Sun May 23 2021 15:10:01 GMT+0800 (GMT+08:00) --><h2>什麼是localStorage？</h2><p><code>localStorage</code>是在瀏覽器中預設的資料庫，在Chrome瀏覽器中可按<code>F12</code>後在<code>application</code>分頁中看到它，可以用來儲存使用者在瀏覽網頁過程所查看的商城商品，或查詢過的內容。和<code>localStorage</code>一樣常被使用的瀏覽器資料庫還有<code>Session Storage</code>c和<code>Cookies</code>都可以用來紀錄使用者的瀏覽行為。</p><p><img src=\"/2020/03/23/JavaScript-localStorage-瀏覽器資料儲存/localStorage.jpg\" title=\"Chrome瀏覽器 localStorage\"></p><p>其中，<code>localStorage</code>中的資料，除了透過JavaSvript刪除之外，除非使用者使用瀏覽器相關的清除功能，否則縱使關機後再開機，資料仍存在於<code>localStorage</code>中。</p><p><a id=\"more\"></a></p><h2>setItem、getItem 基本操作</h2><p>要將資料存進<code>localStorage</code>中可使用<code>setItem</code>語法，而要提取<code>localStorage</code>中的資料時使用<code>getItem</code>語法。基本寫法如下：</p><p></p><figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">var</span> str = <span class=\"string\">'Man Cne'</span>;</span><br><span class=\"line\">localStorage.setItem(<span class=\"string\">\"myName\"</span>,str); <span class=\"comment\">// 將資料寫入localStorage，括號內第一個值是key值，第二個值是value</span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"built_in\">console</span>.log(localStorage.getItem(<span class=\"string\">\"myName\"</span>)); <span class=\"comment\">// 讀取localStorage內資料,回傳\"Man Cne\"</span></span><br></pre></td></tr></table></figure><p></p><p>和DOM元素結合的範例如下，我們在html有一個"請輸入你的名字的"輸入欄位，按下"點擊"按鈕後會將欄位內的名字存入<code>localStorage</code>中<code>myName</code>的value，按下"點擊呼叫"後出現alert視窗將姓名回傳。</p><p></p><figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"comment\">// HTML</span></span><br><span class=\"line\"><span class=\"comment\">/**</span></span><br><span class=\"line\"><span class=\"comment\"><h2>請輸入你的名字</h2></span></span><br><span class=\"line\"><span class=\"comment\"><input type=\"text\" class=\"textClass\"></span></span><br><span class=\"line\"><span class=\"comment\"><input type=\"button\" value=\"點擊\" class=\"btnClass\"></span></span><br><span class=\"line\"><span class=\"comment\"><input type=\"button\" value=\"點擊呼叫\" class=\"btnCall\"></span></span><br><span class=\"line\"><span class=\"comment\">**/</span></span><br><span class=\"line\"><span class=\"keyword\">var</span> btn = <span class=\"built_in\">document</span>.querySelector(<span class=\"string\">\".btnClass\"</span>);</span><br><span class=\"line\"><span class=\"keyword\">var</span> call = <span class=\"built_in\">document</span>.querySelector(<span class=\"string\">\".btnCall\"</span>);</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"function\"><span class=\"keyword\">function</span> <span class=\"title\">saveName</span>(<span class=\"params\">e</span>)</span>{</span><br><span class=\"line\"> <span class=\"keyword\">var</span> str = <span class=\"built_in\">document</span>.querySelector(<span class=\"string\">\".textClass\"</span>).value;</span><br><span class=\"line\"> <span class=\"comment\">// console.log(str);</span></span><br><span class=\"line\"> localStorage.setItem(<span class=\"string\">\"myName\"</span>, str);</span><br><span class=\"line\">}</span><br><span class=\"line\"></span><br><span class=\"line\">btn.addEventListener(<span class=\"string\">\"click\"</span>, saveName, <span class=\"literal\">false</span>);</span><br><span class=\"line\"></span><br><span class=\"line\">call.addEventListener(<span class=\"string\">\"click\"</span>, <span class=\"function\"><span class=\"keyword\">function</span>(<span class=\"params\"></span>)</span>{</span><br><span class=\"line\"> <span class=\"keyword\">var</span> str = localStorage.getItem(<span class=\"string\">\"myName\"</span>);</span><br><span class=\"line\"> alert(<span class=\"string\">\"你的名字叫\"</span> + str);</span><br><span class=\"line\">}, <span class=\"literal\">false</span>);</span><br></pre></td></tr></table></figure><p></p><h2>透過 JSON.parse、JSON.stringify 來編譯資料</h2><p>由於<code>localStorage</code>的特性是只會保存 string 資料，所以在這裡我們需要學習： - 將array 轉成 string → 使用<code>JSON.stringify()</code> - 將string 轉乘 array → <code>JSON.parse()</code></p><p>這是因為在<code>localStorage</code>資料格式只能是字串，所以存入array時要先將資料轉型成字串再存入，否則查詢內容時會看到內容是'[object Object]'的字串，無法進行解析。而提取資料時回傳值也是字串，若需使用操作array的方式去使用提取出來的值，也需要先轉型成array格式。</p><p></p><figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">var</span> country = [</span><br><span class=\"line\"> {<span class=\"attr\">farmer</span>:<span class=\"string\">'卡斯伯'</span>}</span><br><span class=\"line\">];</span><br><span class=\"line\"><span class=\"keyword\">var</span> countryString= <span class=\"built_in\">JSON</span>.stringify(country); <span class=\"comment\">// 將array轉換成string</span></span><br><span class=\"line\"><span class=\"built_in\">console</span>.log(countryString);</span><br><span class=\"line\">localStorage.setItem(<span class=\"string\">'countryItem'</span>,countryString);</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">var</span> getData = localStorage.getItem(<span class=\"string\">'countryItem'</span>);</span><br><span class=\"line\"><span class=\"keyword\">var</span> getDataAry = <span class=\"built_in\">JSON</span>.parse(getData); <span class=\"comment\">// 將提取出的string再轉型成array</span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"built_in\">console</span>.log(getDataAry[<span class=\"number\">0</span>].farmer);</span><br></pre></td></tr></table></figure><p></p><h2>data-* - 透過 dataset 讀取自訂資料</h2><p>在HTML中，有一種標籤叫做<code>data-*</code>(*可以帶入自訂名稱)，可以用來綁定自訂的資料，而這我們可以透過JavaScript的<code>dataset</code>語法來讀取這些自訂的資料，來達到與使用者互動的目的。</p><p></p><figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"comment\">// html</span></span><br><span class=\"line\"><span class=\"comment\">/**</span></span><br><span class=\"line\"><span class=\"comment\"> <ul class=\"list\"></span></span><br><span class=\"line\"><span class=\"comment\"> <li data-num=\"0\" data-dog=\"3\">卡斯伯</li></span></span><br><span class=\"line\"><span class=\"comment\"> </ul></span></span><br><span class=\"line\"><span class=\"comment\">**/</span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">var</span> list = <span class=\"built_in\">document</span>.querySelector(<span class=\"string\">'.list'</span>);</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"comment\">//確認點擊的農夫是誰</span></span><br><span class=\"line\"><span class=\"function\"><span class=\"keyword\">function</span> <span class=\"title\">checkList</span>(<span class=\"params\">e</span>)</span>{</span><br><span class=\"line\"> <span class=\"keyword\">var</span> num = e.target.dataset.num;</span><br><span class=\"line\"> <span class=\"keyword\">var</span> dog = e.target.dataset.dog;</span><br><span class=\"line\"> <span class=\"built_in\">console</span>.log(<span class=\"string\">'農夫標號是'</span>+num);</span><br><span class=\"line\"> <span class=\"built_in\">console</span>.log(<span class=\"string\">'有'</span>+dog+<span class=\"string\">'隻狗'</span>);</span><br><span class=\"line\">}</span><br><span class=\"line\">list.addEventListener(<span class=\"string\">'click'</span>,checkList,<span class=\"literal\">false</span>);</span><br></pre></td></tr></table></figure><p></p><p>在上面的範例中，透過監聽對<code>li</code>的點擊，並使用<code>e.target</code>語法來取得指定元素的內容資訊(回傳內容為物件)，再從回傳的物件中透過<code>dataset</code>語法提取所需要的內容。</p><h3>dataset、array 運用</h3><p>當有一組<code>array</code>資料希望用JavaScrip來動態新增<code><li></li></code>標籤到<code><ul></ul></code>中時，我們也可以用到前面提到的for迴圈組字串的技巧，並搭配<code>data-*</code>標籤來進行互動操作。</p><p>首先，我們在HTML中新增一個空的ul區域</p><p></p><figure class=\"highlight html\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\"><<span class=\"name\">ul</span> <span class=\"attr\">style</span>=<span class=\"string\">\"padding:50px;background:#000;color:#fff\"</span> <span class=\"attr\">class</span>=<span class=\"string\">\"list\"</span>></span><span class=\"tag\"></<span class=\"name\">ul</span>></span></span><br></pre></td></tr></table></figure><p></p><p>接下來透過JavaScript來更新農場資料到HTML，並在新增的<code><li></code>標籤中增加<code>data-num</code>參數，方便接下來可以讀取使用者點擊哪一個<code><li></code>。</p><p></p><figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">var</span> country = [</span><br><span class=\"line\"> {</span><br><span class=\"line\"> farmer:<span class=\"string\">'卡斯伯'</span></span><br><span class=\"line\"> }</span><br><span class=\"line\"> ,{</span><br><span class=\"line\"> farmer:<span class=\"string\">'查理'</span></span><br><span class=\"line\"> }</span><br><span class=\"line\">]</span><br><span class=\"line\"><span class=\"keyword\">var</span> list = <span class=\"built_in\">document</span>.querySelector(<span class=\"string\">'.list'</span>);</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"comment\">//更新農場資料</span></span><br><span class=\"line\"><span class=\"function\"><span class=\"keyword\">function</span> <span class=\"title\">updateList</span>(<span class=\"params\"></span>)</span>{</span><br><span class=\"line\"> <span class=\"keyword\">var</span> str = <span class=\"string\">''</span>;</span><br><span class=\"line\"> <span class=\"keyword\">var</span> len = country.length;</span><br><span class=\"line\"> <span class=\"keyword\">for</span>(<span class=\"keyword\">var</span> i = <span class=\"number\">0</span>;len>i;i++){</span><br><span class=\"line\"> str+=<span class=\"string\">'<li data-num=\"'</span>+i+<span class=\"string\">'\">'</span>+country[i].farmer+<span class=\"string\">'</li>'</span> <span class=\"comment\">// 在<li>標籤中增加data-num參數</span></span><br><span class=\"line\"> }</span><br><span class=\"line\"> list.innerHTML = str;</span><br><span class=\"line\">}</span><br><span class=\"line\">updateList();</span><br></pre></td></tr></table></figure><p></p><p>接下來加入事件監聽，為了避免在每個<code>li</code>都要綁定監聽是件容易造成效能低下，使用了之前提到的透過監聽父元素的技巧，藉由<code>e.target.nodeName</code>來判斷使用者點擊了哪一個<code>li</code>標籤，並做對應的回傳。</p><p></p><figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"comment\">//確認點擊的農夫是誰</span></span><br><span class=\"line\"><span class=\"function\"><span class=\"keyword\">function</span> <span class=\"title\">checkList</span>(<span class=\"params\">e</span>)</span>{</span><br><span class=\"line\"> <span class=\"keyword\">var</span> num = e.target.dataset.num;</span><br><span class=\"line\"> <span class=\"built_in\">console</span>.log(e.target.nodeName);</span><br><span class=\"line\"> <span class=\"keyword\">if</span>(e.target.nodeName !== <span class=\"string\">'LI'</span>){<span class=\"keyword\">return</span>};</span><br><span class=\"line\"> alert(<span class=\"string\">'你選擇的農夫是'</span>+country[num].farmer)</span><br><span class=\"line\">}</span><br><span class=\"line\">list.addEventListener(<span class=\"string\">'click'</span>,checkList,<span class=\"literal\">false</span>);</span><br></pre></td></tr></table></figure><p></p><h3>splice - 刪除 array 資料</h3><p>我們在操作array時，刪除array中的資料會使用<code>splice</code>語法</p><p></p><figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\">[array].splice(num,<span class=\"number\">1</span>); <span class=\"comment\">// 括號中的num是要刪除的資料位置，0代表第一筆；第二個參數是要刪除幾筆資料</span></span><br></pre></td></tr></table></figure><p></p><p>因此，在這裏可以修改前面範例中的事件監聽函數<code>checkList</code>函數如下，來達到點擊刪除元素的效果</p><p></p><figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"function\"><span class=\"keyword\">function</span> <span class=\"title\">checkList</span>(<span class=\"params\">e</span>)</span>{</span><br><span class=\"line\"> <span class=\"keyword\">var</span> num = e.target.dataset.num;</span><br><span class=\"line\"> <span class=\"comment\">// console.log(e.target.nodeName);</span></span><br><span class=\"line\"> <span class=\"keyword\">if</span>(e.target.nodeName !== <span class=\"string\">'LI'</span>){<span class=\"keyword\">return</span>};</span><br><span class=\"line\"> country.splice(num,<span class=\"number\">1</span>); <span class=\"comment\">// 刪除點擊的li</span></span><br><span class=\"line\"> updateList(); <span class=\"comment\">// 再用已經刪除資料後的array重新更新一次li列表</span></span><br><span class=\"line\">}</span><br><span class=\"line\">list.addEventListener(<span class=\"string\">'click'</span>,checkList,<span class=\"literal\">false</span>);</span><br></pre></td></tr></table></figure><p></p><p>要再執行一次<code>updateList()</code> 是因為array內容已被改變，再更新一次資料才能確認資料中的<code>country[num]</code>是正確的，才能夠重複執行<code>點擊 → 刪除</code>的動作</p><!-- rebuild by neat -->","categories":["JavaScript"],"tags":["JavaScript","localStorage"]},{"title":"Git 遠端 Repository 操作","url":"/2020/10/21/Git-%E9%81%A0%E7%AB%AF-Repository-%E6%93%8D%E4%BD%9C/","content":"<!-- build time:Sun May 23 2021 15:10:01 GMT+0800 (GMT+08:00) --><h3>常用環境設定</h3><ul><li>編輯器更換：git config --global core.editor "code --wait"</li><li>Git 縮寫：<ul><li>$ git config --global alias.co checkout $ git config --global alias.br branch $ git config --global alias.st status $ git config --global alias.ci commit (自訂指令的縮寫)</li></ul></li></ul><p><a id=\"more\"></a></p><ul><li>觀看所有 config 的設定：<ul><li>Mac：~/.gitconfig</li><li>Win：C:\\Users$USER</li></ul></li><li><a href=\"https://git-scm.com/book/zh-tw/v2/Git-%E5%9F%BA%E7%A4%8E-%E6%AA%A2%E8%A6%96%E6%8F%90%E4%BA%A4%E7%9A%84%E6%AD%B7%E5%8F%B2%E8%A8%98%E9%8C%84\" target=\"_blank\" rel=\"noopener\">git log 詳細資訊</a></li></ul><h3>Git 與 Github 是什麼？</h3><ul><li>Git 是一個分散式版本控制軟體，可藉由它產生一個<em>儲存庫( git Repository)</em>。</li><li>Github：支援 git 程式碼存取和<em>遠端托管儲存庫</em>的平台服務</li><li>關係像是本地端有一個 index.html，但可以放到 dropbox、Google Drive 進行雲端託管</li></ul><h3>熱門遠端儲存庫(Github VS Bitbucket VS Gitlab)</h3><ul><li><a href=\"https://github.com/\" target=\"_blank\" rel=\"noopener\">GitHub</a>：擁有 GitHub Pages 功能，可擁有私人數據庫，免費方案是 3 人以下</li><li><a href=\"https://bitbucket.org/product/pricing\" target=\"_blank\" rel=\"noopener\">Bitbucket</a>：可擁有私人數據庫，免費方案是五人以下團隊</li><li><a href=\"https://about.gitlab.com/\" target=\"_blank\" rel=\"noopener\">GitLab</a>：自架 Git 伺服器，有提供 web 視覺化管理介面，常用於企業內部開發</li></ul><p>懶人包解釋：</p><ul><li>公司專案的小型團隊可用 Bitbucket</li><li>想要有一個公開對外網站的話，可用 GitHub</li></ul><p>### 遠端儲存庫(Repository)操作</p><ul><li>註冊遠端儲存庫：git remote add origin 遠端儲存庫網址</li><li>更新資料到遠端 master 分支：git push -u origin master</li><li>-u 是指他預設會推到哪個遠端數據庫服務(git可同時連結多個遠端數據庫，但每個遠端數據庫名稱需不同；預設遠端數據庫名稱為origin)</li><li>origin 可以改它的遠端數據庫名稱，例如 <em>git push -u github master</em></li><li>git同時連結多個遠端數據庫的使用情境舉例：<code>正式主機</code>與<code>測試主機</code>;當修改的code推送到測試主機可正常執行後，再推送到正式主機</li></ul><h3>Git 版本細節</h3><ul><li>branch ：分支，預設分支叫做 master</li><li>HEAD：指標</li><li>origin：預設遠端儲存庫名稱</li><li>回頭觀看版本內容：git checkout 編號</li><li>返回最新的版本：git checkout master(分支名稱)</li></ul><p>### 還原技巧</p><p><img src=\"/2020/10/21/Git-遠端-Repository-操作/fileStatusLifecycle.png\" class=\"確認\" title=\"確認 file Status Lifecycle\"></p><h4>新增檔案時，檔案還沒加追蹤時，清空工作目錄</h4><ul><li>顯示此次清除的檔案：git clean -n</li><li>強制清除檔案：git clean -f</li></ul><p><em>檔案已加入追蹤，清空工作目錄</em></p><ul><li>還原工作目錄上已更改的檔案 ：git checkout -- <file></li></ul><p><em>檔案加入到索引，退到工作目錄</em></p><ul><li>加入索引的檔案還原到工作目錄：git reset HEAD</li></ul><h4>版本還原</h4><ul><li>還原前兩個版本：git reset HEAD^^</li><li>還原前兩個版本，所有更新檔案都放棄：git reset HEAD^^ --hard</li><li>觀看詳細歷史紀錄：git reflog</li><li>還原到特定 commit：git reset commit編號 --hard</li><li><a href=\"https://gitbook.tw/chapters/using-git/reset-commit.html\" target=\"_blank\" rel=\"noopener\">git reset 參數介紹</a></li></ul><h3>參考文件</h3><ul><li><a href=\"https://blog.techbridge.cc/2018/01/17/learning-programming-and-coding-with-python-git-and-github-tutorial/\" target=\"_blank\" rel=\"noopener\">Git 與 Github 版本控制基本指令與操作入門教學</a></li></ul><!-- rebuild by neat -->","categories":["git"],"tags":["git"]},{"title":"JavaScript 函數","url":"/2020/03/13/JavaScript-%E5%87%BD%E6%95%B8/","content":"<!-- build time:Sun May 23 2021 15:10:01 GMT+0800 (GMT+08:00) --><h2>Function 用法</h2><p>在JavaScript，可將程式中大量重複的功能寫成function，這樣在開發的過程中只要重覆呼叫function即可，可以讓程式碼更簡潔，也更容易維護。</p><p>例如以下的服務對話情境，這是服務生看到每位客人都需要做一次的動作，在JavaScript中就可以寫成function，接下來只要重覆執行function就可以了。</p><p></p><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">服務生：您好，歡迎光臨，今天咖啡買一送一喔~</span><br><span class=\"line\"> 請問您需要點什麼呢？</span><br></pre></td></tr></table></figure><p></p><p><a id=\"more\"></a></p><h2>function 的寫法</h2><p>function的寫法如下圖，需要先宣告這是一個function，並給予一個名稱，後面用小括號和大括號表示，要執行的程式碼寫在大括號中。function寫完之後並不會執行，需要寫出執行的指令後<code>funtion名稱()</code>，瀏覽器才會執行function。</p><p></p><p>用最前面說的服務對話情境來寫function就會像這樣</p><figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"function\"><span class=\"keyword\">function</span> <span class=\"title\">greet</span>(<span class=\"params\"></span>)</span>{</span><br><span class=\"line\"> <span class=\"built_in\">console</span>.log(<span class=\"string\">\"您好，歡迎光臨，今天咖啡買一送一喔~\"</span>);</span><br><span class=\"line\"> <span class=\"built_in\">console</span>.log(<span class=\"string\">\"請問您需要點什麼呢？\"</span>);</span><br><span class=\"line\">} <span class=\"comment\">// 宣告greet()，並撰寫function功能</span></span><br><span class=\"line\"></span><br><span class=\"line\">greet(); <span class=\"comment\">// 執行greet()</span></span><br></pre></td></tr></table></figure><p></p><p>另外是，當瀏覽器載入了JavaScript檔案後，變數與function就已經記錄到記憶體中，在這時候使用console視窗呼叫function或是變數也是可以的。甚至，也可以在console中撰寫新的function，但要注意的是，在conssole中撰寫的內容，關閉瀏覽器後就不存在。</p><p>function中也可以帶入參數，可以記錄參數後進行運算或處理，如下圖說明的；</p><p></p><p>例如當我們想要寫出一個兩數相加的function</p><p></p><figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"function\"><span class=\"keyword\">function</span> <span class=\"title\">count</span>(<span class=\"params\">num1,num2</span>)</span>{</span><br><span class=\"line\"> <span class=\"keyword\">var</span> total = num1 + num2;</span><br><span class=\"line\"> <span class=\"built_in\">console</span>.log(<span class=\"string\">\"總計是；\"</span> + total + <span class=\"string\">\"元\"</span>);</span><br><span class=\"line\">}</span><br><span class=\"line\"></span><br><span class=\"line\">count(<span class=\"number\">8</span>,<span class=\"number\">7</span>); <span class=\"comment\">//回傳15</span></span><br></pre></td></tr></table></figure><p></p><h2>全域與區域變數</h2><p>再使用function時要注意全域變數與區域變數的差別，在function中宣告一個變數的時候，這個變數會被視為區域變數，並且在function結束後，這個變數就會被清除。相反的，在function外宣告的變數即為全域變數。全域變數在JavaScript檔案載入瀏覽器後，會存在瀏覽器的記憶體中，因此，如果在執行完function後仍希望可以提取該變數的值，可先在function外宣告為全域變數。</p><p>區域變數寫法如下：</p><figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"function\"><span class=\"keyword\">function</span> <span class=\"title\">count</span>(<span class=\"params\">num1,num2</span>)</span>{</span><br><span class=\"line\"> <span class=\"comment\">// 區域變數</span></span><br><span class=\"line\"> <span class=\"keyword\">var</span> total = num1 + num2;</span><br><span class=\"line\"> <span class=\"built_in\">console</span>.log(<span class=\"string\">\"總計是；\"</span> + total + <span class=\"string\">\"元\"</span>);</span><br><span class=\"line\">}</span><br><span class=\"line\"></span><br><span class=\"line\">count(<span class=\"number\">8</span>,<span class=\"number\">7</span>); <span class=\"comment\">//回傳15</span></span><br><span class=\"line\"><span class=\"built_in\">console</span>.log(total); <span class=\"comment\">//此時會回傳Uncaught ReferenceError: total is not defined</span></span><br></pre></td></tr></table></figure><p></p><p>全域變數寫法如下：</p><figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"comment\">//全域變數</span></span><br><span class=\"line\"><span class=\"keyword\">var</span> total;</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"function\"><span class=\"keyword\">function</span> <span class=\"title\">count</span>(<span class=\"params\">num1,num2</span>)</span>{</span><br><span class=\"line\"> total = num1 + num2;</span><br><span class=\"line\"> <span class=\"built_in\">console</span>.log(<span class=\"string\">\"總計是；\"</span> + total + <span class=\"string\">\"元\"</span>);</span><br><span class=\"line\">}</span><br><span class=\"line\"></span><br><span class=\"line\">count(<span class=\"number\">8</span>,<span class=\"number\">7</span>); <span class=\"comment\">//回傳15</span></span><br><span class=\"line\"><span class=\"built_in\">console</span>.log(total); <span class=\"comment\">//此時會回傳15</span></span><br></pre></td></tr></table></figure><p></p><p>而同時宣告區域變數與全域變數<code>total</code>時</p><figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"comment\">//全域變數</span></span><br><span class=\"line\"><span class=\"keyword\">var</span> total;</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"function\"><span class=\"keyword\">function</span> <span class=\"title\">count</span>(<span class=\"params\">num1,num2</span>)</span>{</span><br><span class=\"line\"> <span class=\"comment\">// 區域變數</span></span><br><span class=\"line\"> <span class=\"keyword\">var</span> total = num1 + num2;</span><br><span class=\"line\"> <span class=\"built_in\">console</span>.log(<span class=\"string\">\"總計是；\"</span> + total + <span class=\"string\">\"元\"</span>);</span><br><span class=\"line\">}</span><br><span class=\"line\"></span><br><span class=\"line\">count(<span class=\"number\">8</span>,<span class=\"number\">7</span>); <span class=\"comment\">//回傳15</span></span><br><span class=\"line\"><span class=\"built_in\">console</span>.log(total); <span class=\"comment\">//此時會回傳空值undefined</span></span><br></pre></td></tr></table></figure><p></p><h2>Hoisting、var的觀念</h2><p>function在JavaScript中是Hoisting的方式，不論function寫在JavaScript檔案中的哪個位置，都會優先被執行，因此呼叫function的指令寫在function內容之前也是可以執行的。但var變數則是依序執行的，在宣告變數前呼叫變數會獲得<code>undefined</code>的結果</p><p></p><figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"built_in\">console</span>.log(a); <span class=\"comment\">//此時會回傳undefined</span></span><br><span class=\"line\"><span class=\"keyword\">var</span> a = <span class=\"number\">5</span>;</span><br><span class=\"line\"><span class=\"built_in\">console</span>.log(a); <span class=\"comment\">//此時會回傳5</span></span><br><span class=\"line\"></span><br><span class=\"line\">greet(); <span class=\"comment\">//此時會回傳\"Hello!\"</span></span><br><span class=\"line\"><span class=\"function\"><span class=\"keyword\">function</span> <span class=\"title\">greet</span>(<span class=\"params\"></span>)</span>{</span><br><span class=\"line\"> <span class=\"built_in\">console</span>.log(<span class=\"string\">\"Hello!\"</span>);</span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure><p></p><p>但雖然因為Hoisting的關係，將呼叫function的指令寫在function之前也可執行，但為了程式碼的可讀性與後續維護容易，還是會建議養成依序撰寫的習慣，未來在偵錯時只要找從有問題的行數往上尋找即可。</p><h2>實作點餐計算機練習</h2><p>實作一個點餐計算機練習，先撰寫以下html</p><p></p><figure class=\"highlight html\"><table><tr><td class=\"code\"><pre><span class=\"line\"></span><br><span class=\"line\"><span class=\"tag\"><<span class=\"name\">div</span> <span class=\"attr\">class</span>=<span class=\"string\">\"wrap\"</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">div</span> <span class=\"attr\">class</span>=<span class=\"string\">\"wrap-inner\"</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">h1</span>></span>六角西餐廳 - 顧客點餐篇<span class=\"tag\"></<span class=\"name\">h1</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">p</span>></span>服務生：Hello，請問您想要點什麼？<span class=\"tag\"></<span class=\"name\">p</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">p</span>></span> 顧客：給我 <span class=\"tag\"><<span class=\"name\">input</span> <span class=\"attr\">type</span>=<span class=\"string\">\"text\"</span> <span class=\"attr\">id</span>=<span class=\"string\">\"hamNumId\"</span> <span class=\"attr\">value</span>=<span class=\"string\">\"9\"</span>></span> 個漢堡，再 <span class=\"tag\"><<span class=\"name\">input</span> <span class=\"attr\">type</span>=<span class=\"string\">\"text\"</span> <span class=\"attr\">id</span>=<span class=\"string\">\"cokeNumId\"</span>></span> 杯可樂吧！<span class=\"tag\"></<span class=\"name\">p</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">p</span>></span>服務生：<span class=\"tag\"><<span class=\"name\">input</span> <span class=\"attr\">type</span>=<span class=\"string\">\"button\"</span> <span class=\"attr\">Id</span>=<span class=\"string\">\"countId\"</span> <span class=\"attr\">value</span>=<span class=\"string\">\"計算中\"</span>></span>，好的，總計是<span class=\"tag\"><<span class=\"name\">em</span> <span class=\"attr\">id</span>=<span class=\"string\">\"totalId\"</span> <span class=\"attr\">class</span>=<span class=\"string\">\"tag\"</span>></span><span class=\"tag\"></<span class=\"name\">em</span>></span>元<span class=\"tag\"></<span class=\"name\">p</span>></span></span><br><span class=\"line\"> <span class=\"tag\"></<span class=\"name\">div</span>></span></span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">div</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">script</span> <span class=\"attr\">src</span>=<span class=\"string\">\"js/all.js\"</span>></span><span class=\"tag\"></<span class=\"name\">script</span>></span></span><br></pre></td></tr></table></figure><p></p><h3>typeof()功能</h3><p>當不確定擷取到的值的型別時，可以使用typeof()來查詢，確認今天所獲得的值是number、string、object、function等等。</p><h3>parseInt()</h3><p>當發現擷取到的值雖然是數字但type是<code>string</code>時，可以使用parseInt()來將<code>string</code>轉換為<code>number</code>，這樣就可以進行後續的計算。</p><p>接下來把重點放到all.js檔案中，由於在html中擷取到的<code>hamNumId</code>和<code>cokeNumId</code>在 透過typeof()查詢後發現是<code>string</code>，在JavaScript中<code>string</code>的加法和數字的加法不同("10" + "5" = "105")，因此們可以透過parseInt()的功能加得到的<code>string</code>轉換成<code>number</code>，再來進行計算(10 + 5 = 15)，因此寫成下列的寫法。</p><p></p><figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"built_in\">document</span>.getElementById(<span class=\"string\">'countId'</span>).onclick = <span class=\"function\"><span class=\"keyword\">function</span>(<span class=\"params\"></span>)</span>{</span><br><span class=\"line\"> <span class=\"keyword\">var</span> hamNum = <span class=\"built_in\">parseInt</span>(<span class=\"built_in\">document</span>.getElementById(<span class=\"string\">'hamNumId'</span>).value);</span><br><span class=\"line\"> <span class=\"keyword\">var</span> cokeNum = <span class=\"built_in\">parseInt</span>(<span class=\"built_in\">document</span>.getElementById(<span class=\"string\">'cokeNumId'</span>).value);</span><br><span class=\"line\"> <span class=\"keyword\">var</span> total = hamNum * <span class=\"number\">30</span> + cokeNum * <span class=\"number\">10</span>;</span><br><span class=\"line\"> <span class=\"built_in\">document</span>.getElementById(<span class=\"string\">'totalId'</span>).textContent = total;</span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure><p></p><p><code>小知識：</code>strig<code>類別的數字雖然無法進行加法("10" + "5" = "105")，但卻可以進行乘法("10" * "5" = "50")</code></p><h2>function搭配return的寫法</h2><p>當我們使用function來做複雜的計算時，也可以搭配return來把需要的做回傳，這樣後續呼叫function時可以省略過程的計算，讓程式碼更為簡潔。(在前面的練習使用<code>console.log()</code>是為了要在開發的過程中察看結果是否正確，而實際上的開發時並不需要將這些值都顯在在console視窗中。)</p><p></p><figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"function\"><span class=\"keyword\">function</span> <span class=\"title\">getHamPrice</span>(<span class=\"params\">num</span>)</span>{</span><br><span class=\"line\"> <span class=\"keyword\">var</span> hamPrice = <span class=\"number\">50</span>;</span><br><span class=\"line\"> <span class=\"keyword\">var</span> total = hamPrice * num;</span><br><span class=\"line\"> <span class=\"keyword\">return</span> total;</span><br><span class=\"line\">}</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">var</span> Lisa = getHamPrice(<span class=\"number\">30</span>);</span><br><span class=\"line\"><span class=\"built_in\">console</span>.log(Lisa);</span><br></pre></td></tr></table></figure><p></p><p>而透過return也可以在較複雜的情況下，以function間的呼叫來解決。</p><p></p><figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"function\"><span class=\"keyword\">function</span> <span class=\"title\">count</span>(<span class=\"params\">price</span>)</span>{</span><br><span class=\"line\"> <span class=\"comment\">// (2)在count在count函數中，因為全館的衣服都打8折所以先乘上0.8</span></span><br><span class=\"line\"> <span class=\"comment\">// (3)但是因為要加收營業稅，所以把乘上0.8的數字在丟入addTax函數中</span></span><br><span class=\"line\"> <span class=\"keyword\">return</span> addTax(price * <span class=\"number\">0.8</span>);</span><br><span class=\"line\"> <span class=\"comment\">// (5)等到addTax回傳結果後再回傳到(1)</span></span><br><span class=\"line\">}</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"function\"><span class=\"keyword\">function</span> <span class=\"title\">addTax</span>(<span class=\"params\">price</span>)</span>{</span><br><span class=\"line\"> <span class=\"comment\">// (4)在addTax中因為要加收10%營業稅所以*1.1，並回傳結果</span></span><br><span class=\"line\"> <span class=\"keyword\">return</span> price * <span class=\"number\">1.1</span>;</span><br><span class=\"line\">}</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"comment\">//(1)我們想要計算一件衣服的價格所以呼叫count函數而衣服單價是$500</span></span><br><span class=\"line\"><span class=\"built_in\">console</span>.log(count(<span class=\"number\">500</span>));</span><br></pre></td></tr></table></figure><p></p><!-- rebuild by neat -->","categories":["JavaScript"],"tags":["JavaScript","Function"]},{"title":" JavaScript 入門","url":"/2020/03/08/JavaScript-%E5%85%A5%E9%96%80/","content":"<!-- build time:Sun May 23 2021 15:10:01 GMT+0800 (GMT+08:00) --><h2>JavaScript 概念</h2><p>JavaScript和HTML、CSS之間的關係是什麼呢？簡單來說就是</p><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">HTML → 內容</span><br><span class=\"line\">CSS → 樣式</span><br><span class=\"line\">JavaScript → 行為</span><br></pre></td></tr></table></figure><p></p><p>JavaScript的撰寫均為半型文字。</p><p><a id=\"more\"></a></p><h2>ID的用法與好處</h2><p>在撰寫網頁程式碼時，ID最好是唯一。ID可以做為快速連結特定段落的"錨點"，例如在下列程式碼中，點擊<code>標題1</code>即可快速連結到標題1內容區塊</p><p></p><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\"><a href="#title1">標題1</a></span><br></pre></td></tr></table></figure><p></p><h2>textContent</h2><p>在JavaScript中可以藉由以下的程式碼來透過JavaScript來修改HTML中的內容，textContent是JavaScript內建的函式，還有其他相關的Get方式與修改HTML內容的方式，未來會再詳細的探究。</p><p></p><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">document.getElementById('title1').textContent = '修改後的標題';</span><br></pre></td></tr></table></figure><p></p><h2>解譯器(interpreter)</h2><p>瀏覽器透過解析網頁程式碼內容後，如下圖，瀏覽器先將網頁視為一個<code>Document</code>，在依序解析HTML中的head與Body內各自有哪些元素、屬性，再依序渲染出網頁。</p><p><img src=\"/2020/03/08/JavaScript-入門/HTML_DOM.jpg\" title=\"The HTML DOM Tree of Objects 資料來源： W3C School\"></p><p>因此，再程式碼中匯入JavaScript的位置很重要，如果這一個JavaScript檔案會影響到HTML與CSS就需要放置到<code></body></code>之前，因為瀏覽器解析網頁程式碼是依序解析，若先載入JavaScript檔案，則後續的HTML內容將不受該JavaScript檔案影響。</p><p>更多關於DOM的介紹可參考： <a href=\"https://www.w3schools.com/js/js_htmldom.asp\" target=\"_blank\" rel=\"noopener\">W3C School JavaScript HTML DOM</a></p><!-- rebuild by neat -->","categories":["JavaScript"],"tags":["JavaScript"]},{"title":"JavaScript 控制判斷(運算子、if、switch)","url":"/2020/03/14/JavaScript-%E6%8E%A7%E5%88%B6%E5%88%A4%E6%96%B7-%E9%81%8B%E7%AE%97%E5%AD%90%E3%80%81if%E3%80%81switch/","content":"<!-- build time:Sun May 23 2021 15:10:01 GMT+0800 (GMT+08:00) --><h2>為什麼需要控制判斷？</h2><p>我們在進行行為的時候，背後都會有動機或是原因，例如吃東西是因為肚子會餓，所以我們會透過感受肚子餓的程度來決定要不要吃東西，以及要吃多少分量的東西。而肚子餓的程度我們可以視為條件，吃東西我們可以看做是要執行的動作。</p><p><img src=\"/2020/03/14/JavaScript-控制判斷-運算子、if、switch/條件與動作間的關係.jpg\" title=\"條件與動作間的關係\"></p><p><a id=\"more\"></a></p><h2>比較運算子 (==、!==)</h2><p>比較運算子等於<code>==</code>、不等於<code>!==</code>用來比較字串或數字是否相等，透過比較過後JavaScript會回傳比較運算後的布林值(true 或 false)。</p><p></p><figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"number\">5</span> == <span class=\"number\">5</span>; <span class=\"comment\">// true</span></span><br><span class=\"line\"><span class=\"number\">8</span> == <span class=\"number\">5</span>; <span class=\"comment\">// false</span></span><br><span class=\"line\"><span class=\"string\">'hello'</span> == <span class=\"string\">'hello'</span>; <span class=\"comment\">// true</span></span><br><span class=\"line\"><span class=\"string\">'hello'</span> == <span class=\"string\">'hello 1'</span>; <span class=\"comment\">// false</span></span><br><span class=\"line\"><span class=\"number\">8</span> !== <span class=\"number\">5</span>; <span class=\"comment\">// true</span></span><br><span class=\"line\"><span class=\"string\">'hello'</span> !== <span class=\"string\">'hello'</span>; <span class=\"comment\">// false</span></span><br><span class=\"line\"><span class=\"string\">'hello'</span> !== <span class=\"string\">'hello 1'</span>; <span class=\"comment\">// true</span></span><br></pre></td></tr></table></figure><p></p><h2>比較運算子嚴謹模式(===)</h2><p>在JavaScript的比較運算子是雙等號時(==)，JavaScript會將比較的元素做轉型，當數字和字串做比較時，會將數字字串先轉換為數字，例如以下的例子</p><p></p><figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"number\">1</span> == <span class=\"number\">1</span>; <span class=\"comment\">// true</span></span><br><span class=\"line\"><span class=\"number\">1</span> == <span class=\"string\">'1'</span> <span class=\"comment\">// true</span></span><br></pre></td></tr></table></figure><p></p><p>而當使用嚴謹模式的比較運算子(===)時，JavaScript會先比較兩個元素的型別是否相同，再判斷內容是否相同</p><p></p><figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"number\">1</span> === <span class=\"string\">'1'</span>; <span class=\"comment\">// false</span></span><br><span class=\"line\"><span class=\"string\">'1'</span> === <span class=\"string\">'1'</span>; <span class=\"comment\">// true</span></span><br></pre></td></tr></table></figure><p></p><p>並沒有規定一定要採用哪一種比較運算子，可以視情況來決定是否需要判斷型別，如果需要的話就採用嚴謹模式<code>===</code>。但要特別留意的是雙等號<code>==</code>有時候在轉型時會有一些情況會發生</p><p></p><figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"literal\">true</span> == <span class=\"number\">1</span>; <span class=\"comment\">// true，因為在程式的世界中true會被當成1</span></span><br><span class=\"line\"><span class=\"literal\">true</span> === <span class=\"number\">1</span>; <span class=\"comment\">// false</span></span><br><span class=\"line\"><span class=\"literal\">false</span> == <span class=\"number\">0</span>; <span class=\"comment\">// true，因為在程式的世界中false會被當成0</span></span><br><span class=\"line\"><span class=\"literal\">false</span> === <span class=\"number\">0</span>; <span class=\"comment\">// false</span></span><br></pre></td></tr></table></figure><p></p><h2>比較運算子(>、<、>=、<=)</h2><p>除了判斷是否相等之外，JavaScript還可以判斷大於或是小於，例如以下的內容</p><p></p><figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"number\">1250</span> > <span class=\"number\">1000</span>; <span class=\"comment\">// true</span></span><br><span class=\"line\"><span class=\"number\">80</span> >= <span class=\"number\">80</span>; <span class=\"comment\">// true</span></span><br><span class=\"line\"><span class=\"number\">80</span> > <span class=\"number\">80</span>; <span class=\"comment\">// false</span></span><br><span class=\"line\"><span class=\"number\">60</span> < <span class=\"number\">70</span>; <span class=\"comment\">// true</span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">var</span> myCost = <span class=\"number\">1100</span>;</span><br><span class=\"line\">myCost > <span class=\"number\">1000</span>; <span class=\"comment\">//true</span></span><br></pre></td></tr></table></figure><p></p><h2>邏輯運算子(&& 、||、!)</h2><p>在JavaScript中，有以下3種邏輯判斷子</p><table><thead><tr><th style=\"text-align:center\">邏輯運算子</th><th style=\"text-align:center\">判斷</th><th style=\"text-align:center\">條件</th></tr></thead><tbody><tr><td style=\"text-align:center\"><code>&&</code></td><td style=\"text-align:center\">AND</td><td style=\"text-align:center\">所有條件都要滿足</td></tr><tr><td style=\"text-align:center\"><code>||</code></td><td style=\"text-align:center\">OR</td><td style=\"text-align:center\">只要其中一個條件滿足</td></tr><tr><td style=\"text-align:center\"><code>!</code></td><td style=\"text-align:center\">NOT</td><td style=\"text-align:center\">反轉判斷結果(例如：<code>!(2>3)</code>會回傳<code>true</code>)</td></tr></tbody></table><p>舉例如下</p><p></p><figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">var</span> myBill = <span class=\"number\">1250</span>;</span><br><span class=\"line\"><span class=\"keyword\">var</span> VIP = <span class=\"literal\">false</span>;</span><br><span class=\"line\"><span class=\"keyword\">var</span> andCheck = myBill > <span class=\"number\">1000</span> && VIP == <span class=\"literal\">true</span>; <span class=\"comment\">// AND 判斷，得到false</span></span><br><span class=\"line\"><span class=\"keyword\">var</span> orCheck = myBill > <span class=\"number\">1000</span> || VIP == <span class=\"literal\">true</span>; <span class=\"comment\">// or 判斷，得到true</span></span><br></pre></td></tr></table></figure><p></p><h2>if</h2><p>if判斷式是讓JavaScript來判斷是否要執行接下來的程式碼，其中分為判斷句與陳述句，在判斷句中的條件是用來決定是否要執行陳述句的內容。如以下兩張圖來解釋 <img src=\"/2020/03/14/JavaScript-控制判斷-運算子、if、switch/if判斷式.jpg\" title=\"if判斷式\"></p><p><img src=\"/2020/03/14/JavaScript-控制判斷-運算子、if、switch/if判斷式圖解.jpg\" title=\"if判斷式圖解\"></p><p>轉換成JavaScript程式碼如下：</p><p></p><figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">var</span> hungry = <span class=\"string\">'飽足'</span>;</span><br><span class=\"line\"><span class=\"built_in\">console</span>.log(hungry == <span class=\"string\">'飢餓'</span>);</span><br><span class=\"line\"><span class=\"keyword\">if</span>(hungry == <span class=\"string\">'飢餓'</span>){</span><br><span class=\"line\"> <span class=\"built_in\">console</span>.log(<span class=\"string\">\"我現在好餓\"</span>);</span><br><span class=\"line\">}<span class=\"keyword\">else</span>{</span><br><span class=\"line\"> <span class=\"built_in\">console</span>.log(<span class=\"string\">\"我現在不想吃東西\"</span>);</span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure><p></p><p>除了if判斷式以外的情況，可以用<code>else</code>來加入不符合判斷式時要執行的陳述句。</p><p><code>※有個小技巧是如果開發過程發現結果不如預期時，可以使用console.log()來先檢查判斷式回傳的值是否正確</code></p><h2>else if</h2><p>else if是當出現不同條件的判斷句時，要進行不同陳述句的處理，我們一樣用之前肚子餓要吃東西的狀況來舉例，可以看一下以下的圖解</p><p><img src=\"/2020/03/14/JavaScript-控制判斷-運算子、if、switch/else_if判斷式.jpg\" title=\"else if判斷式\"></p><p><img src=\"/2020/03/14/JavaScript-控制判斷-運算子、if、switch/else_if判斷式圖解.jpg\" title=\"else if判斷式圖解\"></p><p>我們把上面圖解的情況寫成程式碼</p><p></p><figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">var</span> hungry = <span class=\"number\">5</span>; <span class=\"comment\">// 飢餓程度1~10</span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"function\"><span class=\"keyword\">function</span> <span class=\"title\">eat</span>(<span class=\"params\">food</span>)</span>{</span><br><span class=\"line\"> <span class=\"built_in\">console</span>.log(<span class=\"string\">\"我現在要吃\"</span> + food);</span><br><span class=\"line\">}</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">if</span>(hungry <= <span class=\"number\">3</span>){</span><br><span class=\"line\"> eat(<span class=\"string\">'披薩'</span>);</span><br><span class=\"line\">}<span class=\"keyword\">else</span> <span class=\"keyword\">if</span>(hungry <= <span class=\"number\">5</span> && hungry > <span class=\"number\">3</span>){</span><br><span class=\"line\"> eat(<span class=\"string\">'沙拉'</span>);</span><br><span class=\"line\">}<span class=\"keyword\">else</span> <span class=\"keyword\">if</span>(hungry == <span class=\"number\">6</span>){</span><br><span class=\"line\"> eat(<span class=\"string\">'餅乾'</span>);</span><br><span class=\"line\">}<span class=\"keyword\">else</span>{</span><br><span class=\"line\"> <span class=\"built_in\">console</span>.log(<span class=\"string\">\"我現在很飽，不想吃東西\"</span>);</span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure><p></p><p>在判斷式中可以加入多個 <code>else if</code>判斷，但須注意條件的區間需要互斥，可以善用<code><=</code>和<code>></code>來轉寫else if的條件區間。若前面的<code>if</code>和<code>else if</code>條件均不符合時，程式就會跑最後的<code>else</code>中的陳述句。</p><h2>switch</h2><p><code>switch</code>和<code>if else</code>的觀念有些相似，差別是在switch不論在條件是否滿足都一定會執行參數去做case的比對；而switch適合用在已知所有可能的狀態的情境，請不同於if else可用數值區間來進行條件判斷，switch是合做狀態的判斷。多條件的情況下，<code>if else</code>對於瀏覽器的效能會相對比較差。<code>switch</code>的寫法圖解如下：</p><p><img src=\"/2020/03/14/JavaScript-控制判斷-運算子、if、switch/switch判斷式.jpg\" title=\"switch判斷式\"></p><p>程式碼範例</p><figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">var</span> light = <span class=\"string\">'blue'</span>;</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"function\"><span class=\"keyword\">function</span> <span class=\"title\">lightFun</span>(<span class=\"params\">str</span>)</span>{</span><br><span class=\"line\"> <span class=\"built_in\">console</span>.log(<span class=\"string\">'目前是'</span>+str+<span class=\"string\">'警戒'</span>);</span><br><span class=\"line\">}</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">switch</span>(light){</span><br><span class=\"line\"></span><br><span class=\"line\"> <span class=\"keyword\">case</span> <span class=\"string\">'red'</span>:</span><br><span class=\"line\"> alert(<span class=\"string\">\"紅色警戒\"</span>);</span><br><span class=\"line\"> <span class=\"keyword\">break</span>; <span class=\"comment\">//每個case的最後一定要有\"break\"</span></span><br><span class=\"line\"></span><br><span class=\"line\"> <span class=\"keyword\">case</span> <span class=\"string\">'blue'</span>:</span><br><span class=\"line\"> lightFun(light);</span><br><span class=\"line\"> <span class=\"keyword\">break</span>;</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"comment\">// 類似\"else\"的功能，但因為switch一定會將參數和所有case做比對，因此default也可以放在最前面</span></span><br><span class=\"line\"> <span class=\"keyword\">default</span>:</span><br><span class=\"line\"> alert(<span class=\"string\">'沒有任何資料'</span>);</span><br><span class=\"line\"> <span class=\"keyword\">break</span>;</span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure><p></p><!-- rebuild by neat -->","categories":["JavaScript"],"tags":["JavaScript","運算子","邏輯判斷","switch"]},{"title":"JavaScript 開發邏輯思維","url":"/2020/03/29/JavaScript-%E9%96%8B%E7%99%BC%E9%82%8F%E8%BC%AF%E6%80%9D%E7%B6%AD/","content":"<!-- build time:Sun May 23 2021 15:10:01 GMT+0800 (GMT+08:00) --><h2>JS 初學者起手式：資料(model) > 事件(event) > 介面(View)</h2><p>在開始寫程式之前，先用三個步驟來規劃JavaScript的網頁應用程式： 1. model：先處理好資料的新增、刪除、修改；或是資料如何定期更新 2. event：使用者行為觸發程式 3. view: 將使用者行為觸發程式與介面結合</p><p><a id=\"more\"></a></p><h3>資料</h3><p>在資料規劃的階段，可先用以下的方法來將要處理的資料做出明確的定義： 1. 用<em>陣列</em>與<em>物件</em>規劃你的資料 2. JS 記憶體儲存 (變數) 3. LocalStorage</p><h3>事件(event)</h3><p>將要處理的資料定義明確，就可以規劃這些資料要如何進行處理，在JavaScript應用程式中需要有那些使用者行為觸發事件，一般都用 functioin 函式來規劃： 1. 更新 model 2. 更新 view</p><p>在網頁應用程式中，常見的使用者行為有： 1. 網頁預設載入 (init) - 在使用者進行觸發事件之前，預先載入的資料 2. 使用者行為 - 滑鼠滑入 - 點擊</p><h3>介面(View)</h3><p>常用的界面更新方法： 1. innerHTML 2. creatElement 3. appendChild</p><p><strong>在撰寫函式時，要先釐清函式中要處理三個步驟的哪幾個部分，才能更清楚的規劃JavaScript應用程式。</strong></p><p>不論使用什麼框架，在規劃上都不脫這三個步驟，在清楚定義這三個步驟個需要哪些功能後，在撰寫程式碼時可以更清楚。在撰寫程式碼卡關時，先釐清卡關是卡在哪個部分，才能問清楚的問題或是查詢資料。</p><p>在觀看其他人的程式碼時，也可以先判斷個個函式的內容是為了處理這三個步驟的哪幾個？才能更容易看動程式碼為什麼要這麼寫。</p><!-- rebuild by neat -->","categories":["JavaScript"],"tags":["JavaScript","開發邏輯思維"]},{"title":"Javascript AJAX","url":"/2021/05/22/Javascript-AJAX/","content":"<!-- build time:Sun May 23 2021 15:10:01 GMT+0800 (GMT+08:00) --><h2>什麼是AJAX</h2><p>AJAX是一種撰寫JavaScript的技巧，可以在不更新網頁或重新載入的情況下，及時從後端伺服器取得資料的方法。常見的情境有： - 在註冊帳號的頁面檢查與判斷使用者輸入資料是否與資料庫中已存在的使用者重複 - 電商網站的消費者將商品加入購物車時，即時與資料庫確認商品庫存是否足夠等等 - 在google搜尋中輸入關鍵字時，及時跳出來的搜尋建議</p><p><a id=\"more\"></a></p><h2>XMLHttpRequest</h2><p>可以用以下語法來寫XMLHttpRequest</p><p></p><figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">var</span> xhr = <span class=\"keyword\">new</span> XMLHttpRequest();</span><br></pre></td></tr></table></figure><p></p><p>再到瀏覽器中開啟開發者模式，在console視窗打出<code>xhr</code>就可以看到XMLHttpRequest這個function擷取的相關資料。</p><p><img src=\"/2021/05/22/Javascript-AJAX/XMLHttpRequest.jpg\" title=\"console中看到的XMLHttpRequest\"></p><p>這裡我們先將注意力放在<code>readyState</code>狀態上，其狀態代碼從0-4份別代表的意義如下 - 0 - 你已經產生了一個XMLHttpRequest，但是還沒有連結要撈取的資料 - 1 - 你觸發了open()，但還沒有把資料傳送到伺服器 - 2 - 偵測到你有用send() - 3 - loading... - 4 - 你撈到資料了，已經完全接收</p><p></p><figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"comment\">// open()的三個參數：格式、要讀取的方法、同步或非同步</span></span><br><span class=\"line\"><span class=\"comment\">// 格式：get(讀取資料)、post(傳送資料到伺服器)</span></span><br><span class=\"line\">xhr.open(<span class=\"string\">'get'</span>,<span class=\"string\">'https://hexschool.github.io/ajaxHomework/data.json'</span>,<span class=\"literal\">true</span>); <span class=\"comment\">// readyState：1</span></span><br><span class=\"line\"></span><br><span class=\"line\">xhr.send(<span class=\"literal\">null</span>); <span class=\"comment\">// 這裡並沒有要寫入資料到伺服器，所以只是傳送空值(null) readyState：4</span></span><br></pre></td></tr></table></figure><p></p><p>由於在這裡我們使用的資料量相當的少，所以在send()之後，<code>readyState</code>狀態從2到4的時間將當的短，所以在console查看時，會覺得<code>readyState</code>狀態直接從1跳到4了。</p><h3>AJAX同步觀念</h3><p>前面在open()的三個參數中，第三個參數<code>同步或非同步</code>又是什麼呢？</p><pre><code>- true 非同步，不等待資料回傳，就直接讓程式碼繼續往下執行\n- false 同步，它會等資料傳回來，接收到資料回傳後才讓程式碼繼續往下執行\n</code></pre><p>由於後端資料庫的資料量可能會相當龐大，因此一般在撰寫AJAX時，較常會採用非同步的方式撰寫。</p><p>但是採用非同步的時候，會遇到一個問題，因為在資料尚未回傳程式碼就繼續往下執行了，那我們要如何取得後端回傳的資料呢？ 這個時候可以採用XMLHttpRequest()中<code>.onload</code>這個屬性，因為只有當<code>readyState</code>狀態是4的時候，也就是確認資料有回傳了<code>onload</code>才不會是<code>null</code>，當<code>onload</code>不為<code>null</code>時，我們就可以執行function()來取得回傳的資料。 因此我們可以用下面的範例的方法來取的前面範例中回傳的遠端json檔案資料</p><p></p><figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\">xhr.onload = <span class=\"function\"><span class=\"keyword\">function</span>(<span class=\"params\"></span>)</span>{</span><br><span class=\"line\"> <span class=\"built_in\">console</span>.log(xhr.responseText);</span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure><p></p><p>簡單來說，AJAX是用以下的四個步驟來達到再不更新網頁的前提下，與後端伺服器或遠端伺服器的互動 1. 建立一個XMLHttpRequest() 2. 傳送資料到對方伺服器 3. 回傳資料到自己的瀏覽器 4. 拿到資料後再決定要如何透過程式碼處理收到的資料</p><p>## HTTP狀態碼 在瀏覽器的開發者模式中，在Nework頁面可以看到網頁、圖片或是檔案等等的資訊，其中有一個就是<code>status</code>狀態碼，而不同的<code>status</code>狀態碼又代表什麼呢？常見的狀態碼有： - 200 ：資料有正確回傳， 有撈到資料 - 404 ：資料讀取錯誤，沒有撈到資料</p><p>而在XMLHttpRequest()中，我們也可以看到有<code>status</code>屬性，因此可以藉由<code>status</code>的值來判斷撈到的資料是否正確。在這裡可以在<code>responseText</code>獲得的資料是JSON格式的字串，因此就可以用<code>JSON.parse</code>的方法來將字串轉換為物件，來讀取並顯示在網頁中。</p><p></p><figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\">xhr.onload = <span class=\"function\"><span class=\"keyword\">function</span>(<span class=\"params\"></span>)</span>{</span><br><span class=\"line\"> <span class=\"built_in\">console</span>.log(xhr.responseText);</span><br><span class=\"line\"></span><br><span class=\"line\"> <span class=\"keyword\">if</span>(xhr.status == <span class=\"number\">200</span>){</span><br><span class=\"line\"> <span class=\"keyword\">var</span> str = <span class=\"built_in\">JSON</span>.parse(xhr.responseText);</span><br><span class=\"line\"> <span class=\"built_in\">document</span>.querySelector(<span class=\"string\">'.message'</span>).textContent = str[<span class=\"number\">0</span>].name;</span><br><span class=\"line\"> } <span class=\"keyword\">else</span> {</span><br><span class=\"line\"> <span class=\"built_in\">console</span>.log(<span class=\"string\">'資料錯誤!!'</span>);</span><br><span class=\"line\"> }</span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure><p></p><p>還有更多關於HTTP狀態碼的說明，可以參閱<a href=\"https://blog.miniasp.com/post/2009/01/16/Web-developer-should-know-about-HTTP-Status-Code\" target=\"_blank\" rel=\"noopener\">網頁開發人員應了解的 HTTP 狀態碼</a>。</p><h2>Cross-Origin Resource Sharing (CORS)？</h2><p>在我們使用XMLHttpRequest()方法時，還有一件重要的事情是我們希望撈取的資料，對方有沒有開啟跨網域的功能，也就是所謂的Cross-Origin Resource Sharing (CORS)，如果對方沒有開啟CORS，那就無法使用XMLHttpRequest()方法區發一個請求給對方，然後將資料撈回來。</p><p>想知道網站是否有開啟COR可以到<a href=\"http://www.test-cors.org/\" target=\"_blank\" rel=\"noopener\">test-cors.org</a>，把網址丟到裡面做測試，若<code>status</code>是200就可以使用XMLHttpRequest()方法獲取資料；若<code>status</code>是0，就代表該網站無法以XMLHttpRequest()方法獲取資料。</p><h2>AJAX POST 寫法</h2><p>在HTTP網頁中，在表單中輸入內容送出後，表單的內容會帶入到網址後方有一個<code>?</code>後面接參數，多個參數時會以<code>&</code>作為間隔。 而在AJAX的POST的寫法中，和<code>get</code>相同，再新增了XMLHttpRequest()方法後，<code>open(格式，要讀取的網址，同步或非同步)</code>，接下來就有點不一樣了，這裡需要一個setRequestHeader()，來讓遠端伺服器知道我們將要傳送什麼格式的資料過去，再來則是傳送的內容，也就是表單送出後網址<code>?</code>後方所帶的參數字串，或是API中所要求的字串格式。</p><p></p><figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">var</span> xhr = <span class=\"keyword\">new</span> XMLHttpRequest();</span><br><span class=\"line\">xhr.open(<span class=\"string\">'post'</span>,<span class=\"string\">'https://hexschool-tutorial.herokuapp.com/api/signup'</span>,<span class=\"literal\">true</span>);</span><br><span class=\"line\">xhr.setRequestHeader(<span class=\"string\">\"Content-type\"</span>,<span class=\"string\">\"application/x-www-form-urlencoded\"</span>); <span class=\"comment\">// 'application/x-www-form-urlencoded'是傳統HTML表單的格式</span></span><br><span class=\"line\">xhr.send(<span class=\"string\">'[email protected]&password=12345678'</span>);</span><br></pre></td></tr></table></figure><p></p><h3>從Chrome 開發人員工具檢視AJAX POST</h3><p>從Chrome開發人員工具中，在Network分頁中可以查看到AJAX POST的詳細資料，以及收到的回傳訊息。 <img src=\"/2021/05/22/Javascript-AJAX/chrome_dev_AJAX_post.jpg\" title=\"從 chrome 開發人員工具檢視 AJAX post\"></p><p>當然，我們說到了要傳回資料到伺服器需要知道對方需要的是什麼格式的資料，我們前面看到了傳統HTTP表單回傳的資料，接下來我們來看一下如果要回傳JSON格式到伺服器又該如何撰寫呢？要回傳JSON格式的話，setRequestHeader()的格式是<code>application/json</code>，另外要注意的是在傳送前要記得將物件<code>JSON.stringify()</code>轉換為JSON格式的字串，再做send()。</p><p></p><figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">var</span> account = {</span><br><span class=\"line\">\temail: <span class=\"string\">'[email protected]'</span>,</span><br><span class=\"line\">\tpassword:<span class=\"string\">'1234'</span></span><br><span class=\"line\">}</span><br><span class=\"line\"><span class=\"keyword\">var</span> xhr = <span class=\"keyword\">new</span> XMLHttpRequest();</span><br><span class=\"line\">xhr.open(<span class=\"string\">'post'</span>,<span class=\"string\">'https://hexschool-tutorial.herokuapp.com/api/signup'</span>,<span class=\"literal\">true</span>);</span><br><span class=\"line\">xhr.setRequestHeader(<span class=\"string\">'Content-type'</span>,<span class=\"string\">'application/json'</span>);</span><br><span class=\"line\"><span class=\"keyword\">var</span> data = <span class=\"built_in\">JSON</span>.stringify(account);</span><br><span class=\"line\">xhr.send(data);</span><br></pre></td></tr></table></figure><p></p><p>以下是回傳JSON格式的AJAX POST完整的範例程式碼</p><p></p><figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">var</span> send = <span class=\"built_in\">document</span>.querySelector(<span class=\"string\">'.send'</span>);</span><br><span class=\"line\"></span><br><span class=\"line\">send.addEventListener(<span class=\"string\">'click'</span>,signup,<span class=\"literal\">false</span>);</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"function\"><span class=\"keyword\">function</span> <span class=\"title\">signup</span>(<span class=\"params\"></span>)</span>{</span><br><span class=\"line\"> <span class=\"keyword\">var</span> emailStr = <span class=\"built_in\">document</span>.querySelector(<span class=\"string\">'.account'</span>).value;</span><br><span class=\"line\"> <span class=\"keyword\">var</span> passwordStr = <span class=\"built_in\">document</span>.querySelector(<span class=\"string\">'.password'</span>).value;</span><br><span class=\"line\"> <span class=\"keyword\">var</span> account = {};</span><br><span class=\"line\"> account.email = emailStr;</span><br><span class=\"line\"> account.password = passwordStr;</span><br><span class=\"line\"> </span><br><span class=\"line\"> <span class=\"keyword\">var</span> xhr = <span class=\"keyword\">new</span> XMLHttpRequest();</span><br><span class=\"line\"> xhr.open(<span class=\"string\">'post'</span>,<span class=\"string\">'https://hexschool-tutorial.herokuapp.com/api/signup'</span>,<span class=\"literal\">true</span>);</span><br><span class=\"line\"> xhr.setRequestHeader(<span class=\"string\">'Content-type'</span>,<span class=\"string\">'application/json'</span>);</span><br><span class=\"line\"> <span class=\"keyword\">var</span> data = <span class=\"built_in\">JSON</span>.stringify(account);</span><br><span class=\"line\"> xhr.send(data);</span><br><span class=\"line\"> xhr.onload = <span class=\"function\"><span class=\"keyword\">function</span>(<span class=\"params\"></span>)</span>{</span><br><span class=\"line\"> <span class=\"keyword\">var</span> callbackData = <span class=\"built_in\">JSON</span>.parse(xhr.responseText);</span><br><span class=\"line\"> <span class=\"built_in\">console</span>.log(callbackData);</span><br><span class=\"line\"> <span class=\"keyword\">var</span> veriStr = callbackData.message;</span><br><span class=\"line\"> <span class=\"keyword\">if</span>(veriStr ==<span class=\"string\">\"帳號註冊成功\"</span>){</span><br><span class=\"line\"> alert(<span class=\"string\">'帳號註冊成功！！'</span>);</span><br><span class=\"line\"> }<span class=\"keyword\">else</span>{</span><br><span class=\"line\"> alert(<span class=\"string\">\"帳號註冊失敗！\"</span>);</span><br><span class=\"line\"> }</span><br><span class=\"line\"> }</span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure><p></p><!-- rebuild by neat -->","categories":["JavaScript"],"tags":["JavaScript","AJAX"]},{"title":" JavaScript - 變數","url":"/2020/03/08/JavaScript-%E8%AE%8A%E6%95%B8/","content":"<!-- build time:Sun May 23 2021 15:10:01 GMT+0800 (GMT+08:00) --><h2>JavaScript常見的變數類型</h2><p>什麼是變數？變數指的是將值指定給特定的對象，例如以下的情境：</p><p></p><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">A:初次見面，請問你叫什麼命字？</span><br><span class=\"line\">mancen: 你好，我的名字是"mancen"</span><br><span class=\"line\">(在A的腦海中，我的"名字"被指定為"mancen")</span><br><span class=\"line\">A:"mancen"你好，很高興認識你</span><br></pre></td></tr></table></figure><p></p><p><a id=\"more\"></a></p><table><thead><tr><th style=\"text-align:center\">變數類型</th><th style=\"text-align:center\">舉例</th></tr></thead><tbody><tr><td style=\"text-align:center\">數字 (number)</td><td style=\"text-align:center\">35</td></tr><tr><td style=\"text-align:center\">字串 (string)</td><td style=\"text-align:center\">"Hello World!"</td></tr><tr><td style=\"text-align:center\">布林 (Boolean)</td><td style=\"text-align:center\">true、 false</td></tr></tbody></table><p>在生活中，這三種變數的類型隨處可見，例如交通號誌的倒數時間(數字)、路名(字串)、紅燈停綠燈行(布林)等等。</p><h2>變數的宣告方式</h2><p>JavaScript的變數用<code>var</code>來宣告變數名稱，<code>=</code>指定變數的值，而宣告後的變數，需要透過其他方式呼叫才能顯示，例如<code>alert</code>彈跳視窗顯示變數的值。而變數宣告後，值是可變動的。</p><h2>變數 number</h2><p></p><figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">var</span> price = <span class=\"number\">30</span>; <span class=\"comment\">// 宣告price變數，並賦於值=30</span></span><br><span class=\"line\">alert(price); <span class=\"comment\">// alert會顯示\"30\"</span></span><br><span class=\"line\">price = <span class=\"number\">25</span>;</span><br><span class=\"line\">alert(price); <span class=\"comment\">// alert會顯示\"25\"</span></span><br></pre></td></tr></table></figure><p></p><p>另外是JavaScript是由上至下逐行依序執行的，因此若在宣告變數前呼叫變數的話，將會回傳<code>Undefined</code>。</p><p></p><figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\">alert(price); <span class=\"comment\">// alert會顯示\"Undefined\"</span></span><br><span class=\"line\"><span class=\"keyword\">var</span> price = <span class=\"number\">30</span>; <span class=\"comment\">// 宣告price變數，並賦於值=30</span></span><br><span class=\"line\">alert(price); <span class=\"comment\">// alert會顯示\"30\"</span></span><br></pre></td></tr></table></figure><p></p><p>而在這裡也可以使用ID與textContent來進行渲染</p><p>在all.js中撰寫以下內容</p><p></p><figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">var</span> cookiePrice = <span class=\"number\">35</span>;</span><br><span class=\"line\"><span class=\"built_in\">document</span>.getElementById(<span class=\"string\">'price'</span>).textContent = cookiePrice;</span><br></pre></td></tr></table></figure><p></p><p>在html中撰寫以下內容</p><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\"><body></span><br><span class=\"line\"> <p>這一顆紅豆餅是<em id="price"></em>元</p></span><br><span class=\"line\"> <script src="js/all.js"></script></span><br><span class=\"line\"></body></span><br></pre></td></tr></table></figure><p></p><p>在網頁中將會呈現"這一顆紅豆餅是35元"</p><p>Number變數也可以進行運算</p><p></p><figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">var</span> cookiePrice = <span class=\"number\">35</span>;</span><br><span class=\"line\"><span class=\"keyword\">var</span> myMoney = <span class=\"number\">15</span>;</span><br><span class=\"line\">alert(cookiePrice - myMoney); <span class=\"comment\">// 回傳 35 - 15 = 20</span></span><br><span class=\"line\"><span class=\"keyword\">var</span> needMoney = cookiePrice - myMoney; <span class=\"comment\">// needMoney = 35 - 15</span></span><br><span class=\"line\">alert(needMoney); <span class=\"comment\">// 回傳 20</span></span><br><span class=\"line\"><span class=\"keyword\">var</span> fiveCookie = cookiePrice * <span class=\"number\">5</span> - <span class=\"number\">20</span>; <span class=\"comment\">// fiveCookie = 35 * 5 - 20 (先乘除後加減，括號優先)</span></span><br></pre></td></tr></table></figure><p></p><h2>變數 string</h2><p></p><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">var indexName = 'mancen'; // 宣告indexName變數，指定值為字串時須加上單引號或雙引號</span><br><span class=\"line\">alert(indexName); // alert會顯示"mancen"</span><br></pre></td></tr></table></figure><p></p><p>如何將變數帶入網頁的內容，可以看一下底下的例子</p><p>在all.js中轉寫以下內容：</p><p></p><figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">var</span> indexName = <span class=\"string\">'mancen'</span>;</span><br><span class=\"line\"><span class=\"built_in\">document</span>.getElementById(<span class=\"string\">'myName'</span>).textContent = indexName;</span><br></pre></td></tr></table></figure><p></p><p>在HTML檔案中，我們指定了<code><em id="myName"></em></code>來做為帶入變數的ID</p><p></p><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\"><body></span><br><span class=\"line\"> <div class="gift"></span><br><span class=\"line\"> <img src="images/gift.png" width="150" height="150" alt="gift"></span><br><span class=\"line\"> <p><em id="myName"></em>：</p></span><br><span class=\"line\"> <h2>祝你生日快樂</h2></span><br><span class=\"line\"> <p class="sendName">小花</p></span><br><span class=\"line\"> </div></span><br><span class=\"line\"> <script src="js/all.js"></script></span><br><span class=\"line\"></body></span><br></pre></td></tr></table></figure><p></p><p>在這樣操作之後，在網頁中<code><em id="myName"></em></code>就會因為JavaScript將值帶入"mancen"。</p><p>字串變數的加法與數字變數不同，數字變數的可以進行運算，而字串變數的加法會將變數中的字串組合成句子。</p><p></p><figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">var</span> polite = <span class=\"string\">\"Hello \"</span>;</span><br><span class=\"line\"><span class=\"keyword\">var</span> indexName = <span class=\"string\">'mancen'</span>;</span><br><span class=\"line\"><span class=\"keyword\">var</span> total = polite + indexName; 變數total的值為<span class=\"string\">\"Hello mancen\"</span></span><br></pre></td></tr></table></figure><p></p><h2>如何輸出</h2><p>在開發過程中，如果只是想要確認變數的值是否正確，有以下兩種方法：</p><p></p><figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">var</span> score = <span class=\"number\">90</span>; <span class=\"comment\">// 宣告score變數，並賦於值=90</span></span><br><span class=\"line\">alert(score); <span class=\"comment\">// alert彈跳視窗會顯示\"90\"</span></span><br><span class=\"line\"><span class=\"built_in\">console</span>.log(score); <span class=\"comment\">// 瀏覽器的Console視窗中會顯示90</span></span><br></pre></td></tr></table></figure><p></p><p>如果有多個值要輸出，因<code>alert</code>一次只會顯示一個值，且需要手動關閉視窗，如果覺得這會干擾的話，可以採用<code>console.log</code>輸出。</p><h2>變數規則</h2><p>變數命名有以下需要注意的地方</p><ul><li>開頭不能使用數字</li><li>不能用 - 跟 .</li><li>不能使用關鍵字</li><li>大小寫有區分</li><li>變數需有語意化(建議) <em>讓未來的開發與維護較為容易</em></li></ul><p>JavaScript 關鍵字因其以具有特定功能，因此不可作為變數名稱，詳細關鍵字可見下方連結 <a href=\"https://www.w3schools.com/js/js_reserved.asp\" target=\"_blank\" rel=\"noopener\">W3C School JavaScript Reserved Words</a></p><h2>undefined</h2><p>在JavaScript 中，當心宣告了一個變數，但尚未賦於變數值時，變數預設的值為<code>undefined</code>，但當賦於該變數新值時，在呼叫該變數即會回傳新值，不再是undefined。</p><p></p><figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">var</span> price;</span><br><span class=\"line\"><span class=\"built_in\">console</span>.log(price); <span class=\"comment\">// 此時將回傳 undefined</span></span><br><span class=\"line\">price = <span class=\"number\">15</span>;</span><br><span class=\"line\"><span class=\"built_in\">console</span>.log(price); <span class=\"comment\">// 此時將回傳 15</span></span><br></pre></td></tr></table></figure><p></p><!-- rebuild by neat -->","categories":["JavaScript"],"tags":["JavaScript"]},{"title":"九棚 ∣ 鼻頭草原探險","url":"/2019/07/27/Jioupeng/","content":"<!-- build time:Sun May 23 2021 15:10:01 GMT+0800 (GMT+08:00) --><p><img src=\"/2019/07/27/Jioupeng/IMG_20190727_145046.jpg\" title=\"開路先鋒的背影\"></p><h2>鼻頭草原簡介</h2><p>墾管處近年開始推展生態旅遊行程，鼻頭草原是2019年3月起才對外開放的生態管制區，需事先申請才能進入，由滿州鄉九棚社區負責導覽解說，每天上、下午各開放100個名額預約，每10人成1團配1個解說員，費用1團1800元。</p><p><a id=\"more\"></a></p><p>預約申請網址 https://reservapions.ktnp.gov.tw/application.aspx</p><h2>活動注意事項</h2><ul><li>行程約2-2.5小時</li><li>因鼻頭草原屬於墾丁國家公園內的生態管制區，不能任意採摘花草。</li><li>為了維護生態保護區內野生動物免於感染各類疾病，禁止攜帶各類寵物進入保護區。</li><li>為了生態保護，請將垃圾(包含果皮等)隨手帶離，避免影響生態。</li></ul><p><img src=\"/2019/07/27/Jioupeng/IMG_20190727_145120.jpg\" title=\"太陽很大有雨傘可以帶著防曬\"></p><p><img src=\"/2019/07/27/Jioupeng/IMG_20190727_141230.jpg\" title=\"風剪樹\"></p><p>這次的解說員是幽默的韋爸爸，途中詳細的解說各種特有的植物，與當地原住民間流傳的故事。其中有相當特別的半邊花。 <img src=\"/2019/07/27/Jioupeng/00100dPORTRAIT_00100_BURST20190727140732216_COVER.jpg\" title=\"2朵半邊花\"></p><p><img src=\"/2019/07/27/Jioupeng/00100dPORTRAIT_00100_BURST20190727140726220_COVER.jpg\" title=\"合體成功的一朵花\"></p><p><img src=\"/2019/07/27/Jioupeng/IMG_20190727_141432.jpg\" title=\"遠望八瑤灣\"></p><p>登上鼻頭草原的制高點後，可以遠望「牡丹社事件」中琉球王國船難者的登陸點 - 八瑤灣；聽著韋爸爸再次簡單的敘述牡丹社事件的始末，對於這個在歷史課本中被簡單帶過的篇章有了更多的理解。</p><p><img src=\"/2019/07/27/Jioupeng/IMG_20190727_152824.jpg\" title=\"梯田般的緩坡\"></p><p>下山路上往後回望，是遼闊像梯田般的緩坡，風景很美，這個行程並沒有太大的難度，但需要注意防曬並適時補充水分。參加完了這個行程，可是對其他路線有興趣了起來。</p><h2>九棚社區發展協會</h2><p><a href=\"http://9p.uukt.com.tw/\" target=\"_blank\" rel=\"noopener\">官方網站</a> <a href=\"https://www.facebook.com/%E6%BB%BF%E5%B7%9E%E9%84%89%E4%B9%9D%E6%A3%9A%E7%A4%BE%E5%8D%80%E7%99%BC%E5%B1%95%E5%8D%94%E6%9C%83-1411389605750132/\" target=\"_blank\" rel=\"noopener\">粉絲專頁</a></p><!-- rebuild by neat -->","categories":["生活"],"tags":["鼻頭草原","恆春半島","九棚社區發展協會"]},{"title":"JavaScript 陣列與物件","url":"/2020/03/13/JavaScript-%E9%99%A3%E5%88%97%E8%88%87%E7%89%A9%E4%BB%B6/","content":"<!-- build time:Sun May 23 2021 15:10:01 GMT+0800 (GMT+08:00) --><h2>陣列(Array)</h2><p>當我們需要處理大量相同屬性的物件時，使用變數去宣告的話會造成變數過多，影響到資料處理的效率，因此我們可以將相同屬性的東西以陣列的方式去表示。例如：農場中有主人、2隻狗、15隻雞、3個玉米田、4個花椰菜田跟9個稻草人時，我們可以用下圖的方式去表示</p><p><img src=\"/2020/03/13/JavaScript-陣列與物件/陣列表示方法.jpg\" title=\"用陣列來表示農場中的資訊\"></p><p><a id=\"more\"></a></p><h2>陣列的寫法</h2><p>我們可以用下面的方法來宣告一個陣列<code>cornField</code>，並提取其中的數值，要注意陣列中的第幾個數值是從0開始計算，因此<code>cornField[1]</code>指的是<code>cornField</code>陣列中的第一個數值</p><p></p><figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">var</span> cornField = [<span class=\"number\">5</span>,<span class=\"number\">8</span>,<span class=\"number\">3</span>,<span class=\"number\">10</span>];</span><br><span class=\"line\"><span class=\"built_in\">console</span>.log(cornField[<span class=\"number\">0</span>]); <span class=\"comment\">// 這裡會回傳5</span></span><br></pre></td></tr></table></figure><p></p><p>我們也可以宣告一個空陣列後，去新增與編輯陣列中的內容，並可以使用<code>陣列名稱.length</code>來查詢陣列中共有幾個值</p><p></p><figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">var</span> cornField = [];</span><br><span class=\"line\"></span><br><span class=\"line\">cornField.push(<span class=\"number\">3</span>);</span><br><span class=\"line\">cornField.push(<span class=\"number\">18</span>);</span><br><span class=\"line\">cornField.push(<span class=\"number\">15</span>);</span><br><span class=\"line\">cornField.push(<span class=\"number\">9</span>);</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"built_in\">console</span>.log(cornField); <span class=\"comment\">// 這裡會回傳[3,18,15,9]</span></span><br><span class=\"line\"></span><br><span class=\"line\">cornField[<span class=\"number\">0</span>] = <span class=\"number\">10</span>; <span class=\"comment\">// 這裡會將第1個值替換為10</span></span><br><span class=\"line\">cornField[<span class=\"number\">4</span>] = <span class=\"number\">33</span>; <span class=\"comment\">// 這裡會新增第5個值33</span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"built_in\">console</span>.log(cornField); <span class=\"comment\">// 這裡會回傳[10, 18, 15, 9, 33]</span></span><br><span class=\"line\"><span class=\"built_in\">console</span>.log(<span class=\"string\">\"我總共有\"</span> + cornField.length + <span class=\"string\">\"個玉米田\"</span>); <span class=\"comment\">// 這裡會回傳\"我總共有5個玉米田\"</span></span><br></pre></td></tr></table></figure><p></p><p>陣列中不僅可以放入數值，也可以放入function、物件、字串等等。</p><h2>物件(Object)</h2><p>當要表示一個有許多內容的集合時，我可以使用物件的方式來表示，例如前面提到的農場內的資訊，需要說明這都是屬於同一個農場所有的，可以用以下的方式表示：</p><p><img src=\"/2020/03/13/JavaScript-陣列與物件/物件表示方法.jpg\" title=\"用物件來表示農場中的資訊\"></p><p></p><figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">var</span> farm = {</span><br><span class=\"line\"> farmer: <span class=\"string\">'卡斯柏'</span>,</span><br><span class=\"line\"> chick: <span class=\"number\">15</span>,</span><br><span class=\"line\"> dog: [<span class=\"string\">'張姆士'</span>, <span class=\"string\">'龐的'</span>]</span><br><span class=\"line\">};</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"built_in\">console</span>.log(farm); <span class=\"comment\">// 回傳{farmer: \"卡斯柏\", chick: 15}</span></span><br><span class=\"line\"><span class=\"built_in\">console</span>.log(farm.chick); <span class=\"comment\">// 回傳物件中chick 屬性的值15 </span></span><br><span class=\"line\"></span><br><span class=\"line\">farm.chick = <span class=\"number\">50</span>; <span class=\"comment\">// 將物件中chick屬性的值更改為50(如物件屬性中無chick，則會新增chick屬性與賦值)</span></span><br><span class=\"line\"><span class=\"built_in\">console</span>.log(farm.chick); <span class=\"comment\">// 回傳物件中chick 屬性的值50</span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"built_in\">console</span>.log(farm.dog[<span class=\"number\">0</span>]); <span class=\"comment\">// 回傳dog屬性中列的第1個值'張姆士'</span></span><br></pre></td></tr></table></figure><p></p><h2>物件 + function的運用技巧</h2><p>物件裡面也可以有function，寫法是屬性後面直接加上function，在這裡function可以不命名，而當需要呼叫的屬性的內容是function時，需在屬性後面加上<code>()</code>。</p><p></p><figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">var</span> farm = {</span><br><span class=\"line\"> farmer: <span class=\"string\">'卡斯柏'</span>,</span><br><span class=\"line\"> chick: <span class=\"number\">15</span>,</span><br><span class=\"line\"> duck: <span class=\"number\">5</span>,</span><br><span class=\"line\"> dog: [<span class=\"string\">'張姆士'</span>, <span class=\"string\">'龐的'</span>],</span><br><span class=\"line\"> goDinner: <span class=\"function\"><span class=\"keyword\">function</span>(<span class=\"params\"></span>)</span>{</span><br><span class=\"line\"> <span class=\"built_in\">console</span>.log(farm.farmer + <span class=\"string\">\",該回家吃晚飯了!\"</span>)</span><br><span class=\"line\"> },</span><br><span class=\"line\"> poultryTotal: <span class=\"function\"><span class=\"keyword\">function</span>(<span class=\"params\"></span>)</span>{</span><br><span class=\"line\"> <span class=\"keyword\">var</span> num = farm.chick + farm.duck;</span><br><span class=\"line\"> <span class=\"built_in\">console</span>.log(<span class=\"string\">\"我的農場總共有\"</span> + num + <span class=\"string\">\"隻家禽\"</span>);</span><br><span class=\"line\"> }</span><br><span class=\"line\">};</span><br><span class=\"line\"></span><br><span class=\"line\">farm.goDinner();</span><br><span class=\"line\">farm.poultryTotal();</span><br></pre></td></tr></table></figure><p></p><h2>物件 + 陣列的設計流程</h2><p>當有多個相同屬性的物件時，我們也可以用陣列內有多個物件來表示，而陣列內的物件屬性資料提取方式如下：</p><p></p><figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">var</span> farms = [</span><br><span class=\"line\"> {</span><br><span class=\"line\"> farmer: <span class=\"string\">'崎崎'</span></span><br><span class=\"line\"> },</span><br><span class=\"line\"> {</span><br><span class=\"line\"> farmer: <span class=\"string\">'諦諦'</span></span><br><span class=\"line\"> }</span><br><span class=\"line\">]</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"built_in\">console</span>.log(farms[<span class=\"number\">0</span>]); <span class=\"comment\">//這裡會回傳第一個物件{farmer: \"崎崎\"}</span></span><br><span class=\"line\"><span class=\"built_in\">console</span>.log(farms[<span class=\"number\">0</span>].farmer); <span class=\"comment\">//這裡會回傳第一個物件中farmer屬性的值'崎崎'</span></span><br></pre></td></tr></table></figure><p></p><p>再來看一個比較複雜的例子，假設我們想要提取farms陣列中，第2個物件內dog屬性中的第1筆資料</p><p></p><figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">var</span> farms = [</span><br><span class=\"line\"> {</span><br><span class=\"line\"> farmer: <span class=\"string\">'崎崎'</span>,</span><br><span class=\"line\"> chick: <span class=\"number\">15</span>,</span><br><span class=\"line\"> duck: <span class=\"number\">5</span>,</span><br><span class=\"line\"> dog: [<span class=\"string\">'Lucky'</span>, <span class=\"string\">'Happy'</span>],</span><br><span class=\"line\"> },</span><br><span class=\"line\"> {</span><br><span class=\"line\"> farmer: <span class=\"string\">'諦諦'</span>,</span><br><span class=\"line\"> chick: <span class=\"number\">6</span>,</span><br><span class=\"line\"> duck: <span class=\"number\">11</span>,</span><br><span class=\"line\"> dog: [<span class=\"string\">'Kulo'</span>],</span><br><span class=\"line\"></span><br><span class=\"line\"> }</span><br><span class=\"line\">]</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"built_in\">console</span>.log(farms[<span class=\"number\">1</span>].dog[<span class=\"number\">0</span>]); <span class=\"comment\">// 回傳第2個物件中dog屬性內陣列的第1筆資料'Kulo'</span></span><br></pre></td></tr></table></figure><p></p><!-- rebuild by neat -->","categories":["JavaScript"],"tags":["JavaScript","Array","Object"]},{"title":"Markdown","url":"/2019/07/26/Markdown/","content":"<!-- build time:Sun May 23 2021 15:10:01 GMT+0800 (GMT+08:00) --><p>部屬建置完Hexo部落格，接下來當然是要開始寫文章，在Hexo上發表文章要來熟悉__Markdown__的書寫方式，<a href=\"https://wastemobile.gitbooks.io/gitbook-chinese/content/format/markdown.html\" target=\"_blank\" rel=\"noopener\">GitBook中文解說</a>裡有對於Markdown語法的說明</p><p><a id=\"more\"></a></p><h2>字體樣式</h2><p>###標題</p><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">也可以使用下劃線的方式標記 H1 與 H2：</span><br><span class=\"line\"></span><br><span class=\"line\">Alt-H1</span><br><span class=\"line\">======</span><br><span class=\"line\"></span><br><span class=\"line\">Alt-H2</span><br><span class=\"line\">------</span><br><span class=\"line\"></span><br><span class=\"line\"># 我是 H1</span><br><span class=\"line\">## 我是 H2</span><br><span class=\"line\">### 我是 H3</span><br><span class=\"line\">#### 我是 H4</span><br><span class=\"line\">##### 我是 H5</span><br><span class=\"line\">###### 我是 H6</span><br></pre></td></tr></table></figure><p></p><p>也可以使用下劃線的方式標記 H1 與 H2：</p><h1>Alt-H1</h1><h2>Alt-H2</h2><h1>我是 H1</h1><h2>我是 H2</h2><h3>我是 H3</h3><h4>我是 H4</h4><h5>我是 H5</h5><h6>我是 H6</h6><p></p><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">我是本文</span><br><span class=\"line\">**我是粗體**</span><br><span class=\"line\">*我是斜體*</span><br><span class=\"line\">_我也是斜體_</span><br><span class=\"line\">~我是刪除線~</span><br></pre></td></tr></table></figure><p></p><p>我是本文 <strong>我是粗體</strong> <em>我是斜體</em> <em>我也是斜體</em> ~我是刪除線~</p><h2>超連結</h2><p></p><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">[我是超連結](我是URL)</span><br></pre></td></tr></table></figure><p></p><p><a href=\"#\">Go Top</a></p><h2>列表</h2><p>下列內容參考自<a href=\"https://gist.github.com/billy3321/1001749662c370887c63bb30f26c9e6e\" target=\"_blank\" rel=\"noopener\">Markdown Cheatsheet 中文版</a> （在這個例子裡，前置與後面的空白以點的方式顯示：⋅）</p><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">1. 第一個有序列表項目</span><br><span class=\"line\">2. 另一個項目</span><br><span class=\"line\">⋅⋅⋅* 無序子列表 </span><br><span class=\"line\">1. 實際數字不重要，只要它是一個數字</span><br><span class=\"line\">⋅⋅⋅1. 有序子列表</span><br><span class=\"line\">4. 與其他項目</span><br><span class=\"line\"></span><br><span class=\"line\">⋅⋅⋅要在列表項目下加入段落，只要縮進就好了。注意前面的空白行，以及前置的空白（至少要一個空白，不過我們在這裡會使用三個空白以剛好對齊原始的文字）。</span><br><span class=\"line\"></span><br><span class=\"line\">⋅⋅⋅要使文字段行而不會成為新的段落，你只需要在後面加上兩個空白。⋅⋅</span><br><span class=\"line\">⋅⋅⋅注意這行已經分開了，不過還是在同樣的段落中。</span><br><span class=\"line\">⋅⋅⋅（如果不要求後面的兩個空格，就為伴了典型的 GFM 斷行格式。）</span><br><span class=\"line\"></span><br><span class=\"line\">* 無序列表可以使用星號</span><br><span class=\"line\">- 或減號</span><br><span class=\"line\">+ 或加號</span><br></pre></td></tr></table></figure><p></p><ol><li><p>第一個有序列表項目</p></li><li><p>另一個項目</p><ul><li>無序子列表</li></ul></li><li><p>實際數字不重要，只要它是一個數字</p><ol><li>有序子列表</li></ol></li><li><p>與其他項目</p><p>要在列表項目下加入段落，只要縮進就好了。注意前面的空白行，以及前置的空白（至少要一個空白，不過我們在這裡會使用三個空白以剛好對齊原始的文字）。</p><p>要使文字段行而不會成為新的段落，你只需要在後面加上兩個空白。<br>注意這行已經分開了，不過還是在同樣的段落中。 （如果不要求後面的兩個空格，就為伴了典型的 GFM 斷行格式。）</p></li></ol><ul><li>無序列表可以使用星號</li></ul><ul><li>或減號</li></ul><ul><li>或加號</li></ul><h2>CheckBox</h2><p>CheckBox有點像是代辦清單，其中要注意的是要使用<code>x</code>來表示勾選，它並不會主動紀錄勾選過的內容，所以使用時要確認勾選過的內容是否有增加 <code>x</code></p><p></p><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">- [x] 我已經完成</span><br><span class=\"line\">- [ ] 我還沒完成</span><br></pre></td></tr></table></figure><p></p><ul><li>[x] 我已經完成</li><li>[ ] 我還沒完成</li></ul><h2>區塊</h2><p>分為小區塊和大區塊，通常用來作為相關內容或是說明的撰寫</p><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">//小區塊語法(前後加上反引號)</span><br><span class=\"line\">`我是一個小區塊`</span><br><span class=\"line\"></span><br><span class=\"line\">//大區塊語法(前面加上4個空白)</span><br><span class=\"line\"> 我是一個大區塊</span><br></pre></td></tr></table></figure><p></p><p><code>我是一個小區塊</code></p><pre><code>我是一個大區塊\n</code></pre><h2>程式碼</h2><p>高亮程式碼顯示語法 （前後三個反引號 + 語言)</p><p><img src=\"/2019/07/26/Markdown/code.JPG\" title=\"程式碼書寫方式\"></p><p>顯示結果：</p><figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">let</span> i = <span class=\"number\">1</span>;</span><br><span class=\"line\"><span class=\"keyword\">const</span> myInterval = setInterval(<span class=\"function\"><span class=\"keyword\">function</span>(<span class=\"params\"></span>) </span>{</span><br><span class=\"line\"> <span class=\"built_in\">console</span>.log(<span class=\"string\">\"Here is message number \"</span> + i);</span><br><span class=\"line\"> i = i + <span class=\"number\">1</span>;</span><br><span class=\"line\"> }, <span class=\"number\">2000</span>);</span><br></pre></td></tr></table></figure><p></p><h2>插入圖片</h2><p>Hexo 有資產資料夾功能，<a href=\"https://hexo.io/zh-tw/docs/asset-folders.html\" target=\"_blank\" rel=\"noopener\">官方頁面</a>中有說明如何開啟 <code>post_asset_folder</code>功能及使用標籤外掛</p><p></p><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">{% asset_path slug %}</span><br><span class=\"line\">{% asset_img slug [title] %}</span><br><span class=\"line\">{% asset_link slug [title] %}</span><br></pre></td></tr></table></figure><p></p><p>例如在資產資料夾中有一張sample.jpg圖檔，即可用以下方語法帶入圖片並加上說明</p><p></p><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">{% asset_img sample.jpg 我是sample.jpg %}</span><br></pre></td></tr></table></figure><p></p><p>顯示結果： <img src=\"/2019/07/26/Markdown/sample.jpg\" title=\"我是sample.jpg\"></p><p>另外也可使用如圖片在圖床上，則使用下列語法連結圖片</p><p></p><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\"></span><br></pre></td></tr></table></figure><p></p><p><img src=\"https://i.imgur.com/Gr8dqt5.jpg\" alt=\"Nick Young\"></p><h2>引用</h2><p>Markdown 語法使用 > 製作引用區塊</p><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">> 我是引用的文字</span><br></pre></td></tr></table></figure><p></p><blockquote><p>我是引用的文字</p></blockquote><h2>水平分隔線</h2><p></p><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">第一個水平分隔線：</span><br><span class=\"line\"></span><br><span class=\"line\">***</span><br><span class=\"line\">第二個水平分隔線：</span><br><span class=\"line\"></span><br><span class=\"line\">---</span><br><span class=\"line\">第三個水平分隔線：</span><br><span class=\"line\"></span><br><span class=\"line\">___</span><br></pre></td></tr></table></figure><p></p><p>第一個水平分隔線：</p><hr><p>第二個水平分隔線：</p><hr><p>第三個水平分隔線：</p><hr><h2>表格</h2><p>_arkdown 語法使用 | 、 - 或 : 製作表格，<code>:</code>可以讓內容在表格中對齊</p><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">Default | Left | Center | Right</span><br><span class=\"line\">-----------| :--------- | :--------: | ---------: </span><br><span class=\"line\"> x | x | x | x </span><br><span class=\"line\">xxxxxxxxxx | xxxxxxxxxx | xxxxxxxxxx | xxxxxxxxxx</span><br></pre></td></tr></table></figure><p></p><table><thead><tr><th>Default</th><th style=\"text-align:left\">Left</th><th style=\"text-align:center\">Center</th><th style=\"text-align:right\">Right</th></tr></thead><tbody><tr><td>x</td><td style=\"text-align:left\">x</td><td style=\"text-align:center\">x</td><td style=\"text-align:right\">x</td></tr><tr><td>xxxxxxxxxx</td><td style=\"text-align:left\">xxxxxxxxxx</td><td style=\"text-align:center\">xxxxxxxxxx</td><td style=\"text-align:right\">xxxxxxxxxx</td></tr></tbody></table><h2>摘要</h2><p>使用的NexT主題提共了三種摘要文章的方式</p><ol><li>在文章中加入<code><!-- more --></code>手動摘要，Hexo提供的方式(可自行決定摘要內容長度)</li><li>在文章中的 front-matter 中添加 description，並提供文章摘錄</li><li>在主題配置文件中設定，預設擷取長度為150字元，可根據需要自行調整</li></ol><p></p><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">auto_excerpt:</span><br><span class=\"line\"> enable: true</span><br><span class=\"line\"> length: 150</span><br></pre></td></tr></table></figure><p></p><p></p><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">---</span><br><span class=\"line\">title: Markdown</span><br><span class=\"line\">date: 2019-07-26 14:47:47</span><br><span class=\"line\">tags: </span><br><span class=\"line\"> - hexo</span><br><span class=\"line\"> - Markdown</span><br><span class=\"line\">categories: hexo</span><br><span class=\"line\">---</span><br><span class=\"line\"></span><br><span class=\"line\">部屬建置完Hexo部落格，接下來當然是要開始寫文章，在Hexo上發表文章要來熟悉__Markdown__的書寫方式，[GitBook中文解說](https://wastemobile.gitbooks.io/gitbook-chinese/content/format/markdown.html)裡有對於Markdown語法的說明</span><br><span class=\"line\"></span><br><span class=\"line\"><!-- more --></span><br></pre></td></tr></table></figure><p></p><!-- rebuild by neat -->","categories":["hexo"],"tags":["hexo","Markdown"]},{"title":"Let’s Talk—《為什麼假新聞比真相更吸引人？》","url":"/2019/07/28/Let-s-talk-20190728/","content":"<!-- build time:Sun May 23 2021 15:10:01 GMT+0800 (GMT+08:00) --><p><img src=\"/2019/07/28/Let-s-talk-20190728/VU5A5886.JPG\" title=\"Let’s Talk—《為什麼假新聞比真相更吸引人？》\"></p><h2>108年青年好政系列 - Let's Talk</h2><p>這一系列活動由教育部青年發展署主辦，為鼓勵青年參與公共事務，7月至9月間辦理近30場「Let's Talk」，這次參加的是7/28在高雄中山大學舉辦的場次，主題是《為什麼假新聞比真相更吸引人？》以下是開頭兩位教授講座的筆記<a id=\"more\"></a></p><h2>中正大學胡元輝教授《假新聞的防制之道》</h2><p><img src=\"/2019/07/28/Let-s-talk-20190728/VU5A5239.JPG\" title=\"活動首先由中正大學胡元輝教授開場\"> 胡教授先介紹了假訊息生態系統，以及人們為何會被這樣的生態系統吸引。</p><blockquote><p>你看過假新聞嗎？ 你分享過假新聞嗎？ 你能不能辨識出你看到的是不是假新聞嗎？</p></blockquote><p>胡教授並介紹了一些假新聞的案例以及關於AI擬真技術的(以下的影片和講座中胡教授播放的影片不同)</p><p>看到這樣的擬真技術，令人開始懷疑自己平常看到的內容到底是真還是假呢？</p><p></p><div class=\"video-container\"><iframe src=\"//www.youtube.com/embed/_GoUKR-OhzA\" frameborder=\"0\" allowfullscreen></iframe></div><p></p><p>在這部影片中，華盛頓大學的使拉澤曼教授提到，任何的技術都有可能會被濫用，但如果用另一個角度來看，如果我們知道現今已經存在這樣的技術，就能使用反向工程去辨別什麼樣的影片可能是假的。</p><h3>假新聞生態系統</h3><p><img src=\"/2019/07/28/Let-s-talk-20190728/IMG_20190728_105032.jpg\" title=\"胡教授提到的假訊息的生態系統\"></p><p>在生態圈中「產製」、「傳輸」與「消費」間的影響很容易形成一個循環。</p><p>在「網路與社群平台」蓬勃發展之下，閱聽人已經不再是以往只能被動接收的角色，因社群平台(FB、IG、LINE、Youtube等等)而形成閱聽眾的"自媒體"，閱聽眾以轉化成為生產性的消費者，再轉發分享時還會加上自己的評語及想法；</p><p>所謂"不求甚解的媒體"是因為傳統媒體面臨人力短缺，卻需要製播大量新聞內容的情況下，原有訊息查證功能漸漸式微，逐漸變成一種"如果這消息被證明是假的，我就不能播了"的心態。</p><h3>那人們又為什麼會被假新聞生態系統吸引呢？</h3><p>而到底為什麼假新聞會這麼新引人呢？有<a href=\"https://dq.yam.com/post.php?id=8944\" target=\"_blank\" rel=\"noopener\">MIT研究：假新聞比真相傳播快</a>指出假訊息被轉發的機率比真實訊息高7成，傳播速度快6倍。</p><blockquote><p>胡教授提到這和人的認知缺陷有關;在心理學與傳播學中有相關的理論</p></blockquote><ul><li>認知失調 (Cognitive dissonance)</li><li>動機性推理 (motivated reasoning)</li><li>確認偏誤 (confirmation bias)</li><li>選擇性暴露 (selective exposure)</li><li>框架理論 (frame)</li><li>說明深度的假象 (illusion of explanatory depth)</li></ul><p><img src=\"/2019/07/28/Let-s-talk-20190728/IMG_20190728_110809.jpg\" title=\"最後胡教授總結，對於假新聞治理的長短期措施\"></p><h2>臺灣大學林照真教授 《假新聞如何吸引眼球》</h2><p><img src=\"/2019/07/28/Let-s-talk-20190728/VU5A5247.JPG\" title=\"臺灣大學林照真教授\"></p><p>林教授提到了假新聞之所以吸引眼球，是因為假新聞沒有品質的包袱，加上人們天生喜歡八卦和腥羶色，讓架新聞為了追求點閱率用諷刺、模仿、捏造、操控、廣告和宣傳等手法，使假新聞能像病毒般的快速傳播。</p><p><img src=\"/2019/07/28/Let-s-talk-20190728/IMG_20190728_112950.jpg\" title=\"假新聞/心理狀態\"></p><p>林教授也提到，假興文的產製者背後有獲利/意識形態兩種不同的驅力；而令讀者感到憤怒、憎恨、負面情緒的內容更容易在臉書上被分享。</p><p>而當有天災發生時更容易成為假新聞的源頭，因為人們在當下會密切關心這些天災的相關訊息，容易出現舊訊息舊照片轉貼，因不同的立場加上自己的評斷，但這樣的假訊息對於救災的單位來說會是相當困擾的。</p><p><img src=\"/2019/07/28/Let-s-talk-20190728/IMG_20190728_113138.jpg\" title=\"假新聞類型\"></p><p>假新聞的類型非為四大類 1 假命題： 目的在於製造言論風向 2 偽新聞網站： 內容農場，網站內容非平衡中立，多有特定立場，新聞多拷貝自不同來源 3 真圖假文傳播： 利用社群媒體，形成同溫層傳播，更加堅信假新聞 4 外力介入： 美國2016年的通俄門、馬其頓男孩： 台灣執政黨稱主要為中國勢力的介入，在野黨則指控執政力量的介入</p><p><img src=\"/2019/07/28/Let-s-talk-20190728/IMG_20190728_114541.jpg\" title=\"認識大陸媒體\"></p><p>林教授也提到特定大陸媒體的特性與色彩，在面對新聞訊息時可先由訊息來源判斷該媒體是否有特定立場，內容是真正的新聞或是為了特定立場的宣傳。</p><h2>補充</h2><h3>目前政府對於假新聞的措施</h3><p>目前對於媒體版面時常出現假新聞的指控，胡教授提到以目前在民主過家來說主要要遏止的是 <strong>"惡"、"假"、"害"</strong> 有關的內容，以目前出現過的案例主要是以《衛星電視廣播法》第27條、《社會秩序維護法》第63條以及《災害防救法》第41條開罰。</p><h3>內容農場</h3><p>可以藉由以下特值來判別一個網站是否為內容農場： 1. 不自己生產新聞 2. 新聞來源沒有交代 3. 不會有關於我們的相關介紹 4. 標題很聳動，讓人想要點進頁面閱讀 5. 利用條列式的書寫，偽裝井然有序，乍看之下好像很科學 6. 篇幅短又新鮮，讓觀眾的認知負荷不超。但細看內文可能有許多錯誤或不合理的地方</p><p>內容農場主要的收入來源是廣告分潤與致入性行銷，近來網站有越來越精美的趨勢。</p><h3>現代公民面對假新聞五口訣</h3><p><strong>「忍、想、查、問、戳」</strong> 看到一則新的訊息時，先忍一忍，想一想有沒有哪裡奇怪，茶一下有沒有其他的資訊，問問身邊有沒有相關的專家，如果確認是假訊息，也要記得戳一下身邊的人，互相提醒這是假訊息。</p><h3>事實查核相關網站</h3><p>面對越來越多的假訊息，開始有一些民間機構網站開始作事實查核的工作，以後遇到看起來很奇怪的訊息，可以到以下網站找看看有沒有答案喔</p><ul><li><a href=\"https://tfc-taiwan.org.tw/\" target=\"_blank\" rel=\"noopener\">台灣事實查核中心</a></li><li><a href=\"https://www.fda.gov.tw/TC/news.aspx?cid=5049\" target=\"_blank\" rel=\"noopener\">食藥署闢謠專區</a></li><li><a href=\"https://www.facebook.com/rumtoast\" target=\"_blank\" rel=\"noopener\">蘭姆酒吐司粉絲專頁</a></li><li><a href=\"https://www.facebook.com/g0v.tw/posts/1367619799945969:0\" target=\"_blank\" rel=\"noopener\">真的假的line chatbox</a></li><li><a href=\"https://hackmd.io/@UQVVbiEVQd6vvHT2bbIxog/BJPLbAKwb?type=view\" target=\"_blank\" rel=\"noopener\">Cofacts真的假的</a></li><li><a href=\"https://www.mygopen.com/\" target=\"_blank\" rel=\"noopener\">MYGOPEN</a></li><li><a href=\"https://newshelper.g0v.tw/\" target=\"_blank\" rel=\"noopener\">新聞小幫手</a></li></ul><!-- rebuild by neat -->","categories":["Lecture","傳播"],"tags":["LetsTalk","假新聞","媒體識讀","青年好政"]},{"title":"研究生論文計畫的十大迷思 - 摘要","url":"/2019/09/27/Thesis-tutorial/","content":"<!-- build time:Sun May 23 2021 15:10:01 GMT+0800 (GMT+08:00) --><p><a href=\"https://www.youtube.com/channel/UCK0Jw1No_ZPI9VrHVPMrZkQ/feed\" target=\"_blank\" rel=\"noopener\">SAGE Taiwan</a> 分享關於研究方法與論文寫作的相關影片資料</p><p><a id=\"more\"></a></p><div class=\"video-container\"><iframe src=\"//www.youtube.com/embed/bPqgDab7M7E\" frameborder=\"0\" allowfullscreen></iframe></div><p></p><h2>1. 論文題目，研究目的與問題</h2><ul><li>論文題目過大？過小？</li><li>研究目的<ul><li>擬出2-3個研究目的</li></ul></li><li>研究問題<ul><li>透過回答3-5個研究問題來達到研究目的</li><li>研究問題要聚焦，不是研究目的的倒裝句</li></ul></li><li>邏輯性<ul><li>論文題目與研究問題、研究目的對應要有邏輯性</li></ul></li></ul><h2>2. 研究背景與動機</h2><ul><li>研究價值？</li><li>你的經驗？</li><li>為何而做？</li></ul><h2>3. 名詞解釋</h2><ul><li>概念型定義<ul><li>關鍵變項的定義</li></ul></li><li>操作型定義<ul><li>採用的研究工具、量表、方法</li></ul></li></ul><h2>4. 研究範圍與限制</h2><ul><li>研究範圍<ul><li>內容</li><li>對象(樣本數)</li><li>場域</li></ul></li><li>研究限制<ul><li>上述範圍</li><li>人力</li><li>時間</li><li>經費</li><li>研究方法</li></ul></li></ul><h2>5. 預期研究貢獻</h2><ul><li>按照研究問題一一回應</li><li>勿誇大空虛</li></ul><h2>6. 文獻探討</h2><ul><li>第一和第三章的橋樑<ul><li>探討過去的研究有什麼可以發揮的地方？進而發展出第三章</li></ul></li><li>非放大版名詞解釋</li><li>與你研究的關聯性(小結)<ul><li>探討的文獻對於研究有什麼影響？有什麼幫助？</li></ul></li><li>研究工具的依據</li><li>研究問題的產生處<ul><li>若文獻探討可回答的問題，就不該是研究問題</li></ul></li></ul><p>盡量採用國內外期刊論文，少採用碩博士論文</p><h2>7. 研究架構與流程</h2><ul><li>研究架構<ul><li>變項與變項之間的關係<ul><li>量化： 量化主要在討論變項與變項間的因果關係</li><li>質性： 不一定要有研究架構圖</li></ul></li></ul></li><li>研究流程<ul><li>研究的步驟(不一定要寫)</li></ul></li></ul><h2>8. 研究設計與方法</h2><ul><li>研究取向<ul><li>量化</li><li>質化</li></ul></li><li>研究方法<ul><li>實驗法、問卷調查、觀察、訪談....等</li></ul></li><li>對象<ul><li>研究參與者與研究對象的差別要清楚</li></ul></li><li>環境<ul><li>實驗法環境變數要敘述清楚(後面的人越容易重複操作，外在信度越高)</li></ul></li><li>設備(資料蒐集軟體硬體，ex. 錄音筆、DV等)</li><li>工具(蒐集資料的媒介，ex. 測驗卷、問卷、量表、觀察檢核表等等)</li></ul><p><strong>現今有些研究場域，設備就是工具(ex. 社群網站、app研究等)</strong></p><h2>9. 資料蒐集與信效度檢核</h2><ul><li>研究工具<ul><li>發展適合自己的研究工具(不要為了選擇知名的工具，但卻不符合研究所需)</li></ul></li><li>信度<ul><li>再測、複本、再測與複本、折半、交互評分者、交互觀察者一致信度</li></ul></li><li>效度<ul><li>內容、效標、構念</li></ul></li></ul><p><strong>工具一定要具有信度與效度</strong></p><h2>10. 資料分析</h2><ul><li>量化<ul><li>說明要如何分析變項</li><li>平均數、標準差、相關係數</li><li>T檢定、one way、 two way ANOVA</li></ul></li><li>質性<ul><li>資料來源的編碼</li><li>資料類別的編碼</li></ul></li></ul><!-- rebuild by neat -->","categories":["Lecture","論文寫作"],"tags":["碩士論文","研究計畫"]},{"title":"git branch(分支)","url":"/2019/09/01/git-branch/","content":"<!-- build time:Sun May 23 2021 15:10:01 GMT+0800 (GMT+08:00) --><h2>git branch(分支)簡介</h2><p>branch的存在是為了將修改紀錄的流程分開儲存，各個分支間的修改紀錄不會互相影響，所以在Repository中可以同時進行多個不同的修改。因此就算是已經上線的網站或是服務，團隊成員還是可以建立各自的分支專注在自己負責開發的部分，等到完成了各自負責開發的部分後，待團隊成員確認沒有問題之後，再將完成開發的分支導回主要分支<code>master</code>。這樣的話，在開發過程中就不會影響到原有的網站或服務，而且過程中所有的commit歷史都會被儲存，出現bug時能更容易地找出問題所在。</p><p>Git在第一次提交commit後會出現<code>master</code>分支，在這之後，如果沒有新建立其他 分支，所有commit都會儲存在主要分支<code>master</code>中。</p><p><strong><a href=\"https://backlog.com/git-tutorial/tw/stepup/stepup1_1.html\" target=\"_blank\" rel=\"noopener\">branch參考資料</a></strong></p><p><strong><a href=\"https://nvie.com/posts/a-successful-git-branching-model/\" target=\"_blank\" rel=\"noopener\">分支圖解</a></strong></p><p><a id=\"more\"></a></p><h2>HEAD - 了解目前所在位置</h2><p>在git中，HEAD代表了目前分支最新的commit，但可以使用<code>checkout</code>命令來移動HEAD的指向，查看過去其他commit的內容。</p><p></p><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">// HEAD: 目前所在位置的指標</span><br><span class=\"line\"></span><br><span class=\"line\">//瀏覽目前的分支</span><br><span class=\"line\">git branch </span><br><span class=\"line\"></span><br><span class=\"line\">// 查看該次commit內容</span><br><span class=\"line\">git checkout [commit亂數版本號前四碼] </span><br><span class=\"line\"></span><br><span class=\"line\">// 回到master最後一次commit內容</span><br><span class=\"line\">git checkout master</span><br></pre></td></tr></table></figure><p></p><h2>建立新分支</h2><p></p><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">// 建立新分支</span><br><span class=\"line\">git branch [新分支名稱]</span><br><span class=\"line\"></span><br><span class=\"line\">// 切換到分支</span><br><span class=\"line\">git checkout [分支名稱]</span><br></pre></td></tr></table></figure><p></p><p></p><h2>合併分支</h2><p>新建立的分支編輯並確認完內容之後，要進行合併分支，首先先將HEAD指向回<code>master</code>然後使用<code>merge</code>指令合併分支</p><p></p><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">// 將HEAD指向回master</span><br><span class=\"line\">git checkout master</span><br><span class=\"line\"></span><br><span class=\"line\">// 合併master與feature1</span><br><span class=\"line\">git merge [分支名稱]</span><br></pre></td></tr></table></figure><p></p><p></p><p>branch合併後，2個branch將會同時指向同一個commit紀錄。</p><p></p><p></p><h3>同時更新，無衝突merge</h3><p>新建立branch 後，在未提交commit前，兩個branch內容並沒有任何差別；而在提交了commit後才會形成所謂的分支。若新分支與master分別提交commit的內容無衝突(例如：在master中繼續編輯H1並提交commit；在feature1分支中編輯css檔案並提交commit)，可以執行上述<code>merge</code>指令即會將各自commit差異部分直接合併。</p><h3>git merge 解決衝突篇</h3><p>在多人協作時可能發生同時有人修改到同一隻檔案的同一行程式碼，在這樣的情況下進行合併分支就會出現衝突。</p><p>先在專案資料夾中新增<code>index.html</code>並提交commit，然後新增<code>feature1</code>分支，接下來切換到<code>feature1</code>分支新增<code>all.css</code>並編輯<code>index.html</code>如下圖後提交commit</p><p></p><p>接下來，切換回master分支，同樣編輯<code>index.html</code>檔案中的<code><h1></code>如下圖</p><p>接下來執行<code>merge</code>指令後會出現以下提示，要求處理衝突後再執行合併</p><p>在<code>master</code>分支下開啟<code>index.html</code>會發現內容顯示如下圖，會有相關標記呈現衝突的內容</p><p>這裡可自行判斷須留下的內容，在這個例子中我們選擇保留2個<code>h1</code>內容，移除標記後存檔</p><p>再提交一次commit，即可完成2個branch合併</p><!-- rebuild by neat -->","categories":["git"],"tags":["git","branch"]},{"title":"Wargame","url":"/2019/08/17/Wargame/","content":"<!-- build time:Sun May 23 2021 15:10:01 GMT+0800 (GMT+08:00) --><p><img src=\"/2019/08/17/Wargame/wargame.jpg\" title=\"Wargame 白帽菁英萌芽計劃\"></p><h2>Wargame 白帽菁英萌芽計劃</h2><p>ISDA 20190817到中山大學舉辦"Wargame 白帽菁英萌芽計劃 "；參加完課程中的介紹與實際操作，對於資訊安全有更多的了解。<a id=\"more\"></a></p><h2>APT(Advanced Persistent Threat)攻擊</h2><p>課程首先由趨勢科技講師介紹關於APT Campaign，APT攻擊有以下的特點：</p><ul><li>目標多在於資料的蒐集，而非以直接獲得金錢為目的(勒索軟體或釣魚郵件等)</li><li>攻擊對象多為選擇過的特定目標</li><li>因為只針對特定的目標，非廣泛在網路上發動，一般防毒軟體較難抵擋</li><li>攻擊者大多會努力隱藏自己的蹤跡</li><li>資料打包的行為較難被發現</li></ul><p>趨勢科技講師提到，針對APT Campaign，每個團隊會有慣用的行為模式，可藉由行為(user id命名習慣、攻擊方式、檔案的命名等等)、基礎建設(url、IP、機器租用與配置等等)及Profile(檔案命名邏輯、架構等等)三方面與其他的APT Campaign比對，以反向工程的方式找What they like? 以及 What they can do?</p><h2>Wargame</h2><p>Wargame 涉及到了滲透測試，ISDA講師瓦特提到因為滲透測試如果再一般網站上進行，會有觸犯<a href=\"https://law.moj.gov.tw/LawClass/LawParaDeatil.aspx?pcode=C0000001&bp=53\" target=\"_blank\" rel=\"noopener\">刑法妨害電腦使用罪</a>，切勿在一般網站上進行。</p><p>以下是講師提到的可以進行練習的地方</p><ul><li>BUG BOUNTY</li><li>CAPTURE THE FLAG</li><li>WARGAME FOR BEGINER</li></ul><p>課程中實際練習了Game #1 Level 1 - Level 3，透過3關的練習學到了更多的資安觀念。</p><h2>Google Hacking</h2><p>只要透過特定的關鍵字組合，很容易就會在網路上發現到意想不到的資料，因此在網站配置中要留意敏感的資料或目錄是否會不小心讓網站門戶大開。除非是原本就設定為開放式的資料，否則會建議關閉目錄檢視的功能。</p><blockquote><p><strong>Google Hacking常用關鍵字</strong></p><ul><li>site: (搜尋特定網址)</li><li>inurl: (搜尋特定連結)</li><li>intext: (搜尋網頁內文字)</li><li>intitle: (搜尋網頁標題)</li><li>filetype: (搜尋特定檔案格式)</li><li>link: (搜尋互相連結的網頁)</li><li>"index of" (搜尋開放目錄瀏覽)</li><li>cache: (顯示網頁在google中的暫存資料)</li></ul></blockquote><p><strong>※若網站配置有<code>robot</code>.txt檔案防止搜尋引擎爬蟲爬取敏感資料，爬取範圍建議要用正面表列，避免使用Disallow反而讓有心人士知道哪些資料是敏感的資料，而更想要去查看</strong></p><p><strong>※在開發中不要因為貪圖方便而將敏感資訊註記在註解中，雖然網站上不會顯示，但不代表不會被發現。</strong></p><p><strong>※避免使用弱密碼或任何的預設密碼，容易被使用字典攻擊攻破</strong></p><p><strong>※拿到一個檔案時可用以下網站檢測是否含有目前已知的病毒，或是被刻意更改過附檔名</strong></p><p><a href=\"http://checkfiletype.com/\" target=\"_blank\" rel=\"noopener\">Check file type</a></p><p><a href=\"https://www.virustotal.com/\" target=\"_blank\" rel=\"noopener\">Virus Total</a></p><p><strong>講師有提醒要注意的是在上面這兩的網站切勿上傳私人檔案或照片，因上傳的檔案，有付費的人是可以下載的</strong></p><p><strong>※開發網站千萬不要使用明文方式將使用者密碼儲存於資料庫欄位中，最好是使用雜湊密碼加鹽的方式，增加密碼的安全性</strong></p><p><a href=\"https://blogs.technet.microsoft.com/twsecurity/2014/02/10/163/\" target=\"_blank\" rel=\"noopener\">密碼儲存要加”鹽”才夠安全</a></p><h2>小結</h2><p>講師有提到為了還沒有參加過相關課程的人的權益，不要公開分享關卡的內容，所以這邊僅針對概念的部分作紀錄，這只是初階的入門課程，藉由紀錄把資安的概念留在心中，也許未來會使用到，也希望未來還有參加進階課程的機會。</p><!-- rebuild by neat -->","categories":["Lecture","資安"],"tags":["ISDA","資訊安全","Wargame","白帽菁英萌芽計劃"]},{"title":"git 指令大全","url":"/2019/08/31/git-command/","content":"<!-- build time:Sun May 23 2021 15:10:01 GMT+0800 (GMT+08:00) --><p>本篇是git指令蒐集，供快速查詢用</p><p>更多指令可到<a href=\"https://backlog.com/git-tutorial/tw/reference/\" target=\"_blank\" rel=\"noopener\">連猴子都能懂得Git入門指南</a>中查詢</p><p><a id=\"more\"></a></p><h2>基礎設定</h2><p></p><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">// 查詢版本</span><br><span class=\"line\">git version</span><br><span class=\"line\"> </span><br><span class=\"line\">// 查詢設定列表</span><br><span class=\"line\">git config --list</span><br><span class=\"line\"></span><br><span class=\"line\">// 編輯git設定</span><br><span class=\"line\">git config -e [--global]</span><br><span class=\"line\"> </span><br><span class=\"line\">// 輸入姓名</span><br><span class=\"line\">git config --global user.name "你的名字"</span><br><span class=\"line\"> </span><br><span class=\"line\">// 輸入email</span><br><span class=\"line\">git config --global user.email "你的email"</span><br></pre></td></tr></table></figure><p></p><h2>新增本地/遠端數據庫</h2><p></p><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">// 在本地資料夾新增數據庫</span><br><span class=\"line\">git init</span><br><span class=\"line\"></span><br><span class=\"line\">// 新建一個資料夾，並初始化為本地數據庫</span><br><span class=\"line\">git init [資料夾名稱]</span><br><span class=\"line\"> </span><br><span class=\"line\">// 複製遠端數據庫</span><br><span class=\"line\">git clone 遠端數據庫網址</span><br></pre></td></tr></table></figure><p></p><h2>增加/刪除檔案</h2><p></p><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">// 增加檔案進入索引</span><br><span class=\"line\">git add [檔案名稱]</span><br><span class=\"line\"> </span><br><span class=\"line\">// 增加全部檔案進入索引</span><br><span class=\"line\">git add .</span><br><span class=\"line\"></span><br><span class=\"line\">// 刪除工作區檔案，並將這次的刪除加入索引中</span><br><span class=\"line\">git rm [檔案名稱]</span><br><span class=\"line\"></span><br><span class=\"line\">// 停止追蹤特定檔案，但檔案仍會保留在工作區</span><br><span class=\"line\">git rm --cached [檔案名稱]</span><br><span class=\"line\"></span><br><span class=\"line\">// 重新命名檔案，並將這次的重新命名加入索引中</span><br><span class=\"line\">git mv [file-original] [file-renamed]</span><br><span class=\"line\"> </span><br><span class=\"line\"></span><br><span class=\"line\">// 將索引提交到數據庫</span><br><span class=\"line\">git commit -m "更新訊息"</span><br><span class=\"line\"></span><br><span class=\"line\">// 提交索引中指定的檔案到數據庫</span><br><span class=\"line\">git commit [檔案名稱1] [檔案名稱2] ... -m "更新訊息"</span><br><span class=\"line\"></span><br><span class=\"line\">// 使用一次新的commit來替代上一次的commit</span><br><span class=\"line\">// 如果檔案沒有任何的更新變化，則用來改寫上一次的commit"更新訊息"</span><br><span class=\"line\">git commit --amend -m [message]</span><br></pre></td></tr></table></figure><p></p><h2>查看訊息</h2><p></p><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">// 查詢狀態</span><br><span class=\"line\">git status</span><br><span class=\"line\"> </span><br><span class=\"line\">// 顯示歷史紀錄</span><br><span class=\"line\">git log</span><br><span class=\"line\"></span><br><span class=\"line\">// 顯示commit歷史，以及每次commit發生變更的檔案</span><br><span class=\"line\">git log --stat</span><br><span class=\"line\"> </span><br><span class=\"line\">// 根據關鍵字搜索提交歷史</span><br><span class=\"line\">git log -S [keyword]</span><br><span class=\"line\"></span><br><span class=\"line\">// 顯示某個文件的版本歷史，包括重新命名</span><br><span class=\"line\">git log --follow [file]</span><br><span class=\"line\">it whatchanged [file]</span><br></pre></td></tr></table></figure><p></p><h2>還原指令</h2><p></p><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">// 還原工作目錄與索引，會跟最後一次 commit 保持一樣</span><br><span class=\"line\">git reset --hard </span><br><span class=\"line\"> </span><br><span class=\"line\">// 全部檔案取消索引</span><br><span class=\"line\">git reset HEAD </span><br><span class=\"line\"> </span><br><span class=\"line\">// 單一檔案取消索引</span><br><span class=\"line\">git reset HEAD [檔案名稱]</span><br><span class=\"line\"> </span><br><span class=\"line\">// 恢復單一檔案到最新 commit 狀態</span><br><span class=\"line\">git checkout [檔案名稱] </span><br><span class=\"line\"> </span><br><span class=\"line\">// 刪除最近一次 commit </span><br><span class=\"line\">git reset --hard HEAD^ </span><br><span class=\"line\"> </span><br><span class=\"line\">// 上面語法如果刪除錯了可以再用此語法還原</span><br><span class=\"line\">git reset --hard ORIG_HEAD </span><br><span class=\"line\"> </span><br><span class=\"line\">// 刪除最近一次 commit，但保留異動內容</span><br><span class=\"line\">git reset --soft HEAD^</span><br><span class=\"line\"> </span><br><span class=\"line\">// commit 後發現有幾個檔案忘了加入進去，想要補內容進去時</span><br><span class=\"line\">git commit --amend</span><br></pre></td></tr></table></figure><p></p><h2>分支</h2><p></p><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">// 顯示所有本地分支</span><br><span class=\"line\">git branch</span><br><span class=\"line\"></span><br><span class=\"line\">// 列出所有遠端分支</span><br><span class=\"line\">git branch -r</span><br><span class=\"line\"></span><br><span class=\"line\">// 列出所有本地分支和遠端分支</span><br><span class=\"line\">git branch -a</span><br><span class=\"line\"> </span><br><span class=\"line\">// 新增分支</span><br><span class=\"line\">git branch [分支名稱]</span><br><span class=\"line\"> </span><br><span class=\"line\">// 切換分支</span><br><span class=\"line\">git checkout [分支名稱]</span><br><span class=\"line\"> </span><br><span class=\"line\">// 合併指定分支到目前的分支</span><br><span class=\"line\">git merge [分支名稱]</span><br><span class=\"line\"> </span><br><span class=\"line\">// 刪除分支</span><br><span class=\"line\">git branch -d [分支名稱]</span><br></pre></td></tr></table></figure><p></p><h2>遠端數據庫操作</h2><p></p><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">// 複製遠端數據庫</span><br><span class=\"line\">git clone 遠端數據庫網址</span><br><span class=\"line\"> </span><br><span class=\"line\">// 查詢遠端數據庫</span><br><span class=\"line\">git remote</span><br><span class=\"line\"></span><br><span class=\"line\">// 下載遠端數據庫的所有變動</span><br><span class=\"line\">git fetch [remote]</span><br><span class=\"line\"> </span><br><span class=\"line\">// 將本地分支推送到遠端分支</span><br><span class=\"line\">git push [遠端數據庫名稱] [遠端分支名稱]</span><br><span class=\"line\"> </span><br><span class=\"line\">// 將遠端分支拉下來與本地分支進行合併</span><br><span class=\"line\">git pull [遠端數據庫名稱] [遠端分支名稱]</span><br><span class=\"line\"></span><br><span class=\"line\">// 推送所有分支到遠端數據庫</span><br><span class=\"line\">git push [remote] --all</span><br></pre></td></tr></table></figure><p></p><h2>標籤</h2><p></p><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">// 查詢標籤</span><br><span class=\"line\">git tag</span><br><span class=\"line\"> </span><br><span class=\"line\">// 查詢詳細標籤</span><br><span class=\"line\">git tag -n</span><br><span class=\"line\"> </span><br><span class=\"line\">// 切換到標籤的commit</span><br><span class=\"line\">git checkout [標籤名稱]</span><br><span class=\"line\"></span><br><span class=\"line\">// 刪除標籤</span><br><span class=\"line\">git tag -d 標籤名稱</span><br><span class=\"line\"> </span><br><span class=\"line\">// 新增輕量標籤</span><br><span class=\"line\">git tag 標籤名稱</span><br><span class=\"line\"> </span><br><span class=\"line\">// 新增標示標籤</span><br><span class=\"line\">git tag -am "備註內容" 標籤名稱</span><br></pre></td></tr></table></figure><p></p><h2>暫存</h2><p></p><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">// 暫時儲存當前目錄</span><br><span class=\"line\">git stash</span><br><span class=\"line\"> </span><br><span class=\"line\">// 瀏覽 stash 列表</span><br><span class=\"line\">git stash list </span><br><span class=\"line\"> </span><br><span class=\"line\">// 還原暫存</span><br><span class=\"line\">git stash pop</span><br><span class=\"line\"> </span><br><span class=\"line\">// 清除最新暫存</span><br><span class=\"line\">git stash drop</span><br><span class=\"line\"> </span><br><span class=\"line\">// 清除全部暫存</span><br><span class=\"line\">git stash clear</span><br></pre></td></tr></table></figure><p></p><!-- rebuild by neat -->","categories":["git"],"tags":["git","指令大全"]},{"title":"架設Hexo + GitHub過程","url":"/2019/07/26/hexo-tutorial/","content":"<!-- build time:Sun May 23 2021 15:10:01 GMT+0800 (GMT+08:00) --><h2>前言</h2><p>看到了一些關於Hexo + GitHub 的介紹，有了想要嘗試的念頭，參考了一些網路上分享的教學文章，花了一點時間測試，在這裡留下過程紀錄</p><p><a id=\"more\"></a></p><h2>開始之前</h2><h3>使用的版本與環境</h3><p></p><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">node: 10.16.0</span><br><span class=\"line\">IDE:VsCode</span><br></pre></td></tr></table></figure><p></p><h2>安裝Hexo</h2><p>使用Terminal 指令安裝 hexo</p><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ npm install hexo-cli -g</span><br></pre></td></tr></table></figure><p></p><p>＊指令說明:透過 npm 在 全域 (-g) 下安裝 Hexo-Cli</p><p>安裝成功後，輸入以下指令可查看版本</p><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ hexo version</span><br></pre></td></tr></table></figure><p></p><h2>建立初始化Hexo</h2><p></p><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ hexo init projectName </span><br><span class=\"line\">$ cd <blogName> </span><br><span class=\"line\">$ npm install</span><br></pre></td></tr></table></figure><p></p><p>＊指令說明:建立初始化 blog，<code>projectName</code> 可自訂部落格名稱，然後移動到剛創建的 <code>projectName</code> 資料夾裡，安裝相依套件(將 package.json 相依套件下載下來)</p><h2>啟動Hexo Server</h2><p></p><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ hexo server</span><br></pre></td></tr></table></figure><p></p><p>到這裡就可以在本機瀏覽器看到初始化的Hexo Blog</p><h2>更換主題</h2><p>這裡更換了<a href=\"https://theme-next.iissnan.com/\" target=\"_blank\" rel=\"noopener\">NexT</a> 依官方頁面說明，採用<code>Git clone</code> 方式安裝NexT主題</p><p></p><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ cd your-hexo-site</span><br><span class=\"line\">$ git clone https://github.com/iissnan/hexo-theme-next themes/next</span><br></pre></td></tr></table></figure><p></p><p>完成後開啟網站配置文件， 找到 <code>theme</code>，並將值更改為<code>next</code></p><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">theme: next</span><br></pre></td></tr></table></figure><p></p><p>存檔後重新啟動Hexo server就完成了主題的更換，還有更多的設定細節可以在<a href=\"https://theme-next.iissnan.com/getting-started.html\" target=\"_blank\" rel=\"noopener\">官方頁面</a>中看到更詳細說明</p><h2>部落格配置檔案</h2><p>進入Blog資料夾中開啟 _config.yml 檔案，編輯以下內容 <strong>yaml 檔裡，”:”後一定要有一個空格</strong> 下面是 hexo 的預設配置，可以自修改。</p><p></p><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\"># Site</span><br><span class=\"line\">title: /標題(會顯示在網頁標題與頁首)/</span><br><span class=\"line\">subtitle: /子標題(顯示在頁首)/</span><br><span class=\"line\">description: /內容描述(給搜尋引擎看的)/</span><br><span class=\"line\">author: /作者(顯示在頁尾)/</span><br><span class=\"line\">language: /網站預設語言(台灣:zh-tw)/</span><br><span class=\"line\">timezone: /時區(預設使用你電腦的時區)/</span><br><span class=\"line\"></span><br><span class=\"line\"># URL</span><br><span class=\"line\">url: /網站的網域位址/</span><br><span class=\"line\">root: /網站根目錄/</span><br><span class=\"line\">permalink: /文章目錄(預設使用 YYYY\\MM\\DD\\文章名稱)/</span><br><span class=\"line\"></span><br><span class=\"line\"># Extensions</span><br><span class=\"line\">theme: /網站的佈景主題/</span><br><span class=\"line\"> (可以到"https://hexo.io/themes/"下載喜歡的佈景放置到 theme 目錄裡)</span><br><span class=\"line\"></span><br><span class=\"line\"># Deployment</span><br><span class=\"line\">deploy:</span><br><span class=\"line\"> type: /發佈型態/ 例如(git、heroku、rsync、openshift、ftpsync)</span><br><span class=\"line\"> repository: /部署位置/ 例如([email protected]:帳號/REPO名.git)</span><br><span class=\"line\"> branch: /分支/ 例如(master、gh-pages)</span><br><span class=\"line\"> message: /部署訊息/</span><br></pre></td></tr></table></figure><p></p><h2>部屬到GitHub</h2><p>###安裝插件 部屬之前必須先安裝一個插件，因為預設 Hexo 並沒有安裝</p><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ npm install hexo-deployer-git --save</span><br></pre></td></tr></table></figure><p></p><h3>建立GitHub Repositories</h3><p>去 <a href=\"https://github.com/\" target=\"_blank\" rel=\"noopener\">GitHub</a> 官網登入,建立新的Repositories</p><p><img src=\"/2019/07/26/hexo-tutorial/Create.JPG\" title=\"建立Repositories\"></p><p>在看到下面畫面時，代表Repositories建立成功 <img src=\"/2019/07/26/hexo-tutorial/QuickSetup.JPG\" title=\"Repositories建立成功\"></p><p>另外因為要上傳到 GitHub，網站設定檔_config.yml 還有 Deployment 的地方必須調整，將上方畫面中的內容填入 <code>repo:</code>中(注意冒號後面有一個空格)</p><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">deploy:</span><br><span class=\"line\"> type: git</span><br><span class=\"line\"> repo: https://github.com/mancen/mancen.github.io.git</span><br><span class=\"line\"> branch: master</span><br></pre></td></tr></table></figure><p></p><p>接下來到GitHub的Settings頁面中選擇一個模板，隨便選就可以 <img src=\"/2019/07/26/hexo-tutorial/GitHubPages.JPG\" title=\"點選\" alt=\"Choose a theme\"></p><p>這裡只是要確定GitHub pages的URL，因為在網路上看到的教學文很多都沒有提到這部分，我在這裡卡關有點久，因為我拿到的URL和大部分教學文的規則不同，試了好幾次才發現一直拿到404的原因.....</p><p><img src=\"/2019/07/26/hexo-tutorial/GitHubPages_URL.JPG\" title=\"這就是部落格的URL\"></p><h3>將部落格上傳到GitHub</h3><p>上面的步驟都完成之後，在終端機輸入以下指令</p><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ hexo d g</span><br></pre></td></tr></table></figure><p></p><p>＊指令說明： d →部屬 g →生成靜態頁面</p><h2>其他指令</h2><h3>新增文章</h3><p></p><figure class=\"highlight bash\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ hexo new <span class=\"string\">\"My New Post\"</span></span><br></pre></td></tr></table></figure><p></p><p>More info: <a href=\"https://hexo.io/docs/writing.html\" target=\"_blank\" rel=\"noopener\">Writing</a></p><h3>啟動Hexo 伺服器</h3><p></p><figure class=\"highlight bash\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ hexo server</span><br></pre></td></tr></table></figure><p></p><p>More info: <a href=\"https://hexo.io/docs/server.html\" target=\"_blank\" rel=\"noopener\">Server</a></p><h3>產生靜態頁面</h3><p></p><figure class=\"highlight bash\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ hexo generate</span><br></pre></td></tr></table></figure><p></p><p>More info: <a href=\"https://hexo.io/docs/generating.html\" target=\"_blank\" rel=\"noopener\">Generating</a></p><h3>部屬到GitHub</h3><p></p><figure class=\"highlight bash\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ hexo deploy</span><br></pre></td></tr></table></figure><p></p><p>More info: <a href=\"https://hexo.io/docs/deployment.html\" target=\"_blank\" rel=\"noopener\">Deployment</a></p><h3>刪除已生成的靜態頁面及快取檔案</h3><p></p><figure class=\"highlight bash\"><table><tr><td class=\"code\"><pre><span class=\"line\">$ hexo clean</span><br></pre></td></tr></table></figure><p></p><!-- rebuild by neat -->","categories":["hexo"],"tags":["hexo","GitHub"]},{"title":"git tag","url":"/2019/09/01/git-tag/","content":"<!-- build time:Sun May 23 2021 15:10:01 GMT+0800 (GMT+08:00) --><h2>git tag</h2><p>tag(標籤)是用來標記重要的commit，類似版本名稱或是版本號。</p><p>git 標籤分為<strong>輕量標籤(lightweight tag)<strong>和</strong>標示標籤(annotated tag)</strong>。</p><p><a id=\"more\"></a></p><ul><li><p>輕量標籤(lightweight tag)</p><ul><li>不可變更的暫時標籤</li><li>可以添加名稱</li></ul></li><li><p>標示標籤(annotated tag)</p><ul><li>可以添加打標簽者的名稱、email及日期</li><li>可以添加名稱</li><li>可以添加註解</li><li>可以添加簽名</li></ul></li></ul><p>相關指令如下</p><p></p><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">// 查詢標籤</span><br><span class=\"line\">git tag</span><br><span class=\"line\"> </span><br><span class=\"line\">// 查詢詳細標籤</span><br><span class=\"line\">git tag -n</span><br><span class=\"line\"></span><br><span class=\"line\"></span><br><span class=\"line\">// 刪除標籤</span><br><span class=\"line\">git tag -d 標籤名稱</span><br><span class=\"line\"> </span><br><span class=\"line\">// 新增輕量標籤</span><br><span class=\"line\">git tag 標籤名稱</span><br><span class=\"line\"> </span><br><span class=\"line\">// 新增標示標籤</span><br><span class=\"line\">git tag -am "備註內容" 標籤名稱</span><br><span class=\"line\"></span><br><span class=\"line\">// 切換到標籤的commit</span><br><span class=\"line\">git checkout [標籤名稱]</span><br></pre></td></tr></table></figure><p></p><!-- rebuild by neat -->","categories":["git"],"tags":["git","tag"]},{"title":"git 基本入門","url":"/2019/08/31/git-begining/","content":"<!-- build time:Sun May 23 2021 15:10:01 GMT+0800 (GMT+08:00) --><h2>前置準備</h2><blockquote><p><a href=\"https://git-scm.com/\" target=\"_blank\" rel=\"noopener\">git 安裝網址 : https://git-scm.com/</a></p></blockquote><blockquote><p>使用的終端機： cmder</p></blockquote><p>檢查是否安裝完成</p><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">git --version</span><br></pre></td></tr></table></figure><p></p><p><a id=\"more\"></a></p><h2>基本指令</h2><ol><li>移動路徑： <code>cd 路徑</code></li><li>回上一層: <code>cd ..</code> (兩個.. 不是一個.)</li><li>展開列表: <code>ls</code></li><li>開新資料夾: <code>mkdir 資料夾名稱</code></li><li>開新檔案: <code>touch 檔案名稱</code></li></ol><h2>環境設定</h2><p>設定使用者名稱，讓git版本控制終能顯示修改人及聯絡e-mail</p><ol><li>設定使用者e-mail</li></ol><p></p><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">git config --global user.email "使用者e-mail"</span><br></pre></td></tr></table></figure><p></p><ol start=\"2\"><li>設定使用者名稱</li></ol><p></p><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">git config --global user.name "使用者名稱"</span><br></pre></td></tr></table></figure><p></p><ol start=\"3\"><li>查看是否設定成功</li></ol><p></p><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">git config --list</span><br></pre></td></tr></table></figure><p></p><h2>git 基礎操作</h2><p><img src=\"/2019/08/31/git-begining/git.png\" title=\"Git基本流程與指令\"></p><h3>建立本地數據庫(repository)</h3><ol><li><p>新增一個專案資料夾<code>gitProject</code></p><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">mkdir gitProject</span><br></pre></td></tr></table></figure><p></p></li><li><p>使用終端機<code>cd</code>指令移動到該資料夾</p><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">cd gitProject</span><br></pre></td></tr></table></figure><p></p></li><li><p>將專案資料夾建立成本地端數據庫</p><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">git init</span><br></pre></td></tr></table></figure><p></p></li><li><p>列出專案資料夾中的檔案和資料夾(-l 列出詳細資料 -a 列出隱藏資料夾)</p><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">ls -la</span><br></pre></td></tr></table></figure><p></p></li></ol><p>若本地數據庫建立成功，資料夾內會出現一個隱藏的<code>.git</code>資料夾；終端機顯示的資料夾路徑後方會出現<code>master</code></p><p>未來在專案資料夾中的任何修改與變動，都會以git專有的格式記錄在<code>.git</code>資料夾中，可以去查看資料夾裡面的內容，但是千萬不要去修改或刪除該資料夾或其中的內容。</p><p><img src=\"/2019/08/31/git-begining/git_init.JPG\" title=\"建立本地數據庫\"></p><h3>git Commit (提交)</h3><p>每次提交的Commit都會和前一個版本的Commit比較，所有和上一個版本不同的變更都會有紀錄。</p><p>在流程中，專案資料夾新增檔案後，需先新增(add)至"索引"中，等確認新增的檔案都沒有問題後，就可以提交(commit)一個版本。</p><h4>git commit 會使用到的指令</h4><ol><li>加入索引: <code>git add .</code></li><li>檢查狀態: <code>git status</code></li><li>提交更新: <code>git commit -m "修改紀錄"</code></li><li>查詢版本紀錄: <code>git log</code></li></ol><p>先在專案資料夾中新增以下檔案：</p><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">index.html</span><br><span class=\"line\">test.txt</span><br><span class=\"line\">css/all.css</span><br></pre></td></tr></table></figure><p></p><p>查看尚未加入索引的檔案</p><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">git status</span><br></pre></td></tr></table></figure><p></p><p>接下來將檔案加入索引中(<code>.</code> 表示加入全部，也可以指定檔案名稱，只加入特定檔案)</p><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">git add .</span><br></pre></td></tr></table></figure><p></p><p>檢查是否加入成功</p><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">git status</span><br></pre></td></tr></table></figure><p></p><p><img src=\"/2019/08/31/git-begining/git_status.JPG\" title=\"查看檔案是否已加入索引\"></p><p>成功加入索引的檔案會變成綠色，新增後尚未加入索引的檔案會以紅色顯示；如有未加入索引的檔案，可再執行一次<code>git add .</code>將所有檔案加入索引中，再執行<code>git status</code>查看狀態。</p><p>確認索引檔案無誤後，執行已下指令提交版本</p><p></p><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">git commit -m "修改紀錄"</span><br></pre></td></tr></table></figure><p></p><p>提交後，開啟index.html，將原來的空白檔案加入<code>html</code> 標籤內容後儲存，再新增一個<code>index2.html</code>檔案；再執行<code>git status</code>會出現一筆modified紀錄，一筆Untracked紀錄。</p><p><img src=\"/2019/08/31/git-begining/git_status2.JPG\" title=\"查看檔案是否已加入索引\"></p><p>執行<code>git add .</code>將檔案全部加入索引後，再提交目前版本的commit，再次查詢<code>git log</code>將會看到2個版本紀錄。</p><p><img src=\"/2019/08/31/git-begining/git_log.JPG\" title=\"查看是否已成功加入commit\"></p><p>在<code>git log</code>查詢中，可以看到每個版本的作者、作者e-mail、提交時間、變更描述等資訊，每個commit版本中也都有一個專屬的版本亂數紀錄</p><h3>使用 .gitignore來忽略檔案</h3><p>在使用git時會有些敏感的資料或是暫存檔是不想要或是不需要被上傳的，這時候就可以使用<code>.gitignore</code>來讓這些檔案不要進到版本控制中。先在repository資料夾中新增<code>.gitignore</code>檔案，開啟後以文字編輯器(ex. Sublime Text)開啟並編輯，</p><ol><li><p>使用 <code>.gitignore</code>來忽略檔案 <code>.gitignore</code>可加入要忽略的檔案名稱，忽略特定的檔案(<strong><code>.gitignore</code> 不能忽略自己</strong>)。</p></li><li><p>忽略所有特定附檔名檔案 <code>.gitignore</code>可使用萬用字元<code>*</code>，例如<code>*.html</code>即忽略所有的html檔案。</p></li><li><p>忽略兔定資料夾 <code>.gitignore</code>也可以忽略整個資料夾，例如<code>css/</code>即整個css資料價均不需要被追蹤</p></li></ol><blockquote><p><strong><a href=\"https://github.com/github/gitignore\" target=\"_blank\" rel=\"noopener\">.gitignore 大全</a></strong> 提供各種程式語言在版本控制中， <code>.gitignore</code>範例，可以看到各種程式語言中不需要進入版控的內容各自有哪些</p></blockquote><h3>工作狀態還原技巧</h3><ol><li><p>取消索引</p><p>1.1 全部檔案取消索引</p><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">git reset HEAD</span><br></pre></td></tr></table></figure><p></p><p>1.2 單一檔案取消索引</p><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">git reset HEAD 檔案名稱</span><br></pre></td></tr></table></figure><p></p></li></ol><p>使用取消索引，可將所有檔案或單一檔案狀態從"Changes to be committed"變成"Untracked"，使用情況為檔案已不打算提交，就可以使用取消索引功能。</p><ol start=\"2\"><li><p>還原檔案</p><p>2.1 恢復單一檔案到最後一次commit的狀態(應用情況為單一檔案在編輯的時後被改壞了，卻不確定是哪個部分造成的問題)</p><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">git checkout 檔案名稱</span><br></pre></td></tr></table></figure><p></p><p>2.2 還原工作目錄與索引到最後一次commit的狀態(應用情況為編輯的多個檔案後，網站被改壞了，可直接回復到最後一次commit的狀態)</p><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">git reset --hard</span><br></pre></td></tr></table></figure><p></p></li></ol><!-- rebuild by neat -->","categories":["git"],"tags":["git"]},{"title":"GitHub 基本操作","url":"/2019/09/01/github-tutorial/","content":"<!-- build time:Sun May 23 2021 15:10:01 GMT+0800 (GMT+08:00) --><h2>GitHub介紹</h2><p>GitHub及是一種遠端git託管服務，用來將本地數據庫(Local Repository)儲存到遠端數據庫(Remote Repository)；工程師會將開源的專案程式碼或是與他人協作的專案用遠端git的方式分享，其他的工程師也可以透過git提供相關的意見。 我們也可以在GitHub上看到其他開發者分享到GitHub的Code，及過去修改內容的紀錄。</p><p><a id=\"more\"></a></p><p>但要注意的是，如過是一般申請GitHub免費帳號，只能開啟Public Repository，上傳的程式碼是會被其他的開發者看到的，所以要避免上傳一些屬於商業邏輯或是一些機密的code。當然GitHub也有提供Private Repository，但會有費用產生。</p><h2>註冊GitHub帳號</h2><p>到<a href=\"https://github.com/\" target=\"_blank\" rel=\"noopener\">GitHub</a>，點擊Sign up後依指令操作，第三步驟的問卷調查可跳過。</p><p>另外，若是學生身分擁有edu.tw結尾的e-mail的話，可考慮申請<a href=\"https://education.github.com/pack\" target=\"_blank\" rel=\"noopener\">Student Developer Pack</a>，學生開發包中有相當多的服務可以申請，其中包含將GitHub帳號免費升級為Micro Account；更多學生開發包的資訊可以參考<a href=\"https://free.com.tw/github-student-developer-pack/\" target=\"_blank\" rel=\"noopener\">免費資源網路社群</a>。</p><h2>新增遠端數據庫</h2><p>在GitHub點選「+」→ New repository</p><p><img src=\"/2019/09/01/github-tutorial/newRepository.png\" title=\"新增Repository\"></p><p><img src=\"/2019/09/01/github-tutorial/creatRepository.JPG\" title=\"命名Repository\"></p><p>完成後會有以下畫面出現 <img src=\"/2019/09/01/github-tutorial/QuickSetup.png\" title=\"GitHub設定細節\"></p><h2>連結遠端數據庫</h2><p>接下來打開終端機，在本機建立一個專案資料夾<code>githubtest</code>，移動到專案資料夾下<code>cd githubtest</code>，然後貼上在上圖中複製的HTTPS url</p><p></p><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">mkdir githubtest</span><br><span class=\"line\">cd githubtest</span><br><span class=\"line\">git clone [GitHub頁面中 https url]</span><br></pre></td></tr></table></figure><p></p><p>因為新建立的遠端資料庫是空資料庫，所以clone完成後終端機會出現以下訊息</p><blockquote><p>warning: You appear to have cloned an empty repository.</p></blockquote><p>在打開檔案總管查看，會發現在專案資料夾<code>githubtest</code>下，多出了<code>gittest</code>資料夾 <img src=\"/2019/09/01/github-tutorial/Local.JPG\" title=\"clone完成後本地數據庫gittest\"></p><p>接下來，新增一個<code>index.html</code>檔案，並提交第一次的commit，然後執行<code>git push</code>指令 <img src=\"/2019/09/01/github-tutorial/commit_1.JPG\" title=\"提交Commit\"></p><p>重新整理GitHub頁面後，即可看到遠端資料庫已出現一個<code>index.html</code>檔案，並且有1個Commit。</p><p><img src=\"/2019/09/01/github-tutorial/remote_1.JPG\" title=\"GitHub頁面\"></p><p>再新增一個<code>index2.html</code>，然後再執行一次commit並push到遠端資料庫；重整頁面後可以看到兩個檔案及兩次的commit，</p><p><img src=\"/2019/09/01/github-tutorial/commit2.png\" title=\"GitHub頁面\"></p><p>點入commit頁面中，可以看到每次commit的內容 <img src=\"/2019/09/01/github-tutorial/commit3.JPG\" title=\"GitHub commit頁面\"></p><p>再點擊其中一個commit，即可查看該次commit變更的內容記錄 <img src=\"/2019/09/01/github-tutorial/commit4.JPG\" title=\"GitHub commit變更紀錄頁面\"></p><h2>從GitHub尋找實用插件</h2><p>再開發過程中，遇到需要尋找插件時，直接在搜尋引擎搜尋可能會有開發者已經停止更新，或是因為瀏覽器更新太快，導致插件已經無法使用等情形。</p><p>在這種時候，可以再GitHub尋找其他開發者分享的插件，在GitHub上可以看到相關插件用各種語言編寫的數量；在GitHub上會清楚呈現最後更新日期，以及有多少其他的開發者給予"星星"(每位開發者只能對相同的內容給予一次星星)，藉此判斷該插件是否開發者仍有在做維護以及熱門程度。 <img src=\"/2019/09/01/github-tutorial/search.png\" title=\"GitHub搜尋結果\"></p><p>是否採用插件的建議判斷準則，半年內仍有持續的commit更新，並且在相關插件中擁有最多或相對多的星星數。</p><p>可至repository頁面中查看每次的commit所修改的內容，以及更新的頻率。</p><p>多數的插件repository頁面中也會提供<code>reademe.md</code>文件告訴其他開發者這個插件要如何作使用。</p><p>也可查看issues頁面中其他開發者已發現的Bug會問題，以及原開發者是否有回應問題解決等等。</p><h2>解決Private repository費用問題</h2><p>因為GitHub新增Private repository會有費用問題，每月US$7，如果有費用考量又希望建立Private repository可以考慮<a href=\"https://bitbucket.org/\" target=\"_blank\" rel=\"noopener\">Bitbucket</a>提供的服務，在5人以下的開發團隊使用Private repository是免費的。 <img src=\"/2019/09/01/github-tutorial/Bitbucket.JPG\" title=\"Bitbucket收費標準\"></p><!-- rebuild by neat -->","categories":["git","github"],"tags":["git","GitHub"]},{"title":"切圖技巧","url":"/2020/04/26/%E5%88%87%E5%9C%96%E6%8A%80%E5%B7%A7/","content":"<!-- build time:Sun May 23 2021 15:10:01 GMT+0800 (GMT+08:00) --><h2>切圖小工具</h2><p>由於Photoahop免費試用只有7天，因此採用開源軟體GIMP來做切圖，雖然GIMP的切片工具沒有photoshop方便和強大，但對於資源有限的人來說還算堪用。</p><p><a id=\"more\"></a></p><p>首先，在GIMP開啟圖檔後新增參考線，這裡和photoshop不同的地方是，要考慮到參考線彼此會交疊，因此不同的區塊建議分區做切圖，在切圖匯出後再分別選取要保留的圖片即可。</p><p><img src=\"/2020/04/26/切圖技巧/GIMP切圖1.png\" title=\"先增加參考線擷取logo\"></p><p>新增參考線後，選取<code>濾鏡>網頁>slice</code>，指定資料夾後即可匯出以參考線分割的圖檔</p><p><img src=\"/2020/04/26/切圖技巧/GIMP切圖匯出.png\" title=\"slice匯出設定\"></p><p>就可以得到依參考線切分的圖片檔案，因為這裡只需要logo的圖檔，因使只要將logo複製到想要的資料夾，其他的圖片可以刪除。</p><p>接下來清除參考線，再進行第二次的切圖，這次需要的是中間三個圖檔，因此針對中間三個圖檔設定參考線，然後依前面的步驟做匯出。</p><p><img src=\"/2020/04/26/切圖技巧/GIMP切圖2.png\" title=\"先增加參考線擷取logo\"></p><p>雖然使用GIMP相對photoshop麻煩一些，但這個方法相對來說比較經濟實惠一些。</p><h2>背景圖片</h2><p>設定背景圖片可用以下的css語法來達成，背景圖片預設會重複並填滿範圍，所以不希望背景圖片重覆時，最好將元素的範圍設定和圖片的寬高一致。</p><p></p><figure class=\"highlight css\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"selector-class\">.box</span> {</span><br><span class=\"line\"> <span class=\"attribute\">width</span>: <span class=\"number\">100px</span>;</span><br><span class=\"line\"> <span class=\"attribute\">height</span>: <span class=\"number\">35px</span>;</span><br><span class=\"line\"> <span class=\"attribute\">background-image</span>: <span class=\"built_in\">url</span>(../img/logo.png);</span><br><span class=\"line\"> <span class=\"comment\">/*背景圖片的相對路徑中\"../\"是回到project的根目錄*/</span></span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure><p></p><!-- rebuild by neat -->","categories":["HTML & css"],"tags":["切圖","HTML & css"]},{"title":"在GCP上架設Wordpress網站","url":"/2020/10/22/%E5%9C%A8GCP%E4%B8%8A%E6%9E%B6%E8%A8%ADWordpress%E7%B6%B2%E7%AB%99/","content":"<!-- build time:Sun May 23 2021 15:10:01 GMT+0800 (GMT+08:00) --><p>這裡使用Google 所提供的 Google Cloud Platform 雲端主機服務，也是俗稱的GCP主機來架設wordpress網站，目前GCP提供90天內300美金的試用額度，剛好可以來體驗一下。</p><p><a id=\"more\"></a></p><h2>申請GCP試用，並建立wordpress網站</h2><p>首先使用 Google 帳號登入<a href=\"https://cloud.google.com/\" target=\"_blank\" rel=\"noopener\">Google Cloud Platform</a> 開始免費試用，註冊過程中需要輸入信用卡資料，提供 90天期間共 300 美元的額度免費試用 GCP 的各種服務，而且在90天期間結束之後，只要不超過指定用量限制，都可以永久免費使用 GCP 的部分服務。</p><p>接下來在project頁面中，點選<code>Marketplace</code>並搜尋"wordpress"，接著點選<code>WordPress with NGINX and SSL Certified by Bitnami</code>，點擊<code>啟動</code>進入部屬頁面。</p><p>設定佈署名稱、選擇主機區域，其中 asia-east-a、asia-east-b、asia-east-c 都是位於台灣彰化的主機；機器類型可以使用預設的「小型」；硬碟選用 SSD 並設定為 10GB。這樣選下來，每月預估費用為 19.44 美元，以免費試用額度90天300美金綽綽有餘。其餘設定不需修改，點擊"部署"。</p><p><img src=\"/2020/10/22/在GCP上架設Wordpress網站/部署設定.jpg\" class=\"確認\" title=\"部署設定\"></p><p>佈署完成，右側可以看到主機的 IP 位置以及 WordPress 的登入資訊，點選右下方 "Log into the admin panel" 並輸入上面的使用者名稱及密碼就可以登入了。登入後記得改掉預設的帳號與密碼。</p><p></p><h2>wordpress首次登入設定調整</h2><p>第一次登入後，在"設定→ 一般"中可以先將 WordPress 預設的語言與時區改為繁體中文與台北時間(UTC +8)並調整喜歡的日期、時間格式等設定。這邊基本上已經完成 WordPress 架站了。</p><p><img src=\"/2020/10/22/在GCP上架設Wordpress網站/首次登入設定.jpg\" class=\"確認\" title=\"首次登入設定\"></p><p>在"設定→ 閱讀"中，可以先將"阻擋搜尋引擎索引這個網站"選項勾選，帶網站調整完成後再開啟。也可安裝<a href=\"https://mancen.page/wp-admin/plugin-install.php?tab=plugin-information&plugin=maintenance&TB_iframe=true&width=600&height=550\" target=\"_blank\" rel=\"noopener\">Maintenance</a>外掛來讓網站先顯示為"維護中"狀態。</p><p><img src=\"/2020/10/22/在GCP上架設Wordpress網站/閱讀設定.jpg\" class=\"確認\" title=\"關閉搜尋引擎索引\"></p><h3>移除Bitnami 的 Logo</h3><p>若希望移除頁面右下角的 Bitnami 的 Logo，需透過指令來移除，回到GCP在"部屬"的頁面中回到GCP有一個ssh的連結，用新視窗開啟終端機。</p><p><img src=\"/2020/10/22/在GCP上架設Wordpress網站/開啟ssh終端機.jpg\" class=\"確認\" title=\"開啟ssh終端機\"></p><p>執行以下兩道指令</p><p></p><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">sudo /opt/bitnami/apps/wordpress/bnconfig --disable_banner 1</span><br></pre></td></tr></table></figure><p></p><p></p><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">sudo /opt/bitnami/ctlscript.sh restart</span><br></pre></td></tr></table></figure><p></p><p>回到網站重新整理，Bitnami 的 Logo 就消失了！</p><h3>綁定url網域</h3><p>接下來，因為到目前為止網站只能用對外IP連線，因此我們需要綁定網址，首先我們先到GCP，在"VPC網路→外部IP位址"頁面中，先將臨時IP更改為靜態IP。</p><p>接下來到購買網域後再DNS管理的頁面中，新增"DOMAINNAME" 和"www.DOMAINNAME" 兩個的a紀錄，對應剛剛在GCP頁面中的靜態IP位址，等待DNS轉址完成後就可以用<code>http://DOMAINNAME</code> 來開啟wordpress網站。(註：這裡的"DOMAINNAME"代表網站的url網址)</p><p><img src=\"/2020/10/22/在GCP上架設Wordpress網站/DNS設定.jpg\" class=\"確認\" title=\"DNS設定\"></p><p>實際測試，使用google domains，綁定DNS約在10分鐘內就可以完成轉址設定，可以成功解析。</p><h3>安裝SSL憑證</h3><p>綁定完成DNS與主機IP後，接下來就是安裝SSL憑證了，這裡我們使用的是"Let’s Encrypt Certificate"的免費SSL憑證的服務，這裡申請的免費SSL憑證效期有90天。這裡可以參考bitnami安裝SSL憑證<a href=\"https://docs.bitnami.com/google/how-to/generate-install-lets-encrypt-ssl/#alternative-approach\" target=\"_blank\" rel=\"noopener\">說明文件</a>。</p><p>因為在這次的安裝是使用了nginx的伺服器，因此我們按照以下步驟來進行：</p><p>首先，先安裝The Lego Client，在ssh開啟的終端機中複製以下代碼執行</p><p></p><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">cd /tmp curl -Ls https://api.github.com/repos/xenolf/lego/releases/latest | grep browser_download_url | grep linux_amd64 | cut -d '"' -f 4 | wget -i - tar xf lego_vX.Y.Z_linux_amd64.tar.gz sudo mkdir -p /opt/bitnami/letsencrypt sudo mv lego /opt/bitnami/letsencrypt/lego</span><br></pre></td></tr></table></figure><p></p><p>再來，關閉所有的服務</p><p></p><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">sudo /opt/bitnami/ctlscript.sh stop</span><br></pre></td></tr></table></figure><p></p><p>申請SSL憑證</p><p></p><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">sudo /opt/bitnami/letsencrypt/lego --tls --email="EMAIL-ADDRESS" --domains="DOMAIN" --domains="www.DOMAIN" --path="/opt/bitnami/letsencrypt" run</span><br></pre></td></tr></table></figure><p></p><p><em>(注意：替換 EMAIL-ADDRESS 成申請者的郵箱 替換 DOMAIN 成要申請的域名)</em></p><p>接下來，用以下程式碼來安裝SSL憑證</p><p></p><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">sudo mv /opt/bitnami/nginx/conf/server.crt /opt/bitnami/nginx/conf/server.crt.old sudo mv /opt/bitnami/nginx/conf/server.key /opt/bitnami/nginx/conf/server.key.old sudo mv /opt/bitnami/nginx/conf/server.csr /opt/bitnami/nginx/conf/server.csr.old sudo ln -sf /opt/bitnami/letsencrypt/certificates/DOMAIN.key /opt/bitnami/nginx/conf/server.key sudo ln -sf /opt/bitnami/letsencrypt/certificates/DOMAIN.crt /opt/bitnami/nginx/conf/server.crt sudo chown root:root /opt/bitnami/nginx/conf/server* sudo chmod 600 /opt/bitnami/nginx/conf/server*</span><br></pre></td></tr></table></figure><p></p><p><em>(注意：一樣要替換 DOMAIN 成要申請的域名 共有兩行要替換 例如： DOMAIN.key 替換成 要申請的域名.key 一定要改喔！)</em></p><p>最後，打開所有的服務</p><p></p><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">sudo /opt/bitnami/ctlscript.sh start</span><br></pre></td></tr></table></figure><p></p><p>回到瀏覽器，重新打開https://DOMAIN 看看是網址旁邊不是有出現一個小鎖</p><h3>如何強制使用SSL(自動跳轉https)</h3><p>雖然已經安裝號好了SSL憑證，但點選其他網頁後，網址又變成了http.....這是因為wordpress在配置文件中預設的網址是以http開頭，所以我們又透過ssh開啟終端機來修改wordpress配置文件。首先，輸入以下指令來開啟wordpress配置文件</p><p></p><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">sudo vi /opt/bitnami/apps/wordpress/htdocs/wp-config.php</span><br></pre></td></tr></table></figure><p></p><p>鍵盤輸入"i"切換成可編輯狀態，用方向鍵找到以下內容</p><p></p><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">define('WP_SITEURL', 'http://' . $_SERVER['HTTP_HOST'] . '/'); define('WP_HOME', 'http://' . $_SERVER['HTTP_HOST'] . '/');</span><br></pre></td></tr></table></figure><p></p><p>替換成以下內容</p><p></p><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">define('WP_SITEURL', 'https://' . $_SERVER['HTTP_HOST'] . '/'); define('WP_HOME', 'https://' . $_SERVER['HTTP_HOST'] . '/');</span><br></pre></td></tr></table></figure><p></p><p>內容修改完成後，按esc鍵結束編輯模式，按下shift+:，輸入wq後按下enter，即可存檔並離開終端機編輯器。回到終端機畫面後，輸入以下指令重啟服務。</p><p></p><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">sudo /opt/bitnami/ctlscript.sh restart</span><br></pre></td></tr></table></figure><p></p><h3>自動更新SSL憑證</h3><p>由於"Let’s Encrypt Certificate"的免費SSL憑證效期只有90天，每90天就要更新一次SSL憑證有點麻煩，所以我們在這裡撰寫一個腳本讓SSL憑證可以每90天就自動更新。先輸入以下指令，新增一個執行腳本</p><p></p><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">sudo vi /opt/bitnami/letsencrypt/scripts/renew-certificate.sh</span><br></pre></td></tr></table></figure><p></p><p>複製以下內容貼上</p><p></p><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">#!/bin/bash sudo /opt/bitnami/ctlscript.sh stop nginx sudo /opt/bitnami/letsencrypt/lego --tls --email="EMAIL-ADDRESS" --domains="DOMAIN" --domains="www.DOMAIN" --path="/opt/bitnami/letsencrypt" renew --days 90 sudo /opt/bitnami/ctlscript.sh start nginx</span><br></pre></td></tr></table></figure><p></p><p><em>(注意：替換 EMAIL-ADDRESS 成申請的郵箱 替換 DOMAIN 成要申請的域名)</em></p><p>輸入以下指令使腳本可以執行</p><p></p><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">sudo chmod +x /opt/bitnami/letsencrypt/scripts/renew-certificate.sh</span><br></pre></td></tr></table></figure><p></p><p>輸入以下指令打開crontab編輯器(選擇vim編輯器)</p><p></p><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">sudo crontab -e</span><br></pre></td></tr></table></figure><p></p><p>鍵盤輸入"i"切換成可編輯狀態，將以下內容複製貼上到文件最後一行</p><p></p><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">0 0 1 * * /opt/bitnami/letsencrypt/scripts/renew-certificate.sh 2> /dev/null</span><br></pre></td></tr></table></figure><p></p><p>一樣按esc鍵結束編輯模式，按下shift+:，輸入wq後按下enter，即可存檔並離開終端機編輯器。到這裡就完成了，SSL憑證將每90天自動更新。</p><p>到這裡就完成了wordpress網站就已經架設完成了，接下來就是如何用不同的佈景主題以及外掛，並且新增網站的內容來使網站更豐富。</p><!-- rebuild by neat -->","categories":["wordpress"],"tags":["GCP","wordpress"]},{"title":"網頁排版 - 絕對定位與相對定位","url":"/2020/04/11/%E7%B6%B2%E9%A0%81%E6%8E%92%E7%89%88-%E7%B5%95%E5%B0%8D%E5%AE%9A%E4%BD%8D%E8%88%87%E7%9B%B8%E5%B0%8D%E5%AE%9A%E4%BD%8D/","content":"<!-- build time:Sun May 23 2021 15:10:01 GMT+0800 (GMT+08:00) --><h2>絕對定位/相對定位</h2><p>在網頁排版中，當需要讓元素重疊時，就可以使用<code>position</code>屬性，讓元素可以依據父元素的範圍去進行定位，並可隨瀏覽器視窗而調整。屬性的值有<code>absolute</code>、<code>relative</code>來定義元素的位置。</p><p>position屬性參數值如下： - static → 預設值，不會特別被定位 - relative → 除非加上額外屬性(ex. 上右下左距離)，否則也不會特別被定位 - fixed - absolute</p><p><a href=\"https://developer.mozilla.org/zh-CN/docs/Web/CSS/position\" target=\"_blank\" rel=\"noopener\">MDN關於position</a> <a href=\"https://zh-tw.learnlayout.com/position.html\" target=\"_blank\" rel=\"noopener\">關於position屬性文章</a></p><p><a id=\"more\"></a></p><h2>z-index 權重</h2><p>既然元素透過<code>position</code>屬性可以達到重疊的效果，那要如後判斷哪一個元素要顯示在前面呢？當position屬性使元素可以重疊時，預設是越後面出現的元素會在上方；而也可以透過<code>z-index</code>屬性給予權重來調整顯示出現的順序，類似photoshop圖層的概念<code>z-index</code>數值越高元素顯示順序會越往前。</p><p>由以上的說明後，用以下的圖檔來看一下</p><p><img src=\"/2020/04/11/網頁排版-絕對定位與相對定位/position圖解.jpg\" title=\"position圖解\"></p><p>若<code>position</code>只使用了<code>absolute</code>屬性後，元素將會往外尋找<code>relative</code>來當作訂為基準，如果找不到就會以<code>body</code>為基準進行定位；因此如果需要以其他元素作為基準進行定位，就需要再父元素的css中加入<code>relative</code>屬性。</p><p>另外，元素的定位以左上角作為對其基準，只針對位置進行定位，並不會限制其高度和寬度，所以如果子元素寬度或高度超出父元素範圍，就會超出父元素的範圍。</p><h2>ul>li實做商品列表</h2><p>一般在購物網站中看到的並排商品列表，可以用ul>li搭配上flex排版的方式來呈現，而購物網站中常見的<code>限時</code>或<code>折扣城</code>之類的圖示可以用<code>position</code>屬性來達成。</p><p><iframe id=\"cp_embed_LYpRJaP\" src=\"//codepen.io/mancen/embed/LYpRJaP?height=500px&theme-id=dark&slug-hash=LYpRJaP&default-tab=css,result&embed-version=2\" scrolling=\"no\" frameborder=\"no\" height=\"500px\" allowtransparency=\"true\" allowfullscreen class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\"></iframe></p><p>在上面的範例中，可以看到css在<code>.product .sale</code>中設定了<code>position: absolute;</code>；另外在<code>.product li</code>中設定了<code>position: relative;</code>。在這樣的情況下，<code>.product .sale</code>就會重疊在<code>.product li</code>上，而不會對其中的元素造成推擠的效果。</p><h2>position: fixed 技巧</h2><p>當不希望元素內容因為滑鼠滾動就離開畫面的話，可以使用<code>position: fixed</code>來達成。例如，在下方的範例中，使用<code>position: fixed</code>來使<code>.box</code>固定在畫面的右下角。</p><p><iframe id=\"cp_embed_YzypeoQ\" src=\"//codepen.io/mancen/embed/YzypeoQ?height=500px&theme-id=dark&slug-hash=YzypeoQ&default-tab=css,result&embed-version=2\" scrolling=\"no\" frameborder=\"no\" height=\"500px\" allowtransparency=\"true\" allowfullscreen class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\"></iframe></p><p><code>position: fixed</code>常用的使用時機有：網頁的<code>go top</code>按鈕，或是電子商務網站為了使用者體驗而將購物或結帳的按鈕固定在畫面中。</p><!-- rebuild by neat -->","categories":["HTML & css"],"tags":["css"]},{"title":"CSS 網頁容器","url":"/2020/04/02/CSS-%E7%B6%B2%E9%A0%81%E5%AE%B9%E5%99%A8/","content":"<!-- build time:Sun May 23 2021 15:10:01 GMT+0800 (GMT+08:00) --><h2>網頁容器的概念</h2><p>所有網頁的排版都是有關於容器的設計，在大多數的網頁中，我們都可以將其分割成許多的容器，而在頁面的呈現通常都是由大容器去包著小容器，因此，在學習網頁排版前，需要先釐清的是關於容器的特性與概念。</p><p><img src=\"/2020/04/02/CSS-網頁容器/container.jpg\" title=\"將gooogle頁面的網頁容器視覺化\"></p><p><a id=\"more\"></a></p><p>在網頁中<code>div</code>就是一種時常被屬用的容器，而其他的HTML標籤，例如：h1、p、a連結等等也都是網頁容器的一種。</p><p><img src=\"/2020/04/02/CSS-網頁容器/div.jpg\" title=\"圖解網頁容器\"></p><h2>css reset</h2><p>在所有的瀏覽器中，都存在有預設的css樣式表，但這樣很有可能會使得我們在按照設計稿撰寫網頁時遇到顯示的問題，因此可以透過<a href=\"https://meyerweb.com/eric/tools/css/reset/\" target=\"_blank\" rel=\"noopener\">css reset</a>來清空瀏覽器的樣式表。</p><p></p><figure class=\"highlight css\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"comment\">/* http://meyerweb.com/eric/tools/css/reset/ </span></span><br><span class=\"line\"><span class=\"comment\"> v2.0 | 20110126</span></span><br><span class=\"line\"><span class=\"comment\"> License: none (public domain)</span></span><br><span class=\"line\"><span class=\"comment\">*/</span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"selector-tag\">html</span>, <span class=\"selector-tag\">body</span>, <span class=\"selector-tag\">div</span>, <span class=\"selector-tag\">span</span>, <span class=\"selector-tag\">applet</span>, <span class=\"selector-tag\">object</span>, <span class=\"selector-tag\">iframe</span>,</span><br><span class=\"line\"><span class=\"selector-tag\">h1</span>, <span class=\"selector-tag\">h2</span>, <span class=\"selector-tag\">h3</span>, <span class=\"selector-tag\">h4</span>, <span class=\"selector-tag\">h5</span>, <span class=\"selector-tag\">h6</span>, <span class=\"selector-tag\">p</span>, <span class=\"selector-tag\">blockquote</span>, <span class=\"selector-tag\">pre</span>,</span><br><span class=\"line\"><span class=\"selector-tag\">a</span>, <span class=\"selector-tag\">abbr</span>, <span class=\"selector-tag\">acronym</span>, <span class=\"selector-tag\">address</span>, <span class=\"selector-tag\">big</span>, <span class=\"selector-tag\">cite</span>, <span class=\"selector-tag\">code</span>,</span><br><span class=\"line\"><span class=\"selector-tag\">del</span>, <span class=\"selector-tag\">dfn</span>, <span class=\"selector-tag\">em</span>, <span class=\"selector-tag\">img</span>, <span class=\"selector-tag\">ins</span>, <span class=\"selector-tag\">kbd</span>, <span class=\"selector-tag\">q</span>, <span class=\"selector-tag\">s</span>, <span class=\"selector-tag\">samp</span>,</span><br><span class=\"line\"><span class=\"selector-tag\">small</span>, <span class=\"selector-tag\">strike</span>, <span class=\"selector-tag\">strong</span>, <span class=\"selector-tag\">sub</span>, <span class=\"selector-tag\">sup</span>, <span class=\"selector-tag\">tt</span>, <span class=\"selector-tag\">var</span>,</span><br><span class=\"line\"><span class=\"selector-tag\">b</span>, <span class=\"selector-tag\">u</span>, <span class=\"selector-tag\">i</span>, <span class=\"selector-tag\">center</span>,</span><br><span class=\"line\"><span class=\"selector-tag\">dl</span>, <span class=\"selector-tag\">dt</span>, <span class=\"selector-tag\">dd</span>, <span class=\"selector-tag\">ol</span>, <span class=\"selector-tag\">ul</span>, <span class=\"selector-tag\">li</span>,</span><br><span class=\"line\"><span class=\"selector-tag\">fieldset</span>, <span class=\"selector-tag\">form</span>, <span class=\"selector-tag\">label</span>, <span class=\"selector-tag\">legend</span>,</span><br><span class=\"line\"><span class=\"selector-tag\">table</span>, <span class=\"selector-tag\">caption</span>, <span class=\"selector-tag\">tbody</span>, <span class=\"selector-tag\">tfoot</span>, <span class=\"selector-tag\">thead</span>, <span class=\"selector-tag\">tr</span>, <span class=\"selector-tag\">th</span>, <span class=\"selector-tag\">td</span>,</span><br><span class=\"line\"><span class=\"selector-tag\">article</span>, <span class=\"selector-tag\">aside</span>, <span class=\"selector-tag\">canvas</span>, <span class=\"selector-tag\">details</span>, <span class=\"selector-tag\">embed</span>, </span><br><span class=\"line\"><span class=\"selector-tag\">figure</span>, <span class=\"selector-tag\">figcaption</span>, <span class=\"selector-tag\">footer</span>, <span class=\"selector-tag\">header</span>, <span class=\"selector-tag\">hgroup</span>, </span><br><span class=\"line\"><span class=\"selector-tag\">menu</span>, <span class=\"selector-tag\">nav</span>, <span class=\"selector-tag\">output</span>, <span class=\"selector-tag\">ruby</span>, <span class=\"selector-tag\">section</span>, <span class=\"selector-tag\">summary</span>,</span><br><span class=\"line\"><span class=\"selector-tag\">time</span>, <span class=\"selector-tag\">mark</span>, <span class=\"selector-tag\">audio</span>, <span class=\"selector-tag\">video</span> {</span><br><span class=\"line\">\t<span class=\"attribute\">margin</span>: <span class=\"number\">0</span>;</span><br><span class=\"line\">\t<span class=\"attribute\">padding</span>: <span class=\"number\">0</span>;</span><br><span class=\"line\">\t<span class=\"attribute\">border</span>: <span class=\"number\">0</span>;</span><br><span class=\"line\">\t<span class=\"attribute\">font-size</span>: <span class=\"number\">100%</span>;</span><br><span class=\"line\">\t<span class=\"attribute\">font</span>: inherit;</span><br><span class=\"line\">\t<span class=\"attribute\">vertical-align</span>: baseline;</span><br><span class=\"line\">}</span><br><span class=\"line\"><span class=\"comment\">/* HTML5 display-role reset for older browsers */</span></span><br><span class=\"line\"><span class=\"selector-tag\">article</span>, <span class=\"selector-tag\">aside</span>, <span class=\"selector-tag\">details</span>, <span class=\"selector-tag\">figcaption</span>, <span class=\"selector-tag\">figure</span>, </span><br><span class=\"line\"><span class=\"selector-tag\">footer</span>, <span class=\"selector-tag\">header</span>, <span class=\"selector-tag\">hgroup</span>, <span class=\"selector-tag\">menu</span>, <span class=\"selector-tag\">nav</span>, <span class=\"selector-tag\">section</span> {</span><br><span class=\"line\">\t<span class=\"attribute\">display</span>: block;</span><br><span class=\"line\">}</span><br><span class=\"line\"><span class=\"selector-tag\">body</span> {</span><br><span class=\"line\">\t<span class=\"attribute\">line-height</span>: <span class=\"number\">1</span>;</span><br><span class=\"line\">}</span><br><span class=\"line\"><span class=\"selector-tag\">ol</span>, <span class=\"selector-tag\">ul</span> {</span><br><span class=\"line\">\t<span class=\"attribute\">list-style</span>: none;</span><br><span class=\"line\">}</span><br><span class=\"line\"><span class=\"selector-tag\">blockquote</span>, <span class=\"selector-tag\">q</span> {</span><br><span class=\"line\">\t<span class=\"attribute\">quotes</span>: none;</span><br><span class=\"line\">}</span><br><span class=\"line\"><span class=\"selector-tag\">blockquote</span><span class=\"selector-pseudo\">:before</span>, <span class=\"selector-tag\">blockquote</span><span class=\"selector-pseudo\">:after</span>,</span><br><span class=\"line\"><span class=\"selector-tag\">q</span><span class=\"selector-pseudo\">:before</span>, <span class=\"selector-tag\">q</span><span class=\"selector-pseudo\">:after</span> {</span><br><span class=\"line\">\t<span class=\"attribute\">content</span>: <span class=\"string\">''</span>;</span><br><span class=\"line\">\t<span class=\"attribute\">content</span>: none;</span><br><span class=\"line\">}</span><br><span class=\"line\"><span class=\"selector-tag\">table</span> {</span><br><span class=\"line\">\t<span class=\"attribute\">border-collapse</span>: collapse;</span><br><span class=\"line\">\t<span class=\"attribute\">border-spacing</span>: <span class=\"number\">0</span>;</span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure><p></p><p>在貼上程式碼清空瀏覽器css設定後，就可以接續撰寫css樣式表，在css中相同的標籤設定有多個樣式表時，會取用最後一個，因此css reset語法要貼在css檔案的最上方，後續撰寫的客製化樣式就會複寫css reset的設定。</p><h2>display</h2><h3>block 區塊元素</h3><p>區塊元素有兩大特性： - 會盡可能地占滿整個版面 → 預設寬度會滿版，可在css中指定寬度 - 區塊元素會另起一行來呈現 → 修改寬度與高度後，區塊元素仍會從上到下垂直排列</p><p>要判斷標籤是否具有區塊元素的特性呢？有一個小技巧是在css中為標籤賦於一個<code>background</code>的背景色屬性，就可以快速地看出哪些標籤被景色並未滿版以及從上到下垂直排列。</p><p>h1、p、li等等都是常見的預設區塊元素，如果希望將區塊元素水平排列，可加上<code>display: inline;</code>將區塊元素轉換為行內元素。</p><h3>inline 行內元素</h3><p>行內元素的特性： - 比較常用在段落裡 →與下一個願素間不會斷行，會排列在一起 - 預設無法設定寬&高 → 可加入<code>display: block;</code>屬性來轉換為區塊元素，即可指定寬&高，且會具有區塊元素的特性</p><p>常見的行內元素標籤有a、span、</p><p>其中<code>span</code>標籤不代表任何意思，在css樣式設計中通常是為了點綴撰寫css樣式使用</p><h2>div 與後代選擇器運用</h2><p><code>div</code>在HTML中是沒有語意的，是單純用來排版的容器，其特性是屬於區塊元素的一種，而<code>div</code>中存在其他區塊元素時，可以用後代選擇器的方式來指定樣式到特定的元素上，後代選擇器也可以看做是選擇器裡面還有一個選擇器。</p><p></p><figure class=\"highlight html\"><table><tr><td class=\"code\"><pre><span class=\"line\">// HTML</span><br><span class=\"line\"><span class=\"tag\"><<span class=\"name\">div</span> <span class=\"attr\">class</span>=<span class=\"string\">\"style1\"</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">a</span> <span class=\"attr\">href</span>=<span class=\"string\">\"#\"</span>></span>red<span class=\"tag\"></<span class=\"name\">a</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">a</span> <span class=\"attr\">href</span>=<span class=\"string\">\"#\"</span>></span>red<span class=\"tag\"></<span class=\"name\">a</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">a</span> <span class=\"attr\">href</span>=<span class=\"string\">\"#\"</span>></span>red<span class=\"tag\"></<span class=\"name\">a</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">p</span>></span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil, quod!<span class=\"tag\"></<span class=\"name\">p</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">p</span> <span class=\"attr\">class</span>=<span class=\"string\">\"content\"</span>></span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil, quod!<span class=\"tag\"></<span class=\"name\">p</span>></span></span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">div</span>></span></span><br></pre></td></tr></table></figure><p></p><p></p><figure class=\"highlight css\"><table><tr><td class=\"code\"><pre><span class=\"line\">// 選取`.style1` 當中的a連結</span><br><span class=\"line\"><span class=\"selector-class\">.style1</span> <span class=\"selector-tag\">a</span>{</span><br><span class=\"line\"> <span class=\"attribute\">color</span>: red;</span><br><span class=\"line\"> <span class=\"attribute\">font-weight</span>: bold;</span><br><span class=\"line\">}</span><br><span class=\"line\"></span><br><span class=\"line\">// 選取`.style1` 當中的p段落</span><br><span class=\"line\"><span class=\"selector-class\">.style1</span> <span class=\"selector-tag\">p</span>{</span><br><span class=\"line\"> <span class=\"attribute\">color</span>: blue;</span><br><span class=\"line\"> <span class=\"attribute\">font-size</span>: <span class=\"number\">18px</span>;</span><br><span class=\"line\">}</span><br><span class=\"line\">// 選取`.style1` 當中的`.content`</span><br><span class=\"line\"><span class=\"selector-class\">.style1</span> <span class=\"selector-class\">.content</span> {</span><br><span class=\"line\"> <span class=\"attribute\">color</span>: orange;</span><br><span class=\"line\"> <span class=\"attribute\">letter-spacing</span>: <span class=\"number\">1px</span>;</span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure><p></p><p>使用後代選擇器語法，就不需要在<code>div</code>中的每個標籤都賦於<code>class名稱</code>，可以簡化程式碼。</p><p>在前面提到的區塊元素有會盡量站滿整的空間的特性，因此當區塊元素被包含在<code>div</code>容器中時，會依照父元素的寬度自適應延伸佔滿。另外，當不確定元素內容多寡時，不建議在css中指定元素的高度。</p><h2>margin 產生外邊界距離</h2><p>margin指的是元素與外邊界的距離，在css中只設定<code>margin</code>時會在元素的上下左右均向外推擠出設定的距離，或是可以針對上下左右的特定邊來指定推擠的距離。例如：在.box元素內的p段落下邊界向外推擠30px，可以這樣寫：</p><p></p><figure class=\"highlight css\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"selector-class\">.box</span> <span class=\"selector-tag\">p</span>{</span><br><span class=\"line\"> <span class=\"attribute\">margin-bottom</span>: <span class=\"number\">30px</span>;</span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure><p></p><p>幫<code>.box</code>加上border來看一下margin的效果</p><p><img src=\"/2020/04/02/CSS-網頁容器/margin效果.jpg\" title=\"margin效果\"></p><p><img src=\"/2020/04/02/CSS-網頁容器/margin.jpg\" title=\"margin圖解\"></p><p>margin也可以用來設定元素與元素間的間距，例如</p><p><img src=\"/2020/04/02/CSS-網頁容器/margin1.jpg\" title=\"margin元素間的間距\"></p><h2>padding 產生留白距離</h2><p>padding指的是元素內產生留白的距離，在css中只設定<code>padding</code>時會從元素的上下左右往內推擠設定的距離，或是可以針對上下左右的特定邊來指定向內推擠的距離。例如：在.box元素的左側邊界向內推擠30px，可以這樣寫：</p><p></p><figure class=\"highlight css\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"selector-class\">.box</span> {</span><br><span class=\"line\"> <span class=\"attribute\">padding-left</span>: <span class=\"number\">20px</span>;</span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure><p></p><p>來看一下效果 <img src=\"/2020/04/02/CSS-網頁容器/padding效果.jpg\" title=\"padding效果\"></p><p><img src=\"/2020/04/02/CSS-網頁容器/padding.jpg\" title=\"padding圖解\"></p><p>在上面這個例子中，和在所有<code>.box</code>中的子元素都加上<code>margin-left</code>是相同的效果，但在父元素上使用<code>padding</code>語法可以較為簡化程式碼，不需要在每個子元素中都撰寫<code>margin</code>語法。</p><h2>Box Model（盒模型）</h2><p>在css中所有元素都具有自己的盒模型的概念，其中元素大小的計算須加上padding和border的距離，而margin只會影響元素在網頁中占用的範圍，並不會影響元素本身的大小，看一下以下的圖解：</p><p>先設定一個300px * 300px的div元素 <img src=\"/2020/04/02/CSS-網頁容器/boxModel_1.jpg\" title=\"div元素的大小\"></p><p>div元素加上<code>padding: 50px;</code> <img src=\"/2020/04/02/CSS-網頁容器/boxModel_2.jpg\" title=\"加上padding後div元素的大小\"></p><p>div元素再加上<code>border: 10px solid green;</code> <img src=\"/2020/04/02/CSS-網頁容器/boxModel_3.jpg\" title=\"再加上border後div元素的大小\"></p><p>div元素再加上<code>margin: 50px;</code>，在這裡加上margin並不會改變div元素的大小，但在網頁上的所佔的位置須把margin的距離加上。 <img src=\"/2020/04/02/CSS-網頁容器/boxModel_4.jpg\" title=\"再加上margin後div元素的大小\"></p><h2>水平置中的版型</h2><p>要使區塊元素水平置中，只要設定<code>margin-left</code>與<code>margin-right</code>均為<code>auto</code>，區塊元素就會在父元素的寬度範圍內自動左右置中，即使縮放瀏覽器視窗，也能夠自適應位置。</p><p></p><figure class=\"highlight css\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"selector-class\">.box2</span> {</span><br><span class=\"line\"> <span class=\"attribute\">margin</span>: <span class=\"number\">0</span> auto;</span><br><span class=\"line\"> // 也可以這樣寫</span><br><span class=\"line\"> // margin-left: auto;</span><br><span class=\"line\"> // margin-right: auto;</span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure><p></p><p><img src=\"/2020/04/02/CSS-網頁容器/margin_auto.jpg\" title=\"圖解區塊元素水平置中\"></p><h2>text-align 文字水平調整</h2><p>前面提到的<code>margin: 0 auto;</code>的語法是使整個區塊元素置中，那如果是區塊內的文字要靠左、置中或靠右對齊呢？這裡就可以使用<code>text-align</code>的語法</p><p></p><figure class=\"highlight css\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"selector-class\">.box2</span> <span class=\"selector-tag\">p</span>{</span><br><span class=\"line\"> <span class=\"attribute\">text-align</span>: center;</span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure><p></p><h2>CSS3 box-sizing</h2><p>如果不想計算Box Model中border和padding對於元素大小造成的改變，可以使用<code>box-sizing</code>語法，當<code>box-sizing</code>的值為<code>border-box</code>時，這時候元素的寬度的計算方式就會變成<code>width = border + padding + 內容的 width</code></p><p><a href=\"https://developer.mozilla.org/zh-TW/docs/Web/CSS/box-sizing\" target=\"_blank\" rel=\"noopener\">更多box-sizing介紹</a></p><p></p><figure class=\"highlight css\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"selector-class\">.box</span> {</span><br><span class=\"line\"> <span class=\"attribute\">background-color</span>: green;</span><br><span class=\"line\"> <span class=\"attribute\">width</span>: <span class=\"number\">300px</span>;</span><br><span class=\"line\"> <span class=\"attribute\">border</span>: <span class=\"number\">10px</span> solid blue;</span><br><span class=\"line\"> <span class=\"attribute\">padding</span>: <span class=\"number\">50px</span>;</span><br><span class=\"line\"> <span class=\"attribute\">box-sizing</span>: border-box;</span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure><p></p><p>透過上方的程式碼，可以看到透過<code>box-sizing</code>語法，經過了css的重新計算，<code>.box</code>元素的實際寬度仍然是300px，但向內扣除了border和apdding距離之後，內容的寬度變更為180px。 <img src=\"/2020/04/02/CSS-網頁容器/box-sizing.jpg\" title=\"box-sizing效果\"></p><p>透過這樣的作法，再使用設計稿進行排版時可以不用透過複雜的計算就能夠確定元素的大小，避免出現boder和padding的距離所造成的落差。</p><p><strong>使用以下語法可將<code>box-sizing</code>的設定套用到所有的元素中，也可將其納入css reset中</strong></p><p></p><figure class=\"highlight css\"><table><tr><td class=\"code\"><pre><span class=\"line\">*,*<span class=\"selector-pseudo\">:before</span>,*<span class=\"selector-pseudo\">:after</span> {</span><br><span class=\"line\"> <span class=\"attribute\">box-sizing</span>: border-box;</span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure><p></p><!-- rebuild by neat -->","categories":["HTML & css"],"tags":["css","container"]},{"title":"Git 分支 (branch)","url":"/2020/10/21/Git-%E5%88%86%E6%94%AF-branch/","content":"<!-- build time:Sun May 23 2021 15:10:01 GMT+0800 (GMT+08:00) --><h2>Git 分支 (branch)</h2><h2>為什麼要用分支？</h2><ul><li>多人協作時，不可能都在 master</li><li>可以讓 master 都是正式版資料，可以開分支來做測試或開發，藉此不影響正式主機分支</li></ul><p><a id=\"more\"></a></p><p>## branch 介紹</p><ul><li>分支就像是便利貼，貼在某個 commit 上</li><li>分支合併，主要是兩個 commit 進行合併</li></ul><h3>開分支流程</h3><ul><li>新增分支：git branch 分支名稱</li><li>查看分支：git branch</li><li>切換分支：git checkout 分支名稱</li><li>刪除分支：git branch -d 分支名稱 、-D 是強制刪除</li><li>還原上個版本：git reset HEAD^</li></ul><p>開發情境：我有一個正式主機 master 分支，有一個開發分支叫做 develop</p><h3>合併分支 && 快轉機制</h3><ul><li>合併分支：git merge 分支名稱</li><li>取消快轉：git merge 分支名稱 --no-ff</li><li>觀看線圖：git log —oneline -graph</li><li>還原合併前狀態：git reset —hard ORIG_HEAD</li></ul><h4>快轉機制</h4><ul><li>取消快轉：兩個不同任務分支合併時，取消快轉</li><li>預設使用快轉：本地與遠端兩條相同的任務分支時，可以用快轉</li><li>當兩個分支路徑相同時，取消快轉是為了更清楚看出分支是在哪一個commit合併</li></ul><h3>解決衝突流程</h3><p>HEAD 是當前 HEAD 分支位置，develop 是你想合併的分支</p><p></p><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\"> <<<<<<< HEAD</span><br><span class=\"line\"> <h1>我是標題</h1></span><br><span class=\"line\">=======</span><br><span class=\"line\"> <h2>我是大標題</h2></span><br><span class=\"line\">>>>>>>> develop</span><br></pre></td></tr></table></figure><p></p><p><em>取消 merge 衝突狀態： <code>git merge --abort</code></em></p><h3>其他操作</h3><p>將特定 commit 貼上分支：git branch 新分支名稱 commit編號</p><h3>常見分支名稱</h3><ul><li>master 預設分支</li><li>develop 開發分支</li><li>feature 開發新功能分支</li></ul><p>### git branch遊戲分享</p><ul><li><a href=\"https://learngitbranching.js.org/\" target=\"_blank\" rel=\"noopener\">https://learngitbranching.js.org</a></li><li><a href=\"https://drive.google.com/drive/folders/1koW25onvGTHtnHuob2UR1x6Jxywo34Om?usp=sharing\" target=\"_blank\" rel=\"noopener\">挑戰關卡</a></li></ul><h4>Git 分支練習</h4><p>由於是Git 的練習網站，這裡並不需要輸入完整的指令，只需要輸入在這一階段要操作的動作指令(如：commit、chekout、merge等等)即可。</p><ol><li>練習題1</li></ol><p><img src=\"/2020/10/21/Git-分支-branch/1.png\" title=\"練習題1\"></p><p>git code</p><p></p><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">git commit</span><br><span class=\"line\">git commit</span><br><span class=\"line\">git branch dev</span><br></pre></td></tr></table></figure><p></p><p>第一題較單純，只要在C3新增branch <code>dev</code>即可</p><ol start=\"2\"><li>練習題2</li></ol><p><img src=\"/2020/10/21/Git-分支-branch/2.png\" title=\"練習題2\"></p><p></p><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">git commit</span><br><span class=\"line\">git branch dev</span><br><span class=\"line\">git commit</span><br></pre></td></tr></table></figure><p></p><p>第2題則是在C2時新增branch <code>dev</code>，但仍是在<code>master</code> 分支新增C3，所以直接在執行<code>commit</code>即可</p><ol start=\"3\"><li>練習題3</li></ol><p><img src=\"/2020/10/21/Git-分支-branch/3.png\" title=\"練習題3\"></p><p></p><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">git commit</span><br><span class=\"line\">git branch dev</span><br><span class=\"line\">git commit</span><br><span class=\"line\">git checkout dev</span><br><span class=\"line\">git commit</span><br><span class=\"line\">git checkout master</span><br><span class=\"line\">git merge dev</span><br></pre></td></tr></table></figure><p></p><p>第3題則是在c2時新增分支<code>dev</code>，但仍在<code>master</code>分支新增commit c3，然後使用checkout指令切換到<code>dev</code>分支新增commit c4，再切換回到<code>master</code>分支，進行和<code>dev</code>的merge，在這裡因為<code>master</code>與<code>dev</code>已經不再相同路徑上，因此merge指令不需要取消快轉。</p><ol start=\"4\"><li>練習題4</li></ol><p><img src=\"/2020/10/21/Git-分支-branch/4.png\" title=\"練習題4\"></p><p></p><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">git commit</span><br><span class=\"line\">git commit</span><br><span class=\"line\">git commit</span><br><span class=\"line\">git branch dev</span><br><span class=\"line\">git checkout dev</span><br><span class=\"line\">git commit</span><br><span class=\"line\">git checkout master</span><br><span class=\"line\">git merge dev --no-ff</span><br></pre></td></tr></table></figure><p></p><p>第4題則是在<code>master</code>分支上新增commit 到c4，再新增<code>dev</code>分支，checkout指令到<code>dev</code>分支後新增c5，再checkout切換回<code>master</code>後執行merge。</p><p>在這裡因為c4和c5在相同路徑上，若直接將<code>maser</code>與<code>dev</code>合併將會使<code>master</code>直接前進到c5，將不會產生c6，容易使後續維護時不容易看出過程的差異，因此在這裡執行<code>--no-ff</code>取消快轉，使<code>master</code>分支產生c6。</p><ol start=\"5\"><li>練習題5</li></ol><p><img src=\"/2020/10/21/Git-分支-branch/5.png\" title=\"練習題5\"></p><p></p><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">git commit</span><br><span class=\"line\">git commit</span><br><span class=\"line\">git branch dev</span><br><span class=\"line\">git checkout dev</span><br><span class=\"line\">git commit</span><br><span class=\"line\">git commit</span><br><span class=\"line\">git checkout master</span><br><span class=\"line\">git commit</span><br><span class=\"line\">git merge dev</span><br></pre></td></tr></table></figure><p></p><p>第5題一樣先在預設的master分支上新增commit到c3，再新增<code>dev</code>分支，並且checkout到<code>dev</code>分支，新增commit c4和c5，接下來checkout 回m<code>aster</code>分支，新增commit c6，最後執行merge指令將<code>master</code>和<code>dev</code>分支合併為 c7。這裡因為c5 和要合併的c6並不再相同路徑上，因此不需要取消快就集會額外產生c7。</p><ol start=\"6\"><li>練習題6</li></ol><p><img src=\"/2020/10/21/Git-分支-branch/6.png\" title=\"練習題6\"></p><p></p><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">git commit</span><br><span class=\"line\">git clone</span><br><span class=\"line\">git branch dev</span><br><span class=\"line\">git checkout dev</span><br><span class=\"line\">git commit</span><br><span class=\"line\">git commit</span><br><span class=\"line\">git checkout master</span><br><span class=\"line\">git merge dev --no-ff</span><br></pre></td></tr></table></figure><p></p><p>新增commit c2後，執行clone指令將數據庫Repository複製到遠端，此時會再遠端新的Repository產生出<code>o/master</code>數據庫，再新增<code>dev分支並checkout到</code>dev<code>分支，新增commit c3和c4，checkout 回到</code>master<code>分支，執行merge指令合併dev分支。這裡因為c2 和c4再同一路徑上，中間沒有叉路，因此在執行合併時區要加上</code>--no-ff`取消快轉。</p><ol start=\"7\"><li>練習題7</li></ol><p><img src=\"/2020/10/21/Git-分支-branch/7.png\" title=\"練習題7\"></p><p></p><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">git commit</span><br><span class=\"line\">git clone</span><br><span class=\"line\">git branch dev</span><br><span class=\"line\">git checkout dev</span><br><span class=\"line\">git commit</span><br><span class=\"line\">git commit</span><br><span class=\"line\">git checkout master</span><br><span class=\"line\">git merge dev --no-ff</span><br><span class=\"line\">git push</span><br></pre></td></tr></table></figure><p></p><p>新增commit c2後執行clone指令將數據庫Repository複製到遠端，新增<code>dev</code>分支並checkout到 <code>dev</code>分支，新增commit c3、c4，再checkout 會到<code>master</code>分支，執行merge 合併<code>dev</code>分支並取消快轉，最後再執行push指令推送回遠端數據庫。執行push推送指令後與遠端數據庫<code>master</code>分支同步的<code>o/master</code>即會執行同步。</p><ol start=\"8\"><li>練習題8</li></ol><p><img src=\"/2020/10/21/Git-分支-branch/8.png\" title=\"練習題8\"></p><p></p><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">git branch dev</span><br><span class=\"line\">git checkout dev</span><br><span class=\"line\">git commit</span><br><span class=\"line\">git commit</span><br><span class=\"line\">git checkout master</span><br><span class=\"line\">git merge dev --no-ff</span><br><span class=\"line\">git checkout dev</span><br><span class=\"line\">git commit</span><br><span class=\"line\">git commit</span><br><span class=\"line\">git checkout master</span><br><span class=\"line\">git merge dev</span><br></pre></td></tr></table></figure><p></p><ol start=\"9\"><li>練習題9</li></ol><p><img src=\"/2020/10/21/Git-分支-branch/9.png\" title=\"練習題9\"></p><p></p><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">git clone</span><br><span class=\"line\">git branch dev</span><br><span class=\"line\">git checkout dev</span><br><span class=\"line\">git commit</span><br><span class=\"line\">git commit</span><br><span class=\"line\">git checkout master</span><br><span class=\"line\">git merge dev --no-ff</span><br><span class=\"line\">git push</span><br><span class=\"line\">git checkout dev</span><br><span class=\"line\">git commit</span><br><span class=\"line\">git commit</span><br><span class=\"line\">git checkout master</span><br><span class=\"line\">git merge dev</span><br></pre></td></tr></table></figure><p></p><ol start=\"10\"><li>練習題10</li></ol><p><img src=\"/2020/10/21/Git-分支-branch/10.png\" title=\"練習題10\"></p><p></p><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">git commit</span><br><span class=\"line\">git clone</span><br><span class=\"line\">git commit</span><br><span class=\"line\">git commit</span><br><span class=\"line\">git commit</span><br><span class=\"line\">git branch dev</span><br></pre></td></tr></table></figure><p></p><ol start=\"11\"><li>練習題11</li></ol><p><img src=\"/2020/10/21/Git-分支-branch/11_前.png\" title=\"練習題11_前\"></p><p></p><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">git clone</span><br><span class=\"line\">git branch dev</span><br><span class=\"line\">git branch f/css</span><br><span class=\"line\">git checkout f/css</span><br><span class=\"line\">git commit</span><br><span class=\"line\">git commit</span><br></pre></td></tr></table></figure><p></p><p><img src=\"/2020/10/21/Git-分支-branch/11_中.png\" title=\"練習題11_中\"></p><p></p><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">git checkout dev</span><br><span class=\"line\">git merge f/css --no-ff</span><br></pre></td></tr></table></figure><p></p><p><img src=\"/2020/10/21/Git-分支-branch/11_後.png\" title=\"練習題11_後\"></p><p></p><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">git checkout master</span><br><span class=\"line\">git merge dev</span><br><span class=\"line\">git push</span><br></pre></td></tr></table></figure><p></p><ol start=\"12\"><li>練習題12</li></ol><p><img src=\"/2020/10/21/Git-分支-branch/12_前.png\" title=\"練習題12_前\"></p><p></p><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">git branch f/css</span><br><span class=\"line\">git checkout f/css</span><br><span class=\"line\">git commit</span><br><span class=\"line\">git commit</span><br><span class=\"line\">git checkout master</span><br><span class=\"line\">git branch f/js</span><br><span class=\"line\">git checkout f/js</span><br><span class=\"line\">git commit</span><br><span class=\"line\">git commit</span><br><span class=\"line\">git checkout master</span><br><span class=\"line\">git branch dev</span><br><span class=\"line\">git checkout dev</span><br></pre></td></tr></table></figure><p></p><p><img src=\"/2020/10/21/Git-分支-branch/12_中.png\" title=\"練習題12_中\"></p><p></p><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">git merge f/css</span><br><span class=\"line\">git merge f/js</span><br></pre></td></tr></table></figure><p></p><p><img src=\"/2020/10/21/Git-分支-branch/12_後.png\" title=\"練習題12_後\"></p><p></p><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">git checkout master</span><br><span class=\"line\">git merge dev</span><br></pre></td></tr></table></figure><p></p><ol start=\"13\"><li>練習題13</li></ol><p><img src=\"/2020/10/21/Git-分支-branch/個人開發.png\" title=\"練習題13_個人開發\"></p><p></p><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">git commit</span><br><span class=\"line\">git branch dev</span><br><span class=\"line\">git branch f/addA</span><br><span class=\"line\">git checkout f/addA</span><br><span class=\"line\">git commit</span><br><span class=\"line\">git commit</span><br><span class=\"line\">git checkout dev</span><br><span class=\"line\">git merge f/addA --no-ff</span><br><span class=\"line\">git branch f/addB</span><br><span class=\"line\">git checkout f/addB</span><br><span class=\"line\">git commit</span><br><span class=\"line\">git commit</span><br><span class=\"line\">git checkout dev</span><br><span class=\"line\">git merge f/addB --no-ff</span><br></pre></td></tr></table></figure><p></p><ol start=\"14\"><li>練習題14</li></ol><p><img src=\"/2020/10/21/Git-分支-branch/14.png\" title=\"練習題14_在一個 dev 上開兩個 feature\"></p><p></p><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">git branch dev</span><br><span class=\"line\">git branch f/a</span><br><span class=\"line\">git checkout f/a</span><br><span class=\"line\">git commit</span><br><span class=\"line\">git commit</span><br><span class=\"line\">git checkout dev</span><br><span class=\"line\">git merge f/a --no-ff</span><br><span class=\"line\">git branch f/b</span><br><span class=\"line\">git checkout f/b</span><br><span class=\"line\">git commit</span><br><span class=\"line\">git commit</span><br><span class=\"line\">git checkout dev</span><br><span class=\"line\">git branch f/c</span><br><span class=\"line\">git checkout f/c</span><br><span class=\"line\">git commit</span><br><span class=\"line\">git checkout dev</span><br><span class=\"line\">git merge f/b --no-ff</span><br></pre></td></tr></table></figure><p></p><ol start=\"15\"><li>練習題15</li></ol><p><img src=\"/2020/10/21/Git-分支-branch/15.png\" title=\"練習題15\"></p><p></p><figure class=\"highlight plain\"><table><tr><td class=\"code\"><pre><span class=\"line\">git clone</span><br><span class=\"line\">git branch dev</span><br><span class=\"line\">git branch f/a</span><br><span class=\"line\">git checkout f/a</span><br><span class=\"line\">git commit</span><br><span class=\"line\">git commit</span><br><span class=\"line\">git checkout dev</span><br><span class=\"line\">git merge f/a --no-ff</span><br><span class=\"line\">git checkout master</span><br><span class=\"line\">git merge dev</span><br><span class=\"line\">git push</span><br></pre></td></tr></table></figure><p></p><h4>Git 遠端分支練習</h4><p>請依照下面兩個指示設計，並<em>截圖 Sourtree 畫面與 GitHub Repo 網址</em></p><ol><li>請用 Git Branch 去做出下圖，有兩個本地分支 (master、dev)，一個遠端 GitHub 分支 (origin/master)</li><li>左側的三個 JS 功能如下，不需寫 HTML，<em>只寫 JS 邏輯即可，或是自訂功能也可以</em>。</li></ol><p></p><h5>JS 三個功能</h5><p>以下題目都用 console.log 顯示結果 1.印出乘法表，從 3~15，從 3x1、3x2~一直到 15x15 2.請建立一個 BMI 函式，裡頭有兩個參數(身高,體重)，執行時會印出對應 BMI，並取小數點後一位。範例如下</p><blockquote><p>input: BMI(178,70) console.log：25.2</p></blockquote><p>3.請用 for 迴圈，1 加到 10，最後用 console 印出總數 此為 sourcetree 提示</p><p><img src=\"/2020/10/21/Git-分支-branch/sourcetree截圖.jpg\" title=\"sourcetree截圖\"></p><p><img src=\"/2020/10/21/Git-分支-branch/github截圖.jpg\" title=\"github截圖\"></p><p><a href=\"https://github.com/mancen/git-branch\" target=\"_blank\" rel=\"noopener\">遠端github數據庫</a></p><!-- rebuild by neat -->","categories":["git"],"tags":["git"]},{"title":"JavaScript DOM","url":"/2020/03/16/JavaScript-DOM/","content":"<!-- build time:Sun May 23 2021 15:10:01 GMT+0800 (GMT+08:00) --><h2>什麼是DOM？</h2><p></p><figure class=\"highlight html\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"meta\"><!DOCTYPE html></span></span><br><span class=\"line\"><span class=\"tag\"><<span class=\"name\">html</span> <span class=\"attr\">lang</span>=<span class=\"string\">\"en\"</span>></span></span><br><span class=\"line\"><span class=\"tag\"><<span class=\"name\">head</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">title</span>></span>Document<span class=\"tag\"></<span class=\"name\">title</span>></span></span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">head</span>></span></span><br><span class=\"line\"><span class=\"tag\"><<span class=\"name\">body</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">h1</span>></span>Header<span class=\"tag\"></<span class=\"name\">h1</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">a</span> <span class=\"attr\">href</span>=<span class=\"string\">\"#\"</span>></span>MyLink<span class=\"tag\"></<span class=\"name\">a</span>></span></span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">body</span>></span></span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">html</span>></span></span><br></pre></td></tr></table></figure><p></p><p>上面是HTML的格式，而透在瀏覽器中又是如何渲染成網頁，我們可以透過以下的樹狀圖發現，所有的HTML標籤都會化成一個元素，所以在JavaScript中可以使用過去文章提到的<code>document.getElementById()</code>來達到選取特定的元素，並操控元素或改變其內容。</p><p><img src=\"/2020/03/16/JavaScript-DOM/DOM_tree.jpg\" title=\"DOM樹狀結構\"></p><p><a id=\"more\"></a></p><h2>選取單一元素</h2><p>在HTML中除了可以利用<code>id</code>這個屬性來辨別各個DOM之外，還可以使用<code>class</code> - <code>#id</code>整個HTML中一個id只能對應到一個DOM - <code>.class</code>整個HTML中一個class可以對應到多個DOM</p><p>選取單一元素的方法，可以使用之前提到的<code>document.getElementById()</code>，在括號內帶入要選擇的元素id名稱，須注意在一整個HTML中的id只能對應到一個DOM，，否則容易出現錯誤。</p><p></p><figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">var</span> el = <span class=\"built_in\">document</span>.getElementById(<span class=\"string\">'titleId'</span>);</span><br><span class=\"line\">el.textContent = <span class=\"string\">\"123\"</span>;</span><br></pre></td></tr></table></figure><p></p><p>另外，還有一個選取元素的方法式<code>document.querySelector()</code>，在括號內帶入元素的class或id名稱，撰寫方式和css相同(用<code>.class名稱</code>、`#id名稱來選取對應的DOM)。</p><p></p><figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">var</span> el = <span class=\"built_in\">document</span>.querySelector(<span class=\"string\">'.titleClass'</span>); <span class=\"comment\">// 會從上到下，找出class為'.titleClass'的第一個DOM</span></span><br><span class=\"line\">el.textContent = <span class=\"string\">\"123\"</span>;</span><br></pre></td></tr></table></figure><p></p><p><code>宣告el變數目的是為了讓程式碼更簡潔與容易閱讀，後續維護也比較方便</code></p><h2>重複選取多個元素</h2><p><code>document.querySelector()</code>的功能是選取第一個符合條件的元素，如果要同時選取多個元素的話，我們可以使用<code>document.querySelectorAll()</code>來選取，透過console.log()查詢可以發現這時候會回傳一個陣列，我們就可以採用前面文章提到的陣列的方式來操控或是修改元素的內容。</p><p></p><figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">var</span> el = <span class=\"built_in\">document</span>.querySelectorAll(<span class=\"string\">'.titleClass em'</span>);<span class=\"comment\">// 會從上到下，找出class為'.titleClass'的全部DOM</span></span><br><span class=\"line\"><span class=\"built_in\">console</span>.log(el); <span class=\"comment\">// 回傳 [em, em]陣列</span></span><br><span class=\"line\"></span><br><span class=\"line\">el[<span class=\"number\">0</span>].textContent = <span class=\"string\">'123'</span>;</span><br><span class=\"line\">el[<span class=\"number\">1</span>].textContent = <span class=\"string\">'123'</span>;</span><br></pre></td></tr></table></figure><p></p><p>而在不確定選擇的元素有多少時，可以使用for迴圈來依序修改元素的內容。</p><p></p><figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">var</span> elLen = el.length;</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">for</span>(<span class=\"keyword\">var</span> i = <span class=\"number\">0</span>;i<elLen;i++){</span><br><span class=\"line\"> el[i].textContent = i+<span class=\"string\">'123'</span>;</span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure><p></p><h2>setAttribute - 增加標籤屬性</h2><p>我們如果想要動態的透過JavaScript來增加或修改標籤的屬性，可以透過<code>setAttribute('指定的標籤','要修的內容')</code>，例如在以下的HTML內容中，我們如何去修改<code><a></code>裡面的<code>href</code>屬性呢？</p><p></p><figure class=\"highlight html\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\"><<span class=\"name\">h1</span> <span class=\"attr\">class</span>=<span class=\"string\">\"titleClass\"</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">a</span> <span class=\"attr\">href</span>=<span class=\"string\">\"#\"</span>></span>title<span class=\"tag\"></<span class=\"name\">a</span>></span></span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">h1</span>></span></span><br></pre></td></tr></table></figure><p></p><p>在這裡可以使用<code>document.querySelector()</code>指定到<code><a></code>標籤，再使用<code>setAttribute()</code>來修改<code>href</code>屬性中連結的網址</p><p></p><figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">var</span> el = <span class=\"built_in\">document</span>.querySelector(<span class=\"string\">'.titleClass a'</span>); </span><br><span class=\"line\">el.setAttribute(<span class=\"string\">'href'</span>,<span class=\"string\">'http://www.google.com'</span>); </span><br><span class=\"line\"><span class=\"keyword\">var</span> url = el.getAttribute(<span class=\"string\">\"href\"</span>); </span><br><span class=\"line\"><span class=\"comment\">// (1)先利用querySelector來取得想要操作的DOM</span></span><br><span class=\"line\"><span class=\"comment\">// (2)'herf'是屬性名稱，'http://www.google.com'是屬性的值</span></span><br><span class=\"line\"><span class=\"comment\">// (3)利用getAttribute可以把屬性的值讀出來，所以這裡的url就會是'http://www.google.com'</span></span><br></pre></td></tr></table></figure><p></p><p>但如果我們想要動態的新增一個新的屬性又該怎麼做呢？可以修改當然也可以新增，我們來看這個例子，首先，我們有一個<code><div class="str"></code>標籤，然後我們在<code><style></code>標籤中新增了一個新的<code>#strId</code>樣式，我們想要透過JavaScript的方式動態的賦於這個新的id給<code><div></code>。</p><p></p><figure class=\"highlight html\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"tag\"><<span class=\"name\">head</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">style</span>></span></span><br><span class=\"line\"><span class=\"css\"> <span class=\"selector-id\">#strId</span>{</span></span><br><span class=\"line\"> color: blue;</span><br><span class=\"line\"> font-size: 48px;</span><br><span class=\"line\"> }</span><br><span class=\"line\"> <span class=\"tag\"></<span class=\"name\">style</span>></span></span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">head</span>></span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"tag\"><<span class=\"name\">body</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">div</span> <span class=\"attr\">class</span>=<span class=\"string\">\"str\"</span>></span>hello<span class=\"tag\"></<span class=\"name\">div</span>></span></span><br><span class=\"line\"> <span class=\"tag\"><<span class=\"name\">script</span> <span class=\"attr\">src</span>=<span class=\"string\">\"js/all.js\"</span>></span><span class=\"tag\"></<span class=\"name\">script</span>></span></span><br><span class=\"line\"><span class=\"tag\"></<span class=\"name\">body</span>></span></span><br></pre></td></tr></table></figure><p></p><p>接下來，選取指定標籤後，用<code>setAttribute('要新增的屬性','屬性的名稱')</code>來動態的新增將原來的<code><div class="str"></code>加上新的屬性更改為<code><div class="str" id="strId"></code>。</p><p></p><figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">var</span> el2 = <span class=\"built_in\">document</span>.querySelector(<span class=\"string\">'.str'</span>);</span><br><span class=\"line\">el2.setAttribute(<span class=\"string\">'id'</span>,<span class=\"string\">'strId'</span>);</span><br></pre></td></tr></table></figure><p></p><p>那能不能動態的查詢HTML標籤的內呢？當然也可以，這裡我們要用到一個<code>setAttribute('指定的標籤','要修的內容')</code>很像的功能，叫做<code>getAttribute('要擷取內容的標籤或屬性')</code>，我們用前面<code><a></code>例子中HTML的內容看一下以下的例子</p><p></p><figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">var</span> el3 = <span class=\"built_in\">document</span>.querySelector(<span class=\"string\">'.titleClass a'</span>).getAttribute(<span class=\"string\">'href'</span>);</span><br><span class=\"line\"><span class=\"built_in\">console</span>.log(el3); <span class=\"comment\">// 回傳'http://www.google.com'(href屬性中的內容)</span></span><br><span class=\"line\"></span><br><span class=\"line\">el3 = <span class=\"built_in\">document</span>.querySelector(<span class=\"string\">'.titleClass a'</span>).innerHTML;</span><br><span class=\"line\"><span class=\"built_in\">console</span>.log(el3); <span class=\"comment\">// 回傳\"title\"(a連結的內容)</span></span><br><span class=\"line\"></span><br><span class=\"line\">el3 = <span class=\"built_in\">document</span>.querySelector(<span class=\"string\">'.titleClass'</span>).innerHTML;</span><br><span class=\"line\"><span class=\"built_in\">console</span>.log(el3); <span class=\"comment\">// 回傳\" <a href=\"http://www.google.com\">title</a>\"(整個titleClass中的內容)</span></span><br></pre></td></tr></table></figure><p></p><p>以上就是在HTML可以新增、修改屬性，以及取出屬性值的方法，未來可以透過各種的運算和比對來進行更多的處理。</p><h2>用JavaScript操控HTML的方法</h2><p>用JavaScript要達到操控HTML有兩種方法，兩種方法的比較如下</p><table><thead><tr><th style=\"text-align:center\"></th><th style=\"text-align:center\">innerHTML</th><th style=\"text-align:center\">creatElement</th></tr></thead><tbody><tr><td style=\"text-align:center\">方法</td><td style=\"text-align:center\">組完字串，傳進語法進行渲染</td><td style=\"text-align:center\">以DOM節點來處理</td></tr><tr><td style=\"text-align:center\">優點</td><td style=\"text-align:center\">效能快</td><td style=\"text-align:center\">安全性高</td></tr><tr><td style=\"text-align:center\">缺點</td><td style=\"text-align:center\">資安風險，要確保來源沒問題</td><td style=\"text-align:center\">效能差</td></tr></tbody></table><h3>innerHTML 的寫法</h3><p><code>innerHTML</code>和<code>textContent</code>的不同是<code>textContent</code>修改的是指定標籤中的文字內容，而<code>innerHTML</code>還可以加入其他的屬性標籤。另外，<code>innerHTML</code>在帶入標籤內容時，會先將原有的內容清空，再存入要賦於的值，這個特性在需要帶入陣列內容或<code>JSON</code>資料時非常好用。</p><p></p><figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">var</span> el = <span class=\"built_in\">document</span>.getElementById(<span class=\"string\">'main'</span>);</span><br><span class=\"line\">el.innerHTML = <span class=\"string\">'<h1>1234</h1>'</span> </span><br><span class=\"line\"><span class=\"comment\">// (1) 利用getElementById取的想要操作的DOM</span></span><br><span class=\"line\"><span class=\"comment\">// (2) 利用innerHTML把我們想變更或新增的DOM寫到上面選擇的DOM中</span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"comment\">//原來的HTML</span></span><br><span class=\"line\"><span class=\"comment\">// <div id=\"main\">hello</div></span></span><br><span class=\"line\"><span class=\"comment\">// 變更後的HTML(可以看到原有的內容'hello'不見了)</span></span><br><span class=\"line\"><span class=\"comment\">// <div id=\"main\"><h1>1234</h1></div></span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">var</span> str = <span class=\"string\">'<h1 class=\"blue\">1234</h1>'</span></span><br><span class=\"line\">el.innerHTML = str+str; <span class=\"comment\">// 可將宣告的字串變數相加 </span></span><br><span class=\"line\"><span class=\"comment\">// <div id=\"main\"></span></span><br><span class=\"line\"><span class=\"comment\">//<h1 class=\"blue\">1234</h1></span></span><br><span class=\"line\"><span class=\"comment\">// <h1 class=\"blue\">1234</h1></span></span><br><span class=\"line\"><span class=\"comment\">// </div></span></span><br></pre></td></tr></table></figure><p></p><p>在寫<code>innerHTML</code>的時候，還有一個小技巧是，雖然<code>innerHTML</code>是用字串傳入HTML標籤中，但我們還是可以用字串加變數的方式來撰寫，尤其是在遇到要載入陣列或是<code>JSON</code>的時候就可以使程式碼更簡潔，也增加程式碼的易讀性。</p><p></p><figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">var</span> el = <span class=\"built_in\">document</span>.querySelector(<span class=\"string\">'.list'</span>);</span><br><span class=\"line\"><span class=\"keyword\">var</span> link = <span class=\"string\">'http://www.google.com.tw'</span>;</span><br><span class=\"line\"><span class=\"keyword\">var</span> name = <span class=\"string\">'mancen'</span></span><br><span class=\"line\"></span><br><span class=\"line\">el.innerHTML = <span class=\"string\">'<li><a href=\"'</span>+ link +<span class=\"string\">'\">'</span>+name+<span class=\"string\">'</a></li>'</span>; <span class=\"comment\">// 須留意字串與變數連結時的引號是否完整</span></span><br></pre></td></tr></table></figure><p></p><h4>innerHTML搭配for迴圈</h4><p><code>innerHTML</code>搭配for迴圈即可取出陣列中的特定元素值，但須注意的是<code>innerHTML</code>在將值帶入前會先內容清空，因此我們先宣告一個<code>str</code>變數，賦於的值是一個空字串，透過for回圈將元素資料存入<code>str</code>字串中，在結束for迴圈後再執行<code>innerHTML</code>。</p><p></p><figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">var</span> el = <span class=\"built_in\">document</span>.querySelector(<span class=\"string\">'.list'</span>);</span><br><span class=\"line\"><span class=\"keyword\">var</span> farmLen = farms.length;</span><br><span class=\"line\"><span class=\"keyword\">var</span> str = <span class=\"string\">''</span>;</span><br><span class=\"line\"><span class=\"keyword\">for</span>(<span class=\"keyword\">var</span> i = <span class=\"number\">0</span>;i<farmLen;i++){</span><br><span class=\"line\"> <span class=\"keyword\">var</span> content = <span class=\"string\">'<li>'</span>+ farms[i].farmer +<span class=\"string\">'</li>'</span>;</span><br><span class=\"line\"> str+=content;</span><br><span class=\"line\"> </span><br><span class=\"line\">}</span><br><span class=\"line\">el.innerHTML = str;</span><br></pre></td></tr></table></figure><p></p><h3>createElement 的寫法</h3><p>在前面提到關於瀏覽器如何解析網頁元素的樹狀圖中，我們可以看到每個HTML標籤都是一個節點，而標籤的內容又隸屬於標籤下的子節點。<code>createElement()</code>是透過JavaScript來先栽元素內容組織完成，在藉由<code>appendChild()</code>語法來達到新增一個子節點的方式。可以透過以下的範例來理解</p><p></p><figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">var</span> str = <span class=\"built_in\">document</span>.createElement(<span class=\"string\">'em'</span>); <span class=\"comment\">// 先利用createElement建立一個節點</span></span><br><span class=\"line\">str.textContent = <span class=\"string\">'1234'</span>; <span class=\"comment\">// 利用textContent把想寫的文字放進去</span></span><br><span class=\"line\">str.setAttribute(<span class=\"string\">'class'</span>,<span class=\"string\">'blue'</span>); <span class=\"comment\">// 利用setAttribute把想放入的屬性加進去</span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"comment\">// 增加子節點</span></span><br><span class=\"line\"><span class=\"built_in\">document</span>.querySelector(<span class=\"string\">'.title'</span>).appendChild(str); <span class=\"comment\">// 藉由'querySelector()'找到想要把str放入的節點，並由'appendChild'來增加標籤中的子節點</span></span><br></pre></td></tr></table></figure><p></p><p>在這裡要留意的是，<code>createElement()</code>在增加子節點時，並不會清空標籤內原有的內容，這和<code>innerHTML</code>的特性不同。</p><h4>createElement搭配for迴圈</h4><p>和<code>innerHTML</code>相同，<code>createElement</code>也可以搭配for迴圈來帶入陣列中的資料到HTML標籤中，如下面的範例：</p><p></p><figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">var</span> el = <span class=\"built_in\">document</span>.querySelector(<span class=\"string\">'.list'</span>); <span class=\"comment\">// 指定特定的節點</span></span><br><span class=\"line\"><span class=\"keyword\">var</span> farmLen = farms.length; <span class=\"comment\">// 計算陣列的個數</span></span><br><span class=\"line\"><span class=\"keyword\">for</span>(<span class=\"keyword\">var</span> i =<span class=\"number\">0</span>;i<farmLen;i++){</span><br><span class=\"line\"> <span class=\"keyword\">var</span> str = <span class=\"built_in\">document</span>.createElement(<span class=\"string\">'li'</span>); <span class=\"comment\">// 用createElement建立一個節點</span></span><br><span class=\"line\"> str.textContent = farms[i].farmer; <span class=\"comment\">// 從陣列中擷取要存入標籤的值，利用textContent把想寫的文字放進去</span></span><br><span class=\"line\"> el.appendChild(str); <span class=\"comment\">// 增加子節點</span></span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure><p></p><p>這裡和前面不同的地方是，不用宣告一個變數來儲存字串，因為<code>createElement()</code>搭配<code>appendChild()</code>在帶入資料時並不會將原有的內容清空，而是依序將資料附加上去，因此不需要另外宣告變數來儲存字串。</p><h2>XSS 跨網站指令碼注意事項（Cross-site scripting）</h2><p>前面有提到在使用<code>innerHTML</code>需要確保來源是可信任的，這是因為如果使用<code>innerHTML</code>所渲染的內容是由使用者操控的，就有可能被有心人士植入<code><script></script></code>或是將惡意程式碼存入資料庫中，因此在使用<code>innerHTML</code>時，來源是否可信任就會變得很重要，一般來說我們已經確認過內容的陣列或物件、以及由自己的資料庫中所擷取的資料、openData上擷取的內容，都是比較能夠信任的資料。</p><p><img src=\"/2020/03/16/JavaScript-DOM/XSS.jpg\" title=\"`textarea`被植入`<script></script>`範例\"></p><p>除了避免在使用者能控制的範圍使用<code>innerHTML</code>渲染之外，在<code><textarea></textarea></code>資料的處理上，有些前端或後端工程師會分別去留意<code><</code>和<code>></code>這樣特殊符號的處理以及排錯後，在進行後續的渲染或存入資料庫，以增強網站的安全性。而這部分也可以使用框架來進行處理，或是與後端工程師進行溝通。</p><!-- rebuild by neat -->","categories":["JavaScript"],"tags":["JavaScript","DOM"]},{"title":"JavaScript event(事件)","url":"/2020/03/19/JavaScript-event-%E4%BA%8B%E4%BB%B6/","content":"<!-- build time:Sun May 23 2021 15:10:01 GMT+0800 (GMT+08:00) --><h2>什麼是event(事件)？</h2><p>event是在JavaScript使HTML能和使用者間互動的功能，例如<code>onclick</code>可以偵測使用者是否點擊元素等等。在<a href=\"https://www.w3schools.com/tags/ref_eventattributes.asp\" target=\"_blank\" rel=\"noopener\">W3Cschool的event列表</a>中我們可以看到各式各樣的事件，而有這麼多事件主要的目的是為了使用者的體驗能夠更好。</p><p><a id=\"more\"></a></p><h2>event物件 - 記錄當下元素資訊</h2><p>我們在撰寫event的funtion時，JavaScript會在function中的第一個參數儲存事件元素資訊物件，舉個例子：</p><p></p><figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">var</span> el = <span class=\"built_in\">document</span>.querySelector(<span class=\"string\">'.btn'</span>);</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"comment\">// function的參數'e'可任意命名，也有人會使用event</span></span><br><span class=\"line\">el.onclick = <span class=\"function\"><span class=\"keyword\">function</span>(<span class=\"params\">e</span>)</span>{</span><br><span class=\"line\"> <span class=\"built_in\">console</span>.log(e); <span class=\"comment\">// 當事件觸發記錄當下資訊的物件</span></span><br><span class=\"line\"></span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure><p></p><p><img src=\"/2020/03/19/JavaScript-event-事件/event_e.jpg\" title=\"console視窗中event資訊物件內容\"></p><p>在上面的圖示中可以看到，除了event觸發的座標等資訊外，甚至還記錄了當下<code>alt</code>或<code>ctrl</code>鍵是否被按住等資訊，這些都是可以用來優化使用者體驗的資訊。</p><h2>addEventListener - 事件監聽</h2><p><code>addEventListener</code>又稱為是鍵監聽，寫法為<code>addEventListener(選擇事件,代入匿名function, false)</code>，透過偵測元素上的事件來觸發<code>function</code>，在這裡的事件和<code>onclick</code>不同，不需要加上<code>on</code>。</p><p></p><figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">var</span> el = <span class=\"built_in\">document</span>.querySelector(<span class=\"string\">'.btn'</span>);</span><br><span class=\"line\"> </span><br><span class=\"line\"><span class=\"comment\">//監聽 // 選擇事件,代入匿名function, false</span></span><br><span class=\"line\">el.addEventListener(<span class=\"string\">'click'</span>,<span class=\"function\"><span class=\"keyword\">function</span>(<span class=\"params\">e</span>)</span>{</span><br><span class=\"line\"> alert(<span class=\"string\">'hello'</span>);</span><br><span class=\"line\">},<span class=\"literal\">false</span>)</span><br></pre></td></tr></table></figure><p></p><p>其中，<code>addEventListener</code>和<code>onclick</code>還有一個差異是：<code>onclick</code>在綁定多個事件時，只會執行最後一個事件；而<code>addEventListener</code>則可以綁定多個事件。</p><p></p><figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"comment\">// <input type=\"button\" class=\"btnOn\" value=\"on點擊\"></span></span><br><span class=\"line\"><span class=\"keyword\">var</span> elOn = <span class=\"built_in\">document</span>.querySelector(<span class=\"string\">'.btnOn'</span>);</span><br><span class=\"line\">elOn.onclick = <span class=\"function\"><span class=\"keyword\">function</span> (<span class=\"params\"></span>)</span>{</span><br><span class=\"line\"> alert(<span class=\"string\">'on-1'</span>);</span><br><span class=\"line\">}</span><br><span class=\"line\">elOn.onclick = <span class=\"function\"><span class=\"keyword\">function</span> (<span class=\"params\"></span>)</span>{</span><br><span class=\"line\"> alert(<span class=\"string\">'on-2'</span>);</span><br><span class=\"line\">} <span class=\"comment\">// 只會彈出alert 'on-2'</span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"comment\">// <input type=\"button\" class=\"btnAdd\" value=\"add點擊\"></span></span><br><span class=\"line\"><span class=\"comment\">// 事件監聽</span></span><br><span class=\"line\"><span class=\"keyword\">var</span> elAd = <span class=\"built_in\">document</span>.querySelector(<span class=\"string\">'.btnAdd'</span>);</span><br><span class=\"line\">elAd.addEventListener(<span class=\"string\">'click'</span>,<span class=\"function\"><span class=\"keyword\">function</span>(<span class=\"params\"></span>)</span>{</span><br><span class=\"line\"> alert(<span class=\"string\">'add-1'</span>)</span><br><span class=\"line\">},<span class=\"literal\">false</span>)</span><br><span class=\"line\">elAd.addEventListener(<span class=\"string\">'click'</span>,<span class=\"function\"><span class=\"keyword\">function</span>(<span class=\"params\"></span>)</span>{</span><br><span class=\"line\"> alert(<span class=\"string\">'add-2'</span>)</span><br><span class=\"line\">},<span class=\"literal\">false</span>)</span><br><span class=\"line\"><span class=\"comment\">// 兩個事件均會執行，會彈出兩次alert</span></span><br></pre></td></tr></table></figure><p></p><p><code>addEventListener</code>為什麼要帶第三個參數<code>false</code>，我們可以看一下以下的程式，在<code>HTML</code>中<code>body</code>元素中有<code>box</code>元素，而最後一個參數代表的意義是告訴瀏覽器該如何找到該元素的差異 - false (事件氣泡 - event Bubbling) - 從指定元素往外找 - true (事件捕捉 - event capturing) - 從最外面找到指定元素</p><p></p><figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"comment\">//<body class=\"body\"></span></span><br><span class=\"line\"><span class=\"comment\">// <div class=\"box\"></div></span></span><br><span class=\"line\"><span class=\"comment\">// <script src=\"js/all.js\"></script></span></span><br><span class=\"line\"><span class=\"comment\">//</body></span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">var</span> el = <span class=\"built_in\">document</span>.querySelector(<span class=\"string\">'.box'</span>);</span><br><span class=\"line\">el.addEventListener(<span class=\"string\">'click'</span>,<span class=\"function\"><span class=\"keyword\">function</span>(<span class=\"params\"></span>)</span>{</span><br><span class=\"line\"> alert(<span class=\"string\">'box'</span>);</span><br><span class=\"line\"> <span class=\"built_in\">console</span>.log(<span class=\"string\">'box'</span>);</span><br><span class=\"line\">},<span class=\"literal\">false</span>);</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">var</span> elBody = <span class=\"built_in\">document</span>.querySelector(<span class=\"string\">'.body'</span>);</span><br><span class=\"line\">elBody.addEventListener(<span class=\"string\">'click'</span>,<span class=\"function\"><span class=\"keyword\">function</span>(<span class=\"params\"></span>)</span>{</span><br><span class=\"line\"> alert(<span class=\"string\">'body'</span>);</span><br><span class=\"line\"> <span class=\"built_in\">console</span>.log(<span class=\"string\">'body'</span>);</span><br><span class=\"line\">},<span class=\"literal\">false</span>);</span><br><span class=\"line\"><span class=\"comment\">// false (事件氣泡 - event Bubbling) - 從指定元素往外找</span></span><br><span class=\"line\"><span class=\"comment\">// true (事件捕捉 - event capturing) - 從最外面找到指定元素</span></span><br></pre></td></tr></table></figure><p></p><h3>stopPropagation - 中止冒泡事件</h3><p>當有多個<code>addEventListener</code>事件且元素有重疊的時候；例如前面提到的例子在<code>.box</code>之外還有<code>.body</code>，如果不希望JavaScript從指定元素再繼續往外或往內找，我們可以使用<code>stopPropagation</code>語法來中止不繼續觸發其他元素的事件監聽，使元素間的事件觸發不會互相影響。</p><p></p><figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">var</span> el = <span class=\"built_in\">document</span>.querySelector(<span class=\"string\">'.box'</span>);</span><br><span class=\"line\">el.addEventListener(<span class=\"string\">'click'</span>,<span class=\"function\"><span class=\"keyword\">function</span>(<span class=\"params\">e</span>)</span>{ <span class=\"comment\">// function須帶參數記錄當下的元素資訊</span></span><br><span class=\"line\"> e.stopPropagation(); <span class=\"comment\">// 只執行目前的監聽行為，不再處理其他重疊元素的監聽行為</span></span><br><span class=\"line\"> alert(<span class=\"string\">'box'</span>);</span><br><span class=\"line\"> <span class=\"built_in\">console</span>.log(<span class=\"string\">'box'</span>);</span><br><span class=\"line\">},<span class=\"literal\">false</span>);</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">var</span> elBody = <span class=\"built_in\">document</span>.querySelector(<span class=\"string\">'.body'</span>);</span><br><span class=\"line\">elBody.addEventListener(<span class=\"string\">'click'</span>,<span class=\"function\"><span class=\"keyword\">function</span>(<span class=\"params\"></span>)</span>{</span><br><span class=\"line\"> alert(<span class=\"string\">'你沒有點到box'</span>);</span><br><span class=\"line\"> <span class=\"built_in\">console</span>.log(<span class=\"string\">'你沒有點到box'</span>);</span><br><span class=\"line\">},<span class=\"literal\">false</span>);</span><br></pre></td></tr></table></figure><p></p><h3>preventDefault - 取消預設觸發行為</h3><p>有時候再使用<code><a></a></code>連結是並不是真的要跳轉網頁或是連結錨點，可能只是要將選單彈出或其他的目的，這時候就會需要用到<code>preventDefault()</code>語法來取消預設的行為。</p><p></p><figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"comment\">// HTML</span></span><br><span class=\"line\"><span class=\"comment\">//<a href=\"#\" class=\"link\" style= \"margin-top: 1080px;display: block;\">menu icon</a></span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">var</span> el = <span class=\"built_in\">document</span>.querySelector(<span class=\"string\">'.link'</span>);</span><br><span class=\"line\">el.addEventListener(<span class=\"string\">'click'</span>,<span class=\"function\"><span class=\"keyword\">function</span>(<span class=\"params\">e</span>)</span>{ <span class=\"comment\">// function須帶參數記錄當下的元素資訊</span></span><br><span class=\"line\"><span class=\"comment\">// 取消元素的默認行為</span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"comment\">// 原本點擊連結會跳轉到網頁頂端(因為沒有寫錨點)</span></span><br><span class=\"line\"> e.preventDefault(); </span><br><span class=\"line\">},<span class=\"literal\">false</span>);</span><br></pre></td></tr></table></figure><p></p><p>還有一種可能用到<code>preventDefault()</code>語法的情境是表單的<code>submit</code>按鈕，當我們不希望直接將表單內容送出，而是先使用JavaScript 程式來查詢表單填寫是否符合規則，才用<code>POST</code>去傳送表單內容。</p><h3>e.target - 了解目前所在元素位置</h3><p>當我們在開發過程希望確定元素事件的觸發位置是否正確時，可以透過<code>e.target</code>來查詢</p><p></p><figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">var</span> el = <span class=\"built_in\">document</span>.querySelector(<span class=\"string\">'html'</span>);</span><br><span class=\"line\">el.addEventListener(<span class=\"string\">'click'</span>,<span class=\"function\"><span class=\"keyword\">function</span>(<span class=\"params\">e</span>)</span>{</span><br><span class=\"line\"> e.preventDefault(); <span class=\"comment\">// 取消元素的默認行為</span></span><br><span class=\"line\"> <span class=\"built_in\">console</span>.log(e.target); <span class=\"comment\">// 偵測點擊的元素</span></span><br><span class=\"line\"> <span class=\"built_in\">console</span>.log(e.target.nodeName); <span class=\"comment\">// 偵測點擊的元素名稱(全大寫)</span></span><br><span class=\"line\">})</span><br></pre></td></tr></table></figure><p></p><h3>change - 表單內容更動內容時觸發</h3><p>當HTML下拉選單的值改變後，入網頁呈現的內容要跟著改變的時候，就可以使用事件監聽中<code>change</code>的功能。</p><p></p><figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">var</span> area = <span class=\"built_in\">document</span>.getElementById(<span class=\"string\">'areaId'</span>); <span class=\"comment\">// HTML中的下拉選單</span></span><br><span class=\"line\"><span class=\"keyword\">var</span> list = <span class=\"built_in\">document</span>.querySelector(<span class=\"string\">'.list'</span>);</span><br><span class=\"line\"><span class=\"keyword\">var</span> country = [<span class=\"string\">'物件內容'</span>]</span><br><span class=\"line\"><span class=\"keyword\">var</span> len = country.length;</span><br><span class=\"line\"><span class=\"function\"><span class=\"keyword\">function</span> <span class=\"title\">updateList</span>(<span class=\"params\">e</span>)</span>{</span><br><span class=\"line\"> <span class=\"keyword\">var</span> select = e.target.value; <span class=\"comment\">// 讀取下拉選單元素的現值</span></span><br><span class=\"line\"> <span class=\"keyword\">var</span> str=<span class=\"string\">''</span>;</span><br><span class=\"line\"> <span class=\"keyword\">for</span>(<span class=\"keyword\">var</span> i=<span class=\"number\">0</span>;len>i;i++){</span><br><span class=\"line\"> <span class=\"keyword\">if</span>(select== country[i].place){ <span class=\"comment\">//將元素現值與陣列中的物件屬性比對</span></span><br><span class=\"line\"> str += <span class=\"string\">'<li>'</span>+country[i].farmer+<span class=\"string\">'</li>'</span> <span class=\"comment\">// 將符合條件的組成字串存入'str'變數</span></span><br><span class=\"line\"> }</span><br><span class=\"line\"> }</span><br><span class=\"line\"> list.innerHTML = str; <span class=\"comment\">// 輸出'Str'變數</span></span><br><span class=\"line\">}</span><br><span class=\"line\"></span><br><span class=\"line\">area.addEventListener(<span class=\"string\">'change'</span>,updateList,<span class=\"literal\">false</span>) <span class=\"comment\">// 事件監聽</span></span><br></pre></td></tr></table></figure><p></p><h3>keyCode - 鍵盤事件</h3><p><code>addEventListener</code>也可以偵測鍵盤事件，透過<code>keydown</code>來監聽特定按鍵是否被按下 來觸發元素事件。而在這樣的情境下如果不知道鍵盤上各按鍵的<code>keycode</code>可以使用<code>console.log(e.keycode)</code>來查詢。且因為按鍵數量是已知的，因此可以搭配<code>switch</code>語法撰寫。</p><p></p><figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"comment\">// 透過按鍵1、2、3來觸發goRocket函式，更改css中bottom位置</span></span><br><span class=\"line\"><span class=\"keyword\">var</span> body = <span class=\"built_in\">document</span>.body;</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"function\"><span class=\"keyword\">function</span> <span class=\"title\">goRocket</span>(<span class=\"params\">e</span>)</span>{</span><br><span class=\"line\"> <span class=\"comment\">// console.log(e.keyCode); // 查詢按鍵keycode</span></span><br><span class=\"line\"> <span class=\"keyword\">switch</span>(e.keyCode){</span><br><span class=\"line\"> <span class=\"keyword\">case</span> <span class=\"number\">49</span>:</span><br><span class=\"line\"> <span class=\"built_in\">document</span>.querySelector(<span class=\"string\">'.rocket-1'</span>).style.bottom = <span class=\"string\">'2000px'</span></span><br><span class=\"line\"> <span class=\"keyword\">break</span>;</span><br><span class=\"line\"> <span class=\"keyword\">case</span> <span class=\"number\">50</span>:</span><br><span class=\"line\"> <span class=\"built_in\">document</span>.querySelector(<span class=\"string\">'.rocket-2'</span>).style.bottom = <span class=\"string\">'2000px'</span></span><br><span class=\"line\"> <span class=\"keyword\">break</span>;</span><br><span class=\"line\"> <span class=\"keyword\">case</span> <span class=\"number\">51</span>: </span><br><span class=\"line\"> <span class=\"built_in\">document</span>.querySelector(<span class=\"string\">'.rocket-3'</span>).style.bottom = <span class=\"string\">'2000px'</span></span><br><span class=\"line\"> <span class=\"keyword\">break</span>;</span><br><span class=\"line\"> }</span><br><span class=\"line\">}</span><br><span class=\"line\"></span><br><span class=\"line\">body.addEventListener(<span class=\"string\">'keydown'</span>,goRocket,<span class=\"literal\">false</span>)</span><br></pre></td></tr></table></figure><p></p><h3>blur - 離開焦點時進行事件觸發</h3><p>在文字表單中，會有focus(所在焦點)和blur(離開焦點)兩種狀態，我們可以藉由這兩種狀態來觸發表單內容檢查的程式碼，來確認表單內容填寫完整或內容是否符合規則。</p><p></p><figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"function\"><span class=\"keyword\">function</span> <span class=\"title\">checkContent</span>(<span class=\"params\">e</span>)</span>{</span><br><span class=\"line\"> <span class=\"keyword\">var</span> str = e.target.value; <span class=\"comment\">// 擷取表單欄位的內容</span></span><br><span class=\"line\"> <span class=\"keyword\">if</span>(str==<span class=\"string\">''</span>){</span><br><span class=\"line\"> alert(<span class=\"string\">'此欄位不可為空'</span>)</span><br><span class=\"line\"> }</span><br><span class=\"line\">}</span><br><span class=\"line\"><span class=\"keyword\">var</span> el = <span class=\"built_in\">document</span>.getElementById(<span class=\"string\">'countId'</span>);</span><br><span class=\"line\">el.addEventListener(<span class=\"string\">'click'</span>,count,<span class=\"literal\">false</span>);</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">var</span> ham = <span class=\"built_in\">document</span>.getElementById(<span class=\"string\">'hamNumId'</span>);</span><br><span class=\"line\">ham.addEventListener(<span class=\"string\">'blur'</span>,checkContent,<span class=\"literal\">false</span>); <span class=\"comment\">// 監聽離開焦點時表單內容是否為空白</span></span><br><span class=\"line\"><span class=\"keyword\">var</span> coke = <span class=\"built_in\">document</span>.getElementById(<span class=\"string\">'cokeNumId'</span>); <span class=\"comment\">// 監聽離開焦點時表單內容是否為空白</span></span><br><span class=\"line\">coke.addEventListener(<span class=\"string\">'blur'</span>,checkContent,<span class=\"literal\">false</span>);</span><br></pre></td></tr></table></figure><p></p><h3>mousemove - 當滑鼠滑入指定內容時觸發</h3><p>有一些網頁小遊戲的規則是滑鼠不能碰觸到特定的區域，這時候就可以使用<code>addEventListener</code>搭配<code>mousemove</code>語法來寫，當滑鼠滑入指定區域時觸發元素函式。</p><p></p><figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"comment\">// 在HTML上新增6個方塊元素，並透過css語法使六個方塊以不同的位置和速率移動，當滑鼠移入這六個方塊時觸發式件</span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">var</span> el = <span class=\"built_in\">document</span>.querySelectorAll(<span class=\"string\">'.box'</span>); <span class=\"comment\">// 選取所有\".box\"元素，回傳值為陣列</span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">var</span> Len = el.length;</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">for</span>(<span class=\"keyword\">var</span> i = <span class=\"number\">0</span>;i<Len;i++){</span><br><span class=\"line\"> el[i].addEventListener(<span class=\"string\">'mousemove'</span>,<span class=\"function\"><span class=\"keyword\">function</span>(<span class=\"params\">e</span>)</span>{ <span class=\"comment\">// 監聽滑鼠是否移入元素區域</span></span><br><span class=\"line\"> alert(<span class=\"string\">'你輸了！'</span>);</span><br><span class=\"line\"> });</span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure><p></p><h2>網頁座標</h2><p>在網頁座標中screen、page、client 間的差異如下</p><ul><li>screen - 螢幕解析度的座標點</li><li>page - 網頁範圍(含拉bar)內的座標點</li><li>clint - 瀏覽器視窗的座標點</li></ul><p></p><figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">var</span> screenX = <span class=\"built_in\">document</span>.querySelector(<span class=\"string\">'.screenX'</span>); </span><br><span class=\"line\"><span class=\"keyword\">var</span> screenY = <span class=\"built_in\">document</span>.querySelector(<span class=\"string\">'.screenY'</span>); </span><br><span class=\"line\"><span class=\"keyword\">var</span> pageX = <span class=\"built_in\">document</span>.querySelector(<span class=\"string\">'.pageX'</span>); </span><br><span class=\"line\"><span class=\"keyword\">var</span> pageY = <span class=\"built_in\">document</span>.querySelector(<span class=\"string\">'.pageY'</span>); </span><br><span class=\"line\"><span class=\"keyword\">var</span> clientX = <span class=\"built_in\">document</span>.querySelector(<span class=\"string\">'.clientX'</span>); </span><br><span class=\"line\"><span class=\"keyword\">var</span> clientY = <span class=\"built_in\">document</span>.querySelector(<span class=\"string\">'.clientY'</span>); </span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"function\"><span class=\"keyword\">function</span> <span class=\"title\">getPosition</span>(<span class=\"params\">e</span>) </span>{ </span><br><span class=\"line\"> screenX.textContent = e.screenX; </span><br><span class=\"line\"> screenY.textContent = e.screenY; </span><br><span class=\"line\"> pageX.textContent = e.pageX; </span><br><span class=\"line\"> pageY.textContent = e.pageY; </span><br><span class=\"line\"> clientX.textContent = e.clientX; </span><br><span class=\"line\"> clientY.textContent = e.clientY; </span><br><span class=\"line\">}</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">var</span> el = <span class=\"built_in\">document</span>.body; </span><br><span class=\"line\">el.addEventListener(<span class=\"string\">'mousemove'</span>, getPosition, <span class=\"literal\">false</span>);</span><br></pre></td></tr></table></figure><p></p><p>在這裡可以用css <code>fixed</code>的特性搭配<code>clientX</code>和<code>clientY</code>來撰寫一個用圖片替代滑鼠游標的互動效果，以上面的範例作為基礎，增加的程式碼如下：</p><p></p><figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">var</span> mouseImg = <span class=\"built_in\">document</span>.querySelector(<span class=\"string\">'.mouseImg'</span>);</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"function\"><span class=\"keyword\">function</span> <span class=\"title\">getPosition</span>(<span class=\"params\">e</span>) </span>{ </span><br><span class=\"line\"> <span class=\"comment\">// screenX.textContent = e.screenX; </span></span><br><span class=\"line\"> <span class=\"comment\">// screenY.textContent = e.screenY; </span></span><br><span class=\"line\"> <span class=\"comment\">// pageX.textContent = e.pageX; </span></span><br><span class=\"line\"> <span class=\"comment\">// pageY.textContent = e.pageY; </span></span><br><span class=\"line\"> <span class=\"comment\">// clientX.textContent = e.clientX; </span></span><br><span class=\"line\"> <span class=\"comment\">// clientY.textContent = e.clientY; </span></span><br><span class=\"line\"> mouseImg.style.left =e.clientX+<span class=\"string\">'px'</span>;</span><br><span class=\"line\"> mouseImg.style.top =e.clientY+<span class=\"string\">'px'</span>; </span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure><p></p><h2>事件監聽優化- 從父元素來監聽子元素內容</h2><p>假設當一個<code>ul</code>內有多個<code>li</code>時，以<code>li</code>綁定監聽事件需要每個<code>li</code>都綁定，程式碼會較冗長且影響效能，這時候可以透過監聽大範圍的父元素，也就是<code>ul</code>，再以<code>e.target.nodeName</code>作為條件來篩選要監聽的元素。</p><p></p><figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">var</span> list = <span class=\"built_in\">document</span>.querySelector(<span class=\"string\">'.list'</span>);</span><br><span class=\"line\"></span><br><span class=\"line\">list.addEventListener(<span class=\"string\">'click'</span>,checkName,<span class=\"literal\">false</span>)</span><br><span class=\"line\"><span class=\"function\"><span class=\"keyword\">function</span> <span class=\"title\">checkName</span>(<span class=\"params\">e</span>)</span>{</span><br><span class=\"line\"> <span class=\"keyword\">if</span>(e.target.nodeName!==<span class=\"string\">'LI'</span>){<span class=\"keyword\">return</span>}; <span class=\"comment\">// return也可回傳空值並中斷function的執行</span></span><br><span class=\"line\"> <span class=\"built_in\">console</span>.log(e.target.textContent);</span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure><p></p><!-- rebuild by neat -->","categories":["JavaScript"],"tags":["JavaScript","event"]},{"title":"JavaScript 迴圈","url":"/2020/03/15/JavaScript-%E8%BF%B4%E5%9C%88/","content":"<!-- build time:Sun May 23 2021 15:10:01 GMT+0800 (GMT+08:00) --><h2>為什麼需要迴圈？</h2><p>我們前面已經學習到了陣列和物件，也學習了如何去提取陣列或物件中特定的值；但如過今天陣列中有100個元素都要用一行程式碼去提取值的話，程式碼會變得相當累贅，難以管理，因此我們可以使用迴圈的方式來使程式碼變得簡潔，例如透過下面的範例程式碼，我們就可以用迴圈來提取每個農場的農夫的名字。</p><p></p><figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">for</span>(<span class=\"keyword\">var</span> i = <span class=\"number\">0</span>, i<farms.length, i++){</span><br><span class=\"line\"> <span class=\"built_in\">console</span>.log(<span class=\"string\">\"第\"</span>+ (i + <span class=\"number\">1</span>) + <span class=\"string\">\"個農場的主人是\"</span> + farms[i].farmer);</span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure><p></p><p><a id=\"more\"></a></p><h2>for 迴圈</h2><p>for迴圈中必須要有變數的初始狀態、條件與更新內容，for迴圈會先判斷變數的初始狀態是否符合條件，接下來執行程式碼，執行完成後進行變數更新，在判斷一次更新後的變數是否符合條件，直到更新後的變數不符合條件為止。先來看一下簡單的範例：</p><p></p><figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"comment\">// 初始狀態;條件;更新內容</span></span><br><span class=\"line\"><span class=\"keyword\">for</span>(<span class=\"keyword\">var</span> i = <span class=\"number\">0</span>; i < <span class=\"number\">3</span>; i++){</span><br><span class=\"line\"> <span class=\"built_in\">console</span>.log(i);</span><br><span class=\"line\">}</span><br><span class=\"line\"><span class=\"comment\">// 0</span></span><br><span class=\"line\"><span class=\"comment\">// 1</span></span><br><span class=\"line\"><span class=\"comment\">// 2</span></span><br></pre></td></tr></table></figure><p></p><p>實作9*9乘法表</p><p></p><figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">for</span>(<span class=\"keyword\">var</span> i=<span class=\"number\">1</span>; i<<span class=\"number\">10</span>; i++){</span><br><span class=\"line\"> <span class=\"keyword\">for</span>(<span class=\"keyword\">var</span> a=<span class=\"number\">1</span>; a<<span class=\"number\">10</span>; a++){</span><br><span class=\"line\"> <span class=\"built_in\">console</span>.log(i + <span class=\"string\">\"*\"</span> + a + <span class=\"string\">\"=\"</span> + i * a );</span><br><span class=\"line\"> }</span><br><span class=\"line\"> </span><br><span class=\"line\">}</span><br><span class=\"line\"><span class=\"comment\">// 1*1=1</span></span><br><span class=\"line\"><span class=\"comment\">// 1*2=2</span></span><br><span class=\"line\"><span class=\"comment\">// 1*3=3</span></span><br><span class=\"line\"><span class=\"comment\">// ...</span></span><br></pre></td></tr></table></figure><p></p><p><code>轉寫迴圈時，要特別注意判斷式的設定，否則可能會出現無窮迴圈使瀏覽器當機。</code></p><h2>for-array</h2><p>當要從陣列中讀取物件屬性時，當不清楚陣列中有多少物件，或是陣列中物件數量很多的時候，使用for迴圈就會是一個很好的方法。例如下面的例子中，我們希望可以讀取出每個農場的主人名字時，就可以使用for迴圈的方式，另外，當不知道陣列中有多少物件時，可以使用<code>length</code>屬性來撰寫。</p><p></p><figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">var</span> farms = [</span><br><span class=\"line\"> {</span><br><span class=\"line\"> farmer: <span class=\"string\">'卡斯伯'</span>,</span><br><span class=\"line\"> field: <span class=\"number\">6</span></span><br><span class=\"line\"> },</span><br><span class=\"line\"> {</span><br><span class=\"line\"> farmer: <span class=\"string\">'查理'</span>,</span><br><span class=\"line\"> field: <span class=\"number\">10</span></span><br><span class=\"line\"> }</span><br><span class=\"line\">]</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">for</span>(<span class=\"keyword\">var</span> i = <span class=\"number\">0</span>; i < farms.length; i++){</span><br><span class=\"line\"> <span class=\"built_in\">console</span>.log(<span class=\"string\">'第'</span> + (i + <span class=\"number\">1</span>) + <span class=\"string\">'個農場主人是'</span> + farms[i].farmer)</span><br><span class=\"line\"> </span><br><span class=\"line\"><span class=\"comment\">// 第1個農場主人是卡斯伯</span></span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure><p></p><p>接下來，我們再來看for迴圈和陣列的搭配，還可以有哪些用法</p><h3>for if</h3><p>再使用for迴圈去抓取陣列中的資料時，也可以加入篩選條件來判斷，篩選出符合條件者。我們用以下的例子來看：</p><p></p><figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">var</span> farms = [</span><br><span class=\"line\"> {</span><br><span class=\"line\"> farmer: <span class=\"string\">'卡斯伯'</span>,</span><br><span class=\"line\"> field: <span class=\"number\">6</span>,</span><br><span class=\"line\"> chick: <span class=\"number\">200</span></span><br><span class=\"line\"> },</span><br><span class=\"line\"> {</span><br><span class=\"line\"> farmer: <span class=\"string\">'查理'</span>,</span><br><span class=\"line\"> field: <span class=\"number\">10</span>,</span><br><span class=\"line\"> chick: <span class=\"number\">50</span>,</span><br><span class=\"line\"> },</span><br><span class=\"line\"> {</span><br><span class=\"line\"> farmer: <span class=\"string\">'約翰'</span>,</span><br><span class=\"line\"> field: <span class=\"number\">6</span>,</span><br><span class=\"line\"> chick: <span class=\"number\">120</span></span><br><span class=\"line\"> }</span><br><span class=\"line\">]</span><br><span class=\"line\"><span class=\"comment\">// 撈出哪些的農場的小雞數量超過 100 隻以上</span></span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">for</span>(<span class=\"keyword\">var</span> i = <span class=\"number\">0</span>; i < farms.length; i++){</span><br><span class=\"line\"> <span class=\"keyword\">if</span>(farms[i].chick > <span class=\"number\">100</span>){</span><br><span class=\"line\"> <span class=\"built_in\">console</span>.log(farms[i].farmer+<span class=\"string\">'的小雞超過100隻以上'</span>);</span><br><span class=\"line\"> }</span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure><p></p><h3>i++的寫法</h3><p>在for迴圈中，在變數的更新時常會使用道地曾獲是遞減的方式更新變數，這裡整理出3種寫法如下：</p><p></p><figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">var</span> i = <span class=\"number\">1</span>;</span><br><span class=\"line\">i = i + <span class=\"number\">1</span>; <span class=\"comment\">// 2</span></span><br><span class=\"line\">i+ = <span class=\"number\">1</span>; <span class=\"comment\">// 3</span></span><br><span class=\"line\">i++; <span class=\"comment\">// 3 (這裡是因為'i++'的原理是先回傳i再+1，)</span></span><br><span class=\"line\">i; <span class=\"comment\">//4 (所以再呼叫一次i即可得到i+1的結果)</span></span><br></pre></td></tr></table></figure><p></p><h3>for - 加總</h3><p>當我們想要將陣列中所有物件的某一個屬性值出來做運算時，可以使用以下的方法：</p><p></p><figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">var</span> farms = [</span><br><span class=\"line\"> {</span><br><span class=\"line\"> farmer: <span class=\"string\">'卡斯伯'</span>,</span><br><span class=\"line\"> field: <span class=\"number\">6</span>,</span><br><span class=\"line\"> chick: <span class=\"number\">200</span>,</span><br><span class=\"line\"> banana: <span class=\"number\">5000</span></span><br><span class=\"line\"> },</span><br><span class=\"line\"> {</span><br><span class=\"line\"> farmer: <span class=\"string\">'查理'</span>,</span><br><span class=\"line\"> field: <span class=\"number\">10</span>,</span><br><span class=\"line\"> chick: <span class=\"number\">50</span>,</span><br><span class=\"line\"> banana: <span class=\"number\">1000</span></span><br><span class=\"line\"> },</span><br><span class=\"line\"> {</span><br><span class=\"line\"> farmer: <span class=\"string\">'約翰'</span>,</span><br><span class=\"line\"> field: <span class=\"number\">6</span>,</span><br><span class=\"line\"> chick: <span class=\"number\">120</span>,</span><br><span class=\"line\"> banana: <span class=\"number\">3215</span></span><br><span class=\"line\"> }</span><br><span class=\"line\">]</span><br><span class=\"line\"><span class=\"comment\">// 計算今年的香蕉採收總數</span></span><br><span class=\"line\"><span class=\"keyword\">var</span> bananaTotal= <span class=\"number\">0</span>; <span class=\"comment\">// 先宣告一個初始變數，賦於初始值'0'</span></span><br><span class=\"line\"><span class=\"keyword\">for</span>(<span class=\"keyword\">var</span> i = <span class=\"number\">0</span>; i < farms.length; i++){</span><br><span class=\"line\"> bananaTotal+= farms[i].banana; <span class=\"comment\">// 等同於i+=1的作法</span></span><br><span class=\"line\">}</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"built_in\">console</span>.log(<span class=\"string\">'今年村子的香蕉採收量：'</span>+ bananaTotal);</span><br></pre></td></tr></table></figure><p></p><h2>break</h2><p>當使用for迴圈只希望取得第1筆滿足條店的資料時，可以使用<code>break</code>的功能，使用<code>break</code>在for迴圈找到第1筆滿足條件的資料時，就會跳出for迴圈，繼續執行後面的程式碼</p><p></p><figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">var</span> farms = [</span><br><span class=\"line\"> {</span><br><span class=\"line\"> farmer: <span class=\"string\">'卡斯伯'</span>,</span><br><span class=\"line\"> field: <span class=\"number\">6</span>,</span><br><span class=\"line\"> chick: <span class=\"number\">200</span>,</span><br><span class=\"line\"> banana: <span class=\"number\">5000</span></span><br><span class=\"line\"> },</span><br><span class=\"line\"> {</span><br><span class=\"line\"> farmer: <span class=\"string\">'查理'</span>,</span><br><span class=\"line\"> field: <span class=\"number\">10</span>,</span><br><span class=\"line\"> chick: <span class=\"number\">51</span>,</span><br><span class=\"line\"> banana: <span class=\"number\">1000</span></span><br><span class=\"line\"> },</span><br><span class=\"line\"> {</span><br><span class=\"line\"> farmer: <span class=\"string\">'約翰'</span>,</span><br><span class=\"line\"> field: <span class=\"number\">6</span>,</span><br><span class=\"line\"> chick: <span class=\"number\">120</span>,</span><br><span class=\"line\"> banana: <span class=\"number\">3215</span></span><br><span class=\"line\"> }</span><br><span class=\"line\">]</span><br><span class=\"line\"><span class=\"comment\">// 我要找一個農場，買50隻小雞</span></span><br><span class=\"line\"><span class=\"keyword\">for</span>(<span class=\"keyword\">var</span> i = <span class=\"number\">0</span>; i < farms.length; i++){</span><br><span class=\"line\"> <span class=\"keyword\">if</span>(farms[i].chick > <span class=\"number\">50</span>){</span><br><span class=\"line\"> <span class=\"built_in\">console</span>.log(farms[i].farmer + <span class=\"string\">'的小雞剛好夠'</span>);</span><br><span class=\"line\"> farms[i].chick -= <span class=\"number\">50</span>;</span><br><span class=\"line\"> <span class=\"built_in\">console</span>.log(farms[i].farmer + <span class=\"string\">'的小雞剩下'</span> + farms[i].chick)</span><br><span class=\"line\"> <span class=\"keyword\">break</span>;</span><br><span class=\"line\"> }</span><br><span class=\"line\"> </span><br><span class=\"line\">}</span><br><span class=\"line\"><span class=\"built_in\">console</span>.log(farms[<span class=\"number\">0</span>].chick);</span><br></pre></td></tr></table></figure><p></p><h2>JSON資料交換格式</h2><p>由於各種語言都有自己資料庫的格式，使的在彼此間資料傳遞上的難度會增加，因此發展出了跨語言的資料交換格式，以目前來說比較熱門的資料交換格式有JSON、XML和CSV等。以目前來說，JSON比較多用於JavaScript、Java和Node.js。</p><p><a href=\"https://zh.wikipedia.org/zh-tw/JSON\" target=\"_blank\" rel=\"noopener\">更多關於Json的資料</a></p><p>而JSON格式看起來就是陣列和物件的排列，以目前來說很多政府開放的Open Data都會有前面提到的JSON、XML和CSV等格式，如果直接開啟JSON檔案可能會有未斷行導致難以閱讀的情況，我們也可以安裝Chrome插件<a href=\"https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc?hl=zh-TW\" target=\"_blank\" rel=\"noopener\">JSONView</a>，使預覽JSON資料時能預先格式化成比較易讀的格式。</p><p>在選取開放資料後，以JSONView進行預覽，確認JSON格式與內容後，可點及滑鼠右鍵檢視原始碼，複製所有內容後，回到JavaScript檔案中宣告一個<code>data</code>變數後將複製的Json檔案存入<code>data</code>變數中，就可以用上面提到的各種語法來檢索資料。</p><p>在政府的Open Dada資料中抓取了"台南市主要觀光遊憩據點遊客人數"資料表，JSON資料由陣列中包含許多的物件所組成，我們抓取第一個物件發現格式如下圖，可以看到裡面的資料適用陣列包含了許多的物件，每個物件的屬性有統計月份、景點、遊客數、前一年的遊客數、成長率及統計方法。</p><p></p><figure class=\"highlight\"><table><tr><td class=\"code\"><pre><span class=\"line\">[{</span><br><span class=\"line\">Id: 2309,</span><br><span class=\"line\">StatsMonth: \"101年1月\",</span><br><span class=\"line\">ScenicSpot: \"雲嘉南濱海國家風景區_七股鹽山\",</span><br><span class=\"line\">Visitors: 110876,</span><br><span class=\"line\">LastYearVisitors: 24529,</span><br><span class=\"line\">GrowthRate: 352.02,</span><br><span class=\"line\">Note: \"門票數\"</span><br><span class=\"line\">},</span><br><span class=\"line\">// .....</span><br><span class=\"line\">]</span><br></pre></td></tr></table></figure><p></p><p>透過上面的資料，假設我們今天想要抓取所有需要購買門票的景點，售出門票數量的年度比較，我們可以用下列的方式來撰寫</p><p></p><figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">var</span> data = [這裡存入<span class=\"built_in\">JSON</span>資料]</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"comment\">// 查詢需要購買門票的景點，售出門票數量的年度比較</span></span><br><span class=\"line\"><span class=\"keyword\">var</span> total = data.length;</span><br><span class=\"line\"><span class=\"keyword\">for</span>(i = <span class=\"number\">0</span>; i < total; i++){</span><br><span class=\"line\"> <span class=\"keyword\">if</span>(data[i].Note==<span class=\"string\">\"門票數\"</span>){ <span class=\"comment\">// 篩選統計門票數的景點</span></span><br><span class=\"line\"> <span class=\"keyword\">var</span> VisitorsYOY = data[i].Visitors - data[i].LastYearVisitors; <span class=\"comment\">// 計算年度門票數的比較</span></span><br><span class=\"line\"> <span class=\"built_in\">console</span>.log(<span class=\"string\">'景點：'</span> + data[i].ScenicSpot + data[i].StatsMonth + <span class=\"string\">'售出門票數的年度比較：'</span>+ VisitorsYOY);</span><br><span class=\"line\"> }</span><br><span class=\"line\"> <span class=\"comment\">// 景點：雲嘉南濱海國家風景區_七股鹽山101年1月售出門票數的年度比較：86347</span></span><br><span class=\"line\"></span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure><p></p><p>在來看一下第二個例子，如果JSON資料格式我們希望獲取的資訊在物件內的陣列中呢？以下是"各鄉鎮市區人口密度"的JSON資料格式，我們所需要的陣列資料包含在物件中的<code>responseData</code>陣列中</p><p></p><figure class=\"highlight\"><table><tr><td class=\"code\"><pre><span class=\"line\">{</span><br><span class=\"line\">responseCode: \"OD-0101-S\",</span><br><span class=\"line\">responseMessage: \"處理完成\",</span><br><span class=\"line\">totalPage: \"1\",</span><br><span class=\"line\">totalDataSize: \"370\",</span><br><span class=\"line\">page: \"1\",</span><br><span class=\"line\">pageDataSize: \"370\",</span><br><span class=\"line\">responseData: [</span><br><span class=\"line\">{</span><br><span class=\"line\">statistic_yyy: \"106\",</span><br><span class=\"line\">site_id: \"新北市板橋區\",</span><br><span class=\"line\">people_total: \"551480\",</span><br><span class=\"line\">area: \"23.1373\",</span><br><span class=\"line\">population_density: \"23835\"</span><br><span class=\"line\">},</span><br><span class=\"line\">// .....</span><br><span class=\"line\">]</span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure><p></p><p>這次，我們想要提取出人口密度低於1000人的鄉鎮市區，我們可以這麼做</p><p></p><figure class=\"highlight js\"><table><tr><td class=\"code\"><pre><span class=\"line\"><span class=\"keyword\">var</span> data = {這裡存入<span class=\"built_in\">JSON</span>資料}</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"comment\">// 查詢人口密度少於1000人的地區</span></span><br><span class=\"line\"><span class=\"keyword\">var</span> total = data.responseData.length;</span><br><span class=\"line\"></span><br><span class=\"line\"><span class=\"keyword\">for</span> (<span class=\"keyword\">var</span> i = <span class=\"number\">0</span>; i < total; i++) {</span><br><span class=\"line\"> <span class=\"keyword\">var</span> population_density = data.responseData[i].population_density</span><br><span class=\"line\"> </span><br><span class=\"line\"> <span class=\"keyword\">if</span>(population_density <<span class=\"number\">1000</span>){</span><br><span class=\"line\"> <span class=\"keyword\">var</span> Township = data.responseData[i].site_id;</span><br><span class=\"line\"> <span class=\"built_in\">console</span>.log(Township+<span class=\"string\">'的人口密度小於1000'</span>);</span><br><span class=\"line\"> }</span><br><span class=\"line\"> <span class=\"comment\">//新北市三峽區的人口密度小於1000</span></span><br><span class=\"line\">}</span><br></pre></td></tr></table></figure><p></p><!-- rebuild by neat -->","categories":["JavaScript"],"tags":["JavaScript","loop"]},{"title":"SEO策略入門","url":"/2020/04/17/SEO%E7%AD%96%E7%95%A5%E5%85%A5%E9%96%80/","content":"<!-- build time:Sun May 23 2021 15:10:01 GMT+0800 (GMT+08:00) --><h2>SEO規劃重點</h2><p>SEO在規劃時有以下的重點，在網站建置時要把前後台關於SEO的技術規劃納入評估範圍，在規劃內容時要有TDH的相關規劃，後續要定期優化關鍵字與TDH內容，並定期提交sitemap且定期追蹤相關關鍵字的成效。</p><p><a id=\"more\"></a></p><ol><li>網站要有可檢索性(不要把文字做成圖片、JavaScript被關被仍然要可以顯示重要內容)</li><li>TDH的規劃 → <code>title</code>、<code>description</code>、<code>h1</code>及內容<ul><li>前台要有標記</li><li>後台要有規劃(後台要有可以編輯TDH的功能)</li><li>上稿人要有概念</li></ul></li><li>行動裝置友善</li><li>RWD響應式網站設計</li><li>SSL加密 → https</li><li>要提交sitemap → 最好可以由後台定期產出及上傳，或定期手動產生後上傳</li><li>網頁下載速度要優化，圖片要壓縮</li></ol><h2>關鍵字搜尋技巧</h2><p>以下列出關鍵字搜尋工具與評估的小技巧</p><p><a href=\"https://developers.google.com/search/docs/guides/get-started?hl=zh-tw\" target=\"_blank\" rel=\"noopener\">Google 搜尋的入門應用知識：開發人員指南</a></p><h3>Google Analytics</h3><p>Google Analytics簡稱GA，可以用來觀察與評估網站的成效</p><h3>Google 搜尋技巧</h3><h4>intitle:"keyword"</h4><p>可以到Google搜尋頁面採用<code>intitle:</code>加上關鍵字搜尋，察看結果數量來評估關鍵字競爭程度與SEO操作難度，一般來說關鍵字搜尋結果超過12萬筆就是比較難操作搜尋排名的關鍵字，建議可以從難度較低的關鍵字開始入門。</p><h4>"keyword"site:"url"</h4><p>用了前面的方法找到關鍵字後，檢查自身網站的<code>title</code>或<code>description</code>是否包含這些關鍵字，如果沒有就在調整將關鍵字納入。</p><h2>網頁標記</h2><p>對於SEO來說，網站中重要的是<code>meta</code>標籤中的<code>title</code>、<code>description</code>中以及網頁內容中的h1~h3，相關重點如下</p><h3>標題標記(title)</h3><pre><code>- 每個頁面都有獨立的標題\n- 控制在30-65字元之間(含空白)\n- 公司名稱放最後面或不要放\n- 避免使用停止詞(stop word) 以免浪費有限空間\n- 須帶出關鍵詞(但不要超過兩次)\n- 關鍵詞越早出現愈好\n- 避免塞一堆關鍵詞\n- (一個)關鍵詞+ (這個關鍵詞)的變體是可以考慮的方式\n- 標題標記就是搜尋結果的標題，務求清楚、明瞭、獨特、有吸引力\n- 使用可引發情緒的標題\n- 使用有力的字眼\n- 觀察學習搜尋的結果、掌握趨勢\n- 使用獨特的字眼\n- 善用"如何"、"列表"類的標題\n</code></pre><h3>中繼說明(description)</h3><pre><code>- 每一個頁面都要有一個獨立的中繼說明\n- 控制在70~155個字元之間(含空白)\n- 代出關鍵詞(出現2次)\n- 自然使用關鍵詞與變體，盡可能提早出現\n- 盡量讓中繼說明有描述性\n- 以網友為導向撰寫網頁敘述(google搜尋結果顯示中通常會使用)\n- 讓中繼說明有說服力\n- 引起好奇心\n- 使用獨特的字眼\n</code></pre><h3>網頁標題(H1~H3)</h3><ul><li>每個頁面都要有一個獨特的網頁標題(使用H1標籤)</li><li>控制在70字元以內(含空白)</li><li>代出關鍵詞(與標題標記相呼應，甚至一樣也無妨)</li><li>不要重複H1標籤(都是重點等於沒有重點)</li><li>使用H2、此H3...設定次標題(H2也可運用)</li></ul><p><em>關於title和Description，每一頁都要注意：不要太長或太短或重複</em></p><h3>SEO工具</h3><h3>Google Ads 關鍵字規劃工具</h3><p>可採用以關鍵字找關鍵字，或是以網站找關鍵字。將關鍵字加入企畫書後，可以看到關鍵字搜尋量的預估。</p><h3>screamingfrog</h3><p>這裡可以用screamingfrog 來檢查網站中前面提到的<code>meta</code>標籤中的<code>title</code>、<code>description</code>中以及網頁內容中的h1~h3等等，使否有遺漏、是否有重複以及長度是否太長或太短等等。</p><p><a href=\"https://www.screamingfrog.co.uk/\" target=\"_blank\" rel=\"noopener\">screamingfrog</a></p><p>另外，screamingfrog也可以用來觀察競爭對手的網頁，觀察競爭對手目前經營的關鍵字將相關的內容等等。</p><h3>ahref(須付費)</h3><p>ahref可以用來分析自己和競爭對手關鍵字在seo排名上的成效，免費版雖然可以看的範圍有限，但仍可以做評估。</p><p><a href=\"https://ahrefs.com/\" target=\"_blank\" rel=\"noopener\">ahref</a></p><p>可盡量觀察競爭對手關鍵字中非品牌字的關鍵字，是SEO經營可以切入的點。</p><h2>網站架構設計對SEO的影響</h2><h3>避免將文案做成圖片</h3><p>搜尋引擎無法讀取圖片，因此要避免將重要文案做圖片，如一定要用文案呈現，可考慮加上<code>alt</code>圖片取代文字的內容，強化SEO。</p><h3>JavaScript關閉後是否會有文案無法顯示的問題</h3><p>如果網站是使用JavaScript渲染，嘗試關閉JavaScript程式檢查是否仍然可以顯示重要的內容，如果無法顯示文案內容，就有可能會有搜尋引擎無法爬取的風險。</p><p>可使用<code>Web Developer</code>的Chrome插件來檢查頁面顯示。</p><p><a href=\"https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm/related?hl=zh-TW\" target=\"_blank\" rel=\"noopener\">Web Developer</a></p><h3>網站對行動裝置是否友善</h3><p>可以使用<code>google 行動裝置相容性測試</code>來測試行動裝置相容性，這個工具是針對每一頁測試行動裝置的相容性。因此網頁的重要版型以及需要做SEO的頁面都可以分別做測試。</p><p><a href=\"https://search.google.com/test/mobile-friendly\" target=\"_blank\" rel=\"noopener\">google 行動裝置相容性測試</a></p><p>這裡要注意的是，即使是RWD響應式網站設計並不等於行動裝置友善，因此還是要做測試相容程度。</p><h3>google 網站管理員工具</h3><p>SEO最重要的工具，沒有之一。使用gmail登入後，輸入網址時要確定是否有ssl加密憑證，也就是<code>http</code>或是<code>https</code>開頭，網址是否有<code>www</code>，否則可能會找不到。</p><p>接下來要向google證明是網站的所有者，依說明進行驗證，上傳驗證檔案到網站根目錄，或是用其他方式進行驗證。這步驟是要證明我們能將Google指定的檔案上傳到指定的網站上。</p><p><a href=\"https://search.google.com/search-console/about\" target=\"_blank\" rel=\"noopener\">Google Search Console</a></p><p>在<code>Google Search Console</code>中也可以查看行動裝置可用性，這裡和google <code>行動裝置相容性測試工具</code>的差別是前者會針對網站中的所有頁面進行偵測，但要注意這裡要留意偵測的時間。這裡可以在調整網頁內容後搭配<code>行動裝置相容性測試工具</code>使用。</p><p><code>Google Search Console</code>也可以提交sitemap，以及檢查網站SEO經營的成效。透過<code>成效</code>報表及可查看期間內使用者透過那些關鍵字來到網站，報表可以看到<code>點擊</code>、<code>曝光</code>、<code>排名</code>與<code>點閱率</code>。</p><h3>SSL加密</h3><p>網站是否導入SSL加密憑證會影響搜尋排名，且google現在會對未加密網站在網址列顯示<code>不安全</code>。</p><h2>SEO健診</h2><ol><li>檢查是否有導入HTTPS</li><li>是否有遺漏未導入HTTPS的頁面(使用screamingfrog)<ul><li>如果protocol中http頁面狀態是301或是200 ok就不行</li><li>若是另外載入的外掛就沒關係</li></ul></li><li>http頁面是否能跳轉https</li><li>http頁面如何跳轉https<ul><li>搜尋<code>https status checker</code>，使用線上工具查詢如何跳轉<ul><li>301轉址 → 永久轉址</li><li>302轉址 → 暫時轉址</li></ul></li><li>301轉址較容易被搜尋引擎索引</li></ul></li><li>使否有https混合內容(網址列還是會顯示不安全)<ul><li>匯入的外部圖片連結網址是http</li></ul></li></ol><h2>網站提交</h2><p>把要提供搜尋引擎檢索的網頁列成清單，產生sitemap.xml檔案 → 上傳sitemap.xml到網站根目錄 → 到Google Search Console後台提交根目錄。</p><p>產生sitemap的方式有許多的線上工具，也可以使用前面提到的screamingfrog工具產生sitemap，再將sitemap.xml檔案上傳到網站根目錄，回到Google Search Console後台點選<code>sitemap</code>頁面，輸入<code>sitemap</code>路徑後按下提交，就可以等待搜尋引擎完成檢索。</p><h2>SEOquake</h2><p>安裝chrome插件<code>SEOquake</code>後，瀏覽器開啟網頁，點擊瀏覽器上方<code>SEOquake</code>圖示 → <code>DIAGNOSIS</code> → 開啟頁面後往下查詢到sitemap網址。</p><p><a href=\"https://chrome.google.com/webstore/detail/seoquake/akdgnmcogleenhbclghghlkkdndkjdjc?utm_source=chrome-ntp-icon\" target=\"_blank\" rel=\"noopener\">SEOquake</a></p><h2>檢查是否有sitemap</h2><ol><li>SEOquake</li><li>Google Search Console</li><li>網站的robot.txt檔案</li></ol><h2>反向連結檢查工具</h2><p>分析反向連結的目的：</p><ol><li>自家連結分析，處理 Spam、並觀察有哪些網站連結過來？</li><li>對手連結分析，得到Insight，並創造更多的連結機會</li></ol><p><a href=\"https://www.yesharris.com/open-site-explorer/\" target=\"_blank\" rel=\"noopener\">Harris先生對Open Site Explorer的介紹</a></p><p><a href=\"https://moz.com/link-explorer\" target=\"_blank\" rel=\"noopener\">open site explorer</a></p><p>Page Authority(PA) → 網頁權威度(百分制)，TW一般有50就算很高 Domain Authority(DA) → 網頁權威度(百分制)，TW一般有50就算很高 Linking Domains(LD) → 連結你網站的網站數 Inbound Links(IL) → 外連結的數量</p><p><a href=\"https://chrome.google.com/webstore/detail/mozbar/eakacpaijcpapndcfffdgphdiccmpknp\" target=\"_blank\" rel=\"noopener\">MozBar</a></p><p><a href=\"https://www.lianchiyu.com/\" target=\"_blank\" rel=\"noopener\">連啓佑老師 個人網站</a></p><!-- rebuild by neat -->","categories":["Lecture","SEO"],"tags":["SEO"]}]