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>
 

JavaScript-代码嵌入HTML三种方式

 

 

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

 

原创文章,作者:306829225,如若转载,请注明出处:https://blog.ytso.com/272541.html

(0)
上一篇 2022年7月9日
下一篇 2022年7月9日

相关推荐

发表回复

登录后才能评论