關於HTML一週學習的總結
學習動機:基於前一段時間的公司需求需要與合作公司對接js,新增廣告,懂js得老程式設計師的奶爸請假,我們移動端的對接之路顯得尤為漫長,對有時候發生的問題甚至不知道是哪一端的問題,然後就對bug踢皮球。因此埋下學html的根,然後一自學達人給我定下一系列的任務,為了不能打自己的臉加上不能讓人家的任務白寫了,於是走上html的初試,以下是一週的經驗和教訓,回顧,記錄和總結:
學習準備:1、安裝html的編輯器,之前有下載看過sublime,也是很多老前端給我的推薦,毫不猶豫使用了介個;sublime官網
2、瀏覽器,開發必備的chrome,還有除錯需要的safari
學習之路:
1、使用工具的熟悉過程
1>、聽說sublime的強大之處就在於外掛的魅力,第一天使勁搗鼓package Control,關於外掛有很多教程的推薦,隨便搜,安裝自己感興趣的外掛,每個人習慣不同,需求不同,各取所需。
2>、弄清楚html的幾個基礎標籤:
<head>剛開始理解僅為頁面的標籤標題顯示,後面發現有很多寫法會把本頁面的一些基礎樣式和資源都寫在這裡 <body>是頁面的最主要模組,編寫頁面所有樣式,互動的模組,頁面你所能看到的地方的程式碼一般是由該標籤對包裹的 <br>html不會換行,該標籤已加上去就是標誌換行 <h>標題標籤 <p>段落標籤 <button>按鈕以及點選事件的繫結,JavaScript的繫結
3>、對於註釋,在<script>標籤對中可以識別//和/**/,否則只能識別<!--註釋內容-->,剛剛開始以為是編輯器識別,對此很迷糊,原來sublime只是一個輕量級的文字編輯器,其實sublime只是對標籤對識別,和Xcode不同,聽說webStorm可以和Xcode比較,之前一直納悶怎麼以資料夾的形式看我的html文件,才知道直接把資料夾拖進去就好了,菜雞菜雞啊!
2、真正開始HTML學習
1、安裝nodeJS環境,homebrew安裝的 ,很簡單
brew install node
檢查安裝是否成功
1、brew list 看有米有node
2、node -v / npm -v
get到一個點,當發現有時候下載一個東西的時候,當指定source源失敗,可以試試把源刪除看看
nodeJs是JavaScript執行的環境,而npm其實是類似於Xcode的Pod,管理第三方,很多人封裝好的js傳到npm伺服器,自己需要的就去下載使用,npm會把很多依賴關係自動下載好,省心效率贊
2、使用nodejs初始化一個web服務,啟動服務後,自己手機可以開啟html(連上電腦的網)
1、https://www.jianshu.com/p/69e7f3734eb5 使用express-generator快速建立了web專案
可以直接使用npm start直接啟動工程--開啟package.json會發現是 node .bin/www
對於生成的一系列資料夾的作用:
app.js:整個工程的配置檔案,設定工程的中介軟體和路由設定
bin:存放整個工程的可執行檔案的目錄,當收到請求,express自帶的中介軟體static會把請求對映到public中,引用public的檔案,而public中存放的檔案就是我們些專案用資料夾
bin/www檔案:配置入口檔案配置,配置了埠,引用app.js,並將事件轉發給js
public:專案編輯的資料夾,裡面可以去指定不同分類下的檔案
(後期要學會,不同資料夾的下的呼叫,比如html文件呼叫js類的方法。等等)
3、開始真正的js互動,js呼叫OC,OC呼叫js(自建ios demo,將自己的nodejs伺服器開啟,這是OC的內容)
1>window.webkit.messageHandlers.OCselectorName.postMessage(paras); (js呼叫OC的方法,保持方法名的一致)
2>OC呼叫js的話就要在OC中寫JS語句,這需要去學習js的語法
互動部分其實比較簡單,對於理解了js的用法,可能會對這個流程的幫助很大。
後面的目標就是學會js的寫法以及呼叫,關於css的用法,需要掌握引用,如何去使用,目前的介面允許寫的醜一點,後面要改善哦!