【前端寻宝之路】学习和总结JavaScript的书写形式

Aileen_0v0

已于 2024-03-21 09:01:56 修改

阅读量1.6k

点赞数 26

分类专栏：前端寻宝之路系列文章标签：前端学习 javascript 开发语言笔记 html5 编辑器

于 2024-03-15 09:30:00 首次发布

本文链接：https://blog.csdn.net/aileenvov/article/details/136619316

版权

前端寻宝之路系列专栏收录该内容

12 篇文章 3 订阅

订阅专栏

](https://img-home.csdnimg.cn/images/20220524100510.png#pic_center)

🌈个人主页: Aileen_0v0
🔥热门专栏: 华为鸿蒙系统学习|计算机网络|数据结构与算法|MySQL|
💫个人格言:“没有罗马,那就自己创造罗马~”

什么是JavaScript

js 引擎逐行读取 js 代码内容,然后解析成二进制指令,再执行.
- 渲染引擎:解析html + css , 俗称"内核"
- js引擎:也就是js的解释器,最典型的就是 Chrome 中的内置V8

JavaScript的组成

ECMAScript(简称ES): JavaScript语法
DOM:页面文档对象模型,对页面的元素进行操作
BOM:浏览器对象模型,对浏览器窗口进行操作

网页中的每一个元素相当于一个DOM对象.

在这里插入图片描述

对浏览器窗口进行前进后退这个操作就是一个BOM对象.

`JavaScript的书写形式`

`1.行内式`

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 设置一个按钮并触发点击后的事件 -->
    <input type="button" value="这是一个按钮" onclick="alert('You will be rich man')">
</body>
</html>

在这里插入图片描述
需要点击以后才会出现窗口.

`2.内嵌式`

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 设置一个按钮并触发点击后的事件 -->
    <input type="button" value="这是一个按钮" onclick="alert('You will be rich man')">
    <script>alert('你真棒!')</script>
</body>
</html>

系统会先自动弹出窗口.
在这里插入图片描述

`3.外部式`

写到单独的 .js 文件中

<script src="hello.js"></script>>

alert("hehe");

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script  src=" ./demo02.js "></script>
</html>