JS行内式使用行内式引入编写程序，使页面加载后提示框中显示"Hello World!"(在<body>标签内）

时间: 2024-09-09 19:01:31 浏览: 42

关于js的三种使用方式（行内js、内部js、外部js）的程序代码

JavaScript，简称JS，是一种广泛用于网页和网络应用的编程语言，尤其在客户端渲染和交互方面起着关键作用。本文将详细介绍JS的三种主要使用方式：行内JS、内部JS和外部JS，以及它们的实例代码。 1. **行内JS（Inline JavaScript）** 行内JS是指将JavaScript代码直接嵌入到HTML元素的属性中，如`onclick`、`onmouseover`等事件处理属性。这种方式简单直接，但可能导致HTML文档混乱，并且不利于代码的维护和重用。以下是一个使用行内JS的例子： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>行内JS示例</title> </head> <body> <input type="button" value="点击有惊喜" onclick="javascript:alert('哈哈哈哈')"> </body> </html> ``` 在这个例子中，当用户点击按钮时，`onclick`属性中的JavaScript代码会被执行，弹出一个显示“哈哈哈哈”的对话框。 2. **内部JS（Internal JavaScript）** 内部JS是将JS代码写在HTML文档的`<head>`部分或者`<body>`部分的`<script>`标签内。这种方式使代码与HTML结构分离，比行内JS更易于管理和维护。如下所示： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>内部JS示例</title> <script type="text/javascript"> function surprise() { alert('恭喜你中了一百万'); } </script> </head> <body> <input type="button" value="点击有惊喜" onclick="surprise()"> <input type="button" value="再次点击" onclick="surprise()"> </body> </html> ``` 在这个例子中，定义了一个名为`surprise`的函数，两个按钮都通过`onclick`调用这个函数，显示相同的消息。 3. **外部JS（External JavaScript）** 外部JS是将JavaScript代码保存在独立的`.js`文件中，然后在HTML文档中通过`<script>`标签的`src`属性引用。这种方式可实现代码复用，便于管理大型项目。例如： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>外部JS示例</title> <script src="js/js4.js" type="text/javascript" charset="utf-8"></script> </head> <body> <input type="button" value="点击" onclick="test()"> </body> </html> ``` 在这个例子中，HTML文件引用了名为`js4.js`的外部JS文件，`test`函数定义在该文件中，当用户点击按钮时，会执行`test`函数。总结： - 行内JS适用于快速实现简单交互，但不推荐用于大型项目。 - 内部JS提供了一定程度的代码组织，适合小型或中型项目。 - 外部JS是最推荐的方式，有利于代码复用和项目维护，适用于大型复杂项目。选择合适的JS使用方式取决于项目规模、代码复用需求以及对代码可维护性的考虑。在实际开发中，通常会结合使用这三种方式，以实现最佳的代码组织和性能优化。

行内式JavaScript是一种将JavaScript代码直接嵌入HTML标记中的方法。为了在页面加载完成后显示"Hello World!"提示框，你可以在<body>标签的开始部分添加一个`onload`事件处理器。当页面的加载完成时，这个事件处理器会触发一个函数，该函数执行一个`alert`调用来弹出提示框。以下是具体的代码实现： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>行内式JavaScript示例</title> </head> <body onload="showMessage()"> <script type="text/javascript"> function showMessage() { alert("Hello World!"); } </script> </body> </html> ``` 在这个例子中，`<body>`标签的`onload`属性被设置为`showMessage()`函数，这意味着当<body>内容完全加载后，`showMessage`函数将被调用。`showMessage`函数定义在随后的`<script>`标签内，它包含了一个`alert`函数调用，用于显示弹窗。

阅读全文

JS行内式使用行内式引入编写程序，使页面加载后提示框中显示"Hello World!"(在<body>标签内）

相关推荐

详解CSS文件中的4种引入方式:行内,内联式,外部式,导入式

浅谈html标签的显示模式(块级标签,行内标签,行内块标签)

JS行内式:使用行内式引入方式编写程序，使页面加载后提示框中显示"Hello World!"(在<body>标签内）

JS使用行内式引入编写程序，使页面加载后提示框中显示"Hello World!"

分别使用JavaScript 脚本的3种引入方法编写程序，使得页面加载后提示框中显示“Hello World!”。（行内式，内嵌式，外链式）

菜鸟javascript基础整理1

js从新手到精通笔记.docx

在layui.use 中自定义 function 的正确方法

HTML基础入门：标签详解与结构构建

【网页设计新手速成课】：从零到一构建响应式与交互式网页

HTML基础知识与标签概述

14. HTML标签属性及常用属性解析

前端开发入门：HTML、CSS与JavaScript

若依管理存在任何文件读取漏洞检测系统，渗透测试.zip

【java毕业设计】学生社团管理系统源码（完整前后端+说明文档+LW）.zip

【java毕业设计】音乐+商城的设计与实现源码（完整前后端+说明文档+LW）.zip

基于JAVA+SpringBoot+MySQL的网上图书商城设计与实现.docx

【java毕业设计】百色学院创新实践学分认定系统源码（ssm+mysql+说明文档+LW）.zip

(完整数据)全国旅游抽样调查数据（2001-2022）

最新推荐

JS表格组件BootstrapTable行内编辑解决方案x-editable

若依管理存在任何文件读取漏洞检测系统，渗透测试.zip

C语言数组操作：高度检查器编程实践

管理建模和仿真的文件

【KUKA系统变量进阶】：揭秘从理论到实践的5大关键技巧

如何使用Python编程语言创建一个具有动态爱心图案作为背景并添加文字'天天开心（高级版）'的图形界面？

基于Swift开发的嘉定单车LBS iOS应用项目解析

"互动学习：行动中的多样性与论文攻读经历"

PROTEUS符号定制指南：个性化元件创建与修改的全面攻略

https://www.lagou.com/wn/爬取该网页职位名称，薪资待遇，学历，企业类型，工作地点数据保存为CSV文件的python代码