第1章 Web开发必会的客户端技术
1.1 学习客户端技术的开发工具
1.1.1 在myeclipse中使用HTML技术
略
1.1.2 在myeclipse中使用使用JavaScript技术
略
1.1.3 在myeclipse中使用css技术
略
1.2 学习超文本标记语言HTML
1.2.1 HTML基本构成
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>前台首页</title>
</head>
<body>
</body>
</html>
1.2.2 HTML基本标签----段落格式设置标签
- 1.
<p></p>
段落标签，该标签可以使用align属性来说明对齐方式，left、right、center - 2.
<br>
换行标签，没有结束标签 - 3.
<div></div>和<span</spqn>
<div></div>标签用于文档分节、也用于格式化表，<span</spqn>标签用于在行内控制特定内容的显示
1.2.3 HTML基本标签----超级链接标签
<a href=链接目标的位置>超链接名称</a>
- 1.链接到同一站点内的文档
<a href="myhtml.html">示例</a>
- 2.链接到其他站点的文档
<a href="http://www.baidu.com">示例</a>
- 3.email链接
<a href="abc@163.com">示例</a>
- 4.页面内部链接
1.2.4 HTML基本标签----图像标签
示例代码
<img alt="花" src="img/banner3.png" width="800px" height="600px" border="1px" >
属性说明
| 属性 | 说明 |
|---|---|
| src | 图片的资源文件 |
| alt | 当鼠标移动到图像上时显示的文本 |
| height和width | 高宽属性，以像素为单位 |
| border | 决定边框线的宽度，0表示无边框 |
1.2.5 HTML基本标签----表格标签
<table border="1" width="100%">
<tr>
<td>表格1.1</td>
<td><表格1.2/td>
<td>表格1.3</td>
</tr>
<tr>
<td>表格2.1</td>
<td><表格2.2/td>
<td>表格2.3</td>
</tr
</table>
table标签的属性
略
tr标签的属性
| 属性 | 说明 |
|---|---|
| align | 设置单元格中文字的水平方向的对齐方式 |
| valigi | 设置单元格中文字的垂直方向的对齐方式 |
td标签的属性
| 属性 | 说明 |
|---|---|
| colspan | 可以设定跨多列的单元格 |
| rowspan | 可以设定跨多行的单元格 |
1.2.6 HTML基本标签----框架标签
- 1.<frameset></frameset>
- 2.<frame></frame>
- 3.<noframesets></noframesets>
1.2.7 HTML基本标签----表单标签
文本框
- 1.单行文本框
<input type=text name=控件名称 value=传出值>
- 2.密码文本框
<input type=password name=控件名称 value=传出值>
- 3.多行文本框
<texttarea row=行数 colos=列数 name=控件名称></texttarea>
按钮
- 1.提交按钮
<input type=submit name=控件名称 value=显示值>
- 2.重置按钮
<input type=reset name=控件名称 value=显示值>
- 3.普通按钮
<input type=button name=控件名称 value=显示值>
单选按钮
<input type=radio name=控件名称 value=传出值>
复选框
<input type=checkbox name=控件名称 value=传出值>
下拉菜单
<select name=控件名称 size=显示项数>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
</select>
1.3 学习 JavaScript技术
1.3.1 实例：编写第一个 javas程序，greet
从name文本框中读取用户输入值，最好使用alert函数将这个值以对话框形式显示
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Greet</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>
1.3.2 学习变量
var p="abc";
alert(p);
p=1234;
alert(p);
1.3.3 学习原始类型
- undefined
- boolean 变量是布尔值
- number变量是Number类型
- string 变量是string类型
- object 变量是引用类型或Null类型
1.3.4 掌握类型转换
- toString
- parsetInt
- parsetFloat
强制类型转换 - Boolean(value)
- Number(value)
- String(value)
1.3.5 学习函数和函数调用
function funName(arg0,arg1,...,argN){
}
1.3.6 学习类和对象
- 1.工厂方式(动态添加类成员)
略 - 2.构造函数方式
//多个对象共享的方法
function study(){
alert(this.name+"开始学习");
}
//Student 类的构造方法
function Student(id,name,age){
this.id=id; //id属性
this.name=name; //name属性
this.age=age; //age属性
this.study=study; //将全局的study方法赋给 Student对象的study方法
}
var student1=new Student(1,"Mike",20);
var student2=new Student(2,"David",22);
student1.study();
student2.study();
- 3.原型方法
1.4 其他客户端技术
1.4.1 了解DOM
DOM (Document Object Model) 译为文档对象模型，是 HTML 和 XML 文档的编程接口。
HTML DOM 定义了访问和操作 HTML 文档的标准方法。
1.4.2 获取HTML元素的3种方法
- 1.getElementById
运行此代码，点击标题，会提示出它的值
<html>
<head>
<script type="text/javascript">
function getValue()
{
var x=document.getElementById("myHeader")
alert(x.innerHTML)
}
</script>
</head>
<body>
<h1 id="myHeader" onclick="getValue()">这是标题</h1>
<p>点击标题，会提示出它的值。</p>
</body>
</html>
- 2.getElementsByName
运行此代码，点击按钮，会提示几个name="myInput"的元素
<html>
<head>
<script type="text/javascript">
function getElements()
{
var x=document.getElementsByName("myInput");
alert(x.length);
}
</script>
</head>
<body>
<input name="myInput" type="text" size="20" /><br />
<input name="myInput" type="text" size="20" /><br />
<input name="myInput" type="text" size="20" /><br />
<br />
<input type="button" onclick="getElements()" value="名为 'myInput' 的元素有多少个？" />
</body>
</html>
- 3.getElementsByTagName
getElementsByTagName() 方法可返回带有指定标签名的对象的集合。
<html>
<head>
<script type="text/javascript">
function getElements()
{
var x=document.getElementsByTagName("input");
alert(x.length);
}
</script>
</head>
<body>
<input name="myInput" type="text" size="20" /><br />
<input name="myInput" type="text" size="20" /><br />
<input name="myInput" type="text" size="20" /><br />
<br />
<input type="button" onclick="getElements()" value="How many input elements?" />
</body>
</html>
1.4.3 实例图像自动切换
定时器可以通过setInterval函数实现
setInterval(callback, delay)
每隔3秒切换一个图片
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>My JSP 'index.jsp' starting page</title>
<script type="text/javascript">
setInterval("loadImg()",3000);//启动定时器
var imgs=['banner1.png','banner2.jpg','banner3.png','banner4.jpg'];//图片数组
var i=0;
function loadImg(){
i++;
if(i==4)i=0;
var oImg=document.getElementById('img');
var info=document.getElementById('info');
oImg.src='./img/'+imgs[i];
info.innerText=imgs[i];
}
</script>
</head>
<body>
当前图像名称：
<label id="info"></label>
<p/>
<img id="img" src="./img/banner1.png" width="100%" height="100%">
<script type="text/javascript">
var oLabel=document.getElementById('info');
oLabel.innerText=imgs[i];
</script>
</body>
</html>
1.4.4 了解正则表达式
略
1.4.5 实例表格排序
略
1.5 学习css技术
1.5.1 了解css
H3{color:red}
格式分为两部分，选择器和样式规则，多个样式规则用分号(;)隔开
1.5.2 在style属性中定义形式
<html>
<head>
<title>css</title>
</head>
<body style="background-color:'#0000FF'">
<h3 style="font-size:50px">1234</h3>
</body>
</html>
1.5.3 在HTML中定义样式
- 通过HTML元素的id("#"号)
- 通过HTML元素的class属性("."号)
- 指定HTML元素的标签名(标签名字)
<html>
<head>
<title>css</title>
<style type="text/css">
.bg{background-color:'#0000FF'};
h3{font-size:50px}
#link{color:red;font-size:40px}
</style>
</head>
<body class="bg">
<a href="http://www.baidu.com" id="link">我是a标签</a>
<h3>1234</h3>
</body>
</html>
1.5.4 在外部文件中定义样式
1.5.1 实现样式的继承
所谓继承就是如果HTML元素未设置某些样式，但是父元素中设置了，在子元素中就会继承父元素的样式
<h3 style="font-size:50px">
<a href="http://www.baidu.com" style="color:red">我是a标签</a>
</h3>
网友评论