-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathatom.xml
More file actions
238 lines (146 loc) · 91.4 KB
/
atom.xml
File metadata and controls
238 lines (146 loc) · 91.4 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
<title>Code。YuKun</title>
<subtitle>亂寫亂想亂筆記</subtitle>
<link href="/atom.xml" rel="self"/>
<link href="https://yanennnnn.github.io/"/>
<updated>2020-09-10T08:54:04.075Z</updated>
<id>https://yanennnnn.github.io/</id>
<author>
<name>yanennnnn</name>
</author>
<generator uri="http://hexo.io/">Hexo</generator>
<entry>
<title>CSS - 初步了解 CSS Gird - 使用 repeat() 製作 RWD </title>
<link href="https://yanennnnn.github.io/css/20200909/df48be6c/"/>
<id>https://yanennnnn.github.io/css/20200909/df48be6c/</id>
<published>2020-09-09T12:39:04.000Z</published>
<updated>2020-09-10T08:54:04.075Z</updated>
<content type="html"><</small><h2 id="minmax"><a href="#minmax" class="headerlink" title="minmax()"></a>minmax()</h2><p>除了 <code>repeat()</code> 能重複欄位不用自行設定之外，製作成 RWD 的另外大功成就是 <code>minmax()</code>，用來設定最大值與最小值</p><p>使用 RWD 就是希望能跟著螢幕大小縮放並且滿版的時不要有空白處，所以我們就能設定成 <code>minmax(100px,1fr)</code>，意思就是最小寬度是 100px，而最大寬度則是自動1等分</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">grid-template-columns</span>: <span class="selector-tag">repeat</span>(<span class="selector-tag">auto-fit</span>, <span class="selector-tag">minmax</span>(150<span class="selector-tag">px</span>, 1<span class="selector-tag">fr</span>));</span><br></pre></td></tr></table></figure><p>範例:</p><iframe height="300" style="width: 100%;" scrolling="no" title="CSS Grid minmax()" src="https://codepen.io/yennnnn/embed/gOrvyEJ?height=300&theme-id=37551&default-tab=html,result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> See the Pen <a href="https://codepen.io/yennnnn/pen/gOrvyEJ" target="_blank" rel="noopener">CSS Grid minmax()</a> by yanennn (<a href="https://codepen.io/yennnnn" target="_blank" rel="noopener">@yennnnn</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.</iframe><h2 id="grid-auto-flow"><a href="#grid-auto-flow" class="headerlink" title="grid-auto-flow"></a>grid-auto-flow</h2><p>使用過 flex 的知道 <code>flex-direction</code> 這個屬性吧，用來控制排序要水平的還是垂直，<code>grid-auto-flow</code> 也是一樣</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">grid-auto-flow</span>: <span class="selector-tag">row</span>;</span><br><span class="line"><span class="selector-tag">grid-auto-flow</span>: <span class="selector-tag">column</span>;</span><br><span class="line"><span class="selector-tag">grid-auto-flow</span>: <span class="selector-tag">dense</span>;</span><br><span class="line"><span class="selector-tag">grid-auto-flow</span>: <span class="selector-tag">row</span> <span class="selector-tag">dense</span>;</span><br><span class="line"><span class="selector-tag">grid-auto-flow</span>: <span class="selector-tag">column</span> <span class="selector-tag">dense</span>;</span><br></pre></td></tr></table></figure><p>grid 最初默認值是垂直排列 <code>row</code>，當你設定的 <code>template</code> 排完後，接著就會往下一行排列，所以說如果是水平排列的話(先從上往下排列好後，往旁邊繼續排列)就要改成 <code>grid-auto-flow: column;</code></p><p>還記得我們 grid 是可以設定欄寬列高嗎，假如你的欄寬列高超過 <code>template</code> 的設定，grid 就會自動幫你往下一行，這樣就會產生空白欄位，這邊我們就可以使用 <code>dense</code> : 利用其他合的欄寬補足空白，以下範例就能發現第五格原本該往下排，但使用了 <code>dense</code> 所以自動補足上面的空白了</p><iframe height="300" style="width: 100%;" scrolling="no" title="grid-auto-flow" src="https://codepen.io/yennnnn/embed/ZEWxJwp?height=300&theme-id=37551&default-tab=css,result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> See the Pen <a href="https://codepen.io/yennnnn/pen/ZEWxJwp" target="_blank" rel="noopener">grid-auto-flow</a> by yanennn (<a href="https://codepen.io/yennnnn" target="_blank" rel="noopener">@yennnnn</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.</iframe><p>用上面的方法，就能做出漂亮的 RWD 了//，最後來個 RWD 排版 ~</p><iframe height="300" style="width: 100%;" scrolling="no" title="CSS Grid " src="https://codepen.io/yennnnn/embed/eYZMYKw?height=300&theme-id=37551&default-tab=css,result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> See the Pen <a href="https://codepen.io/yennnnn/pen/eYZMYKw" target="_blank" rel="noopener">CSS Grid </a> by yanennn (<a href="https://codepen.io/yennnnn" target="_blank" rel="noopener">@yennnnn</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.</iframe><h2 id="結論"><a href="#結論" class="headerlink" title="結論"></a>結論</h2><p>只要能掌握 gird 的規則，其實就不難，我也還在摸索XD<br>希望大家都能做出自己喜歡的 RWD 排版//</p><h2 id="參考文獻"><a href="#參考文獻" class="headerlink" title="參考文獻"></a>參考文獻</h2><p><a href="https://www.youtube.com/watch?v=fYcz3FUqv7M" target="_blank" rel="noopener">CSS GRID / CSS格線好好玩【完整版】 | CSS教學 | CSS格線</a><br><a href="https://www.zhangxinxu.com/wordpress/2019/12/css-repeat/" target="_blank" rel="noopener">CSS repeat()函數詳細介紹</a><br><a href="https://css-tricks.com/snippets/css/complete-guide-grid/" target="_blank" rel="noopener">A Complete Guide to Grid</a><br><a href="https://css-tricks.com/auto-sizing-columns-css-grid-auto-fill-vs-auto-fit/" target="_blank" rel="noopener">Auto-Sizing Columns in CSS Grid: auto-fill vs auto-fit</a></p>]]></content>
<summary type="html">
<p><img src="https://i.imgur.com/AEcGgSo.png" alt></p>
<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>前面我們了解怎麼使用 <code>grid-template-columns</code>, <code>grid-template-rows</code> 設定欄列，但是如果你有很多重複的欄列呢?</p>
</summary>
<category term="CSS" scheme="https://yanennnnn.github.io/categories/css/"/>
<category term="CSS3" scheme="https://yanennnnn.github.io/tags/CSS3/"/>
</entry>
<entry>
<title>CSS - 初步了解 CSS Gird - (變化版面)</title>
<link href="https://yanennnnn.github.io/css/20200907/64dd8c62/"/>
<id>https://yanennnnn.github.io/css/20200907/64dd8c62/</id>
<published>2020-09-07T06:20:25.000Z</published>
<updated>2020-09-07T12:02:30.459Z</updated>
<content type="html"><![CDATA[<p><img src="https://i.imgur.com/AEcGgSo.png" alt></p><h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>在上一篇我們知道如何使用 CSS Grid 的固定版面樣式，這一篇就來筆記一下如何變化</p><a id="more"></a><h3 id="子層指定格線"><a href="#子層指定格線" class="headerlink" title="子層指定格線"></a>子層指定格線</h3><p>上一篇我們在父層使用 <code>grid-template-areas</code> 設定版面位置，但如果使用這個方式，你不能交錯也不能重疊，所以我們可以使用子層來指定欄位位置</p><h3 id="grid-column-start-grid-column-end-grid-row-start-grid-row-end"><a href="#grid-column-start-grid-column-end-grid-row-start-grid-row-end" class="headerlink" title="grid-column-start, grid-column-end, grid-row-start, grid-row-end"></a>grid-column-start, grid-column-end, grid-row-start, grid-row-end</h3><ul><li>grid-column-start : 欄線開始</li><li>grid-column-end : 欄線結束</li><li>grid-row-start : 列線開始</li><li>grid-row-end : 列線結束</li></ul><p>我們設定 <code>grid-template-columns</code>, <code>grid-template-rows</code></p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.container</span> {</span><br><span class="line"> <span class="attribute">grid-template-columns</span>: <span class="number">40px</span> <span class="number">50px</span> auto <span class="number">50px</span> <span class="number">40px</span>;</span><br><span class="line"> <span class="attribute">grid-template-rows</span>: <span class="number">25%</span> <span class="number">100px</span> auto;</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p>產生的圖如下圖</p><p><img src="https://css-tricks.com/wp-content/uploads/2018/11/grid-column-row-start-end-01.svg" alt="圖源來自CSS-Tricks"><br><small>圖片來自<a href="https://css-tricks.com/snippets/css/complete-guide-grid/" target="_blank" rel="noopener">CSS-Tricks</a></small></p><p>從圖上可以了解，線是從最外圍(最起點)開始算到另一邊的最外圍(最終點)，所以以圖片來看 <code>column</code> 一共有6條線，而 <code>row</code> 有4條線</p><p>得到線條的方式有</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.item</span> {</span><br><span class="line"> <span class="attribute">grid-column-start</span>: <number> | <name> | span <number> | span <name> | auto;</span><br><span class="line"> <span class="attribute">grid-column-end</span>: <number> | <name> | span <number> | span <name> | auto;</span><br><span class="line"> <span class="attribute">grid-row-start</span>: <number> | <name> | span <number> | span <name> | auto;</span><br><span class="line"> <span class="attribute">grid-row-end</span>: <number> | <name> | span <number> | span <name> | auto;</span><br><span class="line">}</span><br></pre></td></tr></table></figure><ul><li>line : 用數字表示 物件 所在的線</li><li>span <code>number</code> : 物件所佔用的欄位數；使用此方式，會計算到佔用欄位數的下一行</li><li>span <code>name</code> : 物件所在的 grid 名稱；使用此方式，會計算到物件 gird 名稱的下一行</li><li>auto 自動 </li></ul><p>以上面圖為範例就能這樣使用</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.item</span> {</span><br><span class="line"> <span class="attribute">grid-column-start</span>: <span class="number">2</span>; <span class="comment">/*從第2條線開始計算*/</span></span><br><span class="line"> <span class="attribute">grid-column-end</span>: <span class="number">5</span>; <span class="comment">/*結束到第5條線*/</span></span><br><span class="line"> <span class="attribute">grid-row-start</span>: <span class="number">1</span>; <span class="comment">/*從第1條線開始計算*/</span></span><br><span class="line"> <span class="attribute">grid-row-end</span>: span <span class="number">2</span>; <span class="comment">/*橫跨2個欄位後結束*/</span></span><br><span class="line">}</span><br></pre></td></tr></table></figure><h3 id="只橫跨一個欄位"><a href="#只橫跨一個欄位" class="headerlink" title="只橫跨一個欄位"></a>只橫跨一個欄位</h3><p>另外，如果你只想要橫跨一個欄位的話，可以使用 start 或者 end 其中一個就好</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.item-a</span>{</span><br><span class="line"> <span class="attribute">grid-column-start</span>: <span class="number">2</span>; <span class="comment">/*從第2條欄線開始從左到右開始計算一個欄位數*/</span></span><br><span class="line"> <span class="attribute">grid-row-end</span>: <span class="number">3</span>; <span class="comment">/*第3條列線結束從下到上計算一個欄位數*/</span></span><br><span class="line"> <span class="attribute">background</span>: <span class="number">#faa</span>;</span><br><span class="line">}</span><br></pre></td></tr></table></figure><h3 id="負數"><a href="#負數" class="headerlink" title="負數"></a>負數</h3><p>除了正數以外，也可以只用負數計算</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.item-b</span>{</span><br><span class="line"> <span class="attribute">grid-column-end</span>: -<span class="number">3</span>; <span class="comment">/*第-3條欄結束線從右到左計算一個欄位數*/</span></span><br><span class="line"> <span class="attribute">grid-row-start</span>: -<span class="number">4</span>; <span class="comment">/*第-4條線開始計從上到下算一個欄位數*/</span></span><br><span class="line"> <span class="attribute">background</span>:<span class="number">#aaf</span></span><br><span class="line">}</span><br></pre></td></tr></table></figure><h2 id="grid-column-grid-row"><a href="#grid-column-grid-row" class="headerlink" title="grid-column, grid-row"></a>grid-column, grid-row</h2><ul><li>grid-column : <code>grid-column-start</code> + <code>grid-column-end</code> 的結合，使用 “<b>/<b>“ 連結在一起</b></b></li><li>grid-row :<code>grid-row-start</code> + <code>grid-row-end 的結合</code>，使用 “<b>/<b>“ 連結在一起</b></b></li></ul><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.item-c</span> {</span><br><span class="line"> <span class="attribute">grid-column</span>:<span class="number">3</span>/span <span class="number">2</span>; <span class="comment">/*第3條欄開始橫跨2個欄位數*/</span></span><br><span class="line"> <span class="attribute">grid-row</span>:-<span class="number">2</span>/-<span class="number">1</span>; <span class="comment">/*第-2條列開始到-1條線結束*/</span></span><br><span class="line">}</span><br></pre></td></tr></table></figure><p><img src="https://css-tricks.com/wp-content/uploads/2018/11/grid-column-row.svg" alt="圖源來自CSS-Tricks"><br><small>圖片來自<a href="https://css-tricks.com/snippets/css/complete-guide-grid/" target="_blank" rel="noopener">CSS-Tricks</a></small></p><h3 id="grid-area"><a href="#grid-area" class="headerlink" title="grid-area"></a>grid-area</h3><p><code>grid-area</code>不只能自訂區域名稱給予<code>grid-template-areas</code>定義位置，也能指定 grid 線數設定範圍</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"> <span class="selector-class">.item-d</span> {</span><br><span class="line"> <span class="comment">/* 列線開始線，欄線開始線，列線結束線，欄線結束線 */</span></span><br><span class="line"> <span class="attribute">grid-area</span>: <row-start> / <column-start> / <row-end> / <column-end></span><br><span class="line">}</span><br></pre></td></tr></table></figure><p>以上給個範例:</p><iframe height="300" style="width: 100%;" scrolling="no" title="CSS gird 子層設定格線" src="https://codepen.io/yennnnn/embed/wvGpEgV?height=300&theme-id=37551&default-tab=css,result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> See the Pen <a href="https://codepen.io/yennnnn/pen/wvGpEgV" target="_blank" rel="noopener">CSS gird 子層設定格線</a> by yanennn (<a href="https://codepen.io/yennnnn" target="_blank" rel="noopener">@yennnnn</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.</iframe><h2 id="父層自動欄高-自動列高"><a href="#父層自動欄高-自動列高" class="headerlink" title="父層自動欄高/自動列高"></a>父層自動欄高/自動列高</h2><p><code>grid-template-columns</code> , <code>grid-template-rows</code> 是需要設定欄位寬高，但如果格子很多的話，這樣就不方便了，所以我們就可以使用父層自動計算欄高/列高</p><h3 id="grid-auto-columns-grid-auto-rows"><a href="#grid-auto-columns-grid-auto-rows" class="headerlink" title="grid-auto-columns grid-auto-rows"></a>grid-auto-columns grid-auto-rows</h3><p>自動生成的欄位的大小</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.container</span> {</span><br><span class="line"> <span class="attribute">grid-auto-columns</span>: <track-size> ...;</span><br><span class="line"> <span class="attribute">grid-auto-rows</span>: <track-size> ...;</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p>首先我們給予的長寬</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.container</span> {</span><br><span class="line"> <span class="attribute">grid-auto-columns</span>: <span class="number">60px</span>;</span><br><span class="line"> <span class="attribute">grid-auto-rows</span>: <span class="number">90px</span>;</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p>意思就是每個欄位寬為60px，高都是90px;<br><img src="https://css-tricks.com/wp-content/uploads/2018/11/grid-auto-columns-rows-01.svg" alt="圖片來自css-tricks"><br><small>圖片來自<a href="https://css-tricks.com/snippets/css/complete-guide-grid/" target="_blank" rel="noopener">CSS-Tricks</a></small></p><p>這時我們再定義子層的配置</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.item-a</span> {</span><br><span class="line"> <span class="attribute">grid-column</span>: <span class="number">1</span> / <span class="number">2</span>;</span><br><span class="line"> <span class="attribute">grid-row</span>: <span class="number">2</span> / <span class="number">3</span>;</span><br><span class="line">}</span><br><span class="line"><span class="selector-class">.item-b</span> {</span><br><span class="line"> <span class="attribute">grid-column</span>: <span class="number">5</span> / <span class="number">6</span>;</span><br><span class="line"> <span class="attribute">grid-row</span>: <span class="number">2</span> / <span class="number">3</span>;</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p><img src="https://css-tricks.com/wp-content/uploads/2018/11/grid-auto-columns-rows-03.svg" alt="圖片來自css-tricks"><br><small>圖片來自<a href="https://css-tricks.com/snippets/css/complete-guide-grid/" target="_blank" rel="noopener">CSS-Tricks</a></small></p><p>你會發現即使 <code>item-b</code> 的欄，我們從未定義第5或6列，但因為 <code>grid-auto-columns</code> 的關係，中間產生了隱藏格線，484很神奇<del>~</del></p><h2 id="結論"><a href="#結論" class="headerlink" title="結論"></a>結論</h2><p>最後整理上面所學到的屬性:<br><code>grid-column-start</code>: 子層欄線起始<br><code>grid-column-end</code>: 子層欄線結束<br><code>grid-row-start</code>: 子層列線起始<br><code>grid-row-end</code>: 子層列線結束<br><code>grid-column</code>: 子層欄線起始/結束<br><code>grid-row</code>: 子層列線起始/結束<br><code>grid-auto-columns</code>: 自動欄寬<br><code>grid-auto-rows</code>: 自動列高</p><h2 id="參考文獻"><a href="#參考文獻" class="headerlink" title="參考文獻"></a>參考文獻</h2><p><a href="https://www.youtube.com/watch?v=fYcz3FUqv7M" target="_blank" rel="noopener">CSS GRID / CSS格線好好玩【完整版】 | CSS教學 | CSS格線</a><br><a href="https://wcc723.github.io/css/2017/03/22/css-grid-layout/" target="_blank" rel="noopener">CSS Grid 屬性介紹</a><br><a href="https://css-tricks.com/snippets/css/complete-guide-grid/" target="_blank" rel="noopener">A Complete Guide to Grid</a><br>圖片來自<a href="https://css-tricks.com/snippets/css/complete-guide-grid/" target="_blank" rel="noopener">CSS-Tricks</a></p>]]></content>
<summary type="html">
<p><img src="https://i.imgur.com/AEcGgSo.png" alt></p>
<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>在上一篇我們知道如何使用 CSS Grid 的固定版面樣式，這一篇就來筆記一下如何變化</p>
</summary>
<category term="CSS" scheme="https://yanennnnn.github.io/categories/css/"/>
<category term="CSS3" scheme="https://yanennnnn.github.io/tags/CSS3/"/>
</entry>
<entry>
<title>CSS - 初步了解 CSS Gird - (固定版面配置)</title>
<link href="https://yanennnnn.github.io/css/20200905/b7768386/"/>
<id>https://yanennnnn.github.io/css/20200905/b7768386/</id>
<published>2020-09-05T07:21:25.000Z</published>
<updated>2020-09-05T09:46:15.715Z</updated>
<content type="html"><![CDATA[<p><img src="https://i.imgur.com/AEcGgSo.png" alt></p><a id="more"></a><h2 id="CSS-Gird-介紹"><a href="#CSS-Gird-介紹" class="headerlink" title="CSS Gird 介紹"></a>CSS Gird 介紹</h2><p>CSS Grid 擁有非常靈活自由的排版方式，和 flex 的一維不一樣 CSS Grid 屬於二維網格系統，擁有欄與列的格局，就像表格一樣，所以說當我們設定好父層的 <code>container</code> 後，底下的元素就能隨意我們擺放。</p><p>若還是不太懂，可以參考 Bootstrap 的 <code>row</code>, <code>col</code> ，其概念都是類似的，但 Bootstrap 的是相對百分比定位，而 CSS Gird 則可以自行定義要的寬高</p><h2 id="如何使用"><a href="#如何使用" class="headerlink" title="如何使用"></a>如何使用</h2><p>一個 Grid 有兩個部分：框架( Grid Container )與元件( Grid Items )。</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"container"</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"itemA"</span>></span>AA<span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"itemB"</span>></span>BB<span class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"itemC"</span>></span>CC<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></pre></td></tr></table></figure><h3 id="display"><a href="#display" class="headerlink" title="display"></a>display</h3><p>首先我們要弄成框架的元素定義成 Grid</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.container</span>{</span><br><span class="line"> <span class="attribute">display</span>:grid | inline-grid; <span class="comment">/* 與 flex 一樣，改成 grid */</span></span><br><span class="line">}</span><br></pre></td></tr></table></figure><ul><li>可選擇區塊 gird 或者 行內區塊 gird</li></ul><h3 id="設定欄列-grid-template-columns-grid-template-rows"><a href="#設定欄列-grid-template-columns-grid-template-rows" class="headerlink" title="設定欄列 grid-template-columns , grid-template-rows"></a>設定欄列 grid-template-columns , grid-template-rows</h3><p>接著進行頁面切版佈局，使用 column 和 row 定義格線，內容再依隔線作安排</p><blockquote><p>grid-template-columns 屬於欄(從左到右，橫的)，而 grid-template-rows 屬於列(從上到下，直的)</p></blockquote><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.container</span>{</span><br><span class="line"> <span class="attribute">display</span>: grid | inline-grid; <span class="comment">/* 與 flex 一樣，改成 grid */</span></span><br><span class="line"> <span class="attribute">grid-template-columns</span>: <span class="number">100px</span> <span class="number">40%</span> auto <span class="number">200px</span>;</span><br><span class="line"> <span class="attribute">grid-template-rows</span>: <span class="number">100px</span> <span class="number">150px</span> <span class="number">3</span>fr <span class="number">2</span>fr;</span><br><span class="line">}</span><br></pre></td></tr></table></figure><ul><li>track-size – 可以是網格中可用空間的長度，px 、百分比或分數（使用 fr 單位）</li><li>line-name – 選擇的任意名稱</li></ul><blockquote><p>fr 的意思是分數，能夠將可用的剩餘空間做比例分割，假如使用成 50px 1fr 3fr 1fr ，意思就是扣掉 50px 後佔此容器寬度的 1/5, 3/5, 1/5 </p></blockquote><h3 id="設定區域名稱"><a href="#設定區域名稱" class="headerlink" title="設定區域名稱"></a>設定區域名稱</h3><p>之後在子層元素設定 <code>grid-area</code>: 自訂區域名稱</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.itemA</span>{</span><br><span class="line"> <span class="attribute">grid-area</span>: AA;</span><br><span class="line">}</span><br><span class="line"><span class="selector-class">.itemB</span>{</span><br><span class="line"> <span class="attribute">grid-area</span>: BB;</span><br><span class="line">}</span><br><span class="line"><span class="selector-class">.itemC</span>{</span><br><span class="line"> <span class="attribute">grid-area</span>:CC;</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p>設定完成後，我們就可以在框架(父元素)增加 <code>grid-template-areas</code> 定義子元素的位置</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.container</span>{</span><br><span class="line"> <span class="attribute">display</span>: grid; <span class="comment">/* 與 flex 一樣，改成 grid */</span></span><br><span class="line"> <span class="attribute">grid-template-columns</span>: <span class="number">100px</span> <span class="number">40%</span> auto <span class="number">200px</span>;</span><br><span class="line"> <span class="attribute">grid-template-rows</span>: <span class="number">100px</span> <span class="number">150px</span> <span class="number">3</span>fr <span class="number">2</span>fr;</span><br><span class="line"> <span class="attribute">grid-template-areas</span>:</span><br><span class="line"> <span class="string">"AA AA BB BB"</span></span><br><span class="line"> <span class="string">"AA AA BB BB"</span></span><br><span class="line"> <span class="string">"AA AA BB BB"</span></span><br><span class="line"> <span class="string">"CC CC CC CC"</span>;</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p>這樣就基本完成空間的配置</p><h3 id="留白"><a href="#留白" class="headerlink" title="留白"></a>留白</h3><p>如果在配置的有個空間留白，只要在 <code>grid-template-areas</code> 要留白的地方改成 “<b>.</b>“，就能達到效果了</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.container</span>{</span><br><span class="line"> <span class="attribute">grid-template-areas</span>:</span><br><span class="line"> <span class="string">"AA AA BB BB"</span></span><br><span class="line"> <span class="string">"AA AA BB BB"</span></span><br><span class="line"> <span class="string">" . . BB BB"</span></span><br><span class="line"> <span class="string">"CC CC CC CC"</span>;</span><br><span class="line">}</span><br></pre></td></tr></table></figure><h3 id="grid-gap"><a href="#grid-gap" class="headerlink" title="grid-gap"></a>grid-gap</h3><p>若想要每個空間都有些間距，可以使用 <code>grid-gap</code></p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/* 欄列間距10px */</span></span><br><span class="line"><span class="selector-tag">grid-gap</span><span class="selector-pseudo">:10px</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">/* 列與列之間10px 欄與欄之間15px */</span></span><br><span class="line"><span class="selector-tag">grid-gap</span><span class="selector-pseudo">:10px</span> 15<span class="selector-tag">px</span> <span class="comment">/* <grid-row-gap> <grid-column-gap>; */</span></span><br></pre></td></tr></table></figure><p>注意:如果使用 <code>grid-gap</code> ，如果配置的寬高都是固定高度的話，會凸出去，所以建議其中一個改成 <code>auto</code> ，才不會有溢出的狀況<br>另外，<code>grid-gap</code> 已重命名為 <code>gap</code> 囉！所以建議使用 <code>gap</code> 的方式</p><p>最後成果範例:</p><iframe height="300" style="width: 100%;" scrolling="no" title="CSS gird 基本配置" src="https://codepen.io/yennnnn/embed/poydMmW?height=300&theme-id=37551&default-tab=css,result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true"> See the Pen <a href="https://codepen.io/yennnnn/pen/poydMmW" target="_blank" rel="noopener">CSS gird 基本配置</a> by yanennn (<a href="https://codepen.io/yennnnn" target="_blank" rel="noopener">@yennnnn</a>) on <a href="https://codepen.io" target="_blank" rel="noopener">CodePen</a>.</iframe><h3 id="注意事項"><a href="#注意事項" class="headerlink" title="注意事項"></a>注意事項</h3><ul><li><p>不能交錯排，例如:</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.container</span>{</span><br><span class="line"> <span class="attribute">grid-template-areas</span>:</span><br><span class="line"> <span class="string">"AA AA BB AA"</span></span><br><span class="line"> <span class="string">"CC CC BB BB"</span></span><br><span class="line"> <span class="string">"BB CC BB CC"</span></span><br><span class="line"> <span class="string">"CC CC CC CC"</span>;</span><br><span class="line"> }</span><br></pre></td></tr></table></figure></li><li><p>如果使用 <code>grid-template-areas</code> 方式配置空間，請保持區塊樣子(不能有凸凹)，例如:</p><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.container</span>{</span><br><span class="line"> <span class="attribute">grid-template-areas</span>:</span><br><span class="line"> <span class="string">"AA AA BB BB"</span></span><br><span class="line"> <span class="string">"CC CC CC BB"</span></span><br><span class="line"> <span class="string">"CC CC BB BB"</span></span><br><span class="line"> <span class="string">"CC CC CC CC"</span>;</span><br><span class="line"> }</span><br></pre></td></tr></table></figure></li></ul><h2 id="結論"><a href="#結論" class="headerlink" title="結論"></a>結論</h2><p>對於 grid 真的是相見恨晚，而且了解之後也沒想像得難，上面說的都只是固定版面而已，還有好多還沒玩到呢，若是已經等不及知道還有什麼好玩的，可以到參考文獻看看哦~</p><p>最後整理上面所學到的屬性:<br><code>grid-template-columns</code>：網格區塊欄<br><code>grid-template-rows</code>：網格區塊列<br><code>grid-template-areas</code>：定義空間的位置<br><code>grid-area</code>: 自訂區域名稱<br><code>gap</code>: 間距</p><h2 id="參考文獻"><a href="#參考文獻" class="headerlink" title="參考文獻"></a>參考文獻</h2><p><a href="https://www.youtube.com/watch?v=fYcz3FUqv7M" target="_blank" rel="noopener">CSS GRID / CSS格線好好玩【完整版】 | CSS教學 | CSS格線</a><br><a href="https://wcc723.github.io/css/2017/03/22/css-grid-layout/" target="_blank" rel="noopener">CSS Grid 屬性介紹</a><br><a href="https://css-tricks.com/snippets/css/complete-guide-grid/" target="_blank" rel="noopener">A Complete Guide to Grid</a></p>]]></content>
<summary type="html">
<p><img src="https://i.imgur.com/AEcGgSo.png" alt></p>
</summary>
<category term="CSS" scheme="https://yanennnnn.github.io/categories/css/"/>
<category term="CSS3" scheme="https://yanennnnn.github.io/tags/CSS3/"/>
</entry>
<entry>
<title>HTML 小知識 - Web Storage vs Cookie</title>
<link href="https://yanennnnn.github.io/html/20200903/d495ed5d/"/>
<id>https://yanennnnn.github.io/html/20200903/d495ed5d/</id>
<published>2020-09-03T11:46:55.000Z</published>
<updated>2020-09-03T13:19:01.606Z</updated>
<content type="html"><![CDATA[<p><img src="https://i.imgur.com/wUurW9q.png" alt></p><a id="more"></a><h2 id="什麼是-Web-Storage-什麼是-Cookie"><a href="#什麼是-Web-Storage-什麼是-Cookie" class="headerlink" title="什麼是 Web Storage 什麼是 Cookie"></a>什麼是 Web Storage 什麼是 Cookie</h2><p>Web Storage 為瀏覽器中的儲存區，可把網頁的資料儲存在本地端，其作用如同 Cookie，Web Storage 和 Cookie 儲存的資料，皆以 key-value pair (鍵對值)的形式保存</p><p>Web Storage 在一般瀏覽器下有 5 MB 的儲存空間，相比 Cookie 的 4 KB 來說相對來的大，另外 Cookie 中的資料會在本地端瀏覽器與伺服器之間，所以使用 Cookie 就要 request ，導致性能會降低，而 Web Storage 只會在本地端，所以減少了對伺服器的資料請求</p><h3 id="應用場景"><a href="#應用場景" class="headerlink" title="應用場景"></a>應用場景</h3><p>由於 Cookie 的資料可以使用在用戶端與伺服器之間，所以比較常用在判斷用戶是否登錄。針對登錄過的用戶，伺服器會在用戶端登錄時往 Cookie 中插入一段加密過的唯一辨識單一用戶的辨識碼，下次只要讀取這個值就可以判斷當前用戶是否登錄，而 Web Storage 就能使用在曾瀏覽的商品或者購物車訊息這些只要用戶端就能做的事情，這樣也能減少瀏覽器送出 request 至伺服器</p><h2 id="sessionStorage-vs-localStorage"><a href="#sessionStorage-vs-localStorage" class="headerlink" title="sessionStorage vs localStorage"></a>sessionStorage vs localStorage</h2><p>Web Storage 有兩種：sessionStorage 以及 localStorage，使用 windows 的打開 F12 ( HTML code )，進入 Application 會有 Storage 列表，就能從那邊看到 sessionStorage 和 localStorage 儲存的資料</p><h3 id="sessionStorage"><a href="#sessionStorage" class="headerlink" title="#sessionStorage"></a>#sessionStorage</h3><p>屬於暫存性，僅在當下有效，關閉頁面或瀏覽器後被清除，通過 <code>Window.sessionStorage</code> 來使用</p><h3 id="localStorage"><a href="#localStorage" class="headerlink" title="#localStorage"></a>#localStorage</h3><p>屬於永久性，瀏覽器關閉後，再次打開依然有效，通過 <code>Window.localStorage</code> 來使用</p><h3 id="sessionStorage-和-localStorage-共通點"><a href="#sessionStorage-和-localStorage-共通點" class="headerlink" title="sessionStorage 和 localStorage 共通點"></a>sessionStorage 和 localStorage 共通點</h3><ul><li>在瀏覽器的隱私模式下面是不可讀取的</li><li>目前所有的瀏覽器中都會把值型別限定為 string 型別，所以像是物件型別需要使用 JSON 轉換成字串型別<blockquote><p>JASO 全名為 JavaScript Object Notation ( Javascript 物件符號)，可以把資料轉成字串型</p></blockquote></li><li>儲存資料的時候，可用 Storage 物件的 setItem 方法，取值使用 getItem 方法</li><li>不能被爬蟲抓取到</li><li>在 IE8 以上的 IE 版本才支援</li><li>本質上是對字串的讀取，如果儲存內容多的話會消耗記憶體空間</li></ul><h3 id="Storage的應用"><a href="#Storage的應用" class="headerlink" title="Storage的應用"></a>Storage的應用</h3><p>這邊使用 localStorage 當範例</p><ul><li><p>儲存資料</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">localStorage.setItem(<span class="string">"keyName"</span>,<span class="string">"dataName"</span>) <span class="comment">//前者為儲存項目的"鍵"，後者為鍵值</span></span><br><span class="line">localStorage.keyName = <span class="string">'dataName'</span></span><br></pre></td></tr></table></figure></li><li><p>讀取資料</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">localStorage.getItem(<span class="string">"keyName"</span>) <span class="comment">//讀取儲存在 localStorage 鍵值為 keyName 裡的值</span></span><br><span class="line">localStorage.keyName <span class="comment">//讀取儲存在 localStorage 鍵值為 keyName 裡的值</span></span><br><span class="line">localStorage.valueOf() <span class="comment">//讀取儲存在 localStorage 上的所有資料</span></span><br><span class="line">localStorage.key(<span class="number">0</span>) <span class="comment">// 讀取第一個鍵名</span></span><br></pre></td></tr></table></figure></li><li><p>刪除資料</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">localStorage.removeItem(<span class="string">"keyName"</span>); <span class="comment">//刪除儲存在 localStorage 鍵值為 keyName 裡的值</span></span><br></pre></td></tr></table></figure></li><li><p>將 JSON 儲存到 localStorage 裡</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> data = [</span><br><span class="line"> {</span><br><span class="line"> name: <span class="string">'小華'</span>,</span><br><span class="line"> age: <span class="number">18</span>,</span><br><span class="line"> sex: <span class="string">'male'</span></span><br><span class="line"> },</span><br><span class="line"> {</span><br><span class="line"> name: <span class="string">'小花'</span>,</span><br><span class="line"> age: <span class="number">17</span>,</span><br><span class="line"> sex: <span class="string">'female'</span></span><br><span class="line"> },</span><br><span class="line"> {</span><br><span class="line"> name: <span class="string">'小美'</span>,</span><br><span class="line"> age: <span class="number">18</span>,</span><br><span class="line"> sex: <span class="string">'female'</span></span><br><span class="line"> },</span><br><span class="line">]</span><br><span class="line">localStorage.setItem(<span class="string">"people"</span>, <span class="built_in">JSON</span>.stringify(data)); <span class="comment">// JSON 轉為字串存到 localStorage 裡</span></span><br><span class="line"><span class="keyword">const</span> newPeople = <span class="built_in">JSON</span>.parse(localStorage.getItem(<span class="string">"people"</span>)); <span class="comment">//把取出的 localStorage 資料使用 JSON 轉換成 JavaScript 的數值或是物件</span></span><br><span class="line"><span class="built_in">console</span>.log(newPeople)</span><br></pre></td></tr></table></figure></li><li><p>清空</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">localStorage.clear()</span><br></pre></td></tr></table></figure></li></ul>]]></content>
<summary type="html">
<p><img src="https://i.imgur.com/wUurW9q.png" alt></p>
</summary>
<category term="HTML" scheme="https://yanennnnn.github.io/categories/html/"/>
<category term="HTML" scheme="https://yanennnnn.github.io/tags/HTML/"/>
</entry>
<entry>
<title>HTML 小知識 - 區塊元素 vs 行內元素</title>
<link href="https://yanennnnn.github.io/html/20200827/fd7f7d68/"/>
<id>https://yanennnnn.github.io/html/20200827/fd7f7d68/</id>
<published>2020-08-27T07:35:35.000Z</published>
<updated>2020-08-28T03:02:07.563Z</updated>
<content type="html"><![CDATA[<p><img src="https://i.imgur.com/wUurW9q.png" alt></p><h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>使用那麼多次 HTML 元素卻很少去了解它屬於什麼元素，所以來記錄一下我們常見的區塊元素和行內元素</p><p>順便也能了解一些元素之間的小禁忌</p><a id="more"></a><h2 id="區塊元素-block"><a href="#區塊元素-block" class="headerlink" title="區塊元素(block)"></a>區塊元素(block)</h2><p>區塊元素（或稱區塊層級元素），可以設置 <code>width</code>、<code>height</code>，在一般默認下的區塊元素，寬度會跟隨父層寬度，故而不允許其他元素佔據其相同水平空間，對應的 <code>display</code> 為 <code>block</code>；區塊元素的矩形結構稱之為盒模型( box model )，由 <code>content</code>、<code>padding</code>、<code>border</code>、<code>margin</code>所組成</p><h3 id="區塊元素包含"><a href="#區塊元素包含" class="headerlink" title="區塊元素包含"></a>區塊元素包含</h3><ul><li>文字<ul><li>p - 段落</li><li>h1, h2, h3, h4, h5, h6 - 標題 <br></li></ul></li><li>列表 <ul><li>dl - 定義列表-清單</li><li>dt - 定義列表-項目</li><li>dd - 定義列表-描述</li><li>ol - 有排序之編號清單</li><li>ul - 未排序之項目符號清單</li><li>li - 清單中之列表項目<br></li></ul></li><li>其他區塊元素 <ul><li>address - 地址</li><li>blockquote - 塊引用</li><li>div - 區塊</li><li>menu - 菜單列表</li><li>main - 主體內容</li><li>npscript - script 的替代內容（對于不支持 script 的瀏覽器顯示此內容）</li><li>pre - 預先格式化文字</li><li>figure - 有標題的獨立內容，常使用於插圖、圖表或程式片段等，標題是放在其內的 <code>figcaption</code> 元素裡。</li><li>header - 文章標題內容</li><li>nav - 導覽</li><li>aside - 側邊欄</li><li>article - 文章內容</li><li>section - 段落</li><li>footer - 頁尾</li><li>form - 表單</li><li>fieldset - 表單群組</li><li>canvas - 定義圖形</li><li>hgroup - 群組文章標題</li><li>table - 表格</li><li>tfoot - 表格腳尾</li><li>video -嵌入媒體播放器</li><li>audio -嵌入音頻播放器<br></li></ul></li><li>空元素<ul><li>hr - 水平分隔線</li></ul></li></ul><blockquote><p>只有開始標籤而沒有結束標籤的就稱為空元素</p></blockquote><h2 id="行內元素-inline"><a href="#行內元素-inline" class="headerlink" title="行內元素(inline)"></a>行內元素(inline)</h2><p>又稱內聯元素，和其他元素都在一行上，相臨的行内元素会排列在同一行；無法設置 <code>width</code> 、 <code>height</code> ，只能靠內容撐起來，上下的 <code>padding</code> 和 <code>margin</code> 設置會無效，但左右的有效，對應的 <code>display</code> 為 <code>inline</code></p><blockquote><p>上下的 <code>padding</code>、<code>margin</code> 為 <code>padding-top</code> ,<code>padding-bottom</code>, <code>margin-top</code>, <code>margin-bottom</code></p></blockquote><h3 id="行內元素包含"><a href="#行內元素包含" class="headerlink" title="行內元素包含"></a>行內元素包含</h3><ul><li>a - 連結<br></li><li>短語元素<ul><li>abbr - 縮寫標記</li><li>acronym -首字母縮寫</li><li>b - 文字加粗</li><li>bdo - 覆蓋當前文字方向</li><li>cite - 引用文字</li><li>dfn - 定義術語/專業行話</li><li>em - 強調文字(斜體)</li><li>i - 斜體</li><li>strong - 加重文字</li><li>q - 短引用</li><li>label - input 文字標籤</li><li>samp - 標示電腦程序輸出</li><li>small - 字體變小</li><li>span - 常用行內元素，定義文字內區塊</li><li>sub - 下標</li><li>sup - 上標<br></li></ul></li><li>電腦術語元素<ul><li>code - 程式碼的片段</li><li>kbd - 定義鍵盤文字</li><li>var - 定義變量<br></li></ul></li><li>其他元素<ul><li>output - 表單輸出</li><li>select - 項目選單</li><li>textarea - 多行文本輸入框<br></li></ul></li><li>空元素<ul><li>br - 換行</li><li>img - 圖片</li><li>input - 輸入框</li></ul></li></ul><h2 id="可變元素"><a href="#可變元素" class="headerlink" title="可變元素"></a>可變元素</h2><p>可變元素為根據上下文語境決定該元素為區塊元素或者行內元素</p><h3 id="可變元素包含"><a href="#可變元素包含" class="headerlink" title="可變元素包含"></a>可變元素包含</h3><ul><li>applet - java applet</li><li>button - 按鈕</li><li>del - 刪除</li><li>iframe - 嵌入框架的應用</li><li>ins - 定義標記插入的部份</li><li>map - 圖片區塊</li><li>object - object對象</li><li>script - 嵌入或引用要執行的程式碼</li></ul><h2 id="特例規則"><a href="#特例規則" class="headerlink" title="特例規則"></a>特例規則</h2><p>基本上區塊元素可以包含行內元素和某些區塊元素，行內元素不能包含區塊元素，只能包含行內元素，但有些小特例，例如:</p><ul><li><p>a 連結幾乎都能包含，不能包含 a 連結</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">//錯誤示範</span><br><span class="line"><span class="tag"><<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</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>test<span class="tag"></<span class="name">a</span>></span></span><br><span class="line"><span class="tag"></<span class="name">a</span>></span></span><br></pre></td></tr></table></figure></li><li><p>p 段落不能包含區塊元素</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">//錯誤示範</span><br><span class="line"><span class="tag"><<span class="name">p</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">div</span>></span><span class="tag"></<span class="name">div</span>></span></span><br><span class="line"><span class="tag"></<span class="name">p</span>></span> </span><br><span class="line"><span class="tag"><<span class="name">h1</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">p</span>></span>test<span class="tag"></<span class="name">p</span>></span></span><br><span class="line"><span class="tag"><<span class="name">h1</span>></span></span><br></pre></td></tr></table></figure></li><li><p>li 標籤可以包含 div 以及他的父元素 ul, ol</p><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><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><br><span class="line"> <span class="tag"><<span class="name">div</span>></span></span><br><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>123<span class="tag"></<span class="name">li</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">li</span>></span>456<span class="tag"></<span class="name">li</span>></span></span><br><span class="line"> <span class="tag"><<span class="name">li</span>></span>789<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 class="tag"></<span class="name">div</span>></span></span><br><span class="line"> <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></li></ul><h2 id="結論"><a href="#結論" class="headerlink" title="結論"></a>結論</h2><p>如果有區塊或者行內元素想改變元素也可以使用 CSS 的 <code>display</code>，例如 li 區塊元素改成水平的時候；或者當純只是想要水平並列但一樣想要保持是區塊的話就能使用 <code>inline-block</code> 或者 <code>flex</code>，這又是另外一種坑惹XD</p>]]></content>
<summary type="html">
<p><img src="https://i.imgur.com/wUurW9q.png" alt></p>
<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>使用那麼多次 HTML 元素卻很少去了解它屬於什麼元素，所以來記錄一下我們常見的區塊元素和行內元素</p>
<p>順便也能了解一些元素之間的小禁忌</p>
</summary>
<category term="HTML" scheme="https://yanennnnn.github.io/categories/html/"/>
<category term="HTML" scheme="https://yanennnnn.github.io/tags/HTML/"/>
</entry>
<entry>
<title>六角 - JS 實戰班心得 </title>
<link href="https://yanennnnn.github.io/learnshare/20200825/c63f9c74/"/>
<id>https://yanennnnn.github.io/learnshare/20200825/c63f9c74/</id>
<published>2020-08-25T06:36:07.000Z</published>
<updated>2020-08-28T03:14:53.300Z</updated>
<content type="html"><![CDATA[<p><img src="https://i.imgur.com/ley4HZ3.png" alt></p><h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>當時剛把 Vue 的最終作業完成了，但是那時候覺得自己對 Vue 還不夠了解，這時候剛好六角學院了 JS 直播班，想著那不如就來參加，也可以增加自己的熟悉度</p><a id="more"></a><h2 id="第一～第八週的學習過程"><a href="#第一～第八週的學習過程" class="headerlink" title="第一～第八週的學習過程"></a>第一～第八週的學習過程</h2><h3 id="開課時的小任務"><a href="#開課時的小任務" class="headerlink" title="開課時的小任務"></a>開課時的小任務</h3><p>開課前老師有給一些 JS 觀念影片給學員，是 JS 核心觀念一些內容，因為當初有買這個課程，所以當時就想不如就當作複習，順便做了一些筆記或者修改之前的筆記，最後這些筆記讓我在實作的時候，能快速找到自己要的東西， 所以說筆記挺重要的XD</p><p>還有每日任務，其實自己做的還蠻開心的(? 看自己每天都有執行，不僅能知道哪裡還是不懂加上每天都有花一點時間做每日任務也不會讓自己跟程式脫節太久，尤其是 Vue 的 <code>emit</code> 和 <code>props</code> 上完課後，搭配每日任務又更加深我的印象，比以前自己看影片時還來的知道如何使用他們。</p><h3 id="直播課期間"><a href="#直播課期間" class="headerlink" title="直播課期間"></a>直播課期間</h3><p>到了開課，因為是直播的關係，儘管之後有影片，但覺得在直播的時候會比自己看影片會更專心；之前已經有上過 Vue 的課程，所以直播時我都是以複習來看待，發現之前不懂的地方在這次直播都蠻清楚的，有些不懂得比之前看的還明白，就像我剛剛所說的 <code>emit</code> 和 <code>props</code>。</p><p>期間每週上完都會有主線任務，以前自己做最終作業的時候都要一直看別人的，到現在慢慢的可以自己摸出一些來，尤其是週六的加碼作業講解還有助教的講解，讓我懂得如何應用，了解這段程式為什麼要這樣寫</p><h2 id="結論分享"><a href="#結論分享" class="headerlink" title="結論分享"></a>結論分享</h2><p>我覺得直播班其實可以入手，雖然比自己購買課程會比較貴，但因為是直播，會有時間的壓力，可以讓你的懶癌減少一點，而且若你很急的要趕快有個作品的話，很推薦參加。如果說金錢允許的話我建議可以一起購買課程，我是兩個地方都有，畢竟當下說的是這種方式解讀，但或許影音課程又會是另外一種解讀方式，加上剛剛所說有時間的關係，所以可能你還沒吸收好又要進入下一個階段了，所以這時候有買課程的話就可以在一次複習，加深印象</p><p>因為有建 Slack 可以看到大家都在努力，說不定會覺得自己不能那麼廢而上進XD，另外也把問題丟到上面，助教回覆的都蠻快的，但我覺得六角學院不管哪裡回答問題都蠻快的XD</p>]]></content>
<summary type="html">
<p><img src="https://i.imgur.com/ley4HZ3.png" alt></p>
<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>當時剛把 Vue 的最終作業完成了，但是那時候覺得自己對 Vue 還不夠了解，這時候剛好六角學院了 JS 直播班，想著那不如就來參加，也可以增加自己的熟悉度</p>
</summary>
<category term="心得分享" scheme="https://yanennnnn.github.io/categories/learnshare/"/>
<category term="活動心得" scheme="https://yanennnnn.github.io/tags/%E6%B4%BB%E5%8B%95%E5%BF%83%E5%BE%97/"/>
<category term="六角學院" scheme="https://yanennnnn.github.io/tags/%E5%85%AD%E8%A7%92%E5%AD%B8%E9%99%A2/"/>
</entry>
<entry>
<title>JS 趴趴走 - ES6 const & let</title>
<link href="https://yanennnnn.github.io/javascript/20200801/b5b19c96/"/>
<id>https://yanennnnn.github.io/javascript/20200801/b5b19c96/</id>
<published>2020-08-01T07:39:26.000Z</published>
<updated>2020-08-28T03:02:07.743Z</updated>
<content type="html"><![CDATA[<p><img src="https://i.imgur.com/n9iFZz1.png" alt></p><h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>剛開始接觸 JavaScript 時，最先使用的宣告方式是 <code>var</code>，慢慢的開始學會了 ES6 的 <code>let</code> 和 <code>const</code> ，所以就來筆記一下他們的不同</p><blockquote><p>文章啟發於六角學院的 JS 學徒特訓班第三十八關</p></blockquote><a id="more"></a><h2 id="const-vs-let-vs-var"><a href="#const-vs-let-vs-var" class="headerlink" title="const vs let vs var"></a>const vs let vs var</h2><p><code>const</code> 、 <code>let</code> 以及 <code>var</code> 都是用來宣告變數，他們都是宣告變數，為什麼明明有了 <code>var</code> 還要增加 <code>const</code> 和 <code>let</code> 呢?<br>其實就是為了修正 <code>var</code> 的一些缺點</p><h3 id="作用域-汙染全域"><a href="#作用域-汙染全域" class="headerlink" title="作用域(汙染全域)"></a>作用域(汙染全域)</h3><p><code>var</code> 屬於作用域屬於<strong>函式作用域</strong>，意思就是<code>var</code> 變數的範圍在 <code>function</code> </p><blockquote><p>作用範圍(scope)又稱作用域，指的是變數或常數的定義與語句可見(被存取得到)的範圍</p></blockquote><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fun</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="keyword">var</span> a = <span class="number">100</span>;</span><br><span class="line">}</span><br><span class="line"><span class="built_in">console</span>.log(a); <span class="comment">//ReferenceError: a is not defined</span></span><br></pre></td></tr></table></figure><p>從上面例子來看，因為屬於函式作用域(function scope)，我們不能從 <code>function</code> 內拿到 <code>a</code> 值 ，也就是說只能在函式內才能使用</p><p>而 <code>const</code> 和 <code>let</code> 屬於<strong>區塊作用域</strong>，區塊如 <code>if</code>、<code>for</code>、<code>switch</code>、<code>while</code> 等等有使用區塊(<code>{ }</code>)語句</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"> <span class="function"><span class="keyword">function</span> <span class="title">fun</span>(<span class="params"></span>) </span>{</span><br><span class="line"> <span class="keyword">let</span> a = <span class="number">100</span>;</span><br><span class="line"> }</span><br><span class="line"><span class="built_in">console</span>.log(a); <span class="comment">//ReferenceError: a is not defined</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">if</span> (<span class="literal">true</span>) {</span><br><span class="line"> <span class="keyword">const</span> b = <span class="string">'我不能來出來'</span>;</span><br><span class="line"> <span class="keyword">var</span> c = <span class="string">'我可以拿出來'</span>;</span><br><span class="line">}</span><br><span class="line"><span class="built_in">console</span>.log(c); <span class="comment">//我可以拿出來</span></span><br><span class="line"><span class="built_in">console</span>.log(b); <span class="comment">//ReferenceError: b is not defined</span></span><br></pre></td></tr></table></figure><p>以 <code>funtion</code> 一樣也是會出現錯誤，但我們使用 <code>if</code> 發現用 <code>var</code> 宣告的 <code>c</code> 是可以取到值的，而 <code>b</code> 則不行</p><p>再來我們使用「開發人員工具」輸入 <code>window</code> 去搜尋，會發現 <code>c</code> 竟然變成全域變數了，由此得知使用 <code>const</code> 和 <code>let</code> 可以確保不會污染到全域</p><h3 id="重複宣告"><a href="#重複宣告" class="headerlink" title="重複宣告"></a>重複宣告</h3><p>我們來看看以下問題答案是什麼</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//範例一</span></span><br><span class="line"><span class="keyword">var</span> a = <span class="number">10</span>;</span><br><span class="line">a = <span class="number">123</span>;</span><br><span class="line"><span class="keyword">var</span> a = <span class="number">234</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">//範例二</span></span><br><span class="line"><span class="keyword">let</span> b = <span class="number">1</span>;</span><br><span class="line">b = <span class="number">3</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> c = <span class="number">1</span>;</span><br><span class="line"><span class="keyword">let</span> c = <span class="number">2</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">//範例三</span></span><br><span class="line"><span class="keyword">const</span> d = <span class="number">3</span>;</span><br><span class="line">d = <span class="number">4</span>;</span><br></pre></td></tr></table></figure><ul><li>範例一 : <code>var</code> 是允許重複宣告的也可以重新賦值，而且即使在同一個作用域，同樣名稱的變數也允許重複宣告，所以 <code>a</code> 答案就是 234 </li><li>範例二 : <code>let</code> 與 <code>var</code> 的不同點在於不能重複宣告，所以 <code>b</code> 答案是 3 ，而 <code>c</code> 的答案則是 <code>Identifier 'c' has already been declared</code></li><li>範例三 : <code>const</code> 則是不能重複宣告也不能重新賦值，只能用來宣告常數(在 ES6 中的定義是constant variable 固定的變數)，所以 <code>d</code> 的答案是 <code>Assignment to constant variable.</code></li></ul><h4 id="const-的特性"><a href="#const-的特性" class="headerlink" title="const 的特性"></a>const 的特性</h4><p><code>const</code>除了以上特性外，對於物件和陣列來說若只是傳參考也可以使用，另外還有一點就是必須一定要有值，對於<code>var</code> 和 <code>let</code> 宣告變數可以不賦予值，但 <code>const</code> 不賦值就會出錯</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> a; <span class="comment">//Missing initializer in const declaration</span></span><br></pre></td></tr></table></figure><p><small>其實可以這樣想你都要宣告一個變數了怎麼可能還不賦予值對吧XDD，而 const 又不能更動值，所以邏輯上 const 就一定要有值囉</small></p><blockquote><p>關於<code>const</code>使用在物件或者陣列上，參考這篇 <a href="https://yanennnnn.github.io/20200728/ckdbcf3nd0000hc7kbnvc1juz/#more">文章</a></p></blockquote><h3 id="Hoisting-變量提升"><a href="#Hoisting-變量提升" class="headerlink" title="Hoisting 變量提升"></a>Hoisting 變量提升</h3><p>使用 <code>var</code> 宣告變數時，會有一種特性</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><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">10</span>;</span><br></pre></td></tr></table></figure><p>答案竟然不是 <code>a is not defined</code> 而是 <code>undefined</code>，這是因為<strong>Hoisting</strong>的關係</p><p><code>var</code>有提升，那 <code>const</code> 和 <code>let</code>呢?</p><pre><code class="javascript"><span class="built_in">console</span>.log(b); <span class="comment">//ReferenceError: b is not defined</span><span class="keyword">let</span> b = <span class="number">123</span>;</code></pre><p>是 <code>b is not defined</code>耶，這樣說明是不是代表沒有提升囉? 哦不不不，哦不不不，我看你是 too young too simple(誤</p><p>其實是 <code>const</code> 和 <code>let</code> 也是存在變量提升的，但因為 <strong>暫時死區（Temporal Dead Zone，TDZ)</strong> 的關係，才會感覺沒有提升</p><blockquote><p><strong>TDZ</strong> : 如宣告變數前存取該變數會產生 <code>ReferenceError</code> 錯誤，這就是稱為 暫時死區 (Temporal Dead Zone)</p></blockquote><h2 id="總結"><a href="#總結" class="headerlink" title="總結"></a>總結</h2><p>最後簡單整理一個表格提供參考，也可以知道何時該用什麼方法宣告</p><table><thead><tr><th align="center"></th><th align="center">var</th><th align="center">let</th><th align="center">const</th></tr></thead><tbody><tr><td align="center">作用域(範圍)</td><td align="center">函式</td><td align="center">區塊</td><td align="center">區塊</td></tr><tr><td align="center">重複宣告</td><td align="center">可</td><td align="center">不可</td><td align="center">不可</td></tr><tr><td align="center">重新賦值</td><td align="center">可</td><td align="center">可</td><td align="center">不可</td></tr><tr><td align="center">變量提升</td><td align="center">有</td><td align="center">有</td><td align="center">有</td></tr></tbody></table>]]></content>
<summary type="html">
<p><img src="https://i.imgur.com/n9iFZz1.png" alt></p>
<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>剛開始接觸 JavaScript 時，最先使用的宣告方式是 <code>var</code>，慢慢的開始學會了 ES6 的 <code>let</code> 和 <code>const</code> ，所以就來筆記一下他們的不同</p>
<blockquote>
<p>文章啟發於六角學院的 JS 學徒特訓班第三十八關</p>
</blockquote>
</summary>
<category term="JavaScript" scheme="https://yanennnnn.github.io/categories/javascript/"/>
<category term="JavaScript" scheme="https://yanennnnn.github.io/tags/JavaScript/"/>
<category term="ES6" scheme="https://yanennnnn.github.io/tags/ES6/"/>
</entry>
<entry>
<title>JS 趴趴走 - ES6 關於 const 的宣告</title>
<link href="https://yanennnnn.github.io/javascript/20200728/eccdaf7f/"/>
<id>https://yanennnnn.github.io/javascript/20200728/eccdaf7f/</id>
<published>2020-07-28T06:33:10.000Z</published>
<updated>2020-08-28T03:02:07.680Z</updated>
<content type="html"><![CDATA[<p><img src="https://i.imgur.com/n9iFZz1.png" alt></p><h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>今天的文章啟發於六角學院的Js學徒特訓班第三十七關，除了<code>var</code>宣告變數之外，我們也可以使用ES6的<code>let</code>和<code>const</code></p><a id="more"></a><h2 id="let和const宣告"><a href="#let和const宣告" class="headerlink" title="let和const宣告"></a>let和const宣告</h2><p>首先了解let和const都屬於用來宣告的，他們兩者最大差異是</p><ul><li>let: 用來宣告變數，可以被重新指定值</li><li>const: 用來宣告常數(變數)，不能重新指定值</li></ul><p>所以當我們宣告的時候，就會寫成這樣</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> a=<span class="string">'曉華'</span>;</span><br><span class="line"><span class="keyword">const</span> b=<span class="string">'小鎮'</span>;</span><br><span class="line">a=<span class="string">'小明'</span>;</span><br><span class="line">b=<span class="string">'aaa'</span>;<span class="comment">//Assignment to constant variable.</span></span><br></pre></td></tr></table></figure><p>使用<code>const</code>宣告就不能改值了，會發生錯誤</p><h2 id="const宣告物件和陣列"><a href="#const宣告物件和陣列" class="headerlink" title="const宣告物件和陣列"></a>const宣告物件和陣列</h2><p>當你要宣告會改變值的時，下意識會認為那就使用let，這次我們使用const宣告物件和陣列試試看</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> arr=[];</span><br><span class="line">arr.push(<span class="number">123</span>);</span><br></pre></td></tr></table></figure><p>會發現竟然沒出錯，這是因為JS中的陣列和物件都是屬於 Pass by reference，也就是我們所說的傳址，以上述範例來說它只是把數值放在同一個記憶體的位置，沒有指向其他地方，自然就不會產生錯誤了</p><p>這點物件也是同樣的</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> obj={</span><br><span class="line"> a:<span class="string">'小名'</span>,</span><br><span class="line"> b:<span class="string">'曉華'</span>,</span><br><span class="line"> c:<span class="string">'小鎮'</span></span><br><span class="line">};</span><br><span class="line">obj.a=<span class="string">'名小小'</span></span><br><span class="line"><span class="built_in">console</span>.log(obj) <span class="comment">//{a: "名小小", b: "曉華", c: "小鎮"}</span></span><br></pre></td></tr></table></figure><p>但要記住，一旦跟改位置，就不能使用<code>const</code>方式宣告了</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> obj2={</span><br><span class="line"> a:<span class="string">'小名'</span>,</span><br><span class="line"> b:<span class="string">'曉華'</span>,</span><br><span class="line"> c:<span class="string">'小鎮'</span></span><br><span class="line">};</span><br><span class="line">obj2={</span><br><span class="line"> a:<span class="string">'名小小'</span> </span><br><span class="line">}<span class="comment">//Assignment to constant variable.</span></span><br></pre></td></tr></table></figure><p>最後放個範例</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> name = <span class="string">'小名'</span>;</span><br><span class="line"><span class="keyword">const</span> age = <span class="number">16</span>;</span><br><span class="line"><span class="keyword">let</span> city = <span class="string">'台北市'</span>;</span><br><span class="line"><span class="keyword">const</span> person = {</span><br><span class="line"> name: <span class="string">'曉華'</span>,</span><br><span class="line"> height: <span class="number">155</span></span><br><span class="line">}</span><br><span class="line"><span class="keyword">let</span> myWallet = {</span><br><span class="line"> money: <span class="number">1000</span></span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">city = <span class="string">'台中市'</span>;</span><br><span class="line">person.height = <span class="number">160</span>;</span><br><span class="line">myWallet = {};</span><br></pre></td></tr></table></figure><p>可以看出來，用<code>const</code>宣告的值為不可更改，若使用物件更改為同一個記憶體位置可以使用<code>const</code>，若重新指向新的記憶體則依然使用<code>let</code></p><hr><h3 id="參考文獻"><a href="#參考文獻" class="headerlink" title="參考文獻"></a>參考文獻</h3><blockquote><p>對於 Pass by reference 可以參考以下文章</p></blockquote><p><a href="https://ithelp.ithome.com.tw/articles/10191057" target="_blank" rel="noopener">重新認識 JavaScript: Day 05 JavaScript 是「傳值」或「傳址」？</a><br><a href="https://pjchender.blogspot.com/2016/03/javascriptby-referenceby-value.html" target="_blank" rel="noopener">談談 JavaScript 中 by reference 和 by value 的重要觀念</a></p>]]></content>
<summary type="html">
<p><img src="https://i.imgur.com/n9iFZz1.png" alt></p>
<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>今天的文章啟發於六角學院的Js學徒特訓班第三十七關，除了<code>var</code>宣告變數之外，我們也可以使用ES6的<code>let</code>和<code>const</code></p>
</summary>
<category term="JavaScript" scheme="https://yanennnnn.github.io/categories/javascript/"/>
<category term="JavaScript" scheme="https://yanennnnn.github.io/tags/JavaScript/"/>
<category term="ES6" scheme="https://yanennnnn.github.io/tags/ES6/"/>
</entry>
<entry>
<title>JS 趴趴走 - ES6 Fetch 應用</title>
<link href="https://yanennnnn.github.io/javascript/20200727/483210d8/"/>
<id>https://yanennnnn.github.io/javascript/20200727/483210d8/</id>
<published>2020-07-27T09:47:04.000Z</published>
<updated>2020-08-28T03:02:07.812Z</updated>
<content type="html"><![CDATA[<p><img src="https://i.imgur.com/n9iFZz1.png" alt></p><h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>最近參加了六角的js學徒特訓班，剛好需要抓取遠端資料，之前有嘗試過<code>XMLHttpRequest</code>和框架<code>axios</code>，這次來試試看如果使用Fetch是要怎麼抓取資料</p><a id="more"></a><h2 id="Fetch"><a href="#Fetch" class="headerlink" title="Fetch"></a>Fetch</h2><p><code>Fetch</code>和<code>XMLHttpRequest</code>一樣都是用來存取伺服器端的資料，以往使用<code>XMLHttpRequest</code>時會發現步驟很多</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 宣告一個XMLHttpRequest物件</span></span><br><span class="line"><span class="keyword">var</span> xhr = <span class="keyword">new</span> XMLHttpRequest(); </span><br><span class="line"><span class="comment">// 定義連線方式</span></span><br><span class="line">xhr.open(<span class="string">'get'</span>, <span class="string">'網址'</span>, <span class="literal">true</span>);</span><br><span class="line"><span class="comment">// 送出請求</span></span><br><span class="line">xhr.send();</span><br><span class="line"><span class="comment">// 如果成功就執行 </span></span><br><span class="line">xhr.onload=<span class="function"><span class="params">()</span>=></span><span class="built_in">console</span>.log(xhr.responseText); </span><br><span class="line"><span class="comment">// 失敗就 xhrError()</span></span><br><span class="line">xhr.onerror=<span class="function">(<span class="params">err</span>)=></span> <span class="built_in">console</span>.log(err);</span><br></pre></td></tr></table></figure><p>而Fetch就大大減少這些步驟，使用<code>Promise</code>的方式抓取資料，借用六角學院的api(感謝六角學院提供練習XD)</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">fetch(<span class="string">'https://raw.githubusercontent.com/hexschool/hexschoolNewbieJS/master/data.json'</span>)</span><br><span class="line"> .then(<span class="function">(<span class="params">res</span>)=></span> {</span><br><span class="line"> <span class="built_in">console</span>.log(res.json());</span><br><span class="line"> <span class="keyword">return</span> res.json(); <span class="comment">//透過json()方法獲取資訊</span></span><br><span class="line"> })</span><br><span class="line"> .then(<span class="function">(<span class="params">err</span>)=></span> {</span><br><span class="line"> <span class="built_in">console</span>.log(err);</span><br><span class="line"> });</span><br></pre></td></tr></table></figure><p>我們返回了<code>res.json()</code>獲取資料後，此時的資料得到的是<code>promise</code>對象，而我們所要的值就在<code>PromiseValue</code>裡面</p><figure class="highlight lua"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">[[PromiseStatus]]</span>: <span class="string">"fulfilled"</span> //實現（fulfilled）：表示操作成功完成。</span><br><span class="line"><span class="string">[[PromiseValue]]</span>: Array(<span class="number">221</span>)</span><br></pre></td></tr></table></figure><p>在Promise的文件中，<code>[[PromiseValue]]</code>是個內部變量，外部無法得到，只能在<code>then</code>中獲取。所以需要第二次的<code>then</code>來接收</p><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> url=<span class="string">'https://raw.githubusercontent.com/hexschool/hexschoolNewbieJS/master/data.json'</span>;</span><br><span class="line">fetch(url)</span><br><span class="line"> .then(<span class="function">(<span class="params">res</span>)=></span>{</span><br><span class="line"> <span class="keyword">return</span> res.json(); <span class="comment">//返回的的資料會傳到下一個then</span></span><br><span class="line">}).then(<span class="function">(<span class="params">data</span>)=></span>{</span><br><span class="line"> <span class="built_in">console</span>.log(data);</span><br><span class="line">}).catch(<span class="function"><span class="params">err</span>=></span>{</span><br><span class="line"> <span class="built_in">console</span>.log(err);</span><br><span class="line">})</span><br></pre></td></tr></table></figure><p>最後記得要加上<code>catch</code>(失敗導向)</p><h2 id="結論"><a href="#結論" class="headerlink" title="結論"></a>結論</h2><p>使用Fetch過後，真的比以往的XMLHttpRequest或jQuery AJAX來的簡潔，認為跟框架的axios有一點像；這次剛好只碰到GET，以後看有沒有機會學習到其他方法~</p><hr><h3 id="參考文獻"><a href="#參考文獻" class="headerlink" title="參考文獻"></a>參考文獻</h3><p><a href="https://ithelp.ithome.com.tw/articles/10194388" target="_blank" rel="noopener">ES6 Fetch 遠端資料方法</a><br><a href="https://www.itdaan.com/tw/36577774e82c253cffa236a9608d8aa4" target="_blank" rel="noopener">結合promise對原生fetch的兩個then用法理解</a><br><a href="https://www.oxxostudio.tw/articles/201908/js-fetch.html" target="_blank" rel="noopener">JavaScript Fetch API 使用教學</a></p>]]></content>
<summary type="html">
<p><img src="https://i.imgur.com/n9iFZz1.png" alt></p>
<h2 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h2><p>最近參加了六角的js學徒特訓班，剛好需要抓取遠端資料，之前有嘗試過<code>XMLHttpRequest</code>和框架<code>axios</code>，這次來試試看如果使用Fetch是要怎麼抓取資料</p>
</summary>
<category term="JavaScript" scheme="https://yanennnnn.github.io/categories/javascript/"/>
<category term="JavaScript" scheme="https://yanennnnn.github.io/tags/JavaScript/"/>
<category term="AJAX" scheme="https://yanennnnn.github.io/tags/AJAX/"/>
<category term="ES6" scheme="https://yanennnnn.github.io/tags/ES6/"/>
</entry>
</feed>