一堆人的疑問!今天就來淺談前端工程師和後端工程師的差別!

-

一堆人的疑問!今天就來淺談前端工程師和後端工程師的差別!



前端工程師和後端工程師還是傻傻搞不清楚嗎?今天讓你一探究竟!

有許多接觸網頁開發的新手，或是想要轉行，成為網頁開發工程師的人，都會有這個疑問：什麼是前端工程師、什麼是後端工程師，以及他們到底是需要哪些語言或者是技術呢？今天就讓我們來簡單介紹一下。

前端工程師

網頁前端開發一般指的是我們看到的網頁，包括裡面靜態的介面、一些酷炫的動態效果，以及用戶的交互操作等。

網頁前端開發一般由那些技術構成呢？首先是 HTML 這個超文本標記語言，它主要用來展示一些文本，圖片，表格，連結等。

其次是CSS，它中文翻譯為層疊樣式表，CSS 不僅可以靜態地修飾網頁，還可以配合各種腳本語言動態地對網頁各元素進行格式化。

最後一門重要的技術叫做 JavaScript，一種直譯式腳本語言，常用來為網頁添加各式各樣的動態功能，為用戶提供更流暢美觀的瀏覽效果。

學習曲線：先易後難，也就是說入門比較簡單，但是後期深入就比較困難了！

後端工程師

網頁後端開發，一般就是指我們網站的伺服器程序，他們決定了我們網站的運行邏輯，業務核心，我們通過它來處理業務，操作資料庫（增刪改查等）
主要技術有：

Java ：Java 是一種跨平台的語言，它已經走過了 20 個年頭，見證了 PC 網際網路、移動網際網路、大數據、雲計算等網際網路浪潮，如今依然是使用最多最為廣泛的後端語言，這不僅是因為 Java 語言在發展過程中不斷的優化，更因為在發展的過程中不斷產生的優秀的框架，形成了一個龐大的java生態圈，全世界的軟體和網際網路公司絕大多數都是 Java 的用戶。Java 適合於開發大型的應用系統，應用的前景比較廣闊，系統易維護、可復用性較好。數學運算和資料庫訪問速度來講，Java 的性能也很優秀。實際上，Java 對於跨平台的大型企業之應用系統來講，幾乎已成為唯一選擇。

PHP：PHP 是一種解釋執行的腳本語言，語法和 C 語言類似，易學又易用。PHP 適合於快速開發一些中小型應用系統，開發成本較低，能夠對變動的需求作出快速的反應，也可以節省開發周期，幫助項目儘快上線試錯。一般剛開始創業的網際網路公司，更適合使用 PHP 開發。

GO：GO 語言由 Google 開發，其中負責人員包括了開發 Java 、UNIX 以及 C 語言的各個技術大牛，他們總結吸收了之前語言的一些優點並對缺點進行了改良，這樣出身的 GO 不得不讓人羨慕。近年來它也確實成為了開發市場的新寵，從語言排行上來看也是上升最快的語言。可以說未來是前途無限的。GO 語言現在也確實占有了一定量的後端市場，一些公司專門招人學習GO 並使用，但畢竟GO 在程式語言中還是個初生之犢，還有一段路要走。

學習曲線：Java 曲線較穩定，且業界需求量很高。PHP 相對 Java 較容易上手。而 GO 語言又更簡單些。



延伸閱讀：

前端工程師的字體單位世界原來一點都不複雜!(字體的絕對單位篇)

前端工程師的字體單位世界原來一點都不複雜!(字體的相對單位篇) 

前端工程師口中的"盒子模型",今天用兩篇讓你立馬了解!(上)

AI智慧帶你解析肥胖原因 Python課程帶你一步步成為AI大師

哈佛商業評論公布的這十位人工智慧領航者,讓AI有一個燦爛的開始

是什麼讓屈臣氏這麼強?UI課程帶你一窺小屈的秘密!

達內教育開幕　培養台灣IT人才進入全球企業

這個網誌中的熱門文章

前端工程師設定CSS背景的五種方法(一)背景固定模式設定

-
圖片
如何固定模式讓前端工程師教你!第一關讓你輕鬆過關,立馬進入狀況! CSS  background-attachment 決定背景圖片是否要跟著滑鼠滾動而上下移動，而它有三種不同的呈現方案： 第一種為當滑鼠上下滾動時，背景圖片與網頁主體跟著上下滾動 第二種為當滑鼠上下滾動時，背景圖片相對位置固定不動，呈現效果就像是網頁主體與背景是分開的 第三種為當滑鼠上下滾動時，背景圖片絕對位置固定不動，似乎網頁主體是浮在背景圖之上的感覺。 而 前端工程師 們通常會將CSS background-repeat 與  背景圖樣設定 (background-image)  搭配設計。 CSS background-attachment 基本語法如下： background-attachment: 顯示參數; 而另外，有三種可以使用的顯示參數，來決定背景圖與網頁主體該以何種方式來搭配顯示，分別為  scroll （預設值，背景圖案的「相對位置」不會隨著滾動機制而移動，而網頁主體則會跟著滾動）、 fixed （背景圖案的「絕對位置」不會隨著滾動機制而移動，而網頁主體則還是會跟著滾動，彷彿網頁主體是浮在整張背景圖之上的感覺。多用於網頁背景圖為滿版的場合時使用）、 local （背景圖案與網頁主體都會跟著滾動機制而滾動。以下是針對這三種參數的範例： CSS background-attachment 各種參數的範例 See the Pen background-attachment-example by Tedutw ( @Tedutw ) on CodePen . 現在新一代的網頁多採滿版設計，其中的「background-attachment: fixed;」參數，常被當代的 前端工程師 搭配「 background-repeat: no-repeat; 」參數使用，做出網頁主體都浮在高質感的背景圖的效果。 其他常用 CSS background 背景屬性說明連結 1. 背景顏色設定 (background-color) 2. 背景圖樣設定 (background-image) 3. 背景重複設定 (background-repeat) 4. 背景固定模式設定 (b
閱讀完整內容

前端工程師設定CSS背景的五種方法(五)設定背景顏色

-
圖片
設定背景顏色原來對前端工程師來說超必須!這篇文章讓你超容易入門! 使用背景顏色設定 (background-color)屬性， 前端工程師 可利用之，讓簡潔的純色背景襯托出網頁的主體，也可決定網頁的風格。像是背景純黑的網頁，與背景為粉紅色的網頁，風格就大不相同。其實 background-color 能夠使用的範圍除了網頁背景色外，也可以讓前端工程師用來設計表格、DIV 區塊、span 等網頁元素的背景顏色。   CSS background-color 基本語法如下： background-color: 顏色名稱或色碼 ; background-color 可以使用的顏色值包含顏色的英文名稱、十六進位制色碼以及 RGB 色碼，挑選顏色請參考： 網頁顏色代碼對照表 。 CSS background-color 語法範例一、網頁背景 html{background-color: 顏色名稱或色碼 ;} See the Pen background-color-bg-example by Tedutw ( @Tedutw ) on CodePen . CSS background-color 語法範例二、DIV 區塊、H1-H6 標題等斷落的背景顏色 div(可替換成 h1、p 等網頁元素標籤){background-color: 顏色名稱或色碼 ;} See the Pen background-color-div-example by Tedutw ( @Tedutw ) on CodePen . 同樣的技巧還可用在其他的網頁元素，若想採用圖片當成背景，請參閱： 2. 背景圖樣設定 (background-image) 。 其他常用 CSS background 背景屬性說明連結 1. 背景顏色設定 (background-color) 2. 背景圖樣設定 (background-image) 3. 背景重複設定 (background-repeat) 4. 背景固定模式設定 (background-attachment) 5. 背景圖片位置設定 (background-position) 延伸閱讀： 前端工程師設定CSS
閱讀完整內容

前端工程師入門HTML5就靠這些撇步!(8上)製作拖曳元素

-
圖片
可拖曳的HTML5元素怎麼做?今天讓我來大顯身手!下次你就能出風頭啦!\ HTML5 Drag & Drop API-讓元素變得可拖曳 你可能不知道，過去在網頁裡面實現 Drag & Drop 是很麻煩的！一定要配合 CSS、onmousedown、onmouseup、setInterval() 等，才能做出元件拖曳的視覺效果。但！現在各位有福啦！ HTML5 有直接的 Drag & Drop 機制，讓 前端工程師 可直接使用 drag and drop 的功能，讓使用者直接透過拖曳的方式，把要上傳的檔案拉到瀏覽器當中。 所有的 HTML 元素都可設成「可拖曳」的。要讓元素變得可以拖曳，只要在該元素的原始碼中加入 draggable 屬性，如下例 (讓圖片變得可以拖曳)： <img draggable="true" />   HTML5 Drag & Drop API 的範例 See the Pen HTML 5 Drag and Drop by Tedutw ( @Tedutw ) on CodePen . 讓元素可拖放-HTML的部分 除了<a>、<img>，其他 HTML 裡的元素本來是被預設為不可以作為源元素的，也就是說，我們本來是「拖不動」 它的。但在 HTML5 ，只要為它加上 draggable="true" 屬性，它就能「被拖曳」了。下面是上例的 HTML 碼的一部分： See the Pen HTML 5 Drag and Drop by Tedutw ( @Tedutw ) on CodePen . draggable 屬性上加了 draggable="true"，這樣就能讓這個 div 元素變成可以拖曳的 (至少在 Chrome 中可以)。但是我們還需要使用 Javascript 在 dragstart 裡為 dataTransfer 設置一些數據，因此需要加上下面的代碼。這樣可以確保它可以被拖曳。 See the Pen HTML 5 Drag and Drop-2 by Tedutw ( @Tedutw ) on CodePen
閱讀完整內容