初学MWA(Modern Web App）那些事-3-做一个简单的计算器
初学MWA(Modern Web App）那些事-3-做一个简单的计算器
目录
- 初学MWA(Modern Web App）那些事-3-做一个简单的计算器
- 前言
- 一、本节学习目标
- 二、计算器实例项目创建过程
- 2.1 创建一个HTML文档
- 2.2 查看新建的html文档
- 2.3 Web应用开发：初始化设置
- 2.4 Web应用开发：添加Logo
- 2.5 Web应用开发：添加Logo样式
- 2.6 Web应用开发：添加Logo其他样式
- 2.7 Web应用开发：创建计算器Body
- 2.8 Web应用开发：添加计算器按钮
- 2.9 Web应用开发：组织布局计算器按钮
- 2.9 Web应用开发：为计算器按钮添加样式
- 2.10 Web应用开发：将按钮移动到屏幕区
- 2.11 Web应用开发：为按钮添加事件类型
- 2.12 Web应用开发：设置Javascript
- 2.13 Web应用开发：Javascript 按钮指针
- 2.14 Web应用开发：计算器按钮编程
- 总结
前言
MWA，即Modern Web App（现代Web应用），是指一类采用了最新Web技术和方法论构建的Web应用。这类应用旨在提供接近原生应用的用户体验，同时利用Web平台的优势，如跨平台兼容性、无需安装、实时更新等特性。
MWA的设计和开发重点在于优化性能、提高响应速度、增强用户交互，并确保应用可以在各种设备和浏览器上运行良好。
MWA的概念体现了Web开发领域的持续进步，旨在提供更高效、更灵活和更用户友好的Web应用。随着技术的发展，MWA的实现方式和最佳实践也在不断演进。
一、本节学习目标
- 练习创建HTML
- 练习创建CSS
- 练习创建 JavaScript
- 练习创建一个计算器实例项目
二、计算器实例项目创建过程
2.1 创建一个HTML文档
1.在电脑中创建一个名为“计算器”（命名随意即可）的文件夹，用于存放将要建立的程序文件；
2.将图片文件“Logo.png”放入上一步创建的“计算器”文件夹里；
3.用VSCode创建三个空文件：
✔ Calculator.html
✔ _styles.css
✔ _script.js
2.2 查看新建的html文档
右键 HTML 文档，运行“Open with Live Server”，会显示一个空的浏览器窗口，开始我们的web应用开发吧。
2.3 Web应用开发：初始化设置
- 将默认标题“Documents”改成一个喜欢的标题→“我的计算器”；
- 添加一个样式链接“_ctyles.css”；
- 创建一个名为calculator的类，这样保住页面上所有内容；
- 定义JavaScript文件路径指向我们创建的空文件：“_script.js”
2.4 Web应用开发：添加Logo
在上面的html文件中添加一个块，在页面中就会自动显示出logo图片。
2.5 Web应用开发：添加Logo样式
- 先在html文件中添加一个“calculator-screen”类
- 再在_styles.css文件中，定义body样式
- 在_styles.css文件中给calculator类添加样式
- 最后保存html+css文件，查看网页中logo图片的动态变化过程
2.6 Web应用开发：添加Logo其他样式
- 设置logo背景颜色、logo大小
- 保存CSS文件，查看网页中logo的变化
2.7 Web应用开发：创建计算器Body
- 创建名为“.Calculator-screen”类的格式
- 保存CSS文件，查看网页中的变化
2.8 Web应用开发：添加计算器按钮
- 在HTML文件中，创建名为“calculator-buttons”
- 保存html文件，查看网页中的变化
2.9 Web应用开发：组织布局计算器按钮
- 在CSS文件中，创建名为“.calculator-buttons”格式，形成一个4列的按钮布局
- 保存CSS文件，查看网页中的变化
2.9 Web应用开发：为计算器按钮添加样式
- 在CSS文件中，创建名为“.button”样式，用于布置这4列按钮
- 保存CSS文件，查看网页中的变化
2.10 Web应用开发：将按钮移动到屏幕区
- 在HTML文件中，将名为“calculator-buttons”类移入到名为“calculator”父类中
- 保存html文件，查看网页中的变化
2.11 Web应用开发：为按钮添加事件类型
- 在CSS文件中，添加3个样式，使得当按下按键时，改变颜色，呈现一种动态的效果
- 保存CSS文件，查看网页中的变化
2.12 Web应用开发：设置Javascript
- 在Javascript文件中，添加代码，用于创建一个对象，以引用页面中的“屏幕”和“按钮”元素
- 保存Javascript文件，按F12键
“控制台”会记录显示由Javascript生成的信息，如果移动光标，屏幕区相关元素将会高亮显示
2.13 Web应用开发：Javascript 按钮指针
- 在Javascript文件中，添加代码，实现在控制台窗口中给每个按钮显示超链接
- 移动光标到按钮上，计算器应用上将会自动高亮显示相关按钮
2.14 Web应用开发：计算器按钮编程
- 在Javascript文件中，添加代码，并删除之前的诊断信息
- 在网页版计算器上点击按钮，查看效果
总结
以上就是应用MWA技术实现一个网页版计算器的整个流程，一步步操作下来，感觉也不是很麻烦，对于这种简单的网页开发，一点点积累经验，相信很快就能掌握各种技巧，实现自己想要的功能。
同时，欢迎小伙伴点赞，关注，收藏，我将继续更新相关技术。
原文地址：https://blog.csdn.net/lichuanxichina/article/details/140466958
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！