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

您的项目需求