【JavaScript】三种方式入手JS弹窗

简介: Javascript是运行在浏览器上的脚本语言。简称JS。他的出现让原来静态的页面动起来了,更加的生动。


目录

一、前言

二、什么是JavaScript,有什么用?

三、HTML嵌入JavaScript的方式:

第一种方式:

第二种方式:

第三种方式:


一、前言

html和css的学习大致完成,我们进入重要的JavaScript学习阶段

二、什么是JavaScript,有什么用?

Javascript是运行在浏览器上的脚本语言。简称JS。

他的出现让原来静态的页面动起来了,更加的生动。

三、HTML嵌入JavaScript的方式:

第一种方式:

1、要实现的功能:

用户点击以下按钮,弹出消息框。

2、弹窗

JS是一门事件驱动型的编程语言,依靠事件去驱动,然后执行对应的程序。在JS中有很多事件,其中有一个事件叫做:鼠标单击,单词:click。并且任何事件都会对应一个事件句柄叫做:onclick。【注意:事件和事件句柄的区别是:事件句柄是在事件单词前添加一个on。】,而事件句柄是以HTML标签的属性存在的。

3、onclick=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')"/>

image.gif

6、设置多个alert可以一直弹窗

<input type="button" value="hello" onclick="alert(hello java")
                                            alert(hello python')
                                            alert('hello javaScript!)"/>

image.gif

JS中的字符串可以使用双引号,也可以使用单引号。JS中的一条语句结束之后可以使用分号";"也可以不用。

<input type="button" value="hello" onclick="alert('hello world')"/>无分号,内单外双引号
<input type="button" value="hello" onclick= 'alert("hello jscode");'/> 有分号,内双外单引号

image.gif

整体代码:

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

image.gif

弹窗效果:

image.pngimage.gif

第二种方式:

脚本如:

<script type="text/javascript">
        window.alert("Hello JavaScript")
     </script>

image.gif

    • 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>

    image.gif

    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>

    image.gif

    在需要的位置引入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>

    image.gif


    目录
    相关文章
    |
    11天前
    |
    JavaScript 前端开发 算法
    JavaScript 中通过Array.sort() 实现多字段排序、排序稳定性、随机排序洗牌算法、优化排序性能,JS中排序算法的使用详解(附实际应用代码)
    Array.sort() 是一个功能强大的方法,通过自定义的比较函数,可以处理各种复杂的排序逻辑。无论是简单的数字排序,还是多字段、嵌套对象、分组排序等高级应用,Array.sort() 都能胜任。同时,通过性能优化技巧(如映射排序)和结合其他数组方法(如 reduce),Array.sort() 可以用来实现高效的数据处理逻辑。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
    |
    1月前
    |
    JavaScript 前端开发
    JavaWeb JavaScript ③ JS的流程控制和函数
    通过本文的详细介绍,您可以深入理解JavaScript的流程控制和函数的使用,进而编写出高效、可维护的代码。
    75 32
    |
    11天前
    |
    数据采集 JavaScript 前端开发
    JavaScript中通过array.filter()实现数组的数据筛选、数据清洗和链式调用,JS中数组过滤器的使用详解(附实际应用代码)
    用array.filter()来实现数据筛选、数据清洗和链式调用,相对于for循环更加清晰,语义化强,能显著提升代码的可读性和可维护性。博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
    |
    3月前
    |
    JavaScript 前端开发
    【JavaScript】——JS基础入门常见操作(大量举例)
    JS引入方式,JS基础语法,JS增删查改,JS函数,JS对象
    |
    4月前
    |
    JavaScript 前端开发 Java
    springboot解决js前端跨域问题,javascript跨域问题解决
    本文介绍了如何在Spring Boot项目中编写Filter过滤器以处理跨域问题,并通过一个示例展示了使用JavaScript进行跨域请求的方法。首先,在Spring Boot应用中添加一个实现了`Filter`接口的类,设置响应头允许所有来源的跨域请求。接着,通过一个简单的HTML页面和jQuery发送AJAX请求到指定URL,验证跨域请求是否成功。文中还提供了请求成功的响应数据样例及请求效果截图。
    springboot解决js前端跨域问题,javascript跨域问题解决
    |
    4月前
    |
    JavaScript 前端开发
    Moment.js与其他处理时间戳格式差异的JavaScript库相比有什么优势?
    Moment.js与其他处理时间戳格式差异的JavaScript库相比有什么优势?
    |
    4月前
    |
    JSON JavaScript 前端开发
    使用JavaScript和Node.js构建简单的RESTful API
    使用JavaScript和Node.js构建简单的RESTful API
    |
    5月前
    |
    JavaScript
    js学习--开屏弹窗
    js学习--开屏弹窗
    68 1
    |
    5月前
    |
    人工智能 JavaScript 前端开发
    使用Node.js模拟执行JavaScript
    使用Node.js模拟执行JavaScript
    59 2
    |
    5月前
    |
    消息中间件 JavaScript 前端开发
    用于全栈数据流的 JavaScript、Node.js 和 Apache Kafka
    用于全栈数据流的 JavaScript、Node.js 和 Apache Kafka
    69 1

    热门文章

    最新文章