PC's Note: Udemy - 100 Days of Code - The Complete Python Pro Bootcamp for 2021

Day 32 ~ Day 44

Introduction

這一段主要是在講解網頁API的使用以及網頁的常見基本架構(HTML, CSS, JS)

網址　：https://www.udemy.com/course/100-days-of-code/

程式碼：https://github.com/deathpc/python_100day/

Day 32

這週介紹如何用smtplib模組搭配freemail來寄信

with smtplib.SMTP('smtp.gmail.com') as connection:
    connection.starttls() # 使用starttls協議連接伺服器
    connection.login(ac, pw)
    connection.sendmail(from_addr=ac,
                        to_addrs=mailbox,
                        msg=f"subject: Hello~\n\nBody")

Day 33

API (Application Programing Interface)
應用程式介面，扮演著應用程式間的橋樑。概念有點像是餐廳的服務生，客人不需要知道菜餚的製作方式，只需要跟服務生發出request，它就會負責把廚房的response帶回來。

Requests module
透過 requests 這個模組，我們可以使用 Python 發送 HTTP 請求
，請求的回傳值為所有Response Data（包含content、encoding、status 等）。
HTTP Codes
網頁伺服器回應當前狀態的3位數字代碼，大致上可分為五種狀態

1XX：再等等
2XX：好的
3XX：走開
4XX：你這個人有問題
5XX：餐廳失火啦

HTML Entities
某些字元在 HTML 中是保留的。
若要在Python中跳脫轉換這些字元，可透過html module
如果您在文本中使用小於 (<) 或大於 (>) 符號，瀏覽器可能會將它們與標籤混合在一起。

import html
unescaped_text = html.unescape(original_text)

Day 34

Type Hint
在參數後面可加註傳入型別，冒號前面可加註輸初型別，當程式碼不符註記時程式一然可以執行，但編譯器可以幫忙指出錯誤。

Day 35

Environment variable
使用環境變數通常用有兩個原因

方便維護：avoid editing the main program
安全性：Storage of key or sensitive parameter

可透過shell 執行export 指令設置環境變數，而在Python需要存取這些變數時則可透過os模組的environ.get method進行獲取

#in bash
export letters=ABCDE...

#in python
import os

os.environ['letters']
os.environ.get("letters") #同上，但鍵值不存在時不會觸發Keyerror，而是回傳NULL

Day 36

這週要利用三個網站的API去實作『當某支股票價格有劇烈波動時，搜尋該公司新聞並透過簡訊發送到個人手機』這個功能，簡訊的部份是透過 Twilio ，但因為簡訊功能是有試用額度的，要省著點用=～=

Day 37

HTTP Requests

GET
向伺服器請求資源
POST
向伺服器傳送資訊
PUT
更新伺服器上已有的資訊
DELETE
刪除伺服器上已有的資訊

Headers
把API Key放在 query parameter 是一件危險的事情，雖然連線透過 HTTPS進行，但有心人士能透過漏洞或是後門程式輕易地取得 query parameter 的資訊

Day 38-40

這三天都是透過 Sheety API 操作 Google 試算表搭配其他 API 達成Query data + Alert 的功能

Day 41-44

這幾天介紹網頁的基本架構

大多數網頁的構成由三種檔案構成，他們分別負責不同的項目

HTML
網頁的架構
CSS
網頁的裝飾
JS
網頁的功能

HTML Tag

doctype
html
head：網頁設置
meta
metadata(元數據)，意即"描述其他數據的數據"，在 HTML 中的 meta 標籤，亦是描述網頁檔案的數據。
例如標題、描述、字元邊碼、渲染方式及爬蟲宣告…等
body：網頁本文
a(anchor)：超連結
div：用以分隔區塊
......

Unicode
語意化的標籤
HTML 5 中引入了語意的概念，這類標籤在功能上與傳統使用的標籤沒有差別，其用途，是讓排版工具、搜尋引擎及開發者更好地去讀取這些資訊，如下列標籤：

<Strong> vs <b>
<em> vs <i>

CSS(Cascading StyleSheets)
CSS 是一種樣式語言 (style sheet language)，它能讓 HTML 中的元素套用不同的頁面樣式(style)，套用的途徑有以下幾種，其優先順序為Inline > Internal > External > Browser default：

Web browser有自己預設的CSS
Inline
在 HTML 元素的 style 屬性進行設定
例： <p style="color:blue;">一段文字</p>
Internal
在 HTML 文件的 <style> 中設定 CSS
例：
　<head>
　　<style>
　　　p {
　　　color:blue;
　　　background-color: yellow;
　　　}
　　</style>
　</head>
External
在 HTML 文件中參考外部 CSS 檔案
例：
　<head>
　　<link rel="stylesheet" type="text/css" href="style.css">
　</head>
語法
selector{ property: value; }

tag{property: value;}
.class{property: value;}
#id{property: value;}
當多個樣式被宣告給同一個元素，透過較為具體(特異性高)的選擇器宣告的樣式將被套用在元素上，特異性相等則由先後順序決定，後者優先

例：#hello ＞.intro ＞h1
例：div#a ＞ #a

Attribute Selector
根據給定屬性的存在或值去匹配元素
例：a[href="https://example.org"] { color: green;}
Pseudo Class
虛擬類別能讓你不只能為網頁內容套用樣式，還能給諸如瀏覽歷史(:visited)、內容的狀態(:checked)、還有滑鼠位置(:hover)的外部相關因素套用樣式。
例：selector:pseudo-class {property: value;}
Combinator

Adjacent sibling (+)
例：img ~ p {color: red;}
匹配同一父元素下，在img後的第一個p元素
General sibling (~)
例：img ~ p {color: red;}
匹配同一父元素下，在img後的所有p元素
Child (>)
例：div span { background-color: Blue; }
匹配 div下的直接子元素span
Descendant (空格)
例：div span { background-color: Blue; }
匹配 div下的所有span

Media query：
在特定條件下對元素套用樣式
@media (max-width: 480px) {
#container {
width: 100%;
}
}

Box model
在 CSS 中，HTML的每個元素都可被視為一個盒子。Box Model 主要由四個部分主成，由內而外分別是Content(內容)、Padding(內邊距)、Border(邊框) 和Margin(外邊距)。
Display Property

Block
元素寬度預設會撐到最大，使其占滿整個空間，可以設定長寬/margin/padding，但仍會占滿一整行
Inline
元素可在同一行內呈現，圖片或文字均不換行，也不會影響其版面配置，不可設定長寬，元素的寬高由它的內容長寬決定
Inline-block
以inline的方式呈現，但同時擁有block的屬性，可設定元素的寬高/margin/padding，並可水平排列
None
不顯示這個東西。 display : none 和 visibility : hidden 的差別是 display : none 這個東西就不見了，不佔空間， visibility : hidden 只是隱形看不見，還是有佔空間。

Positioning
在網頁中 position 的用途是設定物件定位時所要的參考對象，預設狀態下物件的位置是依據文件流來做排列

Static
靜態定位是將元素的其他定位特性取消，多數的網頁物件預設也都屬於此種定位。
Relative
相對定位是將元素先定位在未添加定位時的位置，在不添加頁面佈局的位置下調整元素位置，搭配其它 CSS 屬性，如 top 、 right 、 bottom 、 left 可做到顯示位置的偏移
Absolute
絕對定位會將元素移出文件流，在階層離自己最近且具備定位設定的父層空間下進行定位，且定位不與其他任何元素關連
Fixed
固定定位會將元素移出文件流，在視窗內進行定位，因此不受視窗捲動的影響
Sticky
黏性定位可看作 Relative與Fixed的結合，在父層空間下進行定位，但當視窗捲動到元素位置時，會依據該元素的 top 值來讓該元素呈現 fixed 的效果，但當視窗往下捲動並超過 sticky 元素所在的父層空間時， sticky 元素則不會再呈現 fixed 的效果，而是會被捲離視窗範圍。
Float
浮動屬性可讓元素產生浮起來的效果，可以視為將元素的 height 變成 0，要取消該效果可在周圍其他元素使用 clear property 來忽略 float；應避免使用 float 屬性進行定位，而是將其單純用在文字環繞效果上

Font

Size

16px = 1em = 100% = 1rem
除了 px 及 rem，元素宣告的 font-size 會跟其父層空間的宣告相加

PC's Note

2022年1月4日星期二

Udemy - 100 Days of Code - The Complete Python Pro Bootcamp for 2021 - Intermediate+ -1

Day 32 ~ Day 44

Introduction

Day 32

Day 33

Day 34

Day 35

Day 36

Day 37

Day 38-40

Day 41-44

沒有留言:

張貼留言

檢舉濫用情形

瀏覽量

2022年1月4日 星期二

Udemy - 100 Days of Code - The Complete Python Pro Bootcamp for 2021 - Intermediate+ -1

Day 32 ~ Day 44

Introduction

Day 32

Day 33

Day 34

Day 35

Day 36

Day 37

Day 38-40

Day 41-44

沒有留言:

張貼留言

2022年1月4日星期二