javascript的代码写在哪里,js代码有哪些语法规则_js 事件代码写在那块-优快云博客

本文详细介绍了在HTML中嵌入JavaScript代码的三种方法：1)事件句柄后的代码，如onclick；2)使用脚本块；3)引入外部独立的js文件。通过实例演示了如何利用window.alert弹出消息框以及脚本执行顺序。

大家好，小编为大家解答javascript的代码写在哪里的问题。很多人还不知道js代码有哪些语法规则，现在让我们一起来看看吧！

HTML嵌入JavaScript代码的三种方式

第一种方式：事件句柄后写代码

要实现的功能：
用户点击以下按钮，弹出消息框。
JS是一门事件驱动型的编程语言，依靠事件去驱动，然后执行对应的程序GPT改写。
在JS中会有很多事件，其中有一个事件叫做：鼠标点击，单词：click。并且任何事件都会对应
一个事件句柄叫做：onclick。【注意：事件和事件句柄的区别是：事件句柄是在事件单词前添加一个 on。】，而事件句柄是以HTML标签的属性纯在的。
οnclick=“js代码”，执行原理是什么？
页面打开的时候，js代码并不会执行，只是把这段JS代码注册到按钮的click事件上了。
等这个按钮发送click事件之后，注册在onclick后面的js代码会被浏览器自动调用。
怎么使用JS代码弹出消息框？
在JS中有一个内置的对象叫做 window，全部小写，可以直接拿来使用，window代表的是
浏览器对象。
window对象有一个函数叫做：alert，用法是：window.alert(“消息”)；这样就可以弹窗了。

代码示例如下：

<!doctype html>
<html>
    <head>
        <title>HTML嵌入JavaScript代码的第一种方式</title>
    </head>
    <body>
        <!--
			 6.JS中的一条语句结束之后可以使用分号";"，也可以不用。
        -->
        
        <input type="button" value="hello" onclick="window.alert('hello js')"/>
        
        <!-- window. 可以省略。 -->
        <input type="button" value="hello" onclick="alert('hello js')"/>
        
        <!-- JS中的字符串可以使用双引号，也可以使用单引号。 -->
        <input type="button" value="hello" onclick='window.alert("hello jscode")'/>
        
        <!-- 可以在onclick中写多个弹窗 -->
        <input type="button" value="hello" onclick="window.alert('hello zhangsan')
                                                    window.alert('hello lisi')
                                                    window.alert('hello wangwu')"/>
        
        <!-- JS中的一条语句结束之后可以使用分号";"，也可以不用。 -->
        <input type="button" value="hello" onclick="window.alert('hello zhangsan');
                                                    window.alert('hello lisi');
                                                    window.alert('hello wangwu');"/>
                
    </body>
</html>

第二种方式：使用脚本块

JavaScript的脚本块在一个页面当中可出现多次。没有要求。
JavaScript的脚本块出现位置也没有要求，随意。

代码示例如下：

< type="text/java">
    // alert有阻塞当前页面加载的作用。（阻挡，直到用户点击确定按钮。）
    window.alert("first......");
</>

<!doctype html>
<html>
    <head>
        <title>HTML嵌入JavaScript代码的第二种方式</title>
        
        <!-- 样式块 -->
        <style type="text/css">
            /*
            	css代码
            */
        </style>
        
        < type="text/java">
            window.alert("head......");
        </>
        
    </head>
    <body>
        
        <!--此按钮对象在脚本快执行前创建-->
        <input type="button" value="我是一个按钮对象_1">
        
        <!-- 第二种方式：脚本块的方式 -->
        < type="text/java">
            /*
            	暴露在脚本块当中的程序，在页面打开的时候执行，并且遵循自上而下的顺序依次逐行执行。
            	（这个代码的执行不需要事件）
            */
            window.alert("Hello World!");// alert函数会阻塞整个HTML页面的加载。
            
            window.alert("Hello JavaScript!");
        </>
        
        <!--此按钮对象在脚本快执行后创建-->
        <input type="button" value="我是一个按钮对象_2">
    
    </body>
</html>

< type="text/java">
    window.alert("last......");
</>

第三种方式：引入外部独立的js文件

需要先在与HTML所在的文件夹中创建js文件
在需要的位置引入js脚本文件

注意点：

引入外部独立的js文件的时候，js文件中的代码会遵循自上而下的顺序依次逐行执行。
同一个js文件可以被引入多次。但实际开发中这种需求很少。

代码示例如下：

<!doctype html>
<html>
    <head>
        <title>HTML嵌入JavaScript代码的第三种方式：引入外部独立的js文件。</title>
    </head>
    <body>
        
        <!--先在HTML所在的文件夹中创建了一个js文件，其中存放了一个jsword.js文件-->
        < type="text/java" src="js/jsword.js"></>
        
        <!--这种方式不行，结束的标签必须有。-->
        < type="text/java" src="js/jsword.js" />
        
        < type="text/java" src="js/jsword.js">
        	// 这里写的代码不会执行。
        	// window.alert("Test");
        </>
        
    	<!--在文件引入后，仍然可以使用脚本块-->
    	< type="text/java">
            alert("hello jack!");
    	</>
    </body>
</html>