零基礎也想成為前端工程師?那你一定要知道這”三大”內容!

零基礎也想成為前端工程師?那你一定要知道這"三大"內容!
零基礎也想成為前端工程師?那你一定要知道這”三大”內容!

想要當前端工程師,一點也不難,首先要先知道最重要的前端三大內容!

今天小編要跟大家分享的文章是關於零基礎如何自學成前端工程師。目前網路發展迅速,前端也成為很重要的崗位之一,前端開發是屬於很簡單的程式設計,甚至都不能叫做程式設計,因為它真的很簡單,有很多想要轉行進入 IT 行業的新手會選擇當前端工程師。那該怎麼自學?以下就來和小編一起來看一看文章吧~首先我們學習前端,得要知道前端的三個大內容,HTMLCSSJavaScript,其中 HTML5 CSS 是相互結合著學習,掌握了這兩個了以後我們就算真正入門了,然後再深入學習 JavaScript 等等。

一、首先我們要了解 HTMLCSSJavaScript 分別是什麼?

HTML 就相當於一個人,CSS 相當於一個人穿著的衣服,JavaScript相當於讓這個人做什麼動作,這樣一形容呢,我們就很好理解了,這個人就是網站,需要有 header 頭,body 身體,footer 腳……而網站所呈現給我們各種各樣的樣子就是我們寫的 CSS 樣式,網站裡的動態效果就都是我們的 JavaScript 去實現的。

二、零基礎學前端工程師會很難學嗎?

想知道前端工程師技術難不難學的新手可以跟著下面的步驟一起來設計製造一個專屬的網頁,相信你就會知道。我們用到的軟件呢,對於入門級來說我們一般推薦大家用 DreamWeaver,新建一個 HTML 後,出現的界面是這樣的,

以下我們開始輸入原始碼,我們可以看到這裡有這樣的原始碼<body></body>,這個就是我們網頁的身體,我們接下來要輸入的內容都是在這中間輸入的,這個括號表示的標籤,標籤都是一前一後的,成對兒出現的,除了一些特殊的標籤,隨後我們再一一給大家講解。現在我們輸入點內容,看看效果。

我們輸入一個標籤<div><div>,點擊右上角的地球瀏覽一下,會發現彈出了一個空網頁,什麼也沒有,那是因為我們現在只書寫了HTML,還沒有寫CSS,簡單來說就是,我們創建了一個東西在頁面裡,但是還沒有設置這個東西長什麼樣子,現在我們在設置它的樣子,

CSS”>
1、我們為了給這個 div 設置樣式,所有先給它起個名字不然,電腦不知道我們要給誰加樣式,class=”aaa” 的意思是起名為aaa

2、在<head></head>裡寫入這樣一組標籤<style></style>這個style的意思就是CSS,我們整個網站要加的所有樣式都是寫在這個中間的。

3、我們在style裡寫樣式,電腦首先要知道我們給誰加樣式,所有我們寫個.aaa 這個.(點)的意思是我要給aaa加樣式,電腦會自動把.(點)後面的名字,跟下面body裡的名字做一個匹配,這樣電腦就知道,哦~原來你是要給這個div加樣式呀,

4、然後我們把要給這個div加的樣式寫在大括號裡,Width:100px; 意思是這個div的寬是100像素,height:100px; 意思是高是100像素,background-color:#FF0000;意思是背景顏色是#FF0000這個顏色,

注意:

(1)這裡我要給大家解釋一下,大家別看這麼多原始碼,這麼多專有名詞,其實軟件有提示,像下面這樣,直接輸入第一個字母後面的專有名詞就出現了,直接選中就行了,連專有名詞都不用背,前端真的很簡單,

輸入 W 和輸入 h,會自動彈出名詞下拉選單

(2)每一個專有名詞都有提示,說到這裡,不會英語的同學就不要給自己找藉口說英語不好,學不會程式設計了。雖然說很簡單,但是要想真真的把前端學好是需要下功夫的,主要就是要堅持。

下面我們繼續設置好了以後,我們就可以在 Dreamweaver 狀態列中按一下「即時預覽」。若你看到了紅色正方形的畫面,那恭喜你,你成功了!

 

 

 

 

 

 

推薦文章:
SEO無痛該怎麼做?資深前端工程師教你對的方法!


頂尖前端工程師必備技能之一-掌握RWD基礎概念


工作太累想當前端工程師爽爽賺?以下SOP可不要錯過了!


連麥當勞也加入了人工智慧的戰場?


Python是什麼?可以吃嗎?


還在為成為專業IT人煩惱?!選對Java課程讓你輕鬆到位!


暑假快到了!與其讓兒子盲目拚學測,我寧可讓他先選擇人生方向~

資深前端工程師之Emmet教學(4)-設定顯示文字與屬性值

資深前端工程師之Emmet教學(4)-設定顯示文字與屬性值
資深前端工程師之Emmet教學(4)-設定顯示文字與屬性值

身為前端工程師的你,知道如何用Emmet輕鬆設定顯示文字跟自訂屬性值嗎?

前端工程師必備「Emmet」基礎教學目錄:

  1. 如何使用 Emmet 快速產生 HTML 標籤名稱
  2. 如何使用 Emmet 快速產生 階層
  3. 如何使用 Emmet 複製元素與設定流水編號
  4. 如何使用 Emmet 快速設定顯示文字與自訂屬性值

顯示文字

使用 Emmet 能讓前端工程師快速展開各種 HTML 元素,但如果能在撰寫的時候就能產生內文,不需要等到元素展開後才補上內文那就更棒了!沒想到這個功能 Emmet 也有!真不塊是前端工程師的省時神器!

如果想要產生元素中的文字時,可以透過加上 {} 大括號並在其中寫上文字,如我們想要輸入名為「標題」的 h1 標籤、名為「副標題」的 h2 標籤,以及內容為 「內文」 的 p 標籤,就輸入「h1{標題}+h2{副標題}+p{內文}」後按下 Ctrl+E。

 

自訂屬性值

Emmet 除了可以讓前端工程師快速展開標籤與文字之外,對於像是 a href、img 等需要設定屬性的標籤,也可以在寫的時候就產生哦。

假設想要產生元素中的屬性時,可以透過加上 [] 中括號並在其中寫上屬性與值的內容,值需要用雙引號或是單引號包起來。例如我們今天要產生一個連結到網站「https://www.tedu.tw」的 a 元素,就輸入「a[href=”https://www.tedu.tw”]」後按下 Ctrl+E。

若想要增加顯示文字,則在 [] 中括號後方加上{} 大括號並在其中寫上文字即可。承上例,我們可加上「達內教育」文字,就輸入「[a[href=”https://www.tedu.tw”]{達內教育}」後按下 Ctrl+E。

如果想要多增加一些屬性值,只要在同一個 [] 中括號中,將每個屬性值用空格隔開就可以了。如在上個例子中,想要設定網站在新分頁開啟,我們就輸入輸入「[a[href=”https://www.tedu.tw” target=”blank”]{達內教育}」後按下 Ctrl+E。

 

 

 

推薦文章:
成為專業前端工程師前,先搞定CSS背景位置設定!


前端工程師的御用愛將CSS,超好用四招搞定HTML!


CSS父子繼承關係搞不定?前端工程師建議你可以這樣做!


再也不用為了回收分類發愁了!!交給人工智慧就對了!!


暑假快到了!與其讓兒子盲目拚學測,我寧可讓他先選擇人生方向~


體格標準,妝扮無暇的網站怎麼建立?快來上CSS網頁設計課程!


挑對Java課程,讓你從零起點到獨當一面的工程師只需六個月!

資深前端工程師之Emmet教學(3)快速複製元素與設定編號

資深前端工程師之Emmet教學(3)快速複製元素與設定編號
資深前端工程師之Emmet教學(3)快速複製元素與設定編號

只要是前端工程師,都知道Emmet,但是你知道如何善用Emmet來快速複製元素跟設定編號嗎?

前端工程師必備「Emmet」基礎教學目錄:

  1. 如何使用 Emmet 快速產生 HTML 標籤名稱
  2. 如何使用 Emmet 快速產生 階層
  3. 如何使用 Emmet 複製元素與設定流水編號
  4. 如何使用 Emmet 快速設定顯示文字與自訂屬性值

複製元素

前端工程師要產生 ol 或是 ul 清單標籤時,都會包含一拖拉庫的 li 元素。假設要一個一個手動輸入的話,就算是使用 Emmet 的「+」快捷輸入法,還是會花不少時間的。幸好 Emmet 有複製的快捷輸入法:「*」。用法是:若想要一次產生 5 個相同的元素的話,就在原宿後方輸入「*5」。由此類推,產生 7 個就是「*7」。假使我們今天要建立一個 ul 清單標籤,包含 5 個 li 元素,語法就可以這樣寫「ul>li*5」之後再按 ctrl+E 即可。

再假設我們要在一個 .news 中放置 5 個 .block,然後每個 .block 中都有 1 個 h2 標題及 3 個 p 段落,每個 p 段落中又放置兩張圖片,則輸入「.news>(.block>h2+(p>img*2)*2)*5」

編號

有時前端工程師會在HTML輸入 li 標籤時,會給這些 li 一個共用的 .className 以及流水編號。若搭配 Emmet 的「$」時,就可以快速的產生。例如,今天我們要輸入五個 li 標籤,標籤的 class name 分別為 list-1、list-2、list-3、list-4、list-5,則輸入「li.list-$*5」

若要在這些流水編號前面加個「零」,例如 01、001,則補上只要補上相對數量的 $ 即可。像是 01 就是 $$、001 就是 $$$。承上例,我們得輸入「li.list-$$*5」以及「li.list-$$$*5」

設定起始編號

$的用法,預設數字是從 1 開始累加。有時前端工程師會需要指定起始數字,這時則在 $ 後面多補上一個 @ 並加上指定的起始數字,承接上例,我們要設定起始數字為 5 就輸入「[email protected]*5」

Emmet 預設的編號是由小到大,若是希望編號由大到小,那麼就是在 @ 後面補上一個 – 負號 (就算是沒要設定起始值也是要多補 @)。例如我們要輸入 5 個 li 標籤,編號由大到小,就輸入「[email protected]*5」 我們要設定起始數字為 5 ,就輸入「[email protected]*5」。

 

 

 

 

推薦文章:
資深前端工程師之Emmet教學(4)-設定顯示文字與屬性值


那些前端工程師不告訴你卻超好用的懶人包,今天不藏私大公開!


前端工程師CSS實務教學應用-Div標籤(上)


暑假快到了!與其讓兒子盲目拚學測,我寧可讓他先選擇人生方向~


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


再也不用為了回收分類發愁了!!交給人工智慧就對了!!


HTML5瀏覽器儲存比cookies更優的來了!

資深前端工程師之Emmet教學(2)階層如何快速區分?

資深前端工程師之Emmet教學(2)階層如何快速區分?
資深前端工程師之Emmet教學(2)階層如何快速區分?

前端工程師常說,只要掌握幾個關於emmet的要點,要區分網頁階層其實超級快!

前端工程師必備「Emmet」基礎教學目錄:

  1. 如何使用 Emmet 快速產生 HTML 標籤名稱
  2. 如何使用 Emmet 快速產生 階層
  3. 如何使用 Emmet 複製元素與設定流水編號
  4. 如何使用 Emmet 快速設定顯示文字與自訂屬性值

父子兄弟階層、群組、上一層

這一篇有簡略說到父子階層(父元素與子元素)之間的關係。想成為前端工程師的同學們未來在處理網頁時,一定會遇到父子元素、兄弟元素等。本文就簡單列出各種階層關係的 Emmet 縮寫方式:

父子元素一次輸入

前端工程師在使用 Emment 在設定HTML的子元素時非常方便,只要在父子元素間加入這個” > “符號即可。如下方的動態圖所示:假設我們要在 class name 名為「news_p」以及 id 名為「paragraph1」的 div 父元素中放置 子元素 p,並在 p 中在加上孫元素 ol 與 li 等動作,只要輸入「.news_p#paragraph1>p>ol>li」後按下 ctrl+E 就可輕鬆地一次寫完!

兄弟階層一次輸入

承接上面「父子元素一次輸入」的範例,若想在 p 的上方放置 h2 標題,但是 h2 標題不屬於 p 的父元素,位階是跟 p 同等的,則 h2 與 p 互為兄弟元素。

上方提到:元素間互為父子關係則用 > 隔開;若為兄弟元素,就用「+」隔開。因此此例為輸入「.news_p#paragraph1>h2+p>ol>li」

將元素設為同一階層的群組

承上面「兄弟階層一次輸入」的範例,若前端工程師想在互為兄弟階層的 h2+p 的階層下,再多放一組一模一樣且位階相同的 h2+p 的階層的話該如何做?那就把 h2+p 視為一個群組,用 () 括號的方式包起來,把用括號起來元素視為同一階層來看即可,所以我們的語法就可以這樣寫「.news_p#paragraph1>(h2+p>ol>li)+(h2+p>ol>li)」之後再按 ctrl+E 即可。

上一層

承上面「群組 Grouping」的範例,若前端工程師想在兩個互為兄弟階層的 h2+p 群組後方,新增一個 div 父元素(class name 名為「news_p」以及 id 名為「paragraph2」),就可以在元素間加入 ^ 符號即可。所以語法就可以這樣寫「.news_p#paragraph1>(h2+p>ol>li)+(h2+p>ol>li)^.news_p#paragraph2」之後再按 ctrl+E 即可。


本例的 div 元素使用 ^ 符號來往上爬一個階層,如果想要爬兩層的話,就是 ^^ 符號。

如果你想成為專業的前端工程師,這些快速鍵可要記得多練習幾次,熟練後就能在編寫 HTML 時更有效率啦!

 

 

 

推薦文章:
資深前端工程師之Emmet教學(3)快速複製元素與設定編號


頂尖前端工程師必備技能之一-掌握RWD基礎概念


工作太累想當前端工程師爽爽賺?以下SOP可不要錯過了!


HTML5瀏覽器儲存不是只有cookies!


今天一起揪出來-那些偷偷藏著Python和Java的電影(上)


暑假快到了!與其讓兒子盲目拚學測,我寧可讓他先選擇人生方向~


透過對的Java課程,讓你從茫然的畢業生中脫穎而出!

資深前端工程師之Emmet教學(1)標籤名稱如何快速產生?

資深前端工程師之Emmet教學(1)標籤名稱如何快速產生?
資深前端工程師之Emmet教學(1)標籤名稱如何快速產生?

資深前端工程師都知道Emmet超好用,今天就要教你如何快速產生標籤名稱!

前端工程師必備「Emmet」基礎教學目錄:

  1. 如何使用 Emmet 快速產生 HTML 標籤名稱
  2. 如何使用 Emmet 快速產生 階層
  3. 如何使用 Emmet 複製元素與設定流水編號
  4. 如何使用 Emmet 快速設定顯示文字與自訂屬性值

身為一個前端工程師,一定要裝一個「省時神器」 Emmet 外掛,這不僅可以大大節省前端工程師在編寫 HTML 及 CSS 的時間,還可以省下的時間可以讓你去體驗人生各種美好的事物,如玩玩喵星人、上上健身房運動等等。

Emmet 支援的網頁編輯器如下圖:

安裝的方式會因個網頁編輯器而異,在網路上皆可以查到,故此省略。以下小編先介紹基本的使用方式:

快速產生標籤名稱 (Tag Name)

前端工程師在寫網頁的第一步,就是在網頁編輯器中開出新的頁面,並產生標準的 HTML 樣板。透過 Emmet,我們可以先在編輯器中輸入「!」或是「html:5」後,再按下 Ctrl+E 鍵即可。

假設我們要產生一個 p 元素,那麼我們只要直接輸入 p 後,再按下 Ctrl+E 鍵,就能自動產生起始元素及結束元素。如下所示:

只要是 HTML 所定義的元素,如 h1-h6、center、title 等等,都能使用上述方示,快速產生出相對應的語法如下

有些元素還會帶入跟該元素有關的屬性,例如:iframe、a 或是 img 等

快速產生 className 與 id

我們也可以在產生元素時,直接加上指定的 Class Name。寫法是元素名稱與 Class Name 名稱中間用英文句點隔開。例如今天我們要產生 Class Name 為「title」的 h1 標籤,則輸入「h1.title」後按 Ctrl+E

若是要針對單一元素要加上多個 class name 的話,只要把它們用半形的句號隔開,接在一起就可以了。例如今天我們要產生 Class Name 為「news_p c1」的 div 標籤,則輸入「div.news_p.c1」後按 Ctrl+E

前端工程師省時神器 Emmet 一般預設的元素是 div,所以如果直接輸入英文句號後,寫 class name 的話,就會自動產生一個 div 元素加上指定的 class name。承上例,輸入「.news_p.c1」後按 Ctrl+E

除了 class name,我們也可以幫元素加上指定的 id。只要先打 # 號再輸入 id name 即可。例如今天我們要產生 id 為「news_p」的 div 標籤,則輸入「#news_p」後按 Ctrl+E

class name 和 id 可以同時使用,例如今天我們要產生 class name 為「news_p c1」、id 為「paragraph-1」的 div 標籤,則輸入「.news_p.c1#paragraph-1」後按 Ctrl+E

以上介紹為常用的 Emmet 標籤快捷縮寫方式,如果你想要知道更多的元素縮寫方式,都可在 Emmet 官方文件中找到:Emmet cheat sheet

 

 

 

推薦文章:
資深前端工程師之Emmet教學(2)階層如何快速區分?


為什麼ID選擇器對前端工程師如此重要?原因是…


那些前端工程師沒教你的CSS,今天一一告訴你!


從七大點告訴你Python和Java有何不同!!


擠進高薪科技大門-Java課程等你來瞭解!


暑假快到了!與其讓兒子盲目拚學測,我寧可讓他先選擇人生方向~


專業達內教育與 Adobe·ACA 國際認證簽約成功

前進前端工程師之HTML5入門課程-SVG 路徑動畫

前進前端工程師之HTML5入門課程-SVG 路徑動畫
前進前端工程師之HTML5入門課程-SVG 路徑動畫

HTML5中有許多程式碼,只要根據以下步驟,SVG路徑動畫也可以輕鬆做出來!

SVG 路徑動畫

前端工程師建議如果要畫SVG路徑動畫的時候,可以使用HTML5中的 <path> 元素來定義路徑。

SVG Path 基本指令列表如下圖所示

See the Pen SVG Path 基本指令-L by Tedutw (@Tedutw) on CodePen.

See the Pen SVG Path 基本指令-H by Tedutw (@Tedutw) on CodePen.

See the Pen SVG Path 基本指令-Y by Tedutw (@Tedutw) on CodePen.

See the Pen SVG Path 基本指令-C by Tedutw (@Tedutw) on CodePen.


(圖片取自:iT邦幫忙)
 

  <path D="M0 0 C40 40,60 40,100,0 S150 -40, 200 0" stroke="black" fill="none"/>

 

See the Pen SVG Path 基本指令-Q by Tedutw (@Tedutw) on CodePen.

See the Pen SVG Path 基本指令-T by Tedutw (@Tedutw) on CodePen.

See the Pen SVG Path 基本指令-Z by Tedutw (@Tedutw) on CodePen.

    • M
      起始點的 x,y 座標 (move to)
    • L
      從「目前的點」的座標畫直線,到指定點的 x,y 座標 (line to)

    • H
      從「目前的點」的座標畫水平線,到指定的 x 座標 (horizontal line to)

    • V
      從「目前的點」的座標畫垂直線,到指定的 y 軸座標 (vertical line to)

    • C
      從「目前的點」的座標,畫條貝茲曲線,到指定點的 x,y 座標。如下圖的曲線,C 的部分會有三組 x,y 座標:其中第一組以及第二組 x,y 座標為控制曲線的形狀用,最後一組為終點座標。

    • S
      S 可以從「目前的點」之後,再建立一個座標。這個新增的座標帶有一條貝茲曲線與「目前的點」連結。神奇的是,這個貝茲曲線的形狀,就是這個「目前的點」的鏡射線。聽起來很難懂,看下面的例子就知道了。
    • Q
      Q 就是起點和終點的貝茲曲線共用同一個控制點,只需要有貝茲控制點的座標和終點座標即可。

    • T
      T 只有一組參數 x,y ,表示終點的座標,所以 T 的前方要接上 Q 才能畫出對應的座標線。

    • Z
      關閉路徑,將「目前的點」的座標與第一個點的座標連接起來 (closepath)

 

 

 

推薦閱讀:
資深前端工程師淺談Box model(上集)


成為前端工程師必會技能之一-CSS背景顏色設定


前端工程師CSS自學寶典(一)-絕對單位


從達內教育評價事件來看GEEGO(奇科?)IT培訓評論的謬誤


電影告訴你Python和人工智慧如何影響人類!(上)


暑假快到了!與其讓兒子盲目拚學測,我寧可讓他先選擇人生方向~


挑對Java課程,讓你從零起點到獨當一面的工程師只需六個月!

前進前端工程師之HTML5入門課程-SVG基本圖形動畫

前進前端工程師之HTML5入門課程-SVG基本圖形動畫
前進前端工程師之HTML5入門課程-SVG基本圖形動畫

HTML5之於前端工程師,就好像水之魚一樣,密不可分!其中SVG基本圖形動畫可是一定要會的!

 

SVG 基本圖形動畫

前端工程師常常會使用 <animate> 元素來繪製 SVG 動畫。

今天我們先來學如何繪製一個方形,並且將動作設定在三秒鐘內往右移動,然後會重複相同的動作 3 次。HTML5 原始碼與結果呈現如以下所示:

See the Pen SVG 基本圖形動畫 by Tedutw (@Tedutw) on CodePen.

以上所有的 HTML5 標籤分析如下:

  • <attributeName>
    屬性名稱,就是當你指定了這個屬性,就會以這個屬性去做動作。在本例中指定紫色方塊要水平位移,水平移動的座標為 x,所以該例中 attributeName 為 x。若為垂直移動的話,attributeName 則為 y。
  • <from>
    動畫開始時的屬性值。
  • <to>
    結束動畫時的屬性值。
  • <dur>
    動畫持續時間。
  • <repeatCount>
    動畫重複次數。在本例中重複 3 次所以 repeatCount 設為 3;若要動畫無限重複的話, repeatCount 則設為 indefinite。
  • <fill (freeze | remove)>
    這裡的 fill 不代表填色,而是指定動畫結束時的屬性,屬性可選 freeze 或是 remove,remove 是預設值,也就是動畫結束之後,圖形返回原本的狀態,而 freeze 則是在動畫結束後,固定在結束的狀態。

 

 

 

 

 

推薦文章:
前進前端工程師之HTML5入門課程-SVG 路徑動畫


SEO無痛該怎麼做?資深前端工程師教你對的方法!


頂尖前端工程師必備技能之一-掌握RWD基礎概念


愛因斯坦也得過這種病? 專屬成功人士的疾病Python學員們知道嗎?


再也不用為了回收分類發愁了!!交給人工智慧就對了!!


美國NASDAQ上市公司、外商IT教育培訓企業


暑假快到了!與其讓兒子盲目拚學測,我寧可讓他先選擇人生方向~

菜鳥前端工程師的HTML5新手指南(十一)-SVG圖檔超好用?

菜鳥前端工程師的HTML5新手指南(十一)-SVG圖檔超好用?
菜鳥前端工程師的HTML5新手指南(十一)-SVG圖檔超好用?

在學HTML5的時候,常常聽到前輩說SVG圖檔比點陣圖還好用,到底該怎麼用呢?

何謂 SVG?

在以往網頁設計常使用的圖片檔如 jpg、png、gif 等都是以點陣圖模式呈現,但是目前時下最流行的 RWD 響應式網頁是可以隨著螢幕調整網頁布局,點陣圖隨著螢幕大小縮放就會有模糊失真的疑慮,因此HTML5的向量的 SVG 是不錯的解決方法。

SVG(Scalable Vector Graphics,可縮放向量圖形)是 W3C 制定的開放性網路標準之一,此圖片格式再網頁中能以向量格式呈現圖片。網頁設計師可先在 Adobe Illusrator 中畫好向量圖形並存成 SVG 檔,在放在網頁中。運用方式其實就跟 .jpg、.png、.gif 等圖片檔一樣,但不同的是 SVG 檔不會因尺寸的改變而失真,日後要修改時也可直接開啟檔案修改,相當方便。

如何置入 SVG 影像到網頁中?

如同 .jpg、.png、.gif 的方式,SVG 圖檔使用 img 標籤被置入到 HTML5 檔中,如下方所示:

<img src="image.svg" alt="" height="300" />

使用 SVG 畫圖形

要用 SVG 畫出簡單的圖形,首先前端工程師要使用 SVG 標籤製作「畫布」。要賦予其畫布的長寬 (width、height) 屬性,如下例所示:

<svg width="1000" height="1000"></svg>

在此我們先舉「畫圓形」為例子,如下所示:

<svg width="2000" height="2000">
   <circle cx="80" cy="80" r="50" fill="magenta" />
</svg>
  • – cx 圓心之x軸座標
  • – cy 圓心之 y 軸座標
  • – r 半徑
  • – fill 填滿色彩
  • – stroke 圓形外框

結果如下所示:

See the Pen svg circle by Tedutw (@Tedutw) on CodePen.

同理, SVG 也可以用來「畫方形」。標籤中的「circle」要改成「rect」,半徑與圓心的屬性都要換成長與寬,原始碼與結果如下所示:

See the Pen svg rect by Tedutw (@Tedutw) on CodePen.

同理可證, SVG 標籤改成「line」,x1 與 y1 定義第一點的座標、x2 與 y2 定義第二點的座標,原始碼與結果如下所示:

See the Pen svg line by Tedutw (@Tedutw) on CodePen.

三邊以上的摺線,前端 工程師可用 SVG 「polyline」(多點折線)標籤,並為五點定義座標分別為 10 10, 60 60, 110 10,160 60 與 210 10 原始碼與結果如下所示:

See the Pen svg polyline by Tedutw (@Tedutw) on CodePen.

SVG 繪製橢圓形 (ellipse) ,標籤屬性的下法與上述的「circle」類似,差別在於水平與垂直的半徑可以分別使用「rx」與「ry」來定義,原始碼與結果如下所示:

See the Pen svg ellipse by Tedutw (@Tedutw) on CodePen.

三邊以上的形狀,用 SVG 繪製多邊形 (polygon) 的原始碼與結果如下所示::

See the Pen svg polygon by Tedutw (@Tedutw) on CodePen.

 

 

 

推薦文章:
HTML5教學第一招-工欲善其事,必須要有免費的網頁編輯器


菜鳥前端工程師的HTML5新手指南(一)-七大內容模組有哪些?


前端工程師暑假先修班(一)-RWD網頁與傳統網頁的差異性


暑假快到了!與其讓兒子盲目拚學測,我寧可讓他先選擇人生方向~


Java課程、UI課程、程式課程、網路行銷課程推薦


從七大點告訴你Python和Java有何不同!!


網頁設計AWD 要怎麼做才能對 SEO 無痛呢?這就告訴你!

菜鳥前端工程師的HTML5新手指南(十)-地理位置定位怎辦到?

菜鳥前端工程師的HTML5新手指南(十)-地理位置定位怎辦到?
菜鳥前端工程師的HTML5新手指南(十)-地理位置定位怎辦到?

要在HTLM5網頁中達到定位其實並不難,只要按照以下幾個步驟就可以輕鬆辦到!

什麼是地理位置定位 (Geolocation) API?

一般來說,在 HTML5 網頁,前端工程師是可以使用地理位置定位 (Geolocation API) 來取得用戶的地理位置。但基於隱私權的考量,一定得先獲得使用者同意才可使用。對於具有GPS(如智慧型手機等)的設備,地理位置更為準確。

用法

使用 Geolocation 的主要方法是 getCurrentPosition,可以讀取到用戶設備的當前地理位置。該語法如下所示:
(※以下的語法通通都是寫在 Javascript裡)

navigator.geolocation.getCurrentPosition();

參數:

1. showLocation(必要項目):是個函式,於瀏覽器成功判斷出位置後呼叫。

2. ErrorHandler(非必要):是另一個函式,於發生問題,瀏覽器無法判斷出位置時呼叫。

3. options(非必要):此參數能讓我們自訂geolocation運作的方式。

呈現數據

一般來說,地理位置定位 (Geolocation API) 可以使用兩種方式呈現:Geodetic(地理測量) 與 Civic(城市):

1. Geodetic (地理測量) 直接呈現經緯度座標表示位置、水平線上的距離 (如公尺) 表示高度等

2. Civic (城市) 則用能使大多數人理解的方式呈現:城市名表示位置、樓層數表示高度等

屬性 Geodetic Civic
Position (位置) 25.0,121.6 Taipei (台北)
Elevation (高度) 508 meters (508公尺) 101th floor (101樓)
Heading (以360度表示的方向) 234 degrees (234度) City Centre (市中心)
Speed (速度) 5km/h (時速5km) Walking (步行)
Orientation (手機的擺放方向) 45 degrees (45度) North-East (東北)

 

 

 

 

推薦閱讀:
菜鳥前端工程師的HTML5新手指南(十一)-SVG圖檔超好用?


菜鳥前端工程師的HTML5新手指南(一)-七大內容模組有哪些?


HTML5教學法寶1-文字排版設定好,人人愛看少不了!


達內課程先就業再付款- 中時電子報


不想再領死薪水?來上Java課程,保證你笑咪咪領高薪!


HTML5教學的三個基本款(1):入門時,這兩樣東西一定要知道


沒有那麼難!網頁設計課程中的CSS,它到底是什麼呢?

菜鳥前端工程師的HTML5新手指南(九)-如何使用瀏覽器儲存?

菜鳥前端工程師的HTML5新手指南(九)-如何使用瀏覽器儲存?
菜鳥前端工程師的HTML5新手指南(九)-如何使用瀏覽器儲存?

最近HTML5新增一個Web Storage的功能,真的讓前端工程師省了很多麻煩呢!

在過去的 HTML5 前端工程師要在用戶端瀏覽器儲存資料,會使用 cookies。HTML5 新增了 Web Storage 功能,取代了只能儲存 4kb 的 cookies。

Web Storage 的優點 (與 cookies 比較):

1. 更安全

2. 過往儲存於 cookies 中的資料,會在用戶端瀏覽器與伺服器之間運行:因為每次用戶端瀏覽器送出 request 至伺服器時,cookies 就會跟著被夾帶,就會占用到頻寬,而 Web Storage 因為純粹運作於用戶端用戶端瀏覽器,不會在用戶端瀏覽器與伺服器之間運行,所以就不需要占用網路頻寬。

3. 以往 cookies 最多只能儲存 4KB 的資料,而HTML5Web Storage 的儲存空間大得多,其容量依各個瀏覽器而不同,但是一般都至少有 5MB。

4. 速度更快

Web Storage 有分兩種:sessionStorage() 和 localStorage()。二者的最大的差異在於「生命週期長短」。

數據的生命期

localStorage:儲存於 localStorage 的資料可永久保存,可以利用跨瀏覽器分頁、新視窗、甚至是關閉瀏覽器後再打開,localStorage 仍然會存在,永不逾期,除非被清除。

sessionStorage:sessionStorage 的生命周期只存在於瀏覽器的單一分頁,也就是另開新分頁的話,又是一個新的 sessionStorage。除非另外設定逾期時間,否則 sessionStorage 會於分頁、瀏覽器等被關閉時被清除。 ※以下的語法通通都是寫在 Javascript

有效範圍

儲存於 local storage 的資料可以跨分頁(tab)運作,session storage 則不行。

用法

sessionStorage 和 localStorage 的語法都比較簡單而且類似。其他資料都是以 key/value pairs 的形式儲存。

儲存資料

localStorage.setItem("Key名稱", "字串值");

取得資料

//this will print the value
alert(localStorage.getItem("Key名稱"));

移除資料

localStorage.removeItem("Key名稱");

移除所有資料

localStorage.clear();

以上的語法是以 localStorage 為例來示範,若是用儲存於 sessionStorage,把以上語法中的 「localStorage」 替換成 「sessionStorage」 即可。

 

 

推薦文章:
菜鳥前端工程師的HTML5新手指南(十)-地理位置定位怎辦到?


這招HTML5教學也太酷了,翻書跟翻臉一樣快耶!


HTML5教學法寶1-文字排版設定好,人人愛看少不了!


達內課程先就業再付款- 中時電子報


挑對Java課程,讓你從零起點到獨當一面的工程師只需六個月!


前端工程師學CSS字體單位-絕對單位篇


前端工程師和網頁設計師必學-了解整體網站的規劃流程