Java課程是為了今日．Python課程是為了將來

前端工程師網頁開發必學Emmet!

微痛轉職前端工程師?不必擔心,這麼做就對了!

前端工程師 會點後端技能,求職大加分!
對前端工程師來說，MySQL 是後端工程師的技能。可是如果前端工程師也懂 MySQL ，不論是求職上會有很大的幫助。
因為在人力銀行網站搜尋前端工程師的職缺，會發現有些公司會把 MySQL 列為前端工程師的必備技能。通常 (非全部) 擁有 MySQL 技能的前端工程師獲得高薪的機會較大。多一項能力，調薪的籌碼就越大。

推薦閱讀：前端工程師的學習路線圖整理

我們就直接切入基礎的 ＭySQL教學 ！本篇先來簡介一下資料庫 4 大基要語句，他們分別是定義資料庫的 DDL (Data Definition Language)、操作資料庫的 DML (Data Manipulation Language)、控制資料庫的 DQL (Data Control Language) 與查詢資料用的 DCL (Data Query Language)。簡介如下：
資料庫定義語言 - DDL (Data Definition Language)
定義資料庫的結構，常見語句有 CREATE、DROP、ALTER。
DROP
丟棄或刪除資料庫。寫法如下：
刪除一個「已經確定存在」的資料庫：
DROP DATABASE 資料庫名稱;
範例：
DROP DATABASE xz;
刪除一個「不確定是否存在」的資料庫：
DROP DATABASE 資料庫名稱;
範例一. 在不確定名為「xz」的資料庫是否存在的狀況下，刪除 xz 資料庫：
DROP DATABASE IF EXISTS xz;

▲ 在命令提示字元使用 MySQL 的 DROP DATABASE 語法

CREATE
創建資料庫或表格。寫法為：
CREATE DATABASE 資料庫/表格名稱;
範例一、創建名為 "xz" 的資料庫：
CREATE DATABASE xz;
範例二、創建名為「FrontEndElements (網頁元素)」的表格，表格有兩個欄目，分別為「element(元素)」、「usage(用途)」；又令「element」的內容限制為 10 個字元、「usage(用途)」則為 32 字元，代碼如下所示：
CREATE TABLE FrontEndElements(`element` VARCHAR(10),`usage` VARCHAR(32));
註：MySQL 本身內建一些具有特定功能的保留字，這些保留字中包含「usage」，與我們欲建的欄目名稱同名，會令 MySQL 混淆導致無法建表 (如下圖)。

▲ 在命令提示字元使用 MySQL 創建的欄目名稱「usage」與保留字重複，而導致無法建表。

為了區分，因此加了反引號，為「`usage`」。
其實 MySQL 的保留字很多，前端工程師不可能每個都記熟。所以寧可在每次創建表格時，都在欄目名稱的左右側加上反引號。如下圖所示：

▲ 在命令提示字元使用 MySQL 創建名為「FrontEndElements (網頁元素)」的表格，表格有兩個欄目，分別為「element(元素)」、「usage(用途)」；又令「element」的內容限制為 10 個字元、「usage(用途)」則為 32 字元

資料庫操作語言 - DML (Data Manipulation Language)
INSERT
新增資料到資料表中。寫法如下：
INSERT INTO 資料表名稱 VALUE('值一','值二');
範例、今天要新增 4 個內容到上述的 "FrontEndElements" 表中，對應的欄目分別為'element'、'usage'：
INSERT INTO FrontEndElements VALUE('HTML','管理網頁的架構');
INSERT INTO FrontEndElements VALUE('CSS','管理網頁的外貌');
INSERT INTO FrontEndElements VALUE('JavaScript','管理網頁的內容以及使用者的操作行為、互動');
INSERT INTO FrontEndElements VALUE('MySQL','資料庫');

▲ 在命令提示字元使用 MySQL 創建 4 個內容，內容的值對應到兩個表格欄目「element(元素)」、「usage(用途)」。

下圖為從 MySQL 叫出表格「FrontEndElements」的所有內容。指令稍後在本文 DQL 段落會講解。

▲ 在命令提示字元使用 MySQL 觀看 FrontEndElements 表中所有內容

UPDATE
更改資料到資料表中。寫法如下：
UPDATE 資料表名稱 SET 欄位名稱='更新後的內容' WHERE 條件敘述;
範例、今天將上述的表格中，'JavaScript' 的 'usage' 修改為 '管理網頁的互動與動態內容'。如下所示：
UPDATE FrontEndElements SET `usage`='管理網頁的互動與動態內容' WHERE element='JavaScript';

▲ 在命令提示字元使用 MySQL 將「JavaScript」的 `usage`欄目中，內容改為 '管理網頁的互動與動態內容'。

DELETE
刪除資料表中的資料。寫法如下：
DELETE FROM 資料表名稱 WHERE 條件敘述;
範例、今天將上述的表格的 'SQL' 刪掉，寫法如下所示：
DELETE FROM FrontEndElements WHERE element='SQL';

▲ 在命令提示字元使用 MySQL 將名稱為「MySQL」的 整欄刪除。

資料庫查詢語言 - DQL (Data Query Language)
查詢資料使用，不會對資料產生任何更動的語句。指令只有一種：
SELECT
撈出表中的資料，例如我們要撈出上述表格的所有內容，寫法如下：
SELECT * FROM FrontEndElements;

▲ 在命令提示字元使用 MySQL 觀看 FrontEndElements 表中所有內容

資料庫控制語言 - DCL (Data Control Language)
控制用戶權限，例如把某個電商網站的管理權、上架權等不同層級的權限，分派給不同的員工。
GRANT
授予權限
REVOKE
收回權限
上述的 ＭySQL教學 語句種類，前端工程師只須看得懂 DDL、DML 與 DQL 就好。下一篇文章會講述 MySQL 中文亂碼的解決方式。請想提升技能的前端工程師多多關注我們的知識庫！
相關文章:

Facebook 開源 Python 語言的安全與隱私工具 Pysa

人工智慧又寫歌了！這次是跟重金屬天團 Metallica 致敬

暴躁老人唱情歌、憂鬱阿嬤笑了！4個翻轉家庭的人工智慧 讓家更溫暖

人工智慧貓砂盆 - 因愛貓腎病過世 工程師研發預防性貓用醫療品


有人工智慧在,取名不再是個大難題!

Java課程提升自我,不靠學歷,就靠實力!

他做到了!就憑短期Python課程,他成功成為醫院網站工程師!?

前端工程師CSS定位元素Positioning Elements,快來吧!
為了要設計更加繁複的網頁前端版面，前端工程師都需要知道 CSS 全部的「position 屬性」。如下所示，它有非常多屬性值，這些屬性值不好理解且也不好記憶，但稍一設定不好，就會讓許多 CSS 區塊若入走鐘、重疊等窘境。這些屬性一個個介紹如下，也建議各位想當前端工程師的學員們把這頁加入網頁書籤中，以便日後方便查詢。
See the Pen CSS:Position 範例 by Tedutw (@Tedutw) on CodePen.
CSS：Positioning Elements 定位元素
CSS 定位屬性（positioning properties）是用來定位元素使用。它可將一個元素置於另一個元素之後，還可以指定當某個元素的內容太大時該如何做。 所有的元素都可用 top（上）、bottom（下）、left（左） 與 right（右） 屬性來定位。但若沒事先將「定位屬性」設置好的話，以上四種屬性（top、bottom、left 與 right）皆不起作用。它們亦會依照定位方法的不同，而以不同的方式呈現。
靜態定位（position: fixed）
「靜態定位（position: fixed）」是所有 HTML 元素的預設值。當元素為「靜態定位（position: fixed）」時，會遵循「Normal flow （指從左到右、上到下的常態佈局）」來排列。 靜態定位的元素不受 top、bottom、left 與 right 屬性的影響。如下例，儘管我們 CSS 設定為「top: 30px;right: 5px;」（上方距離30px、右側距離50px），被靜態定位的 HTML 元素，排版仍不受這些 CSS 影響。
See the Pen position_static by Tedutw (@Tedutw) on CodePen.
固定定位（position:fixed）
固定定位（position: fixed）的元素會相對於瀏覽器視窗來定位，這意味著即便頁面捲動，它還是會固定在相同的位置。 不同於靜態定位，固定定位（position: fixed）的元素可由 top、bottom、left 與 right 屬性的來指定位置。我們將上一段「靜態定位（position: fixed）」的範例，其中的 CSS 「position:static」改為「position:fixed」，則排版受到「top: 30px;right: 5px;」（上方距離30px、右側距離50px）的屬性影響，如下所示：
See the Pen position_fixed by Tedutw (@Tedutw) on CodePen.
固定定位（position: fixed）的元素會從「Normal flow （從左到右、上到下的排列）」的常態佈局中移除。所以其他未設定為「固定定位（position: fixed）」的元素，仍然依照「左到右、上到下」的排列，彷彿其中不存在固定定位的元素般。而 固定定位的元素可與其他的元素重疊。
相對定位（position:relative）
所謂的「相對」，是以原本正常的位置為中心點，依照元素偏移原本位置多少而定數值。相對定位（position:relative）的元素可以結合 top、bottom、left、right 等屬性，使其元素「相對地」偏移原本該出現的位置。 如以下的例子，我們在原本的位置安插粉紅色背景的文字（文字為「相對定位」）區塊，並且設定該區塊相對於原本該出現的區塊「上方留空間 5px（top: 5px;）、 左方留空間 5px（left: 5px;）」。
See the Pen position_relative by Tedutw (@Tedutw) on CodePen.
相對位置的元素內容可移動到指定位置、也可以與其他的元素重疊。但是該元素原本該出現的正常位置，會被保留而不會消失。 相對值不能用於 table cells、columns、column groups、rows、row groups 或是 captions。
絕對定位（position:absolute）
不得不說，絕對定位（position:absolute）是網頁前端比較弔詭的定位屬性。absolute 與 relative 的行為很像，不一樣的地方在於 absolute 元素的定位是相對於父層元素的位置、relative 元素則是相對於他本該出現的位置。 當元素的 position 設定為 absolute 後，它就會看它父層的元素是否有被設定為 relative、absolute 或是 fixed，若有，則以父元素為定位的基準點；若無，則以該網頁頁面("body")的左上角為定位點置，看起來就是這張網頁的絕對位置一樣。 以下範例為兩個絕對定位（position:absolute）元素的範例，右上方的元素的父元素 position 沒有設定，因此被默認為「static」——也就是不屬於 relative、absolute、fixed 或是 inherit 的任一個，因此該元素會以整個網頁區域為定位點，從最上方往下移動 30 px、從最右方往左移動 30 px；而另一個元素的父元素 position 是 relative，因此會以父元素為定位點，從最上方往下移動 30 px、從最右方往左移動 30 px。
See the Pen position: absolute by Tedutw (@Tedutw) on CodePen.
同學們可以點擊以上範例中左上角的「HTML」與「CSS」按鈕來練習 coding。
所有的 CSS 版面配置：Positioning Elements 定位元素介紹到此結束。光看以上的解釋，會容易搞混。此時，不妨回到此章節的最前面的範例，點擊範例框左上角的「HTML 」與「CSS」按鈕來研究原始碼，並且親自練習一次這些 CSS 碼，試試各種不同的 position 屬性所呈現的效果。未來想要成為前端工程師的話，就請多練習幾遍。本系列「前端工程師課程」下一章即將介紹網頁 layout 基石之一——浮動（float）屬性。
相關文章:
AI人工智慧救地球！Google：AI 保護環境還比人類快 3000 倍
CSS教學-display與visible屬性介紹
用Python寫出唐鳳「番茄鐘工作法」程式，讓AI幫你集中注意力!
AI機器狗Aibo成最新愛寵 真狗會被取代嗎？
零基礎學習網站前端So Easy!
前端,後端,全端工程師傻傻分不清?
前端工程師Javascript入門磚-22數學物件

前端,後端,全端工程師傻傻分不清?
一、前端方向
 

網站前端是什麼?準備轉行的朋友看過來!
由於網路前端是一個薪資前景好的熱門行業，吸引很多朋友想轉行網站前端技術。但是對於剛剛準備轉行的朋友來說並不知道網站前端是什麼?零基礎怎麼學習Web?下面就來和小編一起看一看文章內容吧~  

前端工程師跟後端,全站不一樣?看完這篇秒懂差在哪!

從零自學成為前端工程師必看