HYML / CSS和Javascript 部分
1 CSS實現垂直水平居中javascript
HTML結構：java
<div class="wrapper">node
<div class="content"></div>canvas
</div>數組
CSS：瀏覽器
.wrapper{position:relative;}
.content{
background-color:#6699FF;
width:200px;
height:200px;
position: absolute; //父元素須要相對定位
top: 50%;
left: 50%;
margin-top:-100px ; //二分之一的height，width
margin-left: -100px;
}
2 簡述同步和異步的區別
同步是阻塞模式，異步是非阻塞模式 .
同步就是指一個進程在執行某個請求的時候，若該請求須要一段時間才能返回信息，那麼這個進程將會一直等待下去，直到收到返回信息才繼續執行下去；服務器
異步是指進程不須要一直等下去，而是繼續執行下面的操做，無論其餘進程的狀態。當有消息返回時系統會通知進程進行處理，這樣能夠提升執行的效率。app
3 Javascript 部分異步
javascript的簡史
1995年的時候，有網景公司開發，當時名字叫LiveScript，爲了搭Java的順風車，更名爲javascript
與此同時，微軟所以在自身的瀏覽器裏，也推出了本身的腳本語言jscript
1997年的時候，由ECMA出面，推出了一套javascript的規範，提出js由三部分組成
ECMAScript
基礎語法
DOM
文檔對象模型
BOM
瀏覽器對象模型
2003年以前，網易界面上的彈窗廣告幾乎都是由js作的，被人稱做牛皮蘚
2004年的時候，JS的命運發生改變，
2007年的時候，蘋果公司推出的手機，能夠用來上網
2010年的時候，H5的出現，canvas又推高了js的地位
2011年的時候，node.js將js語言伸向後服務器端
js語言特性
是世界上使用最多的腳本語言
弱類型語言
動態語言
客戶端的腳本語言
js書寫位置
連接式
<script src=".js"> </script>
嵌入式
<script></script>
數據類型
基本數據類型
number
string
boolean
null
undefined
複雜數據類型
Date
object
Array
function
變量
變量賦值
var i=number；
var i=「string」；
命名規則
變量的命名必定要有意義
以字母(a-z大小寫字母 ),"_"或$開頭，絕對不能以數字開頭，能夠包括字母，數字，下劃線，$,嚴格區分大小寫，絕對不能使用系統中的關鍵字或是保留字
推薦使用駝峯命名法：如userName,hightSchool
+運算符的做用
字符串之間 ，起鏈接做用
數字之間，起運算做用
Typeof關鍵字
string
number
運算符
算術運算符
一元運算符
++ --
二元運算符
+ - * / %
關係運算符
比較運算符
> < >= <=
相等運算符
== != === !==
邏輯運算符
&& || ！
運算符的優先級
數字(算術運算符)>關係運算>邏輯運算符>賦值運算符
複合賦值運算符
將數學運算符和賦值運算符合起來一塊寫了
數據類型的轉換
轉number
隱式
+ - * / %
顯示
parseInt（）
Number（）
parseFloat（）
轉string
隱式
+「」
顯式
.toString()
String()
轉boolean類型
隱式
！！
顯式
Boolean()
語言結構
順序結構
分支結構
if
只能判斷 一種狀況
if（判斷條件）{
要執行的代碼
}
if else-if
判斷兩種狀況
選擇結構
三元表達式
表達式1 ？表達式2 ： 表達式3 ；
if - else
switch-case
多種狀況的一種
if-else 和 switch-case的區別
相同點
均可實現多分支結構
不一樣點
if -else if：能夠處理區間範圍
switch只能用於定值比較
短路運算
&&
轉換爲boolean類型的值爲false的狀況
||
轉換爲boolean類型的值爲true的狀況
！
循環結構
while
while（循環條件）{
循環體（要執行的代碼）
}
do while
do{
循環體
} while （循環條件）
for
for （表達式1 ；表達式2 ； 表達式3 ）{
循環體；
}
for in
break 和 continue
break
用在switch-case ，用於跳出當前程序
用再循環當中 ，while或者for循環 ，與if搭配使用（ 做用：當即跳出當前循環，後面代碼都不執行）
continue
只結束當前本次循環
數組
使用構造函數建立數組
var arr = new Array ();
arr[]=0;
使用字面量方式建立數組
var arr =[ 1,2,3,4,5,6,7];
for ( var i=0;i<arr.length; i++){
console.log(arr[i]);
}
函數
定義:
使用函數聲明的方式定義
組成
function 函數名( 參數 ) {
函數體( 可執行的代碼 ) ;
}
函數名
參數
返回值
形參和實參
在函數定義的時候，使用的參數叫作形參，起佔位置的做用
在函數真正的調用的時候，傳入的數據，纔是實參
函數表達方式
聲明函數
function 函數名(){
要執行的代碼;
}
匿名函數
var fun =function (){
要執行的代碼;
}
區別
1.函數的聲明中的函數有名字
2.函數表達式中的函數沒有名字，是匿名函數，前面的變量的名字能夠看作是函數的名字
3 在函數預解析的時候，會先將函數聲明提早到做用域的最前面，而函數表達式不會提高
4 函數聲明中的函數，能夠在聲明以前調用，可是函數表達式的函數必須在函數表達式以後調用
return
函數中無return
默認返回值:undefined
函數中有return
return後面沒有數據
返回值是:undefined
return後面有數據
該數據是返回值
函數的嵌套
定義:在一個函數裏,調用另外一個函數
四種形式
無參無返回值
僅僅是代碼的複用(用處比較多)
無參有返回值
僅僅是函數的調用, 沒有輸出語句
有參無返回值
只要沒有return關鍵返回的數據，就沒有真正的返回值，僅有默認的返回值undefined
有參有返回值
(實際用處最多)
重載
定義:函數名相同，可是函數的形參個數不一樣，或者形參的數據類型不一樣，這樣就構成了函數的重載
注意 : JS中沒有函數的重載,若是JS中有重名的函數，後面的函數會將前面的函數覆蓋掉
變量的做用域
全局做用域
同一個1.5.1頁面中的script標籤之間的區域
全局做用域內的變量就是全局變量，在全局做用域內定義的變量是全局變量，能夠在頁面的任何地方訪問的到(包括函數內部)
在函數內部不使用var定義的變量，也是全局變量
局部做用域
函數內部就是局部做用域
一個函數就是一個局部做用域，局部做用域 內的變量稱爲局部變量
特殊函數
自執行函數
兩種方式
(function(){
return a;
}() );
(function(){
return a;
}) () ;
過程:
自執行函數是沒有名字的，定義了以後立刻調用. 這種函數多用於一次性使用的時候 , 避免了函數名的衝突
回調函數
就是將函數作爲參數進行傳遞
var a=10;
var fun(a){
return a+b;
}
var f2=function(a,ff){
return ff(a);
}
console.log(f2(a,fun));
內置對象
Math對象
Math.pow(a,b) a的 b 次方冪
Math.round(a) 四捨五入
Math.ceil(a) 向上取整
Math.floor(a) 向下取整
Math.PI() 圓周率
Math.abs() 絕對值
Math.sqrt(a) num開平方
Math.sin()
Math.cos()
Array對象
既能夠做用於數組,
又能夠做用於字符串
arr.valueOf 打印對象自己
arr.indexof() 從前面尋找該項,(後面有也再也不找),獲得該項的位置
arr.lastindexof() 從後面尋找該項,(前面有也再也不找),獲得該項的位置
slice ( a, b ) 截取數組(字符串)中的元素組成一個新數組(字符串)返回，原數組(字符串)不變 ,a 爲索引
一個參數
從當前位置截取到最後
兩個參數 b值取不到
b 值爲正
從前數索引位置
b值爲負
從後開始數的索引位置
arr.concat 鏈接兩個數組或字符串
做用於數組
arr.toString 轉換成字符串,且用","分割
arr.join() 數組轉換成字符串
arr.unshift() 向數組前追加元素,獲得數組長度
arr.shift() 刪除數組第一項,獲得刪除數據
arr.push() 向數組後追加元素,獲得數組長度
arr.pop() 刪除數組最後一項,獲得刪除數據
arr.reverse() 翻轉數組
arr.filter() 過濾 返回true的留下，返回false 過濾掉
arr.forEach() 循環遍歷數組的每一項，能夠遍歷輸出數組中的每一項及每一項的索引
splice ( a, b) 截取(刪除)：會改變原數組
兩個參數 刪除
a : 將要刪除的元素
b : 須要刪除的個數
三個參數 替換
a : 將要刪除的元素
b : 須要刪除的個數
c : 刪除後 取代添加的元素
做用於字符串
arr.split() 將字符串中的字符以某種字符 分割成數組中的元素 能夠將字符串轉換成數組
arr.substring( a,b ) 截取字符串中的元素組成一個新字符串返回，原字符串不變 ,a 爲索引
一個參數
從當前位置截取到最後
兩個參數 b值取不到
b 值爲正
從前數索引位置
b值爲負
從後開始數的索引位置
arr.substr( a,b ) 截取字符串中的元素組成一個新字符串返回，原字符串不變 ,a 爲索引
一個參數
從當前位置截取到最後
兩個參數
b值爲長度
特殊用法
str.substr(-2); //傳入負數，至關於傳入length + (-2) 倒着截取
str.substr(2,-3); //第二個參數，若是傳入負數至關於0 截取不到，爲空
chatAt ( a ) 獲取字符串中指定索引位置
charCodeAt () 獲取字符串中指定索引位置的字符的ASCII碼值
轉換大小寫
大寫
arr.toUpperCase ( )
arr.toLocaleUpperCase ( )
小寫
arr.toLowerCase ( )
arr.toLocaleLowerCase ( )
arr.trim ( ) 去除字符串先後的空格
arr.replace ( ) 替換字符串裏面字符
arr.replace ( "a" ," w" ) 替換字符串裏面字符
arr.replace ( /a/g ," w" ) 正則方式的所有替換
字符串 string
屬性:length 是能夠將字符串當作字符的數組
清空數組的三種方式
從0截取，截取整個數組
讓數組的長度變爲0
給數組從新賦值,使其爲空數組
JS基礎入門
javascript的簡史
1995年的時候，有網景公司開發，當時名字叫LiveScript，爲了搭Java的順風車，更名爲javascript
與此同時，微軟所以在自身的瀏覽器裏，也推出了本身的腳本語言jscript
1997年的時候，由ECMA出面，推出了一套javascript的規範，提出js由三部分組成
ECMAScript
基礎語法
DOM
文檔對象模型
BOM
瀏覽器對象模型
2003年以前，網易界面上的彈窗廣告幾乎都是由js作的，被人稱做牛皮蘚
2004年的時候，JS的命運發生改變，
2007年的時候，蘋果公司推出的手機，能夠用來上網
2010年的時候，H5的出現，canvas又推高了js的地位
2011年的時候，node.js將js語言伸向後服務器端
js語言特性
是世界上使用最多的腳本語言
弱類型語言
動態語言
客戶端的腳本語言
js書寫位置
連接式
<script src=".js"> </script>
嵌入式
<script></script>
數據類型
基本數據類型
number
string
boolean
null
undefined
複雜數據類型
Date
object
Array
function
變量
變量賦值
var i=number；
var i=「string」；
命名規則
變量的命名必定要有意義
以字母(a-z大小寫字母 ),"_"或$開頭，絕對不能以數字開頭，能夠包括字母，數字，下劃線，$,嚴格區分大小寫，絕對不能使用系統中的關鍵字或是保留字
推薦使用駝峯命名法：如userName,hightSchool
+運算符的做用
字符串之間 ，起鏈接做用
數字之間，起運算做用
Typeof關鍵字
string
number
運算符
算術運算符
一元運算符
++ --
二元運算符
+ - * / %
關係運算符
比較運算符
> < >= <=
相等運算符
== != === !==
邏輯運算符
&& || ！
運算符的優先級
數字(算術運算符)>關係運算>邏輯運算符>賦值運算符
複合賦值運算符
將數學運算符和賦值運算符合起來一塊寫了
數據類型的轉換
轉number
隱式
+ - * / %
顯示
parseInt（）
Number（）
parseFloat（）
轉string
隱式
+「」
顯式
.toString()
String()
轉boolean類型
隱式
！！
顯式
Boolean()
語言結構
順序結構
分支結構
if
只能判斷 一種狀況
if（判斷條件）{
要執行的代碼
}
if else-if
判斷兩種狀況
選擇結構
三元表達式
表達式1 ？表達式2 ： 表達式3 ；
if - else
switch-case
多種狀況的一種
if-else 和 switch-case的區別
相同點
均可實現多分支結構
不一樣點
if -else if：能夠處理區間範圍
switch只能用於定值比較
短路運算
&&
轉換爲boolean類型的值爲false的狀況
||
轉換爲boolean類型的值爲true的狀況
！
循環結構
while
while（循環條件）{
循環體（要執行的代碼）
}
do while
do{
循環體
} while （循環條件）
for
for （表達式1 ；表達式2 ； 表達式3 ）{
循環體；
}
for in
break 和 continue
break
用在switch-case ，用於跳出當前程序
用再循環當中 ，while或者for循環 ，與if搭配使用（ 做用：當即跳出當前循環，後面代碼都不執行）
continue
只結束當前本次循環
數組
使用構造函數建立數組
var arr = new Array ();
arr[]=0;
使用字面量方式建立數組
var arr =[ 1,2,3,4,5,6,7];
for ( var i=0;i<arr.length; i++){
console.log(arr[i]);
}
函數
定義:
使用函數聲明的方式定義
組成
function 函數名( 參數 ) {
函數體( 可執行的代碼 ) ;
}
函數名
參數
返回值
形參和實參
在函數定義的時候，使用的參數叫作形參，起佔位置的做用
在函數真正的調用的時候，傳入的數據，纔是實參
函數表達方式
聲明函數
function 函數名(){
要執行的代碼;
}
匿名函數
var fun =function (){
要執行的代碼;
}
區別
1.函數的聲明中的函數有名字
2.函數表達式中的函數沒有名字，是匿名函數，前面的變量的名字能夠看作是函數的名字
3 在函數預解析的時候，會先將函數聲明提早到做用域的最前面，而函數表達式不會提高
4 函數聲明中的函數，能夠在聲明以前調用，可是函數表達式的函數必須在函數表達式以後調用
return
函數中無return
默認返回值:undefined
函數中有return
return後面沒有數據
返回值是:undefined
return後面有數據
該數據是返回值
函數的嵌套
定義:在一個函數裏,調用另外一個函數
四種形式
無參無返回值
僅僅是代碼的複用(用處比較多)
無參有返回值
僅僅是函數的調用, 沒有輸出語句
有參無返回值
只要沒有return關鍵返回的數據，就沒有真正的返回值，僅有默認的返回值undefined
有參有返回值
(實際用處最多)
重載
定義:函數名相同，可是函數的形參個數不一樣，或者形參的數據類型不一樣，這樣就構成了函數的重載
注意 : JS中沒有函數的重載,若是JS中有重名的函數，後面的函數會將前面的函數覆蓋掉
變量的做用域
全局做用域
同一個1.5.1頁面中的script標籤之間的區域
全局做用域內的變量就是全局變量，在全局做用域內定義的變量是全局變量，能夠在頁面的任何地方訪問的到(包括函數內部)
在函數內部不使用var定義的變量，也是全局變量
局部做用域
函數內部就是局部做用域
一個函數就是一個局部做用域，局部做用域 內的變量稱爲局部變量
特殊函數
自執行函數
兩種方式
(function(){
return a;
}() );
(function(){
return a;
}) () ;
過程:
自執行函數是沒有名字的，定義了以後立刻調用. 這種函數多用於一次性使用的時候 , 避免了函數名的衝突
回調函數
就是將函數作爲參數進行傳遞
var a=10;
var fun(a){
return a+b;
}
var f2=function(a,ff){
return ff(a);
}
console.log(f2(a,fun));
內置對象
Math對象
Math.pow(a,b) a的 b 次方冪
Math.round(a) 四捨五入
Math.ceil(a) 向上取整
Math.floor(a) 向下取整
Math.PI() 圓周率
Math.abs() 絕對值
Math.sqrt(a) num開平方
Math.sin()
Math.cos()
Array對象
既能夠做用於數組,
又能夠做用於字符串
arr.valueOf 打印對象自己
arr.indexof() 從前面尋找該項,(後面有也再也不找),獲得該項的位置
arr.lastindexof() 從後面尋找該項,(前面有也再也不找),獲得該項的位置
slice ( a, b ) 截取數組(字符串)中的元素組成一個新數組(字符串)返回，原數組(字符串)不變 ,a 爲索引
一個參數
從當前位置截取到最後
兩個參數 b值取不到
b 值爲正
從前數索引位置
b值爲負
從後開始數的索引位置
arr.concat 鏈接兩個數組或字符串
做用於數組
arr.toString 轉換成字符串,且用","分割
arr.join() 數組轉換成字符串
arr.unshift() 向數組前追加元素,獲得數組長度
arr.shift() 刪除數組第一項,獲得刪除數據
arr.push() 向數組後追加元素,獲得數組長度
arr.pop() 刪除數組最後一項,獲得刪除數據
arr.reverse() 翻轉數組
arr.filter() 過濾 返回true的留下，返回false 過濾掉
arr.forEach() 循環遍歷數組的每一項，能夠遍歷輸出數組中的每一項及每一項的索引
splice ( a, b) 截取(刪除)：會改變原數組
兩個參數 刪除
a : 將要刪除的元素
b : 須要刪除的個數
三個參數 替換
a : 將要刪除的元素
b : 須要刪除的個數
c : 刪除後 取代添加的元素
做用於字符串
arr.split() 將字符串中的字符以某種字符 分割成數組中的元素 能夠將字符串轉換成數組
arr.substring( a,b ) 截取字符串中的元素組成一個新字符串返回，原字符串不變 ,a 爲索引
一個參數
從當前位置截取到最後
兩個參數 b值取不到
b 值爲正
從前數索引位置
b值爲負
從後開始數的索引位置
arr.substr( a,b ) 截取字符串中的元素組成一個新字符串返回，原字符串不變 ,a 爲索引
一個參數
從當前位置截取到最後
兩個參數
b值爲長度
特殊用法
str.substr(-2); //傳入負數，至關於傳入length + (-2) 倒着截取
str.substr(2,-3); //第二個參數，若是傳入負數至關於0 截取不到，爲空
chatAt ( a ) 獲取字符串中指定索引位置
charCodeAt () 獲取字符串中指定索引位置的字符的ASCII碼值
轉換大小寫
大寫
arr.toUpperCase ( )
arr.toLocaleUpperCase ( )
小寫
arr.toLowerCase ( )
arr.toLocaleLowerCase ( )
arr.trim ( ) 去除字符串先後的空格
arr.replace ( ) 替換字符串裏面字符
arr.replace ( "a" ," w" ) 替換字符串裏面字符
arr.replace ( /a/g ," w" ) 正則方式的所有替換
字符串 string
屬性:length 是能夠將字符串當作字符的數組
清空數組的三種方式
從0截取，截取整個數組
讓數組的長度變爲0
給數組從新賦值,使其爲空數組
對象
自定義對象
與數學運算相關的封裝到了一個Math對象中
與數組操做相關的呢，封裝到了Arry數組對象當中
與日期相關的，封裝到了Date這個對象當中
組成
屬性
方法
建立自定義對象
var student = new Object(); //用構造函數的方式建立了一個空對象
student.name = "張三"; // 屬性和變量是同樣的，都是用來存儲數據的
student.age = 20;
student.sex = "男";
student.sayHi = function(){
console.log("我叫"+student.name+"，我今年"+student.age+"歲了，我是"+student.sex+"生");
};
student.sayHi ( ) ;
批量建立對象
建立
function createStudent(name,age,sex){
var student = new Object();// 用構造函數的方式建立了一個空對象並返回
student.name =name;
student.age = age;
student.sex= sex;
student.sayHi= function(){
console.log("我叫"+student.name+"，我今年"+student.age+"，我是"+student.sex+"生");
};
return student;//將這個對象返回
}
調用執行
var zs = createStudent("張三",25,"男");
zs.sayHi();
this方法構造函數建立對象
this關鍵字
在JS中，經過構造函數建立出來的對象 ，在調用方法的時候，this指代當前對象
誰調用方法，this指代誰，都是指代當前對象
new關鍵字
new 關鍵字來完成
1. 建立一個空對象
2. 將關鍵字this指向這個空對象
3. 執行構造函數裏面的代碼，給當前空對象this設置屬性和方法
4. 將this這個當前對象返回
執行
建立
function Student(name,sex,age){ //首字母大寫，標明是一個函數，可是是構造函數，用來建立對象
//var this = new Object();
this.name = name; // this指代當前建立出來的出來
this.age=age;
this.sex = sex;
this.sayHi = function(){
console.log("我叫"+this.name+"，我今年"+this.age+"，我是"+this.sex+"生");
};
//return student();
// return this;
}
調用執行
ar ls = new Student("李四","男",25); // 構造函數能夠建立對象並返回
ls.sayHi();
對象字面量建立對象
建立
var o = { // 對象字面量
屬性 : 值 ,
屬性 : 20 ,
函數名 : function () {
console.log( );
}
};
console.log( o["屬性"] );
調用
o [ "函數名"]
遍歷
for ( var key in o ) {
console.log ( key +"===")+a[key];
}
JSON（javascript對象表示形式）
傳輸數組的一種數據格式，與對象字面量的區別，就是屬性必定要加上 」 」
DOM（文檔對象模型，文檔樹模型）
Document
獲取頁面元素的第一種方式 : document.getElementById()
object
model
對象
自定義對象
與數學運算相關的封裝到了一個Math對象中
與數組操做相關的呢，封裝到了Arry數組對象當中
與日期相關的，封裝到了Date這個對象當中
組成
屬性
方法
建立自定義對象
var student = new Object(); //用構造函數的方式建立了一個空對象
student.name = "張三"; // 屬性和變量是同樣的，都是用來存儲數據的
student.age = 20;
student.sex = "男";
student.sayHi = function(){
console.log("我叫"+student.name+"，我今年"+student.age+"歲了，我是"+student.sex+"生");
};
student.sayHi ( ) ;
批量建立對象
建立
function createStudent(name,age,sex){
var student = new Object();// 用構造函數的方式建立了一個空對象並返回
student.name =name;
student.age = age;
student.sex= sex;
student.sayHi= function(){
console.log("我叫"+student.name+"，我今年"+student.age+"，我是"+student.sex+"生");
};
return student;//將這個對象返回
}
調用執行
var zs = createStudent("張三",25,"男");
zs.sayHi();
this方法構造函數建立對象
this關鍵字
在JS中，經過構造函數建立出來的對象 ，在調用方法的時候，this指代當前對象
誰調用方法，this指代誰，都是指代當前對象
new關鍵字
new 關鍵字來完成
1. 建立一個空對象
2. 將關鍵字this指向這個空對象
3. 執行構造函數裏面的代碼，給當前空對象this設置屬性和方法
4. 將this這個當前對象返回
執行
建立
function Student(name,sex,age){ //首字母大寫，標明是一個函數，可是是構造函數，用來建立對象
//var this = new Object();
this.name = name; // this指代當前建立出來的出來
this.age=age;
this.sex = sex;
this.sayHi = function(){
console.log("我叫"+this.name+"，我今年"+this.age+"，我是"+this.sex+"生");
};
//return student();
// return this;
}
調用執行
ar ls = new Student("李四","男",25); // 構造函數能夠建立對象並返回
ls.sayHi();
對象字面量建立對象
建立
var o = { // 對象字面量
屬性 : 值 ,
屬性 : 20 ,
函數名 : function () {
console.log( );
}
};
console.log( o["屬性"] );
調用
o [ "函數名"]
遍歷
for ( var key in o ) {
console.log ( key +"===")+a[key];
}
JSON（javascript對象表示形式）
傳輸數組的一種數據格式，與對象字面量的區別，就是屬性必定要加上 」 」
DOM（文檔對象模型，文檔樹模型）
Document
獲取頁面元素的第一種方式 : document.getElementById()
object
model函數
- 1. Css和JavaScript
- 2. css和html第三部分
- 3. JavaScript和Ajax部分（2）
- 4. JavaScript和Ajax部分（3）
- 5. JavaScript和Ajax部分（6）
- 6. JavaScript和Ajax部分（1）
- 7. JavaScript和Ajax部分（5）
- 8. JavaScript和Ajax部分（4）
- 9. 2、$CSS部分
- 10. HTML、CSS部分
- 更多相關文章...
- • ionic 頭部和底部 - ionic 教程
- • JavaScript 指南 - 網站建設指南
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
- • Git五分鐘教程
-
每一个你不满意的现在，都有一个你没有努力的曾经。