JavaScript學習筆記-cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https

cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https

今天練習js操作ajax的時候一直無法取得來源網頁資訊，透過開發工具(f12)查看，發現了這個錯誤訊息! 找了一下，發現只要在chrome目標上加上『 –allow-file-access-from-files』即可。

台灣走走-南庄碧絡角

南庄碧絡角是在南庄內不算太高的一個景點，或許也因為不是很高，所以開著1600cc的車還是可以用著OD檔上去。
這裡面最特別的就是，會有很多的兔子四處跳來跳去的...也不知道牠到底怕不怕生，總之小孩子都很喜歡就是了。
這次是趁著綉球花季來看一下，以他們的植栽來看，秋天應該還有楓可賞，或許春夏秋冬來都有不一樣的景色可以觀賞!

行程上，可以一早就先來碧絡角用個中餐吃個點心，然後去護漁步道涼爽散心，回程再去南庄老街走走!
這邊費用一人入場是一百五十元，但是可以全額抵，附近有的只給抵一半，所以算是真佛心了。
對了，夏天記得帶防蚊液還是穿長袖的，因為多少有點蚊子，餐點部份菇菇鍋真的很不錯，鬆餅更是一定要點。

向內走入似乎還有高點可以往上，不過體力不支就放棄了..

藤原栗子週末碎念-0530

不知不覺也離職半個多月了，期間掉了不少面試邀請，接受了一間有點年紀的傳產的面試邀請。
報到的時候還要『再』寫一次履歷，寫到最後有一句『正式錄用之後，願意無條件接受工作調職』，然後接待的人員跟我說『這個通常都會再跟員工討論過才會調職的』!
呵呵，當下我是拒絕了簽名，雖然我也不打算錄用會去報到，只是對於這句話感覺還蠻有意思的。

然後...就開始寫智力測驗了...然後就被通知面試主管還在開會就等了半個多小時..然後就被通知資訊主管出國了...就當自己最近有點閒吧!
不過這到底是面試通知還是整人通知!

端午四天的連假終於結束了，陪了泡泡先生四天，生了不少氣，泡泡先生還擔心的問喵喵小姐『爸爸是不是在樓上生氣』!

當然還有出去玩啦，去南庄碧絡角看看綉球花，這有趣的是，兔子放著給牠四處亂跑亂跳，蠻有趣的，入門票雖然一百五，但是可以全額抵消費，真的還不錯，下山之後還可以去護漁步道涼爽散心一下。

接下來還有很多的線上課程等我消化，繼續學習了。

Python邊學邊記錄-Crawler網路爬蟲-第五課-取臺灣銀行今日匯率

Python Crawler

之前用ASP.NET寫過一個服務，每天早上去取臺灣銀行的匯率，現在用Python試一下!

import requests
from bs4 import BeautifulSoup

def main():
    resp = requests.get('http://rate.bot.com.tw/xrt?Lang=zh-TW')
    soup = BeautifulSoup(resp.text,'html.parser')

    rows = soup.find('table','table').tbody.find_all('tr')
    for row in rows:
        print([s for s in row.stripped_strings])


if __name__ == '__main__':
    main()

Python邊學邊記錄-Crawler網路爬蟲-第四課-正規表示式

Python Crawler Regular Expression

套件：import re

如何爬出網頁上h1~h6的tag資料

最原始的作法，就是把h1~h6弄到list內

這兩句好像放著比較感覺!

    resp = requests.get('目標網址')
    soup = BeautifulSoup(resp.text, 'html.parser')

接著，我們要取得所有h1~h6的tag資料：
hs = soup.find_all(['h1','h2','h3','h4','h5','h6'])

for h in hs:

  print(t.text.strip())

透過正則式來處理：

for h in soup.find_all(re.compile('h[1-6]')):

  print(h.text.strip())

取得png結尾的圖片：

imgs = soup.find_all('img')

  for img in imgs:

    if 'src' in img.attrs: # 確認有src屬性的存在

      if img['src'].endswitch('.png'): #endswitch表示字串結尾

        print(img['src'])

透過正則式來處理：

for img in soup.find_all('img',{'src': re.compile('\.png$')}):

  print(img['src'])

正則式：xxx$，『$』表示以『xxx』為結尾的字串，前面的『\』因為『.』是特殊符號『代表任何字』，所以要加入『\』才可以。

要取得.png結尾，而且檔名有python的圖片

if 'python' in img['src'] and img['src'].endswitch('.png')

透過正則式來處理：

for img in soup.find_all('img',{'src': re.compile('python.*\.png$')})

正則式：

• 『.』代表任何字
• 『*』代表長度0或是1
• [1-9] 表示範圍1-9
• [A-Za-z1-9]+表示字串由A-Za-z1-9所組成
• 『+』代表長度1或是更長
• 『\u』代表透過unicode來查詢
• [\u4e00-\u9fa5]是全部中文字的一個範圍

更多時候，其實前輩們已經寫好了，google一下也不錯。

Python邊學邊記錄-Crawler網路爬蟲-第四課-爬表格

Python Crawler

今天的課是學怎麼去爬表格的資料，作法上跟之前在寫ASP.NET的時候處理GridView差不多，果然是萬變不離其宗!

假如網頁畫面如下：

項次	項目	價格	連結
1	國文	1200	http://123.com
2	英文	1800	http://123.com
3	數學	1500	http://123.com
4	理化	2000	http://123.com

首先，一樣要先透過requests.get連到該目標網址，然後一樣丟給了BeauitfulSoup去處理!

resp = requests.get('目標網址')
soup = BeautifulSoup(resp.text, 'html.parser')

tr就跟row一樣，所以先取tr資料

rows = soup.find('table', 'table').tbody.find_all('tr')

然後就透過迴圈去把所有tr的價格資料取出，價格td在第三欄，以index來計算的話是2。
(註：目前只有遇到generol的index是從1開始@@)

for row in rows:

  price = row.find_all('td')[2].text  

基本上，這樣子就可以取得price了。

如果有想要換平均課程價格的話，那就可以先宣告一個list
prices = []

然後在迴圈中append進去

for row in rows:

  price = row.find_all('td')[2].text

  prices.append(int(price))

總金額

sum(prices)

len(prices)

課程數

python的list加總真的很方便!

另一種作法的話，就是透過tag的父子兄關係去做定位。
table
  tr
    td
    td
    td價格
    td連結
       a

我們可以從『a』這個tag去找他爸『td連結』再找他兄弟『td價格』
這時候的作法就變成先取得『a』的定位

links = soup.find_all('a')

接著透過『a』來找他的父兄

for link in links:

  price=link.parent.previous_sibling.text

.parent(父).previous_sibling(兄) 作法上跟處理一些網頁是一樣的。

如果要把所有的表格資料列印出來的話，作法是一樣的。

rows = soup.find('table','table').find_all('tr') # 先取得所有的tr資料

for row in rows:

  #另一種取得所有td的方式 

  #all_tds = [td for td in row.children]

  all_tds = row.find_all('td') # 取得所有的td

  print(all_tds[0].text..XXXX) # 透過index去取值即可

當然了，如果有時候連結沒有放上去的話，那就會造成異常，所以需要防呆!

rows = soup.find('table','table').find_all('tr') # 先取得所有的tr資料
for row in rows:
  all_tds = row.find_all('td') # 取得所有的td
  if 'href' in all_tds[3].a.attrs: # 確認href是否存在
    href = all_tds[3].a['href']
  else:
    href = None
  print(all_tds[0].text..XXXX) # 透過index去取值即可

另一種作法的話就是可以透過stripped_strings來處理!

rows = soup.find('table','table').find_all('tr') # 先取得所有的tr資料

for row in rows:

  print([s for s in row.stripped_strings])

s for s in subsets 就等於
ss = []
for s in subsets(s):
  ss.apped(s)

Bootstrap邊學邊記錄-版面練習

Bootstrap

練習對象：www.apple.com.tw

網頁看起來像是切成了三個區塊。

區塊1與區塊2的部份是container-fluid

區塊3的部份是container

接著，要確認在行動裝置的時候排版怎麼變的。

區塊1跟區塊3的部份在寬1000的時候不會動，所以他一直都是col-xs-12的滿版。
區塊2的部份排版變為2個，所以是col-md-6，col-lg-3

區塊2與區塊3的部份在寬調至600之後變為一列，所以是col-xs-12

所以掛起來的版本就是下面樣式

<body>

<div class="container-fluid">

<div class="row">

<div class="col-xs-12">

<img src="https://placehold.it/1920x300" class="img-responsive" alt="">

</div>

</div>

<div class="row">

<div class="col-xs-12 col-md-6 col-lg-3">

<img src="https://placehold.it/1920x300" class="img-responsive" alt="">

</div>

<div class="col-xs-12 col-md-6 col-lg-3">

<img src="https://placehold.it/1920x300" class="img-responsive" alt="">

</div>

<div class="col-xs-12 col-md-6 col-lg-3">

<img src="https://placehold.it/1920x300" class="img-responsive" alt="">

</div>

<div class="col-xs-12 col-md-6 col-lg-3">

<img src="https://placehold.it/1920x300" class="img-responsive" alt="">

</div>

</div>

<div class="row">

<div class="container">

<div class="col-xs-12">

<img src="https://placehold.it/1920x300" class="img-responsive" alt="">

</div>

</div>

</div>

</div>

</body>

再透過開發工具確認自適應的部份狀況

lg 

md

xs

接著處理區塊3的部份，區塊3的部份可以再分成四個區塊

<body>

<div class="container-fluid">

<div class="row">

<div class="col-xs-12">

<img src="https://placehold.it/1920x300" class="img-responsive" alt="">

</div>

</div>

<div class="row">

<div class="col-xs-12 col-md-6 col-lg-3">

<img src="https://placehold.it/1920x300" class="img-responsive" alt="">

</div>

<div class="col-xs-12 col-md-6 col-lg-3">

<img src="https://placehold.it/1920x300" class="img-responsive" alt="">

</div>

<div class="col-xs-12 col-md-6 col-lg-3">

<img src="https://placehold.it/1920x300" class="img-responsive" alt="">

</div>

<div class="col-xs-12 col-md-6 col-lg-3">

<img src="https://placehold.it/1920x300" class="img-responsive" alt="">

</div>

</div>

<div class="row">

<div class="container">

<div class="col-xs-12">

12345

</div>

<div class="row">

<div class="col-xs-12 col-sm-3">row1</div>

<div class="col-xs-12 col-sm-3">row2</div>

<div class="col-xs-12 col-sm-3">row3</div>

<div class="col-xs-12 col-sm-3">row4</div>
</div>

<div class="row">

<div class="col-xs-12 col-sm-4">Nrow1</div>

<div class="col-xs-12 col-sm-4">Nrow2</div>

<div class="col-xs-12 col-sm-4">Nrow3</div>

</div>

</div>

</div>

</div>

</body>

Python邊學邊記錄-Crawler網路爬蟲-第三課-BeautifulSoup

BeautifulSoup

BeautifulSoup是一套在爬取網頁資訊上非常好用的lib，當然python上還有另一套selenium也可以做的到。

resp = requests.get('目標網址')
soup = BeautifulSoup(resp.text, 'html.parser')

取得第一個tag

soup.find('tagname')

或是

soup.tagname

這兩個方式都是可以取得第一個tag的方式。

取得tag底下的child tag

print(soup.tag.child tag.text)

print(soup.div.a.text)

意即取第一個div底下的a的文字

取得所有的tag

main_titles = soup.find_all('h4')
for title in main_titles:
    print(title.a.text)

透過find_all的方式可以取得所有需求的tag，再透過迴圈的方式將逐一處理
作法上還可以另外如下加上class的條件

soup.find_all('h4', 'card-title')

soup.find_all('h4', {'class': 'card-title'})

soup.find_all('h4', class_='card-title')

上面的意思就是取tag為h4且class為card-title的資料

透過id取得元件

soup.find(id='mac-p')

如果自訂了標籤『data-index』，並且想透用該tag來做條件的話，因為包含了『-』，會導致異常，所以只能透過最標準的作法來處理。

soup.find('', {'data-index': '123'})

tag的部份不給值，直接定義要搜尋的條件。

取得網頁上所有文字

divs = soup.find_all('div', 'content')
for div in divs:
    1-使用 text (會包含許多換行符號跟空格)    print(div.text)    2-使用 tag 定位     print(div.h6.text.strip(), div.h4.a.text.strip(), div.p.text.strip())    3-使用 .stripped_strings    print([s for s in div.stripped_strings])

Python邊學邊記錄-Crawler網路爬蟲-第二課-防呆

Python Crawler

Python邊學邊記錄-Crawler網路爬蟲-第一課
已經可以取得網頁的資料了，距離目標也就進了一步!
但是我們會發現，如果今天是一個網頁那就沒事，起爬了就開始走，但是如果網頁不存在呢?

程式就中斷了...如果只是一個網頁是小事，如果有很多網頁的話，第一個網頁就掛了，那這中間的等待時間都白費了，所以我們需要去做例外處理!!

try:
    resp = requests.get('http://marty.blogspot.com/p/python.html')
except:
    resp = None
if rsep and resp.status_code == 200 :
    soup = BeautifulSoup(resp.text, 'html.parser')
    print(soup.find('h1').text)

透過try except來讓程式可以順利的執行完畢。

如此程式就會順利的一直走下去，不會是上面的錯誤中斷了。
但是，如果還有其它的呢?像tag不在存之類的...總不能...遇見一個就try一個吧!

所以我們就可以把程式碼重構一下，把判斷的部份另外拉出一個fucntion

def get_tag(url, head_tag):
    try:
        resp = requests.get(url)
        if resp.status_code == 200:
            soup = BeautifulSoup(resp.text, 'html.parser')
            return soup.find(head_tag).text
    except Exception as e:
        return None

這樣子，就可以美觀又防呆了!

Python邊學邊記錄-Crawler網路爬蟲-第一課-開始爬

Python Crawler需求套件：

• BeautifulSoup
• Requests

首先，要先import requests跟BeautifulSoup

Requests是一個在網路資源取得的套件，可以get、post、delete!

我們要從網站取得資料的時候可以透過requests.get('網址')來操作執行!

resp = requests.get('http://martychen920.blogspot.com/p/python.html')

這時候，resp取得資料之後，其實有很多的操作方法，像status確認網頁狀態，這邊我們要將網頁資料整個拉出的話，就是text!

所以，可以用print(resp.text)去看，會發現整個html都被搬過來了。

接著，這html的資料還要再過手，轉成BeautifulSoup看的懂的格式!

soup = BeautifulSoup(resp.text,'html.parser')

這樣，就可以把資料轉成BeautifulSoup這套件自己可以懂的格式了。

這時候去print(soup)，也會是一堆像極了html的資料。

接著就可以去操作這soup上的資料了!

soup.find('h1').text

這樣就可以去找尋『h1』並取得文字資料。

假設是『藤原栗子工作室』

如果直接去print(soup.find('h1'))的話也是可以執行的，只是會連tag都帶出來而以。

就會是『<h1>藤原栗子工作室</h1>』

Python邊學邊記錄-環境建置PyCharm Community Edition

開發環境：PyCharm

官方網站：連結

下載Community版本!

如果有設定要匯入的話就選擇，沒有的話就預設就可以了。

接著就可以建置或是開啟python專案了。

如果有使用virtualenv建置隔離環境的話，也需要一同設置。

在File\Settings\Project\

因為在另篇的時候已有建置，所以選擇Add Local

選擇所設置的資料夾下的執行檔

 這時候帶入的環境就是會virtualenv的環境了!

按下apply!

如果還有想安裝其它套件的話，可以透過『+』來找尋之後安裝。

接著還如果還想調板的話，也可以，依個人喜好調整。

Python邊學邊記錄-virtualenv

Virtualenv

主要用來隔離不同專案套件所用，本身也是套件，所以可以透過pip直接下載安裝!

指令：pip install virtualenv

安裝之後，切換到專案資料夾，並且執行指令virtualenv 隔離名稱

建置隔離環境之後，就可以透過隔離名稱\Scripts\activate來進入該隔離環境

可以發現到執行指令之後，前面會有一個隔離名稱，那代表你已經進入這隔離區了。

要回到global環境的時候，只要執行deactivate就可以回到global環境。

Git邊學邊記錄-團隊協作git pull

團隊協作的時候，要能夠時時刻刻取得最新的資料，就需要透過git pull來處理。

這時候的關係如下圖：

A下了commit，並且push到github之後，b要透過git pull去取得目前在github上最新資訊!

當然會有一種情況，就是B沒注意到A已經第二次的push到github上，而要直接再做push，如下圖所示：

這時候會被github拒絕，B還是必需做一次git pull然後merge後，才有辦法再重新push上去。

Git邊學邊記錄-推送分支到github

正常說，要把資料推到遠端主機，只要透過git push就可以，但是，那是在master的情況下才會直接下指令沒有問題!

但是當切換到分支的時候，要將分支push會發現出現錯誤訊息!

因為還要去指定到遠端數據庫的名稱才行!
所以我們就可以先使用git remote來做查詢。

查詢後會取得origin這遠端數據庫名稱!

接著就可以使用git push 遠端數據庫名稱 分支名稱來做推送

當然還可以透過git remote rename 原始數據庫名稱 新數據庫名稱來做改名

RaspberryPi邊學邊記錄-作業系統安裝

買好樹莓派也一段時間了，所以決定來實作了!
作業系統：RASPBIAN
下載網站：raspberrypi.org

這其實還蠻多作業系統可以選擇的，只是較多人是使用RASPBIAN，所以就跟風了，資源自然也多!

選擇NOOBS，

兩個版本主要的差異在有沒有圖形化界面，依需求下載吧。
個人選擇了圖形化版本(WITH PIXEL)!

接著，格式化記憶卡，個人習慣使用SDFormatter!

接著把NOOBS解壓的所有資料夾放到格式化過的記憶卡!

然後就可以將卡片插片Raspberry Pi開機了!

Git邊學邊記錄-暫存資料git stash

暫存資料 git stash

當作業到一半的時候被臨時叫去支援其他事情，又不能把手邊寫一半的東西commit的話，就可以透過git stash來做暫存。

如下圖所示，一個文字檔編輯一半毎叫走。

所以透過 git stash去暫存，這時候開啟檔案會發現，稍早所編輯的部份資料消失了?

接著利用git status查詢目前狀況，會發現，沒有任何異動檔案。

確認一下，執行git stash list來查目前的暫存資料狀況

會發現有一個stash{0}的資料暫存!

此時透過git stash pop就可以將暫存資料還原

如果不想留下暫存資料的時候可以執行兩個指令：
git stash drop 刪除最新的暫存資料
git stash clear 所有暫存資料全刪除

Git邊學邊記錄-標籤git tag

標籤 git tag

git本身提供了commit說明之外的另一個維度，『標籤』。

透過git tag可以替版本建立標籤說明，讓設計師更方便去記錄狀態!

因為都還沒有設置標籤，所以執行git tag之後，是什麼都沒有的狀態。

所以我們透過指令 git tag tagname來做設置

這時候會發現，出現了『v1』的資訊了!

如果需求切換到該版本的commit的話，那就可以直接透過git checkout tagname來切換

兩圖說明了切換版本的差異，v2的版本是有b.txt，v1則沒有。

如果對tag有說明的需求，可以透過git tag -am "說明" tagname來設置，再透過git tag -n來查詢。

如果想刪除掉tag的話，也可以透過 git tag -d tagname來處理，本身刪除tag不會影響到commit的資訊，這部份可用性較大。