随笔-5  评论-0  文章-0  trackbacks-0
  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>是换行的意思,如果加入&nbsp; 就是空格的意思。},而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 ..゛緣々ゞ 阅读(25) | 评论 (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" />&nbsp;&nbsp;<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&nbsp;&nbsp;<input  type="checkbox"/>2&nbsp;&nbsp;<input  type="checkbox"/>3&nbsp;&nbsp;<input  type="checkbox"/>4&nbsp;&nbsp;<input  type="checkbox"/>5
</div>
<div class="cc">
<input  type="hidden"/>
</div>
<div class="mm">
<input type="button" value="显示" onclick="check();"/>&nbsp;&nbsp;<input value="提交" type="submit" onclick="nn();"/>&nbsp;&nbsp;&nbsp;&nbsp;<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 ..゛緣々ゞ 阅读(25) | 评论 (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" />&nbsp;&nbsp;<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 ..゛緣々ゞ 阅读(27) | 评论 (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 ..゛緣々ゞ 阅读(27) | 评论 (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 ..゛緣々ゞ 阅读(69) | 评论 (0)编辑 收藏
仅列出标题