详解JavaScript实现JS弹窗的三种方式

目录
  • 一、前言
  • 二、什么是JavaScript，有什么用?
  • 三、HTML嵌入JavaScript的方式：
    • 第一种方式：
    • 第二种方式：
    • 第三种方式：
  • 总结

一、前言

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文件如，外部文件路径

<!doctype	html>
  <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，则这个不会生效

②需要另外写一个才会生效

如：

<!doctype	html>
  <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>

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注我们的更多内容!

赞 (0)

相关推荐

  • JS实现自定义弹窗功能

    众所周知,浏览器自带的原生弹窗很不美观,而且功能比较单一,绝大部分时候我们都会按照设计图自定义弹窗或者直接使用注入layer的弹窗等等.前段时间在 慕课网 上看到了一个自定义弹窗的实现,自己顺便就学习尝试写了下,下面是主要的实现代码并添加了比较详细的注释,分享出来供大家参考.(代码用了ES6部分写法如需兼容低版本浏览器请把相关代码转成es5写法,后面有时间更新为一个兼容性较好的es5版本) HTML部分:(没什么内容 放置一个按钮调用函数,js中调用实例即可供参考) <!DOCTYPE html

  • js实现点击弹窗弹出登录框

    js实现点击弹窗弹出登录框

    本文实例为大家分享了js实现点击弹窗弹出登录框的具体代码,供大家参考,具体内容如下 1 图片预览 2 index.html代码 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1

  • js实现弹窗暗层效果

    话不多说,请看示例代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="http://r01.uzaicdn.com/content/v1/styles/subject.css"&g

  • 原生js实现弹窗消息动画

    本文实例为大家分享了js实现弹窗消息的具体代码,供大家参考,具体内容如下 效果图 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <tit

  • js实现弹窗效果

    本文实例为大家分享了js实现弹窗效果的具体代码,供大家参考,具体内容如下 思路: 1.创建一个按钮,点击弹出弹窗 2.建立一个弹窗页面 固定定位 默认隐藏 3.将弹窗内容放在弹窗页面的中间 4.js将事件绑定按钮,点击后让弹窗页面显示 5.js事件绑定span标签,点击后让弹窗页面消失 代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

  • 详解JavaScript实现JS弹窗的三种方式

    详解JavaScript实现JS弹窗的三种方式

    目录 一.前言 二.什么是JavaScript,有什么用? 三.HTML嵌入JavaScript的方式: 第一种方式: 第二种方式: 第三种方式: 总结 一.前言 html和css的学习大致完成,我们进入重要的JavaScript学习阶段 二.什么是JavaScript,有什么用? Javascript是运行在浏览器上的脚本语言.简称JS. 他的出现让原来静态的页面动起来了,更加的生动. 三.HTML嵌入JavaScript的方式: 第一种方式: 1.要实现的功能: 用户点击以下按钮,弹出消息框

  • 详解JavaScript中分解数字的三种方法

    本文基于免费代码营基本算法脚本"分解数字" 在数学中,非负整数n的阶乘可能是一个棘手的算法.在本文中,我将解释这种方法,首先使用递归函数,第二种使用而循环,第三种使用以循环. 算法挑战 返回提供的整体的阶乘. 如果整体用字母n表示,则阶乘是所有小于或等于n的正整数的乘积. 阶乘经常用简写符号n!表示! 例如:5!= 1 * 2 * 3 * 4 * 5 = 120 function factorialize(num) { return num; } factorialize(5); 提供

  • 详解Nginx 虚拟主机配置的三种方式(基于IP)

    Nginx配置虚拟主机支持3种方式:基于IP的虚拟主机配置,基于端口的虚拟主机配置,基于域名的虚拟主机配置. 详解Nginx 虚拟主机配置的三种方式(基于端口) https://www.jb51.net/article/14977.htm 详解Nginx 虚拟主机配置的三种方式(基于域名) https://www.jb51.net/article/14978.htm 1.基于IP的虚拟主机配置 如果同一台服务器有多个IP,可以使用基于IP的虚机主机配置,将不同的服务绑定在不同的IP上. 1.1

  • 详解Nginx 虚拟主机配置的三种方式(基于端口)

    Nginx配置虚拟主机支持3种方式:基于IP的虚拟主机配置,基于端口的虚拟主机配置,基于域名的虚拟主机配置. 详解Nginx 虚拟主机配置的三种方式(基于IP) https://www.jb51.net/article/14974.htm 详解Nginx 虚拟主机配置的三种方式(基于域名) https://www.jb51.net/article/14978.htm 2.Nginx基于端口的虚拟主机配置 如一台服务器只有一个IP或需要通过不同的端口访问不同的虚拟主机,可以使用基于端口的虚拟主机配

  • 详解Golang开启http服务的三种方式

    前言 都说go标准库实用,Api设计简洁.这次就用go 标准库中的net/http包实现一个简洁的http web服务器,包括三种版本. v1最简单版 直接使用http.HandleFunc(partern,function(http.ResponseWriter,*http.Request){}) HandleFunc接受两个参数,第一个为路由地址,第二个为处理方法. //v1 func main() { http.HandleFunc("/", func(w http.Respon

  • 详解使用scrapy进行模拟登陆三种方式

    scrapy有三种方法模拟登陆方式: - 直接携带cookies - 找url地址,发送post请求存储cookie - 找到对应的form表单,自动解析input标签,自动解析post请求的url地址,自动带上数据,自动发送请求 1.携带cookies登陆github import scrapy import re class Login1Spider(scrapy.Spider): name = 'login1' allowed_domains = ['github.com'] start_

  • 详解Redis实现限流的三种方式

    面对越来越多的高并发场景,限流显示的尤为重要. 当然,限流有许多种实现的方式,Redis具有很强大的功能,我用Redis实践了三种的实现方式,可以较为简单的实现其方式.Redis不仅仅是可以做限流,还可以做数据统计,附近的人等功能,这些可能会后续写到. 第一种:基于Redis的setnx的操作 我们在使用Redis的分布式锁的时候,大家都知道是依靠了setnx的指令,在CAS(Compare and swap)的操作的时候,同时给指定的key设置了过期实践(expire),我们在限流的主要目的就

  • 详解Redis集群搭建的三种方式

    一.单节点实例 单节点实例还是比较简单的,平时做个测试,写个小程序如果需要用到缓存的话,启动一个 Redis 还是很轻松的,做为一个 key/value 数据库也是可以胜任的 二.主从模式(master/slaver) redis 主从模式配置 主从模式: redis 的主从模式,使用异步复制,slave 节点异步从 master 节点复制数据,master 节点提供读写服务,slave 节点只提供读服务(这个是默认配置,可以通过修改配置文件 slave-read-only 控制).master

  • 详解SpringBoot静态方法获取bean的三种方式

    目录 方式一  注解@PostConstruct 方式二  启动类ApplicationContext 方式三 手动注入ApplicationContext 方式一  注解@PostConstruct import com.example.javautilsproject.service.AutoMethodDemoService; import org.springframework.beans.factory.annotation.Autowired; import org.springfr

  • 一文详解PHP连接MySQL数据库的三种方式

    目录 1.MySQL扩展 2.mysqli扩展 3.PDO扩展 知识点补充 PHP与MySQL的连接有三种API接口,分别是:PHP的MySQL扩展 .PHP的mysqli扩展 .PHP数据对象(PDO). 1.MySQL扩展 PHP 的 MySQL 扩展是设计开发允许 PHP 应用与 MySQL 数据库交互的早期扩展.MySQL 扩展提供了一个面向过程的接口,由于不支持后期MySQL服务端提供的一些特性.且太古老,又不安全,所以已被后来的 mysqli 完全取代: 使用方式如下 //自 PHP

随机推荐