首頁(yè)技術(shù)文章正文

Web前端-JavaScript基礎(chǔ)

更新時(shí)間:2019-01-10 來(lái)源:黑馬程序員 瀏覽量:

  JavaScript基礎(chǔ)概念:客戶端腳本語(yǔ)言

  基本概念

  客戶端:這里的客戶端就是瀏覽器

  腳本語(yǔ)言:不需要編譯,直接就可以被瀏覽器解析執(zhí)行

  功能:

  可以增強(qiáng)用戶和html頁(yè)面的交互過(guò)程,可以控制html元素,讓頁(yè)面有一些動(dòng)態(tài)效果,提高用戶體驗(yàn)

  js的組成結(jié)構(gòu)

  ECMAScript:基礎(chǔ)語(yǔ)法

  BOM:瀏覽器對(duì)象模型

  DOM:文檔對(duì)象模型

  4.js的引入方式:

  -行內(nèi)式

  -內(nèi)聯(lián)式

  定義

  -注意:

  一旦引入了一個(gè)script,在標(biāo)簽內(nèi)不可以再寫(xiě)任何js代碼,否則內(nèi)部代碼不生效

  script標(biāo)簽可以定義在任意位置

  script標(biāo)簽可以定義多個(gè)

  html的加載順序:從上到下,從里到外

  ECMAScript

  基本語(yǔ)法

  注釋

  單行注釋://

  多行注釋:/**/

  數(shù)據(jù)類型

  1).原始數(shù)據(jù)類型(基本類型)

  -number:數(shù)字 //整數(shù)/小數(shù)/NaN(not a number)

  -string:字符串 //字符/字符串

  -boolean:布爾 //true/false

  -null:一個(gè)對(duì)象為空的占位符

  -undefined:未定義 //如果一個(gè)對(duì)象沒(méi)有給初始化值,則被默認(rèn)賦值為undefined

  2).引用數(shù)據(jù)類型(對(duì)象)

  變量

  1).JavaScript是弱類型語(yǔ)言

  強(qiáng)類型:在開(kāi)辟變量存儲(chǔ)空間時(shí),定義了空間將來(lái)存儲(chǔ)的數(shù)據(jù)的數(shù)據(jù)類型,只能存儲(chǔ)固定類型的數(shù)據(jù)

  弱類型:在申請(qǐng)變量?jī)?nèi)存空間時(shí),不定義空間將來(lái)的存儲(chǔ)類型,可以存放任意類型的數(shù)據(jù)

  2).語(yǔ)法

  var 變量名 = 初始化值;

  在創(chuàng)建時(shí)可以不定義初始化值.

  運(yùn)算符

  1).一元運(yùn)算符: //自增(++)/自減(--)/正號(hào)(+)/負(fù)號(hào)(-)

  正負(fù)號(hào): 會(huì)引起數(shù)據(jù)類型轉(zhuǎn)換(如果+/-后面跟的不是number類型)

  2).算數(shù)運(yùn)算符: //和java一樣 加減乘除

  3).賦值運(yùn)算符 //和java一樣 =

  4).比較運(yùn)算符 //和java一樣 ===(全等) !==(不全等)

  類型不同進(jìn)行比較:先進(jìn)行類型轉(zhuǎn)換

  字符串比較-->按照字典逐位比較,直到得出結(jié)果

  ===:在比較之前先判斷類型,如果類型不一樣則直接返回false

  !==:只有值和類型全相等時(shí)候?yàn)閒alse;

  5).邏輯運(yùn)算符 //和java一樣 與或非

  6).三元運(yùn)算符 //和java一樣 條件? 值1:值2

  !!!注意:在js中如果運(yùn)算數(shù)不是運(yùn)算符所要求的類型,那么js的引擎會(huì)自動(dòng)將運(yùn)算數(shù)進(jìn)行類型轉(zhuǎn)換

  *string-->number:按照字面量轉(zhuǎn)化,如果字面量不是數(shù)字,則轉(zhuǎn)為NaN;

  *boolean-->number:true轉(zhuǎn)為1,false轉(zhuǎn)為0;

  *null/undefined-->number:NaN

  *number-->boolean:0為假,非0為真

  *string-->boolean:""為假,其他為真

  *null/undefined-->boolean:都為假

  *對(duì)象-->boolean:所有對(duì)象都為真

  if(obj) 對(duì)象不為空,字符串長(zhǎng)度>0

  流程控制語(yǔ)句

  1).if...else... //和java一樣

  2).switch

  在java中,switch語(yǔ)句可以接受的數(shù)據(jù)類型:byte short int char,枚舉(1.5) String(1.7)

  在js中,switch語(yǔ)句可以接受任意類型的數(shù)據(jù)

  3).while

  4).do...while

  5).for

  JS特殊語(yǔ)法(不建議使用)

  1).語(yǔ)句以分號(hào)結(jié)尾,如果一行只有一條語(yǔ)句,則;可以省略

  2).變量的定義使用var關(guān)鍵字,也可以不使用

  -使用var定義的變量是局部變量

  -不使用var定義的變量時(shí)全局變量

  注:什么是變量???

  一小塊存儲(chǔ)數(shù)據(jù)的內(nèi)存空間

  基本對(duì)象

  Function:函數(shù)對(duì)象

  Funciton對(duì)象的創(chuàng)建

  1).創(chuàng)建:以方法2/3為主,方法1了解即可

  -方式1:var fun = new Function(形參列表,方法體) 了解即可

  -方式2:function 方法名(形參列表){函數(shù)體}

  -方式3:var 方法名 = function(參數(shù)列表){函數(shù)體}

  2).屬性

  -length:代表形參的個(gè)數(shù)

  3).特點(diǎn)****

  -在創(chuàng)建函數(shù)對(duì)象時(shí),參數(shù)類型不用寫(xiě),返回值類型

  -函數(shù)是一個(gè)對(duì)象,如果定義名稱相同的函數(shù)則會(huì)覆蓋之前定義的函數(shù)

  -在JS中函數(shù)的調(diào)用只與方法名稱有關(guān),與參數(shù)列表無(wú)關(guān)

  例:定義了 function fun(a,b,c){函數(shù)體}

  調(diào)用時(shí)可以使用 fun();/fun(1);/fun(1,2);/fun(1,2,3)/fun(1,2,3,4)

  -在JS中存在內(nèi)置參數(shù)arguments,它是一個(gè)數(shù)組

  例:求任意個(gè)數(shù)的和

  function add(){

  var sum=0;

  for(vari=0;i

  return sum;

  }

  Function對(duì)象的調(diào)用

  var result = 函數(shù)名(參數(shù)...);

  var s = 函數(shù)名; 將函數(shù)對(duì)象賦給s;

  Array:數(shù)組對(duì)象

  數(shù)組對(duì)象的創(chuàng)建

  - var arr = new Array(元素列表)

  var arr = new Array(1,2,3);

  - var arr = new Array(默認(rèn)長(zhǎng)度)

  var arr = new Array(5);

  - var arr = [元素列表]

  var arr = [1,2,3,4];

  方法

  - join(參數(shù))***:將數(shù)組中的元素按照指定的分隔符(傳入的參數(shù))拼接為字符串

  - push();向數(shù)組的尾部添加一個(gè)或更多個(gè)元素

  屬性

  length

  特點(diǎn)

  在JS中數(shù)組的元素類型是可變的

  在JS中數(shù)組的長(zhǎng)度是可變的,訪問(wèn)某個(gè)角標(biāo),如果沒(méi)有數(shù)據(jù)則返回undefined;

  Date:日期對(duì)象

  創(chuàng)建:

  var Date = new Date();

  方法:

  toLocalString():返回當(dāng)前date對(duì)象對(duì)應(yīng)的時(shí)間本地字符串格式

  getTime():返回1970年1月1日零點(diǎn)至今的毫秒值

  Math:數(shù)學(xué)

  創(chuàng)建: Math對(duì)象不用創(chuàng)建,可以直接使用

  方法:(知道有哪些功能即可)

  random():返回0~1之間的隨機(jī)數(shù),左開(kāi)又閉

  ceil()/floor()/round():向上/向下/四舍五入取整

  屬性:

  PI

  RegExp:正則表達(dá)式對(duì)象

  正則表達(dá)式:定義字符串匹配規(guī)則

  組成規(guī)則

  1).單個(gè)字符:[]

  如:[a][ab][a-zA-Z0-9];

  2).特殊符號(hào)代表特殊含義的單個(gè)字符

  \d:單個(gè)數(shù)字

  \w:單個(gè)字符

  3).量詞符號(hào)

  ?: 出現(xiàn)0次或1次 例:\w?字符出現(xiàn)0或1次

  *: 表示出現(xiàn)0次或多次

  +: 出現(xiàn)1次或多次

  {m,n}:表示數(shù)量>=m,<=n

  創(chuàng)建:(常用第二種方式)

  - 方式1:var reg = new RegExp("正則表達(dá)式"); 在這里\需要用\\轉(zhuǎn)義

  - 方式2:var reg = /正則表達(dá)式/; 這里不需要轉(zhuǎn)義

  方法

  test(校驗(yàn)對(duì)象):用來(lái)驗(yàn)證指定的字符串是否符合正則定義的規(guī)范

  常用寫(xiě)法/正則表達(dá)式/.test("字符串");

  常用的正則表達(dá)式:

  https://www.cnblogs.com/fozero/p/7868687.html

  Global:全局對(duì)象

  特點(diǎn):是一個(gè)全局對(duì)象,其中封裝的方法不需要對(duì)象就可以直接調(diào)用.

  方法

  - encodeURI():URL編碼

  - decodeURI():URL解碼

  - encodeURIComponent():URL編碼,編碼的字符更多,對(duì)特殊符號(hào)也進(jìn)行編碼

  - decodeURIComponent():URL解碼,解碼的字符更多,對(duì)特殊符號(hào)也進(jìn)行編碼

  - parsInt(str):注意判斷每一個(gè)字符是否為數(shù)字,直到不是數(shù)字為止并將前面的數(shù)字轉(zhuǎn)為number

  - isNaN():判斷一個(gè)變量是否為NaN;

  注意:NaN參與的比較全部為false,所以不能用==判斷

  - eval():將JavaScript的字符串轉(zhuǎn)成腳本來(lái)執(zhí)行

  例:var jscode = "alert(123)";

  eval(jscode);會(huì)解析片段,并彈出123.

  - 注:

  URL編碼:

  HTTP協(xié)議不支持中文,需要瀏覽器進(jìn)行編碼和解碼

  將1個(gè)字節(jié)的前4個(gè)bit轉(zhuǎn)換為16進(jìn)制后4個(gè)bit轉(zhuǎn)換成16進(jìn)制,得到一個(gè)二位數(shù),用%隔開(kāi)

  如在UTF-8下, "傳智播客"= %E4%BC%A0%E6%99%BA%E6%92%AD%E5%AE%A2



作者:黑馬程序員JavaEE培訓(xùn)學(xué)院
首發(fā):http://java.itheima.com/

分享到:
在線咨詢 我要報(bào)名
和我們?cè)诰€交談!