JavaScript学习记录(四)

最新推荐文章于 2024-07-22 15:13:59 发布

yaoyaoyao2

最新推荐文章于 2024-07-22 15:13:59 发布

阅读量297

点赞数

分类专栏：成长日记文章标签： javascript

本文链接：https://blog.csdn.net/yaoyaoyao2/article/details/54411140

版权

成长日记专栏收录该内容

7 篇文章 0 订阅

订阅专栏

JavaScript学习记录(四)

主要内容：不同类型的循环实例、Throw、Try和Catch实例、表单验证实例

1.JavaScript不同类型的循环

for - 循环代码块一定的次数

for/in - 循环遍历对象的属性

while - 当指定的条件为 true 时循环指定的代码块

do/while - 同样当指定的条件为 true 时循环指定的代码块

break 语句用于跳出循环。

continue 用于跳过循环中的一个迭代。

2.JavaScript错误-Throw、Try和Catch

try 语句测试代码块的错误。

catch 语句处理错误。

throw 语句创建自定义错误。

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
</head>
<body>

<script type="text/javascript">

    //for循环的一个实例
	arrayA=["APPLE","ORANGE","BANANA","PEAR"];
	for(var i=0;i<arrayA.length;i++)
	{
       document.write(arrayA[i]+"<br>");
	}
</script>

<p>点击下面的按钮，循环遍历对象“person”的属性。</p>
<button οnclick="myFunction()">点击这里</button>
<p id="demo"></p>

<script type="text/javascript">

    //for/in循环的一个实例
	function myFunction()
	{
		var x;
		var txt="";
		var person={fname:"Bill",lname:"Gates",age:56};
		//person数组，其属性有fname、lname、age
		//for/in循环遍历了对象的属性的具体值

		for(x in person)
		{
			txt=txt+person[x]+"<br>";
		}
		document.getElementById("demo").innerHTML=txt;
	}
</script>

<p>点击下面的按钮，只要i小于5就一直循环代码块。</p>
<button οnclick="myFunction2()">点击这里</button>
<p id="demo2"></p>

<script type="text/javascript">
    //while循环的一个实例
	function myFunction2()
	{
		var x="",i=0;
		while(i<5)
		{
			x=x+"The number is "+i+"<br>";
			i++;
		}
		document.getElementById("demo2").innerHTML=x;
	}
</script>

<p>点击下面的按钮，只要 i 小于 5 就一直循环代码块。</p>
<button οnclick="myFunction3()">点击这里</button>
<p id="demo3"></p>

<script>
//do/while循环的一个实例
function myFunction3()
{
var x="",i=0;
do
  {
  x=x + "The number is " + i + "<br>";
  i++;
  }
while (i<5)  
document.getElementById("demo3").innerHTML=x;
}
</script>

<h1>我的第一个JavaScript程序</h1>
<p>请输入 5 到 10 之间的数字：</p>
<input id="demo4" type="text">
<button type="button" οnclick="myFunction4()">测试输入值</button>
<p id="mess"></p>
<script>
function myFunction4()
{
try
{ 
var x=document.getElementById("demo4").value;
if(x=="")    throw "值为空";
if(isNaN(x)) throw "不是数字";
if(x>10)     throw "太大";
if(x<5)      throw "太小";
}
catch(err)
{
var y=document.getElementById("mess");
y.innerHTML="错误：" + err + "。";
}
}
</script>
</body>
</html>

3.JavaScript表单验证

JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。

被 JavaScript 验证的这些典型的表单数据有：

用户是否已填写表单中的必填项目？

用户输入的邮件地址是否合法？

用户是否已输入合法的日期？

用户是否在数据域 (numeric field) 中输入了文本？

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title></title>
    <script type="text/javascript">
/*
下面的函数用来检查用户是否已填写表单中的必填(或必选)项目。
假如必填或必选项为空，那么会弹出警告框，并且函数的返回值为false，
否则函数的返回值为true(表明输入数据没有问题).
*/
    function validate_required(field,alerttxt)
    {
        with(field)
        {
            if(value==null||value=="")
            {
                alert(alerttxt);
                return false
            }else{
                return true
            }
        }
    }


/*
E-mail验证
检查输入的数据是否包含必要的@符号和.符号。
同时，@不可以是邮件地址的首字符，并且@之后需要有至少一个点号。
*/
function validate_email(field,alerttxt)
{
    with(field)
    {
        apos=value.indexOf("@");//判断@的位置
        dotpos=value.lastIndexOf(".");//判断.的位置
        if(apos<1||dotpos-apos<2)
        {
            alert(alerttxt);
            return false
        }else{
            return true
        }
    }
}


    function validate_form(thisform)
    {
        with(thisform)
        {
            if(validate_required(email,"Email must be filled out!")==false){
                email.focus();
                return false
            }

            if(validate_email(email,"Not a valid e-mail address!")==false){
                email.focus();
                return false
            }
        }
    }

    </script>
</head>
<body>
<form οnsubmit="return validate_form(this)" method="post">
    Email:<input type="text" name="email" size="30">
          <input type="submit" value="Submit">

</form>

</body>
</html>

yaoyaoyao2

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript学习记录(四)

JavaScript学习记录(四) 主要内容：不同类型的循环实例、Throw、Try和Catch实例、表单验证实例 1.JavaScript不同类型的循环for - 循环代码块一定的次数for/in - 循环遍历对象的属性while - 当指定的条件为 true 时循环指定的代码块do/while - 同样当指定的条件为 true 时循环指定的代码块break
复制链接

扫一扫