今年較工業化前高1.1度 2010年代將成最熱10年

發佈日期: 2020-06-29 作者: admin

摘錄自2019年12月3日中央通訊社報導

聯合國世界氣象組織（WMO）今天（3日）發表年度評估報告指出，氣候變遷已超出人類適應能力，今年（2019年）以來全球氣溫較工業革命前均溫高出攝氏1.1度，即將成為史上最熱10年。

世界氣象組織說，2019年可能成為歷來最熱的前3年。燃燒化石燃料、建造基礎設施、種植作物及運送產品等造成的人為排放，將讓今年打破大氣中二氧化碳濃度紀錄，地球勢必會進一步升溫。

海洋負責吸收溫室氣體新增的9成熱量，讓全球海水溫度也達歷史新高，如今海水也比150年前酸25%，威脅數以十億計民眾賴以維生的重要海洋生態系統。在格陵蘭過去12個月融冰3290億公噸助長下，全球平均海平面高度於去年10月達到歷來新高。

隨著過去40年的每10年都比前10年還熱，氣候變遷不只是未來世代要面臨的問題，因為人類無節制的慾望與不計代價的消費，已讓數以百萬計民眾身受其害。報告中說，今年上半年有超過1000萬人在自己國家內流離失所，其中700萬人直接受到諸如風暴、洪水及乾旱等極端氣候影響。世界氣象組織說，因極端氣候新增的無家可歸人口，到今年底可能增至2200萬人。

世界氣象組織秘書長塔拉斯（Petteri Taalas）表示：「2019年再度發生天氣及氣候相關風險重創事件。百年一遇的熱浪及水災變得愈來愈常發生。」

在只比工業革命前均溫高出攝氏1.1度的今年，歐洲、澳洲與日本已相繼出現致命熱浪，還有超級風暴重創非洲東南部，加州和澳洲也有失控野火肆虐。

本站聲明:網站內容來源環境資訊中心https://e-info.org.tw/,如有侵權,請聯繫我們,我們將及時處理

【其他文章推薦】

※台北網頁設計公司這麼多，該如何挑選?? 網頁設計報價省錢懶人包"嚨底家"

※網頁設計公司推薦更多不同的設計風格，搶佔消費者視覺第一線

※想知道購買電動車哪裡補助最多?台中電動車補助資訊懶人包彙整

※南投搬家費用,距離,噸數怎麼算?達人教你簡易估價知識!

※教你寫出一流的銷售文案?

格力計畫收購珠海銀隆新能源進軍新能源汽車領域

發佈日期: 2020-06-23 作者: admin

3月6日，珠海格力電器股份有限公司發佈《關於發行股份購買資產停牌公告》，證實擬收購珠海銀隆新能源有限公司。格力電器公司承諾爭取在4月4日前披露本次重組方案。分析人士猜測，格力電器意圖通過銀隆進軍新能源和新能源汽車領域。

據瞭解，銀隆新能源創建於2004年，是一家產業橫跨新能源、汽車製造、房地產、物業管理、金融能源投資等領域的大型現代化高新技術企業，掌控著全球鈦鋰材料頂級生產技術。2010年，銀隆成功收購美國納斯達克上市公司，奧鈦納米科技有限公司53.6%的股權，成為其第一大股東並成功跨進國際資本市場。分析人士猜測，格力電器意圖通過銀隆進軍新能源和新能源汽車領域，並間接登陸美國資本市場。

此前，格力電器與銀隆新能源已開展產業技術方面的合作與攻關。

本站聲明:網站內容來源於EnergyTrend https://www.energytrend.com.tw/ev/,如有侵權,請聯繫我們,我們將及時處理

【其他文章推薦】

※為什麼 USB CONNECTOR 是電子產業重要的元件?

※網頁設計一頭霧水??該從何著手呢? 找到專業技術的網頁設計公司，幫您輕鬆架站!

※想要讓你的商品成為最夯、最多人討論的話題?網頁設計公司讓你強力曝光

※想知道最厲害的台北網頁設計公司推薦、台中網頁設計公司推薦專業設計師”嚨底家”!!

※新北清潔公司,居家、辦公、裝潢細清專業服務

Tesla Model 3 再點電動車市場戰火，比亞迪、格力紛出新招

發佈日期: 2020-06-23 作者: admin

美商特斯拉（Tesla）發表價格僅3.5萬美金起跳的平民款電動車Tesla Model 3 ，短時間內立即湧入全球超過30萬筆訂單，同時也重新點燃電動車界的戰火。比亞迪於4月10發表新款電動車，中國家電廠格力也發表宣言，將砸重金投入新能源車市場。

特斯拉訂單火爆，領導電動車市場脈動

特斯拉一直是電動車界最受矚目的公司。Model 3於三月31日發表後短短兩周，就已收到來自全32.5萬輛的訂單。EnergyTrend分析師呂理舜指出，特斯拉的電池管理與馬達系統有其技術優勢，加上沒有傳統車廠的包袱，未來兩年內預計仍將主宰全球電動車市場。

特斯拉目前所有車輛都由公司自行組裝生產。因應Model 3的龐大需求，特斯拉亦可能會擴大生產基地，其中一個市場傳聞不斷的設廠地點就在中國。三月中就有傳聞指出，中國蘇州相關政府部門曾就特斯拉設廠一事進行討論，但特斯拉對此並無正面回應。

《鉅亨網》指出，特斯拉的營運模式是產銷一體，但在中國必須產銷分離；若要在中國建立生產基地，則需解決此一問題。

此外，台灣特斯拉公司已經正式登記成軍，初期業務內容以銷售、維護為主。特斯拉也有不少車輛零組件來自台灣，包含減速齒輪箱、汽車電池管理系統線組、直流轉換器等。

比亞迪不甘示弱，新車百公里加速僅需4.9秒

就在Tesla Model 3推出的10天候，中國電動車商比亞迪（BYD）也推出小型油電SUV車「元」，加速到100公里只需要4.9秒，與特斯拉較勁的意味濃厚。

SUV「元」於去年四月在上海車展發表，歷經11個月後正式在北京問世，售價59,900元人民幣起。SUV「元」是目前首款百公里加速在5秒以內的中小型SUV車，搭載1.5L發動機與雙電機動力組合，在混和模式下的百公里油耗僅1.3公升。

此外，「元」也提供360度影像、無鑰匙啟動、車道偏離預警、ESP車身穩定系統、胎壓監測、預緊式安全帶、8安全氣囊以及行車記錄儀等安全配置。

雖然中國近期放緩對新能源車的補貼，比亞迪對於2016年的新能源汽車銷量樂觀，預計可達12~15萬輛，其中包含深圳7,700輛、太原8,200輛、廣州3,000輛電動巴士，以及北京20,000輛混和巴士、上海30,000輛電動車的需求。

中國新能源車市熱絡，格力宣布加入搶灘

看好新能源車市場發展，中國大陸家電廠商格力公司董事長董明珠日前宣布將展開產業轉型，一方面將開始販售智慧型手機，還將砸下重金買下珠海銀隆新能源公司，目標是要進軍新能源車市場。

中國媒體報導，珠海銀隆準備辦理增資，增資額預估將達人民幣50億元；格力若要入主珠海銀隆，可能需要上百億元人民幣的資金。無論格力將如何展開其新能源車市場戰略，都可看出新能源車在中國已成為一大重點產業。

（照片來源：）

本站聲明:網站內容來源於EnergyTrend https://www.energytrend.com.tw/ev/,如有侵權,請聯繫我們,我們將及時處理

【其他文章推薦】

※USB CONNECTOR掌控什麼技術要點? 帶您認識其相關發展及效能

※評比前十大台北網頁設計、台北網站設計公司知名案例作品心得分享

※智慧手機時代的來臨，RWD網頁設計已成為網頁設計推薦首選

※評比南投搬家公司費用收費行情懶人包大公開

※幫你省時又省力,新北清潔一流服務好口碑

9 張補助數據圖表解析，看懂電動機車發展趨勢

發佈日期: 2020-06-23 作者: admin

電動機車的快速發展已成為機車市場難以忽視的趨勢，而補助是其最重要的動力之一，也是備受爭議的來源。想了解電動機車如何發展和補助的消長，利用補助數據圖表就能一次看清楚。

補助是台灣消費者購買電動機車的一大誘因，被視為該產業發展的重要推手，但也遭詬病是由人民補貼業者。彙整經濟部工業局的補助資料，能觀察台灣電動機車的發展趨勢，以及計算補助的多寡和去向。

電動機車的補助單位分為中央政府和地方政府，中央政府補助全國通用，地方政府的補助金額則依縣市不同。中央政府的補助還可以分成經濟部工業局和行政院環保署兩個單位，針對不同等級提供金額不一的補助。

由於電動機車產業網的資料並未標記補助是否為汰舊換新，或是純粹新購電動機車，因此補助金額一律以較低的新購電動機車補助計算。此外，資料並不統計地方補助，僅涵蓋中央補助的數量和金額。

電動時代重型機車仍是主流

按照《道路交通安全規則》，將機車分為排氣量 250cc 以上的大型重型機車（黃牌和紅牌）、排氣量 50 到 250cc 的普通重型機車（白牌）、排氣量 50cc 以下的普通輕型機車（綠牌）及 1.34 馬力以下的小型輕型機車。目前市面上沒有大型重型電動機車，政府也未訂定相關補助，因此下文分類僅有普通重型（以下稱重型）、普通輕型（以下稱輕型）及小型輕型。

工業局加上環保署補助，中央政府至 2019 年花費至少 34 億元補貼購買電動機車。台灣消費者騎乘重型機車為主，重型補助佔比達到 87% 不能再高了。工業局補助近 22 億元，環保署則補助超過 8 億元，總補助超過 30 億元。輕型機車補助則佔 11.24%，共補助 3.89 億元，大多數集中於 2019 年底。小型輕型補助佔比最低，僅有 1.45%。

環保署補助在 2016 年實施，但因為缺乏吸引消費者的產品，發放狀況始終低迷。2017 年 12 月工業局補助起跑，補助金額逐漸上升，並在 2018 年 3 月首次單月補助總額突破 1 億元。由於工業局補助金額較高，環保署又階段降低補助，因此補助來源以工業局為主。雖然環保署補助階段減少，但電動機車銷量攀升，補助總額持續增加，在 2019 年 12 月創下單月補助破 5 億元的新高。

補助去哪兒？六都領銜，桃園最強！

桃園補助電動機車數量近 7.5 萬輛，居全國之冠，光重型補助就超過 5.7 萬輛，比其他縣市 3 種型號相加都要多，堪稱台灣電動機車之都。桃園市能遠超其他縣市，地方政府的大力支持相當關鍵，2018 年桃園地方補助金額全台最高，吸引許多民眾購買電動機車。

六都是電動機車補助數量最多的縣市，推測是由於人口密集且消費力較強，因此有能力率先嘗試電動機車。廠商為了服務消費者，也在六都設置更多換電站，提升電動機車的便利性，進而讓更多人願意購買，創造「越多人買，換電站越多越方便」的正向循環。

總補助金同樣以六都為首，封王的桃園獲得中央補助近 7.5 億元，第 2 名的高雄補助還不到 5 億元。但六都之外只有屏東和彰化的補助金額突破 1 億元，第 7 名的屏東補助不到六都之末的台北一半，顯示補助款多數集中於都市。

重型機車全台普及，台北、離島偏愛輕型

重型機車補助數量同樣六都最多，但台北明顯在六都中落後。後面緊接著屏東、彰化和雲林等中南部縣市，吊車尾的則是離島，最後一名的連江縣甚至僅有 6 輛。

雖然輕型機車補助數量還是六都較多，但重型機車較少的台北反而超車奪冠，補助數量超過 1.4 萬輛。趨勢逆轉的還有離島，澎湖更擠下台南成為前 6 名唯一非六都的縣市，金門與連江排名相較重型補助也大幅提升。

對於這種現象，電動機車大廠 Gogoro 表示，輕型機車適合都市內短程移動，因此台北許多四輪族群需代步時，會選擇輕型而非重型。不僅性價比更高，還無須機車駕照。離島地區則是因為土地面積較小，輕型機車就能滿足交通需求。

補助見證電動機車發展史

攤開補助數量時間表，就能看見台灣電動機車的發展軌跡。電動機車初期都是輕型和小型輕型規格，直到 2015 年 8 月 Gogoro 1 交車，台灣才開始有重型電動機車。為了鼓勵當時數量極少的電動機車發展，2016 年 1 月環保署實施補助，不過補助量毫無起色，僅在 9 月重型曾拉出 2,793 輛的小高峰，隨即跌到谷底。

2017 年台灣電動機車迎來兩個重要轉捩點，首先是 7 月 Gogoro 2 交車，從此重型單月補助數量不再低於 2,000 輛。其次則是 12 月工業局補助實施，金額相較於環保署大幅提升。更具吸引力的產品上市，加上補助誘因增加，讓消費者逐漸視電動機車為選項，也使電動機車成為機車業界的焦點。

2018 年老牌機車大廠動作頻頻，紛紛搶進電動機車市場。6 月光陽（Kymco）發表 Ionex 車能網，新電動機車 New Many 110 EV 和 Nice 100 EV 也同步亮相，甚至宣示要奪下電動機車龍頭。8 月 Gogoro 組建 PBGN 聯盟，聯手山葉（YAMAHA）及宏佳騰、PGO，提供動力系統讓盟友各自推出產品。12 月三陽（SYM）宣布攜手中油自成一國，共同打造電動機車。在火熱的市場氣氛下，11 月整體電動機車單月補助量首度突破萬輛。

2019 年環保署補助二度降低，不過銷售熱度依舊，3 月重型補助數量首度單月破萬輛。5 月 Gogoro 3 上市，平價策略奏效，更多消費者願意購買，7 月以後重型補助數量單月再未低於 1 萬輛。PBGN 聯盟車款陸續登場，加上 2020 年環保署補助退場的預期心理，重型補助數量連創新高，10 月達到 16,988 輛，11 月達到 17,355 輛，12 月更是破紀錄的 24,400 輛。

Gogoro VIVA 翻轉輕型機車窘境

除了重型補助數量的高潮迭起，輕型機車補助量也值得關注。輕型同樣有補助但始終積弱不振，2019 年以前從未超過 2,000 輛，多數時間都不到 1,000 輛，甚至不到 500 輛。直到 2019 年 9 月 Gogoro VIVA 上市，徹底顛覆輕型生態。補助數量宛如火箭在 11 月遽增到 4,387 輛，比過去高點的 2 倍還多。加上補助退場預期心理的加持，12 月爆衝到 1,7207 輛，幾乎是前一個月新高點的 4 倍。

Gogoro VIVA 獲得相當兩極的評價，不管多少網友罵「很醜」、「三角錐」，還是無法否認 Gogoro VIVA 就是輕型機車的殺手級產品。若單看偏好輕型的台北市，Gogoro VIVA 上市後輕型補助在 12 月飆升到 8,428 輛，足足是重型補助量的 3 倍以上。這也顯示光是補助沒用，過去補助沒少還是銷量慘淡，唯有推出消費者想要的產品，產業才能一飛衝天。

2020 補助減少電動機車就完了？

2020 年環保署補助退場加上工業局補助減少 3,000 元，讓不少人看衰電動機車的發展。雖然補助降幅比之前大不少，但過往補助減少並未顯著影響銷量，而且新的汰舊換新補助能夠補位，因此預期補助降低會有所衝擊，但電動機車並不會重創。

或許環保署補助退場短期會影響銷量，但只要產品能贏得消費者的心，電動機車未來會持續成長，成為台灣機車市場的要角。

（合作媒體：。首圖來源：；圖片來源：）

本站聲明:網站內容來源於EnergyTrend https://www.energytrend.com.tw/ev/,如有侵權,請聯繫我們,我們將及時處理

【其他文章推薦】

※網頁設計公司推薦更多不同的設計風格，搶佔消費者視覺第一線

※廣告預算用在刀口上，網站設計公司幫您達到更多曝光效益

※自行創業缺乏曝光? 下一步"網站設計"幫您第一時間規劃公司的門面形象

※南投搬家前需注意的眉眉角角，別等搬了再說!

※新北清潔公司,居家、辦公、裝潢細清專業服務

摩根汽車計畫投資600萬英鎊研發新型電動汽車

發佈日期: 2020-06-18 作者: admin

據英國媒體報導，近日，摩根汽車公司宣佈啟動一項價值600萬英鎊的項目，用於研發新型混合動力汽車及電動汽車，將從2019年開始生產。該項目主要研發混合及電力動力系統。

據悉，英國先進推進動力中心為該項目提供資金，英國德爾塔汽車運動公司和波滕紮科技將提供其他支持。摩根汽車已經成功研發出純電動汽車EV3，將在今年晚些時候投入市場，而先進推進動力中心的資金支持將會幫助摩根研發更多使用其他燃料的車型。

摩根汽車董事總經理史蒂夫˙莫里斯表示，從十年前的LifeCar項目開始，公司就致力於研究發展新的動力推進技術，將在2020年之前研發並生產實現最棒的混合動力及電動傳動系統解決方案。

本站聲明:網站內容來源於EnergyTrend https://www.energytrend.com.tw/ev/,如有侵權,請聯繫我們,我們將及時處理

【其他文章推薦】

※為什麼 USB CONNECTOR 是電子產業重要的元件?

※網頁設計一頭霧水??該從何著手呢? 找到專業技術的網頁設計公司，幫您輕鬆架站!

※想要讓你的商品成為最夯、最多人討論的話題?網頁設計公司讓你強力曝光

※想知道最厲害的台北網頁設計公司推薦、台中網頁設計公司推薦專業設計師”嚨底家”!!

※新北清潔公司,居家、辦公、裝潢細清專業服務

全球速度最快電動汽車時速達644km

發佈日期: 2020-06-18 作者: admin

據報導，最近摩納哥跑車廠商Venturi開發出了全球速度最快的電動汽車。

這輛名為Venturi Buckeye Bullet 3（VBB3）的電動汽車，由Venturi的Formula E電動方程式團隊和俄亥俄州立大學的汽車研究中心聯合打造而成。該車之前的模型曾在2010年創造了全球電動汽車陸上行駛速度記錄：307英里每小時（mph）。但當前模型的預估速度為372mph，將輕鬆打破這一記錄。Venturi的目標是令VBB3的速度最終達到400mph(約合644km/hr)。

不過高速電動汽車也有一些自己的優勢。和其他電動車一樣，VBB3產生的熱量遠比同等功率的汽油引擎更少，因此VBB3無需冷卻通風口。不過這並不意味著該車“很冷”，實際上，其內部系統包含許多石油潤滑機制和一隻每次行駛前都要加滿冰的箱子。

去年，由於開採和氣候變化等因素造成美國邦納維爾鹽鹼灘退化，Venturi無法對VBB3進行測試，他們希望今年夏天時情況會好一些，這樣他們就能繼續其追求速度的征程。

本站聲明:網站內容來源於EnergyTrend https://www.energytrend.com.tw/ev/,如有侵權,請聯繫我們,我們將及時處理

【其他文章推薦】

※USB CONNECTOR掌控什麼技術要點? 帶您認識其相關發展及效能

※評比前十大台北網頁設計、台北網站設計公司知名案例作品心得分享

※智慧手機時代的來臨，RWD網頁設計已成為網頁設計推薦首選

※評比南投搬家公司費用收費行情懶人包大公開

※幫你省時又省力,新北清潔一流服務好口碑

買電動車前必看：電動車相關名詞解析

發佈日期: 2020-06-18 作者: admin

隨著電動車越來越多，開始考慮購入電動車的消費者，也不得不面對一項新挑戰：電動車的各種專有名詞，五花八門讓你看了頭疼的詞彙，其實不複雜，快速搞懂這些名詞之後，再去做功課就會輕鬆很多囉。

從燃油車到電動車，有許多新名詞誕生，我們從兩大類著手，就能解決大部分困惑。

電動車（Electric Vehicle）

首先是關於車種的名詞，電動車其實涵蓋範圍很廣，小至兒童玩具，大到高速鐵路，任何以電力驅動的車輛都可稱為電動車，但我們日常對話討論的其實是指四輪的電動汽車，又可分成三大類。

HEV（油電車、混合動力車）

目前路上最常見的電動「化」的車，其實是油電車，又稱混合動力車，H 代表的是 Hybrid，廣義上也是電動車，但油電車的電能用意是要讓車輛更省油，整體來說仍歸類為燃油車，不能享有相關補貼優惠。

但大部分國家的禁售燃油車規定，油電車不在禁售名單，但每個國家的規定細節仍有不同，例如英國規定 2030 年起禁售燃油車，油電車仍可販售，但 2040 年起有排放廢氣的車輛不得上路，油電車雖然比燃油車排放量低，但不是零排放。台灣目前尚在研議。

PHEV（插電式混合動力車）

油電車只需要加油，但 PHEV（Plugin Hybrid EV）顧名思義還可以插電，動力跟油電車剛好相反，以電力為主，電力不足時啟動引擎進入油電模式，同時帶動發電機充電，達成更優秀的能源表現。

Toyota 是目前插電式混合動力車的霸主，同時享有兩種優勢。（圖片來源：）

擁有插頭，表示可使用電動車充電車位，但擁有引擎讓它無法獲得相關稅賦優惠。比起燃油車，能源效率奇高，但動力表現較差；比起純電動車，續航力與便利性大勝，但動力與零排放部分就弱了，因此是一款介於油電之間的第三選項。

BEV（電池動力車）

最後是我們常講的「電動車」，嚴格來說應該稱為電池動力車（Battery EV），定義也很單純，沒有燃油引擎，完全靠車電池的電力行駛，也是我們說的「純電車」。

純電車除了零排放，目前還享有各種補助，包括貨物稅、牌照稅減免及計程車換購補助，台灣部分縣市還提供電動車路邊停車免費優惠。

以上就是目前乘用電動車常見的 3 個種類，接下來是針對純電車的新名詞解釋。

動力與電力

電動車因為使用電池動力，新技術自然產生很多新名詞，以下是幾個考慮購買電動車的車主必須知道的名詞。

kWh 千瓦小時

這個縮寫看起來很可怕，但其實就是電費帳單的「度」，用這個來理解電池容量與車輛能源效率最方便了，同時也很像燃油車的「汽油量」。

舉例來說，特斯拉 Model 3 Standard Range Plus 的電池容量是 50kWh，也就是 50 度，所以假設從零充到滿的費用，就等於每度電的費用 × 50。

那特斯拉充電要充多久呢？如果用特斯拉自家充電樁，功率是 11kW（注意，功率沒有 h），這代表用這個功率充電 1 小時，就可以獲得 11 度電量，因此要把這台 Model 3 SR 充滿約需 50÷11=4.5 小時。

反過來說，這台 Model 3 SR 能開多久？這就跟燃油車一樣，取決於怎麼開，以極端例子來說，這輛車的馬達最大功率是 260kW，如果你一直用極速衝刺，那里程就是 50÷260=0.19h，大概 10 分鐘就會用完電。當然沒有人會這樣開車，因此更重要的是下面這個名詞。

Energy Efficiency 能源效率

這就跟油耗很類似，以前我們會看一輛車 1 公升油可跑幾公里，電動車則常用百公里消耗能源量來比較，看起來會像 15kWh / 100km 這樣。代表這台車平均行駛 100 公里，要用掉 15 度電，這也是前面那台特斯拉 Model 3 的數據。

美國 EPA 的數據通常比較嚴苛，因此車廠不太提供。（圖片來源：）

這樣你就可以推算出這台車約能跑多遠，因為車電量是 50 度，每 100 公里用掉 15 度，那大約可跑 330 公里。

等等，特斯拉官網不是說可跑 400 公里嗎？這就要帶出下一個名詞了。

WLTP / EPA range

能源效率跟油耗一樣，不同測試方法會測出不同結果，目前最常見的是這兩種標準。WLTP 是歐盟的新標準，取代以前用的 NEDC。EPA 則是美國能源局的簡稱，兩邊測試方法不同，有興趣可以另外找來研究，我們只需要記得一件事：WLTP 里程比較高，EPA 里程比較低。

各家車廠當然都會拿比較漂亮的 WLTP 數據給自家車用，要酸對手的車時，就拿 EPA 數據來用。不管怎麼說，測試都不可能完美，但根據目前資料來看，車廠提供的 WLTP 數據，打 8 折差不多就很接近實際上路的狀況。

AC/DC 交流電直流電

最後要講到的是兩種不同的充電方式，想了解更多原理建議自行搜尋，也可參考之前介紹過的，但在這裡我們提供你最簡單易懂的理解方式：一般充電是交流電，充滿 6 小時；快速充電用直流電，不超過半小時。交流電全台通用，直流快充請找自家車廠。

特斯拉提供的交流電充電速率對照表，單位是可行駛公里數。（圖片來源：）

直流電的功率高達上百 kW，所有電動車幾乎都在半小時左右就會充到 80% 以上，雖然快速，但因建設成本高，所以站點還不普遍，且不同廠牌有不同規格，有長途旅行需求，務必要研究清楚 DC 充電站的位置，才能確保動能無虞，就像一般加油站。

交流電功率較小，常見充電樁都在 7kw 左右，適合賣場停車或家中車庫使用，雖然充電速度慢，但台灣已有統一規格，任何車款都能使用公共充電樁。如果家裡能安裝充電設備，也只需充電一晚，就能完全充滿。

以上就是我們整理的電動車名詞介紹，讓尚未了解電動車相關知識的朋友快速上手，其實很簡單對吧？你還遇到哪些看不懂的電動車名詞呢？趕快留言跟我們討論。

（合作媒體：。首圖來源：）

本站聲明:網站內容來源於EnergyTrend https://www.energytrend.com.tw/ev/,如有侵權,請聯繫我們,我們將及時處理

【其他文章推薦】

※網頁設計公司推薦更多不同的設計風格，搶佔消費者視覺第一線

※廣告預算用在刀口上，網站設計公司幫您達到更多曝光效益

※自行創業缺乏曝光? 下一步"網站設計"幫您第一時間規劃公司的門面形象

※南投搬家前需注意的眉眉角角，別等搬了再說!

※新北清潔公司,居家、辦公、裝潢細清專業服務

特斯拉下調2016中國區銷量目標至5000輛

發佈日期: 2020-06-17 作者: admin

近日，特斯拉CEO伊隆•馬斯克（ElonMusk）表示，將下調2016年中國區銷量目標至5000輛。另外，特斯拉正在努力尋找當地的合作夥伴，希望能在今年上半年順利於國內建廠。

據悉，2015年前9個月，特斯拉在中國銷售了3025台電動汽車，離2014年定下的目標1萬輛相差很遠，業績不佳是馬斯克下調了中國銷售目標的主要原因。

資料顯示，香港已成為特斯拉ModelS全球保有密度最高的城市，在2015年全球共計交付的50,580輛ModelS中，有2,221輛是來自香港的訂單，占全球約4.39%。近兩年，香港政府鼓勵市民使用電動汽車，並在香港推行電動汽車首次免登記稅政策，使電動車註冊量增長了270%，而特斯拉ModelS占到全部電動車份額的80%。

相比而言，大陸市場對特斯拉的政策支持力度顯得不足。馬斯克稱，自己的公司希望能在今年上半年順利於國內建廠，並借此減輕進口稅收方面的壓力，以及爭取更多政府為新能源車專供的政策優惠。

本站聲明:網站內容來源於EnergyTrend https://www.energytrend.com.tw/ev/,如有侵權,請聯繫我們,我們將及時處理

【其他文章推薦】

※為什麼 USB CONNECTOR 是電子產業重要的元件?

※網頁設計一頭霧水??該從何著手呢? 找到專業技術的網頁設計公司，幫您輕鬆架站!

※想要讓你的商品成為最夯、最多人討論的話題?網頁設計公司讓你強力曝光

※想知道最厲害的台北網頁設計公司推薦、台中網頁設計公司推薦專業設計師”嚨底家”!!

※新北清潔公司,居家、辦公、裝潢細清專業服務

戴姆勒、特斯拉聯合開發電動版奔馳B級開始投產

發佈日期: 2020-06-17 作者: admin

電動版奔馳B級是戴姆勒繼Smart ForTwo電動版之後的第二款純電動車，由戴姆勒和特斯拉聯合開發，其電動馬達由特斯拉提供，今年將先後在美國和歐洲上市。

電動版奔馳B級擁有大約200公里的續航里程，0到100km/h加速僅需時7.9秒，最高速度為160km/h。其電動馬達由特斯拉提供，規律達174馬力，同寶馬i3電動車的規律相比還高出8馬力。目前戴姆勒尚未公佈新款奔馳B級電動車的售價。

電動版奔馳B級由戴姆勒位於德國的拉施塔特(Rastatt)工廠負責生產，汽油、柴油及天然氣版本的奔馳B級也在該工廠投產。據戴姆勒一名女發言人透露，電動版奔馳B級在其整個生命週期中的產量預計將達到五位數。

本站聲明:網站內容來源於EnergyTrend https://www.energytrend.com.tw/ev/,如有侵權,請聯繫我們,我們將及時處理

【其他文章推薦】

※USB CONNECTOR掌控什麼技術要點? 帶您認識其相關發展及效能

※評比前十大台北網頁設計、台北網站設計公司知名案例作品心得分享

※智慧手機時代的來臨，RWD網頁設計已成為網頁設計推薦首選

※評比南投搬家公司費用收費行情懶人包大公開

※幫你省時又省力,新北清潔一流服務好口碑

JavaScript入門經典（第7版）讀書筆記

發佈日期: 2020-06-16 作者: admin

斷斷續續看了十來天，終於看完了，還是學到些東西，這本書還是不錯的，各方面都有涉及。

補充了下之前不完善的JS 知識

筆記一般只記必要的東西。‎

1 JavaScript 基礎

1.1 JavaScript 簡介

1.1.1 Web 腳本編程基礎

服務器端和客戶端編程
JavaScript 簡介
JavaScript 起源
瀏覽器的競爭
<script> 標籤
- html5 script 標籤不用指定屬性
DOM 簡介
W3C 和標準兼容
window 和 document 對象
對象表示法
與用戶交互
document.write()
讀取 document 對象的屬性

1.2 創建簡單的腳本

1.2.1 在 Web 頁面里添加 JavaScript

把代碼放在 script 標籤內
通過 src 引用外部 js 文件

1.2.2 編寫 JavaScript 語句

代碼註釋
- 一般文件名後綴 .min.js 是去掉了空白和註釋

1.2.3 變量

1.2.4 操作符

算術操作符
操作符優先級
對字符串使用操作符+

1.2.5 捕獲鼠標事件

onClick 事件處理器
- HTML 里不區分大小寫,所以屬性名 onclick 小寫也可以
onMouseOver 和 onMouseOut 事件處理器
- 使用 this 引用 HTML 元素
```
<img src="1.png" onmouseover="this.src='2.png';">
```

1.3 使用函數

1.3.1 基本語法

1.3.2 調用函數

把 JavaScript 代碼放置到頁面的<head>區域
- 函數放到文檔開頭,確保在調用前已經被定義
- 函數如果多次定義,會使用最後的定義
給函數傳遞參數
多參數
從函數返回值
- 如果沒有 return, 會返回 undefined

匿名函數

function sayHello() {
    alert("hello");
}

var sayHello = function() {
    alert("hello");
}

1.4 函數的更多知識

1.4.1 變量作用域

使用 this 關鍵字
使用 let 和 const
- 塊級作用域 let
用 const 關鍵字聲明變量

1.4.2 箭頭函數

var sayHello = function() { alert("hello"); };

var sayHello = () => alert('hello');

var myFunc = x => alert(x);

myFunc = (x, y) => alert(x + y);

myFunc = (x, y, z) => {
    let area = x*y + 5;
    let boxes = area / z;
    return boxes;
}

1.4.3 設置默認參數

1.5 DOM 對象和內置對象

1.5.1 與用戶交互

alert()
- 術語“模態”的含義
- confirm()
```
var answer = confirm("are you ok?");
```

prompt()

var answer = prompt("what is your full name?");
var answer = prompt("what is your full name?", "cai ji");

1.5.2 根據 id 選擇元素

var myDiv = document.getElementById("div1");

innerHTML 屬性

var myDivContents = document.getElementById("div1").innerHTML;
document.getElementById("div1").innerHTML = "heheda";

1.5.3 訪問瀏覽器歷史記錄

alert(history.length);
history.forward();
history.backward();
history.go(-3);
history.go(2);
history.go("baidu.com");

1.5.4 使用 location 對象

location 的屬性 .href .protocol .host .hostnmae .port .pathname .search .hash

用 location 對象導航
- 兩種導航到新頁面的方式 location.href = “www.baidu.com”; location.replace(“www.baidu.com”); 前者會保留舊頁面在歷史記錄里
刷新頁面
- location.reload(); 避免使用緩存 location.reload(true);
獲取瀏覽器信息: navigator 對象
- navigator 保留瀏覽器本身的數據
- navigator 的屬性 .appName .appCodeName .appVersion .language .cookieEnabled .cpuClass .onLine .platform .plugins.length
- navigator 返回的信息並不準確

1.5.5 日期和時間

創建具有當前日期和時間的 Date 對象

var mydate = new Date();
var year = mydate.getFullYear();
var month = mydate.getMonth();
var date = mydate.getDate();
var day = mydate.getDay();    // 星期
var hours = mydate.getHours();
var minutes = mydate.getMinutes();
var seconds = mydate.getSeconds();

創建具有指定日期和時間的 Date 對象

var d1 = new Date("October 22, 1995 10:57:22");
var d2 = new Date(95, 9, 22);
var d3 = new Date(95, 9, 22, 10, 57, 0);

設置和編輯日期與時間

var mydate = new Date();
document.write(mydate.getDay());
mydate.setDate(15);
document.write(mydate.getDat());
document.write(mydate.toDateString() + mydate.toTimeString());

利用 Math 對象簡化運算
- Math 的一些常見方法 .ceil(n) .floor(n) .max(a, b, c, …) .min(a, b, c, …) .round(n) 四舍五入 .random() 返回一個 0 到 1 的隨機數
取整
獲得最大值和最小值

生成隨機數

function myRand(range) {
    return Math.round(Math.random() * range);
}

数字常數

.E 自然常數,約為 2.718 .LN2 2 的自然對數,約為 0.693 .LN10 10 的自然對數,約為 2.302 .LOG2E 以 2 為底 e 的對數,約為 1.442 .LOG10E 以 10 為底 e 的對數,約為 0.434 .PI 圓周率,約為 3.14159 .SQRT1₂ 2 的平方根的倒數,約為 0.707 .SQRT2 2 的平方根,約為 1.414

關鍵字 with

with (Math) {
    var myRand = random();
    var biggest = max(2, 3, 5);
    var height = round(11.22);
}

2 JavaScript 編程

2.1 数字和字符串

2.1.1 數值

整數
浮點數
十六進制數,二進制數和八進制數

2.1.2 全局方法

toString()

var x = 13;
alert(x.toString());
alert(x.toString(16));
(11).toString();

toFixed()

x.toFixed(0); // "13"
x.toFixed(3); // "13.000"

toExponential()

var num = 666;
num.toExponential(4); // "6.6600e+2"
num.toExponential(6); // "6.660000e+2"

2.1.3 Number 對象

Number.isNaN()
- 當試圖把一些非數值當做數值處理,卻無法得到數值時,返回值就是 NaN
- 示例
```
Number.isNaN(3); //false
Number.isNaN(0 / 0); // true
```
Number.isInteger()
Number.parseFloat() 和 Number.parseInt()
- 解析的字符串首字符如果是一個数字,函數會持續解析到数字結束
```
Number.parseFloat("21.4"); // 21.4
Number.parseInt("12px",10); // 12
```
無窮大
- 表示無窮的關鍵字 Infinity -Infinity
- isFinite() 會把參數轉換為數值,如果結果是 NaN,正無窮大或負無窮大,函數返回 false

2.1.4 Number() 函數

該函數會盡可能返回一個對等的數值,如果失敗,返回 NaN

2.1.5 布爾值

如果布爾值被用作計算,true 為 1, false 為 0
JS 里被當做 false 的值
1. 布爾值 false
2. 未定義 undefined
3. null
4. 0
5. NaN
6. “”

非操作符

2.1.6 null(空) 和 undefined(未定義)

undefined 不是關鍵字,是未定義的全局變量

2.2 操作字符串

2.2.1 字符串

length 屬性
轉義序列
字符串方法
- concat
- indexOf
- lastIndexOf
- repeat var inStr = “a b”; var outStr = inStr.repeat(3)
- replace
- split
- substr string1.substr(4, 11); string1.substr(4);
- toLowerCase
- toUpperCase

2.2.2 模板字符串

var name = "aa";
var course = "bb";
var myString = `hell ${name}, welcome ${course}`;

2.3 數組

2.3.1 數組

JS 的數組能夠存放任何數據類型

創建新數組
- 數組也是一個對象 var myArray = new Array(); var myArray = [];

初始化數組

var myArray = ['111', '22'];
myArray[20] = "333e";
myArray.length

數組的方法
- concat
- join 把數組的全部元素連接在一起形成一個字符串 var longDay = myArray.join(“-”);
- toString 相當於 myArray.join(“,”);
- indexOf 沒有找到返回-1
- lastIndexOf
- slice 可以為負數
- sort 把數組元素按字母順序排列
- splice myArray.splice(2, 1, “heheda”); 指向索引為 2 的元素,刪除 1 個元素,插入一個新元素,返回被刪除的元素

2.3.2 如何遍曆數組

使用 forEach()
- 接受一個函數作為參數,並將函數依次應用與數組中的每個元素
```
var myArray = [1, 2, 3, 4];
function cube(x) {
    console.log(x*x*x);
}
myArray.forEach(cube);
```
- forEach 不返回任何值

使用 map()

和 forEach 的區別在於 map 會返回和最初數組相同大小的新數組

var myArray = [1, 2, 3, 4];
fucntion cube(x) {
    return (x*x*x);
}
var newArray = myArray.map(cube);

使用 for-of 訪問數組

var myArray = [2,3,4,5];
functionn cube(x) {
    console.log(x*x*x);
}
for (var y of myArray) {
    cube(y);
}

2.3.3 三點表示法

組合多個數組
```
var array2 = [1, 2, ...array1, 3];
```

用參數的數組來調用函數

var myArray = [1, 2, 3];
alert(Math.min(...myArray));

收集數據
```
var [a, b, ...c] = [1, 2, 3, 4, 5];
```

2.4 用 JavaScript 處理事件

mousedown 和 mouseup 在 click 前觸發
ctrlKey shiftKey altKey metaKey

2.4.1 事件的類型

一些常見事件
1. 鼠標事件
  - onclick
  - oncontextmenu 鼠標右鍵彈出菜單
  - ondblclick
  - onmousedown
  - onmouseenter 鼠標移動到一個元素上時
  - onmouseleave
  - onmousemove 鼠標在一個元素上移動時
  - onmouseover 鼠標移動到一個元素或其子元素時
2. 鍵盤事件
  - onkeydown 按下按鍵
  - onkeypress 按下並放開按鍵
  - onkeyup 釋放按鍵
3. DOM 對象事件
  - onerror 加載一個外部文件出現錯誤時
  - onload
  - onresize
  - onscroll 滾動了元素的滾動條
4. 表單事件
  - onblur 元素失去焦點時
  - onchange
  - onfocus
  - onreset 重置表單
  - onselect
  - onsubmit

2.4.2 事件處理器

內聯事件處理器

<a href="http://www.baidu.com" onclick="alert('hello')">baidu</a>

作為 DOM 對象的屬性的事件處理器

// <a href="xxx" id="a1">aa</a>
var myLink = document.getElementById('a1');
myLink.onclick = function() {
    alert("hello");
}

使用 addEventListener()

var myLink = document.getElementById('a1');
function sayHello() {
    alert("hello");
}
myLink.addEventListener('click', sayHello);
myLink.removeEventListener('click', sayHello);

添加多個監聽器
- 使用 addEventListener 可以對一個事件添加多個函數

2.4.3 event 對象

myInputField = document.getElementById('a');
function myFunction(e) {
    var kc = e.keyCode;
    if (kc == 27) {
        alert("xx");
    }
}
myInputField.addEventListener('keydown', myFunction);

event 對象會自動傳遞給事件處理器
e.keyCode 表示按下了哪個鍵,27 表示 Escape

阻止默認行為

var myLink = document.getElementById('a');
function refuseAccess(e) {
    alert("wrong");
    e.preventDefault();
}
myLink.addEventListener('click', refuseAccess);

事件冒泡和捕獲
- 嵌套元素時,各層元素都有事件監聽器時,執行順序為冒泡
- addEventListener 的第三個參數默認為 false,對於嵌套元素,從內向外執行,像冒泡一樣.

關閉冒泡和捕獲

function myFunction(e) {
    var kc = e.keyCode;
    e.stopPropagation();
    if (kc == 27) {
        alert("1");
    }
}

2.5 程序控制

2.5.1 條件語句

和 C 差不多

if() 語句
比較操作符
- = 值和類型都相等
測試相等性
if 進階
測試多個條件
switch 語句
邏輯操作符

2.5.2 循環和控制結構

while
do…while
for
用 break 跳出循環

用 for…in 在對象集里循環

var days = [1, 2, 3, 4];
for (i in days) {
    alert(i);
}

2.5.3 設置和使用定時器

這兩個方法都是 window 對象的方法

setTimeout()

function hide(elementId) {
    document.getElementById(elementId).style.display='none';
}
window.onload = function() {
    setTimtout("hide('id1')", 3000);
}
var timer1 = setTimeout("hide('id1')", 3000);
clearTimeout(timer1);

setInterval()

var timer1 = setInterval("updateClock()", 1000);
clearInterval(timer1);

3 理解 JavaScript 對象

3.1 面向對象編程

3.1.1 什麼是面向對象編程

3.1.2 創建對象

創建直接實例

myNewObject = new Object();
myNewObject.showInfo = myFunc;
myNewObject.info = 'this is a info';

使用關鍵字 this
- this 在 HTML 內聯 JS 里指此 HTML 元素,也可指向它所屬的對象

匿名函數

myNewObject.showInfo = function() {
    alert(this.info);
}

使用構造函數

如果要創建一個類的多個實例,可以創建構造函數

function Car(Color, Year, Make, Miles) {
    this.color = Color;
    this.year = Year;
    this.make = Make;
    this.odometerReading = Miles;
    this.setOdometer = function(newMiles) {
        this.odometerReading = newMiles;
    }
}
var car1 = new Car("blue", "1998", "Ford", 77777);

3.1.3 用 prototype 擴展和繼承對象

擴展對象

function Person(personName) {
    this.name = personName;
    this.info = 'a';
    this.showInfo = function() {
        alert(this.info);
    }
}
var person1 = new Person('adam');
var person2 = new Person('hehe');
Person.prototype.sayHello = function() {
    alert(this.name + 'say hello');
}

繼承對象

function Pet() {
    this.animal = "";
}
function Dog() {
    this.breed = "";
}
Dog.prototype = new Pet();

3.1.4 封裝

function a(b, c, d) {
    function kk(m, n) {
        return m + n;
    }
}

3.2 對象進階

3.2.1 類

新引入的 class 關鍵字和 constructor

function Pet() {
    this.animal = "";
    this.setAnimal = function(newAnimal) {
        this.animal = newAnimal;
    }
}

class Pet {
    constructor(animal) {
        this.animal = animal;
    }
    setAnimal(newAnimal) {
        this.animal = newAnimal;
    }
}

使用 getter 和 setter

下劃線前綴防止被重複調用

class Pet {
    constructor(animal, name) {
        this.animal = animal;
        this.name = name;
    }
    get name() {
        return this._name;
    }
    set name(n) {
        n = n.charAt(0).toUpperCase() + n.slice(1).toLowerCase();
        this._name = n;
    }
}

Symbol
- 創建的 Symbol 一定是唯一的傳的參數只是說明
```
var myname = Symbol('nickname');
myCat[myname] = 'heheda';
```

3.2.2 對象繼承

使用 extends 和 super

class Dog extends Pet {
    constructor(name, breed) {
        super(name);
        this.breed = breed;
    }
}

3.2.3 使用功能檢測

if (document.getElementById) {
    // do something
} else {
    // other
}

typeof

if (typeof document.getElementById == 'function') {
    // do something
} else {
    // other
}

typeof 的返回值 “number” “string” “boolean” “object” null undefined

3.3 DOM 腳本編程

3.3.1 DOM 節點

節點類型
- nodeType 每種節點類型都有一個關聯的數值,保存在屬性 nodeType
  1. 元素
  2. 屬性
  3. 文本
  4. CDATA 區域
  5. 實體引用
  6. 實體
  7. 執行指令
  8. HTML 註釋
  9. 文檔
  10. 文檔類型(DTD)
  11. 文檔片段
  12. 標籤
- childNodes 屬性
```
function countListItems() {
    var olElement = document.getElementById("toDoList");
    var count = 0;
    for (var i = 0; i < olElement.childNodes.length; i++) {
        if (olElement.chiodNodes[i].nodeType == 1)
            count++;
    }
}
window.onload = countListItems;
```
- firstChild lastChild myElement.childNodes[0] myElement.childNodes[myElement.childNodes.length – 1];
- parentNode 屬性
- nextSibling previousSibling
使用 nodeValue
使用 nodeName

3.3.2 用 getElementsByTagName() 選擇元素

基本用法 var myDics = document.getElementsByTagName(“div”);
document.getElementsByClassName()

3.3.3 讀取元素的屬性

var myNode = document.getElementById("id1");
alert(myode.getAttribute("title"));

3.3.4 Mozilla 的 DOM 查看器

創建新節點
- 創建步驟
  1. 創建新節點
    - createElement() var newDiv = document.createElement(“div”);
    - createTextNode() var newTextNode = document.createTextNode(“heheda”);
    - cloneNode() var myDiv = document.getElementById(“id1”); var newDiv = myDiv.cloneNode(true) true 代表會複製子節點一般需要修改 id 值
  2. 添加到 DOM 樹
操作子節點
- appendChild() var newText = document.createTextNode(“heheda”); var myDiv = document.getElementById(“id1”); myDiv.appendChild(newText);
- insertBefore() var newPara = document.createElement(“p”); var myDiv = document.getElementById(“id1”); var para2 = document.getElementById(“para2”); myDiv.insertBefore(newPara, para2);
- para.replaceChild(new, old)
- removeChild()
```
var myDiv = document.getElementById("id1");
var myPara = document.getElementById("para2");
var removedItem = myDiv.removeChild(myPara);
alert(removedItem.getAttribute("id"));
```

編輯元素屬性

var myPara = document.getElementById("para1");
myPara.setAttribute("title", "opening paragraph");

動態加載 JavaScript 文件

var scr = document.createElement("script");
scr.setAttribute("src", "newScript.js");
document.head.appendChild(scr);

3.4 JSON 簡介

3.4.1 JSON 是什麼

使用 JSON 表示法時,對象可以方便的轉換為字符串來進行存儲和轉換
JSON 的真正優雅之處在於對象在 JSON 里以普通 JS 代碼錶示,因此可以利用 JS “自動” 解析功能

JSON 語法

var jsonObject = {
    "param1": "value1",
    "param2": "value2"
}

3.4.2 訪問 JSON 數據

eval 函數參數:
1. 表達式
2. 表達式字符串
3. 字符串,其中是括號包含的 json

var x = eval(1*2);
eval("a=1;b=2;document.write(a+b);");
var user = '{"user":"admin", "location": "spain"}';
var myObject = eval('(' + user + ')');

使用直接瀏覽器 JSON 支持
- 最新瀏覽器都對 JSON 提供直接支持,所以可以不用 eval 函數
- 瀏覽器會創建一個名為 JSON 的 JS 對象來管理 JSON 的編碼和解碼,這個對象有兩個方法,stringify() 和 parse()

使用 JSON.parse()

var Mary = '{"h": 1.9, "age": 12}';
var myObject = JSON.parse(Mary);
var out = "";
for (i in myObject) {
    out += i + " = " + myObject[i] + "\n";
}
alert(out);

3.4.3 JSON 的數據序列化

使用 JSON.stringify()

var Dan = new Object();
Dan.height = 1.85;
Dan.age = 41;
Dan.eyeColor = "blue";
alert(JSON.stringify(Dan));

3.4.4 JSON 數據類型

參數部分的規則
1. 不能是 JS 保留的關鍵字
2. 不能数字開頭
3. 特殊字符只能有下劃線和美元符號
值可以是以下數據類型
1. 數值
2. 字符串
3. 布爾值
4. 數組
5. 對象
6. null

3.4.5 模擬關聯數組

在 JS 中,object[“property”] 和 object.property 是對等的

var conference = {"a": "1", "b": "2"};
alert(conference["a"]);
alert(conference.a);

3.4.6 使用 JSON 創建對象

用方括號表示數組 var categories = [“news”, “sports”];

屬性

var user = {“a”: 1, “b”: 2}; var name = user.a;

方法

var user = {
    "a": 1,
    "setName": function(newName) {
        this.username = newName;
    }
}
user.setName("heheda");

當 JSON 作為通用數據交換格式時,值不能放函數

數組

var bookListObject = {
    "a": [1, 2, 3]
}
var book = bookListObject.a[1];

對象

3.4.7 JSON 安全性

eval() 能執行任何 JS 命令,對於來源不明的 JSON 數據可能存在安全問題,安全的辦法是使用內置 JSON 解析器,它只識別 JSON 文本而不會執行腳本命令

4 用 JavaScript 操作 Web 界面

4.1 HTML 與 JavaScript 編程

4.1.1 HTML5 的新標籤

section
header
footer
nav
article
aside
figure
figcaption
summary

4.1.2 一些重要的新元素

用<video> 回放視頻
用 canPlayType() 測試可用的格式
- media.canPlayType(“video/webm”);

控制回放

var myVideo = document.getElementById("vid1").play();
var myVideo = document.getElementById("vid1").pause();

用<audio> 標籤播放聲音

var soundElement = document.createElement('audio');
soundElement.setAttibute('src', 'sound.ogg');
soundElement.play();
soundElement.currentTime = 12;

用<canvas> 在頁面上繪圖

4.1.3 拖放

4.1.4 本地存儲

兩個對象 localStorage sessionStorage

if (typeof(Storage) != "undefined") {
    localStorage.setItem("key", "value");
    localStorage["key"] = "value";
    alert(localStorage.getItem("key"));
    alert(localStorage["key"]);
}

4.1.5 操作本地文件

查看瀏覽器的支持情況
- if (window.File && window.FileReader && window.FileList)

4.2 JavaScript 和 CSS

4.2.1 CSS 簡介

從內容分離樣式
CSS 樣式聲明
在哪裡保存樣式聲明

4.2.2 DOM 的 style 屬性

4.2.3 用 className 訪問類

4.2.4 DOM 的 styleSheets 對象

啟用,禁用和切換樣式表

4.3 CSS3 簡介

5 與 JavaScript 工具相關的高級技術

5.1 讀取和寫入 cookie

5.1.1 什麼是 cookie

cookie 的局限性

5.1.2 使用 document.cookie 屬性

數據的編碼和解碼

var str = 'hehe (aa) .';
document.write(str + '<br />' + escape(str));

5.1.3 cookie 組成

cookieName 和 cookieValue
domain 用於指明 cookie 屬於哪個域,如果為 a.com ,則 b.a.com 可以訪問這個 cookie
path 指定可以使用 cookie 的路徑
secure 表明瀏覽器把 cookie 發給服務器時,是否要使用 SSL 標準
expires 以 UTC 標準的過期時間

5.1.4 編寫 cookie

var cookieDate = new Date ( 2018, 05, 15 );
var user = "heheda";
document.cookie = "username=" + escape(user)  + ";expires=" + cookieDate.toUTCString();

5.1.5 編寫一個函數來寫 cookie

5.1.6 讀取 cookie

5.1.7 刪除 cookie

把一個 cookie 的失效日期設置為今天之前即可

5.1.8 在一個 cookie 里設置多個值

5.2 用正則表達式匹配模式

5.2.1 創建正則表達式

JS 里兩種生成正則表達式的方法

使用正則表達式字符串字面量
- var myRegExp = FooBar;
```
var myRepExp = /FooBar/;
if (document.getElementById("txt").value.search(myRegExp) == -1) {
    alert("not found");
} else {
    alert("The string occurs");
}
```
- 正則表達式修飾符
i 不區分大小寫 g 全局匹配,而不是找到第一個匹配就停止 m 多行匹配 var aa = /stupid/gi;
- 方括號[]指定範圍
- 處理特殊字符的快捷方式,元字符 \w 等
- 正則表達式限定符 + 重複次數等

使用 JS 的 RegExp 對象

var myPattern = new RegExp("Foobar");
var result = /boy/.exec("heheda");
console.log(result[0]);
myPattern.test("this is a test");
var result = myPattern.exec(myString);

對正則表達式使用字符串方法

match search replace split

var myString = "heheda dada";
var outString = myString.match(/\d+/g);

var myString = "1 ;2 3;4 5";
var outString = myString.split(/\s*;\s*/);

myString.replace(/stupid/ig, "cupid");

用一個函數作為 replace() 的參數

function CtoF(match) {
    return ((match * 9) / 5) + 32;
}
var myString = "for 1 and 5";
myString = myString.replace(/\d+/g, CtoF);

5.3 理解並使用閉包

5.3.1 回顧作用域的相關知識

5.3.2 從一個函數返回另一個函數

5.3.3 實現閉包

閉包是訪問父作用域的一個函數,即便是在該作用域已經結束之後.

傳遞參數

function sayHi(visitor) {
    let msg = visitor + ' says: hello world!';
    return function logMessage() {
        console.log(msg);
    }
}

編輯一個閉包變量

function sayHi(visitor) {
    let msg = visitor + ' says: ';
    return function logMessage(extra) {
        msg = msg + extra;
        console.log(msg);
    }
}
var helloPhil = sayHi("Phil");
var helloSue = sayHi("Sue");

閉包和變量

閉包也允許將一些數據和操作這些數據的函數關聯起來

function sayHi(visitor) {
    let msg = visitor + ' says: hello world';
    return function logMessage() {
        console.log(msg);
    }
}
var helloPhil = sayHi("Phil");
helloPhil()

對象提供了靈活性,但是到處都可以修改,容易出現錯誤.

5.4 用模塊組織代碼

5.4.1 為何使用模塊

模塊使得代碼更容易維護
模塊幫助復用代碼
模塊有助於整齊的全局作用域

5.4.2 模塊基礎知識

一個文件一個模塊,模塊中的內容對外部不可見.
模塊是通過 CORS 跨源資源共享來獲取的

如何包含一個 JS 模塊

JS 要求對模塊使用相對路徑

<head>
  <script type="module" src="./myModule.js"></script>
</head>

nomodule 關鍵字

<script nomodule src=“fallback-option.js”></script>

5.4.3 導出

function fun1(x) {
    alert(x);
}
export func1;

一個簡單的示例模塊

function convertCtoF(c) {
    return (c*1.8) + 32;
}
function convertFtoC(c) {
    return (f-32) / 1.8;
}
export {convertCtoF, convertFtoC}

export var a = "something";
export function func1() {console.log("hello");};

如何在導出時重命名

export var distance = arr[1];
export {arr as routeProperties };

具名的和默認的導出

function mmToInches(d) {
    return d/25.4;
}
export default mmToInches;

5.4.4 導入

import {convertCtoF, convertFtoC} from './tempConvert.js';

默認導入

function mmToInches(d) {
    return d/25.4;
}
export default mmToInches;

import toInches from './convert.js';
console.log(toInches(100));

如何在導入的過程中重命名

import {convertCtoF as cF } from ’./tempConvert.js’;
如何把一個模塊導入為一個對象

import * as temps from ’./tempConvert.js’;

6 專業技能

6.1 良好的編程習慣

6.1.1 避免過度使用 JS

6.1.2 編寫易讀和易維護的代碼

明智地使用註釋
- 代碼較長地函數或對象地簡要說明
- 對易混淆或易誤解代碼地註釋
- 原作者自己地技巧或經驗
- 關於代碼修改地註釋
使用適當地文件名稱,屬性名稱和方法名稱
盡量復用代碼
不要假設

6.1.3 平穩退化

6.1.4 漸進增強

分離樣式,內容和代碼

6.1.5 代碼分離的 JS

脫離 HTML
僅把 JS 作為性能增強手段

6.1.6 功能檢測

6.1.7 妥善處理錯誤

使用 try 和 catch

6.2 調試代碼

6.2.1 調試簡介

錯誤類型
- 語法錯誤
- 運行時錯誤
- 邏輯錯誤
選擇程序員地編輯器
用 alert() 進行簡單調試

6.2.2 更高級地調試

控制台
- console console.log() console.warn() console.info() console.error()
分組消息
- console.group() console.groupEnd() 之間的 log 信息會分組显示
用斷點停止代碼執行
條件性斷點
從代碼中啟動調試器
- debugger;
驗證 JS

6.3 繼續深入學習

6.3.1 為什麼要使用庫

6.3.2 庫能做什麼

一般庫的功能
1. 封裝 DOM 方法
2. 動畫
3. 拖放
4. Ajax

6.3.3 一些常見的庫和框架

Prototype 框架
- 優勢在於 DOM 擴展和 Ajax 處理
Dojo
- 能夠簡化創建程序和用戶界面的工作
React
- 主要用於構建用戶界面
Node.js
- 允許在服務器上編寫和執行 JS
jQuery
- 簡化了 HTML 文檔轉換,事件處理,動畫等多種工作

6.3.4 jQuery 入門

在頁面里引用 jQuery
- 本地下載 <script src=“jquery-3.3.1.js”></script>
- 遠程 <script src=“”></script>
jQuery 的$(document).ready 處理器
- 類似於 window.onload
```
$(document).ready(function() {
    // code
});
```
選擇頁面元素
- $(“”) 即可選擇 HTML 元素 $(“span”) $(“#elem”) //id $(“.classname”) $(“div#elem”) $(“ul li a.menu”) / 類為 menu,且嵌套在列表項里的錨點 $(“p > span”) / p 的直接子元素 span $(“input[type=password]”) $(“p:first”) $(“p:even”) // 全部偶數段落 $(“:header”) //標題元素 $(“:button”) $(“:radio”) $(“:checkbox”) $(“:checked”)

操作 HTML 內容

html() 類似於 innerHTML

var htmlContent = $("#elem").html();
$("#elem").html("<p>here </p>");

text() 只是獲取文本內容

  var textContent = $("#elem").text()
  $("#elem").append("<p>hehe </p>");

attr()

var title = $("#elem").attr("title");
$("elem").attr("title", "new title");

显示和隱藏元素

JS 中 document.getElementById(“elem”).style.visibility = “visible”;

show()

$("div").show();
$("#elem").show("fast", function() {
    // 操作
});

hide()

$("#elem").hide("slow", function() {
    // 隱藏之後的操作
});

toggle()

$("#elem").toggle(1000, function() {
    // xx
});

命令鏈

jQuery 大多數方法都返回一個 jQuery 對象

$("#elem").fadeOut().fadeIn();
$("#elem").text("Hello ").fadeOut().fadeIn();

處理事件

常用方法

$("a").click(function() {
    //
});
function hello() {
    alert("hello");
}
$("a").click(hello);
$("a").on("click", hello);

常見事件 blur focus hover keypress change mousemove resize scroll submit select

6.3.5 The jQuery UI

jQuery UI 提供了高級的效果和可以主題化的掛件

jQuery UI 是什麼
```
$("#datepicker").datepicker();
```

6.3.6 Ajax 簡介

Ajax 入門
XMLHttpRequest 對象
- XMLHttpRequest 能夠建立與服務器的連接,發送 http 請求而不需要加載相應的頁面
- 默認 xhr 只能對同域發起請求,除非服務端做了設置
創建 request 對象
- var request = new XMLHttpRequest();
方法和屬性
- 屬性 onreadystatechage readyState responseText responseXML status statusText
- 方法 abort() getAllResponseHeaders() getResponseHeader(x) open(’method’,’URL’,’a’) // a 默認為 true,表示異步 send(content) setRequestHeader(’x’,’y’)
與服務器通信
在服務器端發生了什麼
處理服務器響應
還有更容易的方法,不是嗎?

6.3.7 用 jQuery 實現 Ajax

load()

$(function() {
    $("#elem").load("newContent.html");
});

$(function() {
    $("#elem").load("newContent.html #info");
});

get() post()

$.get("serverScript.php",
      {param1: "value1", param2: "value2"},
      function(data) {
          alert("server response: " + data);
      });

ajax()
對錶單數據進行序列化 var formdata = $(’#form1’).serialize();

6.3.8 Node.js 簡介

Node.js 使用 V8 JavaScript 引擎

使用一種非阻塞的代碼模式

Author: cat

Created: 2019-11-13 Wed 22:40

本站聲明:網站內容來源於博客園,如有侵權,請聯繫我們,我們將及時處理

【其他文章推薦】

※為什麼 USB CONNECTOR 是電子產業重要的元件?

※網頁設計一頭霧水??該從何著手呢? 找到專業技術的網頁設計公司，幫您輕鬆架站!

※想要讓你的商品成為最夯、最多人討論的話題?網頁設計公司讓你強力曝光

※想知道最厲害的台北網頁設計公司推薦、台中網頁設計公司推薦專業設計師”嚨底家”!!

※新北清潔公司,居家、辦公、裝潢細清專業服務

電動時代重型機車仍是主流

補助去哪兒？六都領銜，桃園最強！

重型機車全台普及，台北、離島偏愛輕型

補助見證電動機車發展史

Gogoro VIVA 翻轉輕型機車窘境

2020 補助減少電動機車就完了？

電動車（Electric Vehicle）

HEV（油電車、混合動力車）

PHEV（插電式混合動力車）

BEV（電池動力車）

動力與電力

kWh 千瓦小時

Energy Efficiency 能源效率

WLTP / EPA range

AC/DC 交流電直流電

Table of Contents

1 JavaScript 基礎

1.1 JavaScript 簡介

1.1.1 Web 腳本編程基礎

1.2 創建簡單的腳本

1.2.1 在 Web 頁面里添加 JavaScript

1.2.2 編寫 JavaScript 語句

1.2.3 變量

1.2.4 操作符

1.2.5 捕獲鼠標事件

1.3 使用函數

1.3.1 基本語法

1.3.2 調用函數

1.4 函數的更多知識

1.4.1 變量作用域

1.4.2 箭頭函數

1.4.3 設置默認參數

1.5 DOM 對象和內置對象

1.5.1 與用戶交互

1.5.2 根據 id 選擇元素

1.5.3 訪問瀏覽器歷史記錄

1.5.4 使用 location 對象

1.5.5 日期和時間

2 JavaScript 編程

2.1 数字和字符串

2.1.1 數值

2.1.2 全局方法

2.1.3 Number 對象

2.1.4 Number() 函數

2.1.5 布爾值

2.1.6 null(空) 和 undefined(未定義)

2.2 操作字符串

2.2.1 字符串

2.2.2 模板字符串

2.3 數組

2.3.1 數組

2.3.2 如何遍曆數組

2.3.3 三點表示法

2.4 用 JavaScript 處理事件

2.4.1 事件的類型

2.4.2 事件處理器

2.4.3 event 對象

2.5 程序控制

2.5.1 條件語句

2.5.2 循環和控制結構

2.5.3 設置和使用定時器

3 理解 JavaScript 對象

3.1 面向對象編程

3.1.1 什麼是面向對象編程

3.1.2 創建對象

3.1.3 用 prototype 擴展和繼承對象

3.1.4 封裝

3.2 對象進階

3.2.1 類

3.2.2 對象繼承

3.2.3 使用功能檢測

3.3 DOM 腳本編程

3.3.1 DOM 節點

3.3.2 用 getElementsByTagName() 選擇元素

3.3.3 讀取元素的屬性

3.3.4 Mozilla 的 DOM 查看器

3.4 JSON 簡介

3.4.1 JSON 是什麼

3.4.2 訪問 JSON 數據

3.4.3 JSON 的數據序列化