一些关于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邮箱登陆入口在哪里

7334

Java教程

1627

CakePHP 教程

1352

Laravel 教程

1264

PHP教程

1209

显示更多

Related knowledge

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

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

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

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

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

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

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

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

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

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

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

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

声卡驱动有问题会出现什么情况 Mar 02, 2024 am 10:49 AM

声卡驱动是电脑中控制和指引声卡的系统程序，它能够帮助我们播放出声音，因此如果声卡驱动有问题，最直观的情况就是在声音方面，会出现没有声音或者声音波动卡顿不正常。声卡驱动有问题会出现什么情况：一、声音错误1、声卡驱动就是为声音服务的，所以最直观的问题就是声音问题。2、不管是电脑没有声音，还是声音卡顿、延迟、有噪音、音量音调不正常都可能与声卡驱动有关。3、所以当我们遇到类似问题的时候，可以重新安装或更新声卡驱动试试看。二、设备管理器感叹号1、如果声音没问题，大部分情况下说明声卡驱动都是正常的。2、但我

电脑d盘不见了如何恢复 Jan 07, 2024 am 10:09 AM

我们的电脑升级安装了win10操作系统或者是电脑自带的win10系统，在有些使用电脑的情况下有可能就遇到了出现电脑的d盘不见了找不到的情况。对于这种问题小编觉得可能是因为我们的系统内部出现了问题，可以尝试在运行中使用gepedit.msc代码来进行相关的操作。电脑d盘不见了如何恢复1、首先按下“win+r”打开运行，输入gpedit.msc，然后点确定。2.进入本地计算机策略依次展开“用户配置-管理模板-Windows组件-Windows资源管理器”3、找到右边的“隐藏我的电脑中的这些指定的驱动

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版

热门话题