JavaScript的三种写法

原创于 2021-07-28 11:32:03 发布 · 3.2k 阅读

8 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

JavaScript

本文介绍了JavaScript和CSS的三种常见编写方式：外联、内联和行内样式。对于CSS，外联样式通过link标签引入CSS文件，内联样式写在style标签中，而行内样式直接在HTML元素中设置。对于JS，外联写法通过script标签的src属性导入JS文件，内联写法则将代码置于script标签内。尽管行内样式和内联JS在简单场景下适用，但因其不易维护，通常不被推荐。在HTML解析过程中，需要注意代码的顺序，以及外联样式和内联脚本的执行时机。

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>