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>
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外联写法.js3.外联路径不一定是自己服务器上的相对路径，可以是外部服务器提供：如src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.0/jquery.min.js"4.外联写法、内联写法、行内写法，互不干扰，可以在一个html中使用多次（不同的内容）
-->
</body>
</html>

JavaScript的三种写法相关推荐

JavaScript 普通函数的三种写法
第一种写法:不常用 //创建一个函数对象,较少使用//可以将要封装的代码以字符串的形式传递给构造函数var fun = new Function("console.log('hello,这是 ...
javascript函数的三种写法
在JS中函数的三种写法 [0401] 在js中函数有三种写法,这里我简单列举一下. 第一种: 第二种: 第三种: 对于以上三种函数的调用方法,这里可以简单的理解一下,第一种是最常见的函数写法,第三种是 ...
vue2.0模板的三种写法
vue2.0中的模板有三种写法,根据不同的需求运用不同的方法来实现 1. <!DOCTYPE html> <html lang="en"> <head ...
vue单文件props写法_详解Vue 单文件组件的三种写法
详解Vue 单文件组件的三种写法 JS构造选项写法 export defaul { data, methods, ...} JS class写法 @Component export default c ...
setInterval()的三种写法
setInterval的使用方法 setInterval("fun()",time)有两个参数: fun()为要执行的函数: time为多久执行一次函数,单位是毫秒: 我们做一个简 ...
Vue——05-02组件的数据、为什么data要使用函数、父组件给子组件传递数据的三种写法、父传子以及传两种以上的值、默认值以及父传子的引用类型
目录在组件中获取数据二.组件中的data为什么必须要是函数? 父组件给子组件传递数据--props属性第一种写法: 第二种写法: 第三种写法: 传默认值 : 父组件传子组件数据--引用类型的两种 ...
CSS伪类的三种写法
今天逛蓝色时,无意发现了有人讨论伪类的正确写法,让我对伪类的认识也更清晰了,转贴于此,以备日后查询(原贴当时没记下地址,已经记不得了) Code <style> a.tb{text-dec ...
Promise的链式调用三种写法，Promise.all与式调用
Promise的链式调用三种写法: // 1,Promise原始链式调用 new Promise((resolve, reject) => {setTimeout(() => {conso ...
android 闪屏页处理_Android应用闪屏页延迟跳转的三种写法
闪屏页也称之为欢迎页.在打开一个App时,我们第一眼看到的往往是一个闪屏页面,之所以叫闪屏页,是因为它出现之后会短暂地停留几秒钟再跳转到其他页面.闪屏页除了使用户体验更好外,还能给app留出初始化数据 ...

JavaScript的三种写法

1.2-JavaScript的三种写法

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

2-JS代码三种写法

3-细节注意点

JavaScript的三种写法相关推荐

最新文章

热门文章