JavaScript-代码嵌入HTML三种方式

本文主要是介绍JavaScript-代码嵌入HTML三种方式，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

1、js是一门事件驱动型的编程语言；依靠事件去驱动，然后执行对应的程序。

2、在js中有很多事件其中有一个事件叫做：鼠标单机；单词：click；且任何事件都会有一个事件句柄叫做：onclick；

3、事件和事件句柄区别：事件句柄是在事件单词前加on；而事件句柄是以HTML标签的属性存在的

4、onclick="js代码"，执行原理：页面打开时js代码并不会执行，只把JS代码注册到按钮的click事件上了，

等这个按钮发生click事件之后，注册在onclick后面的js代码会被浏览器自动调用

5、js代码弹出消息框： js中有一个内置的对象叫做：window，都是小写
window 代表浏览器对象，有一个函数：alert；
语法：window.alert("消息")；弹窗出现

JavaScript嵌入HTML方式一：弹窗：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>HTML嵌入代码方式1</title>
    </head>
    <body>
        <input type = "button" value="hello" onclick="window.alert('hello js')" />

        <input type = "button" value="hello" onclick="window.alert('hello js')
                                                      window.alert('hello zs')

        <!--window. 可以省去-->
        <input type = "button" value="hello" onclick="alert('hello js')
                                                     alert('hello zs')
    </body>
</html>

JavaScript嵌入HTML方式二：JavaScript脚本块：<script type='text/javascript'></script>

JavaScript脚本块出现的位置没有要求，可以出现多次

暴露在JavaScript脚本块中的代码打开浏览器直接执行，遵守自上而下的顺序执行

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>HTML嵌入代码方式2</title>
        <!--
        javascript 的脚本块在一个页面当中可以出现多次，没有要求
        javascript 的脚本块出现的位置也没有要求，随意
        -->
        <script type="text/javascript">
            alert("first....")
        </script>
 
    </head>
    <body>
         <!--方式2：脚本块方式打开页面就执行-->
         <script type='text/javascript'> 
             /*
             暴露在脚本块当中的程序，在页面打开的时候执行
             并且遵守自上而下顺序依次追行执行，这个代码执行不需要事件
             */
             window.alert("hello word");  
             
            //alert有阻挡当前页面加载的作用，直到用户点击确定按钮
             window.alert("hello javaScript");
         </script>
         
         <script type="text/javascript">

           //js代码单行注释
           /*
           js代码的多行注释
           */
         </script>
         
         <input type= "button" value="按钮对象" />
    </body>
</html>

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

JavaScript嵌入HTML方式三：在需位置映入JavaScript脚本文件

<script type="text/javascript" src="3.js/3.js">

 <!--引入js文件的同时可以写代码。但是代码不执行，没有用-->   
</script>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>HTML嵌入代码方式3</title>
    </head>
    <body>
         
       <!--在需要的位置引入js脚本文件-->
       <!--引入外部独立的js文件时，技术文件中的代码会遵循自上而下的顺序依次执行-->

       <!--结束的</script> 标签必须要有-->
       <script type="text/javascript" src="3.js/3.js">
         <!--引入js文件的同时可以写代码。但是代码不执行，没有用-->   
       </script>

       <!--引入js文件时，同时可以引入脚本块-->
       <script type="text/javascript">
              alert("hello...")
       </script>
    </body>
</html>

这篇关于JavaScript-代码嵌入HTML三种方式的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

Java教程