chunwen's blog

基本資料設定 1.檢視目前設定 $ git config --list 2.設定username 以及email $ git config --global username 'chunwen' $ git config --global user.email ' hsbsbbdn@gmail.com ' 補充： $ git config --global username 'chunwen'      global代表全域設定 若不想使用終端機指令來設定，可以直接開起source tree在Tool/option中直接更改 Git 初始化 目的：讓Git知道知道哪個資料夾需要進行版本控制 步驟 1.建立目錄 $ mkdir git-practice 2.進入目錄 $ cd git-practice 3.初始化 $ git init 完成畫面如下 工作區、暫存區、儲存庫介紹 在 Git 裡，主要可以分成「工作目錄（Working Directory）」、「暫存區（Staging Area）」、「儲存庫（Repository）」三部分。 這三部分嚴格說起來是一種狀態轉變，並非真的存在這三個區塊。我們可以透過add、commit指令轉換區域狀態。 OK，了解這三個區域後，我們實際來操作一次吧!(以下將用終端機指令操作) 備註：使用GUI繪圖軟體操作請參考 文章 1.首先確認資料夾內狀態($ git status)、並新增檔案($ touch index.html) 指令： 確認資料夾內狀態 ($ git status) 新增檔案($ touch index.html) 2. 工作目錄狀態 我們可以發現新增檔案後，目前是untracked狀態 3.暫存、資料庫狀態 指令： 暫存($ git add index.html) 資料庫($ git commit -m 'index.html') Tips：commit 命名時請用一句話(各種語言都可以)，協助同事了解目前更新狀況 4.

git 是一款分散式版本控制軟體，目前在業界上也是最廣泛使用的工具之一。 首先，我們先來安裝Git軟體 Step1.先到官網下載軟體  https://git-scm.com/ 備註：基本上下載下來後，一直按下一步就可以了 Step2.安裝後，我們可以在windows工具列這邊看到git bash Step3.點開後，我們輸入git--version確認一下版本是否安裝成功 若有安裝成功，則會跳出version 2.21.0 字樣(顯示目前版本狀況) 若安裝失敗，則會出現command not found 則是安裝失敗 Step4.下載GUI圖形介面軟體( https://git-scm.com/download/gui/windows ) 推薦使用source tree/github page 小結論： 學習概念上：使用終端機 實務上：使用圖形介面軟體(GUI) 終端機使用(windows上是沒有終端機指令喔，所以都是使用macos 指令) 1.確認自己目前位置 pwd(print working directory) 2.建立目錄 mkdir(making dir) 3.切換目錄 cd(changing dir) Tips：要加上/ 4.建立檔案(touch) 5.查看檔案列表(ls -al) 6.刪除檔案(rm ) 7. 刪除目錄(rm -r ) Tips：要加上/ 8.複製(cp) 9.移動(mv)  前提：要將world.html搬到 images 資料夾中 Tips：要加上/ 也可拿來更改檔名 終端機mac推薦： https://www.iterm2.com/ 常用終端機指令整理 windows macos/linux 說明 cd cd 切換目錄 cd pwd 取得目前所在的位置 dir ls 列出面目前的檔案列表 ls -al 列出面目前的檔案列表細節 EX：時間 mkdir/md mkdir 建立目錄 rmdir/rd rm -r 刪除目錄 無 touch 建立檔案 copy cp 複

簡介： Sass 是一個 CSS 預處理器，而它有兩種撰寫的風格 一個是 SASS 另一個就是 SCSS(較常使用這種寫法，原因是跟原本css寫法類似，較為直覺好懂) Sass常見編譯方式主要有下面三種 1.軟體編譯  EX： prepros 2.gulp、webpack 前端任務/打包工具 3.編輯器內建的插件 接下來，就讓我們開始實作吧! 一、編輯器：sublime text3 1.為了讓 Sublime Text 3 支援 Sass、Scss 語法， 請安裝 Sass、Scss Plugin 2.環境建置篇： 先下載prepos   前端軟體-Prepos介紹 安裝完成後，請將資料夾丟進prepos內 如下圖所示 接著，新增一個資料夾Sass，並在裡面放進一隻.scss檔案 如果畫面右下角有出現success就表示有成功~ 3.sublime 內部編輯方式 1.將all.scss檔案開啟 放置左邊 2.將以編譯好的all.css放置右邊(方便同時觀看) 如此，prepos就會幫我們將程式碼編譯為如下 二、編輯器Vscode 在vscode中新增一個xxx.scss檔案，並記得按下左下角watching即可及時編譯喔 scss語法(目的：減少重複元素撰寫) 將子階層內容直接寫進父元素中 如下  codepen 練習連結 .header {     width: 100px;      a {         display: block;          :hover {             background: green;         }     } } sass語法撰寫  codepen練習 備註：1.不用括號和逗點  2.每往下一個階層都需要兩個空白或是一個tab .header     height: 10px     width: 50px     color:white     li         width : 100px         a             width: 50px

前言：Flex的出現幫助我們可以更方便的進行網頁排版，我們可以透過 can i use 這個網站發現，Flex有良好的兼容性(超過九成網站都有支援)，而一開始學習Flex的時候建議大家可以一步步將每個範例跟練習實做一遍，如此才會更快上手喔~~ 接著我們就開始Flex介紹吧! Flex 中分為外容器與內元件(如下圖)，並靠調整外容器、內元件屬性達成以下常見目的： 1.垂直置中 2.水平置中 3. 三欄內容不等高，但希望外框顯示為等高 父元素設定display:flex 4.三個物件水平等距排列(數值彈性) justify-content:space-around 補充：flex各種預設值 flex-direction：row justify-content：flex-start align-items：stretch flex-wrap：nowrap flex-shrink:1; flex-grow:0; order:0; 以下將開始介紹 1. 軸線 2. 對齊方法  3.外部元件特性  4.內部元件介紹 軸線(分為兩種) flex排版起頭觀念，搞懂後基本上就會30%。flex軸線主要有分兩種 1.主軸線 2.交錯軸 而 主軸線 是 可以調整方向的。所以 這時我們就要介紹到一個外部屬性 flex-direction flex-direction:row(一開始預設狀態) flex-direction:row-reverse   >>交錯軸上方是Start 下方是End flex-direction:column   flex-direction:column-reverse      >>交錯軸左方是 Start 右方是End Tips：記得是主軸線調整方向喔!交錯軸永遠都跟主軸垂直 練習一下： https://codepen.io/chunwen/pen/OqLKWw 外層元素與內層元素簡介 Flex 外容器屬性：  display：flex, inline-flex 必備屬性   flex-direction：決定 fle

hoisting(提升) 什麼是hoisting? W3school：Hoisting is JavaScript's default behavior of moving declarations to the top 在 JavaScript 裡面，如果你試圖去對一個還沒宣告變數取值，會發生以下錯誤 console.log(a) // ReferenceError: a is not defined 但如果你這樣寫，會發生神奇的事 console.log(a) // undefined var a 而這種現象稱為hoisting，var a被提升到最上面了(但這只是想像，實際上程式碼並不會移動) 可以想像成這樣： var a console.log(a) // undefined a = 5 你可以把var a = 5這句話分成兩個步驟，第一個階段是宣告變數：var a，第二個階段是賦值：a = 5，只有前面的變數宣告會被提升，賦值不會。 補充 ： 定義變項的過程中 ， 可以分成宣告 ( declaration ) 和給值 ( initialization ) 兩個過程 ， 只有declaration的內容會在逐行執行程式前先被執行並儲存在記憶體中 ( hoisted )； 給值的內容則是在hoisted後 ， 執行程式時 ， 才會被執行到 。 換句話說： JavaScript 僅提升宣告的部分，而不是初始化。如果在使用該變數後才宣告和初始化，那麼該值將是 undefined MDN說明 小結： 變數宣告跟函式宣告都會提升 ，但僅有宣告會提升(賦予值)並不會。  接著我們來做個比較，在全域中宣告變數，看順序是否影響結果 A： js 第三行，因為沒有載入宣告變數的值所以出現 undefined        js 第五行 正常顯示值為10        js第六行  沒有定義var b，所以出現b is not defined畫面 補充一下函式宣告和函式運算式差異 這兩種定義方式最大的差別在於，透過「函式宣告」方式定義的函式可以在宣告前使用 (函式提升) ： conso

function 使用目的：將一段指令包起來，用在解決重複性高的運算 補充： 函式 也是物件的一種 ，雖然我們透過typeof查詢時，會得到"function"結果，但請先記住它 仍屬於object一種 函式組成 通常一個函式會包含三個部分： 1.函式的名稱 (也可能沒有名稱，若沒有名稱則為匿名函式) 2.括號 ( ) 中的部分，稱為「參數 (arguments) 」，參數與參數之間會用逗號 ,   隔開 3.在大括號 { } 內的部分，內含需要重複執行的內容，是函式功能的主要區塊。 寫法如下 範例 宣告函式    函式名稱(參數) function greet(name) {     console.log(name+'歡迎光臨!');     console.log('請問你要點些什麼?'); } 執行函式 greet('Andy'); // Andy歡迎光臨! 小提醒： 1.網頁渲染上如果已經有載入js程式碼，可以在 chrome console中下 window語法 ，就可以發現程式碼已經載入進去 如下圖 function帶參數 //新增一個參數要用一個逗號隔開 function count ( oneNum , twoNum ) { var total = ( oneNum * 10 ) + ( twoNum * 20 ) console . log ( '總共價錢:' + total + '元' ); } // 執行函式 count ( 10 , 1 ); 說明： oneNum 這個就是參數 錯誤寫法 function count (' oneNum' , ' twoNum' ) 參數補充說明： 參數在給值的過程是由左至右的  常見定義函式方式有下列幾種 1.函式宣告(Function Declaration) function 名稱([參數]) { //執行事情 } function