前端工程師必學!Emmet能減少寫HTML/CSS的時間?!

前端工程師必學!Emmet能減少寫HTML/CSS的時間?!
前端工程師必學!Emmet能減少寫HTML/CSS的時間?!

前端工程師看過來!!今天要介紹的是能幫你省下大把時間的超級神器!!Emmet!!只要有了他就不用再花大把時間編寫HTML及 CSS啦!!

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

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

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

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

前端工程師在寫網頁的第一步,就是在網頁編輯器中開出新的頁面,並產生標準的 HTML5 樣板。透過 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 縮寫方式:

父子元素一次輸入

前端工程師在使用 Emment 在設定子元素時非常方便,只要在父子元素間加入 > 符號即可。如下方的動態圖所示:假設我們要在 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 時更有效率。

複製元素

前端工程師要產生 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」

編號

有時前端工程師在輸入 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 就輸入「li.list-$$@5*5」

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

顯示文字

使用 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。

推薦閱讀:6個酷炫HTML5電子書翻頁效果

 

 

更多前端工程師或其他程式語言相關文章請點閱下方連結

 

 

 

其他閱讀

RWD 和 AWD 的差異與優缺點

前端工程師一定得選擇RWD嗎?AWD要怎麼做才能無痛SEO?

秀程式設計也能交女友!工程師專屬交友App:VSinder

Nature:語言天才比數學高手更適合學 Python!別在嘴文科生、女性不能寫程式了

2022最佳職場NVIDIA蟬聯第一!!Meta元宇宙呢?

義大利廠Brembo幫你實現人工智慧自動煞車的夢想(上)

Spotify研發人工智慧技術抓住客戶!穩坐串流音樂龍頭!

前端工程師CSS小課:float浮動屬性

前端工程師CSS小課:float浮動屬性
前端工程師CSS小課:float浮動屬性

正在學習前端工程師課程的同學過來~CSS系列課程登場嘍!!今天要介紹的是float浮動屬性!

CSS 的 float (浮動) 屬性

CSS 的 float (浮動) 屬性是前端工程師在做網頁排版時,必用的基本語法之一。使用 CSS float 浮動屬性,可將一個元素往左移或是往右移,並允許其他元素圍繞它(例如文繞圖、圖繞文等)。

float 浮動屬性的使用時機

使用 <div> 等區塊元素排版時,預設的排列方式都是由左至右、由上至下。但若想要讓多個區塊並排、或是二欄、三欄等多欄網頁前端排版時,就需要使用 float 屬性。

如下方例子,若我們使用一般的 div 區塊元素時,則所有的區塊就整齊的由左上出來,一個 <div> 區塊就佔用了一行。(溫馨提示:可以點擊下例視窗左上方的「HTML」與「CSS」按鈕來查看語法)

See the Pen Float-example-1 by Tedutw (@Tedutw) on CodePen.

承上例,若在 CSS 中加一個「float: left;」,則結果如下(溫馨提示:可以點擊下例視窗左上方的「HTML 」與「CSS」按鈕來查看語法):

See the Pen Float-example-2 by Tedutw (@Tedutw) on CodePen.

這是因為「float」屬性使 div 區塊元素「漂浮」起來,不再形成 div 區塊占滿整行的情況

承上例,若把由左側開始「漂浮」的「float: left;」改成由右側開始「漂浮」的「float: right;」,則所有的區塊就會由右側開始「飄」出來,結果如下(溫馨提示:可以點擊下例視窗左上方的「HTML」與「CSS」按鈕來查看語法):

See the Pen Float-example-3 by Tedutw (@Tedutw) on CodePen.

CSS 浮動屬性有三個參數:left、right 與 none。left 與 right 顧名思義,就是控制區塊由左側還是右側浮出用的,如上方兩個例子所示。而 none 就是不使用浮動參數的意思。

下方是另一個文繞圖排版的例子,就是文字的部分「不」設定 float 屬性,但是在 logo 圖片的部分使用浮動屬性「float:right;」,文字的部分則不使用浮動屬性。(溫馨提示:可以點擊下例視窗左上方的「HTML」與「CSS」按鈕來查看語法)

See the Pen Float-example-4 by Tedutw (@Tedutw) on CodePen.

前端工程師想要做出兩欄或多欄的網頁,則可以善用 float 屬性搭配寬度需要進行初步的排版。

以下範例為兩欄的排版示例。兩個欄位視為兩個區塊, float 屬性都設定為「left」,左欄寬度為 20%;右欄為 80%:

See the Pen Float-example-5 by Tedutw (@Tedutw) on CodePen.

網路上有人說:前端工程師的網頁 layout 基石除了本章介紹的浮動(float) 屬性之外,還有下一張會介紹的清除浮動(clear)。想當前端工程師的各位同學們請先把本章再複習一次,並親自使用 codepen 自己練習一次程式,才會達到最佳的學習效果!

 

 

更多關於前端工程師的文章請點閱下方連結!!

 

 

 

其他閱讀

從哆啦A夢到 iPhone…為何 UI 設計用「圓角」就是比較討喜?

APCS 程式檢定,該從 CJava 還是 Python 下手?

【前端工程師CSS教學】float浮動屬性

AI人工智慧救地球!GoogleAI 保護環境還比人類快 3000

所有APCS認證要知道的事都在這!!()

前端工程師起步的t初學小課(22):數學物件

如何分辨全端,後端和前端工程師?還不知道的可是不行的喔~

前端工程師CSS小課:定位元素

前端工程師CSS小課:定位元素
前端工程師CSS小課:定位元素

正在學習前端工程師課程的同學過來~CSS系列課程登場嘍!!今天要介紹的是定位元素~

為了要設計出更複雜的網頁前端版面,前端工程師都必須知道 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)屬性

 

更多關於前端工程師的文章請點閱下方連結!!

 

 

 

其他閱讀

從哆啦A夢到 iPhone…為何 UI 設計用「圓角」就是比較討喜?

APCS 程式檢定,該從 CJava 還是 Python 下手?

【前端工程師CSS教學】float浮動屬性

AI人工智慧救地球!GoogleAI 保護環境還比人類快 3000

所有APCS認證要知道的事都在這!!()

前端工程師起步的t初學小課(22):數學物件

如何分辨全端,後端和前端工程師?還不知道的可是不行的喔~

APCS程式檢定懶人包告訴你從哪下手最快狠準!!(下)

APCS程式檢定懶人包告訴你從哪下手最快狠準!!(下)
APCS程式檢定懶人包告訴你從哪下手最快狠準!!(下)

正在研究APCS認證的你看這篇就對了!!有了事半功倍懶人包就距離成功更進一步啦!!(下)

本篇為上篇,下篇請點此APCS程式檢定懶人包告訴你從哪下手最快狠準!!(上)

程式設計實作題

  • 題型:共計 4 個題組,以撰寫完整程式或副程式計分。
  • 檢測與計分方式:為單節次檢測 (測驗時間 140 分鐘),滿分 400 分

實作題例題

問題描述

一次考試中,於所有及格學生中獲取最低分數者最為幸運,反之,於所有不及格同學中,獲取最高分數者,可以說是最為不幸,而此二種分數,可以視為成績指標。請你設計一支程式,讀入全班成績(人數不固定),請對所有分數進行排序,並分別找出不及格中最高分數,以及及格中最低分數。當找不到最低及格分數,表示對於本次考試而言,這是一個不幸之班級,此時請你印出:「worst case」;反之,當找不到最高不及格分數時,請你印出「best case」。註:假設及格分數為 60,每筆測資皆為 0~100 間整數,且筆數未定。

輸入格式

第一行輸入學生人數,第二行為各學生分數(0~100 間),分數與分數之間以一個空白間格。每一筆測資的學生人數為 1~20 的整數。

輸出格式

每筆測資輸出三行。
第一行由小而大印出所有成績,兩數字之間以一個空白間格,最後一個數字後無空白;
第二行印出最高不及格分數,如果全數及格時,於此行印出 best case;
第三行印出最低及格分數,當全數不及格時,於此行印出 worst case。

範例一:輸入

10
0 11 22 33 55 66 77 99 88 44

範例一:正確輸出

0 11 22 33 44 55 66 77 88 99
55
66

(說明)不及格分數最高為 55,及格分數最低為 66。

範例二:輸入

1
13

範例二:正確輸出

13
13 worst case

(說明)由於找不到最低及格分,因此第三行須印出「worst case」。

範例三:輸入

2
73 65

範例三:正確輸出

65 73
best case
65

(說明)由於找不到不及格分,因此第二行須印出「best case」。

評分說明

輸入包含若干筆測試資料,每一筆測試資料的執行時間限制(time limit)均為 2 秒, 依正確通過測資筆數給分。

針對實作題,我們分別使用 C、PythonJava 來解題,語法如下:

實作題解法#1 – 使用 C 語言(最費時):

#include < stdio.h >
#include < stdbool.h >

int len;
int *scores;

main()
{
    int i, j, tmp, highestUnpass, lowestPass;
    bool best=false, worst=false;
    scanf("%d", &len);
    scores = (int *)malloc(sizeof(int) * len);
    for (i=0;i < len;i++)
        scanf("%d", &scores[i]);
    for (i=0;i < len-1;i++)
        for(j=i+1;j < len;j++)
            if (scores[i] > scores[j])
            {
                tmp = scores[i];
                scores[i] = scores[j];
                scores[j] = tmp;
            }
    for (i=0;i < len;i++)
    {
        printf("%d", scores[i]);
        if (i < len-1)
            printf(" ");        
    }
    printf("\n");
    if (scores[len-1] < 60)
    {
        worst = true;
        highestUnpass = scores[len-1];
    }
    if (scores[0] >= 60)
    {
        best = true;
        lowestPass = scores[0];
    }
    if (worst == false && best == false)
    for (i=0;i < len;i++)
        if (scores[i] >= 60)
        {
            highestUnpass = scores[i-1];
            lowestPass = scores[i];
            break;
        }
    if (best)
        printf("best case\n");
    else
        printf("%d\n",highestUnpass);
    if (worst)
        printf("worst case\n");
    else
        printf("%d\n",lowestPass);
}

實作題解法#2 – 使用 Python 語言(最省時):

nums = int(input())
strScores = input()
scores = strScores.split(" ")
for i in range(len(scores)):
    scores[i] = int(scores[i])
scores.sort()
for i in range(len(scores)):
    print(scores[i], end="")
    if i < len(scores)-1:
        print(" ", end="")
print()
best = False
worst = False
if scores[len(scores)-1] < 60:
    worst = True
    highestUnpass = scores[len(scores)-1]
if scores[0] >= 60:
    best = True
    lowestPass = scores[0]
if best==False and worst == False:
    for i in range(len(scores)):
        if scores[i] > 60:
            lowestPass = scores[i]
            highestUnpass = scores[i-1]
            break
if best:
    print("best case")
else:
    print(highestUnpass)
if worst:
    print("worst case")
else:
    print(lowestPass)

實作題解法#3 – 使用 Java 語言(所花時間適中):

import java.lang.reflect.Array;
import java.util.Arrays;
import java.util.Scanner;

public class T01 {

    public static void main(String[] args) {
        // TODO Auto-generated method stub
        Scanner scanner = new Scanner(System.in);
        
        String nouse = scanner.nextLine();
        String data = scanner.nextLine();
        String[] strScores = data.split(" ");
        int len = strScores.length;
        int [] intScores = new int[len];
        int i;
        for (i=0;i < len;i++)
        {
            intScores[i] = Integer.parseInt(strScores[i]);
        }
        Arrays.sort(intScores);
        boolean best=false, worst=false;
        int highestUnpass = 0, lowestPass = 0;
        if (intScores[0] >= 60)
        {
            best = true;
            lowestPass = intScores[0];
        }
        if (intScores[intScores.length-1] < 60)
        {
            worst = true;
            highestUnpass = intScores[intScores.length-1];
        }
        
        for (i=0;i < len;i++)
        {
            System.out.print(intScores[i]);
            if (i < len-1)
                System.out.print(" ");              
        }
        System.out.println();
        if (best == false && worst == false)
        {
            for (i=0;i < len;i++)
            {       
                if (intScores[i] > 60)
                {
                    highestUnpass = intScores[i];
                    lowestPass = intScores[i-1];
                    break;
                }           
            }
        }
        if (best)
        {
            System.out.println("best case");
        }
        else
        {
            System.out.println(highestUnpass);
        }
        if (worst)
        {
            System.out.println("worst case");           
        }
        else
        {
            System.out.println(lowestPass);
        }                
    }
}

總結一下綜合比較的部分:

  • 學習上手速度:Python > Java > C
    (但 Python 與其他兩者程式語言差異較大,若一開始就選擇從 Python 語言上手 ,還是必須多花不少時間理解 C 語言,才能解答觀念題。)
  • 實際作答速度:Python > Java > C
    (Python 與 Java 都具備函式庫,在實作題作答時會比 C 語言快速。)

APCS 短期衝刺,從 Java 著手 CP 值最高!

以學習效果與所花時間的比值來說,學習 Java 的 CP 值較高。以下說明為什麼:

雖然 Python 堪稱「程式語言的瑞士刀」,其語法直觀、編寫簡潔快速,比起 C , Java 更容易上手,但由於觀念題是由 C 語言出題,若學 Python 再接觸 C ,對於有時間與其他課業壓力的考生來說,是相當辛苦、費時的。

Java 本身是由 C / C++為概念改良而成的語言,在設計之初,考量重點之一便是簡潔,因此學習與 C 語言語法架構相似的 Java ,讓考生有操作基礎後再學習 C 語言,更能在檢測學習之路,更加如魚得水。

綜合以上觀點,投資在能兼顧「理論題」與「實務題」的 Java,才是事半功倍、投報率最高的首選!

最後貼心提醒:109 年第 2 次 APCS 檢測暫訂 2020 年 7 月 4 日!

各位考生可以開始逐步準備 APCS 檢測囉!

 

 

更多關於APCS的文章請點下方連結,或到本部落格首頁搜尋喔!!

 

 

 

其他閱讀

從哆啦A夢到 iPhone…為何 UI 設計用「圓角」就是比較討喜?

APCS 程式檢定,該從 CJava 還是 Python 下手?

【前端工程師CSS教學】float浮動屬性

AI人工智慧救地球!GoogleAI 保護環境還比人類快 3000

所有APCS認證要知道的事都在這!!()

前端工程師起步的t初學小課(22):數學物件

如何分辨全端,後端和前端工程師?還不知道的可是不行的喔~

APCS程式檢定懶人包告訴你從哪下手最快狠準!!(上)

APCS程式檢定懶人包告訴你從哪下手最快狠準!!(上)
APCS程式檢定懶人包告訴你從哪下手最快狠準!!(上)

正在研究APCS認證的你看這篇就對了!!有了事半功倍懶人包就距離成功更進一步啦!!(上)

第一次考 APCS 程式語言,從哪個程式語言下手才會事半功倍呢?

若是一開始就選到一個好上手、測驗時又好作答的程式語言,就可以減少準備時間和學習負擔!本篇文章將以三款詢問度較高的應考語言 C , Java , Python 來做解析、比較。

此篇你將了解…

  1. 1. APCS 檢測的規範與基礎
  2. 2. C , Java , Python – 哪個語言適合解題?

先來了解一下檢測內容的基礎概念,APCS 的兩大題組 【觀念題】與【實作題】

程式設計觀念題

  • 題型:單選題 (含題組),以運算思維、問題解決與程式設計概念測試為主。
  • 檢測與計分方式:分兩節次檢測 (單節測驗時間60分鐘), 檢測分數為合併計分,滿分100分

觀念題例題#1

1. 右側程式碼,執行時的輸出為何?

  1. (A) 0 2 4 6 8 10
  2. (B) 0 1 2 3 4 5 6 7 8 9 10
  3. (C) 0 1 3 5 7 9
  4. (D) 0 1 3 5 7 9 11
void main() {
    for (int i=0; i<=10; i=i+1) {
        printf ("%d ", i);
        i = i + 1;
    }
    printf ("\n");
}

(出自 105 年 3 月 5 日,理論題第 15 題)

這一題主要要測驗的內容,是考驗考生是否了解 C 語言當中, for 迴圈的結構。

以 for 迴圈來說,三的區段的值分別是初始值、條件值、運算值。

在這一題當中,第一次執行的時候 i 為 0 ,所以會先印出 0。

接下來,由於第四行 i=i+1 的關係, i 會變為 1 。但是執行迴圈時,回到了 for 的第三部分,這時候,還是另外一次的 i=i+1 ,所以 i 變為 2,然後進行驗證, i <= 10

根據這樣的執行邏輯, i 每印出一個就會 +2 一次,直到 i 超過 10 之後跳出迴圈。

Ans:所以會印出「0 2 4 6 8 10」

觀念題例題#2

2. 若以 f(22)呼叫右側 f()函式,
總共會印出多少數字?

  1. (A) 26
  2. (B) 22
  3. (C) 11
  4. (D) 15
void f(int n) {
    printf ("%d\n", n);
    while (n != 1) {
        if ((n%2)==1) {
            n = 3*n + 1;
        }
        else {
            n = n / 2;
        }
        printf ("%d\n", n);
    }
}

(出自 105 年 3 月 5 日,理論題第 21 題)

本題所考內容,是對於 while 與 if 的熟悉度。

傳入 22 進 function 之後,會先印出 22。

接下來進入 while 迴圈,如果 n 不是 1 ,那麼這個迴圈會一直執行。

while 當中, 如果 n 是奇數,則 n 會變成 3xn+1 ,如果 n 是偶數,那 n 會變成原來的一半。

所以整個流程會是「22➔11➔34➔17➔52➔26➔13➔40➔20➔10➔5➔16➔8➔4➔2➔1」。

Ans:所以答案是 16 個。

 

 

本篇為上篇,下篇請點此APCS程式檢定懶人包告訴你從哪下手最快狠準!!(下)

更多關於APCS的文章請點下方連結,或到本部落格首頁搜尋喔!!

 

 

 

其他閱讀

從哆啦A夢到 iPhone…為何 UI 設計用「圓角」就是比較討喜?

APCS 程式檢定,該從 CJava 還是 Python 下手?

【前端工程師CSS教學】float浮動屬性

AI人工智慧救地球!GoogleAI 保護環境還比人類快 3000

所有APCS認證要知道的事都在這!!()

前端工程師起步的t初學小課(22):數學物件

如何分辨全端,後端和前端工程師?還不知道的可是不行的喔~

 

超夯網頁前端小教室:display與visible

超夯網頁前端小教室:display與visible
超夯網頁前端小教室:display與visible

想學習網頁前端的你絕對不能不知CSS!今天要來跟大家就紹的就是display 屬性與visibility屬性!

本篇介紹網頁前端排版的兩個CSS屬性:display 屬性與 visibility 屬性。

CSS:display 屬性

display:block

對於 CSS 語法來說,網頁前端的每個元素都是一個矩形盒(rectangular box)模型。使用「display」屬性可以決定「盒(box)」的呈現方式。

又「區塊元素(block element)」則會佔用可用寬度的最大值,前後有換行符

以下範例分別顯示了是否有將<span>元素顯示為區塊元素(block element)的結果。在下方的顯示視窗中,按「CSS」可以觀看 CSS 的語法如何設定。

See the Pen display: block by Tedutw (@Tedutw) on CodePen.

上述範例的網頁前端 CSS 語法設定如下:

span.block{
  display:block;
}

display:inline

inline 元素只佔用可用寬度的最大值,並不強制換行。

將上一段範例的<span>元素,CSS 換成「display: inline」的結果如下。跟上一個範例一樣,在下方的顯示視窗中,按「CSS」可以觀看 CSS 的語法如何設定。

See the Pen display: block by Tedutw (@Tedutw) on CodePen.

上述範例的 CSS 語法設定如下:

span{
  display:inline;
}

display:none

「display:none」用來將元素隱藏使用,元素隱藏後就不佔用任何空間,在網頁前端頁面顯示時不會展現出來,就好像該元素不存在一樣。

以下範例中,我們將第 2、4 段設為「display:none」,其他設為「display:block」。

See the Pen display: none by Tedutw (@Tedutw) on CodePen.

上述介紹的「block」、「inline」、「none」都是最常用的 display 參數。display 還有很多其他次常用的參數值,如 list-item、table、table-cell、table-column、grid 等,會在往後的章節中一一介紹

visibility 屬性

visibility 屬性用於指定元素是可見的還是隱藏的。最常見的值是 visible 和 hidden

當我們想要隱藏園素食,有兩個方法:一是上一段介紹的,將「display」屬性設為「 none」參數;二是將「visibility」屬性設置為「hidden」來隱藏元素。

注意:以上兩個方法雖然都能將元素隱藏,但都呈現出不同的結果:

被「display:none」隱藏後的元素,就不會佔用任何的空間,就好像它從來都不存在一樣;而被「visibility:hidden」隱藏後的元素,雖然在網頁前端不會顯示,但仍佔用了對應的空間(就是被隱藏的元素有多大,網頁上空出來的空間就有多大),所以仍會影響排版。範例如下:

我們準備要將以下的例子,第一個<p>元素設為「visibility:hidden」、第二個<p>元素設為「display: none」。

See the Pen visible:hidden-before by Tedutw (@Tedutw) on CodePen.

將以上的第一個<p>元素設為「visibility:hidden」、第二個<p>元素設為「display: none」的結果如下:

See the Pen visible:hidden-after by Tedutw (@Tedutw) on CodePen.

由以上例子我們可知,同樣都是將元素隱藏,第一個<p>元素雖然被「visibility:hidden」隱藏了,但是仍遺留下空間;第二個被「display: none」隱藏的<p>元素則是完完整整的「被消失」,連原本的位置都不見了。

下一張我們將介紹網頁前端排版的另一個 CSS 屬性:Positioning Elements。

 

更多網頁前端相關文章請到本部落格首頁搜尋~

 

 

 

其他閱讀

Python寫出唐鳳「番茄鐘工作法」程式,讓AI幫你集中注意力!

AI機器狗Aibo成最新愛寵 真狗會被取代嗎?

今年10月即將入手的新身分證,它的UI設計有啥亮點?

你是我的眼!Google AI 眼鏡助視障朋友「看見」世界

給零基礎網站前端學員的入門簡介!!

前端工程師一定要懂的JavaScript變數命名規範~

UI學員看過來!即將登場的新式身分證有甚麼特別的呢!()

網頁前端工程師非學好JavaScript的理由有這些~

網頁前端工程師非學好JavaScript的理由有這些~
網頁前端工程師非學好JavaScript的理由有這些~

網頁前端為甚麼要學JavaScript?這篇告訴你!!

今天達內教育要跟大家分享的文章是關於為什麼學習網頁前端一定要掌握 JavaScript ?在前端的世界裡,沒有什麼是 JavaScript 實現不了的,關於 JS 有一句話:凡是可以用 JavaScript 來寫的應用,最終都會用 JavaScript , JavaScript 可運行在所有主要平台的所有主流瀏覽器上,也可運行在每一個主流操作系統的服務器端上。現如今我們在為網站寫任何一個主要功能的時候都需要有懂能夠用 JavaScript 寫前端的開發人員。

而後端代碼是用什麼編寫的則無所謂——不管是 Java,PHP,.NET,Node.js 還是其他——但是用戶端就一定需要一個 JavaScript 開發人員。事實上,現在很多開發人員依然沒有認識到 JavaScript 有多麼強大。學習網頁前端開發技術,掌握 JavaScript 這門語言是必要的,那麼JS有哪些功能和領域呢?一起看一看吧!

1.資料視覺化

資料視覺化是當下大家所推崇的一種互動展示模式,而 Java 擁有 ECharts、Dygraphs.js、D3.js、InfoVis、Springy.js 等多種可實現資料視覺化效果的框架。

2.行動裝置應用

PhoneGap 將 WebView 帶向了移動應用,同時也將 JavaScript 帶向了行動裝置應用。

3.伺服器端

Node.js 是一個能執行 JavaScript 的環境,以 Google Chrome V8 引擎為核心,加上一系列 C/C++ 的套件,讓 Server 端也可以執行 JavaScript 。因此現在前端、後端都可以用JavaScript,任何一個網頁都離不開 JavaScript。

4.全平台應用

一份代碼構建行動裝置、桌面、Web 能夠全平台應用,在 Eletcron 上運行 Ionic,就意味著無限的可能性。

5.遊戲

如果你對網頁遊戲僅僅停留在 Flash 的時代,認為只有 Flash 才能做出非常絢麗的遊戲特效,那就錯了。 JavaScript 也可以做出華麗的特效!

6.VR

利用 3D 遊戲引擎,如 Three.js,你也可以來創建一個 3D 世界。

7.硬件

Tessel 可以直接在設備上運行 JavaScript ,連服務器都不需要,然後像做網絡開發一樣通過用 IDE 和庫去開發它,上傳新的固件只需一句 tessel 推送指令。

8.操作系統

那麼是否有可能僅使用 Node.js 創建一個操作系統呢?NodeOS 了解一下,雖然它是用 Linux 內核來處理各種底層任務,比如硬件通訊什麼的,但是除此之外,使用的都是 Node.js。

JavaScript 在整個網頁中的地位:它屬於前端的核心,主要用來操控和重新調整 DOM,通過修改 DOM 結構,從而來達到修改頁面效果的目的。

以上就是達內教育今天為大家分享的關於為什麼學習網頁前端一定要掌握 JavaScript 的文章,希望本篇文章能夠對正在從事網頁前端工作的人們有所幫助。最後祝各位學員們工作順利,成為一名優秀的前端工程師

 

想閱讀更多關於JavaScript的文章請點下方連結!!

 

 

 

其他閱讀

SEM 關鍵字廣告課程讓高三生提早就定位 開始接案賺錢!

44歲媽咪順利轉職網頁設計師, 家庭事業都得意

擺脫設備工程師血汗職涯, 零基礎的我成功轉職 Python 資料工程師

AI人工智慧追蹤蚊子快狠準 讓你不再被叮卻找不到蚊子

Javascript新手上路(十六):三種訊息框

Javascript初學小課(八):switch條件式

Javascript基礎入門(十四):在函式中使用多重參數

Javascript新手上路(十八):創造物件

Javascript新手上路(十八):創造物件
Javascript新手上路(十八):創造物件

時下最熱門的程式語言之一JavaScript開始學了嗎?正式上課前先看看我們為你準備的文章吧!!(十八)

物件建構式(object constructor)

在上一課中,我們使用物件(object)初始值(initializer)語法來創建了一些 JavaScript 物件。

See the Pen JavaScript 17-Objects-1 by Tedutw (@Tedutw) on CodePen.

以上的 JavaScript例子只建立了單一的「person」。有時前端工程師也需要設定「物件種類(object type)」來創建單一種類的多個物件

此時前端工程師可以使用「物件建構式(object constructor)」創建「物件種類(object type)」。範例如下:

See the Pen JavaScript 18-Objects-Constructor-1 by Tedutw (@Tedutw) on CodePen.

上述的函式「function person」就是一個物件建構式(object constructor):接受 name、nationality、team、BikeNo 這 4 個參數並且指派這 4 個參數為物件的屬性。

上述例子的關鍵字「this」是指當前的物件。注意 this 不具有變數的屬性(因為其值不能改變),僅僅是一個關鍵字。

創造物件

一旦有了物件建構式(object constructor)之後,就可以使用關鍵字「new」來創建同一種類型(type)的新物件(new objects)

See the Pen JavaScript 18-Objects-Constructor-2 by Tedutw (@Tedutw) on CodePen.

 

在上述的例子,變數 b1 與 b2 皆為「biker」類型的新物件。這些物件含有多個屬性,這些屬性被分配給對應的物件值。例如 b1 的 “Valention Rossi” 屬性被分配給物件值 “name”。

上述例子中,b1 的物件名稱與屬性名稱分別列表如下

  1. 物件:name;屬性:Valention Rossi
  2. 物件:nationality;屬性:Italy
  3. 物件:team;屬性:Monster Energy Yamaha MotoGP
  4. 物件:BikeNo;屬性:46

b2 的哪個屬性被分配(對應)給哪個物件名稱也如同上述的形式:

  1. 物件:name;屬性:Valention Rossi
  2. 物件:nationality;屬性:Marc Márquez
  3. 物件:team;屬性:Repsol Honda Team
  4. 物件:BikeNo;屬性:93

照著以上的語法,多練習幾遍,相信你會很快熟悉如何在 JavaScript 中快速建立新的物件屬性

 

更多JavaScript文章請點下方連結!!

 

 

 

其他閱讀

SEM 關鍵字廣告課程讓高三生提早就定位 開始接案賺錢!

44歲媽咪順利轉職網頁設計師, 家庭事業都得意

擺脫設備工程師血汗職涯, 零基礎的我成功轉職 Python 資料工程師

AI 產業革命開始!為何 Python 成人工智慧必備語言?

為什麼學習網頁前端一定要掌握JavaScript

Javascript基礎入門(十六):三種訊息框

Javascript新手上路(十五):函式回傳

簡單好懂的JavaScript(14):在函式中使用多重參數

 

 

 

 

 

 

Javascript新手上路(十七):物件介紹

Javascript新手上路(十七):物件介紹
Javascript新手上路(十七):物件介紹

時下最熱門的程式語言之一JavaScript開始學了嗎?正式上課前先看看我們為你準備的文章吧!!(十七)

JavaScript的變數(variable)可被比喻成用來盛裝「值(value)」的容器。本篇介紹的「物件(objects)」就是變數(variable)的一種,且可以承裝多個值(value)。

一個物件(objects)可以被比喻成一張列有多個值(value)的清單,清單上每個物件的格式為「屬性:屬性值」。所有的屬性、屬性值均以冒號為區隔,範例與說明(「//」開頭的橫行為說明文字) 如以下所示:

See the Pen JavaScript 17-Objects-1 by Tedutw (@Tedutw) on CodePen.

結論:JavaScript 的物件 Objects 就像是容器,能裝多個「有名字」的值。

物件屬性(object property)

JavaScript 中,要存取物件的屬性(object property),有兩種寫法:

  1. 物件名.屬性名
  2. 物件名[‘屬性名’]

以上兩種的範例與說明(「//」開頭的橫行為說明文字)如以下所示:

See the Pen JavaScript 17-Objects-2 by Tedutw (@Tedutw) on CodePen.

順帶一提,JavaScript 有內建「length」屬性,可以計算屬性名稱的字數。承上例,「length」屬性如下所示

See the Pen JavaScript 17-Objects-3 by Tedutw (@Tedutw) on CodePen.

 

物件方法(object method)

JavaScript 中的物件方法(object method)是一個含有「函式定義( function definition)」的屬性,存取物件方法(object method)的寫法如以下所示:

  • 物件名.方法名

如同大家都知道的,document.write() 會顯示資料的內容,這個 write()函式就是物件「document」的方法。「document.write()」就是一個物件方法(object method) 的例子。

 

更多JavaScript文章請點下方連結!!

 

 

 

其他閱讀

SEM 關鍵字廣告課程讓高三生提早就定位 開始接案賺錢!

44歲媽咪順利轉職網頁設計師, 家庭事業都得意

擺脫設備工程師血汗職涯, 零基礎的我成功轉職 Python 資料工程師

AI 產業革命開始!為何 Python 成人工智慧必備語言?

為什麼學習網頁前端一定要掌握JavaScript

Javascript基礎入門(十六):三種訊息框

Javascript新手上路(十五):函式回傳

簡單好懂的JavaScript(14):在函式中使用多重參數

 

 

 

 

 

 

學習網頁前端就一定要懂JavaScript!!

學習網頁前端就一定要懂JavaScript!!
學習網頁前端就一定要懂JavaScript!!

JavaScript是個好東西!!請盡量利用他!!尤其是網頁前端們~

今天達內教育要跟大家分享的文章是關於為什麼學習網頁前端一定要掌握 JavaScript ?在前端的世界裡,沒有什麼是 JavaScript 實現不了的,關於 JS 有一句話:凡是可以用 JavaScript 來寫的應用,最終都會用 JavaScript , JavaScript 可運行在所有主要平台的所有主流瀏覽器上,也可運行在每一個主流操作系統的服務器端上。現如今我們在為網站寫任何一個主要功能的時候都需要有懂能夠用 JavaScript 寫前端的開發人員。

而後端代碼是用什麼編寫的則無所謂——不管是 Java,PHP,.NET,Node.js 還是其他——但是用戶端就一定需要一個 JavaScript 開發人員。事實上,現在很多開發人員依然沒有認識到 JavaScript 有多麼強大。學習網頁前端開發技術,掌握 JavaScript 這門語言是必要的,那麼JS有哪些功能和領域呢?一起看一看吧!

1.資料視覺化

資料視覺化是當下大家所推崇的一種互動展示模式,而 Java 擁有 ECharts、Dygraphs.js、D3.js、InfoVis、Springy.js 等多種可實現資料視覺化效果的框架。

2.行動裝置應用

PhoneGap 將 WebView 帶向了移動應用,同時也將 JavaScript 帶向了行動裝置應用。

3.伺服器端

Node.js 是一個能執行 JavaScript 的環境,以 Google Chrome V8 引擎為核心,加上一系列 C/C++ 的套件,讓 Server 端也可以執行 JavaScript 。因此現在前端、後端都可以用JavaScript,任何一個網頁都離不開 JavaScript。

4.全平台應用

一份代碼構建行動裝置、桌面、Web 能夠全平台應用,在 Eletcron 上運行 Ionic,就意味著無限的可能性。

5.遊戲

如果你對網頁遊戲僅僅停留在 Flash 的時代,認為只有 Flash 才能做出非常絢麗的遊戲特效,那就錯了。 JavaScript 也可以做出華麗的特效!

6.VR

利用 3D 遊戲引擎,如 Three.js,你也可以來創建一個 3D 世界。

7.硬件

Tessel 可以直接在設備上運行 JavaScript ,連服務器都不需要,然後像做網絡開發一樣通過用 IDE 和庫去開發它,上傳新的固件只需一句 tessel 推送指令。

8.操作系統

那麼是否有可能僅使用 Node.js 創建一個操作系統呢?NodeOS 了解一下,雖然它是用 Linux 內核來處理各種底層任務,比如硬件通訊什麼的,但是除此之外,使用的都是 Node.js。

JavaScript 在整個網頁中的地位:它屬於前端的核心,主要用來操控和重新調整 DOM,通過修改 DOM 結構,從而來達到修改頁面效果的目的。

以上就是達內教育今天為大家分享的關於為什麼學習網頁前端一定要掌握 JavaScript 的文章,希望本篇文章能夠對正在從事網頁前端工作的人們有所幫助。最後祝各位學員們工作順利,成為一名優秀的前端工程師

 

想閱讀更多關於JavaScript的文章請點下方連結!!

 

 

 

其他閱讀

SEM 關鍵字廣告課程讓高三生提早就定位 開始接案賺錢!

44歲媽咪順利轉職網頁設計師, 家庭事業都得意

擺脫設備工程師血汗職涯, 零基礎的我成功轉職 Python 資料工程師

AI人工智慧追蹤蚊子快狠準 讓你不再被叮卻找不到蚊子

Javascript新手上路(十六):三種訊息框

Javascript初學小課(八):switch條件式

Javascript基礎入門(十四):在函式中使用多重參數