JavaScript和HTML文檔 - 網絡統計學編程

avaScript（簡稱JS）是一種廣泛用于Web開發的腳本語言，用于為網頁添加交互性和動態內容。它是一種高級、解釋性、基于對象和事件驅動的編程語言，由Netscape公司首先引入并在1995年推出。JavaScript通常嵌入在HTML文檔中，并通過Web瀏覽器在客戶端執行。

JavaScript的語法基于C語言，但也借鑒了Java和其他編程語言的特點。它支持動態類型，允許在運行時更改變量的類型，不需要提前聲明變量的類型。JavaScript也是一種弱類型語言，它會自動進行類型轉換，使得在一些情況下比較靈活，但也需要小心處理類型相關的問題。

JavaScript可以用于處理各種任務，包括但不限于網頁動態交互、表單驗證、動畫效果、數據處理、服務器端開發（如Node.js）、移動應用開發（如React Native）等。JavaScript具有豐富的標準庫，提供了很多內置對象和函數，同時也支持通過第三方庫（如jQuery、React、Vue等）擴展其功能。

JavaScript具有事件驅動的編程模型，可以對用戶的操作或其他事件做出響應。通過事件處理器，可以捕捉和處理用戶的鼠標點擊、鍵盤輸入、頁面加載完成等事件，從而實現豐富的交互體驗。

導讀：

JavaScript代碼嵌入HTML文檔
JavaScript代碼運行方式
第一個實例
JavaScript的三種對話框
定義JavaScript變量
JavaScript運算符和操作符
JavaScript的轉義字符

JavaScript腳本語言(JS)的特點：

JavaScript是一種解釋性腳本語言（代碼不進行預編譯）；
主要用來向HTML（標準通用標記語言下的一個應用）頁面添加交互行為；
可以直接嵌入HTML頁面，但寫成單獨的js文件有利于結構和行為的分離；
跨平臺特性，在絕大多數瀏覽器的支持下，可以在多種平臺下運行。

JavaScript是一種網頁腳本語言，被廣泛用于Web應用開發。可以使用JS添加、刪除、修改網頁上的所有元素及屬性；在HTML網頁中動態寫入文本、數字和插入圖表；響應網頁中的事件，并做出相應處理。了解JS編程后，可以輕松調用各類網絡統計學庫函數和在網頁上統計數據處理或分析。

一、JavaScript嵌入HTML文檔

1、JavaScript代碼嵌入HTML文檔

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

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>銀河網絡統計學教程</title>
<style>
    網頁內部樣式CSS代碼
</style>
<script language="JavaScript">
//*JavaScript腳本代碼*
</script>
</head>
<body>
    文檔體HTML代碼
</body>
</html>

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

2、JavaScript代碼運行方式

(1) 網頁打開時自動調用JS代碼

【#Code 102】：網頁打開時自動調用JS代碼案例

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>銀河網絡統計學教程</title>
<style>
		網頁內部樣式CSS代碼
</style>
<script language="JavaScript">
//*JavaScript腳本代碼*
function init() {
		alert("加載網頁時提示我!");
}
</script>
</head>
<body onload="init()">
		文檔體HTML代碼
</body>
</html>

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

代碼【#Code 102】中，瀏覽器解析完HTML文檔體代碼后，觸發body標簽的onload網頁加載事件，從而運行JS函數init()。

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

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

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

注：JavaScript腳本代碼中的標點符號都必須為半角英文字符。JavaScript腳本可以插入注釋語句，注釋語句增加代碼可讀性，不被瀏覽器解析執行。符號"/.../"為單行注釋，符號"/*...*/"為多行行注釋

例如：

<script language="JavaScript">
//這是單行注釋
/*
	這是多行注釋；
	銀河網絡統計學教程。
*/
}
</script>

二、JavaScript語法

1、第一個實例

打開網頁時，瀏覽器中顯示"Hello World!

【#Code 104】：第一個網頁“Hello World!”案例

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

2、JavaScript的三種對話框

（1）提醒對話框，不能對腳本產生任何改變，腳本樣例：

alert("提醒對話框");

在網頁中的運用參見#Code 102。

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

confirm("你確信要學習網絡統計學嗎？")

confirm函數返回true或者false，網頁設計中運用實例，

【#Code 105】：JavaScript確認對話框案例

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

（3）輸入對話框，可以返回用戶填入的字符串或數值，腳本樣例：

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

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

prompt函數返回用戶填入的字符串或數值，網頁設計中運用實例，

【#Code 106】：JavaScript輸入對話框案例

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

注:prompt有兩個參數，前面是提示的信息，后面是當對話框出來后，在對話框里的默認值

3、定義JavaScript變量

JavaScript是弱類型語言，聲明變量時用var關鍵字（注意var要全部小寫）就可以了。而很多編程語言聲明變量時，需要指明變量的類型，如：int, double, string, boolean, date, array, object等；而且變量類型一旦指定，就不能改變了。但在JavaScript中不同，只需用var，且數據類型可以改變。但要請注意變量的命名規：

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

通常使用var（或let）關鍵字定義變量，如:

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

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

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

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>銀河網絡統計學教程</title>
<style></style>
<script language="JavaScript">
var myName = "銀河統計學"; //myName是全局變量
function init() {
    var total=346;
    var value=45.7865;
    var notNull=true;
    var name="張三", gender="男";
    var i=j=0;
    var hobby=["聽音樂","看電影"];
    hobby[2]="打籃球"; //數組賦值
    stdId = 2016; //全局變量
    var d = new Date(); //定義日期時間變量（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/>"); //參見JS日期對象
  	var ostr=	"<p/><i>下面調用函數test()，輸出該函數體內的全局和局部變量。";
    ostr+="<br/>全局可以輸出，局部變量局部變量total無法輸出。</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>

注：代碼中"+="為連加運算符，將一行過長代碼分段代碼連接起來；"變量name="+name+"<br/>"中符號"+"連接字符串和變量

4、JavaScript運算符和操作符

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

JavaScript操作符比較復雜，下面介紹JS運算符和常用操作符。

（1）算數操作符

除了加號（+）之外，如果操作數不是Number類型，會自動先調用Number()將其轉換為Number類型再進行計算；除號（/）和取模（%）并不會區分整數和浮點數，都會自動轉化為浮點數。

（2）字符串操作符

字符串連接符號（+）相當于concat()函數，會將操作數據轉化為字符串再連接。在字符串和數值型進行+號運算時，會將數值型轉為字符串。

（3）布爾操作符

布爾邏輯操作符！（非、not）、&&（與、and）、||（或、or）常和if等條件函數一起判斷一個變量或屬性是否有定義。

【#Code 108】：JavaScript運算符和操作符案例

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>銀河網絡統計學教程</title>
<style></style>
<script language="JavaScript">
document.write("<p><b>//算術操作符</b></p>");
var x = 11;
var y = 5;
with (document) { //注意with關鍵字用法，其用于簡化代碼
        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>//++運算練習</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++ 運算之后：");
x = y++;//y→x，y+1→y
write("x 是 ", x, "; y 是 ", y, "<br>");
write("再作x = ++y 運算：");
x = ++y;//y+1→x，y+1→y
write("x 是 ", x, "; y 是 ", y);
}

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

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

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

</body>
</html>

三、JavaScript的轉義字符

可以在 JavaScript 中使用反斜杠來向文本字符串添加特殊字符。對于某些特殊的字符，無法用鍵盤直接鍵入，這時就需要使用轉義字符。還有一些字符（符號）用于特殊的用途，比如引號，如果要在字符串內包含引號，就需要使用轉義字符。切記，每一個轉義字符都是以反斜杠“\”開始的。

1、無法用鍵盤錄入的轉義字符

轉義字符	字符	轉義字符	字符
\b	退格符	\f	換頁符
\n	換行符	\r	回車符
\t	制表符	\"	雙引號
\'	單引號	\	反斜杠

2、特殊用途符號轉義字符

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

JavaScript代碼如下：

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

將script標簽內的JavaScript腳步代碼復制、粘貼到銀河統計JavaScript腳本測試工具，運行結果如下：

我的名字叫“張三”，這段文字已經被雙引號，按JS語法規則，雙引號中不能包括雙引號。為了顯示是姓名被雙引號，在姓名雙引號前加反斜杠。

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

HTML+CSS+JS是前端網頁開發的基礎，JS(JavaScript)在HTML網頁中動態寫入文本、數字和插入圖表。掌握JavaScript編程可以輕松調用各類統計學庫函數和在網頁上進行統計數據處理或分析。

all-admin-web

前言

該項目為前后端分離項目的前端部分，后端項目mall地址：傳送門。

項目介紹

mall-admin-web是一個電商后臺管理系統的前端項目，基于Vue+Element實現。主要包括商品管理、訂單管理、會員管理、促銷管理、運營管理、內容管理、統計報表、財務管理、權限管理、設置等功能。

項目演示

項目在線演示地址：http://39.98.190.128/index.html

項目布局

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

搭建步驟

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

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

有時候我們需要知道某個頁面被訪問的次數，這時我們就需要在頁面上添加頁面統計器，頁面訪問的統計一般在用戶第一次載入時累加該頁面的訪問數上。

要實現一個計數器，您可以利用應用程序隱式對象和相關方法getAttribute()和setAttribute()來實現。

這個對象表示JSP頁面的整個生命周期中。當JSP頁面初始化時創建此對象，當JSP頁面調用jspDestroy()時刪除該對象。

以下是在應用中創建變量的語法：

application.setAttribute(String Key, Object Value);

您可以使用上述方法來設置一個計數器變量及更新該變量的值。讀取該變量的方法如下：

application.getAttribute(String Key);

在頁面每次被訪問時，你可以讀取計數器的當前值，并遞增1，然后重新設置，在下一個用戶訪問時就將新的值顯示在頁面上。

實例演示

該實例將介紹如何使用JSP來計算特定頁面訪問的總人數。如果你要計算你網站使用頁面的總點擊量，那么你就必須將該代碼放在所有的JSP頁面上。

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

pageEncoding="UTF-8"%>

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

<html>

<head>

<title>訪問量統計</title>

</head>

<body>

Integer hitsCount =

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

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

/* 第一次訪問 */

out.println("歡迎訪問菜鳥教程!");

hitsCount = 1;

}else{

/* 返回訪問值 */

out.println("歡迎再次訪問菜鳥教程!");

hitsCount += 1;

}

application.setAttribute("hitCounter", hitsCount);

<p>頁面訪問量為: <%= hitsCount%></p>

</body>

</html>

現在我們將上面的代碼放置于main.jsp文件上，并訪問http://localhost:8080/testjsp/main.jsp文件。你會看到頁面會生成個計數器，在我們每次刷新頁面時，計數器都會發生變化（每次刷新增加1）。

你也可以通過不同的瀏覽器訪問，計數器會在每次訪問后增加1。如下所示：

復位計數器

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

在數據庫中定義一個用于統計網頁訪問量的數據表 count，字段為 hitcount，hitcount 默認值為0，將統計數據寫入到數據表中。
在每次訪問時我們讀取表中 hitcount 字段。
每次訪問時讓 hitcount 自增 1。
在頁面上顯示新的 hitcount 值作為頁面的訪問量。
如果你需要統計每個頁面的訪問量，你可以使用以上邏輯將代碼添加到所有頁面上。

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

在線咨詢

上一篇：HTML Reference 網頁開發者必備手冊！
下一篇：HTML編碼規范

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

JavaScript和HTML文檔 - 網絡統計學編程

all-admin-web

您的項目需求