By yk

更新日期:

文章目录
  1. 1. HTML和CSS
    1. 1.1. 对WEB标准以及W3C的理解
    2. 1.2. XHTML和HTML的区别
    3. 1.3. 严格模式与混杂模式
    4. 1.4. 行内元素与块级元素
    5. 1.5. CSS盒模型
    6. 1.6. CSS引入方式及link和@import区别
    7. 1.7. CSS选择器及优先级
    8. 1.8. 前端页面结构
    9. 1.9. css的基本语句构成
    10. 1.10. 常见浏览器及内核
    11. 1.11. 几种IE6的BUG及解决方法
    12. 1.12. title与alt的区别
    13. 1.13. css中的reset
    14. 1.14. CSS sprites
    15. 1.15. 对网站优化的解决方案
    16. 1.16. HTML语义化
    17. 1.17. 清除浮动
  2. 2. Javascript
    1. 2.1. Javascript数据类型
    2. 2.2. 显式类型转换与隐式类型转换
    3. 2.3. split(),join(),reverse()函数
    4. 2.4. 数组方法pop,push,unshift,shift
    5. 2.5. 事件绑定和普通事件
    6. 2.6. IE和DOM事件流的区别
    7. 2.7. IE和标准下兼容性的写法举例
    8. 2.8. get和post的区别
    9. 2.9. call和apply
    10. 2.10. 事件委托
    11. 2.11. 阻止事件冒泡和默认事件
    12. 2.12. JSONP原理
    13. 2.13. js本地对象，内置对象和宿主对象
    14. 2.14. onload和document.ready
    15. 2.15. “==”和”===”
    16. 2.16. Javascript同源策略

本文讲述了部分前端面试经常遇到的问题。

HTML和CSS

对WEB标准以及W3C的理解

1.写代码的时候注意

  • 标签闭合
  • 标签小写
  • 不能随意嵌套

2.提高搜索引擎搜到几率

mate中的name变量(其中keywords和description尤其重要)

1
2
3
4
5
6
7
8
9
10
11
12
13
Meta name="Keywords" Lang="EN" Content="vacation,greece,sunshine"
Meta name="Description" Content="你网页的简述"
Meta name="Robots" Content="All|None|Index|Noindex|Follow|Nofollow" 
  [all：文件将被检索，且页面上的链接可以被查询； 
  none：文件将不被检索，且页面上的链接不可以被查询；(和 "noindex, no follow" 起相同作用) 
  index：文件将被检索；（让robot/spider登录） 
  follow：页面上的链接可以被查询； 
  noindex：文件将不被检索，但页面上的链接可以被查询；(不让robot/spider登录) 
  nofollow：文件将不被检索，页面上的链接可以被查询。(不让robot/spider顺着此页的连接往下探找)]  
Meta name="Author" Content="张三，abc@sina.com"
Meta name="Copyright" Content="本页版权归Zerospace所有。All Rights Reserved"
Meta name="Generator" Content="PCDATA|FrontPage|"
META name="revisit-after" CONTENT="7 days"

3.提高网页加载速度

  • 把js和css写到外部文档、实现结构行为表现的分离。
  • 去掉不必要的空格和注释等。
  • 尽量不使用table布局，尽量使用不嵌套的table布局。
  • 指定图像和table的大小。
  • 尽量不要使用图像来代替文本(例如在导航栏)。
  • 延迟js脚本加载，将脚本放在页面底部。
  • 尽量使用png格式的图像.

XHTML和HTML的区别

HTML是一种基本的WEB网页设计语言，XHTML是一个基于XML的置标语言。

最主要的不同：

  • XHTML元素必须被正确地嵌套。
    标签由外到内，一层层包覆着，所以假设你先写div后写h1，结尾就要先写h1后写div。只要记住一个原则“先进后出”，先弹出的标签要后结尾。
  • XHTML元素必须被关闭。
    当出现一个标签时，必须要有对应的结束标签，缺一不可，就像在任何程序语言中的括号一样。对于空标签，也必须使用结束标签，或者其开始标签必须使用”/>”结尾。
  • 元素必须用小写字母。
  • XHTML文档必须拥有根元素。
    所有的 XHTML 元素必须被嵌套于<html> 根元素中。其余所有的元素均可有子元素。子元素必须是成对的且被嵌套在其父元素之中。

严格模式与混杂模式

1.Doctype的作用

<!DOCTYPE>声明叫做文件类型定义（DTD），声明的作用为了告诉浏览器该文件的类型。让浏览器解析器知道应该用哪个规范来解析文档。<!DOCTYPE>声明必须在HTML文档的第一行，这并不是一个HTML标签。

2.严格模式与混杂模式的来源

当年Netscape4（网景公司早期的浏览器）和IE4（微软公司早期的浏览器）实现CSS机制时，并没有遵循W3C提出的标准。Netscape4 提供了糟糕的支持，而IE4 虽然接近标准，但依旧未能完全正确的支持标准。尽管IE 5 修复了IE4 许多的问题，但是依然延续CSS实现中的其它故障（主要是盒模型问题）。

为了保障自己的网站在各个浏览器上显示正确，网页开发者们不得不依据各个浏览器自身的规范来使用css，因此大部分网站的css实现并不符合W3C规范的标准。

然而随着标准一致性越来越重要，浏览器开发商不得不面临一个艰难的抉择：逐渐遵循W3C的标准是前进的方向。但是改变现有的 css，完全去遵循标准，会使许多旧网站或多或少受到破坏，如果浏览器突然以正确的方式解析现存的css，陈旧的网站的显示必然会受到影响。所以，所有的浏览器都需要提供两种模式：混杂模式服务于旧式规则，而严格模式服务于标准规则。

3.概念

严格模式：又称标准模式，是指浏览器按照 W3C 标准解析代码。

混杂模式：又称怪异模式或兼容模式，是指浏览器用自己的方式解析代码。

4.区分

浏览器解析时到底使用严格模式还是混杂模式，与网页中的 DTD 直接相关。

  • 如果文档包含严格的 DOCTYPE ，那么它一般以严格模式呈现。（严格 DTD ——严格模式）
  • 包含过渡 DTD 和 URI 的 DOCTYPE ，也以严格模式呈现，但有过渡 DTD 而没有 URI （统一资源标识符，就是声明最后的地址）会导致页面以混杂模式呈现。（有 URI 的过渡 DTD ——严格模式；没有 URI 的过渡 DTD ——混杂模式）
  • DOCTYPE 不存在或形式不正确会导致文档以混杂模式呈现。（DTD不存在或者格式不正确——混杂模式）
  • HTML5 没有 DTD ，因此也就没有严格模式与混杂模式的区别，HTML5 有相对宽松的语法，实现时，已经尽可能大的实现了向后兼容。（ HTML5 没有严格和混杂之分）

严格模式与混杂模式存在的意义与其来源密切相关，如果说只存在严格模式，那么许多旧网站必然受到影响，如果只存在混杂模式，那么会回到当时浏览器大战时的混乱，每个浏览器都有自己的解析模式。

5.两种模式不同点

  • 盒模型的高宽包含内边距padding和边框border
    在W3C标准中，如果设置一个元素的宽度和高度，指的是元素内容的宽度和高度，而在IE5.5及以下的浏览器及其他版本的Quirks模式下，IE的宽度和高度还包含了padding和border。
  • 可以设置行内元素的高宽
    在严格模式下，给span等行内元素设置wdith和height都不会生效，而在quirks模式下，则会生效。
  • 可设置百分比的高度
    在严格模式下，一个元素的高度是由其包含的内容来决定的，如果父元素没有设置高度，子元素设置一个百分比的高度是无效的。
  • 用margin:0 auto设置水平居中在IE下会失效
    使用margin:0 auto在严格模式下可以使元素水平居中，但在quirks模式下却会失效,quirk模式下的解决办法，用text-align属性:body{text-align:center};#content{text-align:left}
  • quirk模式下设置图片的padding会失效
  • quirk模式下Table中的字体属性不能继承上层的设置
  • quirk模式下white-space:pre会失效

6.常用的具体声明

  • HTML5(一种)：

    1
    <!DOCTYPE html>

  • HTML 4.01(三种)
    严格模式包含所有 HTML 元素和属性，但不包括展示性的和弃用的元素（比如 font），不允许框架集（Framesets）；过渡模式包含所有 HTML 元素和属性，包括展示性的和弃用的元素（比如 font），不允许框架集（Framesets）；框架模式等同于过渡模式，但允许框架集内容。

    1
    2
    3
    4
    5
    6
    HTML 4.01 Strict ：
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    HTML 4.01 Transitional ：
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">
    HTML 4.01 Frameset ：
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"  "http://www.w3.org/TR/html4/frameset.dtd">

  • XHTML 1.0(四种)
    前三种模式同上，XHML 必须以格式正确的 XML 来编写标记。

    1
    2
    3
    4
    5
    6
    7
    8
    XHTML 1.0 Strict ：
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    XHTML 1.0 Transitional ：
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    XHTML 1.0 Frameset： 
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
    XHTML 1.1 的 DTD 等同于 XHTML 1.0 Strict，但允许添加模型。
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

行内元素与块级元素

1.区别

  • 默认情况下，多个行内元素会在同一行，水平排列。块级元素每个元素独占一行，多个块级元素垂直方向排列。
  • 块级元素可以包含行内元素和块级元素。行内元素不能包含块级元素。
  • 行内元素与块级元素属性的不同，主要是盒模型属性上。行内元素设置width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效

2.示例

行内元素：<span> <select> <a> <img> <label> <textarea>等。

块级元素：<div> <h1> <li> <p> <table> <fieldset> <caption>等。

3.相互转换

行内元素转块级元素：定义该元素的css样式display:block;
块级元素转行内元素：定义该元素的css样式display:inline;

CSS盒模型

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

marginborderpaddingcontent

1.说明

  • Margin(外边距) - 盒子与其他元素之间的边距。
  • Border(边框) - 盒子的边框宽度。
  • Padding(内边距) - 盒子内边距，即边框与文字的间距。
  • Content(内容) - 盒子的内容，显示文本和图像。

2.元素的宽度和高度

当指定一个CSS元素的宽度和高度属性时，只是设置了内容区域的宽度和高度。

最终元素的总宽度计算公式是这样的：

总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距

元素的总高度最终计算公式是这样的：

总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

3.浏览器的兼容性问题

一旦为页面设置了恰当的 DTD，大多数浏览器都会按照上面的图示来呈现内容。然而 IE 5 和 6 的呈现却是不正确的。根据 W3C 的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的。不幸的是，IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。

虽然有方法解决这个问题。但是目前最好的解决方案是回避这个问题。也就是，不要给元素添加具有指定宽度的内边距，而是尝试将内边距或外边距添加到元素的父元素和子元素。

IE8 及更早IE版本不支持 填充的宽度和边框的宽度属性设。

解决IE8及更早版本不兼容问题可以在HTML页面声明 <!DOCTYPE html>即可。

CSS引入方式及link和@import区别

引入css共有四种方式：内联 内嵌 外链 导入。

1.内联

内联方式是指直接在标签元素的style属性中添加CSS样式。

示例：

1
<div style="font-size: 20px"></div>

这通常是个很不好的书写方式，它只能改变当前标签的样式，如果希望多个div 拥有相同的样式，你不得不重复地为每个div添加相同的样式，如果想要修改一种样式，又不得不修改所有的 style 中的代码。很显然，内联方式引入 CSS 代码会导致 HTML 代码变得冗长，且使得网页难以维护。

2.嵌入

嵌入方式是指在页面head中的style标签下书写CSS代码。

示例：

1
2
3
4
5
6
7
<head>
	<style>
		.content {
			background: red;
		}
	</style>
</head>

嵌入方式的 CSS 只对当前的网页有效。因为 CSS 代码是在 HTML 文件中，所以会使得代码比较集中，当我们写模板网页时这通常比较有利。因为查看模板代码的人可以一目了然地查看 HTML 结构和 CSS 样式。因为嵌入的 CSS 只对当前页面有效，所以当多个页面需要引入相同的 CSS 代码时，这样写会导致代码冗余，也不利于维护。

3.链接

链接方式是指在页面head中引入外部的CSS文件。

示例：

1
2
3
<head>
	<link rel="stylesheet" href="style.css" />
</head>

这是最常见的也是最推荐的引入 CSS 的方式。使用这种方式，所有的 CSS 代码只存在于单独的 CSS 文件中，所以具有良好的可维护性。并且所有的 CSS 代码只存在于 CSS 文件中，CSS 文件会在第一次加载时引入，以后切换页面时只需加载 HTML 文件即可。

4.导入

导入方式指的是使用 CSS 规则引入外部 CSS 文件。

示例：

1
2
3
<style>
	@import url(style.css);
</style>

5.link和@import的区别

  • link是XHTML标签，除了加载CSS外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS。

  • link引用CSS时，在页面载入时同时加载；@import需要页面网页完全载入以后加载。

  • link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。

  • link支持使用Javascript控制DOM去改变样式；而@import不支持。

CSS选择器及优先级

1.CSS选择器
CSS选择器基本可以分为通配选择器，标签选择器，类选择器，ID选择器，简单属性选择，具体属性选择，根据部分属性值选择，特定属性选择，从结构上来分还有后代选择器，子元素选择器，相邻兄弟选择器以及伪类。

  • 包含选择符（又称后代选择符） E1 E2{}

  • 子对象选择符 E1>E2{}

  • ID选择符 #ID{}

  • 类选择符 E.className{}

  • 选择符分组 E1,E2,E3{}

2.CSS属性继承

CSS属性继承即父元素定义的CSS属性，子元素也默认使用了该属性。

可以继承的有 font-size font-family color等

不可以继承的有 border padding margin background-color width height等

3.CSS优先级

  • 相同权值情况下，CSS样式的优先级总结来说，就是——就近原则（离被设置元素越近优先级别越高）：

优先级为：!important > id > class > tag

  • 权值不同时，浏览器是根据权值来判断使用哪种css样式的，哪种样式权值高就使用哪种样式。

标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。

  • !important的优先级比内联样式优先级高。

前端页面结构

1.结构层(HTML)

对网页内容做出了描述。

2.表现层(CSS)

对网页内容的样式进行渲染。

3.行为层(Javascript)

对网页的各种交互行为进行定义。

css的基本语句构成

1
2
3
4
自定义样式名称 {
	属性1:值1;
	属性2:值2;
}

常见浏览器及内核

  • IE浏览器(Ie内核、Trident内核)
  • Firefox浏览器(Gecko)
  • 谷歌浏览器(webkit)
  • opear浏览器(Presto)
  • Safari浏览器(webkit)

几种IE6的BUG及解决方法

  • IE6怪异解析之padding与border算入宽高
    原因：未加文档声明造成非盒模型解析
    解决方法：加入文档声明<!doctype html>

  • IE6在块元素、左右浮动、设定marin时造成margin双倍(双边距)
    解决方法：display:inline

  • 内部盒模型超出父级时，父级被撑大
    解决方法：父标签使用overflow:hidden

  • line-height默认行高bug
    解决方法：line-height设值

  • 行标签之间会有一小段空白
    解决方法：float或结构并排(可读性差，不建议)

  • 标签高度无法小于19px
    解决方法：overflow: hidden;

  • 左浮元素margin-bottom失效
    解决方法：
    1.显示设置高度
    2.父标签设置_padding-bottom代替子标签的margin-bottom
    3.再放个标签让父标签浮动，子标签margin-bottom，即(margin-bottom与float不同时作用于一个标签)

  • img于块元素中，底边多出空白
    解决方法：父级设置overflow: hidden; 或 img { display: block; } 或 _margin: -5px;

  • li之间会有间距
    解决方法：float: left;

  • 块元素中有文字及右浮动的行元素，行元素换行
    解决方法：将行元素置于块元素内的文字前

  • position下的left，bottom错位
    解决方法：为父级(relative层)设置宽高或添加*zoom:1

  • 子级中有设置position，则父级overflow失效
    解决方法：为父级设置position:relative

title与alt的区别

Alt：当图片不显示时，显示alt中的内容。

Title：为元素提供信息，鼠标悬停在该元素时，等待1s左右，显示title中的内容。

css中的reset

1.常用的CSS reset

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
html, body, div, span, applet, object, iframe, h1, h2, h3, 
h4, h5, h6, p, blockquote, pre, a, abbr, acronym, 
address, big, cite, code, del, dfn, em, font, img, ins, 
kbd, q, s, samp, small, strike, strong, sub, sup, tt, 
var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td { 
  margin: 0; 
  padding: 0; 
  border: 0; 
  outline: 0; 
  font-weight: inherit; 
  font-style: inherit; 
  font-size: 100%; 
  font-family: inherit; 
  vertical-align: baseline; 
} 
:focus {
  outline: 0;
} 
a, a:link, a:visited, a:hover, a:active{
  text-decoration:none
} 
table {
  border-collapse: separate;
  border-spacing: 0;
} 
th, td {
  text-align: left;
  font-weight: normal;
} 
img, iframe {
  border: none;
  text-decoration:none;
} 
ol, ul {
  list-style: none;
} 
input, textarea, select, button {
  font-size: 100%;
  font-family: inherit;
} 
select {
  margin: inherit;
} 
hr {
  margin: 0;
  padding: 0;
  border: 0;
  color: #000;
  background-color: #000;
  height: 1px;
}

2.CSS reset作用

在 HTML标签在浏览器里有默认的样式，不同浏览器的默认样式之间也会有差别。在切换页面的时候，浏览器的默认样式往往会给我们带来麻烦，影响开发效率。所以解决的方法就是一开始就将浏览器的默认样式全部去掉，更准确说就是通过重新定义标签样式。“覆盖”浏览器的CSS默认属性。最简单的做法就是把浏览器提供的默认样式覆盖掉！这就是CSS reset。

CSS sprites

1.CSS Sprites简介

客户端每显示一张图片都会向服务器发送请求，而图片越多请求次数越多，造成延迟的可能性也就越大，给服务器造成的压力也很大，所以通过CSS Sprites技术将多张小图片整合为一张图片，减少对服务器的压力。

2.CSS Sprites原理

CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字精确的定位出背景图片的位置。

3.优缺点

优点

  • 利用CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；

  • CSS Sprites能减少图片的字节，曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。

  • 解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名，从而提高了网页的制作效率。

  • 更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。维护起来更加方便s。

缺点

  • 在图片合并的时候，要把多张图片有序的合理的合并成一张图片，还要留好足够的空间，防止板块内出现不必要的背景；这些还好，最痛苦的是在宽屏，高分辨率的屏幕下的自适应页面，你的图片如果不够宽，很容易出现背景断裂；

  • CSS Sprites在开发的时候比较麻烦，要通过photoshop或其他工具测量计算每一个背景单元的精确位置，非常繁琐。

  • CSS Sprites在维护的时候比较麻烦，如果页面背景有少许改动，一般就要改这张合并的图片，无需改的地方最好不要动，这样避免改动更多的css，如果在原来的地方放不下，又只能往下加图片，这样图片的字节就增加了，还要改动css。

对网站优化的解决方案

  • 尽可能减少http请求次数，将css, js, 图片各自合并
  • 使用CDN托管，降低通信距离
  • 添加Expire/Cache-Control头，提供缓存
  • 启用Gzip压缩文件
  • 将css放在页面最上面
  • 将script放在页面最下面
  • 避免在css中使用表达式
  • 将css, js都放在外部文件中
  • 减少DNS查询
  • 最小化css, js，减小文件体积
  • 避免重定向
  • 移除重复脚本
  • 配置实体标签ETag
  • 使用AJAX缓存，让网站内容分批加载，局部更新

HTML语义化

1.什么是HTML语义化

根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。

2.为什么要语义化？

  • 为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构:为了裸奔时好看；
  • 用户体验：例如title、alt用于解释名词或解释图片信息、label标签的活用；
  • 有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；
  • 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；
  • 便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。

3.写HTML代码时应注意什么

  • 尽可能少的使用无语义的标签div和span；
  • 在语义不明显时，既可以使用div或者p时，尽量用p, 因为p在默认情况下有上下间距，对兼容特殊终端有利；
  • 不要使用纯样式标签，如：b、font、u等，改用css设置。
  • 需要强调的文本，可以包含在strong或者em标签中（浏览器预设样式，能用CSS指定就不用他们），strong默认样式是加粗（不要用b），em是斜体（不用i）；
  • 使用表格时，标题要用caption，表头用thead，主体部分用tbody包围，尾部用tfoot包围。表头和一般单元格要区分开，表头用th，单元格用td；
  • 表单域要用fieldset标签包起来，并用legend标签说明表单的用途；
  • 每个input标签对应的说明文本都需要使用label标签，并且通过为input设置id属性，在lable标签中设置for=someld来让说明文本和相对应的input关联起来。

清除浮动

浮动会使当前标签产生向上浮的效果，同时会影响到前后标签、父级标签的位置及 width height 属性。
而且同样的代码，在各种浏览器中显示效果也有可能不相同，这样让清除浮动更难了。

  • 父级div定义height
  • 结尾处加空div标签clear:both
  • 父级div定义伪类:after和zoom
  • 父级div定义overflow:hidden
  • 父级div定义overflow:auto
  • 父级div也一起浮动
  • 父级div定义display:table
  • 结尾处加br标签clear:both

Javascript

Javascript数据类型

1.Javascript共有6种数据类型

基本数据类型：Boolean、Number和String。

复杂数据类型：object。

特殊数据类型：Undefined、Null。

2.typeof函数可以返回6种数据类型

string、number、object、boolean、undefined、function。

可以点击链接查看详情

显式类型转换与隐式类型转换

Javascript属于弱类型语言，声明变量不需要指定类型，对变量赋值也不需要类型检查，但是在有的情况下需要特别转换变量的类型。

1.显式类型转换

如下函数属于显式类型转换函数：

  • toString() 转换为字符串
  • parseInt() 转换为数字
  • Number()
  • Boolean()
  • 等

2.隐式类型转换

如下函数属于显式类型转换函数：

  • ‘+’加法运算符
  • ==

有的人可能看不太懂为什么 “+” 和 “==” 也是隐式类型转换，我举一个例子：

1
2
3
4
var m = 5 + true;
console.log(m);	//6
console.log(1 == true);	// true

也就是说，”+”运算符将true转换成了number类型的1，所以可以和5相加，得到结果6。而”==”运算符把true转换成了1，然后来比较，即: 1 == 1 ,所以为true。

split(),join(),reverse()函数

1
2
3
4
5
6
7
8
9
10
var a = new Array();
a[0] = "HTML";
a[1] = "CSS";
a[2] = "JavaScript";
console.log(a);	// ["HTML", "CSS", "JavaScript"]
console.log(a.join());	// HTML,CSS,JavaScript
console.log(a.reverse());	// ["JavaScript", "CSS", "HTML"]
var b = 'hello JavaScript';
console.log(b.split(""));	// ["h", "e", "l", "l", "o", " ", "J", "a", "v", "a", "S", "c", "r", "i", "p", "t"]
console.log(b.split(" "));	// ["hello", "JavaScript"]

由实例可以看出：

  • split函数用来将字符串分割为数组
  • join函数可以将数组中的所有元素拼接为一个字符串
  • reverse函数用来将原数组中元素的顺序颠倒。

数组方法pop,push,unshift,shift

  • push()方法

用于向数组末尾添加元素,并返回新数组的长度

1
2
3
4
var a = ['h','e','l','l'];
var m = a.push('o');
console.log(m);	// 5
console.log(a);	// ["h", "e", "l", "l", "o"]
  • pop()方法

删除数组最后一个元素,并返回删除的元素。

1
2
3
4
var a = ['h','e','l','l','o'];
var m = a.pop();
console.log(m);	// o
console.log(a);	// ["h", "e", "l", "l"]
  • unshift()方法

用于向数组头部添加元素，并返回新数组的长度。

1
2
3
4
var a = ['e','l','l','o'];
var m = a.unshift('h');
console.log(m);	// 5
console.log(a);	// ["h", "e", "l", "l", "o"]
  • shift()方法

删除数组中的第一个元素，并返回删除的第一个元素的值。

1
2
3
4
var a = ['h','e','l','l','o'];
var m = a.shift();
console.log(m);	// h
console.log(a);	// ["e", "l", "l", "o"]

事件绑定和普通事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<button id="btn">点击按钮</button>
	<script type="text/javascript">
		var btn = document.getElementById("btn");
		btn.onclick = function() {
			console.log("普通事件1");
		}
		btn.onclick = function() {
			console.log("普通事件2");
		}
		btn.addEventListener("click",function() {
			console.log("绑定事件1");
		},false);
		btn.addEventListener("click",function() {
			console.log("绑定事件2");
		},false);
	</script>
</body>
</html>

上述代码输出为：

1
2
3
普通2
绑定1
绑定2

由此可以得出结论：

普通事件中的onclick只支持单个事件，之前的事件会被之后的onclick事件覆盖，而事件绑定中的addEventListener可以添加多个事件，之前的事件不会被覆盖。

IE和DOM事件流的区别

1.参数的差别

attachEvent()的第一个参数比addEventListener()的事件名多一个”on”，且没有第三个参数，因为IE事件模型只支持冒泡事件流;

2.事件处理函数作用域的区别

IE中事件处理程序处于全局作用域，其内的this会指向window;

而用DOM（0或2）级事件的事件处理程序的作用域是元素作用域，其内的this指向其所属的元素.

例:
document.addEventListener(“click”, function(){
if(this == document){
alert(“此时this指向document”);
}
}, false);

3.事件对象event的属性方法的差别

IE DOM
cancelBubble = true stopPropagation() //停止冒泡
returnValue = false preventDefault() //阻止元素默认事件
srcEelement target //事件目标

IE和标准下兼容性的写法举例

var ev = ev || window.event
document.documentElement.clientWidth || document.body.clientWidth
var target = ev.srcElement||ev.target

get和post的区别

  • GET请求的数据会附在URL之后(就是把数据放置在HTTP协议头中)，以?分割URL和传输数据，参数之间以&相连。POST把提交的数据则放置在是HTTP包的Request body包体中。

  • GET方式提交的数据最多只能是1024字节，理论上POST没有限制，可传较大量的数据，IIS4中最大为80KB，IIS5中为100KB。

  • 在ASP中，服务端获取GET请求参数用Request.QueryString，获取POST请求参数用Request.Form。

  • POST的安全性要比GET的安全性高。

  • Get是向服务器发送取数据的一种请求，而Post是向服务器提交数据的一种请求。

call和apply

call和apply方法都是用来调用一个对象的一个方法，以另一个对象来替换当前对象。

唯一区别就是call方法的第二个参数及之后的参数可以是任意类型，而apply的第二个参数必须是数组形式。

具体联系和区别，点击链接查看

事件委托

事件委托是利用事件的冒泡原理来实现的，何为事件冒泡呢？就是事件从最深的节点开始，然后逐步向上传播事件，举个例子：页面上有这么一个节点树，div>ul>li>a;比如给最里面的a加一个click点击事件，那么这个事件就会一层一层的往外执行，执行顺序a>li>ul>div，有这样一个机制，那么我们给最外面的div加点击事件，那么里面的ul，li，a做点击事件的时候，都会冒泡到最外层的div上，所以都会触发，这就是事件委托，委托它们父级代为执行事件。

阻止事件冒泡和默认事件

1.阻止事件冒泡,使成为捕获型事件触发机制

1
2
3
4
5
6
7
8
9
function stopBubble(e) { 
	//如果提供了事件对象，则这是一个非IE浏览器
	if ( e && e.stopPropagation)
		//因此它支持W3C的stopPropagation()方法
		e.stopPropagation();
	else
		//否则，我们需要使用IE的方式来取消事件冒泡
		window.event.cancelBubble = true;
}

2.停止默认事件默认行为

1
2
3
4
5
6
7
8
9
10
//阻止浏览器的默认行为 
function stopDefault( e ) { 
	//阻止默认浏览器动作(W3C)
	if ( e && e.preventDefault)
		e.preventDefault();
		//IE中阻止函数器默认动作的方式
	else
		window.event.returnValue = false;
	return false;
}

举例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>Document</title>
	<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			$('div.c1').click(function(e){alert('单击了div C1');});
			$('div.c2').click(function(e){alert('单击了div C2');stopBubble(e);});
			$(document).click(function(e){alert('单击了document');});
			$('#txt1').val('123');
			$('#txt1').click(function(e){stopBubble(e);});
			$('#txt1').keydown(function(e){stopDefault(e);alert('按下了键值'+e.keyCode); });
		})
		function stopBubble(e) {
			//如果提供了事件对象，则这是一个非IE浏览器
			if ( e && e.stopPropagation )
				//因此它支持W3C的stopPropagation()方法
				e.stopPropagation();
			else
				//否则，我们需要使用IE的方式来取消事件冒泡
				window.event.cancelBubble = true;
		}
		//阻止浏览器的默认行为
		function stopDefault( e ) {
			//阻止默认浏览器动作(W3C)
			if ( e && e.preventDefault )
				e.preventDefault();
				//IE中阻止函数器默认动作的方式
			else
				window.event.returnValue = false;
			return false;
		}
	</script>
</head>
<body>
	<div class="c1">测试的文字,这里是样式C1,单击以冒泡的形式触发事件.</div><hr/>
	<div class="c2">测试的文字,这里是样式C2,单击以捕获的形式触发事件.</div><hr/>
	<div><input id="txt1" name="Text1" type="text" /></div><hr/>
</body>
</html>

JSONP原理

利用<script>标签没有跨域限制的“漏洞”,来达到与第三方通讯的目的。当需要通讯时，本站脚本创建一个<script>元素，地址指向第三方的API网址，例如：<script src = "http：//www.example.net/api?param1=1&param2=2"></script>,并提供一个回调函数来接收数据(函数名可约定，或通过地址参数传递)。第三方产生的响应为json数据的包装(故称之为jsonp,即json padding)，形如：callback({“name”:”hax”,”gender”:”Male”}).这样浏览器会调用callback函数，并传递解析后json对象作为参数。本站脚本可在callback函数里处理所传入的数据。

js本地对象，内置对象和宿主对象

宿主环境：一般宿主环境由外壳程序创建与维护，只要能提供js引擎执行的环境都可称之为外壳程序。如：web浏览器，一些桌面应用系统等。即由web浏览器或是这些桌面应用系统早就的环境即宿主环境。

1.本地对象：独立于宿主环境的 ECMAScript 实现提供的对象。

“本地对象”包括：

Object、Function、Array、String、Boolean、Number、Date、RegExp、Error、EvalError、RangeError、ReferenceError、SyntaxError、TypeError、URIError

本地对象是ECMA-2定义的类（引用类型）。

2.内置对象：由ECMAScript实现提供的，独立与宿主环境的所有对象，在ECMAScript程序开始执行时出现。

Global 和 Math。

内置对象其实也是本地对象。

3.宿主对象

由ECMAScript实现的宿主环境提供的对象，可以理解为：浏览器提供的对象。所有的BOM和DOM都是宿主对象。

onload和document.ready

window.onload方法必须等到页面内包括图片的所有元素加载完毕后才能执行。

$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。

也就是说，先执行ready方法，再执行onload方法。

“==”和”===”

“===”叫做严格运算符，”==”叫做相等运算符。

严格运算符的运算规则如下:

  • 不同类型值如果两个值的类型不同，直接返回false。
  • 同一类的原始类型值同一类型的原始类型的值（数值、字符串、布尔值）比较时，值相同就返回true，值不同就返回false。
  • 同一类的复合类型值两个复合类型（对象、数组、函数）的数据比较时，不是比较它们的值是否相等，而是比较它们是否指向同一个对象。
  • undefined和nullundefined 和 null 与自身严格相等。
1
2
console.log(null === null);	//true
console.log(undefined === undefined);	//true

相等运算符在比较相同类型的数据时，与严格相等运算符完全一样。

在比较不同类型的数据时，相等运算符会先将数据进行类型转换，然后再用严格相等运算符比较。

类型转换规则如下：

  • 原始类型的值原始类型的数据会转换成数值类型再进行比较。字符串和布尔值都会转换成数值，所以题主的问题中会有第二个string输出。
  • 对象与原始类型值比较对象（这里指广义的对象，包括数值和函数）与原始类型的值比较时，对象转化成原始类型的值，再进行比较。
  • undefined和nullundefined和null与其他类型的值比较时，结果都为false，它们互相比较时结果为true。
  • 相等运算符的缺点相等运算符隐藏的类型转换，会带来一些违反直觉的结果。
1
2
3
4
5
6
7
8
9
console.log('' == '0');	// false
console.log(0 == '');	// true
console.log(0 == '0');	// true
console.log(false == 'false');	// false
console.log(false == '0');	// true
console.log(false == undefined);	// false
console.log(false == null);	// false
console.log(null == undefined);	// true
console.log(' \t\r\n ' == 0);	// true

这就是为什么建议尽量不要使用相等运算符。至于使用相等运算符会不会对后续代码造成意外影响，答案是有可能会。

1
2
3
4
5
6
7
8
9
10
11
12
var a = undefined;
if(!a){
	console.log("1"); //1
}
var b = undefined;
if(b == null){
	console.log("2"); //2
}
var c = undefined;
if(c === null){
	console.log("3"); //无输出
}

也就是说当a为undefined时，输出的值会有变化，而在编程中对象变成undefined实在是太常见了。

Javascript同源策略

  • 同源策略是客户端脚本（尤其是Javascript）的重要的安全度量标准，其目的是防止某个文档或脚本从多个不同源装载。

  • 一段脚本只能读取来自于同一来源的窗口和文档的属性，这里的同一来源指的是主机名、协议和端口号的组合

  • 不遵循同源策略的标签：<script>,<img>,<iframe>中的src，href都可以任意链接网络资源。

本章完！

文章目录
  1. 1. HTML和CSS
    1. 1.1. 对WEB标准以及W3C的理解
    2. 1.2. XHTML和HTML的区别
    3. 1.3. 严格模式与混杂模式
    4. 1.4. 行内元素与块级元素
    5. 1.5. CSS盒模型
    6. 1.6. CSS引入方式及link和@import区别
    7. 1.7. CSS选择器及优先级
    8. 1.8. 前端页面结构
    9. 1.9. css的基本语句构成
    10. 1.10. 常见浏览器及内核
    11. 1.11. 几种IE6的BUG及解决方法
    12. 1.12. title与alt的区别
    13. 1.13. css中的reset
    14. 1.14. CSS sprites
    15. 1.15. 对网站优化的解决方案
    16. 1.16. HTML语义化
    17. 1.17. 清除浮动
  2. 2. Javascript
    1. 2.1. Javascript数据类型
    2. 2.2. 显式类型转换与隐式类型转换
    3. 2.3. split(),join(),reverse()函数
    4. 2.4. 数组方法pop,push,unshift,shift
    5. 2.5. 事件绑定和普通事件
    6. 2.6. IE和DOM事件流的区别
    7. 2.7. IE和标准下兼容性的写法举例
    8. 2.8. get和post的区别
    9. 2.9. call和apply
    10. 2.10. 事件委托
    11. 2.11. 阻止事件冒泡和默认事件
    12. 2.12. JSONP原理
    13. 2.13. js本地对象，内置对象和宿主对象
    14. 2.14. onload和document.ready
    15. 2.15. “==”和”===”
    16. 2.16. Javascript同源策略