建设银行网站诚聘英才,招聘网站建设规划书,那有网页设计培训机构,做同款的网站1、JS流程控制语句
JS与Java一样#xff0c;也有三个流程控制语句#xff1a; 顺序结构 选择结构 循环结构
1.1 选择结构
1.1.1 if结构
script typetext/javascriptif (条件表达式) {代码块;} else if(条件表达式){代码块;} else {代码块;}
/scr…1、JS流程控制语句
JS与Java一样也有三个流程控制语句 顺序结构 选择结构 循环结构
1.1 选择结构
1.1.1 if结构
script typetext/javascriptif (条件表达式) {代码块;} else if(条件表达式){代码块;} else {代码块;}
/script
注意事项JS的条件语句和Java语法基本一样,但是对数据类型的真假判断有些区别。JS中对各种数据类型作为布尔值有以下特点 类型 用法 boolean true为真、false为假 number 非0为true string 除了空字符串()其他都是true nullundefined 都是false 对象 所有对象都为true
总结 无意义的数据都为false 反之都为true
!DOCTYPE html
htmlheadmeta charsetutf-8title选择结构--if/title/headbody/bodyscriptlet age 20;// if单分支if(age 18){console.log(你已成年);}// if双分支if (age 18) {console.log(你已成年);} else{console.log(你未成年);}// if多分支let score Math.floor(Math.random()*100);console.log(score);if(score 90){console.log(成绩优秀);}else if(score 70){console.log(成绩良好);}else if(score 60){console.log(成绩及格);}else{console.log(成绩不及格);}/script
/html 1.1.2 switch结构
!DOCTYPE html
htmlheadmeta charsetutf-8title选择结构--switch/title/headbodyscriptlet month 1;switch (month){case 1:case 2:case 3:console.log(春天);break;case 4:case 5:case 6:console.log(夏天);break;case 7:case 8:case 9:console.log(秋天);break;case 10:case 11:case 12:console.log(冬天);break;default:console.log(无此月份)break;}/script/body
/html 在java中switch语句可以接受的数据类型 byte int shor char,枚举(1.5) ,String(1.7)
在JS中,switch语句可以接受任意的原始数据类型
1.2 循环结构
1.2.1 for循环
普通for循环增强for循环 for-of循环索引for循环 for-in循环
!DOCTYPE html
htmlheadmeta charsetutf-8title循环结构--for循环/title/headbodyscript// for循环console.log(普通for循环);for (var i 0; i 5; i) {console.log(i);}var arr [张三,李四,王五];// for-of循环console.log(for-of循环);for (let s of arr) {console.log(s);}// for-in循环console.log(for-in循环);for (let a in arr) {console.log(a : arr[a]);}/script/body
/html !DOCTYPE html
htmlheadmeta charsetutf-8titlefor-of与for-in循环/title/headbodyscriptvar person {name:张三,age:20,sex:男}// for-in循环console.log(for-in循环);for (let key in person) {console.log(key : person[key]);}// for-of循环console.log(for-of循环);for (let s of person) {console.log(s);}/script/body
/html 1. for-in可以遍历对象,for-of不能遍历对象
2. for-in遍历出数组中的索引,for-of遍历出数组中的元素
1.2.2 while循环
!DOCTYPE html
htmlheadmeta charsetutf-8titlewhile循环/title/headbodyscriptvar num 10;while(num 0){console.log(num);num--;}/script/body
/html 1.2.3 do-while循环
!DOCTYPE html
htmlheadmeta charsetutf-8titledo-while循环/title/headbodyscriptvar num 10;do{console.log(num);num--}while(num 0)/script/body
/html 1.2.4 循环总结 while 和Java一样 do-while 和Java一样 重点掌握: 普通for 与 Java一样 for-in遍历出数组的索引 遍历出对象中的属性名key for-of遍历数组中的元素 2、JS函数(方法)
JS函数是执行特定功能的代码块也可以称为JS方法。与Java中的方法的功能是一样的。
2.1 语法
function 函数名(参数列表){函数体;[return 返回值;]
}
2.2 函数定义
!DOCTYPE html
htmlheadmeta charsetutf-8title函数的定义/title/headbodyscript// 无参无返回值function jiujiu(){for (var i 1; i 9; i) {for (var j 1; j i; j) {document.write(j * i i*j);document.write(emsp;)if(i * j 10){document.write(nbsp;nbsp;)}}document.write(br);}}// 无参有返回值function jiecheng(){var mul 1;var sum 0;for (var i 1; i 10; i){mul * i;sum mul;}return sum;}// 有参无返回值function jiecheng1(a){var mul 1;var sum 0;for (var i 1; i a; i){mul * i;sum mul;}console.log(sum);}// 有参有返回值function getSum(a,b){return a b;}// 函数调用jiujiu();console.log(jiecheng());jiecheng1(10);console.log(getSum(10,20));/script/body
/html !DOCTYPE html
htmlheadmeta charsetutf-8title函数的定义/title/headbodyscriptvar demo1 new Function(a,b, console.log(ab));demo1(4,4); /* 匿名函数: 了解 */var demo2 function(){console.log(77);}demo2();// ES6写法// 无参有返回值var fun1 () Hello;console.log(fun1())// 有参无返回值let fun2 args {console.log(args);}fun2(1024);// 有参有返回值let fun3 (arg1,arg2) arg1arg2// 等价于let fun4 (arg1,arg2) {return arg1arg2}console.log(fun3(10,20))console.log(fun4(10,20))/script/body
/html 2.3 JS函数注意事项
方法定义时形参的类型不用写,返回值类型可写可不写如果定义名称相同的方法会被覆盖js中没有方法的重载的概念在JS中方法的调用只与方法的名称有关和参数列表无关在方法声明中有一个隐藏的内置对象数组arguments,封装所有的实际参数JS函数中也可以有匿名函数匿名函数经常会跟事件进行结合着使用
3、JS常用内置对象
3.1 Number对象
!DOCTYPE html
htmlheadmeta charsetutf-8titleNumber对象/title/headbodyscript// number对象属性var max Number.MAX_VALUE;console.log(max);var min Number.MIN_VALUE;console.log(min)// number对象方法// toString() 将数字作为字符串返回。var num 10086;console.log(typeof(toString(num)));// valueOf() 以数字形式返回数字。var num 12345;console.log(typeof(num.valueOf()));/script/body
/html 3.2 String对象
3.2.1 创建对象
有三种方式: 单引号() 、双引号() 、反引号()
!DOCTYPE html
htmlheadmeta charsetutf-8titleString对象/title/headbodyscript// 字符串对象创建//双引号字符串 let s1 双引号字符串; //单引号 let s2 单引号字符串; //反引号字符又叫做字符串模板 ,模板中可以使用${}来进行插值.let s3 反引号字符串;let n 3547; let s5 你的验证码是${n};console.log(s5);//你的验证码是3547// 字符串属性let str hello world;console.log(str.length)/script/body
/html 3.2.2 常用方法 方法 说明 substring() 提取字符串中两个指定的索引号之间的字符 toLowerCase() 把字符串转换为小写。 toUpperCase() 把字符串转换为大写。 replace() 替换与正则表达式匹配的子串。 charAt() 返回在指定位置的字符。 trim() 移除字符串首尾空白 split(delimiter) 把字符串分割为子字符串数组;分割为数组
!DOCTYPE html
htmlheadmeta charsetutf-8titleString对象方法/title/headbodyscriptlet str Hello World;// length 是string对象属性console.log(str.length);// indexOf() 返回字符串中指定文本首次出现的索引位置// lastIndexOf() 返回指定文本在字符串中最后一次出现的索引// 如果未找到文本 indexOf() 和 lastIndexOf() 均返回 -1。console.log(str.indexOf(o));console.log(str.lastIndexOf(o));console.log(str.indexOf(hello));// 提取部分字符串// slice(start, end) 提取字符串的某个部分并在新字符串中返回被提取的部分// 如果省略第二个参数则该方法将裁剪字符串的剩余部分// 如果参数为负则从字符串的结尾开始计数。// substring(start, end) 类似于 slice()。// 不同之处在于 substring() 无法接受负的索引。// substr(start, length) substr() 类似于 slice()。// 不同之处在于第二个参数规定被提取部分的长度。console.log(str.slice(0,5));console.log(str.slice(6));console.log(str.slice(-1));console.log(str.substring(0,5));console.log(str.substring(6));console.log(str.substr(0,5));console.log(str.substr(1,10));// 替换字符串内容// replace() 用另一个值替换在字符串中指定的值它返回的是新字符串// replace() 只替换首个匹配,replace() 对大小写敏感。let s str.replace(Hello,hello);console.log(s);// toUpperCase() 把字符串转换为大写console.log(str.toUpperCase());// toLowerCase() 把字符串转换为小写console.log(str.toLowerCase());let str1 JavaScript;// concat() 连接两个或多个字符串console.log(str.concat(str1));let str2 1254 152 ;// trim() 方法删除字符串两端的空白符console.log(str2.trim());// charAt() 返回字符串中指定下标位置的字符串console.log(str.charAt(0));// split() 将字符串转换为数组console.log(str.split( ));/script/body
/html 3.3 Math对象
!DOCTYPE html
htmlheadmeta charsetutf-8titleMath对象/title/headbodyscript// Math对象属性console.log(Math.PI);console.log(Math.E);// Math对象方法// 取绝对值console.log(Math.abs(-12));// 向上取整console.log(Math.ceil(12.1));// 向下取整console.log(Math.floor(12.9));// 取最大值console.log(Math.max(10,20,30,40,50,100));// 取最小值console.log(Math.min(10,20,30,40,50,100));// x的y次幂console.log(Math.pow(2,3));// 取0-1的随机数console.log(Math.random());// 四舍五入console.log(Math.round(12.5));console.log(Math.round(12.4));/script/body
/html 3.4 Array对象
1. JS中数组元素的类型可变的。
2. JS中数组长度可变的。
!DOCTYPE html
htmlheadmeta charsetutf-8title数组对象Array/title/headbodyscript// 创建数组对象let arr1 new Array();let arr2 new Array(3);let arr3 [张三,李四,王五];// 数组的属性console.log(arr3.length);// 数组的方法// toString() 把数组转成字符串console.log(arr3.toString())// pop() 删除数组最后一个元素并返回该元素// push() 在数组后追加一个元素并返回数组长度console.log(arr3.pop());console.log(arr3)console.log(arr3.push(111));console.log(arr3)// shift() 删除首个数组元素并返回该元素console.log(arr3.shift());console.log(arr3)// splice(startIndex,len) 从startIndex开始删删除len个元素 arr3.splice(0,2); console.log(arr3);// concat() 合并数组let arr4 [张三,李四,王五];let arr5 [11,88,33,44,55];let arr6 arr4.concat(arr5);console.log(arr6);// 数组排序let arr7 [abc,cdf,frv,adf];console.log(arr7.sort());console.log(arr5.sort(function(a,b){return a-b}));// 数组遍历for (var i 0; i arr6.length; i) {document.write(arr6[i]);document.write(,);}document.write(br/);for (let s of arr6) {document.write(s);document.write(,);}document.write(br/);for (let a in arr6) {document.write(arr6[a]);document.write(,);}document.write(br/);/script/body
/html 3.5 Date对象
!DOCTYPE html
htmlheadmeta charsetutf-8titleDate对象/title/headbodyscript// 创建日期对象let date new Date();console.log(date);// 获取年console.log(date.getFullYear());// 获取月console.log(date.getMonth() 1);// 获取日console.log(date.getDate());// 获取星期console.log(date.getDay());// 获取时console.log(date.getHours());// 获取分console.log(date.getMinutes());// 获取秒console.log(date.getSeconds());// 获取当前的日期字符串console.log(date.toLocaleDateString());// 获取当前的时间字符串console.log(date.toLocaleTimeString());// 获取当前的日期时间字符串console.log(date.toLocaleString());/script/body
/html 案例数字时钟
!DOCTYPE html
htmlheadmeta charsetutf-8title数字时钟/title/headbodyp idp1/pdiv iddiv1/divscriptsetInterval(function(){let date new Date();document.getElementById(p1).innerHTML date.toLocaleString();},1000);/scriptscriptsetInterval(() {let date1 new Date();document.getElementById(div1).innerHTML date1.toLocaleString();},1000);/script/body
/html
3.6 RegExp对象
!DOCTYPE html
htmlheadmeta charsetutf-8title正则对象--RegExp/title/headbodyscript// 创建正则表达式对象// 方式一:let reg1 new RegExp(^[a-zA-Z]{6,9}$);// 正则匹配测试console.log(reg1.test(hellojava)); // true// 方式二:let reg2 /^[a-zA-Z]{6,9}$/;console.log(reg2.test(helloworld)); // false/*** 正则表达式详解* [] :指定一个字符位置上出现的字符的范围 [abc] 该字符位置出现 a 或 b 或 c* () :指定一个单词整体 * (abc|bcd|ddd) 这是该位置出现abc 或 bcd 或 ddd 字符串整体,非单个字符* * 元字符* . : 匹配换行和结束符的任意一个字符* \w : 表示匹配任意一个字母、数字或下划线 [_a-zA-Z0-9]* \d : 任意一个数字* ^ : 开始* $ : 结束* * 量词* : 最少出现一次 等同{1,}* * : 0个以上 {0,}* ? : 0个或者1个 {0,1}* * {n} : 出现n次* {n,} : 最少出现n次* {n,m} : 最少出现n次,最多出现m次**//*** /^[a-z]{6,9}$/i 表示忽略大小写* /^[a-z]{6,9}$/g 执行全局匹配而不是在第一个匹配后停止**///字母开头的,其它为任意字符,长度6~8的字符串let reg3 /^[a-zA-Z].{5,7}$/; console.log(reg3.test(q1wq#%));// \w的使用reg3 /^[\w]{2,3}$/;console.log(reg3.test(_1_));//检测字符串是否符合当前的正则规则let reg4 /^[a-zA-Z][\w]$/;console.log(reg4.test(a112qwe312));/script/body
/html
