devbox
Gausst松鼠会
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

web概述14_checkvalidity 获取异常

作者：Gausst松鼠会 | 2024-02-18 22:03:02

赞

踩

checkvalidity 获取异常

JavaScript

JavaScript是一种基于对象和事件驱动的客户端脚本语言

  • 动态、弱类型、基于原型，内置了支持类
  • 解释器称为 JS 引擎，内置于浏览器中
  • ECMA 欧洲计算机制造商协会
Hello world
<input type="button" onclick="ff()" value="Click me"> onclick就是给按钮绑定了一
个响应函数，点击按钮则会触发响应函数的执行
<script>
function ff(){
window.alert('点击操作处理...');
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

复杂写法

<button>Click me</button>
<script>
window.onload=function(){//当窗口加载完毕后自动执行的回调处理
var btn=document.getElementsByTagName("button")[0];//按照标签名称查找文
档中的所有指定标签，例如这里查找所有的button标签
btn.onclick=function(){ //给查找的页面元素绑定单击响应函数
alert(this.firstChild.nodeValue);//this用于指代当前事件源对象，也就是
button按钮。获取按钮元素的第一个子元素
}
}
</script>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

JavaScript基本语法

<script> 标签用于在html页面中定义客户端脚本，可以写在 <html></html> 中的任意位置。可以添加属性type用于说明脚本的MIME类型 text/javascript

js脚本既可以写在html文件内部，也可以独立定义js文件，需要使用时进行连接引入。例如

<script
type="text/javascript" src="引入的js文件路径"></script> 

  • 1
  • 2

引入外部文件的 <script> 标签之间不能包含内容

  • 加载外部的css文件使用的是link标签
 <link rel="stylesheet" type="text/css"
href="style/aaa.css">

  • 1
  • 2
JavaScript数据类型

js是弱类型脚本语言，变量的数据类型是解释执行时动态决定的。

  • 基本数据类型：Number数值型、布尔类型boolean、字符串类型string
  • undefined类型只有一种可取值undefined，表示没有初始值的变量
  • null类型表示已经赋值，只是值为空
  • 复合数据类型：对象、数组和函数
  • JavaScript中严格区分大小写
  • JavaScript中标识符的命名规范和Java一致
布尔类型
  • true：true、非零数字、非空字符串
  • false：false、数值0、空字符串、undefined、null
函数

在JS中函数也是一个对象，可以将函数作为一个值赋给变量，函数名就是这个对象的引用

var f=function(name){
alert('xxxx'+name);
}
f('lisi');

  • 1
  • 2
  • 3
  • 4
变量

变量定义可以使用关键字var和 let进行定义，也可以不加任何关键字

<script>
var kk=999;
mm="number:";
let sex=true;
document.writeln("kk:"+kk+"<br/>");
document.writeln("mm:"+mm+"<br/>");
document.writeln("sex:"+sex+"<br/>");
</script>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

JavaScript 是弱类型编程语言，声明变量时不需要指定类型，而且变量类型也随着赋值的改变而改变

正则式

正则表达式是一种用来匹配字符串的强有力的武器。它的设计思想是用一种描述性的语言来给字符串定义一个规则，凡是符合规则的字符串就认为它匹配了，否则该字符串就是不合法的

正则式本质上就是一种允许使用通配符的特殊字符串，基础语法就是【/表达式/】，最初的主要用于用户输入数据的校验

通配符

在这里插入图片描述
特殊字符表示频率修饰
在这里插入图片描述

固定组

固定组可以使用()表示，可以使用竖线 | 表示互斥
例如 (abc)|(efg) 表示可以匹配abc或者efg

常用方法

基本使用方法

<form action="./index.html" name="form1" method="post" onsubmit="return
isSubmit();">
onsubmit就是在form表单提交之前所执行的函数
这里可以使用return false阻止form表单的提交
function isSubmit(){
if(checkSNO(document.form1.sno) && checkSname(document.form1.sname) &&
checkSbirthday(document.form1.sbirthday)){ 执行各个输入的验证，如果验证通过则返回
true，使form表单提交，否则返回false阻止提交
return true;
}
return false;
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
正则式对象的test方法

test()方法用于判断正则式是否匹配某个字符串

<input type="text" name="sno" onBlur="checkSNO(this)" />
<td id="sno"></td>
当输入框失去焦点时自动回调checkSno函数,并将当前页面元素作为参数传递到函数中
function checkSNO(n){
var flag = true;
var message = "ok";
var zz = /^\d{4}$/; 整个字符串内容必须以数字开头【^】，以数字结尾【$】。\d表示数
字，每个字符必须是0-9的数字，{4}表示\d需要出现4次，如果{4,}表示最少出现4次，如果{,4}表示
0次到4次
if(!zz.test(n.value)){ 判断输入的内容是否复合正则式，符合则为true，否则为
false。n是调用时候传入的页面元素，.value则获取该页面元素的value值
message ="no";
flag = false;
}
document.getElementById(n.name).innerHTML=message;
return flag;
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17

如果要求输入4位数字，而且不能0开头。 /^[1-9][0-9]{3}$/

判断输入内容为中文字符，要求最少2个，最多10个

function checkSname(n){
var flag = true;
var message = "ok";
var zz = /^[\u4e00-\u9fa5]{2,10}$/;
if(!zz.test(n.value)){
message ="no";
flag = false;
}
document.getElementById(n.name).innerHTML=message;
return flag;
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

判断用户输入的日期类型样式

function checkSbirthday(n){
var flag = true;
var message = "ok";
var zz = /^\d{4,}-([1-9]|[1][012])-([1-9]|[12][0-9]|[3][01])$/;
if(!zz.test(n.value)){
message ="no";
flag = false;
}
document.getElementById(n.name).innerHTML=message;
return flag;
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

样例深入理解
初期开发中使用正则式的建议：到网络上查询，不建议自己写，除非有把握。

vscode的插件any-rule按需求直接生成

没有通配符

var str="112yanjun";
var reg1=/yan/;表示3个字符，而且连接顺序确定。主要字符串中包含yan子串则返回true
document.writeln(reg1.test(str));
添加特定符号
/^yan/ 表示要求以yan子串开头，例如yanjun
/yan$/ 表示要求以yan子串收尾，例如junyan

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

使用通配符
其它通配符的含义比较清晰，重点理解[]的用法

要求字符串应该是由数字组成
\d表示字符串中的一个字符应该是数字
var str="12";
var reg1=/^\d$/;
document.writeln(reg1.test(str)); 返回值为false
使用+表示前面的字符可以出现一次或多次,但是由于^和$的限制，所以str中包含字符a非数字，返回值
为false
var str="1243213421a2";
var reg1=/^\d+$/;
document.writeln(reg1.test(str));
可以使用[]表示一个字符的条件
[1-9]表示字符串中一个字符应该是1到9的数字
var str="0";
var reg1=/^[1-9]$/; reg1.test返回false
var str="1f";
var reg1=/^[1-9a-f]{2}$/; //可以匹配1-9的数字或者a-f的字符
var str="yb";
var reg1=/^[yan]{2}$/; //每个字符可以使用yan中任意一个字符

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18

其它用法【不重要】
new RegExp()构建正则表达式对象，可以使用参数指定匹配模式g、i、m

  • g全文查找、i忽略大小写、m 多行查找。也可以同时指定3个模式
var str = "Visit W3School, W3School is a place to studyweb tech.";
var patt = new RegExp("W3School","g");
var result;
while ((result = patt.exec(str)) != null) {
document.write(result);
document.write(patt.lastIndex);
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • compile编译正则表达式，例如 reg1.compile(“man”,“g”); 修改正则式对象中的正则表达式
  • test判断是否符合正则表达式 [主要应用]
  • exec检索字串中指定的值，返回找到的值，并确定位置
字串的replace方法

replace(正则式，替换内容) 用于进行符合正则式要求的字符串的替换

function trim(str){
return str.replace(/(^\s*)|(\s*$)/g,"");//剔除字符串两端的空格符，其中^\s*表示
开头部分的多个空格,\s*$表示收尾的多个空格。默认只匹配一次，如果需要匹配所有满足条件的字符
串，则需要使用贪婪模式g
}
alert(trim(" safdas "));

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
String其它方法
  • search()方法用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串
  • match() 法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配
  • replace()替换与正则表达式匹配的子串
  • split() 把字符串分割为字符串数组

search() 方法用于检索字符串中指定的子字符串或检索与正则表达式相匹配的子字符串。如果没有找到任何匹配的子串，则返回-1

var str="Mr. Bluehas a blue house";
document.write(str.search(/blue/i));

  • 1
  • 2

match() 方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配

match()方法将检索字符串String Object，以找到一个或多个与regexp匹配的文本。这个方法的行
为在很大程度上有赖于regexp是否具有标志g。如果regexp没有标志 g，那么match方法就只能在
stringObject中执行一次匹配。如果没有找到任何匹配的文本，match将返回null。否则它将返回
一个数组，其中存放了与它找到的匹配文本有关的信息
var str = "The rain in SPAIN stays mainly in theplain";
var n=str.match(/ain/gi);
document.getElementById("demo").innerHTML=n;
输出值为：ain,AIN,ain,ain

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

split() 方法用于把一个字符串分割成字符串数组。如果把空字符串""用作separator，那么stringObject中的每个字符之间都会被分割。split方法不改变原始字符串

var str="How areyou doing today?";
var n=str.split("",3);
输出值：How,are,you
var str="How areyou doing today?";
var n=str.split(/[a-e]/);

  • 1
  • 2
  • 3
  • 4
  • 5
H5的数据校验

html5额外添加了一些输入校验属性进行简单的客户端校验，不符合规则则会弹出tip进行提示

  • required指定必须填写
  • pattern指定输入值必须符合指定的正则表达式
  • min/max针对数值和日期的最大最小值
<input type=text name=name required/>
<input type=text name=isdn required pattern="\d{3}-\d-\d{3}-\d{5}"/>
<input name=price type=number min=20 max=150 step=5 />

  • 1
  • 2
  • 3

自定义报错信息
默认html5为每个校验规则提供相应的报错提示，这些错误提示信息是固定的。html5为表单控件提供setCustomValidity()方法实现用户自定义报错提示信息。但是注意浏览器对自定义错误提示的支持并不是很理想，可能会有页面需要刷新一次的问题。

<form action=add>
<input id=name name=name type=text required/>
<input type=submit value=提交 onclick="check();"/>
</form>
<script type="text/javascript">
var check=function(){
if(! document.getElementById("name").checkValidity()){
document.getElementById("name").setCustomValidity("名称是必须填写的！");
}
}
</script>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

H5验证总结

  • 优点：简单方便
  • 缺点：提示的UI不是太漂亮，无法做多个验证，必须表单提交才能验证（即ajax无效）
  • 建议：在要求比较简单的时候可以考虑使用H5验证表单，也可以使用内置JS函数加各种事件自定义一个验证函数，不过这样不仅兼容是个问题，而且还麻烦，倒不如直接使用JQ插件验证
Date日期类型

Date日期对象。这个对象可以储存任意一个日期，从0001年到9999年，并且可以精确到毫秒数
（1/1000秒）

  • 在内部，日期对象是一个整数，它是从1970年1月1日零时正开始计算到日期对象所指的日期的毫
    秒数。如果所指日期比1970年早，则它是一个负数

所有日期时间，如果不指定时区，都采用UTC世界时时区，它与GMT格林威治时间在数值基本上是一样的

  • 不指定参数日期 new Date()
  • 参数为日期字符串： var nowd2=new Date(“2019/3/20 11:12”);
  • 参数为毫秒数： var nowd3=new Date(5000);
  • 参数为年月日小时分钟秒毫秒： var nowd4=new Date(2018,10,24,11,12,0,300);

常见方法：

  • getFullYear() 返回四位数的年、getMonth() 返回月 0-11、 getDate() 返回日、 getDay() 返回星
    期
  • getHours() 返回小时 0-23、 getMinutes() 返回分钟 0-59 、getSeconds() 返回秒数 0-59
  • getMilliseconds() 返回0-999 毫秒
    以上都可以加UTC返回世界时间
    UTC协调世界时是以原子时秒长为基础，在时刻上尽量接近于世界时的一种时间计量系统。 中国大陆为UTC+8
  • getTime() 返回1970 年 1 月 1 日至今的毫秒数
  • setFullYear(year,month,day) 、 setMonth(month,day) 、setDate(day)、
    setHours(hour,min,sec,millisec)、setMinutes(min,sec,millisec)、setSeconds(sec,millisec)、
    setMilliseconds(millisec)、setTime(millisec)

需求：当用户浏览网页的时候，根据当前的时间，给出问候语:
6:00-9:00 早上好
9:01-11:30 上午好
11:31-14:30 中午好
14:31-17:30 下午好
17:31-18:40 傍晚好
18:41-23:59 晚上好
0:00-5:59 凌晨好

定时器使用

setTimeout和setInterval。setTimeout只执行一次，setInterval会按照指定时间间隔反复执行

  • setTimeout(“调用的函数”, “定时的时间”) ，例如 var myTime＝setTimeout(“disptime( )”,1000）; 每隔1000毫秒调用函数disptime( )执行
  • clearTimeout(myTime);关闭定时器

动画效果

<img id="img1" src="images/T0.GIF">
<button onclick="ff()">开始播放</button><button onclick="ss()">停止播放
</button>
<script>
var to=null;
function ff(){
to=setTimeout("dd(0)",200);
}
function dd(kk){
document.getElementById("img1").src="images/T"+kk+".GIF";
kk++;
if(kk>9) kk=0;
to=setTimeout("dd("+kk+")",200);
}
function ss(){
if(to!=null)
clearTimeout(to);
}
</script>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19

窗口定时关闭

<script language="javascript">
function ff(){
setTimeout("bb()",3000);
}
function bb(){
alert('三秒到了!');
window.close();
}
</script>
<body onload="ff()">
</body>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

复合类型

复合类型就是由多个基本数据类型，包括复合类型，组成的数据体。
复合类型包括对象Object、数组Array和函数Function三种

对象

对象是一系列命名变量、函数的集合。对象中的命令变量称为属性，对象中的函数称为方法。对象访问成员的语法是点运算符【对象变量名.成员名称】实现
访问浏览器的版本号 navigator.appVersion ，这里的navigator就是BOM浏览器对象，编程显示使用的document就是DOM文档对象
JavaScript 是基于对象的脚本语言，它提供了大量的内置对象。常见的内置类由数组类Array、日期类Date、错误类Error、函数类Function、数学类Math、数值Number、对象类Object和字串类String

数组

数组实际上就是一系列变量，其中数组元素的类型可以不相同，可以通过使用length属性获取当前数组中的元素个数，也可以修改length属性对数组进行裁剪

var arr1=[1,2,34,5]; //定义数组并同时进行数组元素赋值，下标从0开始，例如arr1[0]就是1
var arr2=new Array();//定义一个空数组
arr2=new Array(6); //定义一个数组，长度为6.每个数组元素为undefined
arr2=new Array(16,10);//定义一个数组，长度为2，其中第一个元素为16，第二个元素为10.如果
参数更多则含义一致

  • 1
  • 2
  • 3
  • 4
  • 5

length属性是一个可读可写的属性，通过设置length属性值可以对数组进行裁剪

var brr=[1,2,3,4,5,6,7];
brr.length=3;//自动删除3个元素以后的元素
for(let k=0;k<brr.length;k++)
document.writeln(brr[k]);

  • 1
  • 2
  • 3
  • 4

数组的特点：

  • 数组长度可变， new Array(3) 当添加第4个元素时，数组长度自动改为4
  • 同一个数组中的元素类型可以互不相同
  • 访问数组元素不会产生数组越界问题，访问未赋值的数组元素时，值为undefined
函数

函数可以包含一段可执行的代码，也可以接收调用者传入参数
基础语法 function 函数名称(形参1,形参2,…){函数体;}

  • 特殊语法arguments
    调用函数的语法 var res=函数名称(实参1，实参2，…);

运算符

通过运算符可以将变量连接成语句，语句是JavaScript代码中的执行单位

赋值运算符

赋值运算符就是使用=将一个常量值赋值给变量，并支持连续赋值 a=b=c=d=7
加强赋值运算符+=、-=、*=、/=、%=，另外还有位运算符加强运算符&=、|=、^=、<<=、>>=、>>>=。所谓的加强运算符就是所有的双目运算符和赋值运算符的结合

a=a+b可以简写位a+=b

算术运算符

算术运算符用于执行基本的数学计算，例如加+、减-、乘*、除/、求余%、自加++和自减–。
a=a+++a+++a
其它特殊计算可以使用数学库类Math

  • 次方计算Math.pow(a,5)计算a的5次方
  • 平方根Math.sqrt(a)
  • 随机数Math.random()

位运算符

与&、或|、非~、异或^、左移位<<、右移位>>、无符号右移位>>>

比较运算符

大于>、大于等于>=、小于<、小于等于<=、等于==、不等于!=。这里注意针对string类型使用进行比较，不是equals方法
严格等于=,严格不等于!==

var str="13";
var kk="3";
document.write(str>kk); //false
var str="13";
var kk=3;
document.write(str>kk);//true

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

严格等于要求首先数据类型一致，然后比较其中内容，否则false

逻辑运算符

与&&、或||、非！，这里支持短路操作
注意：实际上逻辑运算还可以使用位运算符&和|，两者之间的区别是逻辑运算符支持短路操作，但是位运算不支持短路操作

三目运算符

(逻辑表达式1)？(表达式2):(表达式3) ，完全可以使用if/else替代

逗号运算符

逗号运算符允许将多个表达式连在一起，其中使用逗号分隔，整个表达式返回最右边表达式的值

var a,b,c,d; //声明变量
a=(b=5,c=7,d=8); //这里给3个变量bcd赋值，整个表达式的执行结果实际上就是最后/最右边的值，
d=8返回值8,则最终执行a=8

  • 1
  • 2
  • 3

void运算符

void运算符用于强制指定表达式不会返回值。

a=void(b=5,c=7,d=8); //由于使用了void运算符，所以()中不会右返回值，最终a值为undefined

typeof和instanceof

typeof运算符用户判断变量的数据类型，typeof既可以当作运算符，也可以当作函数使用。
返回类型：undefined、null[Object]、boolean、number、string、object和function

instanceof运算符用于判断变量是否为指定类型的实例，例如arr instanceof Array

语句

JavaScript 脚本语言的基本构成是由控制语句、函数、对象、方法、属性等来实现编程的

JavaScript是一种基于对象的事件驱动的设计语言，所以在编写程序的过程中要遇到各种各样的事件，所以我们要给不同的事件设定一定的规则来控制该流程。

JavaScript常用的流程控制有三种结构：顺序结构、选择结构、循环结构

语句块就是使用花括号{}包含的多个语句，但是语句块不能作为var变量的作用域

异常抛出语句

JavaScript中的所有异常都是Error对象，抛出异常的语法 throw new Error(异常信息提示串) 。在程序中一旦抛出异常则立即终止后续代码的执行，寻找可以处理异常的对应的异常捕捉代码块 catch。如果没有对应的异常捕捉块，异常将传播给浏览器，程序非正常终止。

基础语法结构

try{
语句块；
} catch(e) {
可以通过e.message获取异常的描述信息，可以通过e.name获取异常的名称
} finally {
最终执行的代码块;
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

编码测试

<div class="content">
<script type="text/javascript">
function createErr(){
try{
var obj=new Object();
obj.test();
alert("是否会被执行到");
}catch(e){
alert(e.name);
}finally{
alert("总是被执行的代码");
}
alert("createErr函数结束");
//throw new Error("故意抛出的异常");
}
</script>
<input type="button" value="异常处理" onclick="createErr()" />
</div>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18

js异常和java异常的区别：

  • js只有一个异常类Error，无需在定义异常时声明抛出，所以没有throws语句
  • js是弱类型语言，所以在catch语句中异常类型无需执行
  • js只有一个异常类，所以也只有一个catch语句
  • 获取异常的描述信息是通过异常对象的message属性，不是通过getMessage()方法实现的。

with语句

with是一种简化写法，使用with语句可以避免重复书写对象

with(document){
writeln("Hello world！")； //不用再写作document.writeln
}

  • 1
  • 2
  • 3

流程控制

  • 流程控制：就是程序代码执行顺序
  • 流程控制：通过规定的语句让程序代码有条件的按照一定的方式执行
  • 按照结构编程的原理，任何程序都是由顺序结构、选择结构和循环结构三种结构组成

基本分支语句：if 或者 if/else、switch
循环语句：while、do/while、for、for/in循环、break和continue【注意可以使用语句标号】

分支选择

写法1： if(条件判断){语句块;}
写法2：if(条件判断){语句块1;} else {语句块2；}
写法3：

if(条件判断1){
语句块1;
} else if(条件判断2){
语句块2；
} else if(...){
......
} else {
语句块n;
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
开关分支结构

工作原理：首先设置表达式 （通常是一个变量）。随后表达式的值会与结构中的每个 case 的值做比较。如果存在匹配，则与该 case 关联的代码块会被执行。请使用 break 来阻止代码自动地向下一个case 运行

switch(表达式){
case 常量值1:
代码块1；
break;
case 常量值2：
代码块2：
break；
... ...
default:
语句n;
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
while循环

语法结构 while(条件判断){循环体;} ，反复执行循环体，直到条件不成立为止

阶乘值

<form action="#" name="fm1">
<input type="text" name="num1" value="1"/>
<input type="button" onclick="ff()" value="阶乘"/>
</form>
<div id="div1">用于显示执行结果</div>
<script>
function ff(){
var kk=document.fm1.num1.value; 通过DOM树获取name=num1的输入框中用户输入
的数据
kk=parseInt(kk); 将获取到的数据转换为整型
var bb=kk; 缓存kk值
var res=1; 累乘器用于执行阶乘操作
while(kk>0){ 通过循环计算累乘值
res*=kk--;
}
res=bb+"!="+res; 生成输出的内容串
document.fm1.reset(); 重置form表单，将显示内容回复为原始数据
document.getElementById("div1").innerHTML=res; 查找显示的div1元素，并
再这里显示执行结果
}
</script>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21

do/while循环

do{
循环体;
}while(expression);

  • 1
  • 2
  • 3

从1到输入正整数值的累加和

<form>
<input type="text" onchange="ff(this)" value="1"> 定义值变事件的回调函数，
调用回调函数时会将当前元素对象充当参数传递给函数，则可以省略获取输入元素的过程
</form>
<div id="div1">1=1</div>
<script>
function ff(ele){
var kk=ele.value;
kk=parseInt(kk);
var res=0;
var k=1;
var msg="0";
do{
msg+=("+"+k);
res+=k++;
}while(k<=kk);
document.getElementById("div1").innerHTML=(msg+"="+res);
}
</script>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19

for循环

for(初始化语句; 条件判断语句; 步长处理){
循环体;
}

  • 1
  • 2
  • 3

九九乘法表

<script>
document.writeln("<table width='60%'>");
document.writeln("<caption>九九乘法口诀表</caption>");
for (var k = 1; k <= 9; k++) {
document.writeln("<tr>");
for (var i = 1; i <= k; i++) {
document.write("<td>" + i + "*" + k + "=" + (i * k) + "</td>");
}
for (var i = 1; i <= 9 - k; i++)
document.write("<td>&nbsp;</td>");
document.writeln("</tr>");
}
document.writeln("</table>");
</script>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
for/in循环

for in循环本质上是一种foreach结构，可以遍历数组中的所有元素或者遍历js对象的所有属性

<script>
for (prop in navigator) {
document.write('属性：' + prop + '的值为:' + navigator[prop] +
'<br/>');
}
document.writeln("<hr/>");
var arr = [1, 2, 3, 4, 5, 6];
for (k in arr) { //获取的是索引序号，不是每个具体的元素值
document.write('序号为:' + k + "的值为" + arr[k]+"<br/>");
}
</script>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
break和continue

continue用于终止本次循环，接着开始下一次循环
break用于完全终止循环，开始执行循环后续的代码
简单应用

<script>
for(i=0;i<10;i++){
if(i%2==0) break;
document.write(i,"再也不敢了!","<br>");
}
</script>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

终止标签

outer: 语句标号
for(var i=0; i<5; i++){
for( var k=0; k<5; k++){
document.write('k的值为：'+k);
if(k>=2) break outer; //也允许continue outer;
document.write('i的值为：'+i);
document.write('<br/>');
}
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

函数

JavaScript是一种基于对象的脚本语言，代码复用的单位就是函数，函数可以独立存在，也可以当作一个类使用，同时函数也是一个对象，是Function类的实例

函数定义

函数最大作用就是提供代码复用，将需要重复使用的代码定义为函数，提供方便的复用策略。

定义方法1：命名函数

function 函数名称(形式参数){代码块;}

定义方法2：匿名函数 function(形式参数) {代码块}

var f=function(name){document.write('hello '+name+’!<br/>‘);}


  • 1
  • 2

定义方法3：可以使用Function类定义匿名函数
基础语法 var f=new Function(‘name形式参数名称’,‘document.writeln(“定义的函数
体”);document.writeln(“hello “+name+”!
”);’);

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Gausst松鼠会/article/detail/110849
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号