JavaScript总结
JavaScript的组成
JavaScript主要由三个部分组成，分别是ECMAScript、DOM、BOM，下面是它们的解释以及各方面的对比。
| ECMAScript | DOM | BOM | |
| 是什么? | ECMAScript是由ECMA国际(原欧洲计算机制造商协会)进行标准化的一门编程语言，这种语言在万维网上应用广泛，它往往被称为JavaScript或JScript，但实际上后两者是ECMAScript语言的实现和扩展 | 文档对象模型，Document Object Model，简称DOM | 浏览器对象模型，Browser Object Model，简称BOM |
| 描述 | JavaScript 的核心语法标准，定义了语言的基本语法、数据类型、操作符、语句、函数等。 | JavaScript 的核心语法标准，定义了语言的基本语法、数据类型、操作符、语句、函数等。 | 提供了与浏览器窗口和框架进行交互的对象和方法，用于操作浏览器相关功能。 |
| 干什么？ | - 变量声明与赋值 | - 获取和修改 HTML 元素的属性（如 | - 控制浏览器窗口的大小、位置和滚动条。 |
| HTML/CSS 关系 | 独立于 HTML 和 CSS，但为操作 DOM 和 BOM 提供基础，可在 HTML 中通过 | 与 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 文档，逐步构建网页的 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等，继续往下深学是很难的，目前的知识够我用就好了。
下面是表单的部分代码，全部的太多了就没有全部放到上面，下面是一个基本框架，如果想要加入正则验证或者是添加样式手动添加就好了，只要有了基础的框架其实是很简单的，就是代码的堆积和优化而已。
<!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>原文地址：https://blog.csdn.net/2401_82353459/article/details/143772985
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！