初学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技术实现一个网页版计算器的整个流程,一步步操作下来,感觉也不是很麻烦,对于这种简单的网页开发,一点点积累经验,相信很快就能掌握各种技巧,实现自己想要的功能。
同时,欢迎小伙伴点赞,关注,收藏,我将继续更新相关技术。