静态网页怎样实现动态交互?-JavaScript

2023-11-16

Html基础上,javascript能够开发交互式web网页。javascript的出现使得网页和用户之间实现了一种实时性的、动态的、交互性的关系,javascript短小精悍,又是在客户机上执行的。大大提高了网页的浏览速度和交互能力。同一时候它又是专门为制作web网页而量身定做的一种简单的编程语言。

 

  1. Javascript:一种脚本语言(scripting language),或称描写叙述性语言。
  1. 主要用途在表单验证:大多数是通过弹出对话框来与用户交互的
  2. 在程序执行过程中逐行地进行解释,是一种解释性语言。
  1. 解释性语言:边执行,边编译
  2. 编译性语言:借助之前的运行过程以增强当次运行的效率
  1. 基于对象的语言:javascript是一种基于对象的语言,同一时候也能够看做一种面向对象的语言。这意味着它能运用自己已经创建的对象。

    因此,很多功能能够来自于脚本环境中对象的方法与脚本的相互作用

  1. 变量类型是弱类型,并未使用严格的数据类型
  2. javascript是一种安全性语言。它不同意訪问本地硬盘,并不能数据存数到server上。不同意对网络文档进行改动和删除,仅仅能通过浏览器实现信息浏览或动态交互。从而有效防止数据的丢失。

  1. javascript是依赖于浏览器本身,与操作环境无关。仅仅要能执行浏览器的计算机,并支持javascript的浏览器就能够正确执行
  1. javascript的两大机制:面向对象,事件处理机制。

    举一个Javascript的小样例

     

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>博客小样例</title>
    <style type="text/css">
    
    #btnLogin, #btnExit{
    	width:70px;
    	height:30px;
    	font-family:幼圆;
    	font-weight:bold;
    	font-size:18px;
    	}
    
    #form1 p strong {
    	font-family: "幼圆";
    	font-size:18px;
    }
    
    #txtUserPwd, #txtUserName
    {
    	width:200px;
    	height:25px;
    	font-family:幼圆;
    	font:bold;
    	font-size:18px;}
    
    #usermessagee
    {
    	border-width:0px;}
    
    #form1
    {
    	alignment-adjust:middle;
    	
    	}
    </style>
    
        
    </head>
    <body>
    <center>
    
        <form id="form1" name="form1" method="post" action="http://blog.csdn.net/tgbsqliuying" >
        
          <p><strong>用户名:</strong>
            <input type="text" name="txtUserName" id="txtUserName" />
          </p>
          <p><strong> 密 码:</strong>
            <input type="text" name="txtUserPwd" id="txtUserPwd" />
          </p>
          
          <p>       
               //利用onclick实现事件驱动                
              <input type="button" name="btnLogin" id="btnLogin"  value="登陆"  οnclick="LogIn()"/>
          </p>
          
        </form>
    
    </center>
    </body>
    
    </html>
    <script language="javascript" type="text/javascript">
    	function LogIn()
    	{
    
    			//顺序结构(用keywordvar声明keyword,说明javascript是弱数据类型)
    			var username=document.form1.txtUserName.value;
    			var userpwd=document.form1.txtUserPwd.value;
    			if(username==""||username=="")//选择结构
    			{
    				alert("用户名不能为空。");
    				document.form1.txtUserName.focus();
    				return;
    				}
    			//利用正則表達式推断输入的用户名是否正确
    			var reg=/^[\u4E00-\u9FA5\uF900-\uFA2D\w]+$/g;
    			if(!reg.test(username))
    			{
    				alert("用户名格式不对。请从新输入");
    				return;
    				}
    				
    			if (userpwd==""||username=="")
    			{
    				alert("password不能为空!

    "); document.form1.txtUserPwd.focus(); return; } //利用正則表達式推断输入的password是否正确 reg=/^[\u4E00-\u9FA5\uF900-\uFA2D\w]+$/g; if(!reg.test(userpwd)) { alert("password格式不对!请从新输入"); return; } document.form1.submit(); } </script>


    相信以后的学习会对Javascript有更深的理解

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

静态网页怎样实现动态交互?-JavaScript 的相关文章

  • createHTMLNotification() 替换

    我创建了一个 Chrome 扩展程序 其中使用createHTMLNotification 在所有内容之上显示一个窗口 然而 从 Chrome 28 开始 谷歌决定放弃createHTMLNotification 完全 为什么 谷歌 为什么
  • 在 HTML5 Javascript 中将 BlobBuilder 转换为字符串

    function blobToString blob var reader new FileReader var d reader onloadend function d callback reader result console lo
  • Firebase,只得到新的孩子[重复]

    这个问题在这里已经有答案了 var firebase new Firebase firebaseRef on child added function snapshot 这将接收所有元素 有没有办法在创建新的 Firebase 引用时不接收
  • 在 Internet Explorer 中使用什么来监视 jscript 内存使用情况

    我们正在调试 GWT 应用程序 在 Firefox 中运行正常 在 IE6 0 中开始运行正常 但一段时间后 它就会崩溃并开始爬行 经过一些测试后 我们怀疑存在一些内存问题 使用了太多内存 内存泄漏等 除了使用taskmanager和pro
  • 如何在没有 jQuery 的情况下删除 Javascript 中的元素

    我试图通过以下方式从 DOM 中删除 Div a 标签嵌套在其中 我想我正在寻找的是 jQuery 的纯 Javascript 版本 div remove 这是html设置 div a href Click me to remove the
  • Angular.js:如何从无序列表中获取 orderBy 或过滤器来工作?

    尝试根据价格和评级 在返回的对象中 进行排序 我宁愿用 ng click 和 li 来代替使用选择菜单 有没有办法做到这一点 我环顾四周 这是我能想到的最接近的 ul class restaurant filter li i class i
  • 导航栏下拉菜单(折叠)在 Bootstrap 5 中不起作用

    我在尝试使用以下命令创建响应式菜单或下拉按钮时遇到问题Bootstrap 5一切似乎都正常 导航图标和下拉图标出现 但它不起作用 当我单击nav图标或dropdown按钮 无dropdown menu apears 我想特别提到的是 我还包
  • 为什么 setTimeout 在 Chrome 中触发两次,而在 IE 或 Firefox 中则不然?

    有人能告诉我为什么 javascript 函数 生成新号码 在 Chrome 中触发两次 但在 IE 或 Firefox 中则不会 使用 Chrome 20 0 1132 57 IE9 和 Firefox 13
  • 如何通过单击链接来更改 div 的内容?

    这是我的网页的 修改后的 jsfiddle 它还有很多 而且定位是正确的 与此相反 http jsfiddle net ry0tec3p 1 http jsfiddle net ry0tec3p 1 a href class btn1 st
  • React Router v4 不渲染组件

    React Router v4 渲染组件存在问题 在应用程序初始加载时 它将呈现与 URL 相对应的正确组件 但是 任何后续的组件Link单击不会呈现所需的组件 图书馆 反应路由器 4 2 2 https reacttraining com
  • 计算三次贝塞尔曲线的弧长、曲线长度。为什么不工作?

    我正在用这个算法计算弧长 三次贝塞尔曲线的长度 function getArcLength path var STEPS 1000 gt precision var t 1 STEPS var aX 0 var aY 0 var bX 0
  • onclick 事件中未调用函数

    我想在每个 YouTube 链接的末尾添加一些 HTML 以在 litebox 中打开播放器 到目前为止 这是我的代码 document ready function var valid url new RegExp youtube com
  • 将 Firebase 云消息传递与 Windows 应用程序结合使用

    我在 Android 和 iOS 应用程序中使用 Firebase Cloud Messaging 但是我还有此应用程序的 Windows Mac OS 版本 我想保留相同的逻辑 我知道 Firebase Cloud Messaging 可
  • 使用 JavaScript 移动页面上的按钮

    我的按钮可以移动 但奇怪的是 我无法弄清楚偏移是否有问题 我希望我的按钮随着鼠标光标移动 但现在它的移动方式不是我想要的 有时它会消失 另外 创建的新按钮是重叠的 我不知道如何解决这个问题并拥有更好的外观 var coorA var coo
  • 使用 Javascript 设置 cookie [重复]

    这个问题在这里已经有答案了 我正在尝试构建我的第一个移动应用程序 它需要连接到我的 mysql 数据库并使用 json 返回数据 这很好 目前我有一个登录系统 一旦确定用户名和密码存在 它就会返回一条成功消息 对于下一步 我想在我的页面上使
  • 如何使用 JavaScript 或 jQuery 克隆 HTML 元素的样式对象?

    我正在尝试克隆元素的样式对象 这应该允许我在更改后重置所述元素的样式 例如 el style left 50px curr style left 50px Modify the elements style The cloned style
  • 主页(网格)上的缩略图现在显得模糊。如何纠正?

    我不知道这看起来是否愚蠢 但从早上开始我就无法纠正这个突然出现在我的博客网站上的错误www candidopinions in http www candidopinions in 我有一个网格视图模板 其中博客文章中的特色图像作为调整大小
  • 使用 next.js 进行服务器端渲染与传统 SSR

    我非常习惯 SSR 意味着页面得到完全刷新并从服务器接收完整 HTML 的方法 其中根据后端堆栈使用 razor pub other 进行渲染 因此 每次用户单击导航链接时 它只会向服务器发送请求 整个页面将刷新 接收新的 HTML 这就是
  • react-native - 图像需要来自 JSON 的本地路径

    你好社区 我正在react native中开发一个测试应用程序 并尝试从本地存储位置获取图像 我实际在做什么 我将图像直接链接源提供给 var 并在渲染函数中调用此方法 react 0 14 8 react native 0 23 1 np
  • 测量窗口偏移

    有没有一种方法可以测量 jQuery 中窗口的偏移量 以便我可以比较 固定 元素和相对定位元素的位置 我需要能够知道窗口滚动了多远 以便我可以使用该图来计算固定元素的高度 相对于视口顶部 和相对对象的高度 相对于顶部 之间的差异文件的内容

随机推荐

  • 【Vue2.0源码学习】实例方法篇-生命周期相关方法

    文章目录 0 前言 1 vm mount 1 1 用法回顾 1 2 内部原理 2 vm forceUpdate 2 1 用法回顾 2 2 内部原理 3 vm nextTick 3 1 用法回顾 3 2 JS的运行机制 3 3 内部原理 能力
  • 时空猎人服务器维护中是什么意思,时空猎人玩家自助FAQ问题汇总新手必备

    玩家自助FAQ问题汇总新手必备 你总能碰到各种各样的游戏问题 或机型问题 这里整理了一个常见问题解决办法 FAQ 可以帮忙大家 一 运行时程序异常退出建议玩家按照以下方式处理 1 清理缓存 关闭空闲软件 再次登录游戏 2 如果问题反复出现建
  • java8_02_stream(一)创建流和中间操作

    Stream 主要分为三部分 1 创建流 2 中间操作 3 终止操作 一 创建流的四种方法 Collection系列集合的stream parallelStream 方法 Stream stringStream list stream Ar
  • 在 ASP.NET Core 应用程序启动时运行代码的 3 种方法

    开发人员应该将初始化内存缓存的代码放在哪里 开发人员可能会发现有必要在 ASP NET Core 应用程序启动时只执行一次代码 例如 开发人员可能需要填充内存缓存 运行后台任务 从某些外部源读取配置 发布应用程序成功启动的事件等 ASP N
  • 序列化工具

    import java io ByteArrayInputStream import java io ByteArrayOutputStream import java io Closeable import java io ObjectI
  • 详解JavaScript中的Event Loop(事件循环)机制

    转载 javascript从诞生之日起就是一门单线程的非阻塞的脚本语言 单线程意味着 javascript代码在执行的任何时候 都只有一个主线程来处理所有的任务 而非阻塞则是当代码需要进行一项异步任务 无法立刻返回结果 需要花一定时间才能返
  • nginx下载并安装

    一 nginx简介 什么是 nginx 和可以做什么事情 Nginx 是高性能的 HTTP 和反向代理的web服务器 处理高并发能力是十分强大的 能经受高负 载的考验 有报告表明能支持高达 50 000 个并发连接数 其特点是占有内存少 并
  • python 贪吃蛇小游戏代码

    usr bin python coding UTF 8 作者 黄哥 链接 https www zhihu com question 55873159 answer 146647646 来源 知乎 著作权归作者所有 商业转载请联系作者获得授权
  • 再见!微软官宣放弃Mac 版 Visual Studio IDE

    程序员的成长之路 互联网 程序员 技术 资料共享 关注 阅读本文大概需要 5 分钟 来自 撰稿丨千山 对于Visual Studio 只要是开发者 或多或少都接触过 发布于1997年的Visual Studio标志着微软第一次将这么多开发工
  • 关系代数之专门的关系运算(选择、投影)

    选择 选择运算是从指定的关系中选出满足给定条件 用逻辑表达式表达 的元组而组成一个新的关系 进行选择运算的对象是 一个关系当中某一个属性的值 选择运算是将一张表当中的某一属性进行筛选 比如 将性别 sex 这列当中性别为女的元组筛选出来组成
  • constraint的一些用法总结

    主要就是增加约束的 以下几种约束 并 一一列举 1 主键约束 要对一个列加主键约束的话 这列就必须要满足的条件就是分空 因为主键约束 就是对一个列进行了约束 约束为 非空 不重复 以下是代码 要对一个列加主键 列名为id 表名为emp 格式
  • 刷脸支付:双12刷脸支付5折省翻天,政策持续补贴预热双十二

    刷脸支付成潮流 三家巨头争江山 刷脸支付的使用场景正在深入拓展 进入每一个与人民生活息息相关的行业 在政府综合政务 社会公交运输 商超营销运营 酒店景区服务等各方面都出现了刷脸支付的身影 我们能够看到 科技是在进步的 社会是在进步的 二维码
  • Caffe2——cifar10数据集创建lmdb或leveldb类型的数据

    cifar10数据集和mnist数据集存储方式不同 cifar10数据集把标签和图像数据以bin文件的方式存放在同一个文件内 这种存放方式使得每个子cifar数据bin文件的结构相同 所以cifar转换数据代码比mnist的代码更加的模块化
  • Vue项目提示 doesn‘t work properly without JavaScript enabled. Please enable it to continue

    由于本地是用docker部署了一套微服务 为了避免跨越问题 前端使用的nginx配置转发后端路径 访问返回状态时200 但是在response返回We re sorry but doesn t work properly without J
  • 「雕爷学编程」Arduino动手做(37)——MQ-3乙醇易燃气酒精传感器模块

    37款传感器与模块的提法 在网络上广泛流传 其实Arduino能够兼容的传感器模块肯定是不止37种的 鉴于本人手头积累了一些传感器和模块 依照实践出真知 一定要动手做 的理念 以学习和交流为目的 这里准备逐一动手试试做实验 不管成功与否 都
  • Android studio心得——fragment动态加载

    前言 在Android应用程序中 Fragment是一种可以嵌入Activity中的组件 通过 Fragment 我们可以将UI 目录 前言 一 什么是Android Studio 二 简介Fragment 三 学期知识汇总 四 什么是碎片
  • C++类与对象--static修饰符

    C 类与对象 static修饰符 1 类静态数据成员的定义及初始化 1 1 声明 1 2 初始化 1 3 调用 1 4 案例 1 5 小结 2 类静态成员函数的定义 2 1 声明 2 2 调用 2 3 案例 2 4 小结 3 static
  • 数据库字段类型

    太长时间没有操作数据库 收集了部分有用的资料 一 创建数据表 CREATE TABLE mytable id VARCHAR 4 NOT NULL name VARCHAR 10 sex CHAR 1 createtime DATE age
  • ROS系统

    参考 https blog csdn net qq 28087491 article details 119053810 https www bilibili com video BV1zt411G7Vn spm id from 333 3
  • 静态网页怎样实现动态交互?-JavaScript

    在Html基础上 javascript能够开发交互式web网页 javascript的出现使得网页和用户之间实现了一种实时性的 动态的 交互性的关系 javascript短小精悍 又是在客户机上执行的 大大提高了网页的浏览速度和交互能力 同