JavaScript的三种写法

最新推荐文章于 2022-03-01 21:37:11 发布

Henry_ww

最新推荐文章于 2022-03-01 21:37:11 发布

阅读量2.7k

点赞数 2

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/Henry_ID/article/details/119175814

版权

JavaScript 专栏收录该内容

47 篇文章 2 订阅

订阅专栏

1.2-JavaScript的三种写法

1-复习CSS代码的三种写法

1.外联样式：写在css文件中，使用link导入
- <link rel="stylesheet" href="路径/01-css外联样式.css">
  - css外联样式的本质其实就是字符串替换将下方这行代码替换成对应文件的所有代码
2.内联样式：写在style标签中,如果界面css样式比较简单可以使用，复杂的话不推荐
- <style>.div{background: green;}</style>
3.行内样式：不推荐，因为不便于维护
- <h1 style="background: green">你认真学习的样子真帅</h1>

2-JS代码三种写法

JavaScript也有三种书写方式，并且与CSS的三种书写方式几乎一致
1.外联样式：写在js文件中，使用script的src属性导入
- <script src="./01-JS外联写法.js"></script>
2.内联样式：写在script标签中,如果界面js代码较少可以使用，复杂的话不推荐
- <script >alert("这是JS内联样式")</script >
3.行内样式：不推荐，因为不便于维护
- <button onclick="window.alert('马云')">点我就告诉你黑马谁最帅</button>

3-细节注意点

1.无论是CSS还是JS的三种写法，当一个html文件存在多种写法时要记住HTML的代码是从上往下解析的
2.如果script标签没有src属性则表示内联样式，如果有src属性则表示外联样式，外联样式JS代码只能写在
js文件中而不能写在script标签中

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!--1.外联，通常是做head中引入外部js-->
	<script src="路径/01-js外联写法.js"></script>	
    
    
    <!--2.内联，可以在需要位置书写，但是通常是做head中或者body的最后-->
    <script>
        alert('js内联')
    </script>
    
</head>
<body>
<!--3.行内，在具体需要效果的html元素内部-->
<div onclick="alert('js行内')">div</div>

    <!--
    总结：js三种写法
	1.外联写法：写在js中，使用script标签的src属性来导入
    2.内联写法:写在script标签中
    3.行内写法：不推荐，因为不便于维护

	注意事项：
	1.如果一个script标签有src属性（外联写法），此时内联的js代码不会执行
	2.src是js文件所在的路径，相对于当前html文件的路径，如js/01-js外联写法.js
	3.外联路径不一定是自己服务器上的相对路径，可以是外部服务器提供：如src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.0/jquery.min.js"
	4.外联写法、内联写法、行内写法，互不干扰，可以在一个html中使用多次（不同的内容）
-->
</body>
</html>

在这里插入图片描述

Henry_ww

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript的三种写法

1.2-JavaScript的三种写法1-复习CSS代码的三种写法1.外联样式：写在css文件中，使用link导入<link rel="stylesheet" href="路径/01-css外联样式.css">css外联样式的本质其实就是字符串替换将下方这行代码替换成对应文件的所有代码2.内联样式：写在style标签中,如果界面css样式比较简单可以使用，复杂的话不推荐<style>.div{background: green;}</style&g
复制链接

扫一扫