CodeLove 愛寫扣論壇 - 新手友善的程式設計討論區，歡迎參與討論！

🔍 搜尋結果：導覽列

JavaScript 系列三：練習6 ── dropdown 下拉式選單

## 課程目標認識並且能實做 dropdown 元件 ## 課程內容 dropdown 中文叫「下拉式選單」元件通常用在網站上方的「導覽列」，當導覽列有太多連結的時候，就可以分組、放進下拉式選單有人會做成點擊後展開選單，有人會做成滑鼠移上去就展開選單。兩種作法都很常見請上網搜尋 `dropdown menu javascript`，了解如何做到 ## 課後作業請使用 https://jsfiddle.net 假設正在幫一個創業的朋友，做官方介紹網站。需要實做一個導覽列，包含 - 首頁 - 全部商品 - 全部品牌 - 關於我們 -> 團隊介紹、企業宗旨、創業故事請將「關於我們」做成下拉式選單，點下去會顯示額外三個連結請稍微加一些 css 屬性，弄得漂亮一點做出以上功能，你就完成這次的課程目標了！

0個讚 12留言 263瀏覽

站長阿川 · 12月26日

自學網頁の嬰兒教材：第3課 ── 網格系統：頁面分區塊排個版

# 第3課課程目標能夠用 Bootstrap 的網格系統做出多欄式排版、各種排版。 # 第3課課程內容業界工程師會去使用 Bootstrap，除了美感之外，通常還有一大理由就是想用它的網格系統。以網頁設計常見的多欄式設計來說，手寫 html 跟 css 實在有點麻煩： [CSS DIV 兩欄式網頁排版](http://www.wibibi.com/info.php?tid=406) [CSS DIV 三欄式網頁排版設計](http://www.wibibi.com/info.php?tid=407) 所以來學習簡單好用的網格系統吧！請閱讀以下教學的內容： https://www.w3schools.com/bootstrap5/bootstrap_grid_basic.php https://www.w3schools.com/bootstrap5/bootstrap_grid_system.php https://www.w3schools.com/bootstrap5/bootstrap_grid_examples.php https://getbootstrap.com/docs/5.3/layout/grid/ 內容不用全部讀完，也不用全部讀懂，把其中的程式碼貼一貼，把玩一下，能做出基本的多欄式網頁佈局即可。 # 第3課作業繼續承接之前的作業。我們在前幾課做出了 Yahoo 的新聞頁以及導覽列，這一課的作業有兩個。 ## 作業一請繼續修改之前的作業，除了新聞內容與導覽列之外，請接著利用 Bootstrap 網格系統將整個頁面都做出來。請至少將側邊推薦其他新聞的區塊做出來，其餘的可以省略。 ## 作業二請再開一份 Glitch 專案，我們要做 Yahoo 新聞的首頁： https://tw.news.yahoo.com 我們要用 Yahoo 新聞首頁來練習多欄式排版。請利用 Bootstrap 網格系統，將整個首頁的排版都切出來。各個區塊的內容盡量省略、簡化，利用純文字或是 `<ul>、<li>` 清單元素，只放標題跟一些文字即可。完成以上兩份作業，你就完成這次的課程目標了！

0個讚 10留言 224瀏覽

站長阿川 · 12月26日

自學網頁の嬰兒教材：第2課 ── 導覽列：替訪客指點方向

# 第2課課程目標學會使用 Bootstrap 的 Navbar 元件。 # 第2課課程內容本課內容非常非常簡單，只要能在網頁上做出導覽列就可以了。請參考： https://www.w3schools.com/bootstrap5/bootstrap_navbar.php https://getbootstrap.com/docs/5.3/components/navbar/ 內容不用全部讀完，也不用全部讀懂，把其中的程式碼貼一貼，把玩一下，能做出一個最簡單的導覽列即可。 # 第2課作業上一課的作業，我們模仿 Yahoo 新聞的內容，做了一個簡單的新聞文章頁面。請繼續修改這份作業，將 Yahoo 新聞上方的導覽列做出來。你將會發現，使用 Bootstrap 能夠快速做出導覽列，比自己用手寫 html、css 方便且快速多了！完成這些，你就完成這次的課程目標了！

0個讚 10留言 228瀏覽

站長阿川 · 12月26日

自學網頁の嬰兒教材：第1課 ── 安裝：網頁突然好美美

# 第1課課程目標學會安裝 Bootstrap。 # 第1課課程內容第一課只要學會如何安裝 Bootstrap 就可以了。 Bootstrap 安裝好之後，瀏覽器預設的 h1, h2, h3, p 等等基本元素的樣式就會被覆蓋。會變成 Bootstrap 的預設樣式，會更漂亮。在網頁中引入 Bootstrap 的 css 與 js 檔的方式有很多，其中最簡單的是直接引入 BootstrapCDN 的線上檔案，連下載檔案都不用。請閱讀一些 Bootstrap 基本觀念： https://www.w3schools.com/bootstrap5/bootstrap_get_started.php https://www.w3schools.com/bootstrap5/bootstrap_typography.php 然後參考官網的 BootstrapCDN 段落： https://getbootstrap.com/docs/5.3/getting-started/download/ --- 對於引入外部檔案的觀念不熟悉的話，請參考這份的「External Style Sheet」段落： https://www.w3schools.com/css/css_howto.asp 以及這份的「JavaScript in External File」段落： https://www.tutorialspoint.com/javascript/javascript_placement.htm # 第1課作業請打開：[Yahoo奇摩新聞](https://tw.news.yahoo.com) 找一篇你喜歡的新聞，把新聞內容打出來。接著打開 [Glitch](https://glitch.com/)，用 Glitch 來寫這次的作業。只要打出文章標題與內容就好，上方的導覽列、旁邊的新聞頭條那些區塊都不用。做完之後，你會發現，雖然只用了 h1、p、br 等等基本元素，但是套用 Bootstrap 之後，整個畫面自動變漂亮了！完成這些，你就完成這次的課程目標了！

0個讚 10留言 376瀏覽

站長阿川 · 12月26日

自學網頁の嬰兒教材：第3課 ── 網頁排版

# 第3課課程目標學會使用div和span元素能夠做出漂亮的排版 # 第3課課程內容用jsfiddle來練習： https://jsfiddle.net 這次要寫HTML跟CSS兩個區塊請閱讀這份教材： [HTML Block and Inline Elements](http://www.w3schools.com/html/html_blocks.asp) 或是看中文版 [HTML 块](http://www.w3school.com.cn/html/html_blocks.asp) 接著開始學習版面配置： [學習 CSS 版面配置](http://zh-tw.learnlayout.com/) 把教學裡面的HTML、CSS程式碼，貼到 jsfiddle 裡面做練習，貼好之後按上面的 RUN 按鈕，就會在右下角的 Result 看到結果了。讀完、練習完這份教學裡面的程式碼，就算是學會基本的網頁排版了。 # 第3課作業在第1、2課的作業，我們將風傳媒的文章內容做了出來，但是略過了上方的導覽列、旁邊的熱門文章等等區塊。這次作業要延續那些作業，這次不只是文章內容，請將整個頁面都做出來。注意：本週作業內容繁重許多，請至少將上方的導覽列、旁邊的熱門文章推薦區塊做出來，其餘的可以省略。完成這些，你就完成這次的課程目標了！注意：有同學反應，jsfiddle的介面太窄，不方便排版如果您也覺得jsfiddle不好用，可改用 [Glitch](https://glitch.com/) 來練習。完成後請將您的 Glitch 專案發布，即可將網址分享出去。小技巧：您可以使用瀏覽器的開發者功能，觀察網站本身是怎麼寫的例如：Google Chrome 請對著元素按右鍵 -> 檢查多利用這個技巧觀察網站原始碼，對於學習本身很有幫助

0個讚 22留言 1,524瀏覽

站長阿川 · 12月26日

自學網頁の嬰兒教材：第1課 ── HTML 輕入門

2個讚 72留言 5,620瀏覽

Tony 精選技術文章 · 12月04日

開發 React 時，推薦使用這些 Best Practices

在開發 React App 時，遵循一些 best practices 會使您的程式碼品質提高，這篇文章列出一些給您參考。 - 原文出處：https://dev.to/iambilalriaz/react-best-practices-ege # 強烈推薦 VS Code 作為 IDE Visual Studio Code 有幾個超好用的 React 功能。強大的外掛生態系，對開發者大有幫助： - Prettier - ES Lint - JavaScript (ES6) code snippets - Reactjs code snippets - Auto import # 使用 ES6 語法程式碼越漂亮越好。在 JavaScript 中，採用 ES6 語法可以讓程式碼更簡潔。 ## Arrow Functions ``` // ES5 function getSum(a, b) { return a + b; } // ES6 const getSum = (a, b) => a + b; ``` ## Template Literal ``` // ES5 var name = "Bilal"; console.log("My name is " + name); // ES6 const name = "Bilal"; console.log(`My name is ${name}`); ``` ## const $ let const $ let 有各自的變數作用域。const 宣告的變數不能修改，let 宣告的變數可以修改。 ``` // ES5 var fruits = ["apple", "banana"]; // ES6 let fruits = ["apple", "banana"]; fruits.push("mango"); const workingHours = 8; ``` ## Object Destructuring ``` var person = { name: "John", age: 40, }; // ES5 var name = person.name; var age = person.age; // ES6 const { name, age } = person; ``` ## Defining Objects ``` var name = "John"; var age = 40; var designations = "Full Stack Developer"; var workingHours = 8; // ES5 var person = { name: name, age: age, designation: designation, workingHours: workingHours, }; // ES6 const person = { name, age, designation, workingHours }; ``` ES6 的語法特性、彈性，很多值得您一試。 # JSX 使用 map 時記得加上 key array map 時，永遠記得替每個元素加上獨立的 key 值。 ``` const students = [{id: 1, name: 'Bilal'}, {id: 2, name: 'Haris'}]; // in return function of component <ul> {students.map(({id, name}) => ( <li key={id}>{name}</li> ))} </ul>; ``` # 元件名稱使用 PascalCase ``` const helloText = () => <div>Hello</div>; // wrong const HelloText = () => <div>Hello</div>; // correct ``` # 變數和函數名稱使用 camelCase ``` const working_hours = 10; // bad approach const workingHours = 10; // good approach const get_sum = (a, b) => a + b; // bad approach const getSum = (a, b) => a + b; // good approach ``` # ID 和 css class 名稱使用 kebab-case ```  <div className="hello_word" id="hello_world">Hello World</div>  <div className="hello-word" id="hello-world">Hello World</div> ``` # 永遠要檢查物件＆陣列的 null & undefined 忘記檢查的話，常常會導致一堆錯誤。所以要保持檢查的習慣。 ``` const person = { name: "Haris", city: "Lahore", }; console.log("Age", person.age); // error console.log("Age", person.age ? person.age : 20); // correct console.log("Age", person.age ?? 20); //correct const oddNumbers = undefined; console.log(oddNumbers.length); // error console.log(oddNumbers.length ? oddNumbers.length : "Array is undefined"); // correct console.log(oddNumbers.length ?? "Array is undefined"); // correct ``` # 避免 Inline Styling Inline styling 會讓 jsx 程式碼變得很亂。用單獨的 css 文件拆分出來比較好。 ``` const text = <div style={{ fontWeight: "bold" }}>Happy Learing!</div>; // bad approach const text = <div className="learning-text">Happy Learing!</div>; // good approach ``` 在 .css 文件中： ``` .learning-text { font-weight: bold; } ``` # 避免 DOM 操作用 React state 為主，別用 DOM 操作糟糕做法： ``` <div id="error-msg">Please enter a valid value</div> ``` ``` document.getElementById("error-msg").visibility = visible; ``` 推薦做法： ``` const [isValid, setIsValid] = useState(false); <div hidden={isValid}>Please enter a valid value</div>; ``` 使用 isValid 來管理 UI 顯示邏輯。 # 在 useEffect 記得清乾淨每個事件監聽器加過的事件監聽器，都要記得清乾淨： ``` const printHello = () => console.log("HELLO"); useEffect(() => { document.addEventListener("click", printHello); return () => document.removeEventListener("click", printHello); }); ``` # 避免重複開發，多寫通用元件讓程式碼越乾淨越好。相似的東西可以寫通用元件。再根據 props 內容傳遞來處理相異處即可： ``` const Input=(props)=>{ const [inputValue, setInputValue]=useState(''); return( <label>{props.thing}</label> <input type='text' value={inputValue} onChange={(e)=>setInputValue(e.target.value)} /> ) } ``` 在其他元件中，就能這樣用： ``` <div> <Input thing="First Name" /> <Input thing="Second Name" /> </div> ``` # 檔案要分類一下相關檔案可以分類成一個資料夾。例如在 React 寫一個導覽列，那就可以開一個資料夾，相關的 .js 與 .css 檔案放裡面。 # 寫 functional components 為主簡單顯示一些東西、沒用到 state 的話，那寫 functional components 比寫 class components 好。如果你會寫 react hooks 的話，那就連 state 都完全不成問題。 # 養成編寫輔助函數的習慣有時你在 React App 中會需要一些通用功能。這種情況，可以開一個 `helper-functions.js` 檔案，在裡面寫輔助函數，就可以到處使用了。 ## 使用三元運算子代替 if/else if 使用 `if/else if` 語句會使程式碼變得龐大。使用三元運算子，就簡潔、清楚多了： ``` // Bad approach if (name === "Ali") { return 1; } else if (name === "Bilal") { return 2; } else { return 3; } // Good approach name === "Ali" ? 1 : name === "Bilal" ? 2 : 3; ``` # 新增 index.js 檔案，讓匯入元件更簡單如果你在 actions 資料夾中有一個 index.js 檔案，當你想在元件中導入時，會像這樣： ``` import { actionName } from "src/redux/actions"; ``` actions 後面的 index.js 可以省略不寫，就不用這樣囉唆了： ``` import { actionName } from "src/redux/actions/index"; ``` # Destructuring of Props 物件屬性名稱可以拆出來，後面用起來比較方便。假設你的元件有 `name`、`age` 和 `designation` 這些 props： ``` // Bad approach const Details = (props) => { return ( <div> <p>{props.name}</p> <p>{props.age}</p> <p>{props.designation}</p> </div> ); }; // Good approach const Details = ({ name, age, designation }) => { return ( <div> <p>{name}</p> <p>{age}</p> <p>{designation}</p> </div> ); }; ``` # 不要嘗試在同一函數中，去碰修改過的 state 變數在一個函數中，如果你正在為一個狀態變數賦值，在同一個函數中，是拿不到新值的 ``` const Message = () => { const [message, setMessage] = useState("Hello World"); const changeMessage = (messageText) => { setMessage("Happy Learning"); console.log(message); // It will print Hello World on console }; return <div>{message}</div>; }; ``` # 使用 === 運算子代替 == 在比較兩個值時，嚴格檢查變數型別比較好： ``` "2" == 2 ? true : false; // true "2" === 2 ? true : false; // false ``` --- 以上 Best Practices 供您參考，祝福您不斷變強！

0個讚 0留言 1,527瀏覽