JavaScript总结 - 技术栈

JavaScript的组成

JavaScript主要由三个部分组成，分别是ECMAScript、DOM、BOM，下面是它们的解释以及各方面的对比。

|-------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|------------------------------------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------|
| | ECMAScript | DOM | BOM |
| 是什么? | ECMAScript是由ECMA国际(原欧洲计算机制造商协会)进行标准化的一门编程语言，这种语言在万维网上应用广泛，它往往被称为JavaScript或JScript，但实际上后两者是ECMAScript语言的实现和扩展 | 文档对象模型，Document Object Model，简称DOM 是W3C组织推荐的处理可扩展标记语言的标准编程接口通过DOM提供的接口可以对页面上的各种元素进行操作(大小，位置，颜色等) | 浏览器对象模型，Browser Object Model，简称BOM 提供了独立于内容的，可以与浏览器窗口进行互动的对象结构通过BOM可以操作浏览器窗口，比如弹出框，控制浏览器跳转，获取分辨率等 |
| 描述 | JavaScript 的核心语法标准，定义了语言的基本语法、数据类型、操作符、语句、函数等。 | JavaScript 的核心语法标准，定义了语言的基本语法、数据类型、操作符、语句、函数等。 | 提供了与浏览器窗口和框架进行交互的对象和方法，用于操作浏览器相关功能。 |
| 干什么？ | - 变量声明与赋值 - 数据类型操作（如数字、字符串、数组、对象等） - 控制流语句（条件判断、循环等） - 函数定义与调用 - 面向对象编程（类、继承等，在 ES6 + 中更完善） | - 获取和修改 HTML 元素的属性（如src、href、class等）。 - 改变元素的内容（文本内容、HTML 内容）。 - 动态创建、删除和移动 HTML 元素。 - 处理元素的事件（如点击、鼠标移动等）。 | - 控制浏览器窗口的大小、位置和滚动条。 - 操作浏览器历史记录（前进、后退）。 - 获取浏览器相关信息（如窗口尺寸、用户代理等）。 - 实现浏览器的弹出框（警告框、确认框、提示框）。 |
| HTML/CSS 关系 | 独立于 HTML 和 CSS，但为操作 DOM 和 BOM 提供基础，可在 HTML 中通过<script>标签嵌入执行，与 CSS 无直接关联。 | 与 HTML 紧密相关，通过 JavaScript 操作 DOM 来改变 HTML 文档的结构和内容，与 CSS 有间接关联（如通过改变类名来应用不同样式）。 | 与 HTML 通过浏览器环境相关联，和 CSS 关系较小，主要用于浏览器层面的功能实现。 |

HTML、JS、CSS对比

HTML、JS、CSS这三个是配合使用的要想网页做的好这三个的配合是必不可少的。下面从是什么？干什么？等等展开

|----------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------------------------|
| | HTML | JS | CSS |
| 是什么？ | HTML是超文本标记语言是一种用于创建网页的标准标记语言。可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。 | JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。 | CSS (Cascading Style Sheets，层叠样式表），是一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，CSS 文件扩展名为 .css。 |
| 干什么？ | html是网页的结构 | CSS是网页的样式 | javascript是网页的行为 |
| 语法特点 | 由标签组成，标签通常成对出现，有开始标签和结束标签，也有一些自闭合标签，语法相对简单直观。 | 由选择器和声明块组成，选择器用于选中 HTML 元素，声明块中包含各种样式属性和值，语法简洁，注重样式的描述。 | 具有类似 C 或 Java 的语法结构，包括变量声明、数据类型、操作符、控制流语句、函数等，语法较为灵活和强大。 |
| 代码位置 | 通常以.html为扩展名的文件中编写，代码分布在整个文件中，用于构建网页的基本框架和内容结构。 | 一般写在以.css为扩展名的文件中，通过<link>标签引入 HTML 文件，或者直接写在 HTML 文件的<style>标签内。 | 主要写在以.js为扩展名的文件中，通过<script>标签引入 HTML 文件，也可以直接写在 HTML 文件的<script>标签内。 |
| 执行顺序 | 浏览器按照从上到下的顺序解析 HTML 文档，逐步构建网页的 DOM 树结构，加载和显示网页内容。 | 在 HTML 文档加载时，浏览器会根据 CSS 选择器将样式应用到相应的 HTML 元素上，控制页面的外观呈现。 | 在 HTML 文档加载完成后，浏览器会按照顺序执行 JavaScript 代码，实现各种动态效果和交互功能。 |
| 主要功能 | 定义网页的标题、段落、链接、图片、表格、表单等各种元素，构建网页的基本框架和层次结构。 | 设置网页元素的样式，如字体大小、颜色、背景色、边框、布局方式等，美化和布局网页。 | 响应用户操作，如点击、鼠标移动等事件，动态修改网页内容、样式和行为，实现表单验证、动画效果、数据交互等功能。 |
| 与其他两者的关系 | 是 CSS 和 JavaScript 的基础，CSS 和 JavaScript 都需要依赖 HTML 文档中的元素来发挥作用，通过选择 HTML 元素来应用样式或添加行为。 | 与 HTML 紧密结合，用于美化 HTML 元素的外观，使网页更加美观和易读，同时也可以与 JavaScript 配合实现动态样式效果。 | 通过操作 HTML 的 DOM 树和 BOM 来实现各种功能，与 HTML 和 CSS 相互协作，为网页添加动态和交互性，提升用户体验。 |
| 学习难度 | 相对较易，适合初学者入门，基本的标签和属性容易理解和掌握，能够快速创建简单的网页结构。 | 中等难度，需要掌握各种选择器、样式属性和值的用法，以及布局和样式的设计原则，对细节要求较高。 | 较难，需要理解编程逻辑、数据结构、函数等概念，掌握各种 API 和库的使用方法，对逻辑思维能力要求较高。 |
| 应用场景 | 创建各种类型的网页，如博客、新闻网站、电商网站等的静态页面布局和内容展示。 | 网页的样式设计和布局调整，如制作响应式网页、美化界面、实现独特的视觉效果等。 | 开发具有交互性和动态效果的网页应用，如表单验证、菜单交互、数据可视化、游戏等。 |
| 更新维护 | 更新主要涉及网页内容的修改和添加，如更新文章、图片等，相对较为直观和简单。 | 样式的更新可能需要对 CSS 代码进行调整和优化，以适应不同的屏幕尺寸和设计需求，需要注意样式的兼容性。 | 代码的更新和维护较为复杂，可能涉及到逻辑的修改、功能的扩展和 Bug 的修复，需要对整个项目的逻辑有清晰的理解。 |

表单代码

其实写代码并没有我想象中的那么的难。

老师经常说要站在巨人的肩膀上看世界，既然有人做好了某些东西并且是自己可以用的，为什么不用呢？

就像一开始，我只是闷头敲代码，想要凭借自己浅薄的力量敲出非常好看的页面，我发现不太可能做到，为什么呢？

一方面是知识存储不足，东西永远是学不完的，我不可能把所有的知识学完，既然有人已经搭好了框架，为什么不用呢！

二是时间太长，现在没有时间去浪费了，要抓紧时间学习，并不是说凭借自己的力量不能搭一个好看的页面，只是我没有准备只钻研JS、CSS等，继续往下深学是很难的，目前的知识够我用就好了。
下面是表单的部分代码，全部的太多了就没有全部放到上面，下面是一个基本框架，如果想要加入正则验证或者是添加样式手动添加就好了，只要有了基础的框架其实是很简单的，就是代码的堆积和优化而已。

javascript 复制代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>work</title>
   
</head>

<body>
    <form>
        <h2 id="brand">XX品牌鼠标用户调查</h2>

        <fieldset class="fieldset-basic-info">
            <legend>用户基本信息</legend>
            <div class="form-group">
                <label for="name">用户名</label>
                <input type="text" id="name" name="username" placeholder="请输入你的用户名" required>
            </div>
            <div class="form-group">
                <label for="pwd">密码</label>
                <input type="password" id="pwd" name="password" placeholder="请输入你的密码" required>
            </div>
            <div class="form-group radio-checkbox-group">
                <label for="gender">性别</label>
                <input type="radio" id="male" value="1" name="gender">
                <label for="male">男</label>
                <input type="radio" id="female" value="2" name="gender">
                <label for="female">女</label>
            </div>
            <div class="form-group">
                <label for="ads">家庭住址</label>
                <input type="text" id="ads" name="address" placeholder="请输入你的家庭地址" required>
            </div>
            <div class="form-group">
                <label for="eml">邮箱</label>
                <input type="email" id="eml" name="email" placeholder="请输入你的邮箱" required>
            </div>
        </fieldset>

        <fieldset class="fieldset-product-feedback">
            <legend>产品相关反馈</legend>
            <div class="form-group checkbox-group">
                <label>待改进的地方</label>
                <input type="checkbox" name="interest" value="1">颜色
                <input type="checkbox" name="interest" value="2">灵敏度
                <input type="checkbox" name="interest" value="3">价格
                <input type="checkbox" name="interest" value="3">形状
            </div>
            <div class="form-group">
                <label for="size">尺寸</label>
                <select id="size" name="size">
                    <option value="1" selected>9.5cm</option>
                    <option value="2">10cm</option>
                    <option value="3">10.5cm</option>
                    <option value="4">11cm</option>
                    <option value="5">11.5cm</option>
                </select>
            </div>
            <div class="form-group">
                <label for="textarea">建议</label>
                <textarea id="textarea" cols="30" rows="5" required placeholder="用户建议"></textarea>
            </div>
        </fieldset>

        <div class="button-group">
            <input type="reset" name="reset" value="复 原" id="reset">
            <input type="submit" name="submit" value="提 交" id="submit">
        </div>
    </form>
</body>

</html>