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

Web前端-JavaScript基礎(chǔ)

更新時間:2019-01-10 來源:黑馬程序員 瀏覽量:

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

  基本概念

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

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

  功能:

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

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

  ECMAScript:基礎(chǔ)語法

  BOM:瀏覽器對象模型

  DOM:文檔對象模型

  4.js的引入方式:

  -行內(nèi)式

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

  定義

  -注意:

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

  script標簽可以定義在任意位置

  script標簽可以定義多個

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

  ECMAScript

  基本語法

  注釋

  單行注釋://

  多行注釋:/**/

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

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

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

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

  -boolean:布爾 //true/false

  -null:一個對象為空的占位符

  -undefined:未定義 //如果一個對象沒有給初始化值,則被默認賦值為undefined

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

  變量

  1).JavaScript是弱類型語言

  強類型:在開辟變量存儲空間時,定義了空間將來存儲的數(shù)據(jù)的數(shù)據(jù)類型,只能存儲固定類型的數(shù)據(jù)

  弱類型:在申請變量內(nèi)存空間時,不定義空間將來的存儲類型,可以存放任意類型的數(shù)據(jù)

  2).語法

  var 變量名 = 初始化值;

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

  運算符

  1).一元運算符: //自增(++)/自減(--)/正號(+)/負號(-)

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

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

  3).賦值運算符 //和java一樣 =

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

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

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

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

  !==:只有值和類型全相等時候為false;

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

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

  !!!注意:在js中如果運算數(shù)不是運算符所要求的類型,那么js的引擎會自動將運算數(shù)進行類型轉(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:都為假

  *對象-->boolean:所有對象都為真

  if(obj) 對象不為空,字符串長度>0

  流程控制語句

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

  2).switch

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

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

  3).while

  4).do...while

  5).for

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

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

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

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

  -不使用var定義的變量時全局變量

  注:什么是變量???

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

  基本對象

  Function:函數(shù)對象

  Funciton對象的創(chuàng)建

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

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

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

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

  2).屬性

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

  3).特點****

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

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

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

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

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

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

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

  function add(){

  var sum=0;

  for(vari=0;i

  return sum;

  }

  Function對象的調(diào)用

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

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

  Array:數(shù)組對象

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

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

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

  - var arr = new Array(默認長度)

  var arr = new Array(5);

  - var arr = [元素列表]

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

  方法

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

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

  屬性

  length

  特點

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

  在JS中數(shù)組的長度是可變的,訪問某個角標,如果沒有數(shù)據(jù)則返回undefined;

  Date:日期對象

  創(chuàng)建:

  var Date = new Date();

  方法:

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

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

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

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

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

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

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

  屬性:

  PI

  RegExp:正則表達式對象

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

  組成規(guī)則

  1).單個字符:[]

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

  2).特殊符號代表特殊含義的單個字符

  \d:單個數(shù)字

  \w:單個字符

  3).量詞符號

  ?: 出現(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("正則表達式"); 在這里\需要用\\轉(zhuǎn)義

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

  方法

  test(校驗對象):用來驗證指定的字符串是否符合正則定義的規(guī)范

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

  常用的正則表達式:

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

  Global:全局對象

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

  方法

  - encodeURI():URL編碼

  - decodeURI():URL解碼

  - encodeURIComponent():URL編碼,編碼的字符更多,對特殊符號也進行編碼

  - decodeURIComponent():URL解碼,解碼的字符更多,對特殊符號也進行編碼

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

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

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

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

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

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

  - 注:

  URL編碼:

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

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

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



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

分享到:
在線咨詢 我要報名
和我們在線交談!