Rumah hujung hadapan web tutorial js 一些关于JS的基础问题

一些关于JS的基础问题

May 21, 2018 am 10:21 AM
javascript Pangkalan soalan

在开发学习中经常会遇到一些js问题,本篇将会介绍一些相关的js基础问题。

CSS和JS在网页中的放置顺序是怎么样的?

一般我们把CSS放在head头部标签中,把JS代码放在body代码的尾部。

<!DOCTYPE html><html><head>
  <meta charset="utf-8">
  <title>JS基础</title>
  <style>
    
    /* 这里放css代码 */      
    
  </style></head><body>
  <!-- 这里放HTML代码 -->
    
  <script>
Salin selepas log masuk




解释白屏和FOUC

白屏 :如果把CSS样式放在底部,在某些场景下(新窗口打开、刷新等)页面会出现白屏,而不是内容逐步展现,如果使用@import标签,即时CSS放入link,并且放在头部,也可能出现白屏现象。

脚步会阻塞后面内容的展现

脚本会阻塞其后组建的下载
对于图片和CSS,在加载时会并发加载(如一个域名下同时加载两个文件),但在加载JS时,会禁用并发,并且阻止其它内容的下载,所以把JS放到页面的顶部也会出现白屏的现象。

FOUC(Flash of Unstyled Content)无样式内容闪烁 :如果把CSS样式放在底部,对于IE浏览器,在某些场景下(点击链接,输入URL,使用书签进入等),就会出现FOUC现象(逐步加载无样式的内容,等CSS加载后页面突然展现样式),对于Firefox会一直出现FOUC现象。

async和defer的作用是什么?有什么区别

没有async和defer,在浏览器加载中会立即加载执行当前的脚本,并阻塞浏览器渲染script标签之下的文档元素,而有了async和defer可以使浏览器加载渲染后续文档的过程和JS脚本的加载与执行并行进行,也就是加载异步。

两者的区别:主要是脚本下载完成之后何时执行,defer会按照加载顺序脚本延迟到文档解析显示后执行,而async不管你声明的顺序如何,只要他加载完了就会立刻执行,并不会按照顺序。
一般来说defer更符合我们的使用场景。

网页的渲染机制

解析 HTML 标签, 构建 DOM 树

解析 CSS 标签, 构建 CSSOM 树

根据 DOM 和 CSSOM 组合成 渲染树 (render tree)进行基础布局

计算每个节点的几何结构

把每个节点绘制到屏幕上 呈现给用户

JavaScript 定义了几种数据类型? 哪些是简单类型?哪些是复杂类型?

Null :是空指针

Underfined :有指针但未指向任何空间

Boolean :布尔值,真假(true,false)

Number :数字类型。

String :字符串类型,单引号或双引号表示。

Object :对象,JS核心概念,最重要的数据类型。(一切皆为对象)

前5种为简单类型,Object为复杂类型。

NaN、undefined、null分别代表什么?

NaN:含义是Not a number,表示非数字,与任何值都不相等,包括他自己,(一种不等于任何值的数字类型)

underfined:是Underfined唯一的值,表示变量只是被声明,但是没有初始化,代表有这个指针,但是此指针没有指向任何空间

null:Null唯一的值,表示空指针,也就是不存在的东西

typeof和instanceof的作用和区别?

typeof的作用,可以判断返回一个值的数据类型,放在运算数的前面,运算数可以是任何类型。

function a(){}
a(){}typeof a"function" //运算数为函数返回functiontypeof 123421"number"typeof "32423423423""string"typeof true"boolean" typeof undefined"undefined" //利用这一点检查未定义变量typeof window"object" //其他全部返回object

instanceof 用于判断一个变量是否某个对象的实例,因为typeof遇到null,数组,对象时都会返回object类型,所以当我们要判断一个对象是否是数组时,或者判断某个变量是否是某个对象的实例则要选择使用instanceof

代码问题

1.如下代码判断一个变量是否是数字、字符串、布尔、函数

function isNumber(el){ 
 if ((typeof el)==="Number"){   return true;
   }  else { 
return false
  };
}function isString(el){ 
  if ((typeof el)==="String"){   return true;
   }  else { 
return false
  };
}function isBoolean(el){ if ((typeof el)==="Boolean"){   return true;
   }  else { 
return false
  };
}function isFunction(el){  if ((typeof el)==="Function"){   return true;
   }  else { 
return false
  };
}var a = 2, 
b = "jirengu", 
c = false;alert( isNumber(a) ); //truealert( isString(a) ); //falsealert( isString(b) ); //truealert( isBoolean(c) ); //truealert( isFunction(a)); //falsealert( isFunction( isNumber ) ); //true
Salin selepas log masuk

2.以下代码的输出结果是?

1956750-bb4b3f2712f92dd0.png

我是图

3.以下代码的输出结果是?

var a = 1;
a+++a;typeof a+2;

结果为number2,(typeof优先级相当高,所以优先计算typeof a结果为number,带上2所以为number2)

4.遍历数组,把数组里的打印数组每一项的平方

var arr = [3,4,5]// todo..// 输出 9, 16, 25

代码如下:

1956750-5289ee131b62a73b.png

我是图

5.遍历 JSON, 打印里面的值

var obj = { name: 'hunger', sex: 'male', age: 28}//todo ...// 输出 name: hunger, sex: male, age:28

代码如图:(此处有参考)

1956750-17f8e1bdf3e86b89.png

我是图

6.下面代码的输出是? 为什么

console.log(a);var a = 1;console.log(a);console.log(b);

第一个console.log(a);输出为underfined,因为JS会全局变量提升,a只有声明没有赋值。
第二个console.log(a);输出为1,因为它在var a =1;之后,1赋值到a身上。
第三个console.log(b);输出会报错,因为b未声明未赋值。

本篇介绍了一些介绍基础问题,想要更多相关知识请关注php中文网。

相关推荐:

如何用前端js模块化编写require.js

用CSS实现的一张图完成的按钮实例

关于AJAX ASP/PHP 请求实例的相关知识

Atas ialah kandungan terperinci 一些关于JS的基础问题. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Tetapan grafik terbaik
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Cara Membuka Segala -galanya Di Myrise
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

WebSocket dan JavaScript: teknologi utama untuk melaksanakan sistem pemantauan masa nyata WebSocket dan JavaScript: teknologi utama untuk melaksanakan sistem pemantauan masa nyata Dec 17, 2023 pm 05:30 PM

WebSocket dan JavaScript: Teknologi utama untuk merealisasikan sistem pemantauan masa nyata Pengenalan: Dengan perkembangan pesat teknologi Internet, sistem pemantauan masa nyata telah digunakan secara meluas dalam pelbagai bidang. Salah satu teknologi utama untuk mencapai pemantauan masa nyata ialah gabungan WebSocket dan JavaScript. Artikel ini akan memperkenalkan aplikasi WebSocket dan JavaScript dalam sistem pemantauan masa nyata, memberikan contoh kod dan menerangkan prinsip pelaksanaannya secara terperinci. 1. Teknologi WebSocket

JavaScript dan WebSocket: Membina sistem ramalan cuaca masa nyata yang cekap JavaScript dan WebSocket: Membina sistem ramalan cuaca masa nyata yang cekap Dec 17, 2023 pm 05:13 PM

JavaScript dan WebSocket: Membina sistem ramalan cuaca masa nyata yang cekap Pengenalan: Hari ini, ketepatan ramalan cuaca sangat penting kepada kehidupan harian dan membuat keputusan. Apabila teknologi berkembang, kami boleh menyediakan ramalan cuaca yang lebih tepat dan boleh dipercayai dengan mendapatkan data cuaca dalam masa nyata. Dalam artikel ini, kita akan mempelajari cara menggunakan teknologi JavaScript dan WebSocket untuk membina sistem ramalan cuaca masa nyata yang cekap. Artikel ini akan menunjukkan proses pelaksanaan melalui contoh kod tertentu. Kami

Bagaimana untuk menyelesaikan masalah yang jQuery tidak dapat memperoleh nilai elemen bentuk Bagaimana untuk menyelesaikan masalah yang jQuery tidak dapat memperoleh nilai elemen bentuk Feb 19, 2024 pm 02:01 PM

Untuk menyelesaikan masalah yang jQuery.val() tidak boleh digunakan, contoh kod khusus diperlukan Untuk pembangun bahagian hadapan, menggunakan jQuery ialah salah satu operasi biasa. Antaranya, menggunakan kaedah .val() untuk mendapatkan atau menetapkan nilai elemen borang adalah operasi yang sangat biasa. Walau bagaimanapun, dalam beberapa kes tertentu, masalah tidak dapat menggunakan kaedah .val() mungkin timbul. Artikel ini akan memperkenalkan beberapa situasi dan penyelesaian biasa, serta memberikan contoh kod khusus. Penerangan Masalah Apabila menggunakan jQuery untuk membangunkan halaman hadapan, kadangkala anda akan menghadapi

Tutorial JavaScript Mudah: Cara Mendapatkan Kod Status HTTP Tutorial JavaScript Mudah: Cara Mendapatkan Kod Status HTTP Jan 05, 2024 pm 06:08 PM

Tutorial JavaScript: Bagaimana untuk mendapatkan kod status HTTP, contoh kod khusus diperlukan: Dalam pembangunan web, interaksi data dengan pelayan sering terlibat. Apabila berkomunikasi dengan pelayan, kami selalunya perlu mendapatkan kod status HTTP yang dikembalikan untuk menentukan sama ada operasi itu berjaya dan melaksanakan pemprosesan yang sepadan berdasarkan kod status yang berbeza. Artikel ini akan mengajar anda cara menggunakan JavaScript untuk mendapatkan kod status HTTP dan menyediakan beberapa contoh kod praktikal. Menggunakan XMLHttpRequest

Apakah soalan dalam peperiksaan Rulong 8 Wine Master? Apakah soalan dalam peperiksaan Rulong 8 Wine Master? Feb 02, 2024 am 10:18 AM

Apakah soalan yang terlibat dalam peperiksaan Yulong 8 Wine Master? Apakah jawapan yang sepadan? Bagaimana untuk lulus peperiksaan dengan cepat? Terdapat banyak soalan yang perlu dijawab dalam aktiviti Peperiksaan Sarjana Wain, dan kita boleh merujuk kepada jawapan untuk menyelesaikannya. Soalan-soalan ini semua melibatkan pengetahuan tentang wain. Jika anda memerlukan rujukan, mari kita lihat analisis terperinci tentang jawapan kepada soalan peperiksaan Yakuza 8 Wine Master! Penjelasan terperinci tentang jawapan kepada soalan dalam peperiksaan Rulong 8 Wine Master 1. Soalan mengenai "wain". Ini adalah minuman keras suling yang dihasilkan oleh kilang penyulingan yang ditubuhkan oleh keluarga diraja Ia dibancuh daripada gula tebu yang ditanam dalam kuantiti yang banyak di Hawaii. Apakah nama wain ini? Jawapan: Rum 2. Soalan tentang "arak". Gambar menunjukkan minuman yang diperbuat daripada gin kering dan vermouth kering. Ia dicirikan oleh penambahan buah zaitun dan dikenali sebagai "cockney"

Bagaimana untuk mendapatkan kod status HTTP dalam JavaScript dengan cara yang mudah Bagaimana untuk mendapatkan kod status HTTP dalam JavaScript dengan cara yang mudah Jan 05, 2024 pm 01:37 PM

Pengenalan kepada kaedah mendapatkan kod status HTTP dalam JavaScript: Dalam pembangunan bahagian hadapan, kita selalunya perlu berurusan dengan interaksi dengan antara muka bahagian belakang, dan kod status HTTP adalah bahagian yang sangat penting daripadanya. Memahami dan mendapatkan kod status HTTP membantu kami mengendalikan data yang dikembalikan oleh antara muka dengan lebih baik. Artikel ini akan memperkenalkan cara menggunakan JavaScript untuk mendapatkan kod status HTTP dan memberikan contoh kod khusus. 1. Apakah kod status HTTP bermakna kod status HTTP apabila penyemak imbas memulakan permintaan kepada pelayan, perkhidmatan tersebut

Bagaimana untuk menyelesaikan masalah menu permulaan yang tidak boleh digunakan selepas pemasangan win11 Bagaimana untuk menyelesaikan masalah menu permulaan yang tidak boleh digunakan selepas pemasangan win11 Jan 06, 2024 pm 05:14 PM

Ramai pengguna telah cuba mengemas kini sistem win11, tetapi mendapati bahawa menu mula tidak boleh digunakan selepas kemas kini Ini mungkin kerana terdapat masalah dengan kemas kini terkini masalah. Mari kita lihat bersama-sama. Apa yang perlu dilakukan jika menu mula tidak boleh digunakan selepas win11 dipasang Kaedah 1: 1. Mula-mula buka panel kawalan dalam win11. 2. Kemudian klik butang "Nyahpasang program" di bawah program. 3. Masukkan antara muka nyahpasang dan cari "Lihat kemas kini yang dipasang" di sudut kiri atas 4. Selepas memasukkan, anda boleh melihat masa kemas kini dalam maklumat kemas kini dan menyahpasang semua kemas kini terkini. Kaedah 2: 1. Selain itu, kami juga boleh memuat turun terus sistem win11 tanpa kemas kini. 2. Ini adalah produk tanpa yang paling banyak

Soalan Lazim tentang ujian terobosan baharu Wuhuami: 28 Februari, kami menantikan ketibaan anda! Soalan Lazim tentang ujian terobosan baharu Wuhuami: 28 Februari, kami menantikan ketibaan anda! Feb 26, 2024 pm 05:22 PM

Wuhua Mixin telah mengesahkan bahawa ia akan menjalankan ujian pecah pada 28 Februari. Kali ini kami akan menyelesaikan masalah biasa ujian pecah, termasuk sama ada anda telah menyertai ujian sebelumnya, adakah anda layak kali ini, permulaan dan akhir ujian ujian, dan masa pramuat turun? Mari kita lihat platform peranti yang disokong dan kandungan lain. Soalan Lazim tentang ujian terobosan baharu Wuhuami: 28 Februari, kami menantikan ketibaan anda! 1. Apakah sifat "Ujian Pecah"? Ujian ini ialah ujian pengebilan dan pemadaman fail terhad untuk Android Selepas ujian, data permainan ujian ini akan dipadamkan. 2. Adakah anda pernah menyertai "Ujian Pembukaan" atau "Ujian Kemasukan" Adakah anda mempunyai kelayakan untuk menyertai "Ujian Berbuka" kali ini? sila imbas kod QR di bawah untuk pergi ke " Kepada pemain yang telah mengambil bahagian dalam beta tertutup

See all articles