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瀏覽器在客戶端執(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ì)用戶的操作或其他事件做出響應(yīng)。通過(guò)事件處理器，可以捕捉和處理用戶的鼠標(biāo)點(diǎn)擊、鍵盤(pán)輸入、頁(yè)面加載完成等事件，從而實(shí)現(xiàn)豐富的交互體驗(yàn)。

導(dǎo)讀：

JavaScript代碼嵌入HTML文檔
JavaScript代碼運(yùn)行方式
第一個(gè)實(shí)例
JavaScript的三種對(duì)話框
定義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ā)。可以使用JS添加、刪除、修改網(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)雙擊該文件觀察效果

代碼【#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ì)話框

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

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

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

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

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ì)話框案例

<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ì)話框返回的值（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ì)話框，可以返回用戶填入的字符串或數(shù)值，腳本樣例：

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

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

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

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

<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ì)話框出來(lái)后，在對(duì)話框里的默認(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);
變量名中只能有下劃線、美元符、字母和數(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
豎線的轉(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ù)處理或分析。

all-admin-web

前言

該項(xiàng)目為前后端分離項(xiàng)目的前端部分，后端項(xiàng)目mall地址：傳送門(mén)。

項(xiàng)目介紹

mall-admin-web是一個(gè)電商后臺(tái)管理系統(tǒng)的前端項(xiàng)目，基于Vue+Element實(shí)現(xiàn)。主要包括商品管理、訂單管理、會(huì)員管理、促銷(xiāo)管理、運(yùn)營(yíng)管理、內(nèi)容管理、統(tǒng)計(jì)報(bào)表、財(cái)務(wù)管理、權(quán)限管理、設(shè)置等功能。

項(xiàng)目演示

項(xiàng)目在線演示地址：http://39.98.190.128/index.html

項(xiàng)目布局

src -- 源碼目錄
├── api -- axios網(wǎng)絡(luò)請(qǐng)求定義
├── assets -- 靜態(tài)圖片資源文件
├── components -- 通用組件封裝
├── icons -- svg矢量圖片文件
├── router -- vue-router路由配置
├── store -- vuex的狀態(tài)管理
├── styles -- 全局css樣式
├── utils -- 工具類(lèi)
└── views -- 前端頁(yè)面
 ├── home -- 首頁(yè)
 ├── layout -- 通用頁(yè)面加載框架
 ├── login -- 登錄頁(yè)
 ├── oms -- 訂單模塊頁(yè)面
 ├── pms -- 商品模塊頁(yè)面
 └── sms -- 營(yíng)銷(xiāo)模塊頁(yè)面

搭建步驟

下載node并安裝：https://nodejs.org/dist/v8.9.4/node-v8.9.4-x64.msi;
該項(xiàng)目為前后端分離項(xiàng)目，訪問(wèn)本地訪問(wèn)接口需搭建后臺(tái)環(huán)境，搭建請(qǐng)參考后端項(xiàng)目傳送門(mén);
訪問(wèn)在線接口無(wú)需搭建后臺(tái)環(huán)境，只需將config/dev.env.js文件中的BASE_API改為http://39.98.190.128:8080即可;
克隆源代碼到本地，使用IDEA打開(kāi)，并完成編譯;
在IDEA命令行中運(yùn)行命令：npm install,下載相關(guān)依賴(lài);
在IDEA命令行中運(yùn)行命令：npm run dev,運(yùn)行項(xiàng)目;
訪問(wèn)地址：http://localhost:8090 即可打開(kāi)后臺(tái)管理系統(tǒng)頁(yè)面;
如果遇到無(wú)法運(yùn)行該命令，需要配置npm的環(huán)境變量，如在path變量中添加：C:\Users\zhenghong\AppData\Roaming\npm。

https://github.com/macrozheng/mall-admin-web

有時(shí)候我們需要知道某個(gè)頁(yè)面被訪問(wèn)的次數(shù)，這時(shí)我們就需要在頁(yè)面上添加頁(yè)面統(tǒng)計(jì)器，頁(yè)面訪問(wèn)的統(tǒng)計(jì)一般在用戶第一次載入時(shí)累加該頁(yè)面的訪問(wèn)數(shù)上。

要實(shí)現(xiàn)一個(gè)計(jì)數(shù)器，您可以利用應(yīng)用程序隱式對(duì)象和相關(guān)方法getAttribute()和setAttribute()來(lái)實(shí)現(xiàn)。

這個(gè)對(duì)象表示JSP頁(yè)面的整個(gè)生命周期中。當(dāng)JSP頁(yè)面初始化時(shí)創(chuàng)建此對(duì)象，當(dāng)JSP頁(yè)面調(diào)用jspDestroy()時(shí)刪除該對(duì)象。

以下是在應(yīng)用中創(chuàng)建變量的語(yǔ)法：

application.setAttribute(String Key, Object Value);

您可以使用上述方法來(lái)設(shè)置一個(gè)計(jì)數(shù)器變量及更新該變量的值。讀取該變量的方法如下：

application.getAttribute(String Key);

在頁(yè)面每次被訪問(wèn)時(shí)，你可以讀取計(jì)數(shù)器的當(dāng)前值，并遞增1，然后重新設(shè)置，在下一個(gè)用戶訪問(wèn)時(shí)就將新的值顯示在頁(yè)面上。

實(shí)例演示

該實(shí)例將介紹如何使用JSP來(lái)計(jì)算特定頁(yè)面訪問(wèn)的總?cè)藬?shù)。如果你要計(jì)算你網(wǎng)站使用頁(yè)面的總點(diǎn)擊量，那么你就必須將該代碼放在所有的JSP頁(yè)面上。

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>

<%@ page import="java.io.*,java.util.*" %>

<html>

<head>

</head>

<body>

Integer hitsCount =

(Integer)application.getAttribute("hitCounter");

if( hitsCount ==null || hitsCount == 0 ){

/* 第一次訪問(wèn) */

out.println("歡迎訪問(wèn)菜鳥(niǎo)教程!");

hitsCount = 1;

}else{

/* 返回訪問(wèn)值 */

out.println("歡迎再次訪問(wèn)菜鳥(niǎo)教程!");

hitsCount += 1;

}

application.setAttribute("hitCounter", hitsCount);

</body>

</html>

現(xiàn)在我們將上面的代碼放置于main.jsp文件上，并訪問(wèn)http://localhost:8080/testjsp/main.jsp文件。你會(huì)看到頁(yè)面會(huì)生成個(gè)計(jì)數(shù)器，在我們每次刷新頁(yè)面時(shí)，計(jì)數(shù)器都會(huì)發(fā)生變化（每次刷新增加1）。

你也可以通過(guò)不同的瀏覽器訪問(wèn)，計(jì)數(shù)器會(huì)在每次訪問(wèn)后增加1。如下所示：

復(fù)位計(jì)數(shù)器

使用以上方法，在 web 服務(wù)器重啟后，計(jì)數(shù)器會(huì)被復(fù)位為 0，即前面保留的數(shù)據(jù)都會(huì)消失，你可以使用一下幾種方式解決該問(wèn)題:

在數(shù)據(jù)庫(kù)中定義一個(gè)用于統(tǒng)計(jì)網(wǎng)頁(yè)訪問(wèn)量的數(shù)據(jù)表 count，字段為 hitcount，hitcount 默認(rèn)值為0，將統(tǒng)計(jì)數(shù)據(jù)寫(xiě)入到數(shù)據(jù)表中。
在每次訪問(wèn)時(shí)我們讀取表中 hitcount 字段。
每次訪問(wèn)時(shí)讓 hitcount 自增 1。
在頁(yè)面上顯示新的 hitcount 值作為頁(yè)面的訪問(wèn)量。
如果你需要統(tǒng)計(jì)每個(gè)頁(yè)面的訪問(wèn)量，你可以使用以上邏輯將代碼添加到所有頁(yè)面上。

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

在線咨詢

上一篇：HTML Reference 網(wǎng)頁(yè)開(kāi)發(fā)者必備手冊(cè)！
下一篇：HTML編碼規(guī)范

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷(xiāo)服務(wù)商

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

all-admin-web

您的項(xiàng)目需求