HTML嵌入JavaScript代码的三种方式_24、在html中,可以引入javascrint代码方式(3分)是()。a、a、行内式b、b、内嵌-程序员宅基地

HTML嵌入JavaScript代码的三种方式

第一种方式：事件句柄后写代码

要实现的功能：
用户点击以下按钮，弹出消息框。
JS是一门事件驱动型的编程语言，依靠事件去驱动，然后执行对应的程序。
在JS中会有很多事件，其中有一个事件叫做：鼠标点击，单词：click。并且任何事件都会对应
一个事件句柄叫做：onclick。【注意：事件和事件句柄的区别是：事件句柄是在事件单词前添加一个 on。】，而事件句柄是以HTML标签的属性纯在的。
οnclick=“js代码”，执行原理是什么？
页面打开的时候，js代码并不会执行，只是把这段JS代码注册到按钮的click事件上了。
等这个按钮发送click事件之后，注册在onclick后面的js代码会被浏览器自动调用。
怎么使用JS代码弹出消息框？
在JS中有一个内置的对象叫做 window，全部小写，可以直接拿来使用，window代表的是
浏览器对象。
window对象有一个函数叫做：alert，用法是：window.alert(“消息”)；这样就可以弹窗了。

代码示例如下：

<!doctype html>
<html>
    <head>
        <title>HTML嵌入JavaScript代码的第一种方式</title>
    </head>
    <body>
        <!--
			 6.JS中的一条语句结束之后可以使用分号";"，也可以不用。
        -->
        
        <input type="button" value="hello" onclick="window.alert('hello js')"/>
        
        <!-- window. 可以省略。 -->
        <input type="button" value="hello" onclick="alert('hello js')"/>
        
        <!-- JS中的字符串可以使用双引号，也可以使用单引号。 -->
        <input type="button" value="hello" onclick='window.alert("hello jscode")'/>
        
        <!-- 可以在onclick中写多个弹窗 -->
        <input type="button" value="hello" onclick="window.alert('hello zhangsan')
                                                    window.alert('hello lisi')
                                                    window.alert('hello wangwu')"/>
        
        <!-- JS中的一条语句结束之后可以使用分号";"，也可以不用。 -->
        <input type="button" value="hello" onclick="window.alert('hello zhangsan');
                                                    window.alert('hello lisi');
                                                    window.alert('hello wangwu');"/>
                
    </body>
</html>

第二种方式：使用脚本块

JavaScript的脚本块在一个页面当中可出现多次。没有要求。
JavaScript的脚本块出现位置也没有要求，随意。

代码示例如下：

<script type="text/javascript">
    // alert有阻塞当前页面加载的作用。（阻挡，直到用户点击确定按钮。）
    window.alert("first......");
</script>

<!doctype html>
<html>
    <head>
        <title>HTML嵌入JavaScript代码的第二种方式</title>
        
        <!-- 样式块 -->
        <style type="text/css">
            /*
            	css代码
            */
        </style>
        
        <script type="text/javascript">
            window.alert("head......");
        </script>
        
    </head>
    <body>
        
        <!--此按钮对象在脚本快执行前创建-->
        <input type="button" value="我是一个按钮对象_1">
        
        <!-- 第二种方式：脚本块的方式 -->
        <script type="text/javascript">
            /*
            	暴露在脚本块当中的程序，在页面打开的时候执行，并且遵循自上而下的顺序依次逐行执行。
            	（这个代码的执行不需要事件）
            */
            window.alert("Hello World!");// alert函数会阻塞整个HTML页面的加载。
            
            window.alert("Hello JavaScript!");
        </script>
        
        <!--此按钮对象在脚本快执行后创建-->
        <input type="button" value="我是一个按钮对象_2">
    
    </body>
</html>

<script type="text/javascript">
    window.alert("last......");
</script>

第三种方式：引入外部独立的js文件

需要先在与HTML所在的文件夹中创建js文件
在需要的位置引入js脚本文件

注意点：

引入外部独立的js文件的时候，js文件中的代码会遵循自上而下的顺序依次逐行执行。
同一个js文件可以被引入多次。但实际开发中这种需求很少。

代码示例如下：

<!doctype html>
<html>
    <head>
        <title>HTML嵌入JavaScript代码的第三种方式：引入外部独立的js文件。</title>
    </head>
    <body>
        
        <!--先在HTML所在的文件夹中创建了一个js文件，其中存放了一个jsword.js文件-->
        <script type="text/javascript" src="js/jsword.js"></script>
        
        <!--这种方式不行，结束的script标签必须有。-->
        <script type="text/javascript" src="js/jsword.js" />
        
        <script type="text/javascript" src="js/jsword.js">
        	// 这里写的代码不会执行。
        	// window.alert("Test");
        </script>
        
    	<!--在文件引入后，仍然可以使用脚本块-->
    	<script type="text/javascript">
            alert("hello jack!");
    	</script>
    </body>
</html>

本文链接：https://blog.csdn.net/CW_Moose/article/details/125151555

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

浅析C语言的一个关键字——register_register char * yysource-程序员宅基地

文章浏览阅读327次。--------------------- 本文来自 21aspnet 的CSDN 博客，全文地址请点击：https://blog.csdn.net/21aspnet/article/details/257511?utm_source=copy1、register修饰符暗示编译程序相应的变量将被频繁地使用，如果可能的话，应将其保存在CPU的寄存器中，以加快其存储速度。例如下面的内存块拷贝代码..._register char * yysource

Unity - 通用渲染管线（URP）1.渲染、后处理_urp贴图-程序员宅基地

文章浏览阅读4.1w次，点赞24次，收藏145次。简介The Universal Render Pipeline (URP) is a prebuilt Scriptable Render Pipeline, made by Unity. The technology offers graphics that are scalable to mobile platforms, and you can also use it for higher..._urp贴图

使用 ARFoundation 实现 AR 虚拟试戴_ar试帽项目-程序员宅基地

文章浏览阅读336次。在 Hierarchy 面板中右键点击 “AR Session” 对象，选择 “XR” -> “AR Session Origin”，将其添加为 “AR Session” 的子对象。首先，打开 Unity，并在 Hierarchy 面板中右键点击创建一个空对象，将其命名为 “AR Session”。在 Inspector 面板中选择 “AR Session Origin” 对象，然后在右侧的 Inspector 面板中找到 “AR Session Origin” 组件的 “AR Session” 字段。_ar试帽项目

探索T-Writer.js：一款强大的Web文本编辑器-程序员宅基地

文章浏览阅读320次，点赞3次，收藏6次。探索T-Writer.js：一款强大的Web文本编辑器项目地址:https://gitcode.com/ChrisCavs/t-writer.jsT-Writer.js 是一个基于JavaScript的开源富文本编辑器，旨在提供一种简洁、高效的在线写作体验。它具备现代Web应用所需的多种功能，并且易于集成到你的网站或应用中。技术分析T-Writer.js 使用了最新的Web技术栈，包括：...

[PHP]学生成绩管理系统_php成绩管理系统-程序员宅基地

文章浏览阅读1w次，点赞27次，收藏175次。[PHP]学生成绩管理系统其实，这是我大一的时候，数据库的课程设计，虽然现在回看也觉得代码凌乱，但也懒得改了，之前是发在了自己搭建的博客，现在发到CSDN上来。文章目录[PHP]学生成绩管理系统1 前言2 功能模块2.1学生模块2.2 教师模块2.3 主要的文件结构3 界面设计3.1 登录界面3.2 学生主页（我的成绩）3.3 各科成绩3.4 教师主页（学生管理）3.5 学生信息详情3.6 学生信息修改3.7 添加学生信息3.8 课程管理3.9 各科成绩3.10 一键管理4 数据库设计4.1 E-R图4_php成绩管理系统

基于ssm超市库存商品管理系统的设计与实现(源码+lw+部署文档+讲解等)-程序员宅基地

文章浏览阅读775次，点赞22次，收藏24次。功能对照表的目的是帮助开发团队了解软件的功能状况，及时修复功能缺陷和错误，并提高软件的质量和稳定性。功能编号功能名称功能描述功能状态备注1用户登录用户可以通过提供用户名和密码登录系统正常用户名和密码的验证机制安全性2用户注册用户可以通过提供用户名、密码和电子邮件地址注册新的账户正常无3密码修改用户可以通过提供原密码和新密码修改已有账户的密码正常用户密码的修改操作是否需要提供安全认证4用户信息查看用户可以查看自己的个人信息，如用户名、电子邮件地址、角色等正常无。

随便推点

华为ospf与思科ospf对比-程序员宅基地

文章浏览阅读1.7k次，点赞3次，收藏10次。1.ospf对比：1）华为：ospf基本配置：系统试图：设置router-id：router id 路由器id系统试图：进入ospf配置试图：ospf进入区域配置试图：area 区域编号将接口网段加入ospf：network 网段反码返回用户试图：return2）思科：配置ospf命令：启用ospf进程：全局配置模式：router ospf 进程号设置router-id：ospf配置模式：rou..._ensp和cisco ospf对比

11种开源即插即用模块汇总！！（附论文和代码）_即插即用模块2023-程序员宅基地

文章浏览阅读2.6k次，点赞24次，收藏80次。即插即用的模块就像是一盒乐高，让我们能快速组合各种设计好的模块，搭建出我们需要的模型，这样做不仅让建模速度提升，还保证了模型的创新性和有效性。_即插即用模块2023

vue中的js文件如何使用i18n 国际化_vue中i18n.js文件中如何调用解决，并将结果赋值给i1 8n的message-程序员宅基地

文章浏览阅读5.8k次，点赞2次，收藏6次。1.在main.js文件中引入：方式1：//main.jsimport VueI18n from 'vue-i18n'Vue.use(VueI18n) // 通过插件的形式挂载，通过全局方法 Vue.use() 使用插件const i18n = new VueI18n({ locale: 'zh', // 语言标识 //this.$i18n.locale // 通过切换loca..._vue中i18n.js文件中如何调用解决，并将结果赋值给i1 8n的message