Web程序设计基础R课程实验 2021 太原理工大学

本文主要是介绍Web程序设计基础R课程实验 2021 太原理工大学，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

web程序设计基础R课程实验

实验一 HTML基础
- 一、实验目的
- 二、实验环境
- 三、实验内容、源码及运行结果
- - 实验内容：
  - 源码：
  - 运行结果：
实验二 CSS+DIV页面布局
- 一、实验目的
- 二、实验环境
- 三、实验内容、源码及运行结果
- - 实验内容：
  - 源码：
  - 运行结果：
实验三 JavaScript内置函数与内置对象
- 一、实验目的
- 二、实验环境
- 三、实验内容、源码及运行结果
- - 实验内容
  - 源码：
  - 运行结果：
实验四 JavaScript事件
- 一、实验目的
- 二、实验环境
- 三、实验内容、源码及运行结果
- - 实验内容
  - 源码：
  - 运行结果：

实验一 HTML基础

一、实验目的

1．掌握常用的HTML语言标记；
2．利用文本编辑器建立HTML文档，制作简单表单页面。

二、实验环境

计算机、Windows操作系统

三、实验内容、源码及运行结果

实验内容：

1．在文本编辑器“记事本”中输入如下的HTML代码程序，以文件名sy1.html保存，并在浏览器中运行。（请仔细阅读下列程序语句，理解每条语句的作用）
源程序清单如下：

<html>
<head>
<title>Example</title>
</head>
<body bgcolor="#00DDFF">
<h1><B><I><FONT COLOR="#FF00FF">
<MARQUEE BGCOLOR= "#FFFF00" direction=left behavior=alternate>welcome to you</MARQUEE>
</FONT></I></B></h1>
<hr>
<h2 align=center><FONT COLOR="#0000FF">A simple HTML document</FONT></h2>
<EM>Welcome to the world of HTML</EM>
<p>This is a simple HTML document.It is to give you an outline of how to write HTML file and how the<b> markup tags</b> work in the <I>HTML</I> file</p>
<p>Following is three chapters
<ul>
<li>This is the chapter one</li>
<li><A  HREF="#item">This is the chapter two</A></li>
<li>This is the chapter three</li>
</ul></p>
<hr>
<p><A NAME="item">Following is items of the chapter two</A> </p>
<table border=2 bgcolor=gray width="40%">
<tr>
<th>item</th><th>content</th>
</tr>
<tr>
<td>item 1</td>
<td>font</td>
</tr>
<tr>
<td>item 2</td>
<td>table</td>
</tr>
<tr>
<td>item 3</td>
<td>form</td>
</tr>
</table>
<hr><p>
1<p>
2<p>
3<p>
4<p>
5<p>
6<p>
7<p>
<B><I><FONT COLOR=BLUE SIZE=4>End of the example document </FONT></I></B>
</p>
</body>
</html>

2．编写一个能输出如下图所示界面的HTML文件。要求：
（1）校验输入的E-mail的格式：用户名@域名。
（2）校验输入的电话格式：11位数字组成。
（3）性别“女”为默认选项
（4）年龄的列表选项有：20以下、20、21、22、23、24、25、25以上，其中“20以下”为默认选项。
在这里插入图片描述

源码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>实验一</title>
    </head>
    <body>
        <form action="" align="center">
            <h4>请留下你的个人资料</h4>
            <table align="center">
                <tr>
                    <td>姓名：</td>
                    <td><input type="text"></td>
                </tr>
                <tr>
                    <td>E-mail：</td>
                    <td><input type="Email" pattern="^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-]+\.)+([a-zA-Z0-9]{2,4})+$)"></td>
                </tr>
                <tr>
                    <td>电话：</td>
                    <td><input type="tel" maxlength="11" minlength="11" pattern="[0-9]"></td>
                </tr>
                <tr>
                    <td>性别：</td>
                    <td>
                        <input name="sex" type="radio" id="man"><label for="man">男</label>
                        <input name="sex" type="radio" id="woman"><label for="woman">女</label>
                    </td>
                </tr>
                <tr>
                    <td>年龄：</td>
                    <td>
                        <select name="" id="">
                            <option value="" selected>20以下</option>
                            <option value="">20</option>
                            <option value="">21</option>
                            <option value="">22</option>
                            <option value="">23</option>
                            <option value="">24</option>
                            <option value="">25</option>
                            <option value="">25以上</option>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td>留言板：</td>
                    <td><input type="textarae" ></td>
                </tr>
                <tr>
                    <td>您的爱好：</td>
                    <td>
                        <input type="checkbox" name="hobbys" id="sport">
                        <label for="sport">运动</label><br>
                        <input type="checkbox" name="hobbys" id="read">
                        <label for="read">阅读</label><br>
                        <input type="checkbox" name="hobbys" id="music">
                        <label for="music">音乐</label><br>
                        <input type="checkbox" name="hobbys" id="ly">
                        <label for="ly">旅游</label>
                    </td>
                </tr>
            </table>
            <input type="submit" value="提交">
            <input type="reset" value="全部重写">
        </form>
    </body>
</html>

运行结果：

在这里插入图片描述

实验二 CSS+DIV页面布局

一、实验目的

1．理解网页内容和表现的分离；
2．熟悉CSS的基本语法和格式；
3．了解页面常用布局结构；
4. 学会用CSS+DIV布局制作一个博客页面。

二、实验环境

计算机、Windows操作系统

三、实验内容、源码及运行结果

实验内容：

1．在网页中应用CSS
网页中应用CSS有4种方法，分别是：内联CSS样式、嵌入CSS样式、链接外部CSS样式表和导入外部CSS样式表。
（1）内联CSS样式
新建HTML文档，在body标记中输入下面的代码

<p style=”font-size:72;font-style:bold;color:red;>这是一段红色粗体文字</p>
<p>这段文字没有应用样式</p>

浏览结果。
（2）嵌入式CSS样式
在上题基础上，在head标记中输入下面的代码

<style type=”text/css”>
  h1{color:#ff0000;font-family:黑体}
  .mystyle{color:#0000ff; font- family:黑体;font-size:64}
p.first{ color:#000000; font- family:宋体;font-size:12}
p.second{ color:#00ff00; font- family:宋体;font-size:32}

在body标记中继续输入下面代码

<h1>网页设计制作</h1>
<p class=”first”>网页设计制作</p>
<p class=”second”>网页设计制作</p>
<p class=”mystyle”>网页设计制作</p>
<div class=”mystyle”>网页设计制作</div>

浏览效果。
（3）外部样式表
新建文本文件，输入下面的代码

h1{color:#ff0000;font-family:黑体}
p.first{ color:#000000;font-family:宋体;font-size:12}
p.second{ color:#00ff00;font-family:宋体;font-size:32}
p. mystyle { color:#0000ff;font-family:宋体;font-size:64}

将文件保存为mystyle.css
新建HTML文档，在head标记中输入下面的代码

<link rel=”stylesheet” type=”text/css” href=” mystyle.css”>

在body标记中输入下面的代码

<h1>网页设计制作</h1>
<p class=”first”>网页设计制作</p>
<p class=”second”>网页设计制作</p>
<p class=” mystyle”>网页设计制作</p>
<div class=” mystyle”>网页设计制作</div>

浏览效果。
（4）导入外部CSS样式
新建HTML文档，在head标记中输入下面的代码

  <style type=”text/css”>
    @import url(“mystyle.css”);
  </style>

Body标记中的内容与（3）相同，浏览效果。
2．结合HTML5的语义化标签，使用DIV+CSS网页布局技术设计一个个人博客页面。要求：（1）header标签定义页面头部区；nav标签定义导航区；div标签定义中部的内容区块，其中左边用section标签嵌套两篇article文章区，每篇文章区应含有头部的标题区、段落内容和页脚；右边用aside设计侧栏；底部用footer标签定义版权信息。如下图所示。

在这里插入图片描述

（2）编写外部CSS文件，为主文件中用到的各个标签属性进行样式设置，如背景色，字体，字号大小，对齐方式等。
（3）用无序表实现水平导航菜单，关键点：消除无序列表前的项目符号，将默认的垂直排列转换为水平排列。
（4）设置导航菜单的超链接样式，关键点：链接目标为#，设置鼠标悬停在导航栏中的热字上时背景色的变化。

源码：

HTML部分：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>实验一</title>
        <link rel="stylesheet" href="css/style1.css">
    </head>
    <body>
        <header id="top">
            <h1>某某的博客</h1>
        </header>
        <nav>
            <ul>
                <a href="#"><li>首页</li></a>
                <a href="#"><li>博文</li></a>
                <a href="#"><li>相册</li></a>
                <a href="#"><li>个人档案</li></a>
            </ul>
        </nav>
        <div class="container">
            <article>
                <header>
                    <h3>HTML5</h3>
                </header>
                <p>HTML5是下一代HTML的标准，目前仍然处于发展阶段。经过了Web2.0时代，基于互联网的应用已经越来越丰富，同时也对互联网应用提出了更高的要求。</p>
                <footer>编辑于2018.9</footer>
            </article>
            <article>
                <header>
                    <h3>CSS3</h3>
                </header>
                <p>对于端口设计师来说，虽然CSS3不是全新的技术，但它却重启了一扇奇思妙想的窗户。</p>
                <footer>编辑于2018.9</footer>
            </article>
            <aside>
                <h3>简介</h3>
                <p>HTML5和CSS3正在掀起一场变革，他不是在代替Flash，而是正在发展成为开放的Web平台，不但在移动领域建工卓著，而且对传统的应用程序发起挑战。</p>
            </aside>
        </div>
        <footer>
            <h5>版权所有2018</h5>
        </footer>
    </body>
</html>

CSS部分：

*{
    margin: 0;
    padding: 0;
}
#top{
    width: 100%;
    height: 100px;
    text-align: center;
}
#top h1 {
    line-height: 100px;
    font-size: 50px;
    letter-spacing:20px;
}
nav{
    background-color:skyblue;
    height: 70px;
}
a{
    text-decoration: none;
}
a:hover{
    color: aqua;
}
ul{
    margin-left: 10%;
}
ul li {
    list-style: none;
    float: left;
    margin-right: 40px;
    font-size:30px;
    line-height: 70px;
}
.container{
    width: 100%;
    margin-top: 50px;
}
.container article{
    width: 55%;
    float: left;
    margin-left: 10%;
    margin-top: 30px;
    padding: 30px;
    box-sizing: border-box;
    border: 1px solid rgb(24, 174, 233);
}
.container article h3{
    border-bottom: 1px dashed rgb(24, 174, 233);
}
.container article p{
    margin-top: 5px;
    line-height:30px;
}
.container aside{
    float: right;
    top: 50%;
    transform: translateY(-50%);
    width: 13%;
    margin-right: 10%;
    padding: 30px;
    box-sizing: border-box;
    border: 1px solid rgb(24, 174, 233);
}
.container aside p{
    top: 5px;
}
footer{
    clear: both;
    border-top: 1px solid rgb(24, 174, 233);
    margin-top: 15px;
}
footer h5{
    float: left;
    margin-left: 50%;
    margin-top: 5px;
    transform:translateX(-50%);
}

运行结果：

在这里插入图片描述

实验三 JavaScript内置函数与内置对象

一、实验目的

1．分析JavaScript内置函数的使用方法；
2．掌握JavaScript常用内置对象的属性和方法。

二、实验环境

计算机、Windows操作系统

三、实验内容、源码及运行结果

实验内容

1．阅读下面的程序，理解JavaScript系统内置函数的功能
源程序清单如下：

<!DOCTYPE html>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
  <title>内置函数的理解</title>
  <style type="text/css"> 
   div{
	background:#CDEBE6;
        color:#330000;
        width:750px;
	font-size:20px;
        font-weight:bolder;
       }
    h4{text-align:center;}
     b{color：red;font-size:18px;} 
  </style>
 </head>
 <body>
  <div>
   <h4>系统函数使用</h4>
   <b>1.eval("字符串")<br/></b>
   <script type="text/javascript">
     var rel=eval("1000+3/5");
     document.write("&nbsp;&nbsp;"+"1000+3/5="+rel);
     document.write("<br/>");
     document.write("&nbsp;&nbsp;"+"x=10,y=20,x*y=");
     eval("x=10;y=20;document.write(x*y)");
     document.write("<br/>&nbsp;&nbsp;2+2="+eval("2+2"));
     document.write("<br/>");
     var x=10;
     document.write("&nbsp;&nbsp;"+"x=10,x+17="+eval(x+17));
     document.write("<br/>");
   </script>

   <b>2.escape("字符串")<br/></b>
   <script type="text/javascript">
     document.write("&nbsp;&nbsp;"+"escape('&')="+escape("&"));
     document.write("<br/>");
     result=escape("&nbsp;&nbsp;"+"my name is 张华");
     document.write("&nbsp;&nbsp;"+"escape('my name is 张华')="+result);
   </script>

   <b>3.unescape(string)<br/></b>
   <script type="text/javascript">
     document.write("&nbsp;&nbsp;"+"unescape('%26')="+unescape("%26"));
     document.write("<br/>");
     result=unescape("&nbsp;&nbsp;"+"my%20name%20is%20%u5F20%u534E");
     document.write("&nbsp;&nbsp;"+"unescape('my%20name%20is%20%u5F20%u534E')="+result);
   </script>

   <b>4.parseFloat(string)<br/></b>
   <script type="text/javascript">
     document.write("&nbsp;&nbsp;"+"parseFloat('3.14')="+parseFloat("3.14"));
     document.write("<br/>");
     document.write("&nbsp;&nbsp;"+"parseFloat('314e-2')="+parseFloat("314e-2"));
     document.write("<br/>");
     document.write("&nbsp;&nbsp;"+"parseFloat('3.14ab')="+parseFloat("3.14ab"));
     document.write("<br/>");
     document.write("&nbsp;&nbsp;"+"parseFloat('FF2')="+parseFloat("FF2"));
     document.write("<br/>");
    </script>

    <b>5.parseInt("numberstring,radix)<br/></b>
    <script type="text/javascript">
     document.write("&nbsp;&nbsp;"+"32:"+parseInt("32"));
     document.write("<br/>");
     document.write("&nbsp;&nbsp;"+"032:"+parseInt("032"));
     document.write("<br/>");
     document.write("&nbsp;&nbsp;"+"0x32:"+parseInt("0x32"));
     document.write("<br/>");
     document.write("&nbsp;&nbsp;"+"parseInt('15*3',10)="+parseInt("15*3",10));
     document.write("<br/>");
    </script>

    <b>6.isNaN()<br/></b>
    <script type="text/javascript">
     document.write("&nbsp;&nbsp;"+"isNaN(\"5454g\")="+isNaN("5454g"));
     document.write("<br/>");
     document.write("&nbsp;&nbsp;"+"isNaN(\"789\")="+isNaN("789"));
     document.write("<br/>");
    </script>
   </div>

 </body>
</html>

2．阅读下面的程序，理解JavaScript系统的Date对象及其方法。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>日期对象及其方法 </title>
    <script type="text/javascript">
    var mydate=new Date();
    var myyear=mydate.getFullYear(); <!--使用getFullYear(）获得年份-->
    document.write("年份:"+myyear); <!--输出当前年份-->
    document.write("<br/>");
    var myMonth=mydate.getMonth(); <!--使用getMonth(）获得月份-->
    document.write("月份:"+myMonth); <!--输出当前月份-->
    document.write("<br/>");
    
    var mydays=mydate.getDate(); 
    document.write("日期:"+mydays); <!--输出当前秒-->
    document.write("<br/>");

    var weekday=["日","一","二","三","四","五","六"];
    document.write("星期：" + weekday[mydate.getDay()] );
    document.write("<br/>");

    pageOpen=new Date();
    function stay(){
    pageClose=new Date();
    minutes=(pageClose.getMinutes()-pageOpen.getMinutes());
    seconds=(pageClose.getSeconds()-pageOpen.getSeconds());
    time=(seconds+(minutes*60));
    time=(time+"秒");
    alert("您在这里停留了"+time+"欢迎下次再来");
    }
    </script>
</head>
<body>
<input type="button" value="停留时间" onClick="stay()">
</body>
</html>

源码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>实验一</title>
        <style>
            input{
                width: 200px;
                height: 150px;
                font-size: 50px;
            }
            p{
                font-size: 80px;
            }
        </style>
    </head>
    <body style="text-align:center">
        <p id="num">0</p>
        <input type="button" value="开始" onclick="start()" />
        <input type="button" value="停止" onclick="end()" />
        <input type="button" value="清零" onclick="cls()" />
    </body>
    <script>
        var num = document.getElementById("num");
        var i = 0;
        var timer;
        function start() {
            clearInterval(timer);
            timer = setInterval(result,1000);
        }
        function result () {
            i++;
            num.innerText = i;
        }
        function end() {
            clearInterval(timer);
        }
        function cls() {
            i=0;
            num.innerText =i;
            clearInterval(timer);
        }
    </script>
</html>

运行结果：

在这里插入图片描述

实验四 JavaScript事件

一、实验目的

1．掌握事件、事件驱动、事件处理程序的概念，理解三者之间的关系；
2．掌握指定事件处理程序的方法；
3、学会编写简单的事件处理程序。

二、实验环境

计算机、Windows操作系统

三、实验内容、源码及运行结果

实验内容

1．阅读下面的程序，理解各段程序中的事件、事件驱动及事件处理。
（1）表单事件源程序清单如下：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>表单事件</title>
   <script type="text/javascript">
    function getFocus(){
             document.bgColor="blue";
     };
    function loseFocus(){
             document.bgColor="white";
     };
    function submitTest(){
             var msg="表单数据的获取：\n";
             msg +="用户名：";
             var username=document.getElementById("input1").value;
             msg +=username;
             msg +=",\n密码:";
             var psw=document.getElementById("input2").value;
             msg +=psw;
             alert(msg);
             return false;
     }
    function resetTest(){
             alert("将数据清空");
     }
</script>
</head>
<body>
 <center>
  <form onsubmit="return  submitTest()" onreset="resetTest()">
   <fieldset height="500px">
    <legend>表单事件实例</legend><br/>
    用户名：<input type="text" id="input1"/>
    密&nbsp;&nbsp;码:<input type="password" id="input2"/><br/><br/>
    <input type="button" value="获得/失去触发事件" onFocus="getFocus()" onBlur="loseFocus()"/><br/>
    <input type="submit" value="提交"/>
    <input type="reset" value="重置"/>
   </fieldset>
  </form>
 </center>
</body>
</html>

（2）鼠标事件源程序清单如下：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>鼠标事件</title>
  <style type="text/css">
    img{display: none;}
  </style>
  
 </head>
 <body>
  <p id="name">枫叶红了</p>
  <img src="枫叶红了.jpg" id="pic"/>
  <script type="text/javascript">
    var names=document.getElementById("name");
    var pic=document.getElementById("pic");
    names.onmouseover=function(){
	names.style.color="red";
    }
    names.onmouseout=function(){
	names.style.color="blue";
    }
    names.onclick=function(){
	pic.style.display="block";
    }
    names.ondblclick=function(){
	pic.style.display=" none";
    }   
  </script>
 </body>
</html>

2．编写一个html文件的网页代码，页面包含一个下拉列表框、一个文本框和一个按钮（参见下图左），下拉列表框选择要去的网站，当选择完毕后文本框中出现对应的网址（参见下图右）。点击确认跳转按钮后访问文本框中出现的网址。
在这里插入图片描述

源码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>实验四</title>
        <link rel="stylesheet" href="css/style2.css">
        <style>
            li{
                list-style: none;
            }
            body{
                text-align: center;
            }
        </style>
    </head>
    <body>
        <ul style="margin-top:100px">
            <li>请选择要去的网址：</li>
            <li>
                <select name="" id="one">
                    <option selected value="4">请选择</option>
                    <option value="0">百度</option>
                    <option value="1">网易</option>
                    <option value="2">qq</option>
                    <option value="3">新浪</option>
                </select>
                <input type="text" id="two" disabled value=''>
                <input type="button" id="btn" value="确认跳转">
            </li>
        </ul>
    </body>
    <script>
        var array = ['http://www.baidu.com','http://www.163.com','https://im.qq.com/index','https://www.sina.com.cn/','']
        var one = document.getElementById('one');
        var two = document.getElementById('two');
        var btn = document.getElementById('btn');
        one.addEventListener("change",function() {
            var val = this.value;
            two.value = array[val];
        },false);
        btn.addEventListener("click",function(){
            window.open(two.value);
        },false);
    </script>
</html>

运行结果：

在这里插入图片描述

这篇关于Web程序设计基础R课程实验 2021 太原理工大学的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

Web程序设计基础R课程实验 2021 太原理工大学

web程序设计基础R课程实验

实验一 HTML基础

一、实验目的

二、实验环境

三、实验内容、源码及运行结果

实验内容：

源码：

运行结果：

实验二 CSS+DIV页面布局

一、实验目的

二、实验环境

三、实验内容、源码及运行结果

实验内容：

源码：

运行结果：

实验三 JavaScript内置函数与内置对象

一、实验目的

二、实验环境

三、实验内容、源码及运行结果

实验内容

源码：

运行结果：

实验四 JavaScript事件

一、实验目的

二、实验环境

三、实验内容、源码及运行结果

实验内容

源码：

运行结果：

前端开发

后端开发

移动端开发

数据库

服务器运维

人工智能

区块链

游戏开发

网站运营

大数据/云计算

软件工程

软件/开发工具使用

资讯