JS脚本标签

时间:2020-02-23 14:33:51  来源:igfitidea点击:

在本教程中,我们将学习脚本标记。

script标签

我们使用script标记来告诉浏览器HTML文档中脚本的起点和终点。

在以下示例中,我们创建了一个脚本标签,并将type属性的值设置为text/javascript并编写了一些代码。

<script type="text/javascript">
	console.log("Hello World");
</script>

JavaScript是HTML的默认脚本语言,因此在新的浏览器中,我们不必使用type属性。
但是对于较旧的浏览器,我们必须设置type属性。

我们还可以使用script标签将外部javascript文件包含到HTML文档中。

在以下示例中,我们创建了一个脚本标签,并将src属性的值设置为javascript文件路径/path/to/the/file/app.js。

<script type="text/javascript" src="/path/to/the/file/app.js"></script>

Noscript标签

如果在浏览器中关闭了javascript,我们将使用noscript标签提供替代内容。

在以下示例中,我们使用noscript标记。

<script type="text/javascript">
	console.log("Hello World");
</script>
<noscript>
	No JavaScript
</noscript>

控制台中的Hello World

在下面的示例中,我们将使用console.log()方法来打印著名的" Hello World!"。
在我们的浏览器控制台中输入文字。

打开您喜欢的文本编辑器或者IDE,然后创建一个html文件并将其命名为helloworld.html。

现在,在此文件中编写以下HTML。

<!DOCTYPE html>
<html>
    <head>
        <title>Hello World</title>
    </head>
    <body>
        <script type="text/javascript">

        	console.log("Hello World!");

        </script>
    </body>
</html>

现在,在浏览器中打开helloworld.html文件,然后打开控制台。

Chrome:查看->开发人员->开发人员工具

Firefox:工具-> Web开发人员-> Web控制台

Safari:开发人员->显示错误控制台

或者,只需右键单击页面,然后选择"检查/检查元素",然后单击"控制台"选项卡。

进入"控制台"选项卡后,您将看到以下输出。

外部JS文件

同样,我们可以创建一个javascript文件(例如helloworld.js),并其中编写以下代码。

console.log("Hello World!");

然后使用script标记将js文件包含在helloworld.html文件中。
当在浏览器中打开html文件时,它会给我们相同的结果。