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):數學物件

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

 

為何各個UI設計師都愛用圓角矩形?真的有比較好?(下)

為何各個UI設計師都愛用圓角矩形?真的有比較好?(下)
為何各個UI設計師都愛用圓角矩形?真的有比較好?(下)

想當UI設計的你不可不知圓角設計的秘密!!圓角設計真的有比較好嗎?(下)

本篇為上篇,下篇請點此為何各個UI設計師都愛用圓角矩形?真的有比較好?(上)

1. 認知負荷論(cognitive load theory)

認知負荷理論是由澳大利亞新南威爾士大學的認知心理學家 John Sweller 於1988 年提出,他假設人類的認知結構由工作記憶和長時記憶組成。其中工作記憶也可稱為短時記憶,容量十分有限,一次只能記下 5~9 條簡單的訊息。

著有《視知覺》(Visual Perception)的瑞士物理學家、藝術家 Jürg Nänni 也曾提出:視網膜中區處理「正圓形」是最快速的,而處理多稜角的形狀則較吃力,速度也較慢。

結合以上理論我們可以得知:「圓角」更容易被大腦處理,因為它能夠降低大腦的認知負荷,也有利於在同樣時間內接受更多資訊。故比起一般的矩形,人類的大腦更願意接納圓潤的圓角矩型。

2. 視覺動線論

視覺動線是指在讀取眼前資訊時,視覺移動時所構成的方向路徑。這表示視覺動線決定了設計的焦點所在、擺放的位置與順序。

人眼在擷取資訊時,通常不一定會意識到有視覺動線隱藏其中,但眼睛卻會自然而然地依照視覺動線的設計來移動。

而圓角的「曲線」能自然地、圓滑地帶動一般人的視覺動線,而不會感到突兀與刺眼。

3. 曲線偏坦論(Contour Bias)

以演化心理學的觀點來看,人在面臨可能造成危害的事物時,會湧現出恐懼、不安與抗拒的情緒,這是人類經歷長時間的演化後遺傳下來的「適應體」,目的是幫助我們存活,提高生存機會。

除了心理學,腦科學也指出當面對尖銳的物體時,大腦的杏仁核活性會增強。杏仁核是邊緣系統的皮質下中樞,有產生情緒的功能,能產生恐懼記憶並引發應急反應,讓身體能逃離危險。

所以,人類對於形狀銳利的物品往往有先天的排斥,如會連想到尖銳物的方角矩型;對於有曲線的圓融物體則會有較高的接納度,讓圓角矩型不被人腦淺意識抗拒。

圓角不是萬靈丹 善用不濫用才是好的 UI

我們已經知道了圓角佔有許多先天優勢,但並非一股腦地選擇圓角就是正確答案。

在 UI 設計的領域,需要考量的有品牌識別、選用字體、色彩配置以及邊緣線條的採用等等,今天企業若要一切都端正穩重,那圓角就不一定是最佳解答;並且若是矯枉過正,使用弧度過大的圓角可能會看起來不專業,造成反效果。

UI師能塑造出怎麼樣的品牌視覺,背後有許多的「眉眉角角」,需要不斷吸收新知、訓練思考,長時間累積自我的美學素養。

 

更多UI或其他程式語言相關文章請點下方連結!!

 

 

 

其他閱讀

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

CSS教學-displayvisible屬性介紹

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

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

新式身分證今年要登場啦!UI人快來看看有何設計要點吧!()

不懂網站前端在做甚麼?零基礎學員非讀這篇不可!!

人工智慧狗狗Aibo超擬真!!真狗要被取代了嗎?()

為何各個UI設計師都愛用圓角矩形?真的有比較好?(上)

為何各個UI設計師都愛用圓角矩形?真的有比較好?(上)
為何各個UI設計師都愛用圓角矩形?真的有比較好?(上)

想當UI設計的你不可不知圓角設計的秘密!!圓角設計真的有比較好嗎?(上)

「圓角矩形」是近年盡人皆知的 UI 設計優勢,自 iPhone 4 發售至今日,到處都可以看到這個乍看簡單、但其實富有深意的幾何圖形。

然而圓角矩形何以能擄獲 Steve Jobs 以至於世人芳心呢?箇中緣由,其實也藏在哆啦 A 夢身上!

「圓角矩形」在現代 UI 中代表簡約、清爽與和平易近人。這些印象是因幾何圖形能帶給人們的心理暗示,任何圖形設計元素如形狀、線條、顏色、紋理和圖案,都能淺移默化地影響人們的感官認知,從而讓平面圖形附上不同的喻意。

乍聽之下有點形而上學,但其實我們從童年開始就不斷在接收幾何圖形的心理暗示了——許多卡通動畫中的角色,也都被賦予了「幾何暗示」!

三角形的小夫、方形的胖虎……哆啦 A 夢中的幾何暗示


▲ 哆啦 A 夢中的五個角色造型都跟個性息息相關(圖片取自 flickr)
 

 

陪伴許多人長大的國民作品《哆啦 A 夢》(ドラえもん),其中的主要角色個個形象鮮明、深入人心,是運用幾何圖形設計角色的好範例:

自戀愛現、在狡猾的同時又常有鬼點子的小夫,從是身形、嘴形到髮型都呈現三角形;而個性粗暴、蠻不講理,但在緊要關頭時又展現了正直的胖虎,無論臉型與身體都呈現寬大的方型。

至於個性善良溫柔、富有同情心的靜香,臉型與整題造型都較圓潤,沒有稜角;至於最備受喜愛的哆啦 A 夢,整個角色從頭到手都是圓型設計。

▲藝術家實際示範如何以基礎的圓型、三角形與方形設計角色形象。

不只日本,歐美的畫家、藝術家、動畫師等角色設計專家們也時常以「幾何造型」為基底,藉此創造出引人入勝、個性鮮明的角色,足見一個好的幾何設計所具有的優勢。

卡通之外 賈伯斯也瘋狂的圓角設計

不只卡通動漫畫之外,許多商業產品也為了讓客戶留下良好的第一印象,採用親民的圓角設計。

話說從頭,要談圓角矩型,就不得不談它成為設計趨勢的轉折點——iPhone 的發布。Steve Jobs 認為:所有物件都有圓角,而且相較於圓形與橢圓形,圓角矩形設計在生活中其實更為常見。

▲ 2020 年發售的 iPhone SE 依然保留標誌性的圓角設計。

1981 年,Steve Jobs 要求當時任職蘋果的電腦工程師 Bill Atkinson 設計出可以快速畫出圓角矩形的方法。當時已能快速繪製出長方形、圓形與橢圓形的 Bill當下便反駁:「圓角的矩形很難用電腦技術畫出來,而且又不必要!」

Steve Jobs 二話不說便把 Bill 從座位上拉起來,指著房間內的白板、桌椅等所有圓角矩型的物品。更帶著他出門上街,指出大街小巷每個小角落的圓角矩形給他看:「你看,到處都有圓角矩形!」

最後,在一個「禁止停車」的圓角矩形路標牌被指出來後,Bill 認輸了。「好啦,我放棄。我回去看看是不是真的跟我想像的一樣困難。」

隔天下午,Bill 就研究出快速繪製圓角矩形的方法。如今在 iOS 系統裡,這個幾何圖形已經成為其 UI 介面傳承的一部分。

不只是「好看」 圓角設計的背後深意

近年 3C 產品硬體設計上都大量使用圓角,UI 介面設計也順其自然地大量採用圓角。除了是為了要「跟上潮流」,圓潤的造型也的確讓產品設計加分。舉凡服務性產品、企業官網、社群媒體、網路商店等,需要 UI 介面的地方全都導入圓角設計。但是圓角「好看」的背後,到底是什麼原因?

人們為何會熱愛圓角的科學根據尚未定論,大致有以下三種說法:

 

本篇為上篇,下篇請點此為何各個UI設計師都愛用圓角矩形?真的有比較好?(下)

更多UI或其他程式語言相關文章請點下方連結!!

 

 

 

其他閱讀

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

CSS教學-displayvisible屬性介紹

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

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

新式身分證今年要登場啦!UI人快來看看有何設計要點吧!()

不懂網站前端在做甚麼?零基礎學員非讀這篇不可!!

人工智慧狗狗Aibo超擬真!!真狗要被取代了嗎?()

前端工程師必讀之新手上路(22):數學物件

前端工程師必讀之新手上路(22):數學物件
前端工程師必讀之新手上路(22):數學物件

想當前端工程師的你,時下最熱門的程式語言之一JavaScript開始學了嗎?先來看看我們為你準備的文章吧!!(22)

Math物件的屬性

Math 是 JavaScript 的原生物件,可進行多種數學運算。該物件不是用函式建構式來生成,所有的屬性和方法都必須在 Math 物件上呼叫。

Math 物件包含多種屬性,列舉如下表:

 

    1. 屬性
    2. 描述
    1. 歐拉常數,是自然對數函數的底數,約為 2.718。
    1. LN2
    2. 2 的自然對數
    1. LN10
    2. 10 的自然對數
    1. LOG2E
    2. 以 2 為底的歐拉常數(E),其值約為 1.442。
    1. LOG10E
    2. 以 10 為底的歐拉常數(E),其值約為 0.434。
    1. PI
    2. 圓周率,其值約為 3.14159
    1. SQRT2
    2. 2 的平方根,其值約為 2.414
    1. SQRT1_2
    2. 1/2 的平方根,其值約為 0.707

 

以上 Math 物件的屬性,範例如下:

See the Pen The Math object by Tedutw (@Tedutw) on CodePen.

Math物件的方法

Math 物件除了有許多屬性外,也有許多方法,列表如下:

 

    1. 方法
    2. 描述
    1. abs(x)
    2. 不用懷疑,就是回傳x的絕對值
    1. acos(x)
    2. 回傳x的反餘弦(三角函數,數學符號是arccos)
    1. asin(x)
    2. 回傳x的反正弦(反三角函數,數學符號是arcsin)
    1. atan(x)
    2. 回傳x的反正切(反三角函數,數學符號是arctan)
    1. ceil(x)
    2. 回傳離x最近的整數:若x為浮點數則向上取整數;x為整數擇取x本身
    1. cos(x)
    2. 回傳x的餘弦(三角函數,數學符號是cos)
    1. exp(x)
    2. 回傳值為以x指數的E
    1. floor(x)
    2. 回傳離x最近的整數:若x為浮點數則向下取整數;x為整數擇取x本身
    1. log(x)
    2. 回傳x的自然對數
    1. max(x,y,z…,n)
    2. 回傳最大值
    1. min(x,y,z…,n)
    2. 回傳最小值
    1. pow(x,y)
    2. 回傳值為x的y次方
    1. random()
    2. 隨機回傳0與1之間的任一數
    1. sin(x)
    2. 回傳x的正弦(三角函數,數學符號是sin)
    1. sqrt(x)
    2. 回傳值為x的平方根
    1. tan(x)
    2. 回傳x的正切(三角函數,數學符號是tan)

 

以上 Math 物件的方法,範例如下(不包含三角函數):

See the Pen The Math object-method by Tedutw (@Tedutw) on CodePen.

綜合練習

讓我們來撰寫一個 JavaScript 程式:省先彈出一個視窗,要求使用者輸入數字。使用者輸入數字後,即會出現警示視窗,顯示該數字的平方根。

var x = prompt("請輸入一個數字","");
var answer = Math.sqrt(x);
alert(x+" 的平方根是 "+ answer);

執行結果如下:

此時前端工程師輸入「64」,則會有以下結果:

JavaScript 的數學物件就介紹到此。若能善用數學物件,則可減省時間。不必自己寫函數。下一章我們將介紹另一個 JavaScript 的原生物件——日期物件。

 

更多關於前端工程師HTML的文章請到本部落格首頁搜尋喔!!

 

 

 

其他閱讀

達內教育評價:別再抱怨不景氣了!高中生靠SEM接案創業每月額外收入7

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

痛失英才!台灣人工智慧學校執行長陳昇瑋辭世

人生是自己的, 達內教育評價要靠自己來體驗!

Javascript新手上路(十九):Method

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

想學習網站前端的零基礎學員不可不知的新手常識!!

 

 

 

 

一次讓你弄清楚全端,後端,前端工程師差在哪裡!!

一次讓你弄清楚全端,後端,前端工程師差在哪裡!!
一次讓你弄清楚全端,後端,前端工程師差在哪裡!!

今天要來幫大家一解前端工程師與後端工程師的差異~連全端工程師也一併送喔!!還不知道的同學請享用~

一、前端方向

網站的“前端”是與用戶直接交互的部分,包括你在瀏覽網頁時接觸的所有視覺內容–從字體到顏色,以及下拉菜單和側邊欄。這些視覺內容,都是由瀏覽器解析、處理、渲染相關 HTML、CSS、Javascript 文件後呈現而來。

技能與工具

前端開發,就是要創造上面提到的網站面向用戶的部分背後的代碼,並通過建立框架,構建沉浸性的用戶體驗。為了實現這個目標,開發需要熟練運用下列語言、框架、工具庫:

三大語言:HTML,CSS,和 JavaScript

此外,掌握 jQuery 和 LESS 等工具庫也很重要,它們能幫助工程師以更高效的方式編碼;

很多前端開發崗也要求 Ajax 方法的使用經驗,它可以幫助你使用 Javascript 在後台從服務器拉取數據,協助實現頁面的動態加載。

打個比方,前端工程師的工作專注於“房屋”裝修,而蓋房子的工作由後端工程師負責。

通過一些專門的工具,前端工程師與設計師/用戶體驗分析師密切合作,幫助構建原型或是線框圖,參與產品開發到發布的全過程。

一些前端工程師甚至能準確定位影響用戶體驗的特定問題,並給出建議或是代碼解決方案,對產品設計帶來積極影響。

在專業能力外,與其它團隊協作,以理解特定目標、需求、機遇,以及高效的執行力也非常重要。

這聽起來工作內容很多,但也回報豐厚。 “我是一名技術人員,也是一名設計者,在數字平台上使用標記語言和代碼修改視覺元素並與之互動是很自然而有趣的體驗,”有八年前端開發經驗的Mikey Ilagan 說“這讓我能夠直接影響到用戶體驗,操縱應用和網站裡用戶所見並直接與之交互的元素,這非常棒!”

總之,前端工程師要為後端工程師搭建的“房屋”進行內部設計和裝修工作。裝潢風格由房屋所有者指定。 Apptix 的產品市場負責人 Greg Matranga 表示:“前端工程師有時更容易為他們的工作感到振奮,因為他們有更廣闊的空間發揮自己的創造力。”

二、後端方向

是什麼給網站前端提供支持?數據存放在哪裡?這就涉及後端內容了。網站後端包括服務器、應用還有數據庫。後端工程師構建並維護這些組件,為網站提供多方面支持。

技能與工具

為了讓服務器、應用、數據庫能夠彼此交互,後端工程師需要具有如下技能:

用於應用構建的服務器端語言:PHP, Ruby, Python, Java, .Net 等;

數據相關工具:MySQL, Oracle, SQL Server 等;

PHP框架:Zend, Symfony, CakePHP等;

版本控制工具:SVN, CVS , Git 等;

還要熟練使用 Linux 作為開發和部署環境。

後端工程師使用這些工具編寫乾淨、可移植、具有良好文檔支持的代碼來創建或更新 網站 應用。但在寫代碼之前,他們需要與客戶溝通,了解其實際需求並轉化為技術目標,制定最有效且精簡的方案來進行實現。

“我熱愛後端開發因為我喜歡操縱數據”,資深後端工程師就職於 Wildbit 的 JP Toto 說。 “現在共有和私有 API 已變成移動設備、網站以及其它互聯繫統交換數據的必備通道。創建對大家有用的 API 是我工作裡非常鼓舞人心的部分”。

三、全端

有時前後端之間並沒有明確的界限,“前端工程師通常需要額外學習後端技巧,反之亦然,尤其在特定市場條件下”,Matranga 說:“工程師需要跨領域知識,有時甚至需要成為全才。”

全端工程師,最初是6年多以前由 Facebook 帶動的概念。全端的核心,是指這批工程師能夠承擔包括前端、後端在內的所有功能開發任務,他們擁有一個技能全家桶。

“能夠同時承擔服務器端和客戶端工作會為你帶來更多機會,” Grovo 的全端工程師Federico Ulfo 說“當然這也就意味著更多的挑戰。以廚藝作類比,掌握烹飪和烘焙都需要時間與經驗積累,同時掌握兩者要花費更多精力。照著菜譜做誰都可以,我此處所說的是做出真正美味東西的能力。”

技能與工具

全端工程師也通常在服務器端進行編程工作,但他們熟練前端語言,能夠操縱網站面向用戶的部分。基本上可以形容他們是百事通。

具體工具依項目和客戶需求而定,全端工程師需要對網站 架構的每一個層次都有足夠的了解:搭建和配置Linux 服務器,編寫服務器端API,利用客戶端Javascript 代碼驅動應用,將設計層面的東西轉化到實際的CSS 代碼。

掌握並使用大量工具的同時,全端工程師需要敏捷地分配服務器端和客戶端任務,提供解決方案並對比不同方案的優劣。

想知道更多關於前端工程師的相關知識嗎?快到本部落格首頁搜尋吧!!

其他閱讀

JavaScript入門教學#21|陣列的方法與屬性

JavaScript入門教學#22|數學物件

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

差點被拋棄的冠軍程式語言-Java入門教學(一)Java 身世之謎/寫出第一個Java程式

Javascript新手上路(十九):Method

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

想學習網站前端的零基礎學員不可不知的新手常識!!

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

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

對網站前端有興趣嗎?想踏入這行卻還不清楚網站前端是在做甚麼嗎?那你看這篇就對了!!

很多想要轉行的朋友紛紛把目光投降了網站前端技術。 網站前端作為一個薪資前景好的熱門行業,吸引了很多人的加入。但是對於剛剛準備轉行的朋友來說並不知道網路前端是什麼?零基礎怎麼學習Web?下面就來和小編一起看一看文章內容吧~

 

零基礎怎麼學習Web?

 

一、網路前端是什麼呢?

 

當你在網絡、APP上瀏覽網頁時看到的所有漂亮的頁面都是由網路前端實現的,在我們看來簡單,但是一個小小的按鈕,一個小小的符號都是網路前端工作者仔細斟酌過的。

 

網路前端工作相對於其他軟件開發工作是比較容易入門的,但是深入學習會比較困難,它需要從業人員掌握一定的設計、代碼、交互技能,有的公司還會要求有一點SEO技能。達妹帶你看看零基礎怎樣入門?

 

二、零基礎怎麼學習Web?

 

網路前端培訓零基礎入門有兩種方式:

 

· 第一,通過自己自學進入該行業

 

· 第二,通過參加Web培訓機構入門

 

通過自身學習入門你需要通過的是最開始學習時多看看視頻,有一定了解後針對自身情況挑選合適的書籍,進行知識性的查漏補缺。當然這學習的過程很重要,需要將自己學習的知識串成知識點時常溫習。平時多練習代碼,堅持一段時間之後一定能有所成就。最好可以挑選合適的教育機構,這樣可以減少你學習的時間,有針對性的學習。

 

三、網路前端技術的三個階段

 

分別是前端美工、前端開發和前端架構。

 

前端美工主要負責最基本的一些平面設計,視覺互動設計,不需要參加太多代碼問題,中級網路前端會寫js,應用js,用戶交互等,前端架構是開發、優化框架和服務器,用戶體驗等涉汲就比較廣。三者薪資根據等級不同也逐漸升高。

 

四、網路前端開發包括三個要素

 

HTML5、CSS和JS,是網路前端開發包括的三要素,當然服務器端語言以及基本的PS、視覺設計也是需要了解的。 網路前端既需要與上游的視覺互動設計師、視覺設計師和產品經理溝通,又要與下游的服務器端工程師溝通,需要掌握的技能比較多。所以對於有些知識只需要入門不需要精通,有些知識卻需要融會貫通,這對網路前端開發的學習比較重要。

 

五、HTML5和網路前端的區別

 

HTML5是現在網路前端開發一項重要的內容,由於技術的不斷發展,市場需求的不斷變化,加之新媒體時代的衝擊,例如微信的小程式,這都決定了HTML5的重要性,未來HTML5工程師的需求一定會大大增加,由於這是新鮮產物,市場的需求一定是向偏年輕化需求發展,因為他們的接受能力和學習能力高於中年人,所以現在進入HTML5的學習和網路前端的學習時機很好。

更多程式語言或網路前端相關文章請點下方連結或至本部落格首頁搜尋!!

其他閱讀

JavaScript入門教學#22|數學物件

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

JavaScript入門教學#21|陣列的方法與屬性

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

Python學員找工作免擔心!!就業種類選擇看這篇!!

原來用Python輔助Excel的好處這麼多?!

純國產技術木蘭被懷疑抄襲Python?!到底誰是正宗?

 

新式身分證今年要登場啦!UI人快來看看有何設計要點吧!(下)

新式身分證今年要登場啦!UI人快來看看有何設計要點吧!(下)
新式身分證今年要登場啦!UI人快來看看有何設計要點吧!(下)

身為UI人一定不能錯過今年要登場的新式身分證設計!!快一起來看看吧!!(下)

本篇為下篇,上篇請點此新式身分證今年要登場啦!UI人快來看看有何設計要點吧!(上)

卡面設計簡約質感,劃出你的隱私空間

新式身分證除了極簡風的 UI 介面之外,到底還有哪些亮點呢?

翻翻我們手中的現有身分證吧!現有的卡面樣式是 14 年前的設計,在今日文武百業都數位化的時代,早已不敷現況使用。政府為展現數位化決心、並因應逐日被重視的個資隱私,卡面與功能都已大幅變化,讓我們逐一細說如下:

一、隱私保護升級、遺失也不怕洩個資

除充滿質感的外觀,資訊呈現上也做不少調整。伴隨著個資保護意識抬頭,新版 ID 的 UI 介面一改過去拿出身分證便個資全都露的尷尬感,將大多數的個人資訊儲於晶片內。

新式 ID 僅保留個人基本資料:姓名、身分證字號、出生日、人像等,至於其他更私密的資訊如父母姓名、出生地等,都於晶片內加密保護,且需經本人同意、輸入身分證後 6 碼及自訂的 2 組密碼後,機關才能讀取資料。

萬一不小心遺失身分證,更可直撥「1996」專線掛失,自然人憑證就立即停用!失主也可申請紙本臨時證明,供掛失補辦期間使用。

而原有的身分證因為有密碼保護機制,所以毋需擔心晶片內容被讀取、盜用; 而晶片則是封裝後無法再取出、無法被側錄或複製偽造。

除此之外,數位身分證沒有儲存的功能,所以使用時不會留下紀錄,避免被第三方監控,真正保障各資安全。

二、兼具駕照健保卡功能,還可綁定手機!

今年 10 月後,若數位身份證執行狀況順利的話,政府將進入開發「行動身分證 APP」的階段,並將身份證與健保卡、駕照等證件「多卡合一」!如此一來,出門就真的不用帶一堆證件在身上,無論是要看病、驗車、遇到警察臨檢等等,只需一機在手便可搞定要各項大小事!

三、辦事不用往外跑,數位 ID 網上搞定!

身分證數位化的最大特點就是,任何需要證件才能辦理的業務,也都同步數位化,能在線上直接辦理。透過政府骨幹網路 (T-Road) 串接政府各機關、部門的獨立系統資料股,民眾最快在今年 10 月之後,就能在網路上辦理公投連署、健保、社福、津貼、勞保、年金、護照簽證等 16 項業務!這樣就不需要為了印身分證、臨櫃申辦事務而東奔西跑了

新版身分證不僅在 UI 介面的設計有乾淨利落、資訊分明的特點,更在技術、使用、便民性上有著巨大的突破!未來在其他功能上的結合,更是指日可待!讓我們一同期待 10 月份新卡的蒞臨吧!

 

更多UI相關文章請點下方連結或至本部落格首頁點選喔~

 

 

 

其他閱讀

JavaScript入門教學#18|創造JavaScript物件(Objects)

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

差點被拋棄的冠軍程式語言-Java入門教學(一)

Java 身世之謎/寫出第一個Java程式

APCS 是什麼?所有 APCS 檢定的問題這篇都會回答你!

品牌重塑UI怎麼做?奧迪,福斯絕佳範例!!()

UI,UX設計課程沒教的設計心理學就看這篇!!

優質SEO速成班:長尾關鍵字提高轉化率

新式身分證今年要登場啦!UI人快來看看有何設計要點吧!(上)

新式身分證今年要登場啦!UI人快來看看有何設計要點吧!(上)
新式身分證今年要登場啦!UI人快來看看有何設計要點吧!(上)

身為UI人一定不能錯過今年要登場的新式身分證設計!!快一起來看看吧!!(上)

睽違14年,今年10月即將入手的 eID,新功能你期待嗎?

還記得 2018 年內政部舉辦的「新版身分證」設計競賽嗎? 當時任職 HTC,參與 HTC Sense UI 介面設計與 HTC Themes 設計的魯少綸,他的作品「形|SHAPE」以簡潔的 UI 廣獲評審青睞,獲得「設計獎」,更成為新式身分證的設計依據。

▲ 新身分證得獎做品:左圖為設計獎、右圖為人氣獎

不過在網路票選過程中,「形|SHAPE」僅獲得 46 票,與獲得近 10 萬票卻只得了一個「人氣獎」的作品「嶼民在地」票數相差懸殊,引發網友們不滿。「不禮貌鄉民團」在臉書上貼出比較,質疑為何 9 萬 6 千票的作品卻輸給僅有 46 票的作品,引發論戰。

對於爭議不斷的新身分證競賽結果,設計師聶永真表態:不要用民粹霸凌設計獎得主!究竟新式身分證除了極簡風的 UI 介面之外,到底還有哪些亮點,值得設計師為它發聲呢?

新身分證 UI:高延展性、整齊易讀、具包容性,獲評審青睞

▲ 新身分證版面切成單純的左右兩塊,給予長短不一的字數有很大的延展性,版面也更整齊易讀。

左右區塊排版,簡潔易讀

據「身分證再設計官網」所寫的官方勝選理由,「形|SHAPE」以整齊的排版勝出。其實由上圖不難發現:「形|SHAPE」無論是正面、反面,都只有切成單純的左右兩個區塊。正片的左區塊約佔了整體版面的 2/3、背面則占了約 3/4。

延展性強:無論文字多長都能排進去!

作者將姓名、地址以及「中華民國國民身分證」的中英文字樣⋯⋯等等字數較多的資訊,巧妙的置於較大的左區塊,讓整張身份證有整齊分明的排版;且左區塊的文字內容有足夠的空間可以延展,因此無論地址、姓名的長度多長,都能在雙語的排版上明暸易讀。

低調呈現台灣意象 質感律動感都到位

另外,作者也將代表台灣土地的圖樣,低調的詮釋在細節中:身分證簡約的白底,搭配玉山山脈的等高線圖的壓紋,上頭還印有台灣島狀的光影變化箔膜。對比其他直白地使用具體的台灣島外型、101 等圖樣,兼具律動感與藝術感的等高線線條作為背景,確實是十分令人玩味的呈現方式。

 

本篇為上篇,下篇請點此新式身分證今年要登場啦!UI人快來看看有何設計要點吧!(下)

更多UI相關文章請點下方連結或至本部落格首頁點選喔~

 

 

 

其他閱讀

JavaScript入門教學#18|創造JavaScript物件(Objects)

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

差點被拋棄的冠軍程式語言-Java入門教學(一)

Java 身世之謎/寫出第一個Java程式

APCS 是什麼?所有 APCS 檢定的問題這篇都會回答你!

品牌重塑UI怎麼做?奧迪,福斯絕佳範例!!()

UI,UX設計課程沒教的設計心理學就看這篇!!

優質SEO速成班:長尾關鍵字提高轉化率

前端工程師不能錯過的JavaScript變數命名規範!!

前端工程師不能錯過的JavaScript變數命名規範!!
前端工程師不能錯過的JavaScript變數命名規範!!

今天要來跟大家分享前端工程師必學的JavaScript變數命名規範!!西往這篇文章能幫助到大家~

JavaScript變數命名規範:只能由英語字母,數字,下劃線,美元符號$構成,並且不能以數字開頭,並且不能是JavaScript保留字。

前端工程師工程師要知道的JavaScript數命名規範

 

下列都是非常正確的變數命名:

 

var haha​​ = 250;

 

var xixi = 300;

 

var a1 = 400;

 

var a2 = 400;

 

var abc_123 = 400;

 

var $ abc = 999;

 

var $ o0_0o $ = 888;

 

var $ = 1000;

 

var _ = 2000;

 

var ________ = 3000;

 

下列都是錯誤的命名:

 

var a-1 = 1000; //不能有怪異符號

 

var a @ = 2000; //不能有怪異符號

 

var 2year = 3000; //不能以數字開頭

 

var a ¥ = 4000; //不能有怪異符號

 

var a *#$#$ @ = 5000; //不能有怪異符號

 

var a b = 300; //不能有空格

 

下列的單詞,叫做保留字,就是說補充當做變數名

 

abstract、boolean、byte、char、class、const、debugger、double、enum、export、extends、final、float、goto

 

implements、import、int、interface、long、native、package、private、protected、public、short、static、super、synchronized、throws、transient、volatile

 

需要注意大寫字母是可以使用的,並且大小寫敏感。最初A和a是兩個變數。

 

1 var A = 250;

 

2 var a = 888;

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

其他閱讀

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

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

Python 變身告白神器、還會幫你整理電腦?6 Python 隱藏版技能一次學

紅到被山寨!中國自主開發語言「木蘭」竟是抄襲 Python

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

Javascript初學小課(十七):物件介紹

Javascript基礎入門(十八):創造物件