java web基础1

HTML 构建

CSS 外观

JS 添加动态效果

HTML

基础语法：

标记 <标记名称>

双标记(成对出现)

<h1></h1>

单标记(只有一个)

<br/>

为标记定义属性：

描述标记的各个方面 空格隔开多个属性也用空格隔开 值可以用一对双引号或者一个单引号

注释

<!--注释内容-->

版本信息 指定文档的语法规范

严格：最新

过度：兼容

框架

head 定义和整个文档相关的信息（标题/刷新/编码）

头元素

<meta />

body

HTML文档结构

版蹦信息

html页面

—文件头

—文档主题部分

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<title>HTML5</title>
		<meta http-equiv="refresh" content ="10"/><!--页面刷新 10秒-->
		<meta http-equiv="content-type" content="text/html;charset=utf-8"/><!--纯文本 编码 utf—8-->
	</head>

	<body>
	</body>

</html>

文本

普通文本和特殊字符

空格折叠:

多个空格以及换行，折叠为1个

特殊字符：转义字符

<  &lt;

> &gt;

空格 &nbsp;

段落标记 HTML 段落是通过标签 <p> 来定义的.

<p>文本</p> 自成段落，行间距

<br/>  换行

标题    HTML 标题是通过<h1>~<h6> 标签来定义的

        <h1 align="center"></h1>
        <h2 align="right"></h2>
        <h3></h3>

分组

<div></div> 适用于对于块级元素分组

<span></span> 适用于对于行内元素分组

块级元素 独占一行

行内元素 可以和其他元素位于同一行

图像和连接

为页面添加图像

            <img src="URL"/>
            <img src="./img/1.jpg"/ width=222>

超链接

        <a href="http://www.baidu.com">超链接</a>
        <a href="http://www.batdu.com" target="_blank">打开新页面</a>

同一页面的不同位置

回到页面的顶端

        <a href="#">top</a><!--固定的写法-->

锚点

<a name="a1">hi</a>
<a href="#a1">hi</a>

列表:

有序<ol></ol>

无序<ul></ul>

<li></li>

	<ul>
		<li>a</li>
		<li>aa</li>
		<li>aaa</li>
		<li>aaaa</li>
		<li>aaaaa</li>
	</ul>

	<ol>
		<li>a
			<ol>
				<li>aa</li>
				<li>aaa</li>
			</ol>
		</li>
		<li>b
			<ol>
				<li>bb</li>
				<li>bbb</li>
			</ol>
		</li>
		<li>c
			<ol>
				<li>cc</li>
				<li>ccc</li>
			</ol>
		</li>
		<li>d
			<ol>
				<li>dd</li>
				<li>ddd</li>
			</ol>
		</li>
	</ol>

表格

	<table align="center" border=1 width=200 height=200><!--表格-->
		<tr><!--行-->
			<td width=2 height=2>a</td><!--格子-->
			<td align="center">bb</td>
		</tr>
		<tr>
			<td width=5 height=5>ccc</td>
			<td>dddd</td>
		</tr>
	</table>

行分组：

thead

tbody

tfoot

特殊行或者列合并

colspan

rowspan

表格嵌套：复杂的布局

	<table border=1 width=200 height=200>
		<tr>
			<td>a</td>
			<td colspan=2 align="center">a</td>
		</tr>
		<tbody style="color:red">
			<tr>
				<td>a</td>
				<td>a</td>
				<td>a</td>
			</tr>
			<tr>
				<td>a</td>
				<td>a</td>
				<td>a</td>
			</tr>
		</tbody>
		<tr>
			<td>a</td>
			<td>a</td>
			<td>a</td>
		</tr>
		<tbody align=center style="color:red">
			<tr>
				<td>a</td>
				<td>a</td>
				<td>a</td>
			</tr>
			<tr>
				<td>a</td>
				<td>a</td>
				<td>a</td>
			</tr>
		</tbody>
	</table>

表单

form：承载页面元素，备于做提交

form 可以承载的

input

单标记 靠 type属性的不同来取值

类型

<input type="text"/>  文本框

<input type="password"/> 密码框

<input type="radio"/> 单选按钮

<input type="checkbox"/> 多选

<input type="submit"/> 提交按钮

<input type="reset"/>重置按钮

<input type="button"/>普通按钮

<input type="file"/>选择文件以供上传使用

<input type="hidden"/> 隐藏域

属性

id:唯一标识  需要的时候在添加

name：名值对的方式提交数据

value：取决于需要，比如有默认值

maxlength 文本框，密码框

readonly

checked 单选多选

列表框 下拉框

<select size=10>

<option></option>

</select>

多行文本框

<textarea>

</textarea>

文本标签

<label for="">文本</label>

fieldset  元素圈 起来

lengend:为圈添加名称描述

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<title>HTML5</title>
		<meta http-equiv="refresh" /><!--自动页面刷新 10秒-->
		<meta http-equiv="content-type" content="text/html;charset=utf-8"/><!--纯文本 编码 utf—8-->
	</head>
	<body>
		<h1>增加管理员</h1>
		<form>
			user:<input type="text" name="u" value="123"/><br/>
			pwd:<input type="text" name="p" value="123"/><br/>
			sex:<input type="radio" name="sex" value=1/>M
				<input type="radio" name="sex" value=0/>F<br/>
			role:<fieldset>
				<legend>二选一</legend>
				<input id="r1" type="checkbox" name="role" value="root" />
				<label for="r1">root</label><br/>
				<input id="c1"type="checkbox" name="role" value="client"/>
				<label for="c1">client</label><br/>
			</fieldset>
			status:<select name="status" size=3>
				<option>start</option>
				<option>stop</option>
				<option>del</option>
			</select ><br/>
			explain<textarea name="explain" cols=20 rows=10>个人简介
			</textarea>
			<input type="submit" value="增加"/>
			<input type="reset" value="重置"/>
		</form>
	</body>
</html>

iframe

一个浏览器中显示多个html页面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<title>HTML5</title>
		<meta http-equiv="refresh" /><!--自动页面刷新 10秒-->
		<meta http-equiv="content-type" content="text/html;charset=utf-8"/><!--纯文本 编码 utf—8-->
	</head>
	<body>
		<h1>增加管理员</h1>
		<form>
			user:<input type="text" name="u" value="123"/><br/>
			pwd:<input type="text" name="p" value="123"/><br/>
			sex:<input type="radio" name="sex" value=1/>M
				<input type="radio" name="sex" value=0/>F<br/>
			role:<fieldset>
				<legend>二选一</legend>
				<input id="r1" type="checkbox" name="role" value="root" />
				<label for="r1">root</label><br/>
				<input id="c1"type="checkbox" name="role" value="client"/>
				<label for="c1">client</label><br/>
			</fieldset>
			status:<select name="status" size=3>
				<option>start</option>
				<option>stop</option>
				<option>del</option>
			</select ><br/>
			explain<textarea name="explain" cols=20 rows=10>个人简介
			</textarea>
			<iframe src="./3.html"></iframe>
			<iframe src="http://baidu.com"></iframe>
			<input type="submit" value="增加"/>
			<input type="reset" value="重置"/>
		</form>
	</body>
</html>

CSS 基础

内联方式 元素有个style  适用单个元素

内部样式表 head 里添加一个style

文件

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<title>HTML5</title>
		<meta http-equiv="refresh" content ="10"/><!--自动页面刷新 10秒-->
		<meta http-equiv="content-type" content="text/html;charset=utf-8"/><!--纯文本 编码 utf—8-->
		<style type="text/css">
		h1{
			color:green
		}
		</style>
		<link type="text/css" rel="stylesheet" href="MyStyle.css"> 
	</head>

	<body>
		<h1>haha </h1>
		<p style="color:red;background-color:gray">haha</p>
	</body>

</html>
h2
{color:yellow;
font-size:50pt;}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<title>HTML5</title>
		<meta http-equiv="refresh" content ="10"/>
		<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
		<style type="text/css">
		h1{
			color:green
		}
		</style>
		<link type="text/css" rel="stylesheet" href="style.css"/>
	</head>

	<body>
		<h1>hehe</h1>
		<h1>haha </h1>
		<h2>hihi</h2>
		<p style="color:red;background-color:gray">haha</p>
		<a href="http://www.baidu.com">百度来了</a>
	</body>

</html>
h2{
color:yellow;
font-size:50pt;
}
a:link{
color:black;
}
a:hover{
font-size:20pt;
color:red;
}
a:active{
font-size:40pt;
color:green;
} 
a:visited{
font-size:80pt;
color:yellow

css 重复 没有冲突的并集，有冲突的就近远测

优先级都一样的时候最后定义的生效

选择器  谁来使用{}中定义的样式

元素选择器： html中的标签名称

简单，为某种标签定义样式但是不能跨类别，同一种下的细分也不行

类选择器

css中

.s1{......

.....}

HTML中需要使用<标签 class="s1">

分类选择器  定义更为清楚，同一种下的细分

css中：

input.txt{}

input.img{}

html中

<p class="txt"></p>  无效

<input class="txt"/>  有效

元素ID选择器 严格的定义

css中

#a1{}

html中

<h1 id="a1"></h1>

派生选择器 已层次关系作为定义

CSS中：div a{....}

HTML中：<dive>

asdf

<a>fdsa</a>

</div>

选择器分组：需要为一些元素定义他们样式中相同的部分时

CSS中

p,input.txt,#a1{.....}

伪类 在不同的状态下的样式

a:link{}  未访问过

a:active{} 激活

a:hover{} 悬停

a:visited{} 已访问过的

xx:focus{} 获取焦点

常用单位

尺寸：% px pt

颜色：十六进制

常用的设置：

width/height

宽/高

overflow:visible/hidden/scroll/auto

溢出/隐藏/滚动条/自动

定义所有的边框

border:1px solid red;

border-width:1px;

border-style:solid;

border-color:red;

定义单边边框

border-left:1px solid red;

border-right:2px solid green;

border-top:2px solid red;

border-bootom:1px solid green;

框模型 box modal 间距

优先

margin:30px

margin-left

right

top

bootm

margin:10px 20px 30px 40px

顺时针 上 右 下 左

margin:10px 30px

上下 左右

margin:0px auto;  居中

背景

background-color: 背景色

background-image:url(img.jpg);

background-repeat:填充  repeat/no-repeat/repeat-x/repeat-y

平铺/不平铺/x轴/y轴

background-positioni:left top;

background-attachment:   背景图像的附着方式

文本

font_family:字体

color: 字体颜色

font-size:字体大小

font_weight:字体加粗 normal/bold;

text-align:文本排列  center left right

line-height:行高

text-dexoration:文字修饰 none/underline  下划线

text-indent:文本首行缩进

表格

border-collapse:separate/collapse;单元格

vertical-align:top/middle/bottom; 垂直

方向上的对齐，设置单元格中的垂直对齐

浮动

默认情况下 流模式布局

float：left/right

让元素脱离原有的布局，浮动起来。停靠到包含框的左侧或者右侧

修改默认布局

clear ：both/left/right --清楚附近浮动元素带来的影响

显示

html元素有默认的显示方式：块级  行内

需要修改默认的显示方式

display： static/block/inline/none

列表样式

list-style-type:none/disc/circle

list-style-img

定位

默认流模式 修改原有的定位方式

float 设置浮动 不能随意设置位置

相对定位

绝对定位

position:static/relative/absolute/fixed; 属性

更改定位模式为相对定位i，绝对定位或者固定定位

脱离原来的层次

偏移属性：实现元素框位置的偏移

top/bottom/right/left:value;

堆叠顺序;  value 越大  层越上

z-index:value;

鼠标属性：

cursor:defaulf/pointer/help/wait../image;

页面脚本代码:嵌入页面上。在浏览器运行

javascript  基于对象和事件驱动的解释性语言，嵌入在页面上

代码和事件关联 代码直接放在事件里

script块 head 里面添加一个script，中间添加代码 用方法封装

js文件，单独定义应给js的文件  在html中的head里用script引入

基础语法：

大小写敏感 已   ; 表示结束

变量    var name = "lmdtx";  var age =18;

使用var 声明变量 变量的类型以赋值为准

标识符的 字母 数字 下划线 $组成

不已 数字开头

数据类型

简单类型 string number bool

特殊类型 null  undefined

复杂类型 Array Date等等

转义字符\

UNICODE编码

\u2f3f

数据的转换：

string+number  string

string+bool  string/true

number+bool number

bool+bool  number

x.toString();

parseInt(xx);

parseFloat(xx);

typeof(xxx;)      判断类型

NaN(not a number)

==  比较值

===    比较类型和值  严格等

三目运算符

表达式？value1：value2；

流程控制

if/else  switch/case

for while

内置对象

对象 封装功能 使用（创建 属性 方法）

String 对象

和java中的类似

创建： var s="sting";

var ss = new String("String");

属性：s.length

方法： toUpperCase ()

toLowerCase()

subString()

indexOf()

lastIndexOf()

charAt()

split()

replace() 支持正则

match() 支持正则

search()  支持正则

正则表达式

匹配模式：i 忽略大小写，g全局 ,m多行

数组：

var ary = new Array();

a[0]="a";

a[1]=1;

a[2]=true;

or

var ary=new Array("a",1,true);

or

var array = ["a",1,true];

array[3]=123;

创建二维数组

var a= new Array();

a[0]=[1,2];

a[1]=[2,3];

属性：

a.length

方法：

toString()  数组的内容以 逗号 连接 输出

join("@") 以给定的字符连接

concat(b);  小数组相加

var a=[1,2,3]

var b=[4,5,6]

a.concat(b);

[1,2,3,4,5,6]

获取子数组

var arr=[1,2,3,4,5,6,7,8,9]

var arr1 = arr.slice(2,4);

[3,4]

数组反转

var arr=[1,2,3,4];

var arr = arr.reverse();

[4,3,2,1]

比较

sort()  默认按照字符串

自定义一个比较规则

function sortF(a,b){

return a-b;

}

sort(sortF)

Math 对象

用Math.xxxx  不需要创建

属性 Math.pi

方法：Math.abs()/round()/rand()/floor(3.7)/ceil(4.3)/max(x,y)

Number 对象

var n= 123.123;

n.toFixed();

正则表达式对象

var r = /[a-z]{1,10}/;

t.test(str); ==> bool  true/false

Date 对象

创建 var  d= new Date();

当前时间

or

var d= new Date("2016-08-08 12:12:12")

重载 js 中没有传统意义s行的重载  方法名相同，后定义的会覆盖前面定义的内容

使用arguments 的关键字来做模拟  arguments 是传入的参数是一个数组

根据对数组的判断来实现不同的功能

<form>
    <input type="button" value="重载1" onclick="olmath(10);">
    <input type="button" value="重载2" onclick="olmath(10,10);">
</form>
function olmath(){    
    if(arguments.length == 1){
      alert(arguments[0]*arguments[0]);    
  }else{
    alert(arguments[0]+arguments[1]);    
 }
}

方法的定义

1}、 var f = new  Function("alter("hehe")");

声明一个Function 对象 最后一个参数是方法体，其他的参数是方法的参数，以字符串的形式传入

2}、匿名函数

var f1 = function(){

alert("haha");

};

f1();

eval()

DHTML 应用

window

location URL 地址栏

screen 屏幕

history 历史访问记录

navigator    浏览器

event    事件

document 文档

windows 表示整个窗口，窗口间的操作

对话框：

window.alert("str");

window.confirm("str");

单出窗口：

window.open(url);

window.open(url,"name");

window.open(url,"name",width=200,heigh=200);

定时器：

周期性定时器  var timer=   window.setInterval(showtime;1000);  创建一个定时器   第一参数需要执行的任务 第二个参数  时间间隔  毫秒

window.clearInterval(timer);  取消定时器

一次性定时器

timer=window.setTimeout(f,10)

window.clearTimeout(timer);

document对象

代表整个html文档 动态的操作页面元素。 必须使用这个

找元素

将HTML 标签对象化

如果操作标记中间的文本

obj.innerHTML

修改样式

obj.style.color

修改复杂样式

1可以在<style>中定义样式

或者在css文件中定义

2使用

obj.className="s1"

方式一:document.getElementById(id)

精确的查询单个元素对象，

方法二根据元素额层次位置查找.

obj.parentNode  ---父节点

obj.childNodes--所有的子节点

obj.lastChild

obj.firstChild

obj.nodeName

obj.type

方式三

document.getElementsByTagName("a")  元素节点的数组

obj.getElementByTagName("input")

增加新元素节点

创建

var obj = docment.createElement("a");

设置信息

obj.href="";

obj.innerHTML="";

加入到某个位置

xxx.appendChild(obj);

xxx.insertBefore(obj,xxx.fistChild);

xxx.insertBefore(obj,xxx.childNodes[2]);

screen 对象

screen  包含有关客户端显示屏幕的信息

width/height (只读)

history 对象

历史访问记录

history.back();

history.forward();

location 对象   地址栏

location.href="";//保留历史访问记录

location.replace("url");/、不保留  直接替换

navigator对象 与浏览器软件和操作系统相关信息

event 对象  事件

事件的类别

鼠标事件

onclick

ondblclick

onmouseover

onmouseout

键盘事件

onkeydown

onkeyup

状态事件

onblur

onfocus

onchange

onload

事件的定义

html 中静态的为元素定义事件

obj. 动态额定义的

事件被取消

onclick = "return false;" 取消当前的事件

事件的冒泡机制

当为层次包含的元素定义了相同额事件，出发事件时，从底层开始，层层向上，逐一额触发

event对象

当页面发生任何一个事件，将事件相关的信息写入event对象

event.x

event.y

event.srcElement 引发事件的对象

浏览器兼容问题

Firefox js中不识别event，但在HTML中认识

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <title>HTML5</title>
        <meta http-equiv="refresh"/>
        <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
        <script type="text/javascript" language="javascript">
            function M2(){
                alert("hi hi")
            }
        </script>
        <script src="js1.js" type="text/javascript" language="javascript"></script>
    </head>
    
    
    <body>
        <form id="form1">
            <input type="button" value="第1个按钮" onclick="alert(‘hi‘);"/>
            <input type="button" value="第2个按钮" onclick="M2();";/>
            <input type="button" value="第3个按钮" onclick="M3();";/>
            <input type="button" value="第4个按钮" onclick="M4();";/>
            <input type="text" id="jisuanqi"/>
            <input type="button"/ value="计算器" onclick="getSquare();">
            <input type="text" id="txt1" onblur="judgeNumber();"; />
            <input type="text" id="txt2" onblur="replaceString();"; />
            <input type="text" id="txt3" onblur="replaceString2();"; /><br/>
            <input type="text" id="txt4" />
            <input type="button" value="反转" onclick="operteArray(1);"/>
            <input type="button" value="排序1" onclick="operteArray(2);"/>
            <input type="button" value="排序2" onclick="operteArray(3);"/><br/>
            <input type="text" id="txt5" />
            <input type="text" id="txt6" />
            <input type="button" value="随机数" onclick="f1();"><br/>
            姓名:<input type="text" id="txt7" onblur="check();"/><br/>
            <input type="text" id="txt8" style="width:300px"/>
            <input type="button" value="日期" onclick="makedate()" style="width:100px">
            <input type="text" id="txt9" style="width:50px"/>
            <input type="button" value="日期-1" onclick="makedate2()"/><br/>
            
            <input type="button" value="重载1" onclick="olmath(10);">
            <input type="button" value="重载2" onclick="olmath(10,10);">
            <input type="button" value="方法1" onclick="f3();">
            <input type="button" value="方法2" onclick="f4();">
            <input type="button" value="方法3" onclick="f5();"><br/>
            
            
            <input type="text" id="txt10"><br/>

            <table  border=1 ><!--表格-->
                <tr><!--行-->
                    <td><input type="button" value="1" onclick="f6(this.value);"></td><!--格子-->
                    <td ><input type="button" value="2" onclick="f6(this.value);"></td>
                    <td ><input type="button" value="3" onclick="f6(this.value);"></td>
                </tr>
                <tr>
                    <td><input type="button" value="4" onclick="f6(this.value);"></td>
                    <td><input type="button" value="5" onclick="f6(this.value);"></td>
                    <td><input type="button" value="6" onclick="f6(this.value);"></td>
                </tr>
                <tr>
                    <td><input type="button" value="7" onclick="f6(this.value);">    </td>
                    <td><input type="button" value="8" onclick="f6(this.value);"></td>
                    <td><input type="button" value="9" onclick="f6(this.value);">    </td>
                </tr>
                <tr>
                    <td><input type="button" value="0" onclick="f6(this.value);"></td>
                    <td><input type="button" value="." onclick="f6(this.value);"></td>
                    <td><input type="button" value="C" onclick="f6(this.value);"></td>
                    
                </tr>
                <tr>
                    <td><input type="button" value="+" onclick="f6(this.value);"></td>
                    <td><input type="button" value="-" onclick="f6(this.value);"></td>
                    <td><input type="button" value="=" onclick="f6(this.value);"></td>                
                </tr>
            </table>
            
            <input type="submit"  value="删除" onclick="return del();"><br/>
            
            
            <input type="text" id= "showtimetext"/>
            <input type="button" onclick="showtime()" value="显示时间"/>
            <input type="button" onclick="showtime2()" value="时钟"/>
            <input type="button" onclick="showtime3()" value="暂停时钟"/>
            <input type="button" onclick="waitAlert()" value="5s 弹出hi"/>
            点击<a href="javascript:cancelAlert();" >取消</a>关闭；
            <p id="txt11">a</p>
            <input type="button" onclick="testDOM();" value="a变b">
            <img id="txt12" src="img/ok.png"/>
            <input type="button" onclick="testDOM2();" value="对变错">
            
            <p>注册：</p>
            用户名：<input type="text" id="txtName" onblur="validName();"/><span id="nameInfo"> 5-10个英文字母</span><br/>
            密码：<input type="text" id="txtAge" onblur="validAge();"/><span id="ageInfo">3位以内的数字</span><br/>
            <input  type="submit" value="注册" onclick="return validData();"/>
            
            购物车：
            <table border="1" id="shopping">
                <tr>
                    <td>商品名称</td>
                    <td>单件价格</td>
                    <td>商品数量</td>
                    <td>小计</td>
                </tr>
                <tr>
                    <td>a</td>
                    <td>10</td>
                    <td>
                        <input type = "button" value="-" onclick="sub(this);"/>
                        <input type = "text"  value="1"/>
                        <input type = "button" value="+" onclick="add(this);"/>
                    </td>
                    <td>10</td>
                </tr>
                <tr>
                    <td>b</td>
                    <td>20</td>
                    <td>
                    <input type = "button" value="-" onclick="sub(this);"/>
                        <input type = "text" value="1" />
                        <input type = "button" value="+" onclick="add(this);"/>
                    </td>
                    <td>20</td>
                </tr>
                <tr>
                    <td>c</td>
                    <td>30</td>
                    <td>
                    <input type = "button" value="-" onclick="sub(this);"/>
                        <input type = "text" value="1" />
                        <input type = "button" value="+" onclick="add(this);"/>
                    </td>
                    <td>30</td>
                </tr>
            </table>
            总计：<span id="sum" ></span>
            <br/>
            
            
            <input  type="button"  value="增加一个超链接" onclick="ab();">
            <br/>
            <select id="s1" onchange="showNumber();" >
            <option>0</option>
            <option>1</option>
            <option>2</option>
            <option>3</option>
            </select>
            <select id="s2">
            <option>0</option>
            </select>
            <br/><br/><br/><br/><br/><br/><br/><br/>
            
            <h3>增加一个新的商品</h3>
            商品名称：<input type="text" id="spName"><br/>
            商品价格：<input type="text" id="spPrice"><br/>
            <input type="button" value="增加" onclick="addThis()">
            <table border="1" id="t2">
                <tr>
                    <td>商品名称</td>
                    <td>商品价格</td>
                </tr>
            </table>
            <br/>
            <input type="button" value="遍历" onclick="bianli();"><br/>
            改进版计算器<br/>
            <div  onclick="cal(event);">
                <input type="button" value="1"/>
                <input type="button" value="2"/>
                <input type="button" value="3"/>
                <input type="button" value="+"/>
                <input type="button" value="-"/>
                <input type="button" value="="/>
                <br/>
                <input type="text" id="id1"/>
            
            </div>
        </form>
    </body>

</html>
function M3(){
    alert("no no");
    
}
function M4(){
    alert("\u2f3f");
}
function getSquare(){
    var number = document.getElementById("jisuanqi").value;
    if(isNaN(number)){
        alert("enter number")
    }else{
    var n = parseFloat(number);
    alert(n*n);    
    }
    
}
function returnType(){

    var something=true;
    alert(typeof(something));
}

function judgeNumber(){
 var result=100;
 var n=parseInt(document.getElementById("txt1").value);
 alert(n>result?"大了":"小了"); 
}

function replaceString(){
    var str= document.getElementById("txt2").value;
    var r = str.replace("b","*")
    document.getElementById("txt2").value=r;
}

function replaceString2(){
    document.getElementById("txt3").value=document.getElementById("txt3").value.replace(/b/gi,"*");
}

function operteArray(n){
    var array = document.getElementById("txt4").value.split(",");
    switch(n){
            case 1:
                array.reverse();
                break;
            case 2:
                array.sort();
                break;
            case 3:
                break;
    }
    alert(array.join("||"))
    
}

function f1(){
    var minNumber= parseInt(document.getElementById("txt5").value);
    var maxNumber= parseInt(document.getElementById("txt6").value);
    difference=maxNumber-minNumber;
    alert(Math.floor(Math.random()*difference+minNumber));//3-15之间的随机数
}

function check(){
    var str = document.getElementById("txt7").value
    var r =/^[\u4e00-\u9fa5]{2,8}$/;
    if(r.test(str)){
        alert("yes");
        
    }else{
        alert("error");
    }
}

function makedate(){
    var d = new Date();
    document.getElementById("txt8").value=d.getFullYear()+"年"+(d.getMonth()+1)+"月"+d.getDate()+"日";
}

function makedate2(){
    var d = new Date(document.getElementById("txt8").value);
    alert(d.setDate(d.getDate-3));
}

function olmath(){
    if(arguments.length == 1){
        alert(arguments[0]*arguments[0]);
    }else{
        alert(arguments[0]+arguments[1]);
    }
}

function f3(){

    var  f = new Function("alert(‘xxx‘);");
    f();
}

function f4(){
    var a = [3,5,6,1,2,5,97,5];
    var f = new Function("x","y","return x-y;");
    a.sort(f);
    alert(a.toString());
}

function f5(){
    var a= [1,5,7,5,3,0,1,9];
    var f = function(x,y){
        return x-y;
    };
    a.sort(f);
    alert(a.toString());
}

function f6(str){
    if(str == "C"){
        document.getElementById("txt10").value=null;
    }else{
        if( str == "="){
            document.getElementById("txt10").value=eval(document.getElementById("txt10").value);
        }else{
            document.getElementById("txt10").value = document.getElementById("txt10").value + str;
        }
    }
    
}

function del(){
    return window.confirm("是否删除？");
}

function M3(){
    alert("no no");
    
}
function M4(){
    alert("\u2f3f");
}
function getSquare(){
    var number = document.getElementById("jisuanqi").value;
    if(isNaN(number)){
        alert("enter number")
    }else{
    var n = parseFloat(number);
    alert(n*n);    
    }
    
}
function returnType(){

    var something=true;
    alert(typeof(something));
}

function judgeNumber(){
 var result=100;
 var n=parseInt(document.getElementById("txt1").value);
 alert(n>result?"大了":"小了"); 
}

function replaceString(){
    var str= document.getElementById("txt2").value;
    var r = str.replace("b","*")
    document.getElementById("txt2").value=r;
}

function replaceString2(){
    document.getElementById("txt3").value=document.getElementById("txt3").value.replace(/b/gi,"*");
}

function operteArray(n){
    var array = document.getElementById("txt4").value.split(",");
    switch(n){
            case 1:
                array.reverse();
                break;
            case 2:
                array.sort();
                break;
            case 3:
                break;
    }
    alert(array.join("||"))
    
}

function f1(){
    var minNumber= parseInt(document.getElementById("txt5").value);
    var maxNumber= parseInt(document.getElementById("txt6").value);
    difference=maxNumber-minNumber;
    alert(Math.floor(Math.random()*difference+minNumber));//3-15之间的随机数
}

function check(){
    var str = document.getElementById("txt7").value
    var r =/^[\u4e00-\u9fa5]{2,8}$/;
    if(r.test(str)){
        alert("yes");
        
    }else{
        alert("error");
    }
}

function makedate(){
    var d = new Date();
    document.getElementById("txt8").value=d.getFullYear()+"年"+(d.getMonth()+1)+"月"+d.getDate()+"日";
}

function makedate2(){
    var d = new Date(document.getElementById("txt8").value);
    alert(d.setDate(d.getDate-3));
}

function olmath(){
    if(arguments.length == 1){
        alert(arguments[0]*arguments[0]);
    }else{
        alert(arguments[0]+arguments[1]);
    }
}

function f3(){

    var  f = new Function("alert(‘xxx‘);");
    f();
}

function f4(){
    var a = [3,5,6,1,2,5,97,5];
    var f = new Function("x","y","return x-y;");
    a.sort(f);
    alert(a.toString());
}

function f5(){
    var a= [1,5,7,5,3,0,1,9];
    var f = function(x,y){
        return x-y;
    };
    a.sort(f);
    alert(a.toString());
}

function f6(str){
    if(str == "C"){
        document.getElementById("txt10").value=null;
    }else{
        if( str == "="){
            document.getElementById("txt10").value=eval(document.getElementById("txt10").value);
        }else{
            document.getElementById("txt10").value = document.getElementById("txt10").value + str;
        }
    }
    
}

function del(){
    return window.confirm("是否删除？");
}

function showtime(){
    var d = new Date();
    document.getElementById("showtimetext").value=d.toLocaleTimeString();
}
var timer;
function showtime2(){
     timer = window.setInterval(showtime,1000);
}

function showtime3(){
    window.clearInterval(timer);
}

var timer1;
function waitAlert(){
    var f7= function(){
        alert("hi");
    };
    timer1= window.setTimeout(f7,5000);
}

function cancelAlert(){
    window.clearTimeout(timer1);
}
function  testDOM(){
    document.getElementById("txt11").innerHTML="b";
    document.getElementById("txt11").style.color="red";
}
function  testDOM2(){
    document.getElementById("txt12").src="img/close.png";
}

function validName(){
    var r = /^[a-zA-z]{5,10}$/;
    var name = document.getElementById("txtName").value;
    var nameInfo = document.getElementById("nameInfo");
    if(r.test(name)){
        nameInfo.innerHTML="格式正确";
        nameInfo.style.color="green";
    }else{
        nameInfo.innerHTML="格式错误";
        nameInfo.style.color="red";
    }
    return r.test(name);
}

function validAge(){
    var r = /^\d{0,3}$/;
    var age = document.getElementById("txtAge").value;
    var ageInfo = document.getElementById("ageInfo");
    if(r.test(age)){
        ageInfo.innerHTML="格式正确";
        ageInfo.style.color="green";
    }else{
        ageInfo.innerHTML="格式错误";
        ageInfo.style.color="red";
    }
    return r.test(age);
}

function validData(){
    return validName()&&validAge();
}
function sub(something){
    var nodes = something.parentNode.childNodes;
    for(var i=0;i<nodes.length;i++){
        if(nodes[i].nodeName == "INPUT" && nodes[i].type == "text" &&parseInt(nodes[i].value)>0){
            nodes[i].value=parseInt(nodes[i].value)-1;
        }
    }
    calTotal();
}

function add(something){
    var nodes = something.parentNode.childNodes;
    for(var i=0;i<nodes.length;i++){
        if(nodes[i].nodeName == "INPUT" && nodes[i].type == "text" ){
            nodes[i].value=parseInt(nodes[i].value)+1;
        }
    }
    calTotal();
}

function calTotal(){
    var table = document.getElementById("shopping");
    var rows =table.getElementsByTagName("tr");
    var total = 0;
    for(var i=1;i<rows.length;i++){
         var curRow = rows[i];
         var pric = parseFloat(curRow.getElementsByTagName("td")[1].innerHTML);
         var q = parseInt(curRow.getElementsByTagName("td")[2].getElementsByTagName("input")[1].value);
         var sum = pric * q;
         curRow.getElementsByTagName("td")[3].innerHTML = sum.toFixed(2);
         total += sum;
    }
    
    document.getElementById("sum").innerHTML = total.toFixed(2);
}

function ab(){
        var a = document.createElement("a");
        a.href="http://www.baidu.com";
        a.innerHTML="百度";
        document.getElementById("form1").appendChild(a);

}
var arrNumber=[[0],[1.1,1.2,1.3],[2.1,2.2,2.3],[3.1,3.2,3.3]]
function showNumber(){
    while(document.getElementById("s2").childNodes.length>0){
        document.getElementById("s2").removeChild(document.getElementById("s2").firstChild);
    }
    var indexNumber =document.getElementById("s1").selectedIndex;
    for(var i =0;i<arrNumber[indexNumber].length;i++){
            var op= document.createElement("option");
            op.innerHTML=arrNumber[indexNumber][i];
            document.getElementById("s2").appendChild(op);
    }
}

function showNumber(){
    document.getElementById("s2").options.length=0;
    for(var i = 0;i<arrNumber[document.getElementById("s1").selectedIndex].length;i++){
        document.getElementById("s2").options[i]=new Option(arrNumber[document.getElementById("s1").selectedIndex][i]);
    }
} 

function addThis(){
    var row = document.createElement("tr");//创建一行
    var col1=document.createElement("td");//创建一个格子
    col1.innerHTML = document.getElementById("spName").value;//赋值
    var col2=document.createElement("td");//创建另外一个格子
    col2.innerHTML = document.getElementById("spPrice").value;//赋值
    row.appendChild(col1);//在行中添加创建的格子
    row.appendChild(col2);//在行中添加创建的格子
    document.getElementById("t2").appendChild(row);//将这一行添加到表中

}

function addThis(){
    var table = document.getElementById("t2");
    var row = table.insertRow(table.rows.length);//添加一行
    var cell1 = row.insertCell(0);//创建一个格子
    var cell2 = row.insertCell(1);
    cell1.innerHTML = document.getElementById("spName").value;
    cell2.innerHTML  = document.getElementById("spPrice").value;
}

function bianli(){//遍历某个对象的属性
    var str = "";
    for(var i in navigator){
        str += i+":" + navigator[i]+"\n"
    }
    alert(str);
}

function cal(eventObj){//firefox   在js中不识别event 需要从HTML中传入
    var obj = eventObj.target||eventObj.srcElement;//IE和firefox 的方式不同 为了兼容性 用这种方式
    if(obj.nodeName == "INPUT" && obj.type == "button"){
        if(obj.value == "="){
            var r = eval(document.getElementById("id1").value);
            document.getElementById("id1").value=r;
        }else{
            document.getElementById("id1").value += obj.value;
        }
    }
}
时间： 2024-08-04 11:24:47

java web基础1的相关文章

从Java Web 基础看SSH架构

Java Web开发现在已然成为大型Wed项目的标准,之前一直盲目的使用框架,往往知其然不知其所以然.在经过一段时间的学习与开发,大概掌握了其脉络的基础上,对其做一定总结. 一.Java Web 基础 一个典型的Java Web项目往往包含这些元素:Jsp页面.Servlet.Listener.Filter,以及配置文件web.xml.其中: Jsp和Servlet基本是一回事,主要用来响应客户端的请求.当然Jsp中可以直接嵌入HTML标签,主要还是负责展现. Listener则是负责监听Web

Java Web基础 --- Jsp 综述(上)

摘要: J2EE是一套规范,而Servlet/Jsp是J2EE规范的一部分,是Tomcat的主要实现部分.在最初的应用实践中,当用户向指定Servlet发送请求时,Servlet利用输出流动态生成HTML页面,这导致Servlet开发效率极为低下.JSP技术通过实现普通静态HTML和动态部分混合编码,使得逻辑内容与外观相分离,大大简化了表示层的实现,提高了开发效率.本文以JSP的本质是Servlet为主线,结合JSP转译后所得的Servlet,详细探讨了JSP的原理.执行过程.脚本元素.编译指令

Java Web基础 --- Jsp 综述(下)

摘要: JSP脚本中包含九个内置对象,它们都是Servlet-API接口的实例,并且JSP规范对它们进行了默认初始化.本文首先通过一个JSP实例来认识JSP内置对象的实质,紧接着以基于请求/响应架构应用的运行机制为背景,引出JSP/Servlet的通信方式与内置对象的作用域,并对每个内置对象的常见用法进行深入介绍和总结. 一. JSP 九大内置对象概述及相关概念说明 JSP脚本中包含九个内置对象,这九个内置对象都是 Servlet API 接口的实例,并且JSP规范对它们进行了默认初始化(由 J

Java web基础总结六之—— Cookie与Session

Java web基础总结六之-- Cookie与Session 当我们在使用浏览器与服务器进行会话的过程中,就必然会产生一些数据.这个时候就需要对数据进行保存.比如常见的购物网站购物车信息的保存.保存客户端与服务器会话数据的两种技术是Cookie与Session. 一．Cookie 1.什么是Cookie? Cookie是保存在客户端的,以name,value的形式保存.当用户使用浏览器访问服务器产生数据时,服务器程序把每个用户的数据以cookie的形式写给用户各自的浏览器.当用户使用浏览器再去

java web基础 --- URL重定向Filter

java web基础 --- URL重定向Filter httpRequest.getRequestDispatcher("/helloWorld").forward(httpRequest, response); 服务器端转发,不改变浏览器端URL地址,常用 httpResponse.sendRedirect(uri); 浏览器端重定向,改变URL在浏览器地址栏 URLOverWriteFilter.java 1 package com.web1.util; 2 3 import j

Java Web基础 --- Servlet 综述(实践篇)

摘要: 伴随 J2EE 6一起发布的Servlet 3.0规范是Servlet规范历史上最重要的变革之一,它的许多新的特性都极大的简化了 Java Web 应用的开发.本文从一个简单的 Servlet 例子开始,说明了如何开发.配置一个 Servlet.此外,还重点叙述了Servlet的一些新特性,包括Servlet 异步处理.Servlet 非阻塞IO 以及 Servlet 文件上传等内容,以便我们对Servlet有一个更全面的了解. 本篇主要介绍 Servlet 实践方面的知识,更多关注于S

Java Web基础小结之Jsp JavaBean

Java Web基础小结In computing, Java Web Start (also known as JavaWS, javaws or JAWS) is a framework developed by Sun Microsystems (now Oracle) that allows users to start application software for the Java Pl... http://bbs.chinaacc.com/forum-2-3/offset-1/to

Java Web 基础 --- Filter 综述

摘要: 伴随J2EE一起发布的Servlet规范中还包括一个重要的组件--过滤器(Filter).过滤器可以认为是Servlet的一种加强版,它主要用于对用户请求进行预处理以及对服务器响应进行后处理,是个典型的处理链.Servlet规范使用了三个接口对过滤器进行了抽象,即Filter是对具体过滤器的抽象,FilterChain是基于AOP理念对责任链方面的抽象,FilterConfig则是对Filter配置的抽象.本文概述了Filter的提出动机.工作原理.使用流程和应用实例,并指出Java W

Java web基础总结九之—— jsp标签

Java web基础总结九之-- jsp标签 JSP标签也称之为Jsp Action,在前面讲过,jsp的设计目的就是作为表现层.我们希望JSP页面仅用作数据显示模块,不要嵌套任何java代码引入任何业务逻辑,但在实际开发中不引入一点业务逻辑是不可能的,但引入业务逻辑会导致页面出现难看java代码.jsp的标签就是为了解决这个问题.所以jsp页面中也内置了一些标签(这些标签叫做jsp标签),开发人员使用这些标签可以完成页面的一些业务逻辑.我们也可以开发自定义标签,使jsp页面不出现一行java代

Java web基础总结八之—— jsp基础

Java web基础总结八之-- jsp基础 一．什么是jsp? JSP是Java ServerPages的缩写,它和servlet一样,都是用于开发动态web资源的技术.在servlet中拼凑输出html代码时,非常麻烦.而JSP的最大的特点在于,写jsp就像在写html,但是html只能为用户提供静态数据,而Jsp技术允许在页面中嵌套java代码,开发动态资源. 现在随着前端越来越重要,很多的公司都会采取前后端分离的开发模式.即后端只提供返回json等格式的接口,而前端开发人员则通过对后端接