JS 语法

作者: 盖被吹空调 | 来源:发表于2016-06-30 15:45 被阅读0次

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

CSS放置于head标签内,JS放置于</body>闭合标签之前

解释白屏和FOUC##

  • 白屏问题
    如果把样式放在底部,对于IE浏览器,在某些场景下(新窗口打开,刷新等)页面会出现白屏,而不是内容逐步展现
    如果使用 @import标签,即使 CSS 放入 link, 并且放在头部,也可能出现白屏
  • FOUC (无样式内容闪烁)
    如果把样式放在底部,对于IE浏览器,在某些场景下(点击链接,输入URL,使用书签进入等),会出现 FOUC 现象(逐步加载无样式的内容,等CSS加载后页面突然展现样式).对于 Firefox 会一直表现出 FOUC .
  • 将JS放在底部
    脚本会阻塞后面内容的呈现
    脚本会阻塞其后组件的下载
    对于图片和CSS, 在加载时会并发加载(如一个域名下同时加载两个文件). 但在加载 JavaScript 时,会禁用并发,并且阻止其他内容的下载. 所以把 JavaScript 放入页面顶部也会导致 白屏现象.

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

二者的作用都是实现加载异步

  • defer:脚本延迟到文档解析和显示后执行,有顺序
  • async:不保证顺序

简述网页的渲染机制##

  • 解析 HTML 标签, 构建 DOM 树
  • 解析 CSS 标签, 构建 CSSOM 树
  • 把 DOM 和 CSSOM 组合成 渲染树 (render tree)
  • 在渲染树的基础上进行布局, 计算每个节点的几何结构
  • 把每个节点绘制到屏幕上 (painting)


    render-tree-construction.png

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

数据类型.png

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

  • NaN含义是Not a Number,表示非数字,NaN和任何值都不相等,包括自己NaN == NaN; //false
  • undefined:只有一个值undefined,表示变量只被声明,没有被初始化,也就是有这个指针,但指针没有指向任何空间
  • null:只有一个值null,表示空指针,也就是不存在的东西

typeof和instanceof的作用和区别?##

  • typeof:判断一个变量的数据类型。包括:number,boolean,string,function,object和undefined(null的类型为object)
  • instanceof:判断一个变量是否是某个对象的实例,返回值的数据类型是Boolean(true/false)。

代码练习#

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

function isNumber(el){
    return typeof(el) === "number";
}
function isString(el){
    return typeof(el) === "string";
}
function isBoolean(el){
    return typeof(el) === "boolean";
}
function isFunction(el){
    return typeof(el) === "function";
}

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

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

console.log(1+1);  //2 数值
console.log("2"+"4"); //24 字符串
console.log(2+"4"); //24 2转化为字符串,最后得到字符串
console.log(+new Date()); //1467191938871
console.log(+"4"); //4 "4"转化为数值,最后结果为数值

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

var a = 1;
a+++a;//1+2=3

typeof a+2;//number2 (因为typeof优先级比+高,所以先有typeof a 的结果为"number",是个字符串,然后"number"+2,使得2先变成字符串,然后得到结果"number2")

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

var arr = [3,4,5]
for(var key in arr){
  console.log(arr[key]*arr[key]);
}
// 输出 9, 16, 25

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

var obj = {
  name: 'hunger',
  sex: 'male',
  age: 28
}
for(var key in obj){
  console.log(key+":"+obj[key]);
}
// 输出 name: hunger, sex: male, age:28

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

console.log(a);//undefined
var a = 1;
console.log(a);//1
console.log(b);//未声明变量b,报错

相关文章

  • JS基础和WebAPIs的关联性

    学习ECMAscript标准规定的基本语法掌握JS基础语法只学习JS基础做不了网页交互效果学习JS基础语法是为了后...

  • react-jsx

    jsx 是类似 js 模板语法 声明 jsx 使用 jsx jsx 语法 jsx 是 js 的语法扩展,在 jsx...

  • 4/07day28_js基础

    day28_js基础 回顾 JS基础语法 JS运算符 JS流程控制语句 条件语句 JS的条件语句和Java语法基本...

  • JSX语法

    在react中,在js文件里写html标签,我们把这种语法称为 jsx语法。 jsx语法与普通js语法的区别 普通...

  • Vue入门(1)

    一、 前置知识 Node.js已安装 HTML语法(MDN) CSS语法(w3school) JS语法(阮一峰)...

  • express+ejs实现最简模板

    //语法就是js。。。

  • jsx语法

    什么是jsx语法 html写在js中而且不用加任何引号. 遇见<>按html语法解析,遇见{ }按js语法解析。 ...

  • react入门(一)

    react.js是核心库,react-dom.js提供与DOM相关功能,Browser是将JSX语法转化为js语法...

  • -----Web APIs-----

    JS学习ECMAScript基础语法是为后面做铺垫,Web APIs才是JS的应用,大量使用JS基础语法做交互效果...

  • React 知识点小结(一):基础

    React:facebook公司的框架。2013年开源的项目。 JSX语法:js语法的扩展。JS + XHTML的...

网友评论

      本文标题:JS 语法

      本文链接:https://www.haomeiwen.com/subject/byntjttx.html