教到了JS event，非常實用的一堂課程，開始進入監聽階段，可以跟使用者互動，也慢慢建立UX的概念，讓我可以開始自行設計動態網頁，並且優化了第二個靜態網頁，加入了滾動變化的效果。


學習

職場產業

親子與教育

<div class="draft-block draft--p left">教到了JS event，非常實用的一堂課程，開始進入監聽階段，可以跟使用者互動，也慢慢建立UX的概念，讓我可以開始自行設計動態網頁，並且優化了第二個靜態網頁，加入了滾動變化的效果。</div>
<pre class="public-DraftStyleDefault-pre draft-block"><pre class="draft--code-block">let header = document.querySelector("header");</pre><pre class="draft--code-block">let headerAnchor = document.querySelectorAll("header nav ul li a")</pre><pre class="draft--code-block">window.addEventListener("scroll",() =&gt; {</pre><pre class="draft--code-block">if (window.pageYOffset != 0){</pre><pre class="draft--code-block">header.style.backgroundColor ="rgba(72,60,139,0.3";</pre><pre class="draft--code-block">header.style.color = "white";</pre><pre class="draft--code-block">headerAnchor.forEach(a =&gt; {</pre><pre class="draft--code-block">a.style.color = "white";</pre><pre class="draft--code-block">})</pre><pre class="draft--code-block">} else{</pre><pre class="draft--code-block">header.style.backgroundColor = "";</pre><pre class="draft--code-block">header.style.color = "";</pre><pre class="draft--code-block">headerAnchor.forEach(a =&gt; {</pre><pre class="draft--code-block">a.style.color = "#381b11";</pre><pre class="draft--code-block">})</pre><pre class="draft--code-block">}</pre><pre class="draft--code-block">})</pre></pre>

教到了JS event，非常實用的一堂課程，開始進入監聽階段，可以跟使用者互動，也慢慢建立UX的概念，讓我可以開始自行設計動態網頁，並且優化了第二個靜態網頁，加入了滾動變化的效果。
<pre><code>let header = document.querySelector("header");</code></pre>
<pre><code>let headerAnchor = document.querySelectorAll("header nav ul li a")</code></pre>
<pre><code>window.addEventListener("scroll",() =&gt; {</code></pre>
<pre><code>if (window.pageYOffset != 0){</code></pre>
<pre><code>header.style.backgroundColor ="rgba(72,60,139,0.3";</code></pre>
<pre><code>header.style.color = "white";</code></pre>
<pre><code>headerAnchor.forEach(a =&gt; {</code></pre>
<pre><code>a.style.color = "white";</code></pre>
<pre><code>})</code></pre>
<pre><code>} else{</code></pre>
<pre><code>header.style.backgroundColor = "";</code></pre>
<pre><code>header.style.color = "";</code></pre>
<pre><code>headerAnchor.forEach(a =&gt; {</code></pre>
<pre><code>a.style.color = "#381b11";</code></pre>
<pre><code>})</code></pre>
<pre><code>}</code></pre>
<pre><code>})</code></pre>

教到了JS event，非常實用的一堂課程，開始進入監聽階段，可以跟使用者互動，也慢慢建立UX的概念，讓我可以開始自行設計動態網頁，並且優化了第二個靜態網頁，加入了滾動變化的效果。

let header = document.querySelector("header");

let headerAnchor = document.querySelectorAll("header nav ul li a")

header.style.backgroundColor ="rgba(72,60,139,0.3";

自學網頁前端

從身邊最小的事物開始吧!
這是我學習完基礎JavaScript後第一個做成的Project，應該是每個前端都一定會做過的project，但對於自學的我非常有挑戰性，我需要訓練自己在短時間內熟悉JS event並且運用他做出我的第一個搭配大量JS程式碼的網頁作品。
