JavaScript和HTML文档 - 网络统计学编程
zhezhongyun 2024-12-01 19:19 29 浏览
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编程可以轻松调用各类统计学库函数和在网页上进行统计数据处理或分析。
相关推荐
- JPA实体类注解，看这篇就全会了
-
基本注解@Entity标注于实体类声明语句之前，指出该Java类为实体类，将映射到指定的数据库表。name(可选)：实体名称。缺省为实体类的非限定名称。该名称用于引用查询中的实体。不与@Tab...
- Dify教程02 - Dify+Deepseek零代码赋能，普通人也能开发AI应用
-
开始今天的教程之前，先解决昨天遇到的一个问题，docker安装Dify的时候有个报错，进入Dify面板的时候会出现“InternalServerError”的提示，log日志报错：S3_USE_A...
- 用离散标记重塑人体姿态:VQ-VAE实现关键点组合关系编码
-
在人体姿态估计领域，传统方法通常将关键点作为基本处理单元，这些关键点在人体骨架结构上代表关节位置（如肘部、膝盖和头部）的空间坐标。现有模型对这些关键点的预测主要采用两种范式：直接通过坐标回归或间接通过...
- B 客户端流RPC (clientstream Client Stream)
-
客户端编写一系列消息并将其发送到服务器，同样使用提供的流。一旦客户端写完消息，它就等待服务器读取消息并返回响应gRPC再次保证了单个RPC调用中的消息排序在客户端流RPC模式中，客户端会发送多个请...
- 我的模型我做主02——训练自己的大模型:简易入门指南
-
模型训练往往需要较高的配置，为了满足友友们的好奇心，这里我们不要内存，不要gpu，用最简单的方式，让大家感受一下什么是模型训练。基于你的硬件配置，我们可以设计一个完全在CPU上运行的简易模型训练方案。...
- 开源项目MessageNest打造个性化消息推送平台多种通知方式
-
今天介绍一个开源项目，MessageNest-可以打造个性化消息推送平台，整合邮件、钉钉、企业微信等多种通知方式。定制你的消息，让通知方式更灵活多样。开源地址：https://github.c...
- 使用投机规则API加快页面加载速度
-
当今的网络用户要求快速导航，从一个页面移动到另一个页面时应尽量减少延迟。投机规则应用程序接口（SpeculationRulesAPI）的出现改变了网络应用程序接口（WebAPI）领域的游戏规则。...
- JSONP安全攻防技术
-
关于JSONPJSONP全称是JSONwithPadding，是基于JSON格式的为解决跨域请求资源而产生的解决方案。它的基本原理是利用HTML的元素标签，远程调用JSON文件来实现数据传递。如果...
- 大数据Doris(六):编译 Doris遇到的问题
-
编译Doris遇到的问题一、js_generator.cc:(.text+0xfc3c):undefinedreferenceto`well_known_types_js’查找Doris...
- 网页内嵌PDF获取的办法
-
最近女王大人为了通过某认证考试，交了2000RMB，官方居然没有给线下教材资料，直接给的是在线教材，教材是PDF的但是是内嵌在网页内，可惜却没有给具体的PDF地址，无法下载，看到女王大人一点点的截图保...
- 印度女孩被邻居家客人性骚扰，父亲上门警告，反被围殴致死
-
微信的规则进行了调整希望大家看完故事多点“在看”，喜欢的话也点个分享和赞这样事儿君的推送才能继续出现在你的订阅列表里才能继续跟大家分享每个开怀大笑或拍案惊奇的好故事啦~话说只要稍微关注新闻的人，应该...
- 下周重要财经数据日程一览 (1229-0103)
-
下周焦点全球制造业PMI美国消费者信心指数美国首申失业救济人数值得注意的是，下周一希腊还将举行第三轮总统选举需要谷歌日历同步及部分智能手机（安卓，iPhone）同步日历功能的朋友请点击此链接，数据公布...
- PyTorch 深度学习实战(38):注意力机制全面解析
-
在上一篇文章中，我们探讨了分布式训练实战。本文将深入解析注意力机制的完整发展历程，从最初的Seq2Seq模型到革命性的Transformer架构。我们将使用PyTorch实现2个关键阶段的注意力机制变...
- 聊聊Spring AI的EmbeddingModel
-
序本文主要研究一下SpringAI的EmbeddingModelEmbeddingModelspring-ai-core/src/main/java/org/springframework/ai/e...
- 前端分享-少年了解过iframe么
-
iframe就像是HTML的「内嵌画布」，允许在页面中加载独立网页，如同在画布上叠加另一幅动态画卷。核心特性包括：独立上下文：每个iframe都拥有独立的DOM/CSS/JS环境（类似浏...
- 一周热门
- 最近发表
- 标签列表
-
- HTML 教程 (33)
- HTML 简介 (35)
- HTML 实例/测验 (32)
- HTML 测验 (32)
- HTML 参考手册 (28)
- JavaScript 和 HTML DOM 参考手册 (32)
- HTML 拓展阅读 (30)
- HTML中如何键入空格 (27)
- HTML常用标签 (29)
- HTML文本框样式 (31)
- HTML滚动条样式 (34)
- HTML5 浏览器支持 (33)
- HTML5 新元素 (33)
- HTML5 WebSocket (30)
- HTML5 代码规范 (32)
- HTML5 标签 (717)
- HTML5 标签 (已废弃) (75)
- HTML5电子书 (32)
- HTML5开发工具 (34)
- HTML5小游戏源码 (34)
- HTML5模板下载 (30)
- HTTP 状态消息 (33)
- HTTP 方法：GET 对比 POST (33)
- 键盘快捷键 (35)
- 标签 (226)