[Web程序设计]实验: Web基础

加瓦程序设计师

于 2023-06-25 09:35:10 发布

阅读量789

点赞数 1

分类专栏：课程设计文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/lf21qp/article/details/131370926

版权

课程设计专栏收录该内容

85 篇文章 9 订阅

订阅专栏

该实验旨在让学生掌握HTML标签、CSS样式和JavaScript语法。实验内容包括创建一个显示“helloworld!~~”的红色宋体文本的页面，以及一个每次点击按钮数字递增的交互式页面。在实验过程中，学生遇到了将CSS放在body内导致样式未生效的问题，通过检查和学习解决了问题，还复习了DOM操作和函数使用。

摘要由CSDN通过智能技术生成

一、实验目的

（1）掌握开发工具的安装和配置

（2）熟悉程序的编写，运行和访问方法；

二、实验内容

（1）请编写出一个HTML页面，令其输出“hello world!~~”，使用css将其字体设置为宋体红色；

（2）编写一个HTML页面，页面包含数字和按钮两部分，每次单击按钮可以使数字加一。

三、实验要求

（1）熟练掌握常用HTML标签；

（2）熟练掌握CSS的语法应用；

（3）熟练掌握JS的语法和使用。

（4）做好预习，明确试验目的。

（5）对试验过程认真记录，得出配置总结；

四、实验步骤与结果(包含程序代码及运行截图)

（1）请编写出一个HTML页面，令其输出“hello world!~~”，使用css将其字体设置为宋体红色；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
    <style>
        div{font-family:"宋体";
        color:red;}
    </style>
</head>
<body>
<div>hello world!~~</div>
</body>
</html>

（2）编写一个HTML页面，页面包含数字和按钮两部分，每次单击按钮可以使数字加一。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>

</head>
<body>
<button οnclick="add()">click me</button>
<input type="text" id="text" value="0"/>
<script type="text/javascript">
    function add(){
        var x=document.getElementById("text");
        var a= x.value;
        a++;
        x.value=a;
    }
</script>
</body>
</html>

五、实验反思

在做第一题时，因为不够仔细把 <style>
        div{font-family:"宋体";
        color:red;}
    </style>
放到了body内，导致没有实现效果，后来重新仔细检查了一遍，改正了过来。
第二题在做题过程中没有遇到什么问题，但是因为不太记得js的知识点，于是往前查阅，在Dom里找到了document.getElementById("userId");获取元素的方法，以及函数的使用。