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>