JS 语法

作者: 饥人谷_阿靖 | 来源:发表于2016-12-21 20:37 被阅读8次
预热:

** javascript引入方式:**

  • a、在head或者body中,引入script标签
    <script>
    alert(1);
    </script>
  • b、引入js文件,js文件里写js代码
    <script type="text/javascript" src="program.js"></script>
    ** 标签的位置,放在body内的最下位置。区别css位置 *

** 基本调试:**
a、审查元素,打开控制台;
b、alert();
c、console.log();
** 数据类型:**

简单类型:
   数字 number
   字符串 string
   布尔 boolean
   undefined
   null
复杂类型:对象
   对象又可以分成三个子类型:
   侠义的对象(object)
   数组(array)
   函数(function)
  • typeof运算符:
    javascript有三种方法,可以确定一个值到底是什么类型。
    typeof 运算符
    返回一个值得数据类型。(利用这一点,可以用来检查一个没有声明的变量,而不报错。)
    instanceof 运算符
    判断变量是否为给定的引用类型。
    object.prototype.toString()方法

**** 1、CSS和JS在网页中的放置顺序是怎样的? ****
css放在head标签中;
js放在body标签的尾部,区别于css位置。

**** 2、解释白屏和FOUC ****

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

FOUC (Flash of Unstyled Content) 无样式内容闪烁

如果把样式放在底部,对于IE浏览器,在某些场景下(点击链接,输入URL,使用书签进入等),会出现 FOUC 现象(逐步加载无样式的内容,等CSS加载后页面突然展现样式).对于 Firefox 会一直表现出 FOUC .
将JS放在底部
脚本会阻塞后面内容的呈现
脚本会阻塞其后组件的下载

 对于图片和CSS, 在加载时会并发加载(如一个域名下同时加载两个文件). 但在加载 JavaScript 时,会禁用并发,并且阻止其他内容的下载. 所以把 JavaScript 放入页面顶部也会导致 白屏 现象.

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

一般而言,浏览器在加载页面的时候,碰见script脚本会优先加载脚本,当脚本加载完毕后才会继续加载其他内容,async和defer就是为了解决此类问题的。
async:延迟加载,在加载脚本时会并行加载和渲染后续文档元素,但不会保证顺序。
defer:异步加载,在加载脚本时会并行加载和渲染后续文档元素,但会在所有元素解析完成之后,DOMContentLoaded事件触发之前才会执行脚本。

**** 4、简述网页的渲染机制 ****

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

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

  • 数据类型:
    简单类型
    数字 number
    字符串 string
    布尔 boolean
    undefined
    null
  • 复杂类型:对象
    对象又可以分成三个子类型:
    侠义的对象(object)
    数组(array)
    函数(function)

**** 6、NaN、undefined、null分别代表什么? ****
ull表示空值,即该处的值现在为空。典型用法是:

作为函数的参数,表示该函数的参数是一个没有任何内容的对象。
作为对象原型链的终点。

undefined表示不存在值,就是此处目前不存在任何值。典型用法是:

变量被声明了,但没有赋值时,就等于undefined。
调用函数时,应该提供的参数没有提供,该参数等于undefined。
对象没有赋值的属性,该属性的值为undefined。
函数没有返回值时,默认返回undefined。

NaN:表示非数字。NaN和任何值都不相等,包括自己。

NaN == NaN; //false

**** 7、typeof和instanceof的作用和区别? ****

  • js有三种方法,可以确定一个值是什么类型。
    1.typeof 运算符
    2.instanceof 运算符
    3.object.prototype.toString()方法
    typeof:返回一个值的数据类型instanceof:判断变量是否为 给定的引用类型比如:typeof对数组和对象的显示结果都是object,怎么区分呢?instanceof运算符可以做到
    var o = {};var a = [];o instanceof Array //falsea instanceof Array //true

8、以下代码的输出结果是?

console.log(2+4);  //6 数字类型相加
console.log("2"+"4");  //"24" 字符串拼接
console.log(2+"4");  //"24" 任何与字符串相加都会变成字符串
console.log(2+new Date());  //"2Mon Jan 20 2014 17:15:01 GMT+0800   (China Standard Time)"  对象使用valueof方法转换为数字 
//  在参数有对象的情况下会调用其valueOf或toString
console.log(+"4");  //4 转换为整数
//  在只有一个数字参数的时候返回其正数值

学习JavaScript你必须掌握的8大知识点!

55个必备技巧带你玩转javascript

javascript操作样式

javascript中的checked

javascript中的form

javascript对于不同浏览器的兼容性

javascript使用小技巧

javascript常用代码大全 1
javascript常用代码大全 2
javascript常用代码大全 3
javascript常用代码大全 4 函数库

相关文章

  • 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/iqoqvttx.html