iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 28
0
Modern Web

ML X 友廷等公車系列 第 28

Day 28 AAA 生日快樂/ *F12 console

網頁設計的發展/檢視自己的設計/有沒有/走在時代的尖端

簡單的設計 : 純文字模式
於 1990/12/20 誕生,1991/8/6 對外開放

Flash - 互動網頁的始祖 // 幾乎沒在用 //
用於製作網站動畫
但 隨著 HTML5 、CSS 、Javascript 技術的成熟,且 Flash 非開放資源,占用系統大量資源,並具有網安漏洞問題,Flash 逐漸淡出市場 。

表格切版 - 高相容性編排方式
Firefox瀏覽器的相容性問題 ,而表格的相容性相對瀏覽器是好的,且易於製作。
版面的切版及編排仰賴於 table。
But,Only 在表格內的可以編排,表格外則管不到。

div + CSS + JS - 丸子三兄弟 突破版面界線
<div> 是 html 的標籤元素,取代表格切版
搭配 CSS 讓版面嚇嚇叫 。打破 版面界線的限制。
[分享]

Yes
RWD 響應式網頁設計
當電腦不再是 唯一上網工具,而手機用戶也越來越多,人手一機。
各大行銷網站如何吸引消費者目光,進而點進去瀏覽購物,網站的操作 是否順暢,能否提升訂單,而發展出RWD。
HTML5 - 全新技術
添加新語法,以符合當代網頁瀏覽需求,ex: <vidwo> <audio>

初次見面

與 網頁設計的美麗邂逅於還沒入學CS前的某一天。
而 入學前,學校就會寄新生包裹來,有一些 建議書單,或是學習網站。
而那年暑假,就開啟找書,逛網站學習的充實之旅。依稀記得 有借一本 厚厚的Java 書,其實那時的我,看都看不懂...
阿逛網站 w3scool 這個網站的學習資源充足詳細 。適合初學者,也適合老手查語法時用。終於有我會的 :開一個 記事本,寫個 Hello World ! ,存成 .html 檔,這就是我的第一個網頁啦 ~~~
雖然很簡單 ,但那時的我好開心 ,可謂 簡單的美好。
對應於網路設計的發展,非常 old style ...,但總是先從基礎開始,之後就會架輕就熟。


其實阿其實 還有更簡易的方式 可以開啟第一次的程式設計(跟網頁有關喔)
Step1 : 開發(執行)平台
打開 Browser 按一下 F12

欸嘿! 就是那麼容易,不用額外存檔,不用安裝什麼IDE。
Step2 : 輸入/輸出
其實不管是什麼程式語言,一開始要碰的 的functions 就跟 輸入輸出有關。
沒有輸入輸出 ,其實就不知道發生什麼事... 所以也常用來 除Bugs 。
這裡 使用 prompt + alert
prompt : Input
alert : Output


輸入完 名字後,按下確認,輸入的名字就會再 prompt() 下一行呈現


會跳出視窗顯示 alert 填入的字串

alert + prompt

alert("加總結果為:" + (+prompt("被加數:") + +prompt("加數:")))

Yes
[解析]

再稍微改一下 : (把+去掉)

alert("加總結果為:" + (prompt("被加數:") + prompt("加數:")))

result :
Yes

小彩蛋

console 除了可以來寫程式,除Bug,還可以 藏驚喜!!!
click me: v2.0

/images/emoticon/emoticon53.gif/images/emoticon/emoticon53.gif/images/emoticon/emoticon53.gif

Yes

Inspired by

阿滴全科補習班

「活」的網站 之定時(每1秒)限制次數(500次)刷新網頁

為什麼網站要更新
如何自動刷新網頁 (BJ4)

import time
from selenium import webdriver

driver = webdriver.Firefox()
driver.get('https://ithelp.ithome.com.tw/2020ironman?sc=nav')

time.sleep(3)
count = 500
while True:
    if count == 0:
        break
    driver.refresh()
    time.sleep(1)
    count = count - 1
    number = 500 - count  
    print('刷新頁面次數: ',number)
driver.close()

Related Work

**做一個白駭客 不做個黑駭客 別耍壞**
網站安全漏洞 可在 F12 or 檢視網頁原始碼 找得到 // 根目錄搜索

  • 登入的帳密
  • 驗證碼
  • 憑證

使用這個方式 (Open F12 and Check Something), 除了可以看出可能的漏洞,也可以檢視自己的網站有沒有安全

爬蟲 鎖定target資料
做個 好crawler 不要癱瘓target網站,不然有可能被鎖IP


上一篇
Day 27 : Firebase FB/Google Login
下一篇
Day 29 加量不加價但加分 - 加入最愛路線 & Custom ML API
系列文
ML X 友廷等公車30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言