JS 語法

  • CSS和JS在網(wǎng)頁中的放置順序是怎樣的挑随?
  • CSS放置在HTML中的<head>元素內(nèi)。
  • 現(xiàn)代Web應(yīng)用程序一般把全部JavaScript引用放在<body>元素中的頁面內(nèi)容的后面粪般。
  • 解釋白屏和FOUC
  • 白屏現(xiàn)象:在瀏覽器中越平,如果把CSS樣式放在HTML的底部秉撇,在刷新或打開新窗口的情況下,瀏覽器會出現(xiàn)白屏效果浑劳。使用@import引用CSS樣式也會出現(xiàn)此效果(@import引用的CSS會等到頁面全部被下載完再被加載阱持。)
  • FOUC 現(xiàn)象(逐步加載無樣式的內(nèi)容,等CSS加載后頁面突然展現(xiàn)樣式):
    如果使用@import方法或點擊鏈接,輸入URL,使用書簽進入等,對css進行導(dǎo)入,會導(dǎo)致某些頁面在Windows 下的Internet Explorer出現(xiàn)以無樣式顯示頁面內(nèi)容的瞬間閃爍,
    原因:
    1魔熏,使用import方法導(dǎo)入樣式表衷咽。
    2,將樣式表放在頁面底部
    3蒜绽,有幾個樣式表镶骗,放在html結(jié)構(gòu)的不同位置。
    原理:當(dāng)樣式表晚于結(jié)構(gòu)性html 加載躲雅,當(dāng)加載到此樣式表時卖词,頁面將停止之前的渲染。此樣式表被下載和解析后吏夯,將重新渲染頁面此蜈,也就出現(xiàn)了短暫的閃屏現(xiàn)象。
  • async和defer的作用是什么噪生?有什么區(qū)別
  • defer:這個屬性的用途是表明腳本在執(zhí)行時不會影響頁面的構(gòu)造裆赵,腳本會被延遲到整個頁面都解析完畢后再運行。在<script>元素中設(shè)置defer屬性表示告訴瀏覽器立即下載跺嗽,但延遲執(zhí)行這個js腳本战授。
<script defer src="script.js"></script>
  • async:這個屬性與defer屬性相似都只適用于外部腳本,都用于改變處理腳本的行為桨嫁。async屬性告訴瀏覽器立即下載文件植兰,但async與defer不同在于,標(biāo)記為async的腳本不保證按照指定它們的先后順序執(zhí)行璃吧。指定async屬性的目的是不讓頁面等待js腳本的下載和執(zhí)行楣导,從而異步加載頁面的其他內(nèi)容。建議異步腳本不要在加載期間修改DOM畜挨。
<script async src="script.js"></script>
  • 簡述網(wǎng)頁的渲染機制
    瀏覽器工作流程
    解析DOM
筒繁、CSSOM構(gòu)造成渲染樹
    解析DOM 噩凹、CSSOM構(gòu)造成渲染樹
  • 瀏覽器這工作步驟:
    加載:根據(jù)請求的URL進行域名解析,向服務(wù)器發(fā)起請求毡咏,接收文件(HTML驮宴、JS、CSS呕缭、圖象等)堵泽。
    解析:
    1 通過解析JS語法、HTML標(biāo)簽恢总、CSS屬性迎罗,構(gòu)建DOM樹、CSSOM樹离熏。
    2 解析完成后佳谦,瀏覽器通過DOM樹、CSSOM樹構(gòu)造出渲染樹滋戳。
    渲染 :在渲染樹的基礎(chǔ)上進行布局, 計算每個節(jié)點的幾何結(jié)構(gòu)钻蔑。
    繪制 :通過調(diào)用操作系統(tǒng)的API把每個節(jié)點繪制在屏幕上。

  • JavaScript 定義了幾種數(shù)據(jù)類型? 哪些是簡單類型?哪些是復(fù)雜類型?

  • 5種簡單數(shù)據(jù)類型(基本數(shù)據(jù)類型):Undefined奸鸯、Null咪笑、Boolean、Number和String娄涩。

  • 1種復(fù)雜復(fù)雜數(shù)據(jù)類型:Object

  • NaN窗怒、undefined、null分別代表什么?

  • NaN蓄拣,即非數(shù)值(Not a Number)扬虚,這個數(shù)值用于表示一個本來要返回數(shù)值的操作數(shù)未返回數(shù)值的情況。
    特點:
    1 任何涉及NaN的操作(例如NaN/10)都會返回NaN球恤。
    2 NaN與任何值都不相等辜昵,包括NaN本身。

    (NaN == NaN);//false

    針對NaN的特點咽斧,ECMAscript定義了isNaN()函數(shù)堪置。這個函數(shù)接受一個參數(shù),該參數(shù)可以是任何類型张惹,而函數(shù)會幫我們確定這個參數(shù)是否“不是數(shù)值”舀锨。isNaN()在接受一個值后,會嘗試這個值轉(zhuǎn)換為數(shù)值宛逗。(字符串"10"或Boolean值會直接轉(zhuǎn)換為數(shù)值)坎匿。任何不能被轉(zhuǎn)換為數(shù)值的值都會導(dǎo)致這個函數(shù)返回true

console.log(isNaN(NaN));//true
console.log(isNaN(10));//false
console.log(isNaN("10"));//false
console.log(isNaN("blue"));//true
console.log(isNaN(true));//false(布爾值可以轉(zhuǎn)換為0和1)
Paste_Image.png
  • Undefined類型只有一個值,即特殊的Undefined碑诉。在使用var聲明變量但未對其加以初始化時彪腔,這個變量的值就是Undefined侥锦。例如:


    變量未聲明

    這個例子只聲明了變量a进栽,但未對其進行初始化,進行變量a與字面量Undefined的比較恭垦】烀可以等價寫成:


    聲明變量為Undefined

    結(jié)論:未經(jīng)初始化的值默認就會取得Undefined值。一般而言番挺,不存在需要聲明一個變量為Undefined的情況唠帝。字面量Undefined主要目的是用于比較。
  • Null類型是第二個只有一個值的數(shù)據(jù)類型玄柏。null值表示一個空對象指針襟衰,所以typeof操作符檢測null值會返回“object”的原因。


    typeof檢測null

    如果定義的變量準備在將來用于保存對象粪摘,那么最好將該變量初始化為null瀑晒。這樣一來只要直接檢查null值就可以知道相應(yīng)的變量是否已經(jīng)保存了一個對象的引用。

if (a != null) {
    //如果變量a定義了一個對象的引用就執(zhí)行徘意。
}
  • typeof和instanceof的作用和區(qū)別?
  • typeof操作符是用于檢測變量的數(shù)據(jù)類型苔悦。如果是使用構(gòu)造函數(shù)創(chuàng)建的對象則會返回"object",不過對于數(shù)組來說是個例外椎咧,無論是否是直接量都會返回"object"


    檢查數(shù)據(jù)類型
  • instanceof此運算符可以判斷一個變量是否是某個對象(類)的實例(檢測 constructor.prototype 是否存在于參數(shù) object 的原型鏈上)玖详,返回值是布爾類型的。示例:
var oStringObject = new String("hello world"); 
 console.log(oStringObject instanceof String);   // 輸出 "true"

參考:JavaScript instanceof 運算符深入剖析勤讽、MDN

  • 代碼
    • 完成如下代碼判斷一個變量是否是數(shù)字蟋座、字符串、布爾脚牍、函數(shù) (難度*)
function isNumber(el){ 
      if (typeof(el) === number) {return "ture";}
      else {return "false";}
}
function isString(el){ 
      if (typeof(el) === string) {return "ture";}
      else {return "false";}
}
function isBoolean(el){ 
      if (typeof(el) === boolean) {return "ture";}
      else {return "false";}
}
function isFunction(el){ 
      if (typeof(el) === function) {return "ture";}
      else {return "false";}
}
var a = 2, 
         b = "jirengu", 
         c = false;
alert( isNumber(a) ); //true
alert( isString(a) ); //false
alert( isString(b) ); //true
alert( isBoolean(c) ); //true
alert( isFunction(a)); //false
alert( isFunction( isNumber ) ); //true
  • 以下代碼的輸出結(jié)果是?(難度**)
console.log(1+1); //2
console.log("2"+"4"); //24
console.log(2+"4"); //24
console.log(+new Date());//1467739918839
console.log(+"4");//4
  • 以下代碼的輸出結(jié)果是? (難度***)
var a = 1;
a+++a;//3
typeof a+2;//number2
  • 遍歷數(shù)組向臀,把數(shù)組里的打印數(shù)組每一項的平方 (難度**)
var arr = [3,4,5];
for (i = 0; i < arr.length; i++ ) {
      console.log(arr[i] * arr[i]);
      // 輸出 9, 16, 25 
}
  • 遍歷 JSON, 打印里面的值 (難度**)
var obj = { 
  name: 'hunger', 
  sex: 'male', 
  age: 28
}
for (var prop in obj) {
console.log(prop + ":" + obj[prop])
} 
// 輸出 name: hunger, sex: male, age:28
  • 下面代碼的輸出是? 為什么 (難度***)
    javascript變量提升機制。
console.log(a);//undefined 因為下一句var a = 1還沒執(zhí)行莫矗,相當(dāng)于只進行了var a; a沒有賦值就console.log(a)
var a = 1;
console.log(a);//1 變量a已經(jīng)賦值為1
console.log(b);//error 這里的b并沒有聲明所以出現(xiàn)錯誤飒硅。
console.log(a);//undefined
var a = 1;
等價于下示
var a;
console.log(a);
a = 1;
//當(dāng)全局變量賦值前被提升到最上面先進行了聲明。
//JS在執(zhí)行前會把所有的變量和函數(shù)提前聲明

本博客版權(quán)歸 本人和饑人谷所有作谚,轉(zhuǎn)載需說明來源

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末三娩,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子妹懒,更是在濱河造成了極大的恐慌雀监,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,423評論 6 491
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異会前,居然都是意外死亡好乐,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,147評論 2 385
  • 文/潘曉璐 我一進店門瓦宜,熙熙樓的掌柜王于貴愁眉苦臉地迎上來蔚万,“玉大人,你說我怎么就攤上這事临庇》戳В” “怎么了?”我有些...
    開封第一講書人閱讀 157,019評論 0 348
  • 文/不壞的土叔 我叫張陵假夺,是天一觀的道長淮蜈。 經(jīng)常有香客問我,道長已卷,這世上最難降的妖魔是什么梧田? 我笑而不...
    開封第一講書人閱讀 56,443評論 1 283
  • 正文 為了忘掉前任,我火速辦了婚禮侧蘸,結(jié)果婚禮上裁眯,老公的妹妹穿的比我還像新娘。我一直安慰自己闺魏,他們只是感情好未状,可當(dāng)我...
    茶點故事閱讀 65,535評論 6 385
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著析桥,像睡著了一般司草。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上泡仗,一...
    開封第一講書人閱讀 49,798評論 1 290
  • 那天埋虹,我揣著相機與錄音,去河邊找鬼娩怎。 笑死搔课,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的截亦。 我是一名探鬼主播爬泥,決...
    沈念sama閱讀 38,941評論 3 407
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼崩瓤!你這毒婦竟也來了袍啡?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,704評論 0 266
  • 序言:老撾萬榮一對情侶失蹤却桶,失蹤者是張志新(化名)和其女友劉穎境输,沒想到半個月后蔗牡,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,152評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡嗅剖,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,494評論 2 327
  • 正文 我和宋清朗相戀三年辩越,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片信粮。...
    茶點故事閱讀 38,629評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡黔攒,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出蒋院,到底是詐尸還是另有隱情亏钩,我是刑警寧澤莲绰,帶...
    沈念sama閱讀 34,295評論 4 329
  • 正文 年R本政府宣布欺旧,位于F島的核電站,受9級特大地震影響蛤签,放射性物質(zhì)發(fā)生泄漏辞友。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,901評論 3 313
  • 文/蒙蒙 一震肮、第九天 我趴在偏房一處隱蔽的房頂上張望称龙。 院中可真熱鬧,春花似錦戳晌、人聲如沸鲫尊。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,742評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽疫向。三九已至,卻和暖如春豪嚎,著一層夾襖步出監(jiān)牢的瞬間搔驼,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,978評論 1 266
  • 我被黑心中介騙來泰國打工侈询, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留舌涨,地道東北人。 一個月前我還...
    沈念sama閱讀 46,333評論 2 360
  • 正文 我出身青樓扔字,卻偏偏與公主長得像囊嘉,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子革为,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 43,499評論 2 348

推薦閱讀更多精彩內(nèi)容

  • 1.CSS和JS在網(wǎng)頁中的放置順序是怎樣的篷角?為什么會出現(xiàn)白屏和FOUC焊刹? 在寫HTML代碼時,我們都是將CSS文件...
    26d608950683閱讀 632評論 0 0
  • JavaScript基本概念、基礎(chǔ)數(shù)據(jù)類型虐块、運算符俩滥、流程控制語句。 一贺奠、CSS和JS在網(wǎng)頁中的放置順序是怎樣的霜旧? ...
    婷樓沐熙閱讀 434評論 0 2
  • 1.CSS和JS在網(wǎng)頁中的放置順序是怎樣的? 將CSS link標(biāo)簽放在html文檔靠前位置儡率。JS代碼放在html...
    饑人谷區(qū)子銘閱讀 336評論 0 1
  • CSS和JS在網(wǎng)頁中的放置順序是怎樣的挂据? CSS一般放置于網(wǎng)頁開頭,head標(biāo)簽內(nèi)儿普。 JS一般放置于網(wǎng)頁最后崎逃,bo...
    Nicklzy閱讀 599評論 0 50
  • 問答題 CSS和JS在網(wǎng)頁中的放置順序是怎樣的?答:css:通過link標(biāo)簽將樣式表放在 中眉孩。js:放在 中尾部个绍。...
    饑人谷_桶飯閱讀 283評論 0 0