百度360必应搜狗淘宝本站头条
HTML5 标签标签HTML5 标签 (已废弃)HTML 简介键盘快捷键
当前位置：网站首页 > 技术文章 > 正文

JavaScript和HTML文档 - 网络统计学编程

zhezhongyun 2024-12-01 19:19 54 浏览

JavaScript（简称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编程可以轻松调用各类统计学库函数和在网页上进行统计数据处理或分析。

相关推荐

3 分钟!AI 从零开发五子棋全过程曝光，网友:这效率我服了

<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="UTF-8...

一行代码实现display&quot;过渡动画&quot;原理

作者：Peter谭老师转发链接：https://mp.weixin.qq.com/s/XhwPOv62gypzq5MhhP-5vg写本文的起因上篇文章，提到如何让display出现过渡动画，却没有仔...

脑洞:琼恩·雪诺、蝙蝠侠和魔形女的灵魂宠物了解一下

AlekseiVinogradovisaRussianfreelancedigitalartistwhoshareshisskillsandtalentwith120k...

浏览器的渲染机制、重绘、重排

1、什么是重排和重绘网页生成过程：HTML被HTML解析器解析成DOM树css则被css解析器解析成CSSOM树结合DOM树和CSSOM树，生成一棵渲染树(RenderTree)生成布局（flo...

托福写作高频考题写作思路&amp;词汇丨考虫独家

科技话题与媒体话题是托福写作的常考话题很多考生对这两类话题里的专有词汇表达也许很不了解所以今天就跟随考虫托福写作老师刘云龙老师一起来学习在这些话题的写作里你可以使用哪些有用的表达。希望大家有收获！记得...

在优麒麟上使用 Electron 开发桌面应用

使用Web标准来创建桌面GUI，上手快、成本低、跨平台、自适应分辨率，这些都是Electron的优势。作者/来源：优麒麟Electron是由Github开发，用HTML、CSS和...

php手把手教你做网站(三十八)jquery 转轮盘抽奖，开盲盒

抽奖和开盲盒性质一样的都是通过ajax读取后台的随机数据。1、转轮盘本来是想直接绘图实现轮盘，但是没有找到怎么填充文字，只好把轮盘弄成了背景图，通常用于游戏抽道具，商城积分抽奖，公司年末员工抽奖点击抽...

用 CSS 整活!3D 轮播图手把手教学，快乐代码敲出来

兄弟们，今天咱来搞点好玩的——用CSS整一个3D轮播图！咱野生程序员就是要在代码里找乐子，技术和快乐咱都得要！代码是写不完的，但咱能自己敲出快乐来，走起！一、先整个容器，搭个舞台咋先写一个...

实现一个超酷的 3D 立体卡片效 #前端开发

今天我们来实现一个超酷的3D立体卡片效果。正常情况下就是一个普通的图片展示卡片，鼠标悬停的时候图片会跳出卡片，并将影子投射到背景卡片上，在视觉上有一个3D立体感。html主要分成3个部分：容器→背景层...

Vue 3 Teleport与Suspense:解决UI难题的两个&quot;隐藏大招&quot;

模态框的"层级噩梦"与Teleport的救赎"这个模态框怎么又被父容器截断了？"团队协作开发后台系统时，小张第N次遇到这个问题。多层嵌套的组件结构里，弹窗被overfl...

让交互更加生动!有意思的鼠标跟随 3D 旋转动效

今天，群友问了这样一个问题，如下所示的鼠标跟随交互效果，如何实现：简单分析一下，这个交互效果主要有两个核心：借助了CSS3D的能力元素的旋转需要和鼠标的移动相结合本文，就将讲述如何使用纯CSS...

填坑:transform元素导致zindex失效终极方法

今天遇到了使用css3动画的元素层级被放大置顶的问题，ios浏览器上没问题，安卓原生浏览器和安卓微信上有问题。使用了css3动画的元素z-index失效，兄弟元素设置多高的z-index都盖不住解决办...

诡异的层级错乱:一个被transform隐藏的CSS陷阱

周五下午三点十七分，设计部突然发来紧急截图——原本应该悬浮在顶部的导航菜单，此刻正诡异地被下方的轮播图遮挡。我盯着屏幕上错乱的层级关系，手指下意识地敲下z-index:9999，心里清楚这不过是程序...

动画篇--碎片动画

本文授权转载，作者：Sindri的小巢（简书）前言从最开始动笔动画篇的博客，至今已经过去了四个多月。这段时间回头看了看自己之前的动画文章，发现用来讲解动画的例子确实不那么的赏心悦目。于是这段时间总是想...

Nature:大洋转换断层处的拉张构造与两阶段地壳增生

Nature：大洋转换断层处的拉张构造与两阶段地壳增生转换断层是三种基本的板块边界之一，全球总长度超过48000km（Bird,2003），它们的发现为板块构造理论的建立奠定了重要的基础（Wil...

一周热门
最近发表
标签列表