[DAY-047]Javascript-動態增加元件/自訂alert

今天先是講解了如何動態的增加輸入欄位，並且可以新增資料到資料庫去，這是滿實用的功能。

動態新增欄位並新增資料到資料庫

接著是關於innerHTML的一些實務上的用法，算是在為之後jquery打點基礎:

利用alert來寫入資料到特定div中

點擊下方圖片後，置入到上方的區塊中

自訂一個alert的視窗並可以輸入文字到特定的區塊中

自訂alert的範例中需要自行增加div和css去做版面的控制

回家作業是延伸上面的範例，做一個完整的alert功能出來，但是要以自訂的div的方式來呈現。

[DAY-046]LOGO設計/LOGO競賽

今天老師要大家先做自己的名片，下周再開始上新的內容，主要也是想讓大家回家作其它課程的作業，視覺設計課程的作業儘量讓大家在課堂間完成。

名片設計

雖然老師來討論了幾次設計上的問題，不過最後我還是覺得這設計不太好，放棄了，另外再找時間做別的設計。

下午時間老師解釋了一下分署的LOGO競賽，要大家就原LOGO樣式再做延伸創意，獲選的有智能運動手環當獎，分署下有辦法參加設計的聽說就兩三個班，老師希望我們每人都設計一款去參賽。

北分署LOGO競賽

[作業]封鎖IP 以php及db實作

這是老師給的一個作業，讓先自行把會員系統做完的同學額外練習用的，功能需求是如果在登入頁嘗試登入超過五次失敗就鎖IP，至於鎖IP的後續動作就沒有說了，比如是要在登入頁顯示訊息，還是把使用者導到別頁去或是其它動作就隨個人去發揮了。

我的做法是一旦鎖了IP之後，就只會停在首頁中，任何的輸入動作都不會再去對資料庫或其它頁面造成影響。

至於原理則是新增一張資料表來紀錄被鎖的IP及封鎖的時間區間，然後在原本的login_log資料表新增一個欄位來紀錄失敗次數，每次要新增登入紀錄時就寫入一筆新的紀錄及次數，然後如果次數超過五次就會在封鎖的資料表中寫入IP及時間區段，並且在session做個記號，之後登入頁面就可以先判斷session是否存在，如果session不存在再去資料表撈資料看這ip是否還在封鎖的時間內，如果在封鎖時間內，則原本登入頁的表單傳送位置會改成本頁，這樣使用者就只會在本頁一直loop，如果不在封鎖時間內或過了封鎖時間，則表單的傳送位置會改成真正的登入檢查頁，然後繼續去資料表撈資料來比對使用者帳號密碼是否正確，同時也開始一個新的檢查和計數的循環。

封鎖IP 資料表

登入紀錄表增加一個累計次數的爛位

登入紀錄表，每新增一筆紀錄，如果有錯誤就累計次數

登入頁的提示訊息

封鎖IP資料表的紀錄，可以紀錄重覆IP被封鎖的紀錄，做日後分析之用

可以封鎖IP當然也可以封鎖帳號，不過到底是要封鎖IP還是封鎖帳號，要看具體的需求為何，不同的做法也會根據效能的考量來製定，比如我以session來做紀錄，就可以減少不少次的資料庫存取動作，以新增紀錄的方式來做計數也比直接更新單一紀錄的方式來得有效率。

[DAY-045]封套工具/文字馬賽克/3D效果

今天繼續基本工具及效果的講解，如何利用一些工具來製作實務上常見的一些效果，

象是封套工具的變形效果可能比用手去慢慢拉造型來得快，文字馬賽克則是透過點陣圖工具把文字轉成馬賽克圖樣，而轉完的馬賽克又可以當成遮色片來使用，3D效果比較不常使用，但對某些特定的效果來說是滿方便的。

封套工具

文字馬賽克

個別變形工具

3D文字效果

下午則是講解了LOGO設計的一些原則及常見案例，然後老師要我們用自己的名字來設計一個LOGO，行有餘力則是鼓勵大家去設計北分署的創意LOGO試試.

[DAY-044]網丙第四題及自習時間

今天是教網丙第四題，這題應該是最簡單的了，主要的考點是在表單資料的傳送，但是資料表單的傳送對於己經開始學js的同學來說應該也不難了，我是自己看著題目幾乎全部用原始碼的方式做完了，但是覺得不夠快，應該是熟練度的問題，CSS的調整花太多時間了，這部份要再加強一下。

網丙四 – 行銷購物網

產品說明

表單頁面

下午時間讓大家自習，同時老師也說了北分署要辦一個LOGO創意大賽，鼓勵大家去參加；

大多數同學則是繼續在趕30隻動物的作業。

[DAY-043]CSS Menu製作方法

今天開始講解MENU的製作方法，話說，老師就這樣直接跳過Image的最後兩項了！

上午的課進度很慢，害我一直想睡，但下午突然衝超過，到下課為止一共講解了十二項，估計再一周就講完了。

原則上，老師的講解就是把範例拿來東改西改，讓大家了解每一個CSS的作用，至於Javascript的部份雖然也有講解，但我覺得老師的解釋有些地方不是說得很好就是了，而且範例網站上提供的Javascript範例也不是很好的做法，實務上的Javascript應該會有更簡潔的做法.

今天閒餘時間在找虛擬主機的資訊，考慮在結訓前先買個一年的方案來製作一個wordpress的網站放自己的作品和技術相關的內容，目前byethost的免費方案似乎還可以再持續一陣子。

[PHP]列出目錄下各子目錄的index.html做成作品集頁面

這是這兩天自己在看參考書時看到關於檔案的操作部份，所以想要試試看，起因在於林老師要求我們把每次做完的範例存成一個目錄，以後可以放上虛擬主機來展示，但是他要我們把根目錄的index.html拿掉,這樣就會出現檔案列表,方便一個一個點進去看。

沒有index.html時，目錄中的檔案會全部列出來

但我覺得這樣有點醜，再者虛擬主機的目錄還有其它不知道有沒有用的目錄和檔案在，全部列出來並不是很恰當，所以我想做一個index.html檔可以自動列出作品目錄中的index.html檔並且抓取title的內容做為呈現，這樣我可以在title打中文名來代表作品名，似乎會更恰當。

修改後的頁面只會呈現作品的目錄及連結

目前這個版本只是簡易版，檔案的操作是比較有危險的動作，應該要再加上更多的判斷來確保檔案的存在與否及權限，
像找title這個動作因為只到<title>這一行就停了，所以也不需要到把整個檔案讀起來，採用逐行讀取的方式可能
會更有效率一些，今天教PHP的胡老師說他之後也會教檔案的操作部份，那就等後面有教到再來改善這個檔。

[DAY-042]javascript基礎/DOM操作

今天開始教Javascript，從最基礎的alert開始說起，然後是文件模型操作，也就是網頁內容的存取和修改，最後則是整合資料庫做一個燈箱效果出來

一個和先前CSS modal image類似的效果

整合資料庫上傳相片後再結合頁面顯示圖片，最後套上modal image效果

[作業]作品集含過濾功能

這是上周前端網頁CSS技術的另一個作業，也是CSS關於Image的最後一個範例，這個範例中的作品圖集可以透過分類選項來挑選要顯示的項目，其原理是透過JS，動態的加入一個特定的class來讓區塊顯示出來，而其頁面結構中則是預設一開始全部的區塊都是不顯示的，頁面一載入先執行一個show all的指令來讓全部的區塊都加上’show’這個class，之後再動態的依照使用者的選擇來決定要顯示那些項目。