Web开发及人机交互导论 实验八 JavaScript程序结构

简介: Web开发及人机交互导论 实验八 JavaScript程序结构

一、实验目的


掌握JavaScript分支结构语法,并学会使用分支结构编程。

掌握JavaScript循环结构语法,学会使用多种循环编写应用程序。

掌握多分支if… else结构与switch结构互换编程。


二、实验环境


Windows10系统下的H Builder X


三、实验步骤


项目一:成绩百分制转换为五级制


本项目中通过JavaScript实现对成绩分等级的计算及弹出的窗口。

1、建立网页基本格式:


37cae1991ee1417bb0ad67b4021d0d54.png


2、在head中定义所需的style:


2c0930c60e9e4a2bb4cb77771ac21e6f.png

3.编写JavaScript代码:

①多层if-else

05ba128710db488894f053f73646a93f.png

②switch结构


b19689e3bbb84ebdaa4d71a7d2d7a027.png


③编写函数实现:


0ab45b0be873400f8cd6a50071ddcb41.png


4.代码展示:


abdb2e5b36324ce08b2e5becb75ff732.png

837aba75e66b4e2ba627c9d9b453e010.png


项目二:计算∑ n ! \sum{n!}∑n!


本项目中通过JavaScript实现对阶乘的计算及求和。

1、建立网页基本格式:

deb849b8b93546d58bfe9b8c6180e8ee.png

3dba104f43ae45028ac4b6ecab8ad5d9.png

3.编写JavaScript代码:


c446d4f0d55d4e81a920f97c3c48ba16.png

f89d078145a44f448931acea9cb2f838.png


4.代码运行展示:


04ed842d5c874064b4258c5282d4b49a.png

7f698967ecef44a7aee666d4dd19e33f.png

【提高与拓展】

1.在head中定义所需的style:

6a24e29f7c634095948e9854a696c415.png


2.编写JavaScript代码:

0143cfec7120420fbc2724060c20cf72.png


3.代码运行展示:


b320c2af9f894a0183d69e8a0d9768e8.png

df2f02a2dbab4db2a5c69bf2d973cdcc.png


项目三:系统常用函数的使用


本项目中通过JavaScript系统函数实现各个运算功能。

1、建立网页基本格式:


86006fb09d4e461bacd254459e60cc04.png

2、在head中定义所需的style:



2efebe3d322d42d2a78fc98354dbbe18.png

3. 编写JavaScript代码:

由于每个部分代码都类似,此处仅以第一个进行展示

2e44c144a2c64d239a2af8032d65a5bc.png

4.代码运行展示

ff906fc05fd14c6084fb648f50a960e6.png


项目四:课外拓展训练(一)——找出符合条件的数


本项目中通过JavaScript实现对数是否符合条件及输出的格式进行判断。

1、建立网页基本格式

6178c92992b54cd1be0357db5fe76880.png

2、编写JavaScript:


e7678dc626b248fbaf9f4d5bcf575b67.png

3.代码运行展示:

9b33b6ca3b2948c68b63fa6fce8ae8d3.png


项目四:课外拓展训练(二)——倒置九九乘法口诀表


1、建立网页基本格式:

0b9d8c3e08cc43f2bd14c4ca7bde5517.png


2、编写JavaScript:


a532178b6b364759aea54a6e970fdaba.png


3.代码运行展示:

4e4af62d55774523badb01156c7447da.png


四、结果与分析


以上四个实验项目的结果完全符合预期,JavaScript程序代码编写及CSS样式编写完全正确。


五、心得体会


通过对JavaScript程序结构的实验,我理解了JavaScript脚本放置与运行的方法,掌握了JavaScript基本构成和基础语法,掌握了自定义函数定义与引用。此外也学会使用域标记<fieldset>和域标题标记<legend>,通过样式设置域标记的样式

JavaScript作为一种脚本语言,在HTML编程过程中常常起到了锦上添花的作用,很多动画,消息弹出,数据运算,人机交互,很多都可以通过JavaScript来实现,而对JavaScript的充分利用,更是大大的提高了页面的交互性。使得简单的HTML页面变得不简单。


相关文章
|
3月前
|
开发框架 搜索推荐 数据可视化
Django框架适合开发哪种类型的Web应用程序?
Django 框架凭借其强大的功能、稳定性和可扩展性,几乎可以适应各种类型的 Web 应用程序开发需求。无论是简单的网站还是复杂的企业级系统,Django 都能提供可靠的支持,帮助开发者快速构建高质量的应用。同时,其活跃的社区和丰富的资源也为开发者在项目实施过程中提供了有力的保障。
166 62
|
2月前
|
前端开发 安全 JavaScript
2025年,Web3开发学习路线全指南
本文提供了一条针对Dapp应用开发的学习路线,涵盖了Web3领域的重要技术栈,如区块链基础、以太坊技术、Solidity编程、智能合约开发及安全、web3.js和ethers.js库的使用、Truffle框架等。文章首先分析了国内区块链企业的技术需求,随后详细介绍了每个技术点的学习资源和方法,旨在帮助初学者系统地掌握Dapp开发所需的知识和技能。
2025年,Web3开发学习路线全指南
|
3月前
|
存储 前端开发 JavaScript
如何在项目中高效地进行 Web 组件化开发
高效地进行 Web 组件化开发需要从多个方面入手,通过明确目标、合理规划、规范开发、加强测试等一系列措施,实现组件的高效管理和利用,从而提高项目的整体开发效率和质量,为用户提供更好的体验。
56 7
|
3月前
|
机器学习/深度学习 人工智能 JavaScript
JavaScript和TypeScript的未来发展趋势及其在Web开发中的应用前景
本文探讨了JavaScript和TypeScript的未来发展趋势及其在Web开发中的应用前景。JavaScript将注重性能优化、跨平台开发、AI融合及WebAssembly整合;TypeScript则强调与框架整合、强类型检查、前端工程化及WebAssembly的深度结合。两者结合发展,特别是在Vue 3.0中完全采用TypeScript编写,预示着未来的Web开发将更加高效、可靠。
106 4
|
3月前
|
开发框架 JavaScript 前端开发
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势。通过明确的类型定义,TypeScript 能够在编码阶段发现潜在错误,提高代码质量;支持组件的清晰定义与复用,增强代码的可维护性;与 React、Vue 等框架结合,提供更佳的开发体验;适用于大型项目,优化代码结构和性能。随着 Web 技术的发展,TypeScript 的应用前景广阔,将继续引领 Web 开发的新趋势。
69 2
|
3月前
|
前端开发 API 开发者
Python Web开发者必看!AJAX、Fetch API实战技巧,让前后端交互如丝般顺滑!
在Web开发中,前后端的高效交互是提升用户体验的关键。本文通过一个基于Flask框架的博客系统实战案例,详细介绍了如何使用AJAX和Fetch API实现不刷新页面查看评论的功能。从后端路由设置到前端请求处理,全面展示了这两种技术的应用技巧,帮助Python Web开发者提升项目质量和开发效率。
89 1
|
3月前
|
XML 安全 PHP
PHP与SOAP Web服务开发:基础与进阶教程
本文介绍了PHP与SOAP Web服务的基础和进阶知识,涵盖SOAP的基本概念、PHP中的SoapServer和SoapClient类的使用方法,以及服务端和客户端的开发示例。此外,还探讨了安全性、性能优化等高级主题,帮助开发者掌握更高效的Web服务开发技巧。
|
4月前
|
XML JSON API
ServiceStack:不仅仅是一个高性能Web API和微服务框架,更是一站式解决方案——深入解析其多协议支持及简便开发流程,带您体验前所未有的.NET开发效率革命
【10月更文挑战第9天】ServiceStack 是一个高性能的 Web API 和微服务框架,支持 JSON、XML、CSV 等多种数据格式。它简化了 .NET 应用的开发流程,提供了直观的 RESTful 服务构建方式。ServiceStack 支持高并发请求和复杂业务逻辑,安装简单,通过 NuGet 包管理器即可快速集成。示例代码展示了如何创建一个返回当前日期的简单服务,包括定义请求和响应 DTO、实现服务逻辑、配置路由和宿主。ServiceStack 还支持 WebSocket、SignalR 等实时通信协议,具备自动验证、自动过滤器等丰富功能,适合快速搭建高性能、可扩展的服务端应用。
285 3
|
3月前
|
设计模式 前端开发 数据库
Python Web开发:Django框架下的全栈开发实战
【10月更文挑战第27天】本文介绍了Django框架在Python Web开发中的应用,涵盖了Django与Flask等框架的比较、项目结构、模型、视图、模板和URL配置等内容,并展示了实际代码示例,帮助读者快速掌握Django全栈开发的核心技术。
291 45

热门文章

最新文章

  • 1
    打造高效的Web Scraper:Python与Selenium的完美结合
    29
  • 2
    Burp Suite Professional 2025.2 (macOS, Linux, Windows) - Web 应用安全、测试和扫描
    39
  • 3
    AppSpider Pro 7.5.015 for Windows - Web 应用程序安全测试
    27
  • 4
    【02】客户端服务端C语言-go语言-web端PHP语言整合内容发布-优雅草网络设备监控系统-2月12日优雅草简化Centos stream8安装zabbix7教程-本搭建教程非docker搭建教程-优雅草solution
    64
  • 5
    部署使用 CHAT-NEXT-WEB 基于 Deepseek
    469
  • 6
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    33
  • 7
    java spring 项目若依框架启动失败,启动不了服务提示端口8080占用escription: Web server failed to start. Port 8080 was already in use. Action: Identify and stop the process that’s listening on port 8080 or configure this application to listen on another port-优雅草卓伊凡解决方案
    49
  • 8
    零基础构建开源项目OpenIM桌面应用和pc web- Electron篇
    34
  • 9
    【01】客户端服务端C语言-go语言-web端PHP语言整合内容发布-优雅草网络设备监控系统-硬件设备实时监控系统运营版发布-本产品基于企业级开源项目Zabbix深度二开-分步骤实现预计10篇合集-自营版
    28
  • 10
    FastAPI与Selenium:打造高效的Web数据抓取服务 —— 采集Pixabay中的图片及相关信息
    68