一些关于JS的基础问题-js教程-PHP中文网

首页

web前端

js教程

一些关于JS的基础问题

jacklove

May 21, 2018 am 10:21 AM

javascript 基础问题

在开发学习中经常会遇到一些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>

登录后复制

解释白屏和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

登录后复制

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

我是图

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

代码如下：

我是图

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

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

代码如图：（此处有参考）

我是图

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中文网。

热AI工具

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

免费脱衣服图片

Clothoff.io

AI脱衣机

AI Hentai Generator

免费生成ai无尽的。

显示更多

热工具

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

中文版，非常好用

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

显示更多

热门话题

gmail邮箱登陆入口在哪里

7536

CakePHP 教程

1379

steam的账户名称是什么格式

win11激活密钥永久

NYT连接提示和答案

显示更多

Related knowledge

WebSocket与JavaScript：实现实时监控系统的关键技术 Dec 17, 2023 pm 05:30 PM

WebSocket与JavaScript：实现实时监控系统的关键技术引言：随着互联网技术的快速发展，实时监控系统在各个领域中得到了广泛的应用。而实现实时监控的关键技术之一就是WebSocket与JavaScript的结合使用。本文将介绍WebSocket与JavaScript在实时监控系统中的应用，并给出代码示例，详细解释其实现原理。一、WebSocket技

JavaScript和WebSocket：打造高效的实时天气预报系统 Dec 17, 2023 pm 05:13 PM

JavaScript和WebSocket：打造高效的实时天气预报系统引言：如今，天气预报的准确性对于日常生活以及决策制定具有重要意义。随着技术的发展，我们可以通过实时获取天气数据来提供更准确可靠的天气预报。在本文中，我们将学习如何使用JavaScript和WebSocket技术，来构建一个高效的实时天气预报系统。本文将通过具体的代码示例来展示实现的过程。We

简易JavaScript教程：获取HTTP状态码的方法 Jan 05, 2024 pm 06:08 PM

JavaScript教程：如何获取HTTP状态码，需要具体代码示例前言：在Web开发中，经常会涉及到与服务器进行数据交互的场景。在与服务器进行通信时，我们经常需要获取返回的HTTP状态码来判断操作是否成功，根据不同的状态码来进行相应的处理。本篇文章将教你如何使用JavaScript获取HTTP状态码，并提供一些实用的代码示例。使用XMLHttpRequest

解决jQuery无法获取表单元素值的方法 Feb 19, 2024 pm 02:01 PM

解决jQuery.val()无法使用的问题，需要具体代码示例对于前端开发者，使用jQuery是常见的操作之一。其中，使用.val()方法来获取或设置表单元素的值是非常常见的操作。然而，在一些特定的情况下，可能会出现无法使用.val()方法的问题。本文将介绍一些常见的情况以及解决方案，并提供具体的代码示例。问题描述在使用jQuery开发前端页面时，有时候会碰

如何解决win11安装后无法使用的开始菜单问题 Jan 06, 2024 pm 05:14 PM

不少用户都尝试更新了win11系统，结果发现更新完后开始菜单无法使用了，这可能是因为最新的更新出现了问题，我们可以等待微软修复或者卸载这些更新来解决，下面就一起来看一下解决方法吧。win11安装后开始菜单无法使用怎么办方法一：1、首先在win11中打开控制面板。2、然后点击程序下方的“卸载程序”按钮。3、进入卸载界面，在左上角找到“查看已安装的更新”4、进入之后在更新信息中可以查看更新时间，将最近的更新全部卸载即可。方法二：1、此外，我们还可以直接下载不带更新的win11系统。2、这是一款没有最

如龙8酒类大师考试问题有哪些 Feb 02, 2024 am 10:18 AM

如龙8酒类大师考试涉及的问题包括哪些？对应的答案是什么？如何快速通过考试？酒类大师考试活动中有许多需要回答的问题，我们可以参考答案来解决。这些问题都涉及到酒的知识。如果需要参考，让我们一起来看看如龙8酒类大师考试问题答案的详细解析！如龙8酒类大师考试问题答案详解1、关于“酒”的问题。这是一种管由王室建立的蒸馏洒厂生产的蒸馏酒,以夏威夷大量种植的甘盘的糖分为原料酿制。请问这种酒叫什么?答：朗姆酒2、关于“酒”的问题。图片上是一种使用干琴洒和干苦艾酒调配而成的酒。它的特点是加入了橄榄，被誉为“鸡尼酒

如何在JavaScript中获取HTTP状态码的简单方法 Jan 05, 2024 pm 01:37 PM

JavaScript中的HTTP状态码获取方法简介：在进行前端开发中，我们常常需要处理与后端接口的交互，而HTTP状态码就是其中非常重要的一部分。了解和获取HTTP状态码有助于我们更好地处理接口返回的数据。本文将介绍使用JavaScript获取HTTP状态码的方法，并提供具体代码示例。一、什么是HTTP状态码HTTP状态码是指当浏览器向服务器发起请求时，服务

物华弥新破局测试常见问题解答：2月28日，我们期待您的到来！ Feb 26, 2024 pm 05:22 PM

物华弥新已经确定将于2月28日进行破局测试，本次主要为大家解决破局测试的常见问题，包括曾经参与过之前的测试这次有资格吗、测试的开启和结束、预下载时间、支持哪些设备平台等内容，一起来看看吧。物华弥新破局测试常见问题解答：2月28日，我们期待您的到来！1、「破局测试」的性质为?本次测试为安卓限量计费删档测试,测试结束后,本次测试的游戏数据将被删除。2、曾经参与过「开局测试」或「入局测试」,这次拥有参与「破局测试]的资格吗?如您曾参与过「开局测试」、「入局测试」,请扫描下方二维码前往“致曾参与内测玩家

See all articles

一些关于JS的基础问题

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题