2008年12月24日
这次还是说上一节课的东西，巩固上一节课所学的。
说一说css的开头语<style type="text/css"> </style>
,之前教的都是这一句，其实原来还有一种写法，就是<style style="text/css">
</style>。
再一次讲解了<title>XXX</title>
的用处，在这里面写的，就是显示在网页左上角的，也就是在搜索引擎当中寻找时的相关文字。
要注意，javascript
文句要写在<body>底下，比如<input id="aaa" type="text" />
这些{在这些文句与文句之间加入<br>是换行的意思，如果加入
就是空格的意思。}，而javascript的事件文句，也就是控制以上文句的取值，比如
<script>
function
...
var
...=document.getElementById ...
等等,这些都要放在后面，注意不能乱了次序。
再一次说明<script>这是javescript的控制文句开头，简单来说就是javescript的开头。
function是指这是一个函数，后面跟着的是一个函数的名字，名字用于上面另一种句型比如<input type="button" id="bbb" value="按我" onclick="check();"/>
里的onclick所指向的名字。
下面跟着的var是function的公式，function只是去定义这些包含的公式的名字，var后跟着的名字是自定义的，不重要。
而后面＝document.getElementByld ...是说明了var的公式里需要取得哪里的值，document.getElementByld
这是取值的意思。而后面跟着的名字就是以上<input id="aaa" type="text" />
id所指的唯一身份的东西。
还有就是alert(...)
，这单词是弹出对话框的意思，后面(...)里的，就是弹出对话框所显示的东西。
最后，在课堂里，还布置了要我们查出一共有多少种<input type=
""> 的类型。
text -- 文字输入域(输入型) <input type=
"text">
password -- 也是文字输入域,但是输入的文字以密码符号'*'显示(输入型) <input type=
"password">
file -- 可以输入一个文件路径(输入型) <input type=
"file">
checkbox -- 复选框 .可以选择零个或多个(选择型) <input type=
"checkbox">
radio -- 单选框 .只可以选择一个而且必须选择一个(选择型) <input type=
"radio">
hidden -- 代表隐藏域,可以传送一些隐藏的信息到服务器 <input type=
"hidden">
button -- 按钮(点击型) <input type=
"button">
image -- 使用图片来显示按钮,使用src属性指定图像的位置(就像img标签的src屬性)(点击型) <input type=
"image">
submit -- 提交按钮,表单填写完毕可以提交,把信息传送到服务器.可以使用value属性來显示按鈕上的文字(点击型) <input type="submit">
reset -- 重置按钮,可以把表单中的信息清空(点击型) <input type="reset">
基本上最常用的<input type=
"button">
里，应该还会附带着别的，比如<input type="button" value="按我" onclick="check();"/>
在这里的value=""的，就是此按钮所显示的，而onclick=""意思就是鼠标左键单击后要执行的函数，后面指向的就是函数的名字。
其实事件有很多，可以到这看看别人的事件大全http://blog.csdn.net/yuanshilao/archive/2006/04/20/670967.aspx
posted @
2008-12-24 14:23 ..゛緣々ゞ 阅读(96) |
评论 (0) |
编辑 收藏
2008年12月22日
//1. 找出所有"input type="" 的类型，自己动手做例子。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf8">
<title>课堂功课1</title>
<style style="text/css">
.parent{
background:#06518A;
width:270px;
height:46px;
position:absolute;
top:0px;
left:0px;
}
.child{
background:blue;
width:270px;
height:20px;
position:absolute;
top:46px;
left:0px;
}
.ch{
background:purple;
width:270px;
height:46px;
position:absolute;
top:66px;
left:0px;
}
.ml{
background:black;
width:270px;
height:26px;
position:absolute;
top:112px;
left:0px;
}
.cm{
background:#FF60AF;
width:270px;
height:20px;
position:absolute;
top:138px;
left:0px;
}
.cc{
background:#00A600;
width:270px;
height:20px;
position:absolute;
top:158px;
left:0px;
}
.mm{
background:#743A3A;
width:270px;
height:24px;
position:absolute;
top:178px;
left:0px;
}
</style>
</head>
<body>
<div class="parent">
帐号：<br><input id="aaa" type="text" /> <input type="image"/>
</div>
<div class="child">
<input type="radio" name="myradio" value="0"> 男<input type="radio" name="myradio" value="1"> 女
</div>
<div class="ch">
密码:<br><input type="password" id="yyy"/>
</div>
<div class="ml">
<input type="file"/>
</div>
<div class="cm">
<input type="checkbox"/>1 <input type="checkbox"/>2 <input type="checkbox"/>3 <input type="checkbox"/>4 <input type="checkbox"/>5
</div>
<div class="cc">
<input type="hidden"/>
</div>
<div class="mm">
<input type="button" value="显示" onclick="check();"/> <input value="提交" type="submit" onclick="nn();"/> <input type="reset"/>
</div>
</body>
</html>
<script>
function check(){
var o=document.getElementById("aaa").value;
alert("帐号："+o);
}
function nn(){
var a=document.getElementById("aaa").value;
var b=document.getElementById("yyy").value;
alert("帐号："+a+" "+"密码："+b);
}
</script>
- type 属性取值:
text -- 文字输入域(输入型)password -- 也是文字输入域,但是输入的文字以密码符号'*'显示(输入型)file -- 可以输入一个文件路径(输入型)checkbox -- 复选框.可以选择零个或多个(选择型)radio -- 单选框.只可以选择一个而且必须选择一个(选择型)hidden -- 代表隐藏域,可以传送一些隐藏的信息到服务器button -- 按钮(点击型)image -- 使用图片来显示按钮,使用src属性指定图像的位置(就像img标签的src屬性)(点击型)submit -- 提交按钮,表单填写完毕可以提交,把信息传送到服务器.可以使用value属性來显示按鈕上的文字(点击型)reset -- 重置按钮,可以把表单中的信息清空(点击型)
不是太明白如何使用以上的属性。
//2. 用javascript 的alert 打出他们的输入值。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf8">
<title>课堂功课2</title>
<style style="text/css">
.parent{
position:absolute;
top:0px;
left:0px;
width:350px;
height:120px;
background-color:red;
}
.child{
position:absolute;
top:0px;
left:350px;
width:80px;
height:50px;
background-color:blue;
}
</style>
</head>
<body>
<div class="parent">
请输入你想得到得值
<input id="aaa" type="text"/><br><br><br>
注：在文本框内你所输入的值，在你按下显示按钮，你的值就会显示在提示框上。
</div>
<div class="child">
<input type="button" id="bbb" value="显示" onclick="check();"/>
</div>
</body>
</html>
<script>
function check(){
var a=document.getElementById("aaa").value;
alert(a);
}
</script>
posted @
2008-12-22 14:26 ..゛緣々ゞ 阅读(113) |
评论 (0) |
编辑 收藏
2008年12月21日
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf8">
<head>
<title>Sample2.1.1</title>
<style type="text/css">
.parent{width:350px;height:300px;background-color:red;}
.child{width:150px;height:100px;background-color:blue;}
</style>
</head>
<body>
<input id="aaa" type="text" /> <input type="radio" name="myradio" value="0"> 男<input type="radio" name="myradio" value="1"> 女 <br>
<input type="checkbox" name="checkbox" value="1"><br>
<input type="button" id="bbb" value="按我" onclick="check();"/>
</body>
</html>
<script>
function check(){
var o=document.getElementById("bbb");
alert(o.value);
}
</script>
//1. 找出所有"input type="" 的类型，自己动手做例子。
//2. 用javascript 的alert 打出他们的输入值。
posted @
2008-12-21 21:51 ..゛緣々ゞ 阅读(106) |
评论 (0) |
编辑 收藏
2008年12月11日
1.在html里,要得一个能输入东西的文本框,需要有以下的控制代码.
<input type="text"
......这就是文本框代码.
<input type="text" id="aaa" size="20" />
size是代表框格的长度.
2. id的属性是一个唯一的识别.类似身份证.
3.在javascript
里可以利用id去访问html的标签.好比如css里的class一样.
4.如何在html里显示一个按钮?
<input type="button" value="开始计算" onclick="cal();"/>
<input type="button"
......这就是按钮的代码.
在这里的value="开始计算"
可以理解为按钮上显示什么.
在这里的onclick="cal();"
,onclick就是鼠标左键单击,这里的"cal();"是一个名字 ,
可以理解为单击后,命令它执行到什么"cal();"
里所包含的公式.
5.函数的概念是什么?
要想到这个公式y=f(x),在这公式里的f就是函数,函数属于一个抽象的定义.
6.变量的概念是什么?
对函数y=f(x) 而言,x和y都是变量.
7.内建函数是什么意思?
就是计算机内本身支持的函数.计算机内已经包含许多种函数,方便我们写程序.
8.parseInt函数完成什么操作?
javascript的内建函数,全都是字符组成,parseInt就是将字符串转化为数字.
所有从文本框得来的值都是字符串,所以要用这个parseInt
函数将之转化为数字.
posted @
2008-12-11 12:24 ..゛緣々ゞ 阅读(104) |
评论 (0) |
编辑 收藏
2008年12月6日
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf8">
<style type="text/css">
#adiv {
left:500px;
top:100px;
background:#FF0000
}
</style>
<div id="adiv" >
请输入a的值：<input type="text" id="aaa" size="20" /><br>
请输入b的值：<input type="text" id="bbb" size="20" /><br><br><br>
<input type="button" value="开始计算" onclick="cal();"/>
</div>
</html>
<script>
//以上的<input type="text" id="aaa" size="20" />,意思是指这里有个文本框，这框有个唯一的身份，调用到aaa，这框的长为20。<br>是换行的意思。
//还有<input type="button" value="开始计算" onclick="cal();"/>是指这里有个按钮,
//function是运行函数,函数只是一种过程的统称.
//这里的cal我设置为加法程序。
//下面的var a=document.getElementById("aaa").value;的var是声明定义初值,声明定义变量. 整句说明aaa是个数值,能被ID引用,这就是a的定义变量(初值).
//下面var c=parseInt(a) + parseInt(b); 就是c等于a与b的和,parseInt()是数据转换整数.parseInt(b)前面的"+"就是数学加号,求和.
//alert("a+b="+ c)是弹出对话框，引号中间的部分直接显示,+c就是显示以上一句,C的定义.+号却不显示.
function cal(){
var a=document.getElementById("aaa").value;
var b=document.getElementById("bbb").value;
var c=parseInt(a) + parseInt(b);
alert("a+b="+ c);
}
</script>
posted @
2008-12-06 23:29 ..゛緣々ゞ 阅读(156) |
评论 (0) |
编辑 收藏