初始 JavaScript-优快云博客

本文链接：https://blog.youkuaiyun.com/HTML_Z/article/details/123371948

本文详细介绍了JavaScript的历史，由网景公司的布兰登·艾奇在1995年创造，最初命名为LiveScript。JavaScript是一种运行在客户端的脚本语言，用于表单动态校验、网页特效、服务端开发等多个场景。浏览器通过内置的JS引擎执行代码，JavaScript主要由ECMAScript、DOM和BOM三部分组成。此外，文中还展示了JavaScript的三种书写方式和注释方法，并给出了常用的输入输出语句，如alert、console.log和prompt。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

初始 JavaScript

目标

能够说出 JavaScript 是什么
能够知道 JavaScript 的发展历史
能够说出浏览器执行 JavaScript 的原理
能够说出 JavaScript 由哪三部分组成
能够写出 JavaScript 三个输入输出语句

ECMAScript（ JavaScript 语法）
- ECMAScript 是由 ECMA 国际（原欧洲计算机制造商协会）进行标注化的一门编程语言，这种语言在万维网上应用广泛，它往往被称为 JavaScript 或 JScript，但实际上后两者是 ECMAScript 语言的实现和扩展。
  - ECMAScript
    - JavaScript（网景公司）
    - Jscript（微软公司）
- ECMAScript：ECMAScript 规定了 JS 的编程语法和基础核心知识，是所有浏览器厂商共同遵守的一套 JS 语法工业标准。
DOM（页面文档对象模型）
- 文档对象模型（ Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标记语言的标准编程接口。通过 DOM 提供的接口可以对页面上的各种元素进行操作（大小、位置、颜色等）。
BOM （浏览器对象模型）
- BOM（Browser Object Model，简称 BOM）是指浏览器对象模型，它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过 BOM 可以操作浏览器窗口，比如：弹出框、控制浏览器跳转、获取分辨率等。

1.7 JS 初体验

JS 有 3 种书写位置，分别为行内、内嵌和外部。

1. 行内式 JS

  <body>
    <!-- 1. 行内式的js 直接写到元素的内部 -->
    <input type="button" value="唐伯虎" onclick="alert('秋香姐')" /> 
  </body>

可以将单行或少量 JS 代码写在 HTML 标签的事件属性中（以 on 开头的属性），如：onclick。
注意单双引号的使用：在 HTML 中我们推荐使用双引号，JS 中我们推荐使用单引号。
可读性差，在 html 中编写 JS 大量代码时，不方便阅读。
引号易错，引号多层嵌套匹配时，非常容易弄混。
特殊情况下使用。

2. 内嵌式 JS

  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 2. 内嵌式的js -->
    <script>
      alert("沙漠骆驼");
    </script>
  </head>

可以将多行 JS 代码写到

3. 外部 JS 文件

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 3. 外部js script 双标签 -->
    <script src="my.js"></script>
  </head>

利用 HTML 页面代码结构化，把大段 JS 代码独立到 HTML 页面之外，既美观，也方便文件级别的复用。
引用外部 JS 文件的 script 标签中间不可以写代码。
适合于 JS 代码量比较大的情况。

2. JavaScript 注释

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script>
      // 1.单行注释 ctrl + /
      /* 
        2.多行注释
        2.多行注释
        默认的快捷键 shift + alt + a
      */
    </script>
  </head>
  <body>
  </body>
</html>

3. JavaScript 输入输出语句

为了方便信息的输入输出，JS 中提供了一些输入输出语句，其常用的语句如下：

方法	说明	归属
alert(msg)	浏览器弹出警示框	浏览器
console.log(msg)	浏览器控制台打印输出信息	浏览器
prompt(info)	浏览器弹出输入框，用户可以输入	浏览器

  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script>
      // 这是一个输入框
      prompt("请输入你的年龄");
      // alert 弹出警示框 输出的 展示给用户的
      alert("计算的结果是");
      // console.log 控制台输出 给程序员测试用的
      console.log("我是程序员是可以看的");
    </script>