javascriptday1
JavaScript 网页脚本语言;从C语言的基础上演变出来的
//1.JavaScript定义变量;
//2.JavaScript定义方法(函数);
JavaScript中定义变量统一使用var来定义.没有具体的数据类型;
JavaScript也有变量的作用域;跟Java的判定方式一样;
Java中定义方法的格式:
修饰符 返回类型 方法名(参数列表)异常处理 {方法体}
JavaScript定义方法的格式
function 方法名(参数列表) {方法体}
//1.JavaScript定义变量;
//2.JavaScript定义方法(函数);
JavaScript中定义变量统一使用var来定义.没有具体的数据类型;
JavaScript也有变量的作用域;跟Java的判定方式一样;
Java中定义方法的格式:
修饰符 返回类型 方法名(参数列表)异常处理 {方法体}
JavaScript定义方法的格式
function 方法名(参数列表) {方法体}
————————————————————————————————————————————————————————————
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>javascript test1</title> <!-- Javascript 可以写在任何一个Html文档中的位置: Head中可以,Body中可以,Html之后也可以; --> <script type="text/javascript"> //javascript 中的注释方式跟Java类似; /* javascript中只有块注释,没有Java中的文档注释 */ var test; //javascript中的类型,只有在变量赋值之后才知道到底是什么类型; test = 123;//整数类型 window.alert(test); test = "Tomcat";//字符串类型 window.alert(test); test = new Array(5);//数组类型;也就是Java中的引用数据类型;对象; window.alert(test); //ext ==> 专门用来美化HTML界面的UI组件;这里面的所有内容全部都是Javascript //Ajax 技术 ===> 老技术新用法 ==> 使用到javascript </script> </head> <body> </body> </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
//注意,如果要在变量定义之前进行调用或者打印是不可以的.
// 因为这时候变量还没有初始化,所以调用是会出现错误;
// 定义变量或者方法的时候一定要避免重复命名的问题;
// 因为javascript中没有方法的重载,更没有方法的覆盖;
// 错误的调用 : window.alert(test1);
</script>
<script type="text/javascript">
//测试javascript变量的作用域
var test1 = "test1";
//编写javascript的方法
function testVarArea(){
var test2 = "test2";
window.alert(test1);
window.alert(test2);
}
//window.alert(test1);
//window.alert(test2);
//testVarArea();//在调用javascript的方法(函数)
//java:for (声明变量并且初始化;判断表达式;变量修改){ 循环体 }
//javaScript:for(声明变量并且初始化;判断表达式;变量修改){ 循环体 }
function testfor(){
for(i=0;i<10;i++){
window.document.write("i==>"+i+"<br>");
}
}
//testfor();
//javascript => while 循环;
function testwhile(){
//java:while(判断表达式){ 循环体;变量修改}
i = 0;
while(i<10){
window.document.write("while==>i : "+i+"<br>");
i++;//自增
}
}
//testwhile();
function testdowhile(){
i=0;
do{
window.document.write("do while i==>"+i+"<br>");
i++;
}while(i<10);
}
//testdowhile();
function testifelse(){
i=10;
if(i<10){
window.alert("i<10");
}else if(i>10){
window.alert("i>10");
}else{
window.alert("i=10");
}
}
//testifelse();
function testswitch(){
i=1;
switch(i){
case 1:{ window.alert("i=1"); break; }
case 2:{ window.alert("i=2"); break; }
case 3:{ window.alert("i=3"); break; }
default :{ window.alert("找不到对应的选项"); }
}
}
testswitch();
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function testArray(){
//测试javascript中的数组;
//javascript中的数组和Java中的数组有区别;
//声明1:使用new的方式声明一个Array数组;
var array = new Array(5);
//可以通过具体的下标值进行数据的赋值
// 具体每个数据是什么类型需要根据赋值的结果来判定
// 那么这样的话,javascript的数组就有点类似于Java中的一个有限长度的
// 集合一样.
array[0]="tom";
array[1]=20;
array[2]="male";
array[3]=4500.00;
array[4]="广州天河华南师范大学";
//window.alert(array);
return array;
}
function iteratorArray(){
var arrays = testArray();
for(i=0;i<arrays.length;i++){
window.document.write("arrays["+i+"] ==> "+arrays[i]+"<br>");
}
}
//iteratorArray();
function testDate(){
//测试Date()时间;
var times = new Date();//获取本机系统的当前时间;
window.document.write(times.toLocaleString());
}
//testDate();
/*for (变量 in 对象)
{
在此执行代码
}*/
function testforin(){
var a = testArray();
for( i in a){
window.document.write(a[i]+"<br>");
}
}
//testforin();
function testMath(){
//Math对象,直接调用.不需要创建;
window.document.write(Math.PI);
}
testMath();
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
//测试带有参数的JavaScript的function
function testParam(r){
area = Math.PI*r*r;
len = Math.PI*r*2;
window.document.write("圆的半径为:"+r+"<br>");
window.document.write("经过计算的圆面积为:"+area+"<br>");
window.document.write("经过计算的圆周长为:"+len);
}
//testParam(4.5);
var arrays = [1,2,3,4,5,6,7,8,9];
function testArrays(){
for(i=0;i<arrays.length;i++){
window.document.write(arrays[i]+"<br>");
}
}
//testArrays();
//window.document.write(arrays);
//怎样创建javascript中的Map集合;
var map = {name:"Tom",sex:"male",age:25,email:"[email protected]"};
//window.document.write(map);
function testMap(){
//专门遍历map集合;
window.document.write(map.name+"<br>");
window.document.write(map.sex+"<br>");
window.document.write(map.age+"<br>");
window.document.write(map.email+"<br>");
}
//testMap();
function testNumber(){
window.document.write(Number.MAX_VALUE+"<br>");
window.document.write(Number.MIN_VALUE+"<br>");
window.document.write(Number.NEGATIVE_INFINITY+"<br>");
window.document.write(Number.POSITIVE_INFINITY+"<br>");
window.document.write(isNaN("65")+"<br>");
window.document.write(isNaN("6w5")+"<br>");
}
//testNumber();
//转换字符串类型的数据为数字类型;
//typeof 运算符返回一个用来表示表达式的数据类型的字符串。
function testParsInt(str){
//打印具体的类型;
window.document.write(typeof(str)+"<br>");
//是不是数字类型;
if(!isNaN(str)){
i = parseInt(str);
window.document.write(typeof(i));
}
}
//testParsInt("12345");
function testString(str){
var s = new String(str);
// 打印字符串中的第一个位置的字符 charAt(int index) 返回索引
//window.document.write(s.charAt(0));
// 将传入的字符串在次于当前的这个字符串进行连接;
// 组合成一个新的字符串赋值给变量s;
//s = s.concat(s);
//window.document.write(s);
//测试字符的下标值;
//i = s.indexOf("r");
//window.document.write(i);
//arry = s.split(":");
//window.document.write(arry);
// 获取字符串从下标12开始取,向后取12个字符;
//window.document.write(s.substr(12,12)+"<br>");
// substring(起始位置,结束位置);
//window.document.write(s.substring(12, 24));
// javascript中判定是否相等没有equals 只有 ==
//利用循环的方式来逐个查找;
/*for(i=0;i<s.length;i++){
if(s.charAt(i)=="@"){
window.document.write(s.charAt(i));
}
}*/
//i = s.indexOf("@");
//window.document.write(s.substr(i,1));
//window.document.write(s.substring(i,i+1));
//s = s.replace("m","&");
//window.document.write(s);
//字符串转换大小写
window.document.write(s.toLowerCase()+"<br>");
window.document.write(s.toUpperCase()+"<br>");
window.document.write(s.toLocaleLowerCase()+"<br>");
window.document.write(s.toLocaleUpperCase()+"<br>");
window.document.write(s.toLocaleString()+"<br>");
}
//testString("Marry:female:23:[email protected]");
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<table border="1" >
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</table>
<input type="button" value="showLine1" onclick="javascript:showLine(0);" />
<input type="button" value="showLine2" onclick="javascript:showLine(1);" />
<input type="button" value="showLine3" onclick="javascript:showLine(2);" />
<input type="button" value="showAll" onclick="javascript:showLine(3);"/>
</body>
</html>
<script type="text/javascript">
var trlist = document.getElementsByTagName("tr");
function showLine(num){
//将所有的tr全部都隐藏;
for(i=0;i<trlist.length;i++){
trlist[i].style.display="none";
}
//根据具体的下标来显示所需要看到的内容;
if(num==0){
trlist[num].style.display="";
return;
}
if(num==1){
trlist[num].style.display="";
return;
}
if(num==2){
trlist[num].style.display="";
return;
}
if(num==3){
for(i=0;i<trlist.length;i++){
trlist[i].style.display="";
}
return;
}
}
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<form action="" method="post" name="userFrm" id="userFrm">
<table>
<tr>
<td colspan="2">用户登录</td>
</tr>
<tr>
<td>用户名称:</td>
<td><input type="text" name="userName" id="userName"></input></td>
</tr>
<tr>
<td>用户密码:</td>
<td><input type="password" name="passWord" id="passWord"></input></td>
</tr>
<tr>
<td colspan="2">
<input type="button" value="[登 录]" onclick="javascript:getById();" />
<input type="reset" value="[重 置]"/>
</td>
</tr>
</table>
</form>
</body>
</html>
<script type="text/javascript">
function getInfor(){
//userFrm 是 form表单的名字,通过这个名字可以获取到一个Form的对象;
//在通过这个对象获取到userName名字对应的组件,
//在利用这个获取到的input组件取得这个对象的value值;
username = userFrm.userName.value;
password = userFrm.passWord.value;
if(username==""){
window.alert("请输入用户名!");
return ;
}
if(password == ""){
window.alert("请输入用户密码!");
return ;
}
window.alert("UserName="+username);
window.alert("PassWord="+password);
}
function $(id){
return document.getElementById(id);
}
function getById(){
//如果使用Id属性作为获取HTML元素对象的方式;
//那么要保证这个文档中没有一个id属性内容是相同的;
username = $("userName").value;
password = $("passWord").value;
window.document.write("UserName:"+username+"<br>");
window.document.write("PassWord:"+password);
}
</script>
————————————————————————————————————————————————————————————————————————————————————————————
javascript 注册页面
reg.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
</head>
<body>
<form name="regFrm">
<table>
<thead>
<tr>
<td colspan="2">用户注册</td>
</tr>
</thead>
<tbody>
<tr>
<td>用户名:</td>
<td><input type="text" name="username" size="15"/></td>
</tr>
<tr>
<td>密码:</td>
<td><input type="password" name="password" size="15"/></td>
</tr>
<tr>
<td>性别:</td>
<td><select name="sex">
<!-- selected属性表示默认选中 -->
<option value="male" selected="selected">男</option>
<option value="female">女</option>
</select></td>
</tr>
<tr>
<td>地址:</td>
<td><input type="text" name="address" size="40"/></td>
</tr>
</tbody>
<tfoot>
<tr>
<td align="center" colspan="2"><input type="button" value="[注 册]" onclick="javascript:sendTo();"/></td>
</tr>
</tfoot>
</table>
</form>
</body>
</html>
<script type="text/javascript" language="javascript">
function sendTo(){
regFrm.action="send.html";
regFrm.method="get";
regFrm.submit();//提交数据;
}
</script>
send.html页面
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
</head>
<body>
<table width="40%">
<thead>
<tr>
<td colspan="2">获取到reg.html的注册信息</td>
</tr>
</thead>
<tbody>
<tr>
<td width="20%">用户名:</td>
<td width="80%" id="userName"></td>
</tr>
<tr>
<td>密码:</td>
<td id="passWord"></td>
</tr>
<tr>
<td>性别:</td>
<td id="sex"></td>
</tr>
<tr>
<td>地址:</td>
<td id="address"></td>
</tr>
</tbody>
</table>
</body>
</html>
<script type="text/javascript" language="javascript">
//获取URL
var url = window.location;
//window.alert(url);
function get(id){
return document.getElementById(id);
}
function setValues(){
//这个方法就是将URL进行解析,然后添加到对应的td元素中;
url = new String(url);
url = url.split("?");
//window.alert(url[1]);
url = url[1].split("&");
//window.alert(url);
for(i=0;i<url.length;i++){
str = url[i].split("=");
if(str[0]=="username"){
get("userName").innerHTML="<font color='red'>"+str[1]+"</font>";
}
if(str[0]=="password"){
get("passWord").innerHTML="<font color='blue'>"+str[1]+"</font>";
}
if(str[0]=="sex"){
get("sex").innerHTML=str[1];
}
if(str[0]=="address"){
get("address").innerHTML=str[1];
}
}
}
setValues();
</script>