专业苏州房产网站建设,新建网站网络空间,甘肃住房城乡建设厅网站首页,app开发公司定制小程序一、程序控制语句
JavaScript 提供了 if 、if else 和 switch 3种条件语句#xff0c;条件语句也可以嵌套。
#xff08;一#xff09;、条件语句
1、单向判断 #xff1a; if...
#xff08;1#xff09;概述 if 元素用于在判断该语句是否满足特定条…一、程序控制语句
JavaScript 提供了 if 、if else 和 switch 3种条件语句条件语句也可以嵌套。
一、条件语句
1、单向判断 if...
1概述 if 元素用于在判断该语句是否满足特定条件。如果条件不成立if元素内的语句不会被执行。
2语法格式 if(条件){语句1语句2...}
3举例
运行代码如下 scriptvar a 8;if(a 3){console.log(Ture);}/script
运行结果如下 2、双向判断 if...else...
1概述
用于在判断该语句是否满足特定条件。若“条件”为 ture则执行语句段1否则则执行语句段2.
2、语法格式 if(条件){语句段1}else(条件){语句段2前面条件都不满足时执行;}
3举例
运行代码如下 scriptvar a 8;if(a10){console.log(Ture);}else{console.log(False)}/script
运行结果如下 3、多向判断语句 : if...else if...else if...
1概述
用于在判断该语句是否满足特定条件。如果条件1成立if元素内的语句会被执行如果条件1不成立而条件2成立则执行else if元素内的语句两者均不成立则运行else元素内的语句。
2语法格式
if (条件1) {条件表达式 1 满足 时执行
} else if (条件 2) {条件表达式 1 不满足条件表达式2满足时执行
} else {前面所有条件都不满足时执行
}
3举例
运行代码如下 scriptvar a 8;if(a10){console.log(a10);}else if(a3){console.log(a3)}else{console.log(3a10)}/script
运行结果如下 4、多向判断语句 switch...case...
1概述
分支语句switch根据变量的取值不同采取不同的处理方法。“变量”要用括起来。必须用{ }把case括起来。即使语句段是由多个语句组成的也不能用{ }括起来。
2语法格式
switch (语句) {case 表达式1:语句1;break;case 表达式2:语句2;break;default:语句3;
}
3举例
运行代码如下 var x 8;switch(x){case 1:console.log(x1);break;case 2:console.log(x2);break;default:console.log(x不等于1和2)}
运行结果如下 二、循环语句
在 JavaScript 中提供了多种循环语句有 for、while 和 do while语句还提供了用于跳出循环的 break 语句用于终止当前循环并继续执行下一轮循环的 continue 语句。
1.for 循环
1概述
for实现条件循环当“条件”成立时执行语句段否则跳出循环体循环结束。
2语法格式
for (初始化; 条件; 增量){语句段
}
3举例
运行代码如下 scriptvar a;for(a0;a10;a){console.log(a)}/script
运行结果如下 2.while 循环
1概述
“条件”中应该是关系表达式或逻辑表达式。条件为真时执行循环体中的语句条件表达式为假时跳出循环体循环结束。
2语法格式
while(条件){语句段
}
3举例
运行代码如下 scriptvar b0;while(b8){console.log(b);b;}/script
运行结果如下 3. do...while...循环 1概述 do while语句是while的变体do while语句的循环体至少执行一次而while语句的循环体可以一次也不执行。
2语法格式
do {语句段
}
while (条件)
3举例
运行代码如下 var x1;do{console.log(x);x;}while(x5);
运行结果如下 注while 循环结构 和 for循环结构 可以相互替代但两者各有特点。while 语句适合条件复杂无法预知循环次数的循环for语句适合已知循环次数的循环。
4.break 和 continue 语句
1break语句
break语句的功能是无条件跳出循环结构或switch语句。一般break语句是单独使用的有时也可在其后面加语句标号以表明跳出该标号所指定的循环体然后执行循环体后面的代码。
2continue语句
continue 语句的功能是结束本轮循环跳转到循环的开始处从而开始下一轮循环但不能出循环体可能会卡死
二、函数
一概述
将程序中多次要用到的代码块封装起来就是函数。函数使代码块的重复使用更方便且功能独立便于维护。
二函数的定义
JavaScript 遵循先定义函数后调用函数的规则。函数的定义通常放在HTML文档头中也可以放在其他位置但最好放在文档头这样可以确保先定义后使用。
1.语法格式
function 函数名参数1参数2
{语句...return 表达式//return语句指明被返回的值
}
2.变量的作用域
变量分为全局变量和局部变量。全局变量定义在所有函数之外作用范围是所有函数 局部变量定义在函数之内只对该函数可见对其它函数不可见。
运行代码如下 scriptvar c1; //全局变量即可以作用于所以函数内与可以作用于函数外function calculator(a,b){var d2; //局部变量只作用与函数内return (abc)*d //返回值6}xcalculator(1,1)console.log(计算结果 x);yc*d //函数外无法调用局部变量d控制台报错console.log(计算结果 y);/script
运行结果如下 三函数的使用
1.在程序中调用分为有返回值和无返回值调用
1无返回值的调用
如果函数没有返回值或调用程序不关心函数的返回值可以用下面的格式调用定义的函数。
函数名实参1实参2...;
2有返回值的调用
变量名函数名实参1实参2...;
运行代码如下 scriptfunction calculator(a,b){return ab}console.log(ab calculator(1,2));/script
运行结果如下 2.在按钮或超链接被点击时调用监听点击事件
1在按钮被点击时调用
运行代码如下 scriptfunction calculator(a,b){cab;alert(ab c);return c;}/script!-- 2. 在按钮或超链接被点击时调用监听点击事件 --!-- 2.1 监听按钮点击 --input typesubmit valueab onclickcalculator(1,2) /运行结果如下 2在超链接被点击时调用
使用 a 标记的 onClick 属性调用函数其语法是
a href# onclick函数名参数表文本/a
运行代码如下 scriptfunction calculator(a,b){cab;alert(ab c);return c;}/script!-- 2. 在按钮或超链接被点击时调用监听点击事件 --!-- 2.2 监听超链接点击 --a href# onclickcalculator(3,4)百度一下你就知道/a
运行结果如下 三、对象
一概念
对象object是 JavaScript 中最重要的数据类型是一组“键值对”的集合体。类似Python中的字典。其中键可以为变量名此时称为对象的属性和函数名此时称为对象的方法。
二对象的定义与使用
运行代码如下 script//对象的定义var person {firstName:初音,lastName:未来,age:16,egeColor:绿色,getName: function(){//注意this对象的使用只向自身//没有this直接用属性名控制台会报错allName this.firstName this.lastName;return allName},cal: function(a,b){return ab;}}//使用对象的属性console.log(person.egeColor);//使用对象的方法console.log(person.getName()); console.log(person.cal(1,2)); /script
运行结果如下 注一个对象在被引用前必须已经存在。
三内置对象
利用JS内置的类创建对象实例化并使用对象的属性和方法。
1.Array 类
1定义一个数组 var persons new Array(Tom,Mike,John);var persons [Tom,Mike,John];
2length方法返回数组的元素个数数组长度 //1. length属性返回数组的元素个数数组长度var persons new Array(Tom,Mike,John);console.log(persons.length); // 3
3push方法在末尾添加元素方法 //2. push方法用于在数组末端添加一个或多个元素并返回//添加的新元素后的数组长度。注意该方法会改变原数组var persons new Array(Tom,Mike,John);len persons.push(Amy);console.log(新数组为 persons -长度为 len); //新数组为Tom,Mike,John,Amy-长度为4
4pop方法移除元素方法最后一个元素 //3. pop方法用于删除数组最后一个元素并返回被删除的那个元素。// 注意该方法会改变原数组var persons new Array(Tom,Mike,John);p persons.pop(Tom); //无法指定特定元素只删除最后一个元素console.log(新数组为 persons -被移除的元素为 p); //新数组为Tom,Mike-被移除的元素为John
注无法指定特定元素只删除最后一个元素
5reverse方法颠倒数组 //4. reverse方法用于颠倒排列数组元素返回改变后的数组。// 注意该方法会改变原数组var persons new Array(Tom,Mike,John);p persons.reverse();console.log(p); //[John,Mike,Tom]
6indexOf 方法获取数组中某个元素的索引 //5. indexOf方法返回给定元素在数组中第一次出现的位置若未出现返回-1var persons new Array(Tom,Mike,Mike);console.log(persons.indexOf(Mike)); // 1console.log(persons.indexOf(Amy)); //-1
注若未出现该元素则返回-1
2.String 类
1定义一个字符串 var strhello
2length方法返回数组的元素个数数组长度 //1. length属性返回字符串的长度var s hello;console.log(s.length); // 5
3charAt方法返回指定索引的字符 //2. charAt方法返回指定位置的字符var s new String(hello);console.log(s.charAt(1)); // econsole.log(s.charAt(s.length - 1)); // oconsole.log(s.charAt(8)); // 索引超出返回空字符串
3concat方法用于顺序连接多个字符串返回一个新字符串不改变原字符串 //3. concat方法用于顺序连接多个字符串返回一个新字符串不改变原字符串var s1 new String(hello);var s2 new String( world);console.log(s1.concat(s2)); // hello worldconsole.log(s1.concat(s2), hi , China); // hello world hi China
4indexOf 方法获取数组中某个元素的索引 //4. indexOf 方法用于确定一个字符串在另一个字符串中第一次出现的位置//返回结果是匹配开始的位置。如果返回 -1表示不匹配。var s new String(hello world); console.log(s.indexOf(world)); //6console.log(s.indexOf(hi)); //-1
5split方法按照指定规则分割字符串 //5. split方法按照给定规则分割字符串返回一个由分割出来的子字符串组成的数组var s new String(hello world hi China);console.log(s.split( )); //按照空格分割[hello,world,hi,China]
3.math 类
1abs方法返回参数绝对值 //1. abs方法返回参数绝对值console.log(Math.abs(-1)); //输出1console.log(Math.abs(3)); //输出3
2max 和 min 方法返回参数的最大值和最小值 //2. max和min方法返回参数的最大值和最小值console.log(Math.max(-1,2,0)); //输出2console.log(Math.min(-1,2,-3)); //输出-3
3floor 和 ceil 方法对应参数向下取整和向上取整 //3. floor和ceil对应参数向下取整和向上取整console.log(Math.floor(3.3)); //输出3console.log(Math.floor(-1.1)); //输出-2console.log(Math.ceil(3.3)); //输出4console.log(Math.ceil(-3.3)); //输出-3
4random方法返回0,1之间的一个随机数 //4. random方法返回0,1之间的一个随机数var randomNumber Math.random(); // 返回一个介于0和1之间的随机小数console.log(randomNumber); // 输出类似于3.3456789
5 getRandomInRange 方法随机输出任意范围的某个数直接当成固定函数使用 //5. getRandomInRange方法随机输出任意范围的某个数直接当成固定函数使用function getRandomInRange(min, max) { return Math.random() * (max - min) min; } console.log(getRandomInRange(1, 20)); //随机输出1到20的某个数
6truncateDecimalPlaces方法保留小数点指定位数直接当成固定函数使用 //6. truncateDecimalPlaces方法保留小数点指定位数直接当成固定函数使用function truncateDecimalPlaces(num, decimalPlaces) { let factor Math.pow(10, decimalPlaces); return Math.floor(num * factor) / factor; } console.log(truncateDecimalPlaces(3.14159, 2)); // 输出 3.14
4.Date 类
1创建一个新的 Date 对象表示当前日期和时间 //创建一个新的 Date 对象表示当前日期和时间const now new Date();
2获取年份四位数的年份比如2024 //获取年份四位数的年份比如2024const year now.getFullYear();
3获取月份从0开始所以0表示1月11表示12月需要加1才能得到实际月份 //获取月份从0开始所以0表示1月11表示12月需要加1才能得到实际月份const month now.getMonth() 1; 4获取日期月份中的哪一天 //获取日期月份中的哪一天const day now.getDay();
5获取小时24小时制 //获取小时24小时制const hours now.getHours();
6获取分钟 //获取分钟const minutes now.getMinutes();
7获取秒 //获取秒const seconds now.getSeconds();
8输出当前未格式化的日期和时间 const now new Date();const year now.getFullYear();const month now.getMonth() 1;const day now.getDay();const hours now.getHours();const minutes now.getMinutes();const seconds now.getSeconds();//输出当前未格式化的日期和时间console.log(当前日期和时间: ${year}-${month}-${day} ${hours}:${minutes}:${seconds});
运行结果如下 9输出当前格式化的日期和时间 const now new Date();const year now.getFullYear();const month now.getMonth() 1;const day now.getDay();const hours now.getHours();const minutes now.getMinutes();const seconds now.getSeconds();// 格式化日期和时间字符串 // 如果month小于10它会在month前面插入一个0否则插入一个空字符串。// 这样做的目的是确保月份始终是两位数例如1月变为01。// 同理${day 10 ? 0 : }${day}确保日期也是两位数。const formattedDate ${year}-${month 10 ? 0 : }${month}-${day 10 ? 0 : }${day}; const formattedTime ${hours 10 ? 0 : }${hours}:${minutes 10 ? 0 : }${minutes}:${seconds 10 ? 0 : }${seconds};// 输出当前格式化后的日期和时间 console.log(当前日期和时间: ${formattedDate} ${formattedTime});
运行结果如下 要理解其中的内容要自己敲打运行代码才能加深理解
