者：HXGNMSL来源：CSDN原文：https://blog.csdn.net/HXGNMSL/article/details/89076476

Javascript的历史来源

94年网景公司 研发出世界上第一款浏览器。

95年 sun公司 java语言诞生

网景公司和sun合作。

Javascript ===> javascript

JavaScript和ECMAScript的关系

简单来说ECMAScript不是一门语言，而是一个标准。符合这个标准的比较常见的有：JavaScript、Action Script（Flash中用的语言）

JavaScript的基本结构：

JavaScript的语法：

JavaScript的基础语法

变量的声明及使用

数据类型

运算符

逻辑控制语句

注释

语法规则

变量的声明语法：

var变量名；

例如：

Var num;

然后进行赋值：num = 10;也可以声明时直接赋值：

Var num =10;

在JavaScript中，提供了常用的基本数据类型：

undefined 未定义；

null 空；

string 字符串类型；

boolean 布尔类型；

number 数值类型；

运算符：

算数运算符：+、-、*、/、%、++、–；

比较运算符：>、<、> =、< =、==、！=；

逻辑运算符：&&、||、！；

赋值运算符：=；

逻辑控制语句：

JavaScript的逻辑控制语句也分为两类：条件结构和循环机构。

条件结构

条件机构分为if结构和switch结构：

If…else

Switch

循环结构

JavaScript的循环结构的执行顺序与Java类似，主要包括以下几种结构：

for循环

while循环

do…while循环

for…inx循环

示例：

for(var i=0;i<10;i++){

Document.write(“*”);

}

输出结果：**********

循环中断：

用于循环中断的语句有以下两种：

break.

continue.

与Java用法一样，break是跳出循环,continue是跳入下一次循环。

函数

函数有两种：一种是系统函数，一种是自定义函数。

常用的系统函数包括：

parseInt():转换为整数。

parseFloat():转换为浮点型。

isNaN():判断非数字。

Eval():计算表达式值。

自定义函数：

自定义函数的语法

function 函数名（参数1,参数2,…）{

…//语句

Return 返回值;//可选

}

函数的调用：

函数的调用方式有以下两种

事件名=函数名（传递的实参值），例如：

“函数名（）”

直接使用函数名（传递的实参值），例如：

var recult = add(2,3);

匿名函数

匿名函数的语法

var sumFun=function(num1,num2){

…

return(nun1,num2);

} ;

在语法中：

var sunFun=function(num1,num2)表示声明一个变量等于某个函数体。

{…}；是把整个函数体放在变量的后面，并把末尾添加一个分号。

匿名函数的调用:

由于匿名函数定义的整个语句，可以像赋值一样赋给一个变量进行保存，所以可以使用如下方式调用语法中的匿名函数：

var sum=sumFun(2,3)

BOM概述

使用BOM可以移动窗口，改变状态栏中的文本，执行其他与页面内容不直接相关的动作。它包含的对象主要有以下几种;

Window对象

Window对象是指整个窗口对象，可以通过操作Window对象的属性和方法控制窗口，例如，打开或关闭一个窗口。

History对象

浏览器访问过的历史页面对应History对象，通过History对象的属性和方法实现浏览器的前进或后退的功能。

Location对象

浏览器的地址栏对应Location对象，通过Location对象的属性和方法控制页面跳转。

Document对象

浏览器内的网页内容对应Document对象，通过Document对象的属性和方法，控制页面元素。

Window常用的属性有：

history：有关客户访问过的URL的信息。

location:有关当前URL的信息。

Screen: 有关客户端的屏幕和显示性能的信息。

Window对象常用的方法：

prompt():显示可提示用户输入的对话框。

alert():显示带有一段消息和一个人“确认”按钮的警告框。

confirm():显示带有一段消息以及“确认”按钮“取消”按钮的对话框。

close():关闭浏览器窗口。

open():打开一个新的浏览器窗口，加载给定URL所指定的文档。

setTimeout():用于在指定（以毫秒计）后调用函数或计算表达式。

setTneerval():按照指定的周期 （以毫秒计）数来调用函数或计算表达式。

Window对象常用窗口特征属性

height、width:窗口文档显示区的高度、宽度，以像素计。

left、top:窗口的x坐标y坐标，以像素计。

toolbar:yes|no|1|0:是否显示浏览器的工具栏，默认是yes。

scrollbars =yes|no|1|0:是否显示滚动条，默认是yes。

locationyes|no|1|0:是否显示地址栏，默认是yes。

status|no|1|0:是否添加地址栏，默认是yes。

menubar|no|1|0:是否显示菜单栏，默认是yes。

resizable|no|1|0:窗口是否可调节尺寸，默认是yes。

Window对象的常用事件：

onload:一个页面或一副图像完成加载。

onmouseover:鼠标指针移到某元素之上。

onclick:单击某个对象。

onkeydown:某个键盘按键被按下。

onchange:域的内容被改变。

History对象的方法：

back():加载History对象列表中的上一个URL。

forward():加载History对象列表中的下一个URL。

go():加载History对象列表中的某个具体URL。

Location对象的属性：

host：设置或返回主机名和当前URL的端口号。

hostname:设置或返回当前URL的主机名。

href:设置或返回完整的URL。

Location对象的方法：

reload():重新加载当前文档。

replace():用新的文档替换当前文档。

Document对象常用的属性：

referrer:返回载入当前文档的URL。

URL：返回当前文档的URL。

Document对象的常用方法：

getElementById():返回对拥有指定id的第一个对象的引用。

getElementsByName():返回带有指定名称的对象的集合。

getElementsByTagName():返回带有指定标签名的对象的集合。

write():向文档写文本、HTML表达式代码。

内置对象

系统的内置对象有Date对象、Array对象、String对象和Math对象等。

Date:用于操作日期和时间。

Array:用于在单独的变量名中储存一系列的值。

String:用于支持对字符串的处理。

Math:用于执行数学任务，包含了若干数字常量和函数。

Date对象：

1:创建日期对象

Date对象包含日期和时间两个信息，创建日期对象的基本语法有两种：

创建日期的基本语法1： var 日期实例化=new Date(参数);

创建日期的基本语法2： var 日期实例化=new Date();

Date对象的常用方法：

getDate():从Date对象返回一个月中的某一天，其值介于1到31之间。

getDay():从Date对象返回星期中的某一天，其值介于0到6之间。

getHours():返回Date对象的小时，其值介于0到23之间。

getMinutes():返回Date对象的分钟，其值介于0到59之间。

getSeconds():返回Date对象的秒数，其值介于0到59之间。

getMonth():返回Date对象的月份，其值介于0到11之间。

getFullYear():返回Date对象的年份，其值为4位数。

getTime():返回自某一时刻（2010年1月1日）以来的毫秒数。

DOM概述

什么是DOM

DOM是文档对象的缩写，和语言无关。它提供了访问、动态修改结构文档的接口，W3C制定了DOM规范，主流浏览器都支持。

使用Core DOM操作节点

访问节点：

使用getElement系列方法访问指定节点。

getElementById():返回对拥有指定id的第一个对象的引用。

getElementsByName():返回带有指定名称的对象的集合。

getElementsByTagName():返回带有指定标签名的对象的集合。

使用层次关系访问节点。

parenNode:返回节点的父节点。

firstChild:返回节点的首个节点。文本和属性节点没有父节点，会返回一个空数组，对于元素节点，若是没有子节点会返回null。

lastChild:返回节点的最后一个子节点，返回值同firstChild。

操作节点属性值

CoreDOM的标准方法包括以下两种：

getAttribute(“属性名”)：获取属性值。

getAttribute(“属性名”,“属性值”)：设置属性值

创建和增加节点：

创建节点

createElement(tagName):按照给定的标签名称创建一个新的元素节点

appendChild(nodeName):向以存在节点列表的末尾添加新的节点。

inserBefore(newNode,oldNode):向指定的节点之前插入一个新的子节点。

cloneNode(deep):复制某个指定的节点。

删除和替换节点

removeChild(node):删除指定的节点。

replaceChild(newNode,oldNode):用其他的节点替换指定的节点。

Table对象的属性和方法

属性：

rows[]:返回包含表格中所有行的一个数组。

rows[]用于返回表格中所有行的一个数组。

方法：

inserRow():在表格中插入一个新行。

deleteRow():从表格中删除一行。

数组

数组是具有相同数据类型的一个或多个值得集合

创建数组的语法：

var 数组名称=new Array(size);

数组的赋值的两种方式：

先声明在赋值

var province = new Array(4);

province[0]=“河北省”;

province[1]=“河南省”；

索引也可以使用标识（字符串），例如：

var province=new Array(4);

province[‘河北省’]=“河北省”；

province[‘河南省’]=“河南省”；

声明时同时初始化

var province=new Array(“河北省”,“河南省”，“湖北省”，“广东省”)；

Array对象的常用属性和方法：

属性：

length:设置或返回数组中元素的数目。

方法：

join（）:把数组的所有元素放入一个字符串，通过一个分隔符进行分割。

sort():对数组的元素进行排序。

、前端实现pdf文件在线预览功能

方式一、pdf文件理论上可以在浏览器直接打开预览但是需要打开新页面。在仅仅是预览pdf文件且UI要求不高的情况下可以直接通过a标签href属性实现预览

<a href="文档地址"></a>

方式二、通过jquery插件jquery.media.js实现 这个插件可以实现pdf预览功能（包括其他各种媒体文件）但是对word等类型的文件无能为力。 实现方式： js代码：

<script type="text/javascript" src="jquery-1.7.1.min.js"></script> 
<script type="text/javascript" src="jquery.media.js"></script>
复制代码

html结构：

 <body>
 <div id="handout_wrap_inner"></div>
 </body>
复制代码

调用方式：

<script type="text/javascript"> 
 $('#handout_wrap_inner').media({
		width: '100%',
		height: '100%',
		autoplay: true,
 src:'http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf',
 }); 
</script>
复制代码

方式三、直接通过页面内嵌iframe

$("<iframe src='"+ this.previewUrl +"' width='100%' height='362px' frameborder='1'>").appendTo($(".video-handouts-preview"));
复制代码

此外还可以在iframe标签之间提供一个提示类似这样

<iframe :src="previewUrl" width="100%" height="100%">
This browser does not support PDFs. Please download the PDF to view it: <a :href="previewUrl">Download PDF</a>
</iframe>
复制代码

方式四、通过标签嵌入内容

<embed :src="previewUrl" type="application/pdf" width="100%" height="100%">

此标签h5特性中包含四个属性：高、宽、类型、预览文件src！ 与< iframe > < / iframe > 不同，这个标签是自闭合的的，也就是说如果浏览器不支持PDF的嵌入，那么这个标签的内容什么都看不到！

方式五、标签和iframe使用差别较小

<object :src="previewUrl" width="100%" height="100%">
This browser does not support PDFs. Please download the PDF to view it: <a :href="previewUrl">Download PDF</a>
</object>
复制代码

除方式二以外其他都是直接通过标签将内容引入页面实现预览

方式六、PDFObject

PDFObject实际上也是通过标签实现的直接上代码

<!DOCTYPE html>
<html>
<head>
 <title>Show PDF</title>
 <meta charset="utf-8" />
 <script type="text/javascript" src='pdfobject.min.js'></script>
 <style type="text/css">
 html,body,#pdf_viewer{
 width: 100%;
 height: 100%;
 margin: 0;
 padding: 0;
 }
 </style>
</head>
<body>
 <div id="pdf_viewer"></div>
</body>
<script type="text/javascript">
 if(PDFObject.supportsPDFs){
 // PDF嵌入到网页
 PDFObject.embed("index.pdf", "#pdf_viewer" );
 } else {
 location.href = "/canvas";
 }
</script>
</html>

还可以通过以下代码进行判断是否支持PDFObject预览

if(PDFObject.supportsPDFs){
 console.log("Yay, this browser supports inline PDFs.");
} else {
 console.log("Boo, inline PDFs are not supported by this browser");
}
复制代码

方式七、PDF.js

PDF.js可以实现在html下直接浏览pdf文档，是一款开源的pdf文档读取解析插件，非常强大，能将PDF文件渲染成Canvas。PDF.js主要包含两个库文件，一个pdf.js和一个pdf.worker.js，一个负责API解析，一个负责核心解析。

2、word、xls、ppt文件在线预览功能

word、ppt、xls文件实现在线预览的方式比较简单可以直接通过调用微软的在线预览功能实现 (预览前提：资源必须是公共可访问的)

<iframe src='https://view.officeapps.live.com/op/view.aspx?src=http://storage.xuetangx.com/public_assets/xuetangx/PDF/1.xls' width='100%' height='100%' frameborder='1'>
			</iframe>
复制代码

src就是要实现预览的文件地址 具体文档看这微软接口文档

补充：google的文档在线预览实现同微软（资源必须是公共可访问的）

<iframe :src="'https://docs.google.com/viewer?url="fileurl"></iframe>
复制代码

3、word文件

XDOC可以实现预览以DataURI表示的DOC文档，此外XDOC还可以实现文本、带参数文本、html文本、json文本、公文等在线预览，具体实现方法请看官方文档

下面这种方式可以实现快速预览word但是对文件使用的编辑器可能会有一些限制

<a href="http://www.xdocin.com/xdoc?_func=to&_format=html&_cache=1&_xdoc=http://www.xdocin.com/demo/demo.docx" target="_blank" rel="nofollow">XDOC</a>
复制代码

4、excel文件

目前excel文件已经有了类似pdf.js那样的解析sheet.js

总结：

1、免费纯前端方式实现在线预览word、excel、ppt最优选择微软在线预览（不可编辑）

2、利用后端将文件转为图片，前端以图片形式预览（可行方案）

3、购买在线预览服务例如百度DOC文档服务、永中、I DOC VIEW等

著名：文章内容是从网上搜集资料所得；在次发表只为自己以及头条程序员兄弟日后使用图个方便。

觉得有用记得收藏转发！