javascript 客户端验证和页面特效制作 学习笔记
第一章 JavaScript的基本语法
1.0 回顾知识点
1. 样式表
统一的字体外观样式
<STYLE type="text/css"> font-family:"黑体"; font-size:18px; color:#EF0000; </STYLE>
细边框样式
<STYLE type="text/css"> border-width:1px; border-style:solid; </STYLE>
1.1 为什么要学JavaScript
javascript旨在使开发人员能对网页的功能进行管理和控制。
1. 表单验证
2. 页面动态效果
1.2 什么是javascript
1. 脚本的基本结构
<SCRIPT language="javascript"> <!-- //注释，告知不支持javascript的浏览器忽略脚本。 javascript语句； --> </SCRIPT>
示例1
<HTML> <HEAD> <TITLE>脚本的基本结构</TITLE> <SCRIPT language="javascript"> document.write("淘宝网欢迎您！"); for(int i=0; i<5; i++) { document.write("<H2>淘宝网欢迎您！</H2>"); } </SCRIPT> </HEAD> <BODY> <H1>BODY部分的内容</H1> </BODY> </HTML>
2. 脚本的执行原理
(1)浏览器接收用户请求；（用户输入要访问的页面，含javascript脚本）
(2)浏览器向服务器请求该页面，等待服务器响应；
(3)服务器响应浏览器，即把该文件发送到浏览器，然后浏览器从上到下逐条解析。
好处：
(1)页面只需要下载一次，减少不必要的网络通信
(2)脚本由浏览器端执行，减轻服务器端的压力
1.3 javascript的基本语法
1. 变量的声明和赋值
变量使用var声明 （javascript是一种弱类型语言）
var count=10;
或者不声明，直接使用 （不推荐）
x=88;
2. 运算符号
与java, C#等语言相同
3. 逻辑控制语句
条件，循环，switch
4. 注释
//单行注释
/*
多行
注释
*/
5. 类型转换
(1)基本数据类型转换（与java相似）
(2)parseInt()和parseFloat() //将字符串转换为整型或浮点型数字
例 parseInt("86"); parseFloat("35.45");
如果parseFloat()发现一个非数字、小数点或者指数的字符，则忽略该字符及其后面的所有字符。
如果第一个就是无法转换的字符，则返回"NaN"(Not a Number)。
示例2
<HTML> <HEAD> <TITLE>类型转换</TITLE> <SCRIPT language="javascript"> function calcu(){ //定义calcu()函数，实现两个数相乘的功能 //输入的数据：document.表单名.表单元素名.value var numb1 = document.calc.num1.value; var numb2 = document.calc.num2.value; var total = parseFloat(numb1) * parseFloat(numb2); document.calc.result.value=total; } </SCRIPT> </HEAD> <BODY> <FORM name="calc"> <P> 竞拍价格： <INPUT name="num2" TYPE="text" id="mum2" value="120" size="15" /> <BR /> 购买数量： <INPUT name="num1" TYPE="text" id="mum1" size="15" /> <BR /> 预计总价： <INPUT name="result" TYPE="text" id="result" size="15" /> <BR /> </P> <P> <INPUT name="getAnswer" TYPE="button" id="getAnswer" onClick="calcu()" value="计算看看" /> </p> </FORM> </BODY> </HTML>
示例3
<HTML> <HEAD> <TITLE>逻辑控制语句的应用</TITLE> <SCRIPT language="javascript"> document.write("<H2 align='center'>打印倒正金字塔直线</H2>"); var i=25; while(i > 0) { document.write("<H2 align='center' width=" + i + "%>"); i = i - 5; } for (var j=5; j<30; j=j+5) { document.write("<H2 align='center' width=" + i + "%>") } </SCRIPT> </HEAD> <BODY> </BODY> </HTML>
1.4 自定义函数 function
1. 创建函数
function 函数名 （参数1， 参数2，....）{
语句;
}
2. 调用函数
事件名 = "函数名()"
示例4
<HTML> <HEAD> <TITLE>脚本函数示例</TITLE> <SCRIPT language="javascript"> function showHello(){ //创建函数 //获取文本框中输入的值 var count=document.myForm.txtCount.value; for(i=0; i<count; i++) document.write("<H2>Hello World!</H2>"); } </SCRIPT> </HEAD> <BODY> <FORM name="myForm" method="post" action=""> <P> 输入Hello World显示的次数： <INPUT name="txtCount" TYPE="text" id="txtCount" /> </p> <P> <INPUT name="submit" TYPE="submit" id="submit" onClick="showHello()" value="显示Hello World" /> </p> </FORM> </BODY> </HTML>
示例5
<HTML> <HEAD> <TITLE>简易计算器</TITLE> <SCRIPT language="javascript"> function compute(op){ var num1, num2; num1 = parseFloat(document.myForm.txtNum1.value); num2 = parseFloat(document.myForm.txtNum2.value); if(op == "+") { document.myForm.txtResult.value = num1 + num2; } if(op == "-") { document.myForm.txtResult.value = num1 - num2; } if(op == "*") { document.myForm.txtResult.value = num1 * num2; } if(op == "/" && num2 !=0) { document.myForm.txtResult.value = num1 / num2; } } </SCRIPT> </HEAD> <BODY> <FORM name="myForm"> <H3>购物简易计算器</H3> <BR /> 第一个数： <INPUT name="txtNum1" TYPE="text" id="txtNum1" size="25" /> <BR /> 第二个数： <INPUT name="txtNum2" TYPE="text" id="txtNum2" size="25" /> <BR /> <INPUT name="add" TYPE="button" id="add" onClick="compute('+')" value=" + " /> <INPUT name="sub" TYPE="button" id="sub" onClick="compute('-')" value=" - " /> <INPUT name="mul" TYPE="button" id="mul" onClick="compute('*')" value=" * " /> <INPUT name="div" TYPE="button" id="div" onClick="compute('/')" value=" / " /> <BR /> 计算结果： <INPUT name="txtResult" TYPE="text" id="txtResult" size="25" /> </FORM> </BODY> </HTML>
