当前位置: 首页 > news >正文

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 元素的属性(如srchrefclass等)。
- 改变元素的内容(文本内容、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等,继续往下深学是很难的,目前的知识够我用就好了。

下面是表单的部分代码,全部的太多了就没有全部放到上面,下面是一个基本框架,如果想要加入正则验证或者是添加样式手动添加就好了,只要有了基础的框架其实是很简单的,就是代码的堆积和优化而已。

<!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>


http://www.mrgr.cn/news/75110.html

相关文章:

  • STM32CUBEIDE FreeRTOS操作教程(九):eventgroup事件标志组
  • 《C++20 图形界面程序:速度与渲染效率的双重优化秘籍》
  • C++设计模式:抽象工厂模式(风格切换案例)
  • 丑数动态规划
  • 【freertos】FreeRTOS时间管理
  • 软件设计师-软件工程
  • Path.Combine容易被忽略的细节
  • DAPP迎启动契机,Scroll 生态全面启动为 Pencils Protocol 赋能
  • C++函数的返回值在内存中的传递过程
  • 第4章-计划 4.4 范围管理
  • Python基础学习-07不可重复的set集合
  • 常用的生物医药专利查询数据库及网站(很全!)
  • Jetpack 之 Ink API初探
  • qt QQuickView详解
  • 《DPT: Deformable Patch-based Transformer for Visual Recognition》论文翻译
  • Go常见框架对比
  • AI驱动的电商创新:提升销售效率与用户体验
  • session 的工作原理
  • SpringBoot(十)SpringBoot使用QQ邮箱stmp发送邮件
  • 【计算机网络】UDP网络程序
  • 大数据新视界 -- 大数据大厂之 Impala 存储格式转换:从原理到实践,开启大数据性能优化星际之旅(下)(20/30)
  • 一个免费的Java 应用内存问题分析工具,用于 OutOfMemoryErrors 和堆大小调整等问题(带私活源码)
  • 基于51单片机智能窗帘仿真设计
  • 解决failed to execute PosixPath(‘dot‘) 或者GraphViz‘s executables not found
  • 【MySQL】约束
  • 三、模板与配置(下)