Weekly Report #4
如何使用JavaScript綁定網頁事件 ｜如何使用ATLASSIAN來設計專案團隊架構｜如何分析一首EDM歌曲的段落
Weekly Report is a project that I share my discovering and learning that week.
1.如何使用JavaScript綁定網頁事件
在開始使用JavaScript(JS)綁定網頁事件之前，我們必須要先了解網頁的組成方式，我們現在使用Chrome、Edge瀏覽器所看到的網頁內容，背後其實是一份HTML文件，當我們在頁面點擊右鍵使用「檢查」時，可以看到HTML上有許多的元素，如標籤、文字等。
這些元素就是DOM(Document Object Model)，也就是把一份 HTML 文件內的各個標籤，包括文字、圖片等等都定義成物件，而這些物件最終會形成一個樹狀結構。
在DOM中會包含四個層次：Document、Element、Text、Attribute。
Document就是指整份HTML的文件，Element也就是只HTML上的各種標籤，如<div>、<p>等標籤，Text就是HTML上的內容，也就是我們網頁上看到的資訊，通常會用Element的方式把他們包起來，形成一個區塊(Block)，方便日後針對該區塊去處理內容在網頁上的呈現方式，Attribute則是屬性，可以給定群組、Id、字型、顏色等去套用HTML內容。
當我們理解肉眼可視的網頁背後組成原理後，就可以使用JS來針對DOM元素上的各種物件來做綁定，例如在Weekly Report #3有提到的，如何「如何使用JavaScript製作出一個簡單的計算功能」，就是透過綁定DOM元素的方式來控制網頁上的內容表現。
在JS中有幾個可以去監聽DOM元素的方式，例如onclick、addEventListner等這邊就針對我比較常用的addEventListner做說明。
首先我們觀察一下下方範例網頁的內容，如果用上述的概念，他可以被我們切成三個區塊，裡面各自有包含他有要呈現的內容。
接著我們可以針對區塊二的「輸入框」給定一個Id屬性，而區塊三的「計算中」則是樣當我們收到顧客所輸入的內容後，顧客點擊該按鈕時，才會「觸發程式計算」，並將計算的內容顯示在「總計」上。
當我們建立好這樣的設計思路：
- 用戶輸入
- 收到用戶輸入訊息
- 程式計算訊息內容
- 將計算結果顯示頁面上
就可以開始規劃我的綁定JS事件，這邊我們使用addEventListner的方式，去監聽顧客是否有輸入數量後，有去點擊「計算中」按鈕，如果有點擊，則讓執行程式碼計算與結果顯示的工作。
2.如何使用ATLASSIAN來設計專案團隊架構
在《Weekly Report #3》中有和大家分享導入JIRA前需要注意事項有包含「團隊組織人數」、「環境部屬方式」與「訂閱產品的類別與使用人數」後，我們就會需要進一步思考如何在ATLASSIAN環境中管理組織活動，根據ATLASSIAN Admin所採用的ATLASSIAN版本，可以劃分為單一組織的設計架構與多事業群(Business Unit, BU)的設計架構模式。
單一組織的設計架構
假設今天ATLASSIAN Admin在盤點組織的需求後理解到，目前組織所購買的ATLASSIAN版本為Standard或Premium，並需要訂閱Jira Software與Confluence兩項產品，這時ATLASSIAN Admin可以初步畫出以下的管理架構。
最上層為ATLASSIAN環境，但由於我們所購買的版本只會提供一個Site，因此不會有跨事業群(Business Unit, BU)的情況發生，因此只需要評估這兩個訂閱產品的User License即可，當我們確認好Jira Software與Confluence兩項產品的User License後，就可以在根據上方的設計架構往下延伸。
在實務ATLASSIAN Admin可能會遇到不同的產品團隊，都會需要使用JIRA來管理專案，ATLASSIAN Admin可以透過在該產品的環境中，以建立Project的方式來管理，並且透過Role的方式來派使用者權限。
舉例來說，今天有一個A產品團隊向你提出申請JIRA權限外，需要使用Confluence，B產品團隊只要使用JIRA即可，此時ATLASSIAN Admin可以先在JIRA中分別開立A產品團隊與B產品團隊兩個Project，而在A產品團隊中，小明與阿花都是在A產品團隊的成員，而小明又是專案負責人，此時ATLASSIAN Admin就可以指派在JIRA環境下的A Project中，同時納入小明與阿花，並根據JIRA Role的權限設定，把小明設定為JIRA Admin。
多事業群的設計架構
假設今天ATLASSIAN Admin所在的組織有多個事業群都會需要使用ATLASSIAN環境，且各事業群的資料不能互相分享，此時可能會需要考慮採用ATLASSIAN多事業群的設計架構，如果是該種情境，ATLASSIAN環版本為Enterprise，並擁有兩個Site，一個Site可以給A事業群使用，一個給B事業群使用，而各自的事業群可以依照自身需求來決定要訂閱哪些產品。
當ATLASSIAN Admin確認多事業群的管理架構後，就可以回到「單一組織的設計架構」分別為A事業群與B事業群的Site來設定底下的產品環境與專案團隊成員。
總結一下，這兩週我們與大家分享了當企業要導入ATLASSIAN旗下的JIRA產品時，除了要考慮JIRA產品的使用人數外，還要思考以下三件事情：組團隊組織人數、ATLASSIAN環境部屬方式、ATLASSIAN旗下所訂閱產品之User License。
上述這些注意事項，是身為一位ATLASSIAN Admin在收集需求時所要注意，此外根據所購買的ATLASSIAN版本不同，其設計的管理架構模式也會不一樣，若是在單一組織的架構下，需要考慮使用者權限設計與分派的問題，若是在多BU的情況下，則會需要考慮各個事業群間，彼此資料是否能共享等問題。
3.如何分析一首EDM歌曲的段落
在《Weekly Report #3》中有和大家聊到關於DJ在接歌時會經歷的步驟，然而當Ａ歌曲在播放時，我們應該要在A歌曲的哪個段落把B歌曲給丟出來呢？
這個時候我們就必須要先分析A歌曲的架構，然後根據不同的段落增設「Cue點」做標注，這樣下次就知道當A歌曲播放時，要在哪一個時間把B歌曲丟出來。
首先我們必須先瞭解一首EDM歌曲的段落設計，一首典型的EDM歌曲會包含Intro、Breakdown、Build up、Drop、Outro，翻成中文就是：前奏、主歌、Build up、副歌、尾奏，Build up這邊不做翻譯的原因在於它是屬於主歌要再進入副歌之前，會有一個4小節疊加情緒的階段，當進入副歌時會有種情緒釋放的感覺。
而以一首3分鐘的歌曲為例，通常會包含一個Intro、二個Breakdown、二個Build up、二個Drop、一個Outtro。
當我們掌握EDM的設計架構後，就可以使用rekordbox軟體來輔助我們分析，rekordbox是一款DJ在放歌時會使用的軟體，和他相似的軟體有Serato、Traktor等。
我們先將歌曲匯入至rekordbox軟體之中，他會幫助我們分析該歌曲的BPM(速度)、Key(調性)、Gerne(曲風)等，還能幫助分析這首歌曲的頻譜。
可以看到上方的頻譜分析結果顏色有深有淺，一般來說淺色部分代表該歌曲在此段落的組成元素沒有這麼多元，例如可能只有大鼓、小鼓等，若是深色的地方該段落的算成元素可能就比較多，例如加入了Vocal(人聲)、和聲(Pad)等，這時後也能慢慢聽出這首歌曲的旋律，再搭配剛剛我們所掌握的EDM歌曲設計概念，就能清楚的劃分上方歌曲段落。
當然不是每一首EDM的歌曲都依定會遵行這樣的設計架構，可能會根據Producer(音樂製作人)的喜好會在歌曲中增添一些不一樣的元素，但大部分80％以上的EDM歌曲都是這樣來進行設計。
下次有機會參加音樂節或在逛街聽到EDM的歌曲時，不妨考考自己，該歌曲是處於哪一個段落，並聽聽看能不能聽出該段落的組成元素與整首歌的設計段落是否符合胃口等，相信大家對於EDM歌曲會有重新的一番認識。
