广告
返回顶部
首页 > 资讯 > 后端开发 > Python >html嵌入javascript代码的三种方式
  • 494
分享到

html嵌入javascript代码的三种方式

html嵌入javascript代码 2023-03-22 17:03:53 494人浏览 安东尼

Python 官方文档:入门教程 => 点击学习

摘要

目录一、概念二、html嵌入javascript代码的三种方式1.事件句柄是以html标签的属性存在的。2.脚本块的方式3.引入外部独立的.js文件一、概念 javascript是运

一、概念

javascript是运行在浏览器中的脚本语言,运行在浏览器的内存当中,不需要程序员手动编译,编写玩源代码之后,浏览器直接打开解释执行,简称JS。

二、html嵌入javascript代码的三种方式

JS是一门事件驱动型的编程语言,依靠事件去驱动,然后执行对应的程序。
例如:在JS中有很多事件,其中有一个事件叫做:鼠标单击,click,并且任何事件都会对应一个事件句柄onclick。

1.事件句柄是以html标签的属性存在的。

在按钮标签中设置onclick属性值,则点击按钮发生click事件后,注册在onclick后面的js代码会被浏览器自动调用。

示例如下:

解释:(1)在JS中有一个内置的对象window,代表浏览器对象(窗口),window对象有一个函数alert,用法是window.alert(“消息”),点击按钮后弹出带有消息的窗口,"window."可以省略不写直接写alert语句;
(2)java字符串可以使用双引号,也可以使用单引号;
(3)JS的一条语句结束之后可以使用分号也可以不用。

(4)window.alert()语句在显示窗口时并没有执行完,点击确认窗口消失后才执行完(alert有阻塞当前页面加载的作用)。

2.脚本块的方式

在body标记中嵌入script标记,JS代码写在script标记中。此时的代码在页面打开时执行,并且遵循自上而下的顺序依次执行,即代码的执行不需要事件。javascipt的脚本块可以有多个,可以出现在任意位置。javascript可以有//开头的单行注释和包含的多行注释。

示例如下:

效果如下:

刷新页面后一直在加载页面,也没有显示input标记,点击确定后页面加载完毕:

3.引入外部独立的.js文件

.js文件内容与脚本块的方式中script标记中的内容一致。代码也会按照顺序自上而下地执行。同一个.js文件可以被引入多次。
引入方式,在body 标记中加script标签;

到此这篇关于html嵌入javascript代码的三种方式的文章就介绍到这了,更多相关html嵌入javascript内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: html嵌入javascript代码的三种方式

本文链接: https://www.lsjlt.com/news/200918.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • html嵌入javascript代码的三种方式
    目录一、概念二、html嵌入javascript代码的三种方式1.事件句柄是以html标签的属性存在的。2.脚本块的方式3.引入外部独立的.js文件一、概念 javascript是运...
    99+
    2023-03-22
    html嵌入javascript代码
  • JavaScript代码是不是嵌入到HTML中的
    这篇“JavaScript代码是不是嵌入到HTML中的”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来...
    99+
    2022-10-19
  • php嵌入html代码的方法有哪些
    本篇内容主要讲解“php嵌入html代码的方法有哪些”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“php嵌入html代码的方法有哪些”吧!php嵌入html代码的三种方法:1、用echo输出HT...
    99+
    2023-07-04
  • 怎么触发javascript代码?三种方法
    JavaScript 是编写交互式网页的一种语言,通过在网页上添加 JavaScript 代码来使用户与页面进行交互。JavaScript 代码可以直接写在 HTML 文件内,也可以单独写在外部的 .js 文件内。不仅如此,JavaScri...
    99+
    2023-05-14
  • 终止python代码运行的三种方式
    一 sys.exit() 执行这条语句会直接退出程序,也是常用的方法,不需要考虑平台等因素的影响。它通常是退出 Python 程序的首选方法。 该方法包含一个参数status,默认为0,表示正常退出,或1,表示异常退出。 import sy...
    99+
    2023-08-22
    unix linux 服务器 python
  • JavaScript入门之三种引入方式怎么使用
    这篇文章主要介绍“JavaScript入门之三种引入方式怎么使用”,在日常操作中,相信很多人在JavaScript入门之三种引入方式怎么使用问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望...
    99+
    2022-10-19
  • 使用javascript解析二维码的三种方式
    目录一、使用javascript解析二维码1、二维码是什么二、qrcode-parser1、安装方式2、使用方式三、ngx-qrcode21、安装方式2、使用方式四、前端生成二维码1...
    99+
    2022-11-12
  • SpringBoot依赖注入的三种方式
    目录SpringBoot依赖注入的三种方式1.使用 XML 配置依赖注入2.使用 Java 配置类实现依赖注入3.使用注解来进行依赖注入SpringBoot依赖注入的三种方式 1.使...
    99+
    2023-05-16
    Java SpringBoot依赖注入 SpringBoot依赖注入方式 SpringBoot依赖注入
  • 【Shell】Shell 脚本自动输入密码的三种方式
    Shell 脚本自动输入密码的三种方式 注意,如果创建.sh文件后不可以执行,请执行sudo chmod 755 文件名.sh来修改权限。 方式一 使用 echo “密码” | (管道符) 使用场景: sudo 命令 在...
    99+
    2023-08-21
    linux 服务器 shell
  • java base64编码、解码的三种方式
    在Java中,可以使用以下三种方式进行base64编码和解码:1. 使用Java8的java.util.Base64类(推荐)```...
    99+
    2023-08-24
    java
  • css的三种引入方式是什么
    这篇文章主要介绍“css的三种引入方式是什么”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“css的三种引入方式是什么”文章能帮助大家解决问题。css的引入方式有三种...
    99+
    2022-10-19
  • Spring依赖注入DependencyInjection的三种方式
    目录一、变量注入(Field Injection)二、构造器注入(Constructor Injection)三、setter方法注入(Setter Injection)四、使用场景...
    99+
    2023-02-14
    Spring依赖注入 Spring依赖注入的方式
  • Android解析json数据示例代码(三种方式)
    Json数据 代码如下: [{"code":"110000","sheng":"11","di":"00","xian":"00","name":"北京市","level":...
    99+
    2022-06-06
    json数据 JSON 示例 Android
  • Shell 脚本自动输入密码的三种方式小结
    目录方式一方式二方式三注意,如果创建.sh文件后不可以执行,请执行sudo chmod 755 文件名.sh来修改权限。 方式一 使用 echo “密码” | (管道符) 使用场景: sudo 命...
    99+
    2022-07-01
    Shell 自动输入密码 Shell 自动输入
  • Python种导入模块的三种方式是什么
    本篇内容介绍了“Python种导入模块的三种方式是什么”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!  1 . import  >&g...
    99+
    2023-06-02
  • git windows 设置代理的三种方式
    随着Git在Windows平台上的广泛应用,如何设置Git客户端的代理成为一件很有实际意义的问题。本文将介绍在Windows环境下如何设置Git客户端的代理,并提供一些额外的提示。一、使用Git命令设置代理Git命令行中提供了设置代理的命令...
    99+
    2023-10-22
  • 怎么引入javascript代码?方式浅析
    近年来,随着JavaScript技术的高速发展,越来越多的开发者开始在自己的项目中使用这种语言。在使用JavaScript时,引入方式是非常重要的一环。但是,事实上有一些场景下并不适合采用JavaScript的传统引入方式,即<scr...
    99+
    2023-05-14
  • python 三种方式实现截屏(详解+完整代码)
    一、方法一 # PIL中的ImageGrab模块# 使用PIL中的ImageGrab模块简单,但是效率有点低# PIL是Python Imaging Library,它为python解释器提供图像编辑函数能力。 ImageGrab模块可用于...
    99+
    2023-09-08
    python
  • javascript遍历对象的五种方式实例代码
    目录准备 五种武器 for…in Object.keys Object.getOwnPropertyNames Object.getOwnPropertySymbols Reflec...
    99+
    2022-11-12
  • javascript代码简写的几种常用方式汇总
    目录前言箭头函数掌握数组常见操作方法延展运算符对象简写解构赋值掌握数据类型转换的方法总结前言 本文主要介绍一些工作中常用的JavaScript编码技巧。非常有用,建议大家看完赶快实践...
    99+
    2022-11-12
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作