JavaScript和HTML文档 - 网络统计学编程
zhezhongyun 2024-12-01 19:19 44 浏览
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编程可以轻松调用各类统计学库函数和在网页上进行统计数据处理或分析。
相关推荐
- JavaScript做个贪吃蛇小游戏(过关-加速)，无需网络直接玩。
-
JavaScript做个贪吃蛇小游戏（过关-则加速）在浏览器打开文件，无需网络直接玩。<!DOCTYPEhtml><htmllang="en"><...
- 大模型部署加速方法简单总结（大模型 ai）
-
以下对大模型部署、压缩、加速的方法做一个简单总结，为后续需要备查。llama.cppGithub:https://github.com/ggerganov/llama.cppLLaMA.cpp项...
- 安徽医大第一医院应用VitaFlow Liberty(R)Flex为患者焕然一“心”
-
近日，在安徽医科大学第一附属医院心血管内科负责人暨北京安贞医院安徽医院业务副院长喻荣辉教授的鼎力支持和卓越带领下，凭借着先进的VitaFlowLiberty(R)Flex经导管主动脉瓣可回收可...
- 300 多行代码搞定微信 8.0 的「炸」「裂」特效!
-
微信8.0更新的一大特色就是支持动画表情，如果发送的消息只有一个内置的表情图标，这个表情会有一段简单的动画，一些特殊的表情还有全屏特效，例如烟花表情有全屏放烟花的特效，炸弹表情有爆炸动画并且消息和...
- 让div填充屏幕剩余高度的方法（div填充20px）
-
技术背景在前端开发中，经常会遇到需要让某个div元素填充屏幕剩余高度的需求，比如创建具有固定头部和底部，中间内容区域自适应填充剩余空间的布局。随着CSS技术的发展，有多种方法可以实现这一需求。实现步骤...
- css之div内容居中（css中div怎么居中）
-
div中的内容居中显示，包括水平和垂直2个方向。<html><head><styletype="text/css">...
- 使用uniapp开发小程序遇到的一些问题及解决方法
-
1、swiper组件自定义知识点swiper组件的指示点默认是圆圈，想要自己设置指示点，需要获得当前索引，然后赋给当前索引不同的样式，然后在做个动画就可以了。*关键点用change方法，然后通过e.d...
- 微信小程序主页面排版（怎样设置小程序的排版）
-
开发小程序的话首先要了解里面的每个文件的作用小程序没有DOM对象，一切基于组件化小程序的四个重要的文件*.js*.wxml--->view结构---->html*.wxss--...
- Vue动态组件的实践与原理探究（vue动态组件component原理）
-
我司有一个工作台搭建产品，允许通过拖拽小部件的方式来搭建一个工作台页面，平台内置了一些常用小部件，另外也允许自行开发小部件上传使用，本文会从实践的角度来介绍其实现原理。ps.本文项目使用VueCLI...
- 【HarmonyOS Next之旅】兼容JS的类Web开发(四) -＞ tabs
-
目录1->创建Tabs2->设置Tabs方向3->设置样式4->显示页签索引5->场景示例编辑1->创建Tabs在pages/index目录...
- CSS:前端必会的flex布局，我把布局代码全部展示出来了
-
进入我的主页，查看更多CSS的分享！首先呢，先去看文档，了解flex是什么，这里不做赘述。当然，可以看下面的代码示例，辅助你理解。一、row将子元素在水平方向进行布局：1.垂直方向靠顶部，水平方向靠...
- 【HarmonyOS Next之旅】兼容JS的类Web开发(四) -＞ swiper
-
目录1->创建Swiper组件2->添加属性3->设置样式4->绑定事件5->场景示例编辑1->创建Swiper组件在pages/index...
- CSS:Flex布局，网页排版神器!（css3 flex布局）
-
还在为网页排版抓狂？别担心，CSS的flex布局来了，让你轻松玩转各种页面布局，实现网页设计自由！什么是Flex布局？Flex布局，也称为弹性布局，是CSS中的一种强大布局方式，它能够让你...
- 移动WEB开发之flex布局，附携程网首页案例制作
-
一、flex布局体验传统布局兼容性好布局繁琐局限性，不能再移动端很好的布局1.1flex弹性布局：操作方便，布局极为简单，移动端应用很广泛PC端浏览器支持情况较差IE11或更低版本，不支持或仅部...
- 2024最新升级–前端内功修炼 5大主流布局系统进阶(mk分享)
-
2024最新升级–前端内功修炼5大主流布局系统进阶(mk分享)获课》789it.top/14658/前端布局是网页设计中至关重要的一环，它决定了网页的结构和元素的排列方式。随着前端技术的不断发展，现...
- 一周热门
- 最近发表
-
- JavaScript做个贪吃蛇小游戏(过关-加速)，无需网络直接玩。
- 大模型部署加速方法简单总结（大模型 ai）
- 安徽医大第一医院应用VitaFlow Liberty(R)Flex为患者焕然一“心”
- 300 多行代码搞定微信 8.0 的「炸」「裂」特效!
- 让div填充屏幕剩余高度的方法（div填充20px）
- css之div内容居中（css中div怎么居中）
- 使用uniapp开发小程序遇到的一些问题及解决方法
- 微信小程序主页面排版（怎样设置小程序的排版）
- Vue动态组件的实践与原理探究（vue动态组件component原理）
- 【HarmonyOS Next之旅】兼容JS的类Web开发(四) -＞ tabs
- 标签列表
-
- HTML 教程 (33)
- HTML 简介 (35)
- HTML 实例/测验 (32)
- HTML 测验 (32)
- JavaScript 和 HTML DOM 参考手册 (32)
- HTML 拓展阅读 (30)
- 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)
- HTML button formtarget 属性 (30)
- CSS 水平对齐 (Horizontal Align) (30)