Java Web编程实战1~3章笔记

最新推荐文章于 2021-03-22 19:17:08 发布

AnalogElectronic

最新推荐文章于 2021-03-22 19:17:08 发布

阅读量549

点赞数

分类专栏： Java EE实战教程

本文链接：https://blog.csdn.net/AnalogElectronic/article/details/103672060

版权

Java EE实战教程专栏收录该内容

16 篇文章 0 订阅

订阅专栏

第1章搭建开发环境

1.1 各种软件和框架的版本

JDK 7 Update 9
Eclipse 4.2
MyEclipse 10.6
Tomcat 7.0.32
MySQL 5.5.13
SQLyog 9.6.3
Struts 2.3.4
Hibernate 4.1.8
Spring 3.2.0

第2章 Java Web应用开发基础

2.1 Web 技术的发展

静态HTML
通用网关接口CGI
Servlet
JSP

2.2 了解Java Web技术

2.2.1 认识Java Web程序的基本组成

一个典型Java Web应用程序的组成列表
Servlet、Java Server Pages、JSTL和定制标签、Java类、静态的文件(HTML、图像、Javascript、CSS等）、描述Web应用的元信息（Web.xml)

2.2.2 认识Java Web的目录结构

2.2.3 了解Java Web程序的配置文件

web.xml文件配置的主要内容如下:
ServletContext initial parameter
Session config
Servlet/JSP definition
Servlet/JSP reflect
MIME type reflect
欢迎页
错误页
安全信息

2.3 了解MVC模式与MVC框架

Model View Control

1.JSP Model1
2.JSP Model2
在这里插入图片描述

2.3.2 认识Java Web应用程序的基础服务

页面导航
页面布局
数据验证和错误处理
业务逻辑的重用

2.3.4 常用的MVC框架

1.Struts 1.x
2.Struts 2.x
3.Spring MVC

第3章 web开发必会的客户端技术

3.2学习超文本标签语言HTML

<html>
<head>
<title>my first html</title>

<p>hello</p><br>
<p>hello<br></p>

<table border="1" width="100%">
<tr>
<td>table1,1</td>
<td>table1,2</td>
<td>table1,3</td>
</tr>
<tr>
<td>table2,1</td>
<td>table2,2</td>
<td>table2,3</td>
</tr>
<tr>
<td>table3,1</td>
<td>table3,2</td>
<td>table3,3</td>
</tr>

<img src="1.jpg" width=400 height=300 alt=pic1><br>

<a href=html1.html>local html</a><br>
<a href=http://www.bupt.edu.cn>external html</a><br>
<a href=#myword>markup</a>

<form method="post">
<table>
<tr>
<td>username:</td>
<td><input name="UserName" type="text" size=10></td>
</tr>
<tr>
<td>password:</td>
<td><input name="PassWord" type="password" size=10></td>
</tr>
<tr>
<td>option</td>
<td><select name="myselect" multiple size="4">
<option value="1" selected>option 1</option>
<option value="2">option 2</option>
<option value="3">option 3</option>
<option value="4">option 4</option>
</td>
</tr>
<tr>
<td>sex</td>
<td><input name="myradio" type="radio" value="M">male</td>
<td><input name="myradio1" type="radio" value="W">female</td>
</tr>
</table>
</form>
</head>
</html>

在这里插入图片描述

3.3 学习javascript技术

<html>
<head>
<title>JavaScript</title>
<script type="text/javascript">
function greet()
{
var name=document.getElementById("name");
if(name)
alert("Hello "+name.value);
}
</script>
</head>
<body>
<input type="text" id="name">
<input type="button" value="Greet" onclick="greet()"/>
</body>
</html>

第二种方式

//greet.js
function greet()
{
var name=document.getElementById("name");
if(name)
alert("Hello "+name.value);
}

<html>
<head>
<title>JavaScript</title>
<script type="text/javascript" src="greet.js">
</script>
</head>
<body>
<input type="text" id="name">
<input type="button" value="Greet" onclick="greet()"/>
</body>
</html>

在这里插入图片描述

3.3.2 学习javascript变量

function greet()
{
var name=document.getElementById("name");
if(name)
alert("Hello "+name.value);

stu="student";//定义stu变量
age="23";//定义age变量
alert(stu);
alert(age);

var vichel="bycicle";//使用var关键字定义变量
alert(vichel);

var p1="abc",p2="1234";

var p="abc" //当前值的类型是String
alert(p);
p=1234;
alert(p);
}

3.3.3 学习原始类型

Undifined、Number、Boolean、String、Object

1.Undefined类型

function greet()
{
var iValue=20;
var sValue="zifuchuan";
alert(typeof iValue);
alert(typeof sValue);

alert(typeof abc);
if(typeof abc=="undefined")//需要加引号
	alert("abc undefined");
var name;
if(name==undefined)
	alert("name uninitialized");
if(typeof name=="undefined")
	alert("name uninitialized");
}

2.Boolean类型

function greet()
{
var bYes=true;
var bNo=false;
alert(bYes);
alert(bNo);
if(bYes==1)
	alert("bYes is equal to true");
if(bNo==0)
	alert("bNo is equal to false");
}

3.Number类型

function greet()
{
var IOctalNum=0123;
var iHexNum=0xFE;
alert(IOctalNum);
alert(iHexNum);

var fNum1=23.0;
var fNum2=12.45;
var fNum=4.3215e8;
var iNum=5.43e-8;
alert(fNum1);
alert(fNum2);
alert(fNum);
alert(iNum);
}

4.String类型

function greet()
{
var sName1="future";
var sName2='hope';
alert(sName1.length);
}

3.3.4 掌握类型转换

//使用toSting
var iNum=123;
var sStr=iNum.toString();
alert(sStr);

//使用parseInt
var iNum1=parseInt("1234xyz");
var iNum2=parseInt("0123");
var iNum3=parseInt("43.4");
var iNum4=parseInt("false");
alert(iNum1);
alert(iNum2);
alert(iNum3);
alert(iNum4);

//parseFloat
var fNum1=parseFloat("1234xyz");
var fNum2=parseFloat("0xab");
var fNum3=parseFloat("22.4");
var fNum4=parseFloat("22.6.12");
var fNum5=parseFloat("0123");
var fNum6=parseFloat("xyz");
alert(fNum1);
alert(fNum2);
alert(fNum3);
alert(fNum4);
alert(fNum5);
alert(fNum6);

//javascript支持的三种强制类型转换
//Boolean(value)
//Number(value)
//String(value)

var b1=Boolean("");
var b2=Boolean("abc");
var b3=Boolean("100");
var b4=Boolean("0");
var b5=Boolean("null");
var b6=Boolean(new String());


var n1=Number(false);//0
var n2=Number(true);//1
var n3=Number(undefined);//NaN
var n4=Number(null);//0
var n5=Number("12.1");
var n6=Number("66");
var n7=Number("12ab");//Nan
var n8=Number("new Object());//NaN

var s1=String(null);
var s2=String(undefined);
var s3=String(true);

3.3.5 学习函数的调用

function greet(sName)
{
	alert("hello"+sName);
}

greet("bill");

//如果函数重名则会覆盖上一个

function fun1()
{
	alert(100);
}
function fun1()
{
	alert(10);
}
fun1();

//使用arguments对象实现动态参数
function sum()
{
	var n=0;
	for(i=0;i<arguments.length;i++)
	{
		n+=arguments[i];
	}
	return n;
}
alert(sum(1,2,3,4));//显示10

//一个函数实际相当于一个对象，也就是说可以使用Function
//类来建立任何的函数

var funSum=new Function("n1","n2","return n1+n2");
alert(funSum(-1,10));

3.3.6 学习类和对象

//预定义的类，Object、Array、String、Number等

//定义一个数组变量
var aVlues=new Array();
aValues[0]="v1";
aValues[1]="v2";
aValues[2]="v3";

//如果构造方法没有参数也可以省略括号
var aValues=new Array;

//三种方法自定义类
//1.工厂方式
var oStudent=new Object;
oStudent.id='01';
oStudent.xm='赵子龙';
oStudent.age='16';
oStudent.study=fucntion()
{
	alert(this.xm+' start learning');
};
oStudent.study();

//可以建立一个对象工厂函数来建立Student对象
function creatStudent(id,xm,age)
{
	var oStudent=new Object;
	oStudent.id='01';
	oStudent.xm='赵子龙';
	oStudent.age='16';
	oStudent.study=fucntion()
	{
		alert(this.xm+' start learning');
	};
	return oStudent;
}

var oStudent1=creatStudent('02','昭君',19);
var oStudent2=creatStudent('03','比尔',32);
oStudent1.study();
oStudent2.study();

//以上代码虽然可以方便的建立Student对象，但是每次建立
//Student对象时，都要重新创建study方法
//实际上，可以使多个对象共享同一个study函数

function study()
{
	alert(this.xm+'开始学习');
}
//创建Student对象的工厂函数，共享study方法
function creatStrudent(id,ix,age)
{
	var oStudent=new Object;
	oStudent.id=id;
	oStudent.xm=xm;
	oStudent.age=age;
	//将全局的study方法赋给Student对象的study方法
	oStudent.study=study;
	return oStudent;
}

2.构造函数方式

function study()
{
	alert(this.xm +'开始学习');
}
//Student类构造方法
function Student(id,xm,age)
{
	this.id=id;
	this.xm=xm;
	this.age=age;
	this.study=study;
}
//使用构造方法创建oStudent1对象
var oStudent1=new Student('10','Mike',32);
var oStudent2=new Student('12','Danny',34);
oStudent1.study();
oStudent2.study();

3.原型方式

function Student()
{
}

Student.prototype.id='12';
Student.prototype.xm='bill';
Student.prototype.age=20;
Student.prototype.study=function()
{
	alert(this.xm+" 开始学习");
};
var oStudent=new Student();
oStudent.study();
//使用原型方式的好处是可以为已经
//存在的类添加新的成员

String.prototype.lenB=function()
{
	return this.replace(/[^\x0-\xf]/g,"##").length;
}
var s="超人abc";//定义一个包含中文和英文的字符串变量
alert(s.lenB());//显示7，如果使用length则显示5

3.4 其他客户端技术

3.4.1 了解DOM

DOM的主要功能是获得HTML语言中的各个元素如（div、form等）从而动态的向这些元素添加新的元素.在javascript中，描述DOM的对象时document，如果要直接操作HTML文档，可以使用documentElement属性

var oHtml=document.documentElement;
var oHead=oHtml.firstChild;//获得head对象
var oBody=oHtml.lastChild;//获得body对象

var oHead=oHtml.childNodes[0];
var oBody=oHtml.childNodes[1];

alert(oHead.outerHTML);//显示包括head标签本身的内容
alert(oBody.innerHTML)://显示不包括body标签本身的内容

例如：

<html>
<head>
<title>JavaScript</title>
<script type="text/javascript">
function showHead()
{
var oHtml=document.documentElement;
var oHead=oHtml.firstChild;
alert(oHead.outerHTML);//显示outerHTML属性的值
alert(oHead.innerHTML);
}
function showBody()
{
var oHtml=document.documentElement;
var oBody=oHtml.lastChild;//得到body对象
alert(oBody.outerHTML);
alert(oBody.innerHTML);
}
</script>
</head>

<body>
<input type="button" onclick="showHead()" value="显示head标签的内容"/>
</p>
<input type="button" value="显示body标签的内容" onclick="showBody()"/>
</body>
</html>

3.4.2 获得HTML元素的三种方法

getElementById
getElementByName
getElementByTagName

3.4.3实例图像自动切换

<html>
<head>
<title>图像自动切换</title>
<script type="text/javascript">
setInterval("loadImage()",3000);//启动计时器
var images=['01.jpg','02.jpg','03.jpg','04.jpg','05.jpg'];
var i=0;
function loadImage()
{
i++;
//当显示到第五张图片，从第一张开始
if(i==5){i=0;}
var oImage=document.getElementById('images');
var oLabel=document.getElementById('info');
oImage.src='images/'+images[i];
oLabel.innerText=images[i];
}
</script>
</head>

<body>
current picture name:<label id="info"</label>
<p/>
<img src="images/01.jpg" id="image" width="320" height="240"/>
<script type="text/javascript">
var oLabel=document.getElementById('iamge');
oLabel.innerText=images[i];
</script>
</body>

</html>
//注意：以上代码始终显示不出来,也不知道为啥

3.4.4 了解正则表达式

<html>
<head>
<title>JavaScript</title>
<script type="text/javascript">
function greet()
{
	var reg= /a\w*b/;          //begian with a and end with b string
	alert(reg.test("axyzb"));  //show true
	alert(reg.test("axyzc"));  //shouw false
	
	var reg1= /a\wb/gi;
	var s="axbcdaybx";         //using "ok" to substitute all substring that satisfy the condition
	alert(s.replace(reg1,"ok"));
	
	//Regular expression usually is used to verify client information such as phone number, e-mail and so on.
	var regPhone= /^0\d{2,3}\-\d{7,8}$/;
	alert(regPhone.test("024-12345678"));     //show true
	var regEmail= /^(\w+\.?)*\w+@\w+\.\w+/;
	alert(regEmail.test("abc.xyz@sun.com"));  //show true
}
greet();
</script>
</head>
</html>

3.4.5 实例：表格排序

table sorting is one of the frequently used function of Web program.

<table border="1" id="tblsort">
<thead>
<tr>
<th>number</th>
<th>name</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>WangMing</td>
</tr>
<tr>
<td>2</td>
<td>SuperMan</td>
</tr>
<tr>
<td>3</td>
<td>ZhangSan</td>
</tr>
<tr>
<td>4</td>
<td>LiSi</td>
</tr>
</tbody>
</table>

<body>
<script>
function generateCompareTRs(iCol)
{
	return function compare(tr1,tr2)
	{
		var v1=tr1.cells[iCol].firstChild.nodeValue;
		var v2=tr2.cells[iCol].firstChild.nodeValue;
		if(iCol==0)
		{
			if(parseInt(v1)>parseInt(v2))
				return -1;
			else if(parseInt(v1)<parseInt(v2))
				return 1;
			else 
				return 0;
		}
		else
		{
			if(v1>v2)
				return 1;
			else if(v1<v2)
				return -1;
			else
				return 0;
		}
	}
}

function sortTable(iCol)
{
	var oTable=document.getElementById("tblsort"); //obtain table waiting to sort
	var oTbody=oTable.tBodies[0]; //obtain <tbody> label object
	var oRows=oTbody.rows;
	var aTRS=new Array;  //build a array to save aRows row quote
	for(var i=0;i<aRows.length;i++)
	{
		aTRS.push(aRows[i]);
	}
	
	aTRS.sort(generateCompareTRs(iCol));
	var oFragment=document.createDocumentFragment();//build a Document fragmentation
	for(var i=0;i<aTRS.length;i++)
	{
		oFragment.appendChild(aTRS[i]);
	}
	oTBody.appendChild(oFragment);
}

</script>

3.5 学习CSS技术

3.5.2 在style属性中定义样式

<html>
<head>
<title> CSS</title>
</head>

<body style="background-color: '#000FFF'">
<a href="http://www.cnki.net" style="color:red;font-size:40px">
www.cnki.net</a>
<h3 style="font-size:50px">1234</h3>
</body>
</html>

2.5.3 在html中定义样式

<html>
<head>
<title> CSS</title>
<style type="text/css">
.bg{background-color:'#000FFF'};
h3{font-size:50px}
#link{color:red;font-size:40px}
</style>
</head>

<body class="bg">

<body style="background-color: '#000FFF'">
<a href="http://www.cnki.net" id="link">
www.cnki.net</a>
<h3 style="font-size:50px">1234</h3>
</body>
</html>

3.5.4 在外部文件中定义样式

<html>
<head>
<title> CSS</title>
<link type="text/css" rel="stylesheet" href="style.css"/>
</head>

<body class="bg">
<body style="background-color: '#000FFF'">
<a href="http://www.cnki.net" id="link">
www.cnki.net</a>
<h3 style="font-size:50px">1234</h3>
</body>
</html>

bg{background-color:'#000FFF'};
h3{font-size:50px}
#link{color:red;font-size:40px}

AnalogElectronic

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Java Web编程实战1~3章笔记

第1章搭建开发环境1.1 各种软件和框架的版本JDK 7 Update 9Eclipse 4.2MyEclipse 10.6Tomcat 7.0.32MySQL 5.5.13SQLyog 9.6.3Struts 2.3.4Hibernate 4.1.8Spring 3.2.0第2章 Java Web应用开发基础2.1 Web 技术的发展静态HTML通用网关接口CGI...
复制链接

扫一扫