JavaScript的编写位置及第一个JavaScript代码

不会写代码的菜

已于 2022-06-12 20:44:54 修改

阅读量409

点赞数 1

分类专栏： javascript 文章标签： javascript 前端 vue.js

于 2022-06-12 20:40:14 首次发布

本文链接：https://blog.csdn.net/weixin_52629592/article/details/125249626

版权

javascript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本文介绍了JavaScript代码的四种编写方式：1) onclick属性中触发；2) href属性触发；3) script标签内编写；4) 外部.js文件引入。尽管在属性中编写JS方便快捷，但结构与行为耦合不利于维护。推荐将代码写入外部文件以实现代码复用和利用浏览器缓存。示例中展示了如何在HTML中通过onclick事件调用函数显示提示。

摘要由CSDN通过智能技术生成

1.JavaScript代码可以编写到便签的onclick属性中

<button onclick="alert('111');">点我一下</button>

这样只有当我们点击按钮时,js代码才会执行

2.可以将js代码编写在超链接的href属性中,这样当我们点击超链接时,会执行其中的js代码

<a href="javascript:alert('点我');"></a>

上述方式体现出我们虽然会将js代码编写到标签的属性中,但是它们属于结构与行为耦合,不方便维护,因此不推荐使用此种方式

3.将js代码编写在<script>标签中

<script type="text/javascript">
            var b = 5;
            var c = "5";
            
            console.log(b==c);//true 比较值
            console.log(b===c);//false 全等,比较值和类型 
        </script>

4.与CSS一样,我们也可以将js代码编写在外部文件中,这时我们需要创建一个JavaScript的文件,扩展名为.js,这时我们需要使用script标签引入外部文件

<script type="text/jscript" src="test.js"></script>

写到外部文件中,我们可以在不同的页面中同时引用,也可以利用浏览器的缓存机制,开发中推荐使用
注意: script标签一旦被用于引入外部文件了,就不能再编写js代码,即使编写了浏览器也不会识别如果需要编写,可以在编写一个新的script标签用于编写内部代码

接下来我们使用JavaScript代码编写第一个程序实现输出"hello World".

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
		    alert("你好!");
		    function test(){
		    	alert("hello js");
		    }
		</script>
	</head>
	<body>
		<input type="button" value="测试按钮" onclick="test()" />
	</body>
</html>