网页中嵌入JavaScript+事件触发程序

嵌入方式:

1.JavaScript代码与HTML写在同一个文档中

JavaScript代码要放在<script>和</script>标签之间
而且整个JavaScript代码最好放在</body>前,这样可以让浏览器先加载并显示主体

2.JavaScript代码单独存成.js文件,让网页文档通过链接方式引用
外部JavaScript程序文件通常都保存在名字为js的文件夹中,引用外部.js文件,需要<script>标签的src属性设置路径

<srcipt src="js/main.js"></script>//js文件夹里main.js文件

事件触发程序

onLoad//网页加载完毕后触发<body>标签中
onMousOver//鼠标指针移动到指定对象触发
onMoutOut//鼠标指针离开指定对象触发
onClick//鼠标左键点击触发
onKeyDown//按键按下触发
onKeyUp//按键放开触发

除了onLoad,其余事件可用于任何标签中
在这里插入图片描述
加了几个代码,
网页加载完毕后效果:
在这里插入图片描述

在这里插入图片描述
然后点击how are you
产生效果:
在这里插入图片描述

但是呢,现在网页内文最好不要加一些JavaScript。
因为这样不适于重复使用和维护
而且每一次使用都要从新加载一遍JavaScript代码。如果我们单独写到一个文件里,那么浏览器会在本机有缓存,就不需要从新下载代码了
所以呢我们要分离内容(HTML)与交互逻辑(JavaScript)

所以呢,我要准备学jQuery了
今天一天饭还没吃,容我吃顿饭

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/560613.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

sql相同顺序法和一次封锁法_数学专题 | Ep01 隔板法的妙用

数学专题(一) 隔板法的妙用浓度常见哪些问题?排列组合分堆&#xff1f;涂色&#xff1f;到底掌握透彻了吗&#xff1f;解析几何与韦达定理&#xff1f;公式总是记不住&#xff1f;应用题还不会解&#xff1f;除了写作(写作听我的)、逻辑(逻辑说)专题外&#xff0c;本周起我们也…

通过CDN引用jQuery库+jQuery的使用+网页实现计算器的功能

jQuery是什么&#xff1f;有什么用&#xff1f; jQuery是javascript库&#xff0c;其实就是一堆的js函数&#xff0c;方便我们来调用&#xff0c;提高我们的开发效率 免费开源&#xff0c;支持主流浏览器&#xff0c;简化选取网页元素的语法&#xff0c;简易的读取设置元素的…

linux dev alloc name,深入理解Linux网络技术内幕-设备注册和初始化(二)

NIC注册和注销的通用架构Linux系统中NIC网络设备驱动程序利用网络代码进行注册和注销有其通用的架构&#xff0c;这里以PCI Ethernet NIC为例&#xff0c;其他设备类型只是所以函数名称和调用方式不同&#xff0c;主要依据于设备总线提供的接口。其中(a)为设备注册的大致流程图…

外贸常用术语_外贸中常用的会计术语及付款方式术语 | 会计英语

点击上面“财经英语”关注公众号&#xff01;点击下面小程序加入: 学习圈财经英语 学习圈 预付现金 Cash advance 凭提货单支付现金 Cash against Bill of Lading (B/L) 凭单据付现款||凭装货单付现款 Cash against Documents 现金结存||现金差额 Cash balance 现收现付制||现金…

python 多维list 排序_一行代码的优雅| Python列表生成式

欢迎回来&#xff0c;上一周我们整理了基础课中三大结构有关内容的具体应用及案例。可以通过以下几篇推文进行回溯&#xff1a;Python语言基础50课我的Python - 100天笔记 |D1-D7我的Python - 100天笔记 |D8-D14列表是Python中非常常见的数据结构&#xff0c;在基础课中也占了不…

verilog 生成块_如何高效的编写Verilog——终极版

为了高效的编写Verilog&#xff0c;通常有些编辑器插件可以自动生成代码&#xff0c;比如自动端口定义&#xff0c;自动连线&#xff0c;自动实例化等等。公司的环境有很好用的自动化插件&#xff0c;想给自己的电脑也整个怎么做。比如Emacs中有个插件叫verilog-mode。但是博主…

剩余 大小 查看内存_JVM的内存分配策略以及进入分代的条件

JVM的参数和知识点太多啦&#xff0c;记录下来&#xff0c;供自己随时回顾。java对象什么时候进入年轻代&#xff08;新生代&#xff09;&#xff1f;java对象什么时候进入老年代&#xff1f;对象优先在Eden分配大对象直接进入老年代空间分配担保机制java对象什么时候进入年轻代…

Arduino的串口结束符及串口缓冲区

文章目录1.深入理解缓冲区和Serial.available()&#xff1a;2.深入理解串口结束符3.验证结论&#xff1a;1.深入理解缓冲区和Serial.available()&#xff1a; 运行下面的代码&#xff0c;我发现如果不在串口输入任何数字&#xff0c;就会一直显示“no”&#xff0c;输入一个数…

android 圆角边框边框渐变,支持边框、圆角、渐变色、透明度的GradientButton

最近在项目中发现好多Button背景颜色相同&#xff0c;但圆角大小不等的Button&#xff0c;这样就得写一大堆的shape或者selector&#xff0c;不便于管理及后期维护&#xff0c;于是乎变想能不能写一个支持边框、圆角、渐变色、透明度的万用Button呢。为了能够兼容button自带的属…

鸿蒙ide如何运行,深入浅析华为鸿蒙IDE安装与Hello World

一、系统安装1. 到官网下载HUAWEI DevEco Studio2. 安装二、创建项目创建项目目前还没有手机选项&#xff0c;所以我先选择一个电视&#xff1a;IDE的环境看起来和idea差不多&#xff0c;应该比较容易上手。从“关于”里也可以看到&#xff0c;确实是基于IDEA开源版本开发的。我…

中快捷搜索_同事用1分钟,我用半小时,原来是因为这8个Word快捷键,秒杀一切办公技巧...

同事用1分钟&#xff0c;我用半小时&#xff0c;这8个Word快捷键&#xff0c;秒杀一切办公技巧​mp.weixin.qq.com文&#xff5c;王羽卒今天给小伙伴们分享几个实用又有效的快捷键&#xff0c;帮助快速完成工作&#xff0c;同事用了半小时&#xff0c;你1分钟就能解决哟&#x…

荣耀x10max能不能升级为鸿蒙,荣耀终于放出大招!4部荣耀旗舰可升级鸿蒙,网友:终于等到了...

4月24~26日&#xff0c;华为将召开开发者大会&#xff0c;届时手机使用的鸿蒙系统将正式上线&#xff0c;华为和部分荣耀手机将会首先支持。其实&#xff0c;早在2月22日的华为Mate X2的发布会上&#xff0c;余承东就说过4月发布鸿蒙OS。华为并不想推出鸿蒙系统&#xff0c;如果…

android 7.0新增控件,自定义Android控件,封装Arcgis for Android测距测面积工具控件

控件的功能包括&#xff0c;测距、测面积、撤销、恢复、清除、完成六个功能。测距&#xff1a;在地图上绘制线段进行长度测量测面积&#xff1a;在地图上绘制一个面&#xff0c;进行面积测量撤销&#xff1a;撤销到上一步绘制&#xff0c;只能撤销未完成的测量恢复&#xff1a;…

多媒体分析与理解_如何设计一个出色的数字多媒体展厅?

展厅设计方案是了解每个多媒体设备的应用方法&#xff0c;那么如何让设备跟展厅结合一起&#xff0c;展示出我们想要的科技效果&#xff0c;核心就是用户体验度。今天华南数字科技的小编就为您介绍下数字多媒体展厅对用户体验方面的几个重点要素。1、细节展示不论多前卫的多媒体…

gradient设置上下渐变_图解CSS: CSS渐变

CSS的渐变主要分布在 conic-gradient()和repeating-conic-gradient()两个属性。在CSS中&#xff0c;CSS的渐变相当于图像&#xff0c;我们可以使用线性渐变(linear-gradient()和repeating-linear-gradient())、径向渐变(radial-gradient()和repeating-radial-gradient())和锥形…

2021泗阳致远中学高考成绩查询,2021高考成绩什么时候发布?可通过哪些途径查询?...

3、安徽省高考成绩预计将于6月23日公布各批次录取分数线和高考成绩&#xff0c;考生可通过安徽省教育招生考试院自行查分&#xff1b;4、湖南高考成绩将于6月25日左右公布&#xff0c;本科不再分一二三批&#xff0c;考生可通过湖南教育政务网、湖南省普通高校招生考试考生综合…

mysql数据库的字符集_mysql数据库中字符集乱码问题原因及解决

前言有的时候我们在查看数据库数据时&#xff0c;会看到乱码。实际上&#xff0c;无论何种数据库只要出现乱码问题&#xff0c;这大多是由于数据库字符集设定的问题。下面我们就介绍一下&#xff0c;数据库的字符集的设定及乱码问题的解决。mysql数据库的字符集直白的说&#x…

1主5从mysql数据库_MySQL主从复制虽好,能完美解决数据库单点问题吗?

一、单个数据库服务器的缺点数据库服务器存在单点问题&#xff1b;数据库服务器资源无法满足增长的读写请求&#xff1b;高峰时数据库连接数经常超过上限。二、如何解决单点问题增加额外的数据库服务器&#xff0c;组建数据库集群&#xff1b;同一集群中的数据库服务器需要具有…

惠普z6计算机进不去桌面,HP Z6 桌面工作站 | HP® HK 惠普香港

Intel、Thunderbolt 及 Xeon 均為 Intel Corporation 於美國及/或其他國家或地區的商標。Microsoft 及 Windows 為 Microsoft Corporation 於美國及/或其他國家或地區的註冊商標或商標。NVIDIA 是 NVIDIA Corporation 在美國及其他國家或地區的商標及/或註冊商標。USB Type-C™…

mysql定义条件和处理_mysql sql存储过程条件定义与处理

一、条件定义DECLARE condition_name CONDITION FOR condition_valecondition_value:sqlstate[value] sqldata_value |mysql教程_error_code二、条件处理DECLARE htype HANDLER FOR cond_value[...] sp_statementhandtype_value:sqlstate [value] saltate_value|contentname|sq…