前端、js基礎

阿新 • • 發佈：2019-01-11

前端基礎

前端：一切視覺化的事物叫前端。

前端：包括了網頁端和移動端。

網頁端：HTML 4.0/CSS 2.0 /JS/JQuery 2.x/HTML 5.0/CSS 3.0/Bootstrap 2.0/3.0/node.js/Auglar.js ....

移動端:
- OC/android/swift 原生開發技術
iOS 10萬
android 8萬
20萬

- HTML5 混合式開發技術
HTML5 10萬

我們要學的：
HTML 4.0/CSS 2.0 /JS/JQuery 2.x/HTML 5.0/CSS 3.0/Bootstrap 2.0/3.0/會有一些移動端開發框架

==================== HTML CSS JS =======================
HTML 4.0 是一種最基礎的網頁開發語言。它被所有瀏覽器的所承認。也就是一旦你寫出了HTML 所有的瀏覽器都可以顯示。

瀏覽器核心：IE(360、IE、搜狗、獵豹)、Firefox(Firefox)、Chrome(chrome、淘寶瀏覽器)

<>HTML 全部的標籤，都是以<>為表示形式。
標籤：一個標籤有一種含義。
<XHTML> 所謂的XHTML 就是HTML + XML的結合體。
所以XHTML其實就是規範化的HTML語言。

第一個基礎的HTML:
<html>
<head><title>xxxxxxxxxx</title></head>
<body>
yyyyyyyyyy
</body>
</html>

以上案例告訴我們，<head></head> 內部一般放的是瀏覽器的標題和瀏覽器標題相關的東西，比如後期說的引入檔案和指令碼。<body></body>內部一般放的是瀏覽器正文顯示的東西。<body bgcolor> 一般是用來設定背景顏色

1、<h1> 瀏覽器標題。標題具有換行的特點。從h1到h6 逐次遞減。align 屬性可以標題的位置。如：<h1 align="center"></h1>
2、<p> 段落標記。具有上下換行的特點。
3、<br/> 單純的換行標記。相當於java裡面的\n
4、<hr> 分割線。注意：如果沒有標籤之間沒有任何內容，可以只寫一個頭部。但是要這麼寫<hr/>
5、<a> 超連結標籤。需要新增屬性，大部分HTML標籤裡都需要新增屬性以達到標籤具體實現的效果。如:<a href=""></a> href屬性表示你要去往哪裡。注意：href的值，只能有2種：一種是網址。一種是本地檔案(在引用檔案的時候注意路徑，也就是我們經常提到的絕對路徑和相對路徑),target屬性，一般表示以何種形式開啟。_blank表示新視窗開啟。

絕對路徑：完整的路徑。如：file:///C:/Users/mybirdie/Desktop/a/html1.html
注意：如果使用絕對路徑:在HTML裡請告訴他是file協議

相對路徑: 相對論的路徑。如：
1、a/html1.html
2、../ 表示上一級目錄

6、 表示的就是註釋。

7、<img> 圖片標籤。可以引入一張圖片。src屬性表示圖片的路徑。由於<img></img>標籤之間不需要任何東西，因此可以簡寫<img src="" />。 width 表示寬度。 heigth 表示高度。如：
<img src="" width="" height="" />

8、<font> 文字標籤，屬性color 可以設定文字顏色。size 設定文字大小

9、<table> 表格標籤。<thead>一般用來表示表格頭部，<th> 一般用來表示頭部的標題 <tbody> 一般用來表示表格的內容。<tr> 一般用來表示一行， <td> 一般用來表示一行中的某一個單元格。
練習一：請完成以下圖例：
序號姓名密碼
1 jabez 123456 編輯(超連結) 刪除(超連結)
2 jack 12456 編輯(超連結) 刪除(超連結)

10、<ul><li></li></ul> 無序列表標籤。<ol><li></li></ol> 有序列表標籤，會在<li>之前加入序號。

11、<form ></form> 表單標籤。表單裡面有很多的元素。比如：輸入框，複選框，單選框, 普通按鈕，提交按鈕，重置按鈕，下拉選單，多行文字框，上傳檔案框。

- <form action=""> 表單提交的地址 <form method="post/get">
- <input type="text"> 文字框
- <input type="password"> 密碼框
- <input type="radio"> 單選框 (多個單選框用name屬性約束)
- <input type="checkbox"> 複選框
- <input type="button"> 普通按鈕
- <input type="submit"> 提交按鈕
- <input type="reset"> 重置按鈕
- <input type="file"> 上傳檔案
- <select name=""> 下拉選單
<option value=""> 下拉選項
- <textarea cols="列" rows="行"></textarea>

注意：如果需要給後臺傳值的時候，需要加入name屬性，如<input name="userName" type="text"/>

12、<marquee> 跑馬燈標籤。behavior="slide/scroll" 滾動行為 direction="left/right/up/down" 方向 loop 迴圈幾次

13、<B></B> 加粗 <i></i> 斜體

14、<iframe> 內聯框架，說白了就是可以通過該標籤引用一個頁面，支援透明。
15、<frameset> 內聯框架，該種更加靈活。
例如：
<html>
<frameset cols="50%,50%">
<frame src="html1.html"></frame>
<frame src="html1.html"></frame>
</frameset>
</html>

16、<div> 塊元素其中的一種。也是經常用到的一種。一般基本所有的“讚美”都會給到這個元素。

17、<span> 內聯標籤其中的一種。也是經常用到的一種。一般基本“所有動詞和形容詞”都會給到這個元素

塊元素：主要是分塊表示，會自動有換行的概念。而且塊元素可以設定邊距，寬高等。

如：<h1></h1> <p> <div> <th> <tr> ....

內聯元素：沒有換行的概念。是不可以設定邊距和寬高的

如: <span> <font> ...

注意：幾乎所有的標籤都會有style屬性。所有標籤的大小寫問題，在HTML中，是不計較大小寫的。也就是你可以用大寫。

js基礎

JS，其實就是一種網頁的指令碼語言。可以控制瀏覽器，網頁的行為。
所以又稱之為“動詞”；

原生的JS，簡單但是使用起來較複雜。

JS標識：

1、JS需要在HTML程式碼中用Script標識的。
2、標準的Script需要加入type屬性。type="text/javascript"
3、script的位置根據特定的情況而定。

JS輸出：

1、alert( 輸出內容 );//警告框
2、console.log( 輸出內容 ); //一般用於控制檯輸出。
注意：一般集合型別，建議都是控制檯輸出

JS註釋：

// 單行
/* */ 多行

JS變數：

所有的變數可以用var宣告。

JS運算子：

- + * / % 都可以使用。
1、但是+在運算的時候如果與字串在一起運算，那麼起到的就是連線符的作用。
2、注意：包括字串在內所有的運算子會遵守優先順序。

注意：parseInt("10"); 為強制轉化成整型。
parseFloat("10")；為強制轉化為浮點型。
typeof(10+"")；typeof為顯示資料型別。

JS三大彈出框：
1、alert 警告框
2、confirm 確認框。返回的是布林型別
if( confirm("確認要關閉嗎？") ){
window.close();
}
3、prompt 輸入框 (標題輸入框，預設值)
var a = prompt("請輸入你喜歡的動物","豬");
alert( a );

JS陣列：

1、定義一個數組：
var arr = new Array();
var arr = [1,2,3,5,5,6,7];
2、往數組裡新增一個元素
arr.push(); 注意：是尾部新增
3、從數組裡刪除一個元素
arr.pop(); 注意:是尾部移除。
4、arr.length 陣列的長度
5、遍歷：
for( var i = 0 ; i < arr.length; i++ ){
console.log( arr[i] );
}

js 一般把鍵值對叫做物件。
6、鍵值對錶示方式為：
var arr = { "a" : "b","c":"d" }
取出鍵值對的值：
arr.a;

var arr = { "a" : [1,2,3,4,5] }
console.log( (arr.a)[2] );

js特殊值：

1、NaN: 無法識別資料型別。一般是由運算造成的。
2、undefined
1、初始化沒有賦值的時候，列印會undefined；
2、在取值的時候，如果目標值不存在，會列印undefined;
注意：變數在初始化的時候，預設值是undefined，如果沒有給出具體的值，相當於沒有找到引用物件，這個時候該引用會去找最近一個有值變數。
3、null 空值
1、一般是指物件本身是null值的時候列印。
2、選擇器獲取不到相關控制元件的時候，一般會顯示null

js函式： function 關鍵字
function abc(){
alert( 1 );
}
abc();

1、函式有作用域。
2、作用域內優先使用自己的變數。再考慮作用域外的變數。
3、作用域包括形參。
4、如果在作用域範圍內，重新定義，那麼它將不會汙染全域性變數。
5、如果在作用域範圍內，直接使用或者定義，那麼將可能汙染全域性變數。
6、在弱語言中，重複定義，沒有定義都是沒有錯的。但是不推薦此種做法。
//動態呼叫函式方式。
var a = abc; //abc為函式名
a();

//封裝函式寫法
var a = {
"userName" :　"jabez.huang",
"userPwd" :　"123456",
init : function(){
return this;
}
};

js三大選擇器：

1、ID選擇器 document.getElementById("a")
2、Name選擇器 document.getElementsByName("a")[]
3、類選擇器 document.getElementsByClassName("a")[]
4、Tag選擇器 document.getElementsByTagName("a")[]

.value 一般文字框、下拉選單等只要有value屬性設定的值。都可以用value方法獲取或者設定。
.checked 用來獲取相關複選框，單選框是否被選中的值。
.innerHTML 用來設定或者獲取元素的內容，包括設定或者獲取HTML。
.innerText 用來設定或者獲取元素的內容，不包括設定HTML。

JS事件：

1、全域性事件。也就是說任何在該頁面發生的某種事件，都可以被監聽。
2、在外部監聽某一個控制元件的事件的形式。
3、在控制元件內部監聽。

控制元件內部監聽事件：
1、通過傳參的方式，獲取相關的控制元件物件的屬性值
function goto( dom ){
window.open( dom.value );
}
<input type="text" value="" onclick="goto(this)"/>
2、通過普通的選擇器方式，獲取相關的控制元件的值
funtion goto(){
document.getElementById("url").value
}
<input type="text" id="url" onclick="goto()"/>

新語法： url.indexOf("www")，返回找到字串的索引位置。否則返回-1；
新語法：url.split(","),返回字串分割後的陣列。

JS 是一種基於客戶端，網頁的指令碼.JS是一門弱語言。

又由於JS是基於客戶的指令碼語言。因此它所有的程式碼不可避免的可以被外界檢視。
所以基於兩個方面考慮：
1、JS的安全問題。（壓縮、混淆程式碼等）
2、訪問速度的問題。 (壓縮，加入CDN)

JS基礎跟所有的語言一樣。都有邏輯判斷，迴圈語句，條件判斷，運算子。
只不過JS的運算子+，在跟字串操作的時候，就會起到連線的作用。

JS基礎的三大彈出框：

1、alert
2、confirm 返回的是布林型別確認框
3、prompt 輸入框，(標題，預設值)

JS三大特殊值：
1、NaN 無法識別的型別。一般出現在運算中。
2、undefined
1、變數未初始化賦值。
2、通過document找相關的物件，獲取不到的時候就是undefined
3、null
1、該值本身的值為null

強制轉換：

1、parseInt
2、parseFloat

JS集合

1、var a = new Array();
2、var b = [1,2,3,4];
3、a.push 在集合尾部加入一個數據。
4、a.pop 在集合尾部移除一個數據。
5、a.length 返回陣列的長度。

陣列轉字串:

1、join(",")

字串轉陣列：

1、split(“”)

字串語法：
1、indexof() 找到字串中，出現的位置
2、substr( start, length )
3、substring( start, end )

JS物件，鍵值對：

var obj = {
"鍵1" : "",
"鍵2" : function(){

}
}；
可以通過鍵找到相關的值。
新增一個鍵值對：obj["a"] = "b";

JS函式。關鍵字 function。

function a(){ return b; }
this 在函式內部this，就是返回當前呼叫物件本身。
如果是在js裡呼叫可能就返回windows，如果是控制元件裡呼叫就返回控制元件物件。

選擇器：

1、ID選擇器 document.getElementById()
2、類選擇器 document.getElementsByClassName()
3、標籤選擇器 document.getElementsByTagName()
4、Name選擇器 document.getElementsByName()

.value 獲取/賦值文字框或一切有value屬性的值。
.innerHTML 獲取/賦值某一個控制元件，並且可以使用HTML語法。
.innerText 獲取/賦值某一個控制元件。不可以使用HTML語法。

自定義屬性：就是為了方便自己設定獲取某些值的屬性。
.getAttribute 獲取任一控制元件的屬性
.setAttribute 賦值任一控制元件的屬性。

另一種設定style的方式，簡單：
document.getElementById("").style.color = "";

JS事件：DOM物件

1、全域性的事件

document.onclick = function(){
alert("1");
}

2、在外部監聽的某個控制元件的事件。

document.getElementById("a").onclick = function(){
alert("123");
}

3、在控制元件內部監聽事件。

<input type="text" onclick="" />

1、點選事件 onclick
2、失焦事件 onblur 失去焦點，常用於表格填寫。
3、聚焦事件 onfocus
4、改變事件 onchange
5、滑鼠移動事件 onmousemove
6、滑鼠移入事件 onmouseenter 注意：需要表示一個控制元件
7、滑鼠移出事件 onmouseleave
8、滑鼠彈起事件 onmouseup
9、滑鼠移動元素觸發事件 onmouseout
10、滑鼠移到元素上 onmouseover
11、鍵盤事件 onkeyup / onkeydown / onkeypress
keyCode = 回車 13
keyCode = 左 37 上 38 右 39 下 40
keyCode = 空格 32