# Frontend 入門 ## 軟體工程師工作內容 | 職位 | 工作內容 | 開發語言/技術 | |:--- |:----- |:-------- | | 前端 | 負責網頁的介面部分/API串接/RWD/Git版本控制 | HTML/CSS/JavaScript/React/Vue/Angular| | 後端 | 負責開發伺服器端的應用程式/資料庫(database)操作/根據前端要求回傳資料/SQL/API串接 | Ruby/PHP/Java/NodeJS(JS語法)/Python/Go | | Mobile | 開發 App |Java(Android)、Swift(ios)、Kotlin(Android&ios) | | Infrastructure(資訊系統的基礎架構)| 目標都是把某個面向或所有面向的基礎架構處理好，讓執行於其上的系統可以順暢的運行 | | 其他語言：C/C++、C# 非常難學，因為靠近電腦底層，除了語法外，對電腦知識需要有很深的了解，例如如何處理記憶體 HTML 架構 ---- - ++HTML 有點像是人的骨架++，告訴瀏覽器網頁上有哪些標題，標題放在哪裡，圖片在哪裡等。 - ==HTML是一種**標記語言**，而非程式語言== 主要的作用是告訴瀏覽器「網頁應該要有哪些**元素**」，可以想像網頁就像一頁文件，而文件內會有標題、內文、圖片、頁尾等元素。 - 元素 不同的元素，會用標籤 <> 標示出來，例如標題 `<h1>` 、網頁內容 `<body>`、圖片 `<img>` 等。大部分標籤會有開頭、結尾，讓網頁知道所謂的“標題”內的文字有哪些。這時候會像這樣標示： - `<h1>我是標題<h1>` - `<button>我是一顆按鈕</button>` - `<img src="https://i.imgur.com/P8U0L2O.jpg" alt="替代文字">` 圖片標籤 `<img>` 可以看到裡面包含了 `src` 和 `alt` 這些都是這個標籤的「**屬性**」；每個標籤都有提供不同的**屬性**，讓這個標籤的資訊能夠更完整 CSS (外觀) --- - ==CSS是一種風格頁面語言（style sheet language）== - ++CSS 則像是為這個人穿上衣服++ 可以透過 CSS 自訂網頁字體樣式、顏色，網頁排版橫排、直排、動畫等，除此之外，CSS 最主要還能製作成 RWD (Responsive Web Design) - CSS的語法就是 tag { property: value; property: value; }這樣的寫法，property就是顏色、字體大小、位置等等的，根據文件可以知道哪個設計要用哪個property去寫，就是CSS特有的語法， ![](https://i.imgur.com/RbFNSb8.png) >不需要JS，HTML & CSS 就可以做到的畫面: [You don't need JavaScript](https://github.com/you-dont-need/You-Dont-Need-JavaScript) JavaScript 架構 --- - ==JavaScript (簡稱 JS) 是一個簡單、以物件為基礎的腳本語言== ++JavaScript 就像是人的「神經系統」++ 透過 JavaScript 讓網頁骨架移動、改變樣式、獲取資料( API 串接)、讓使用者和你的網站互動(像是讓他們輸入文字後顯示正確或錯誤的提示)等 - JavaScript 例子： - 輸入程式碼，讓網頁跳出訊息，為 JavaScript 提供的方法之一 : [JS示範](https://jsbin.com/bibabiqugo/edit?js,output) - JS是網頁中負責處理使用者互動等事件的部分，JS可以使畫面動起來，比如輸入使用者名稱後網頁就會執行登入事件，這就是靠JS完成；只有HTML、CSS的話，只是靜態的畫面，加入即使輸入使用者名稱點登入按鈕，也不會發生任何事。 - JavaScript 的延伸，解決了JS本身的某些問題、優化開發、維護效率 JS前端框架 - React 、 Vue.js 、 Angular 函式庫 - jQuery 網頁開發者工具 -- - 對網頁畫面按右鍵>檢查 or 按F12，會看到這個畫面： - <> 為目前所在網頁的html - Styles 為目前所在網頁的CSS ![](https://i.imgur.com/ISSpQPb.png) Resource --- - [w3schools-css](https://www.w3schools.com/css/css_syntax.asp) - [freeCodeCamp](https://www.freecodecamp.org/learn/front-end-development-libraries/)