JavaScript和HTML文檔 - 網(wǎng)絡(luò)統(tǒng)計(jì)學(xué)編程

avaScript（簡(jiǎn)稱(chēng)JS）是一種廣泛用于Web開(kāi)發(fā)的腳本語(yǔ)言，用于為網(wǎng)頁(yè)添加交互性和動(dòng)態(tài)內(nèi)容。它是一種高級(jí)、解釋性、基于對(duì)象和事件驅(qū)動(dòng)的編程語(yǔ)言，由Netscape公司首先引入并在1995年推出。JavaScript通常嵌入在HTML文檔中，并通過(guò)Web瀏覽器在客戶(hù)端執(zhí)行。

JavaScript的語(yǔ)法基于C語(yǔ)言，但也借鑒了Java和其他編程語(yǔ)言的特點(diǎn)。它支持動(dòng)態(tài)類(lèi)型，允許在運(yùn)行時(shí)更改變量的類(lèi)型，不需要提前聲明變量的類(lèi)型。JavaScript也是一種弱類(lèi)型語(yǔ)言，它會(huì)自動(dòng)進(jìn)行類(lèi)型轉(zhuǎn)換，使得在一些情況下比較靈活，但也需要小心處理類(lèi)型相關(guān)的問(wèn)題。

JavaScript可以用于處理各種任務(wù)，包括但不限于網(wǎng)頁(yè)動(dòng)態(tài)交互、表單驗(yàn)證、動(dòng)畫(huà)效果、數(shù)據(jù)處理、服務(wù)器端開(kāi)發(fā)（如Node.js）、移動(dòng)應(yīng)用開(kāi)發(fā)（如React Native）等。JavaScript具有豐富的標(biāo)準(zhǔn)庫(kù)，提供了很多內(nèi)置對(duì)象和函數(shù)，同時(shí)也支持通過(guò)第三方庫(kù)（如jQuery、React、Vue等）擴(kuò)展其功能。

JavaScript具有事件驅(qū)動(dòng)的編程模型，可以對(duì)用戶(hù)的操作或其他事件做出響應(yīng)。通過(guò)事件處理器，可以捕捉和處理用戶(hù)的鼠標(biāo)點(diǎn)擊、鍵盤(pán)輸入、頁(yè)面加載完成等事件，從而實(shí)現(xiàn)豐富的交互體驗(yàn)。

導(dǎo)讀：

JavaScript代碼嵌入HTML文檔
JavaScript代碼運(yùn)行方式
第一個(gè)實(shí)例
JavaScript的三種對(duì)話(huà)框
定義JavaScript變量
JavaScript運(yùn)算符和操作符
JavaScript的轉(zhuǎn)義字符

JavaScript腳本語(yǔ)言(JS)的特點(diǎn)：

JavaScript是一種解釋性腳本語(yǔ)言（代碼不進(jìn)行預(yù)編譯）；
主要用來(lái)向HTML（標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言下的一個(gè)應(yīng)用）頁(yè)面添加交互行為；
可以直接嵌入HTML頁(yè)面，但寫(xiě)成單獨(dú)的js文件有利于結(jié)構(gòu)和行為的分離；
跨平臺(tái)特性，在絕大多數(shù)瀏覽器的支持下，可以在多種平臺(tái)下運(yùn)行。

JavaScript是一種網(wǎng)頁(yè)腳本語(yǔ)言，被廣泛用于Web應(yīng)用開(kāi)發(fā)?？梢允褂肑S添加、刪除、修改網(wǎng)頁(yè)上的所有元素及屬性；在HTML網(wǎng)頁(yè)中動(dòng)態(tài)寫(xiě)入文本、數(shù)字和插入圖表；響應(yīng)網(wǎng)頁(yè)中的事件，并做出相應(yīng)處理。了解JS編程后，可以輕松調(diào)用各類(lèi)網(wǎng)絡(luò)統(tǒng)計(jì)學(xué)庫(kù)函數(shù)和在網(wǎng)頁(yè)上統(tǒng)計(jì)數(shù)據(jù)處理或分析。

一、JavaScript嵌入HTML文檔

1、JavaScript代碼嵌入HTML文檔

【#Code 101】：JavaScript代碼嵌入HTML文檔案例

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>銀河網(wǎng)絡(luò)統(tǒng)計(jì)學(xué)教程</title>
<style>
    網(wǎng)頁(yè)內(nèi)部樣式CSS代碼
</style>
<script language="JavaScript">
//*JavaScript腳本代碼*
</script>
</head>
<body>
    文檔體HTML代碼
</body>
</html>

注：JavaScript腳本代碼在<script language="JavaScript">...</script>標(biāo)簽之間

2、JavaScript代碼運(yùn)行方式

(1) 網(wǎng)頁(yè)打開(kāi)時(shí)自動(dòng)調(diào)用JS代碼

【#Code 102】：網(wǎng)頁(yè)打開(kāi)時(shí)自動(dòng)調(diào)用JS代碼案例

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>銀河網(wǎng)絡(luò)統(tǒng)計(jì)學(xué)教程</title>
<style>
		網(wǎng)頁(yè)內(nèi)部樣式CSS代碼
</style>
<script language="JavaScript">
//*JavaScript腳本代碼*
function init() {
		alert("加載網(wǎng)頁(yè)時(shí)提示我!");
}
</script>
</head>
<body onload="init()">
		文檔體HTML代碼
</body>
</html>

注：可復(fù)制代碼到WINDOWS記事本，保存為HTML文檔。例如，“jsTest1.html”。鼠標(biāo)雙擊該文件觀(guān)察效果

代碼【#Code 102】中，瀏覽器解析完HTML文檔體代碼后，觸發(fā)body標(biāo)簽的onload網(wǎng)頁(yè)加載事件，從而運(yùn)行JS函數(shù)init()。

(2) 用頁(yè)面按鈕或超鏈接觸發(fā)JS代碼

【#Code No.103】：用頁(yè)面按鈕或超鏈接觸發(fā)JS代碼案例

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>銀河網(wǎng)絡(luò)統(tǒng)計(jì)學(xué)教程</title>
<style>
		網(wǎng)頁(yè)內(nèi)部樣式CSS代碼
</style>
<script language="JavaScript">
//*JavaScript腳本代碼*
function init() {
		alert("加載網(wǎng)頁(yè)時(shí)提示我!");
}
</script>
</head>
<body>
<button onclick="init()">運(yùn)行JS函數(shù)init()</button>
<p><i>用鼠標(biāo)左鍵點(diǎn)擊命令按鈕JS函數(shù)。</i></p><br/>
<a href="#" onclick="init()">運(yùn)行JS函數(shù)init()</a>
<p><i>
由于href="#"沒(méi)有指定連接文件，用鼠標(biāo)左鍵點(diǎn)擊超鏈接時(shí)onclick事件運(yùn)行運(yùn)行JS函數(shù)init()。
  </i></p><br/>
</body>
</html>

注：JavaScript腳本代碼中的標(biāo)點(diǎn)符號(hào)都必須為半角英文字符。JavaScript腳本可以插入注釋語(yǔ)句，注釋語(yǔ)句增加代碼可讀性，不被瀏覽器解析執(zhí)行。符號(hào)"/.../"為單行注釋?zhuān)?hào)"/*...*/"為多行行注釋

例如：

<script language="JavaScript">
//這是單行注釋
/*
	這是多行注釋?zhuān)?	銀河網(wǎng)絡(luò)統(tǒng)計(jì)學(xué)教程。
*/
}
</script>

二、JavaScript語(yǔ)法

1、第一個(gè)實(shí)例

打開(kāi)網(wǎng)頁(yè)時(shí)，瀏覽器中顯示"Hello World!

【#Code 104】：第一個(gè)網(wǎng)頁(yè)“Hello World!”案例

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>銀河網(wǎng)絡(luò)統(tǒng)計(jì)學(xué)教程</title>
<style></style>
<script language="JavaScript">
function init() {
		document.write("Hello World!");
}
</script>
</head>
<body onload="init()">
</body>
</html>

2、JavaScript的三種對(duì)話(huà)框

（1）提醒對(duì)話(huà)框，不能對(duì)腳本產(chǎn)生任何改變，腳本樣例：

alert("提醒對(duì)話(huà)框");

在網(wǎng)頁(yè)中的運(yùn)用參見(jiàn)#Code 102。

（2）確認(rèn)對(duì)話(huà)框，返回true或者false，可以用于if...else...判斷用戶(hù)的選擇，腳本樣例：

confirm("你確信要學(xué)習(xí)網(wǎng)絡(luò)統(tǒng)計(jì)學(xué)嗎？")

confirm函數(shù)返回true或者false，網(wǎng)頁(yè)設(shè)計(jì)中運(yùn)用實(shí)例，

【#Code 105】：JavaScript確認(rèn)對(duì)話(huà)框案例

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>銀河網(wǎng)絡(luò)統(tǒng)計(jì)學(xué)教程 </title>
<style> </style>
<script language="JavaScript">
function init() {
		document.write("Hello World!");
firm()；
}
function firm() {
//利用對(duì)話(huà)框返回的值（true或者false）
		if(confirm("你確信要學(xué)習(xí)網(wǎng)絡(luò)統(tǒng)計(jì)學(xué)嗎？")) {
				alert("我確信要學(xué)習(xí)網(wǎng)絡(luò)統(tǒng)計(jì)學(xué)！");
		} else {
				alert("我學(xué)習(xí)網(wǎng)絡(luò)統(tǒng)計(jì)學(xué)有困難！");
				}
}
</script>
</head>
<body onload="init()">
</body>
</html>

（3）輸入對(duì)話(huà)框，可以返回用戶(hù)填入的字符串或數(shù)值，腳本樣例：

var name=prompt("請(qǐng)輸入您的名字",""); //將輸入的內(nèi)容賦給變量name

注：腳本中符號(hào)“//”為注釋符，可在“//”符號(hào)后面加入腳本解釋

prompt函數(shù)返回用戶(hù)填入的字符串或數(shù)值，網(wǎng)頁(yè)設(shè)計(jì)中運(yùn)用實(shí)例，

【#Code 106】：JavaScript輸入對(duì)話(huà)框案例

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>銀河網(wǎng)絡(luò)統(tǒng)計(jì)學(xué)教程</title>
<style>
<script language="JavaScript">
function init() {
		document.write("Hello World!");
prom()；
}
function prom() {
var name=prompt("請(qǐng)輸入您的名字","張三"); //將輸入的內(nèi)容賦給變量name
if(name) { //如果返回的有內(nèi)容
		alert("歡迎您："+ name)
		}
}
</script>
</head>
<body onload="init()">
</body>
</html>

注:prompt有兩個(gè)參數(shù)，前面是提示的信息，后面是當(dāng)對(duì)話(huà)框出來(lái)后，在對(duì)話(huà)框里的默認(rèn)值

3、定義JavaScript變量

JavaScript是弱類(lèi)型語(yǔ)言，聲明變量時(shí)用var關(guān)鍵字（注意var要全部小寫(xiě)）就可以了。而很多編程語(yǔ)言聲明變量時(shí)，需要指明變量的類(lèi)型，如：int, double, string, boolean, date, array, object等；而且變量類(lèi)型一旦指定，就不能改變了。但在JavaScript中不同，只需用var，且數(shù)據(jù)類(lèi)型可以改變。但要請(qǐng)注意變量的命名規(guī)：

變量名不能以數(shù)字開(kāi)頭(如123);
變量名不能使用JavaScript關(guān)鍵字(如var);
變量名中只能有下劃線(xiàn)、美元符、字母和數(shù)字。不能出現(xiàn)’/’這種特殊字符(如My/age)

通常使用var（或let）關(guān)鍵字定義變量，如:

var total=346; //定義整數(shù)變量（int）
var value=45.7865 //定義浮點(diǎn)型變量（double）
var notNull=true; //定義邏輯型變量（boolean）
var name="張三", gender="男"; //用逗號(hào)分隔，同行定義兩個(gè)字符型變量（string）
var i=j=0; //同時(shí)定義兩個(gè)變量（int）
var hobby=["聽(tīng)音樂(lè)","看電影"]; //定義數(shù)組變量（array）
var d = new Date(); //定義日期時(shí)間變量（date）

注：代碼中關(guān)鍵字var可以替換為let，但let關(guān)鍵字在同一作用域不能重復(fù)定義

【#Code 107】：JavaScript變量使用案例

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>銀河網(wǎng)絡(luò)統(tǒng)計(jì)學(xué)教程</title>
<style></style>
<script language="JavaScript">
var myName = "銀河統(tǒng)計(jì)學(xué)"; //myName是全局變量
function init() {
    var total=346;
    var value=45.7865;
    var notNull=true;
    var name="張三", gender="男";
    var i=j=0;
    var hobby=["聽(tīng)音樂(lè)","看電影"];
    hobby[2]="打籃球"; //數(shù)組賦值
    stdId = 2016; //全局變量
    var d = new Date(); //定義日期時(shí)間變量（date）
    document.write("變量i="+i+"<br/>");
    document.write("變量j="+j+"<br/>");
    document.write("變量name="+name+"<br/>");
    document.write("變量gender="+gender+"<br/>");
    document.write("變量notNull="+notNull+"<br/>");
    document.write("變量hobby="+hobby+"<br/>");
    document.write("變量hobby[0]="+hobby[0]+"<br/>");
    document.write("變量hobby[1]="+hobby[1]+"<br/>");
    document.write("變量hobby[2]="+hobby[2]+"<br/>");
    document.write("變量hobby[3]="+hobby[3]+"<br/>");
    document.write("變量d="+d+"<br/>");
    document.write("變量d.getFullYear()="+d.getFullYear()+"<br/>"); //參見(jiàn)JS日期對(duì)象
  	var ostr=	"<p/><i>下面調(diào)用函數(shù)test()，輸出該函數(shù)體內(nèi)的全局和局部變量。";
    ostr+="<br/>全局可以輸出，局部變量局部變量total無(wú)法輸出。</i><p/>";
    document.write( ostr);
    test();
}

function test() {
    document.write("全局變量myName="+myName+"<br/>");
    document.write("全局變量stdId="+stdId+"<br/>");
    document.write("局部變量total="+total+"<br/>");
}
</script>
</head>
<body onload="init()">
</body>
</html>

注：代碼中"+="為連加運(yùn)算符，將一行過(guò)長(zhǎng)代碼分段代碼連接起來(lái)；"變量name="+name+"<br/>"中符號(hào)"+"連接字符串和變量

4、JavaScript運(yùn)算符和操作符

算術(shù)操作符： +（加）、–（減）、*（乘）、/（除）、%（取模）
字符串操作符： +（字符串連接）、+=（字符串連接復(fù)合）
布爾操作符：！（非、not）、&&（且、and）、||（或、or）
一元操作符： ++（累加）、--（累減）、+（一元加）、-（一元減）
關(guān)系比較操作符： <（小于）、<=（小于等于）、>（大于）、>=（大于等于）、!=（不等于）、==（等于）、===（類(lèi)型相同）、!==（類(lèi)型不同）
按位操作符： ~（按位非）、&（按位與）、|（按位或）、^（按位異或）、<<（左移）、>>（有符號(hào)右移）、>>>（無(wú)符號(hào)右移）
賦值操作符：復(fù)合賦值（+=、-=、*=、%=）、復(fù)合按位賦值（~=、&=、|=、^=、<<=、>>=、>>>=)

JavaScript操作符比較復(fù)雜，下面介紹JS運(yùn)算符和常用操作符。

（1）算數(shù)操作符

除了加號(hào)（+）之外，如果操作數(shù)不是Number類(lèi)型，會(huì)自動(dòng)先調(diào)用Number()將其轉(zhuǎn)換為Number類(lèi)型再進(jìn)行計(jì)算；除號(hào)（/）和取模（%）并不會(huì)區(qū)分整數(shù)和浮點(diǎn)數(shù)，都會(huì)自動(dòng)轉(zhuǎn)化為浮點(diǎn)數(shù)。

（2）字符串操作符

字符串連接符號(hào)（+）相當(dāng)于concat()函數(shù)，會(huì)將操作數(shù)據(jù)轉(zhuǎn)化為字符串再連接。在字符串和數(shù)值型進(jìn)行+號(hào)運(yùn)算時(shí)，會(huì)將數(shù)值型轉(zhuǎn)為字符串。

（3）布爾操作符

布爾邏輯操作符！（非、not）、&&（與、and）、||（或、or）常和if等條件函數(shù)一起判斷一個(gè)變量或?qū)傩允欠裼卸x。

【#Code 108】：JavaScript運(yùn)算符和操作符案例

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>銀河網(wǎng)絡(luò)統(tǒng)計(jì)學(xué)教程</title>
<style></style>
<script language="JavaScript">
document.write("<p><b>//算術(shù)操作符</b></p>");
var x = 11;
var y = 5;
with (document) { //注意with關(guān)鍵字用法，其用于簡(jiǎn)化代碼
        write("x = 11, y = 5");
        write("<br>x + y 是 ", x + y);
        write("<br>x - y 是 ", x - y);
        write("<br>x * y 是 ", x * y);
        write("<br>x / y 是 ", x / y);
        write("<br>x % y 是 ", x % y);
        write("<br>++ x 是 ", ++ x);
        write("<br>-- y 是 ", -- y);
        write("<br>x 是 ", x);
        write("<br>y 是 ", y);
        write("<br>x-- 是 ", x--);
        write("<br>y-- 是 ", y--);
        }

document.write("<p><b>//++運(yùn)算練習(xí)</b></p>");
var x = y = 3;
with (document) {
write("y++=",(y++),"<br>");
write("++y=",(++y),"<br>");
write("x = 3, y = 5 <br>");
write("若x = y++ 運(yùn)算之后：");
x = y++;//y→x，y+1→y
write("x 是 ", x, "; y 是 ", y, "<br>");
write("再作x = ++y 運(yùn)算：");
x = ++y;//y+1→x，y+1→y
write("x 是 ", x, "; y 是 ", y);
}

document.write("<p><b>//++運(yùn)算練習(xí)</b></p>");
var t = true;
var f = false;
with(document) {
        write("true && true 的結(jié)果是 ", t && t);
        write("<br>true && false 的結(jié)果是 ", t && f);
        write("<br>false && true 的結(jié)果是 ", f && t);
        write("<br>false && false 的結(jié)果是 ", f && f);
        write("<br>true && (1==1) 的結(jié)果是 ", t && (1==1));
        write("<br>false && 'A' 的結(jié)果是 ", f && 'A');
        write("<br>'A' && false 的結(jié)果是 ", 'A' && f);
        write("<br>true && 'A' 的結(jié)果是 ", t && 'A');
        write("<br>'A' && true 的結(jié)果是 ", 'A' && t);
        write("<br>'A' && 'B' 的結(jié)果是 ", 'A' && 'B');
        write("<br>1 && 1 的結(jié)果是 ", 1 && 1);
        write("<br>1 && 0 的結(jié)果是 ", 1 && 0);
        write("<br>true && 0 的結(jié)果是 ", true && 0);
        write("<br>true && 1 的結(jié)果是 ", true && 1);
        write("<br>true && '0' 的結(jié)果是 ", true && '0');
}

document.write('<p><b>//邏輯運(yùn)算符"||"</b></p>');
var t = true;
var f = false;
with(document) {
        write("true || true 的結(jié)果是 ", t || t);
        write("<br>true || false 的結(jié)果是 ", t || f);
        write("<br>false || true 的結(jié)果是 ", f || t);
        write("<br>false || false 的結(jié)果是 ", f || f);
        write("<br>true || (1==1) 的結(jié)果是 ", t || (1==1));
        write("<br>false || 'A' 的結(jié)果是 ", f || 'A');
        write("<br>'A' || false 的結(jié)果是 ", 'A' || f);
        write("<br>true || 'A' 的結(jié)果是 ", t || 'A');
        write("<br>'A' || true 的結(jié)果是 ", 'A' || t);
        write("<br>'A' || 'B' 的結(jié)果是 ", 'A' || 'B');
        write("<br>1 || 1 的結(jié)果是 ", 1 || 1);
        write("<br>1 || 0 的結(jié)果是 ", 1 || 0);
        write("<br>true || 0 的結(jié)果是 ", true || 0);
        write("<br>true || 1 的結(jié)果是 ", true || 1);
        write("<br>true || '0' 的結(jié)果是 ", true || '0');
}

document.write('<p><b>////輯運(yùn)算符"!"</b></p>');
with(document) {
        write("!true 的結(jié)果是 ", !true);
        write("<br>!false 的結(jié)果是 ", !false);
        write("<br>!'A' 的結(jié)果是 ", !'A');
        write("<br>!0 的結(jié)果是 ", !0);
        write("<br>!1 的結(jié)果是 ", !1);
        write("<br>!2 的結(jié)果是 ", !2);
        write("<br>!'0' 的結(jié)果是 ", !'0');
        write("<br>!'1' 的結(jié)果是 ", !'1');
        write("<br>!-1 的結(jié)果是 ", !-1);
}
</script>
</head>
<body>

</body>
</html>

三、JavaScript的轉(zhuǎn)義字符

可以在 JavaScript 中使用反斜杠來(lái)向文本字符串添加特殊字符。對(duì)于某些特殊的字符，無(wú)法用鍵盤(pán)直接鍵入，這時(shí)就需要使用轉(zhuǎn)義字符。還有一些字符（符號(hào)）用于特殊的用途，比如引號(hào)，如果要在字符串內(nèi)包含引號(hào)，就需要使用轉(zhuǎn)義字符。切記，每一個(gè)轉(zhuǎn)義字符都是以反斜杠“\”開(kāi)始的。

1、無(wú)法用鍵盤(pán)錄入的轉(zhuǎn)義字符

轉(zhuǎn)義字符	字符	轉(zhuǎn)義字符	字符
\b	退格符	\f	換頁(yè)符
\n	換行符	\r	回車(chē)符
\t	制表符	\"	雙引號(hào)
\'	單引號(hào)	\	反斜杠

2、特殊用途符號(hào)轉(zhuǎn)義字符

字符	轉(zhuǎn)義字符
點(diǎn)的轉(zhuǎn)義：.	\u002E
美元符號(hào)的轉(zhuǎn)義：$	\u0024
乘方符號(hào)的轉(zhuǎn)義：^	\u005E
左大括號(hào)的轉(zhuǎn)義：{	\u007B
左方括號(hào)的轉(zhuǎn)義：[	\u005B
左圓括號(hào)的轉(zhuǎn)義：(	\u0028
豎線(xiàn)的轉(zhuǎn)義：\|	\u007C
右方括號(hào)轉(zhuǎn)義：]	\u005D
右圓括號(hào)的轉(zhuǎn)義：)	\u0029
星號(hào)的轉(zhuǎn)義：*	\u002A
加號(hào)的轉(zhuǎn)義：+	\u002B
問(wèn)號(hào)的轉(zhuǎn)義：?	\u003F
反斜杠的轉(zhuǎn)義：\	\u005C

JavaScript代碼如下：

<script type="text/javascript">
var oStr="我的名字叫\(zhòng)“張三\”，這段文字已經(jīng)被雙引號(hào)，按JS語(yǔ)法規(guī)則，";
oStr+="雙引號(hào)中不能包括雙引號(hào)。為了顯示是姓名被雙引號(hào)，在姓名雙引號(hào)前加反斜杠。";
document.write(oStr);
</script>

將script標(biāo)簽內(nèi)的JavaScript腳步代碼復(fù)制、粘貼到銀河統(tǒng)計(jì)JavaScript腳本測(cè)試工具，運(yùn)行結(jié)果如下：

我的名字叫“張三”，這段文字已經(jīng)被雙引號(hào)，按JS語(yǔ)法規(guī)則，雙引號(hào)中不能包括雙引號(hào)。為了顯示是姓名被雙引號(hào)，在姓名雙引號(hào)前加反斜杠。

注：這段文字為引號(hào)嵌套，但姓名的引號(hào)前使用了轉(zhuǎn)移符號(hào)“\”，使得document.write(oStr)可以正確顯示

HTML+CSS+JS是前端網(wǎng)頁(yè)開(kāi)發(fā)的基礎(chǔ)，JS(JavaScript)在HTML網(wǎng)頁(yè)中動(dòng)態(tài)寫(xiě)入文本、數(shù)字和插入圖表。掌握J(rèn)avaScript編程可以輕松調(diào)用各類(lèi)統(tǒng)計(jì)學(xué)庫(kù)函數(shù)和在網(wǎng)頁(yè)上進(jìn)行統(tǒng)計(jì)數(shù)據(jù)處理或分析。

著B(niǎo)/S大行其道，Web端急需一個(gè)兼容絕大部分瀏覽器，直觀(guān)，生動(dòng)，可交互，可高度個(gè)性化定制的數(shù)據(jù)可視化圖開(kāi)發(fā)庫(kù)。百度公司可能聽(tīng)到了眾多程序猿的心聲，速速開(kāi)放、貢獻(xiàn)出了echarts。echarts是純JavaScript的圖表庫(kù)，可繪制折線(xiàn)圖、柱狀圖、散點(diǎn)圖、K線(xiàn)圖、餅圖、雷達(dá)圖、地圖、儀表盤(pán)、漏斗圖等美麗、大氣的圖表。

盡管echarts好用，漂亮，但在生成圖表時(shí)，經(jīng)常需要做繁瑣的數(shù)據(jù)類(lèi)型轉(zhuǎn)化、修改復(fù)雜的配置項(xiàng)。有家企業(yè)實(shí)在看不下去了，就對(duì) Vue2.0 和 echarts 進(jìn)行了封裝，形成了 v-charts 圖表組件。

使用v-charts只需要統(tǒng)一提供一種對(duì)前后端都友好的數(shù)據(jù)格式設(shè)置簡(jiǎn)單的配置項(xiàng)，便可輕松生成常見(jiàn)的圖表。

45.1 v-charts安裝

要想獲得v-charts的支持，可通過(guò)npm進(jìn)行安裝。

npm i v-charts echarts -S

也可以通過(guò)cdn進(jìn)行引入，其中style.min.css是可選項(xiàng)。

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/v-charts/lib/index.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/v-charts/lib/style.min.css">

詳細(xì)用法，可參考官網(wǎng)https://v-charts.js.org/#/上的教程。為了方便，咱就使用cdn引入的方式。

45.2 數(shù)據(jù)分析

不用說(shuō)你也應(yīng)該知道，在templates/admin下創(chuàng)建的模板名稱(chēng)應(yīng)該叫sale_sum.html，

如果真的不知道，往上仔細(xì)閱讀admin.py中，SaleSumAdmin類(lèi)的代碼。如果知道，那就把templates/admin/change_list.html里的代碼拷貝出來(lái)，粘貼到sale_sum.html中。

進(jìn)行乾坤大挪移，移形換影后的代碼如下。只知道引進(jìn)了3個(gè)js文件并沒(méi)多大意義，關(guān)鍵是要閱讀并理解new Vue(…)里面的代碼，因?yàn)槟遣攀悄阆胍?#34;財(cái)富"。

{% extends "admin/base_site.html" %}
{% load i18n admin_urls static admin_list %}

{% block extrastyle %}
    {{ block.super }}
    <link rel="stylesheet" type="text/css" href="{% static "admin/css/changelists.css" %}?_=20180905"/>
    {#    <link rel="stylesheet" type="text/css" href="{% static "admin/simpleui/layui/css/layui.css" %}"/>#}
    {% if cl.formset %}
        <link rel="stylesheet" type="text/css" href="{% static "admin/css/forms.css" %}"/>

    {% endif %}
    {% if cl.formset or action_form %}
        <script type="text/javascript" src="{% url 'admin:jsi18n' %}"></script>
        <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/v-charts/lib/index.min.js"></script>
    {% endif %}
    {{ media.css }}
    {% if not actions_on_top and not actions_on_bottom %}
        <style>
            #changelist table thead th:first-child {
                width: inherit
            }
        </style>
    {% endif %}
{% endblock %}

{% block extrahead %}
    {{ block.super }}
    {{ media.js }}
{% endblock %}

{% block bodyclass %}{{ block.super }} app-{{ opts.app_label }} model-{{ opts.model_name }} change-list{% endblock %}

{% if not is_popup %}
    {% block breadcrumbs %}
        <div class="breadcrumbs">
            <a href="{% url 'admin:index' %}">{% trans 'Home' %}</a>
            ? <a
                href="{% url 'admin:app_list' app_label=cl.opts.app_label %}">{{ cl.opts.app_config.verbose_name }}</a>
            ? {{ cl.opts.verbose_name_plural|capfirst }}
        </div>
    {% endblock %}
{% endif %}

{% block coltype %}flex{% endblock %}
{% block content_title %}

{% endblock %}
{% block content %}
    <style>
        #content {
            position: relative;
        }

        .object-tools {
            position: absolute;
            top: 16px;
            right: 20px;
            height: 50px;
            z-index: 2;
        }

        .object-tools .import_link, .object-tools .export_link {
            color: white !important;
        }

    </style>
    {% block object-tools %}
        <ul class="object-tools">
            {% block object-tools-items %}
                {% if has_add_permission %}
                    {{ block.super }}
                {% endif %}
            {% endblock %}
        </ul>
    {% endblock %}

    <div id="content-main">

        {% if cl.formset.errors %}
            <p class="errornote">
                {% if cl.formset.total_error_count == 1 %}{% trans "Please correct the error below." %}{% else %}
                    {% trans "Please correct the errors below." %}{% endif %}
            </p>
            {{ cl.formset.non_form_errors }}
        {% endif %}
        <div class="module{% if cl.has_filters %} filtered{% endif %}" id="changelist">
            {% block search %}{% search_form cl %}{% endblock %}
            {% block date_hierarchy %}{% date_hierarchy cl %}{% endblock %}
        <div id="app" style="margin-top: 10px;margin-left: 5px">
           <ve-histogram :data="chartData" :mark-point="markPoint" :extend="chartExtend" :colors="colors">
           </ve-histogram>
        </div>

        </div>
    </div>
    <script>

    new Vue({
      el: '#app',
      data: function () {
        this.chartExtend = {
            title: {
                text: '{{ bar_title }}售業(yè)績(jī)統(tǒng)計(jì)報(bào)表',
                subtext: '{{ subtext }}',
            },
        }
         this.markPoint = {
                data : [
                    {type : 'max', name: '最大值'},
                    {type : 'min', name: '最小值'}
                ]
            }
        return  {
          colors: ['#c23531','#2f4554'],

          chartData: {

          columns: ['日期', '銷(xiāo)售目標(biāo)(萬(wàn)元)', '實(shí)際銷(xiāo)售額(萬(wàn)元)'],
          rows: [
              {% if task %}
                { '日期': '1月', '銷(xiāo)售目標(biāo)(萬(wàn)元)': {{ task.Jan_task }} ,'實(shí)際銷(xiāo)售額(萬(wàn)元)': {{ task.Jan_sale }}},
                { '日期': '2月', '銷(xiāo)售目標(biāo)(萬(wàn)元)': {{ task.Feb_task }} ,'實(shí)際銷(xiāo)售額(萬(wàn)元)': {{ task.Feb_sale }}},
                { '日期': '3月', '銷(xiāo)售目標(biāo)(萬(wàn)元)': {{ task.Mar_task }} ,'實(shí)際銷(xiāo)售額(萬(wàn)元)': {{ task.Mar_sale }}},
                { '日期': '4月', '銷(xiāo)售目標(biāo)(萬(wàn)元)': {{ task.Apr_task }} ,'實(shí)際銷(xiāo)售額(萬(wàn)元)': {{ task.Apr_sale }}},
                { '日期': '5月', '銷(xiāo)售目標(biāo)(萬(wàn)元)': {{ task.May_task }} ,'實(shí)際銷(xiāo)售額(萬(wàn)元)': {{ task.May_sale }}},
                { '日期': '6月', '銷(xiāo)售目標(biāo)(萬(wàn)元)': {{ task.Jun_task }} ,'實(shí)際銷(xiāo)售額(萬(wàn)元)': {{ task.Jun_sale }}},
                { '日期': '7月', '銷(xiāo)售目標(biāo)(萬(wàn)元)': {{ task.Jul_task }} ,'實(shí)際銷(xiāo)售額(萬(wàn)元)': {{ task.Jul_sale }}},
                { '日期': '8月', '銷(xiāo)售目標(biāo)(萬(wàn)元)': {{ task.Aug_task }} ,'實(shí)際銷(xiāo)售額(萬(wàn)元)': {{ task.Aug_sale }}},
                { '日期': '9月', '銷(xiāo)售目標(biāo)(萬(wàn)元)': {{ task.Sep_task }} ,'實(shí)際銷(xiāo)售額(萬(wàn)元)': {{ task.Sep_sale }}},
                { '日期': '10月', '銷(xiāo)售目標(biāo)(萬(wàn)元)': {{ task.Oct_task }} ,'實(shí)際銷(xiāo)售額(萬(wàn)元)': {{ task.Oct_sale }}},
                { '日期': '11月', '銷(xiāo)售目標(biāo)(萬(wàn)元)': {{ task.Nov_task }} ,'實(shí)際銷(xiāo)售額(萬(wàn)元)': {{ task.Nov_sale }}},
                { '日期': '12月', '銷(xiāo)售目標(biāo)(萬(wàn)元)': {{ task.Dec_task }} ,'實(shí)際銷(xiāo)售額(萬(wàn)元)': {{ task.Dec_sale }}},
              {% endif %}
          ]
        },
         dataEmpty: true
        }
      }
    })
  </script>
    <script type="text/javascript">
        $(".object-tools").hide().find('li a').each(function () {
            _action.exts.push({
                name:$(this).text(),
                url:$(this).attr('href')
            })
        })

    </script>
{% endblock %}

萬(wàn)萬(wàn)沒(méi)想到，在ModelAdmin里，竟然可以自定義過(guò)濾器，可以覆蓋模板，還可以調(diào)整查詢(xún)方法。更讓人驚喜的，連模板里的代碼都是通過(guò)拷貝完成的。

不試不知道，一試嚇一跳，本以為不可能實(shí)現(xiàn)的功能，原來(lái)都是可以做得到的。所以說(shuō)編程還是要多嘗試，多動(dòng)手。

好了，關(guān)于銷(xiāo)售管理系統(tǒng)用Django實(shí)現(xiàn)的內(nèi)容，總算開(kāi)發(fā)完成了，下一步就說(shuō)一下關(guān)于系統(tǒng)上線(xiàn)的內(nèi)容。

Charts是一款由百度前端技術(shù)部開(kāi)發(fā)的，基于Javascript的數(shù)據(jù)可視化圖表庫(kù)，提供直觀(guān)，生動(dòng)，可交互，可個(gè)性化定制的數(shù)據(jù)可視化圖表。

使用 JavaScript 實(shí)現(xiàn)開(kāi)源的可視化庫(kù)，可以流暢的運(yùn)行在 PC 和移動(dòng)設(shè)備上，兼容當(dāng)前絕大部分瀏覽器，底層依賴(lài)輕量級(jí)的矢量圖形庫(kù) ZRender，提供直觀(guān)，交互豐富，可高度個(gè)性化定制的數(shù)據(jù)可視化圖表。

具有豐富的可視化類(lèi)型，ECharts 提供了常規(guī)的折線(xiàn)圖、柱狀圖、散點(diǎn)圖、餅圖、K線(xiàn)圖，用于統(tǒng)計(jì)的盒形圖，用于地理數(shù)據(jù)可視化的地圖、熱力圖、線(xiàn)圖，用于關(guān)系數(shù)據(jù)可視化的關(guān)系圖、treemap、旭日?qǐng)D，多維數(shù)據(jù)可視化的平行坐標(biāo)，還有用于 BI 的漏斗圖，儀表盤(pán)，并且支持圖與圖之間的混搭。

官方網(wǎng)址：https://echarts.baidu.com/

ECharts提供大量常用的數(shù)據(jù)可視化圖表，底層基于ZRender（一個(gè)全新的輕量級(jí)canvas類(lèi)庫(kù)），創(chuàng)建了坐標(biāo)系，圖例，提示，工具箱等基礎(chǔ)組件，并在此上構(gòu)建出折線(xiàn)圖（區(qū)域圖）、柱狀圖（條狀圖）、散點(diǎn)圖（氣泡圖）、餅圖（環(huán)形圖）、K線(xiàn)圖、地圖、力導(dǎo)向布局圖以及和弦圖，同時(shí)支持任意維度的堆積和多圖表混合展現(xiàn)。

多圖聯(lián)動(dòng)

值域漫游

大規(guī)模散點(diǎn)圖

子區(qū)域地圖模式

代碼示例

目標(biāo)完成率

#數(shù)據(jù)分析指標(biāo)完成情況
from pyecharts import Gauge
gauge=Gauge('目標(biāo)完成率')
gauge.add('任務(wù)指標(biāo)','完成率',80.2)
#gauge.render('gauge.html')
#圖表輸出
gauge.render()
gauge

水球圖

#水球圖
from pyecharts import Liquid
liquid=Liquid("水球圖"
             )liquid.add("水球",[0.8])#liquid.render('liquid.html')#圖表輸出到路徑下liquid.render()#圖表直接輸出liquid

箱線(xiàn)圖

#箱線(xiàn)圖from pyecharts import Boxplot
boxplot=Boxplot("箱線(xiàn)圖")
x_axis=['銷(xiāo)售額']
y_axis=[[169,126,248,263,265,273,248,241,326,334,479,347]]
yaxis=boxplot.prepare_data(y_axis)
boxplot.add("boxplot",x_axis,_yaxis)
boxplot.render()
#直接導(dǎo)出或者導(dǎo)出到文件內(nèi)
boxplot.render(linebar.html)
boxplot

3D柱形圖

#3D柱形圖
from pyecharts import Bar3D
import json
bar3d=Bar3D("3D柱形圖",width=1200,height=600)
f=open("bar3ds.json")
datas=json.load(f)
x_axis=datas['x_axis']
y_axis=datas['y_axis']
data=datas['data']
range_color=datas['range_color']
#visualmap熱力圖
bar3d.add("",x_axis,y_axis,[[d[1],d[0],d[2]] 
                            for d in data],is_visualmap=True,visual_range=[0,20],visual_range_color=range_color)
#設(shè)置3D圖的自動(dòng)旋轉(zhuǎn)
bar3d.add("",x_axis,y_axis,[[d[1],d[0],d[2]] 
                            for d in data],is_visualmap=True,visual_range=[0,20],visual_range_color=range_color,         grid3d_width=200,grid3d_depth=80,is_grid3d_rotate=True)
#設(shè)置3D圖的自動(dòng)旋轉(zhuǎn)的速度
bar3d.add("",x_axis,y_axis,[[d[1],d[0],d[2]] 
                            for d in data],is_visualmap=True,visual_range=[0,20],visual_range_color=range_color,         grid3d_width=200,grid3d_depth=80,is_grid3d_rotate=True,grid3d_rotate_speed=180)
#圖表輸出
bar3d.render('3dbar.html')

本文來(lái)源于公眾號(hào)：大話(huà)數(shù)據(jù)分析

更多實(shí)用的數(shù)據(jù)分析知識(shí)，請(qǐng)持續(xù)關(guān)注！

在線(xiàn)咨詢(xún)

上一篇：「獨(dú)立手機(jī)版」html5黑色企業(yè)網(wǎng)站源碼企業(yè)通用單獨(dú)手機(jī)網(wǎng)站
下一篇： JavaScript選擇排序