者：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  target="_blank" rel="nofollow">XDOC</a>
復制代碼

4、excel文件

目前excel文件已經有了類似pdf.js那樣的解析sheet.js

總結：

1、免費純前端方式實現在線預覽word、excel、ppt最優選擇微軟在線預覽（不可編輯）

2、利用后端將文件轉為圖片，前端以圖片形式預覽（可行方案）

3、購買在線預覽服務例如百度DOC文檔服務、永中、I DOC VIEW等

著名：文章內容是從網上搜集資料所得；在次發表只為自己以及頭條程序員兄弟日后使用圖個方便。

覺得有用記得收藏轉發！