Javaee学习笔记（三）

最新推荐文章于 2020-02-26 11:25:36 发布

xydoo

最新推荐文章于 2020-02-26 11:25:36 发布

阅读量143

点赞数

文章标签： Javaee

本文链接：https://blog.csdn.net/xydoo/article/details/96485241

版权

关于网页文件的编写

先推荐一手学习网站：
自强学堂的HTML教程
大家可以自学一下基本的写法，能看懂就好。

写在前面

在讲怎么编写网页之前，我们先来理清一下几种我们要用的网页的关系。
Servlet、HTML、jsp、JS
1.Servlet是一个运行在后台的服务端程序。（这里将后台称为服务端，前台称为用户端。）这个网页的主要功能不是给用户展示主要信息的，（除非是一些提示信息以及报错信息。）Servlet本质上是一个Java文件，他里面的共有类继承了HttpServlet这个类。这个程序可以与后台的数据库建立联系，并进行相应的操作。
2.HTML一般是一个静态网页，这个网页是面向用户的。这里面的信息主要是静态的，不可调动的，一般用来给用户录入信息用。
3.jsp的话，个人觉得这是Java文件与HTML的结合体，在里面框架是由HTML语言构成的，而在框架中我们可以添加一些Java代码（也可以是c#，本博客针对Javaee，故仅讨论Java）来实现相应的动态功能。这个网页一般是面对用户的，给用户提供信息，由于它具备了静态与动态结合的性质，它既可以调用数据库，也可以呈现信息。故往往作为一个结果集合来给用户反馈信息。
4.JS严格意义来说不算是一个网页，它是一个文件，里面可以写一些函数，供HTML调用，以免HTML的功能太过单一和死板。

编写网页

我们使用dreamweaver来进行网页的编写，我用的是8，一个比较老的版本。

面向用户录入信息的HTML网页

首先打开dreamweaver，在菜单栏中选择文件，新建，基本页中选择HTML文件即可。
在这里插入图片描述
创建后是一个未命名的HTML文件，先Crtl加S保存后，给文件命名，选择要放的路径。然后我们直接打开设计页面。点击常用下拉列表，选到表单。
点击红圈部分，就会出现下面的一个红框。这就是我们的表单了。
在将表单的下拉列表调到常用，在里面选择表格。
在这里插入图片描述
在里面可以选择表的列数以及行数。
按住Crtl用鼠标点击相应的格还能实现单元格的合并，拆分的话直接选中一个格子就行。
下面我们就可以设计自己的表格了（如下图）。除了3中的文字，其余部分都是手打的。表单工具栏里有以下部分：1是文本字段，2是单选按钮，3是列表/菜单，5是文本区域，6是按钮。在常用工具栏里面能找到4，图片。
点击添加后，双击能改变这些控件的属性，这些属性的命名对以后网页之间的传值有作用。
在这里插入图片描述
这就是基本的网页制作，看看代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script src="js/my.js" language="javascript"></script>
<!--上面这一行是为本网页引用脚本提供了寻找路径以及语言格式-->
</head>

<body>
<blockquote>
  <form id="form1" name="form1" method="post" action="">
    <table width="496" border="1" align="center">
      <tr>
        <td width="43">昵称</td>
        <td width="437"><label>
          <input name="nickname" type="text" id="nickname" />
        </label></td>
      </tr>
      <tr>
        <td>性别</td>
        <td><label>
          <input type="radio" name="gender" value="radiobutton" />
          帅哥
          <input type="radio" name="gender" value="radiobutton" />
        靓女</label></td>
      </tr>
      <tr>
        <td valign="top">头像</td>
        <td><label>
          <select name="touxiang" id="touxiang" onchange="selectimage(this.form)">
            <!--这个onchange是对js文件中函数的引用-->
            <option value="1" selected="selected">头像1</option>
            <option value="2">头像2</option>
            <option value="3">头像3</option>
            <option value="4">头像4</option>
            <option value="5">头像5</option>
            <option value="6">头像6</option>
            <option value="7">头像7</option>
            <option value="8">头像8</option>
            <option value="9">头像9</option>
            <option value="10">头像10</option>
            <option value="11">头像11</option>
            <option value="12">头像12</option>
          </select>
          <img name="showimage" src="images/1.jpg" width="184" height="171" /></label></td>
      </tr>
      <tr>
        <td>标题</td>
        <td><label>
          <input name="title" type="text" id="title" />
        </label></td>
      </tr>
      <tr>
        <td height="101" align="left" valign="top">留言</td>
        <td><label>
          <textarea name="content" cols="60" rows="20" id="content"></textarea>
        </label></td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td align="center"><label>
          <input type="submit" name="Submit" value="提交" />
        </label></td>
      </tr>
    </table>
    </form>
</blockquote>
</body>
</html>

这就是用完设计后自动生成的代码文件。不过里面我加了js中函数的使用。

js文档的编写以及函数的调用

在这里插入图片描述如上图，add.html是我刚刚编写的网页文件，在此文件夹下新建一个js文件夹，里面建议一个js文件，我的命名为my.js，代码如下：

function selectimage(f)
{
	f.showimage.src="images/"+f.touxiang.value+".jpg";
}

这里面写了showimage，这个就是我的表中那个图片的名字，当我给f传的是表单这个实参时，这个函数就会为图像修改他的文件名。就实现了选择下拉列表中的一个选项后，图片也随之改变的动态效果。
具体的解释我在HTML代码里面有注释，请读者自己查找。

有关Servlet文件的写法我会在后续博客中更新。

xydoo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Javaee学习笔记（三）

关于网页文件的编写先推荐一手学习网站：自强学堂的HTML教程大家可以自学一下基本的写法，能看懂就好。写在前面在讲怎么编写网页之前，我们先来理清一下几种我们要用的网页的关系。Servlet、HTML、jsp、JS1.Servlet是一个运行在后台的服务端程序。（这里将后台称为服务端，前台称为用户端。）这个网页的主要功能不是给用户展示主要信息的，（除非是一些提示信息以及报错信息。）Ser...
复制链接

扫一扫