javascript 翻牌記憶小遊戲

最近教學講到了javascript,所以我就想說與其每個指令一個一個說明,倒不如直接拿個實例來講解比較完整,也比較好了解實際的應用會是如何,但是大多的實例其實也都只使用到一小塊的功能,所以最後我決定找個小遊戲來做練習,首先找上的是翻牌記憶小遊戲,透過這個小遊戲,希望讓學生一次了解到使用原生的javascript,如何去做到對DOM元件的控制.

翻牌記憶小遊戲

這樣一個範例講解下來,也花了一天的時間,過程中也讓自己對js有更多的熟悉,不然前陣子都是使用jQuery,己經快把原生的程式都忘光了。

在這個範例中,我希望學生學到的內容包括了:

  • 啟動遊戲前的遊戲畫面製作及半透明遮蓋效果
  • 進入遊戲前對牌面做亂數出牌的算法及迴圈的使用
  • 對牌面的動畫操作及變形效果的使用
  • click事件綁定的做法
  • 抓取事件元素的內容並進行判斷
  • 全域/區域變數的差別及陣列的應用
  • setinterval及時間函式的使用
  • 結果判定及後續的動畫配合(翻回去或是消失)
  • 遊戲結束後的成果說明
  • 重置遊戲時,如何初始化相關的變數/陣列/牌面等等

課程己經過了一半,目前才剛講完所有網頁設計相關的技術的基礎(PHP/MySQL/Javascrip/Html/CSS),接下來的時間主要都是整合實例的演練,希望學生可以吸收得了




終於收到乙級證照

付款後幾乎又過了兩周,終於今天收到證照寄來了,

網頁乙級技術證

從五月報名到十一月拿到證照,整個全國檢定的流程走完也六個月過去了,可惜的是這張證照目前在業界的知名度不如傳統的水電或機械類證照,希望未來可以有更多企業認同這張證照及背後所代表的技術性。




PHP程式設計新開職訓班介紹

班導那邊說下半年會一口氣開兩個職訓班,內容一樣是教PHP網頁設計,兩個班級的差別在於一個是920小時,另一個是600小時。

PHP資料庫網頁程式應用(泰山) 第01期-600小時

這個班主要在教程式設計的內容,和另一個班的差別在於少了網頁乙級證照的輔考及視覺美術軟體的教學(photoshop & illustartor),適合想利用短時間學會網頁程式設計並投入職場的人士。

PHP資料庫網頁設計(泰山) 第02期-920小時

這個班是延續之前幾期的課程內容,包含了視覺美術,網頁前端,資料庫及後端程式語言,最重要的是還有網頁設計技術士乙丙級的輔考,乙級會有難度,但丙級是至少可以拿到的,適合完全沒技術基礎,待業時間長的人士加入。

我自己上過了五個職訓班,認真來說,轉技術職絕對不是一件輕鬆的事,也別奢望上完一門課就突然變成程式設計的專業人士,職訓班可以縮短你入行的摸索期,但是想要可以獨當一面,靠寫程式糊口的話,至少得再花個一年自行進修和練習才足夠,目前我那班結訓的同學中已經至少五人是在從事程式設計的工作了,其中四個人是非相關科系及無程式技術經驗的,因此鼓勵有需要的朋友可以好好參考一下。

 




[訓後心得]PHP語言與資料庫程式設計應用

這次的課程期間長達五個半月,中間還分別跨了國曆新年和農曆新年,一共149天,上課日100天。

這次的課程內容涵蓋範圍也很廣,因為班導一開始的課程設計是針對網頁乙級國家技術士,所以在PHP的部份有上了不少和題目有關的實例,透過實例來帶出一些程式流程和編碼的學習也算是不錯的一個教法,這比起之前在委外的補習班的教法更可以啟發學員的能力。

這次甄選進來的學員也是態度比較正面的一群,雖然程度的落差是目前職訓班一直都有的問題,但我的觀察是,如果學習態度好,那至少整個上課的氣氛不會太差,之前遇過那種只是想來混時間領津貼的,上課睡覺打呼就算了,偶爾還會干擾到其他學員,或是態度不佳,和老師對嗆之類的。

整體來說,我這次學到的東西比起之前東一塊西一塊的學,這次是紮實多了,之前的補習班教學的確都是從基礎開始教,什麼九九乘法表,印出星星排成三角形之類的,雖然好象什麼都有教到,但最終無法整合成一個完整的作品;而這次的教學採用的做法都是一次一個完整的實務案例,這周可能先講解其中一個部份來教迴圈或陣列,下次換另一個部份來講解資料表如何連線,如何取值等等,至少每個主題都可以看到完整的成果,而不只是看到一個單一指令執行的結果而己,即便是Phtoshop和Illustrtor的課程,班導的教法也是只花一天把基本操作講完後,然後就丟了大量的練習題和實例題給我們去做大量操作的練習,在民間補習班則是光操作就教了一周,然後也沒有太多實例可以練習應用,學完我也忘光了。

講師素質的部份,我覺得僅是恰如其份的程度,畢竟職訓班因為政府政策的關係,不像很久以前的職訓聽說可以嚴格挑選學員的背景條件,因此當很多學員是非本科系的時候,講師在速度和教材的取捨上自然無法滿足所有人的需求,這點倒是我上過的五個職訓班都有一樣的問題,講得再簡單也還是有人就是不懂,所以我到後來都是上課聽重點,然後自己去補強自己想額外學的;另外這次的PHP和MySQL都是用純文字編輯器在上課,我覺得比之前用Dreamweaver來教要實際的多了,這對於了解程式的運作及資料庫的語法會比較有幫助,真的都把基礎打穩了,再去考慮使用工具來簡化操作。

在訓練目標上,因為這次的目標是訂在國家技術士網頁設計乙級上,所以課堂氣氛是比較活絡一些,畢竟大家有一個共同的短期目標在努力,話題的重心就會比較集中,也比較有可以交流的內容,先前的職訓班大多有一兩周的專題製作來做為課程的目標,但是因為專題製作容易發散,最後往往都不了了之。

環境的部份,公家單位提供的上課環境真的沒話說,山上空氣清新,往山下挑望的景觀也不差,上課用的電腦設備也是一等一的,可以參考我網誌前幾篇的介紹。

整體來說,這次的受訓體驗是正面的,舒服的,而且也有確實學到東西,因為時間長,學員間也有不錯的革命情感在,受訓後期還特別辦了一場徵才會也是很讓人感動的,據說也是場區第一次這樣辦;

結訓後兩天,己經開始在丟履歷等面試了,這過四十歲的年紀才要來轉程式設計,我也知道困難度不是一般般,這兩天有打電話來主動給工作的都是房仲和保全,實在很令人不甘心,希望再拚拚看,不過學程式的另一個保障也是我昨天在面試時和某公司提到的:”就算最後真的沒找到程式設計的工作,我也可以自己轉接案或純創作,這是程式設計可以不依賴特定公司或行業的優勢",我大不了就當個會寫程式的社區保全,干!




[DAY-100]結訓/廠商徵才活動

今天是參訓的最後一天了,沒有課程要上,所以預定的活動是打掃環境後等待下午的面試,早上班導一來就先把印製完成的乙級技術士證照發給昨天考到證照的同學;跟同學要了一張來拍照做紀念,應要求把個資部份上馬賽克,總編號的部份加上本班這次過的三位,一共是20位,開辦網頁乙級四年多快五年以來,只有20位拿到證照,這過照率真的有點低啊,希望今年的第二梯次全國檢定及下一班PHP班能多考過一些人。

乙級技術士證照

然後是發放結訓證書及獎狀,有全勤獎,服務奬和學習成績獎,我拿到的是學習成績第一名奬,還有一份鋼筆組當獎品,滿不錯的。

學習成績優秀獎

結訓證書及優秀獎狀獎品

之後是打掃環境及閒聊等下午的徵才活動,我則是把NETFLIX上架的”從零開始的異世界生活”第一季看完了,果然雷姆才是王道啊!中午同學有訂便當,我則是下山到吉米拿吃義大利麵,雖然離家很近,但以後會特別再過來吃東西的機會應該很少吧;下午一點左右大家移動到會場教室集合,這次一共來了五個班級,除了本班的PHP程式外還有圖文影音編輯班,物聯網班,冷凍空調及光纖通訊班,廠商也都是相關廠商,一開場是由新店就業服務站進行活動說明,然後是場長致詞,主要是說這是第一次辦這樣的場內徵才活動,相關單位都很努力的促成,除了鼓勵學員多多面談推銷自己之外,也希望廠商能提供協助,幫助大家就業;

場長致詞

參訓學員

之後是廠商的自介,和我們程式設計有關的有五家,其中三立電視是這次帶來最多職缺的廠商,包含了數位圖文編輯,程式設計及設備維護人員都有職缺,而五福旅行社即將上櫃,則是最有前景的廠商,在就服站介紹完可以提供的就業服務及相關的津貼輔助後,徵才活動就正式開始了,這次是開放一樓的走廊空間,平時這裏很少開燈,這次一口氣要塞進上百人進行活動也是很熱鬧的。

今天難得開燈,全亮,左邊就是我們的上課教室

徵才活動現場

我這次是五家相關廠商都有去面談,不過大多今天來的都是人資主管,難以談到比較深入的技術工作內容,所以感覺是先來看看基本資料,然後再回去請技術主管評估有沒有二次面試的需要,不過我覺得有兩家有談得比較有感覺,應該是很有機會去做二次面試,希望年齡問題可以不要成為限制,大多數同學也是能談都儘量談,爭取該有的工作機會,希望最終都有好消息。

徵才結束後回到教室哈啦等下課,拍了張合照結束這八百小時的歷程,準備開啟另一段新的人生旅程。




[DAY-099]網頁乙級術科考試

今天是重要的考試日,大家果然都沒遲到,因為是團體報名,所以八點十五分時有承辦老師來帶隊上考場,上午的行程是抽崗位號碼及軟體安裝設定,崗位號由一號同學去按,然後會在投影幕上秀出每個人分配到的崗位號碼,然後就進場進行環境設定,環境設定的時間是九十分鐘,但是安裝xampp及設定參數只要十來分鐘就可以搞定了,所以我順便把需要用到的資料夾都先開好,也開了一個檔案把常用的語法先打好,比如do{}while(),<input >的五種type 結果打得正起勁時,監評長拿起了麥克風說:”這九十分鐘是安裝軟體和測試用的,應該和試題無關,請不要做一些和試題有關的預先設定作業”,雖然這麼說了,但是試場規則只有禁止從外面帶東西進來,並沒有禁止我在自己的電腦上產生東西吧,所以我還是多打了十來行的程式片斷才離開;據說這九十分鐘的安裝時間是今年才開始實施的新流程,先前的考生有反映過四小時的解題加軟體安裝要過真的很難,所以今年才多加了這九十分鐘除了安裝xampp之外,如果是使用framwork來解題的,則需要有額外的設定安裝時間考場提供的framework有cakephp,CodeIgniter,如果時間來得及,我滿想學學laravel的然後再建議技檢把一些新的framework也納進來,不然jquery還在1.8.3版,實在是太舊了,這要怎麼去說服外面的市場說這證照出來的技術士是跟得上時代潮流的?

回到教室吃午餐及閒聊,看大家也討論得滿開心的,一直到十點五十分才又上去準備抽試題及正式考試,抽試題是由崗位號最小的人去抽,所以由崗位1號的19號同學去抽,抽中四號題目,然後再按照崗位號碼輪下去,結果我是第四題,當場絕望,打算進去當練習就好,實際下去考,因為有先把程式片斷準備好,其實速度己經是比之前自己的三次練習要來得快了,但是因為還是不夠熟,所以做完幾個後台的部份己經兩個小時,我心中算了一下大概己經是做不完全部了,所以乾脆拿來試試昨天想到的新解法,試了一下的確對於解題是有幫助的,可惜的是我不夠熟這新解法,加上我在做首頁的選單時鬼打牆的卡了半個小時,到三小時我只做好了一半的動作,最後一小時把後台的幾個功能完成,做到沒有負分也剛好時間到了,監評來看時也很乾脆,直接問我有沒有完成,需要評分嗎?如果沒有要評分,直接簽名就可以離開了,離開後我才想到我沒有把資料夾照要求的改名放到桌面,不過反正沒過,算了。

在準備室時和大家討論時己經確定有兩位同學考過拿到證照了,都是抽到第二題,之後抽到第三題的二號同學出來也有及格,就有三張了,第三題能過真的是不簡單,後來聽班導和監評閒聊,據說之前有過的大多是抽到第一題的人,而且是使用DW來做的,這次我們是過第二題和第三題,他們也很驚訝。

下來教室休息時,己經有幾位同學在討論要參加第二梯次的檢定考了,我也打算再考一次,因為我的問題就真的只是熟練而已,反省一下自己,雖然三四題我都練習了至少三次,但每次都有新的解法和流程上的不同,結果就是不夠熟練,針對檢定考試應該是要固定一套解法然後熟練它就好,再來就是之前比較死板的想照著正統的解法來做,依照題目要求的順序來按部就班解題,但這會照成容易拿分的動作反而被壓到最後才做,前面一直在做花時間但做完只有五分的動作,雖然在後兩天有想到針對考試的新解法流程,但己經太晚而來不及熟悉了。

話說,早上在準備室等時,拜班導的推薦所致,場長來看大家時特別把我點出來,說我做的這個網誌有起到了一些推廣的作用,下一個班別有104個人報名,如果我有考到這證照,可以考慮來當外聘教師,講得我很不好意思,而且我最終沒考到這張乙級證照,但下一次一定會考到!

明天是職訓的最後一天,泰山職訓場這也安排一場規模不算小的廠商徵才活動,我報了不少家,希望能儘快找到工作重回職場。




[DAY-098]自習/乙級題目練習

考前最後一個上課日,今天老師讓大家自習及練習乙級的題目,我原本自己的計畫是今天在教室做完一,二題,周六日兩天做三四題,結果第一題做的時間超出預期,主要是因為我的新寫法雖然很精簡,但還不夠熟練,所以一直在出一些小錯,下午三點才開始做第二題,第二題大多是前端的動作,一個小時左右做完登入及基礎API的建置,覺得還行,原本打算晚上留下來繼續拚一下的,但是原定只停一小時的電力維修不知道為什麼停到七點半都沒恢復,結果在暗暗的教室和班導閒聊了一個多小時,最後直接回家了。

周一見真章,希望這班的考證成績不會比上一梯次差,不過如果真的抽中第三四題,也真的只能說是運氣差了。




[DAY-097]第二次上機模擬測試

今天的主軸是第二次的上機模擬測試,不過改成上午兩小時,下午兩小時,及下午四小時的兩種模式給同學選擇,目的是讓不熟的同學可以中午休息一下喘口氣,想挑戰的則維持一口氣衝四小時的方式,我這次抽到第三題,實在是太有挑戰,上午兩小時做完電影海報的後台,覺得還滿順的,但是下午再做電影院線片的後台時就覺得有點遲滯感,雖然沒有什麼真正卡到的地方,但就是速度快不了,最後連正分都沒達到就時間到了,第三四題真的是很有挑戰的。

下來教室後,重新對題目做了檢視,發現雖然第三題的後台部份不難,但分數佔比也不高,而首頁的兩塊顯示和動畫的部份就佔了75分再加上訂票的部份就110分了,後台有些動作花時間,分數卻只有五分的可能要先放棄,專心先衝到及格分數比較重要。

今天留下來自習的人比較多,胡老師也有留下來幫忙指導,我主要是在練習第一題的自創新解法,兩個小時可以把前端的HTML碼及API寫好,剩下的就是開資料和複製貼上的體力活而己,第一,二題看來是穩穩的了。




[DAY-096]ECSHOP講解

今天老師講解ECSHOP,我只聽了一個小時就不聽了,一來是因為ECSHOP架構太老,己經難以維護了,二來是因為這是大陸中小型電商才比較有在使用的系統,三則是上網查了一下,實際市場使用率真的不高,OPENCART還比較多人使用,這類套件的東西變更很快,只要了解架構和應用方式即可,實務上有遇到再說了。

我自己私下則是開始再做第四題的解題研究,因為相較第三題,第四題要處理的頁面工作比較複雜一些,不難,但量不少,能省工的程度很有限,結果我在註冊會員的帳號檢查地方居然卡了快三個小時,主要是想要找個可以比上次還要精簡的做法出來,沒想到不是很順利,最後還是改回原本的做法,看來要從別的地方來省工了。

昨天和同學提供的PHP短標籤設定,今天己經看到有同學在測試了,覺得欣慰,雖然目前短標籤的使用上官方不是很建議,但也有人說有可能會再改成預設支援短標籤,對我們來說,我是覺得短標籤對於解題的時間爭取還是有一定的幫助的。

話說老師下課前提到有在他的電腦中看到一個解題參考的錄影檔,以為我們都有在看這錄影檔,結果大家都不知道有這東西,後來問了班導,班導說因為這是高中技職競賽的選手的影片,而且也不算是完整解題,加上使用的語法比較舊,所以後來就沒有提供給我們了,我看了一下解題的說明和影片,有些小技巧是可以在解題上利用一下的,只是正式的工作應該不會這樣做就是了。




[DAY-095]模擬術科檢定日

這周基本上都會是拚命練習術科題目的日子,今天上午去考場模擬環境設定的流程,主要是今年開始新增加的部份,會先給九十分鐘進行作業環境的設定,這可能是前幾年考過的人反應的問題,因為光是安裝xampp及測試資料庫連線,檢測PHP環境參數等等,就可能會去掉半小時左右,如果是使用framework來解題的人則需要額外再設定一些路徑,實際解答時間可能只剩下三個半小時或更短,所以今年開始多了九十分鐘的前置時間,但沒有說清楚的是這九十分鐘到底可以準備到什麼程度,比如我可以先把一些會用到的共用變數或函式先寫好嗎?我可以先把一些資料庫或資料表先開好嗎?

中午吃過飯再上去正式解題,我一樣是做上次的第二題,結果這次問題出在更基本的一些變數宣告上,原因可能是上周在處理第三,四題時,JS和PHP混用的狀況很嚴重 ,搞得我混亂了,其它部份就還好,這次還是有使用DW來快速處理主要內容頁的四個頁籤,其它的部份就比起上次做來得熟練,也策略性的調整了一下解題的順序,最終有做到及格的程度,如果一開始的主頁面處理速度可以再快一點,第二題應該是時間內可以做完沒問題,真正的難度還是在第三及第四題。




[DAY-094]自習/網頁設計乙級學科檢定

今天下午要做乙級學科的檢定考,上午老師讓大家自習,做最後的衝刺,我昨天把1000多題都看過了一遍,做了兩次線上模擬也都有80,覺得要及格己經不是難事了,上午的衝刺只是在拉高保證分數而己,我主要是利用線上系統,把工作項目一及四複習一次,加強一下不太熟的部份,一個早上就這樣過去了。

下午吃過中餐,就有承辦人來發準考證及帶大家上五樓做測驗,我上五樓才發現忘了帶身份證,又衝下樓去拉,共計爬十層樓,喘到爆,進場考試前還先看了一段影片說明檢定系統的操作方式,這套系統是和遠端技檢中心直接連線的,考生的資料及座位都是事先輸入到系統中的,所以坐定位後,登入系統就會跳出個人資料做確認,然後先有三分鐘的練習時間來做系統操作的熟悉,三分鐘到就可以開始測驗,十五分鐘後才能提前交卷離場,大多數人都是二十分鐘左右做完,然後我是多檢查了一遍,不確定的題目還是不確定,所以二十五鐘左右我也交卷了,成績是八十七分不能再高了,後來問了其他同學,我這八十七分是最高分的,大多數人也都是八十上下,參加考試的十四位同學都及格了。

晚上還是有同學留下來做術科的練習,我閒閒沒事把先前做的計時器做了修改,改成可以多個計時器同時跑,這是用來在練習解題時,可以針對每個題組分別計時用的,之後因為有事,提早離開;距離結訓還有六天。




[DAY-093]自習/網頁乙級學科小測驗

今天是學科相關的最後一節,老師讓我們上午先自習,下午則是給我們印刷版的考題做練習,
不過最後我選擇直接用士商的線上系統來做練習,效率會高一些,
最後一小時則是小考,因為先前使用的台科大題測網的題目版本較舊,
所以老師最終選擇了士商的系統讓我們做測驗,
不過士商的題庫是有問題的,有些題目因為特殊字元及原始選項是圖片的問題,
在網頁上會無法顯示,所以考完的成績僅供參考,
但是我有找到這個系統的小缺失,它把答案直接寫在網頁裏,以為沒人找得到?

下周一下午正式應考乙級學科,希望順利!

今天開始開放教室到八點讓大家自習,不過留下的人似乎有點少就是了,希望大家都能好好準備,多一些人考到乙級的證照。

第一天開放自習