详解JavaScript实现JS弹窗的三种方式
作者:执久呀 发布时间:2024-04-19 10:42:20
一、前言
html和css的学习大致完成,我们进入重要的JavaScript学习阶段
二、什么是JavaScript,有什么用?
Javascript是运行在浏览器上的脚本语言。简称JS。
他的出现让原来静态的页面动起来了,更加的生动。
三、HTML嵌入JavaScript的方式:
第一种方式:
1、要实现的功能:
用户点击以下按钮,弹出消息框。
2、弹窗
JS是一门事件驱动型的编程语言,依靠事件去驱动,然后执行对应的程序。在JS中有很多事件,其中有一个事件叫做:鼠标单击,单词:click。并且任何事件都会对应一个事件句柄叫做:onclick。【注意:事件和事件句柄的区别是:事件句柄是在事件单词前添加一个on。】,而事件句柄是以HTML标签的属性存在的。
3、οnclick=js代码",执行原理是什么?
页面打开的时候,js代码并不会执行,只是把这段ss代码注册到按钮的click事件上了。等这个按钮发生click事件之后,注册在onclick后面的js代码会被浏览器自动调用。
4、 怎么使用JS代码弹出消息框?
在JS中有一个内置的对象叫做window, 全部小写,可以直接拿来使用,window代表的是浏览器对象。 window对象有一个函数叫做:alert,用法是:window.alert("消息");这样就可以弹窗了。
5、window.可以省略
下面两个等价
<input type="button" value="hello" onclick="window.alert('hello world')"/>
<input type="button" value="hello" onclick="alert('hello world')"/>
6、设置多个alert可以一直弹窗
<input type="button" value="hello" onclick="alert(hello java")
alert(hello python')
alert('hello javaScript!)"/>
JS中的字符串可以使用双引号,也可以使用单引号。JS中的一条语句结束之后可以使用分号";"也可以不用。
<input type="button" value="hello" onclick="alert('hello world')"/>无分号,内单外双引号
<input type="button" value="hello" onclick= 'alert("hello jscode");'/> 有分号,内双外单引号
整体代码:
<!doctype html>
<htm1>
<head>
<title>JavaScript第一种</title>
</head>
<body>
<input type="button" value="hello" onclick="window.alert('hello world')"/>
<input type="button" value="hello" onclick='window.alert("hello jscode")'/>
<input type="button" value="hello" onclick="alert('hello zhangsan');
alert('hello lisi');
alert('hello wangwu')"/>
</body>
</html>
弹窗效果:
第二种方式:
脚本如:
<script type="text/javascript">
window.alert("Hello JavaScript")
</script>
javascript的脚本块在一个页面当中可以出现多次。
javascript的脚本块出现位置也没有要求。
如:
<script type="text/javascript">
window.alert("head ");
window.alert("Hello World!")
</script>
<!doctype html>
<html>
<head>
<title>HTML中嵌入JS代码的第二种方式</title>
</head>
<body>
<script type="text/javascript">
window.alert("min");
window.alert("Hello World!")
</script>
<input type="button"value="按钮"/>
</body>
</html>
<script type="text/javascript">
window.alert("last");
window.alert("Hello World!")
</script>
alert有阻塞当前页面加载的作用。(阻挡,直到用户点击确定按钮。
在脚本块当中的程序,在页面打开的时候执行并且遵守自上而下的顺序依次逐行执行。 (这个代码的执行不需要事件,即运行就开始)
第三种方式:
引入外部独立的js文件如,外部文件路径
<!doctypehtml>
<html>
<head>
<title>HTM中嵌入JS代码的第三种方式:引入外部独立的js文件。</title>
</head>
<body>
<!--这个src表示路径,在text目录的1.js文件 -->
<script type="text/javascript" src="text/1.js"></script>
</body>
</html>
在需要的位置引入js脚本文件
引入外部独立的js文件的时候,js文件中的代码会遵循自上而下的顺序依次逐行执行。
①在引入的外部脚本中又加alert,则这个不会生效
②需要另外写一个才会生效
如:
<!doctypehtml>
<html>
<head>
<title>HTM中嵌入JS代码的第三种方式:引入外部独立的js文件。</title>
</head>
<body>
<!--这个src表示路径,在text目录的1.js文件 -->
<script type="text/javascript" src="text/1.js">
<!--下面这个不会起作用 -->
window.alert("hello");
</script>
<!--需要另外写一个脚本才会生效,如: -->
<script type="text/javascript">
window.alert("hello");
</script>
</body>
</html>
来源:https://blog.csdn.net/weixin_60719453/article/details/122399564
猜你喜欢
- 双向数据绑定指的是当对象的属性发生变化时能够同时改变对应的UI,反之亦然。换句话说,如果我们有一个user对象,这个对象有一个name属性,
- 随着业务量的增长,可能需要对表进行拆分来提高性能。下面这个例子是将www.jb51.net的users表拆分成10个表ttlsa_user_
- 1、创建Django项目打开pycharm,新建Django项目,可以选择一个虚拟环境建完之后目录如下:2、创建应用,我这里命名为demo在
- 有个Q友问怎么写个程序能按照要求输入,再输出对应形状的面积?我大概写了几行,没有考虑输出异常,重点想记录下 int 的接收,如下图知识点就两
- 一,cookie和session的区别cookie在客户的浏览器上,session存在服务器上cookie是不安全的,且有失效时间sessi
- CSS Sprites技术早在2005年 CSS Zengarden 的园主 Dave Shea就在ALA发表对该技术的详细阐述。原先只在C
- Python docx库代码演示安装需要lxml pip install python-docx主业务代码from openpyxl imp
- 练习一:假设你获取到了2017年内地电影票房前20的电影(列表a)和电影票房数据(列表b),那么如何更加直观的展示该数据?a = [&quo
- 一、环境介绍Python版本 : Python3.8开发工具 : Pycharm 21第三方库 : requests还会用到的是 Pytho
- 有个文本文件,需要替换里面的一个词,用python来完成,我是这样写的:def modify_text(): with open('
- 首先请把手放胸前成沉思状:我上了生活,还是被生活上了自己?没想出答案把,恩,可以读下文了。从语义角度讲,同一事物的不同表述可以反映人的主观视
- 虽然现在IE还是主导了整个浏览器的天下,但IE靠的并非是产品设计上的优势,而是依靠windows的力量,因为绝大多数的初级网民认为IE的产品
- MySQL是一种开放源代码的关系型数据库管理系统(RDBMS),MySQL数据库系统使用最常用的数据库管理语言--结构化查询语言(SQL)进
- 今早在对一张table 创建primay key过程中发生了断电,当电脑再次启动时候,发现mysql 服务无法启动,使用 net start
- 原始数据在这里1.观察数据首先,用Pandas打开数据,并进行观察。import numpy import pandas as pdimpo
- 这里假定Postgresql数据库已经装好。首先安装依赖的包$ sudo yum install python-devel postgres
- 一、模块&包简介模块:所谓模块就是一个.py文件,用来存放变量,方法的文件,便于在其他python文件中导入(通过import或fr
- 1. 引言FLOPs 是 floating point operations 的缩写,指浮点运算数,可以用来衡量模型/算法的计算复杂度。本文
- python redis连接 有序集合去重的代码如下所述:# -*- coding: utf-8 -*- import redisfrom
- 一个美女面试官坐到我的对面,发光logo的MacBook也挡不住她那圆润可爱的脸庞。程序媛本就稀有,美女面试官更是难寻。这么温柔可爱的面试官