# 2019/0221/前端Javascript musicplay、內聚力耦合率 ## JS物件事件撰寫模式應用層式串API 啟動USER電腦的作業系統控制他的硬體 ### 提升內聚力 #### (同一個FUNCTION裡面所有程式碼都要有關聯) ### 降低耦合力 #### (功能模組跟功能模組間不能有太大牽連，改1不能動到2，頂多A的值到B使用) 簡單來講複雜麻煩就要簡化使用者操作介面 stop = pause load pause = pause Webdings 動態產生時無法加onClick 或想要將js跟html切開變數故意數名跟屬性名稱相同事件監聽器(EventListener) -> click ``` play.addEventListener("click", PlayMusic) ``` marquee html 跑馬燈tag ## ## function 自訂功能函式/名稱/ (自訂變數/參數/){ /功能函式/ } 值被改變事件是 change 沒有提示字不代表沒那個功能還是要上w3c查前端偵錯 f12 console 紅字結構化程式設計很多時候是少功能或少切換中的細小功能而不是程式碼錯誤，因為電腦很笨只會一步一步來。 innertext {% embed url="" %} 抓值做判斷 ## 寫程式=堆積木=越多越高=減少積木但不倒 ### 第一次內聚力太低 ```

4 ; <

請按播放鈕~~~~~

``` ### 第二次耦合率太大 ```

4 <

請按播放鈕~~~~~

``` --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://johch3n611u.gitbook.io/c50108/ju-li-cheng-bei/201902/20190221-qian-duan-jsmusicplay.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.