欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

JavaScript的三种写法

程序员文章站 2022-04-05 11:12:48
...

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>
相关标签： javascript

上一篇： Vue Cli 中 webpack 配置的3种写法

下一篇： Canvas保存多图层为图片

推荐阅读