JavaScript二 Li.067

JavaScript 面向对象, 类的定义和使用 定义格式 class 类名{ constructor(变量列表){ 变量赋值; } 方法名(参数列表){ 方法体; return 返回值; } } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>类的定义和使用</title> </head> <body> </body> <script> class Person{ constructor(name,age) { this.name = name this.age = age } // show method show(){ document.write(this.name+" "+this.age+"<br/>"); } eat(){ document.write("吃饭<br>"); } } let p = new Person("张三",23) p.show() p.eat() </script> </html> 字面量定义类和使用 let 对象名 = { 变量名 : 变量值, 变量名 : 变量值, ... 方法名 : function(参数列表){ 方法体; return 返回值; } ... }; 使用格式 对象名.变量名 对象名.方法名(); <script> let person = { name : "张三", age : 23, hobby : ["听课","学习"], show : function (){ document.write(this.name+" "+this.age+"<br>") }, eat : function (){ document.write("吃饭") } } document.write(person.name+person.age+person.hobby[0]+","+person.hobby[1]+"<br/>") person.eat() </script> 继承 继承: 让类与类产生子父类的关系,子类可以使用父类有权限的成员 继承关键字: extends 顶级父类: Object <script> class Person{ constructor(name,age) { this.name = name this.age = age } // show method show(){ document.write(this.name+" "+this.age+"<br/>"); } } class Worker extends Person{ constructor(name,age,salary) { super(name, age); this.salary = salary } show(){ document.write(this.name+this.age+this.salary) } } var w = new Worker("张三",23,10000) w.show() </script JavaScript 内置对象 Number 方法名 说明 parseFloat() 将传入的字符串浮点数转为浮点数 parseInt() 将传入的字符串整数转为整数 <script> // 1. parseFloat() 将传入的字符串浮点数转为浮点数 document.write(Number.parseFloat("2.333")) document.write("<br>") document.write(Number.parseFloat("2.333")+2) document.write("<br>") // 2. parseInt() 将传入的字符串整数转为整数 document.write(Number.parseInt("100")) document.write("<br>") document.write(Number.parseInt("100")+20) document.write("<br>") document.write(Number.parseInt("1100ab")) document.write("<br>") </script> Math 方法名 说明 ceil(x) 向上取整 floor(x) 向下取整 round(x) 把数四舍五入为最接近的整数 random() 随机数,返回的是0.0-1.0之间范围(含头不含尾) pow(x,y) 幂运算的x的y次方 <script> // ceil(x) 向上取整 document.write(Math.ceil(4.4)) document.write("<br>") // floor(x) 向下取整 document.write(Math.floor(4.4)) document.write("<br>") // round(x) 把数四舍五入为最接近的整数 document.write(Math.round(4.1)) document.write("<br>") document.write(Math.round(4.6)) document.write("<br>") // random() 随机数,返回的是0.0-1.0之间范围(含头不含尾) document.write(Math.random()) document.write("<br>") // pow(x,y) 幂运算的x的y次方 document.write(Math.pow(2,3)) </script> Date 构造方法 说明 Date() 根据当前时间创建对象 Date(value) 根据指定毫秒值创建对象 Date(year,month,[day,hours,minutes,seconds,milliseconds]) 根据指定字段你出去对象(月份是0-11) 成员方法 说明 getFullYear() 获取年份 getMonth() 获取月份 getDate() 获取天数 getHours() 获取小时 getMinutes() 获取分钟 getSeconds() 获取秒数 getTime() 返回距1970年1月1日至今的毫秒数 toLocaleString() 返回本地日期格式的字符串 <script> // Date() 根据当前时间创建对象 let d1 = new Date() document.write(d1) document.write("<br>") // Date(value) 根据指定毫秒值创建对象 let d2 = new Date(20000) document.write(d2) document.write("<br>") // Date(year,month,[day,hours,minutes,seconds,milliseconds]) 根据指定字段你出去对象(月份是0-11) let d3 = new Date(2022,9,3,4,5,6) document.write(d3) document.write("<br>") // getFullYear() 获取年份 document.write(d3.getFullYear()) document.write("<br>") // getMonth() 获取月份 document.write(d3.getMonth()) document.write("<br>") // getDate() 获取天数 document.write(d3.getDate()) document.write("<br>") // getHours() 获取小时 document.write(d3.getHours()) document.write("<br>") // getMinutes() 获取分钟 document.write(d3.getMinutes()) document.write("<br>") // getSeconds() 获取秒数 document.write(d3.getSeconds()) document.write("<br>") // getTime() 返回距1970年1月1日至今的毫秒数 document.write(d3.getTime()) document.write("<br>") // toLocaleString() 返回本地日期格式的字符串 document.write(d3.toLocaleString()) document.write("<br>") </script String 内置对象 构造方法 说明 String(value) 根据指定字符串创建对象 let s="字符串" 直接赋值 成员方法 说明 length属性 获取字符串长度 charAt(index) 获取指定索引处的字符 indexOf(value) 获取指定字符串出现的索引位置,换不到为-1 substring(start,end) 根据指定索引范围截取字符串(含头不含尾) split(value) 根据指定规则切割字符串,返回数组 replace(old,new) 使用新字符串替换老字符串 <script> // String(value) 根据指定字符串创建对象 let s1 = new String("Hello") document.write(s1) document.write("<br>") // let s="字符串" 直接赋值 let s2 = "World" document.write(s2) document.write("<br>") // 成员方法 说明 // length属性 获取字符串长度 let s3 = "What is you name!" document.write(s3.length) document.write("<br>") // charAt(index) 获取指定索引处的字符 document.write(s3.charAt(10)) document.write("<br>") // indexOf(value) 获取指定字符串出现的索引位置,换不到为-1 document.write(s3.indexOf("a")) document.write("<br>") // substring(start,end) 根据指定索引范围截取字符串(含头不含尾) document.write(s3.substring(0,4)) document.write("<br>") // split(value) 根据指定规则切割字符串,返回数组 let s5arr = s3.split("\\s") for(ss of s5arr){ document.write(ss) } document.write("<br>") // replace(old,new) 使用新字符串替换老字符串 let s6 = "What is youuuu name!" document.write(s6.replace("uu","s")) document.write("<br>") </script> RegExp ...

November 19, 2021&nbsp;·&nbsp;5 分钟&nbsp;·&nbsp;Lizicai

JavaScript一 Li.066

JavaScript JS的2种引入方式 直接在页面写 在页面引入 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>快速入门</title> </head> <body> <button id="btn">点我呀</button> <!--引入js的方式一: 内部方式--> <script type="text/javascript"> document.getElementById("btn").onclick = function (){ alert("点我干嘛") } </script> <script src="js/my.js"></script> </body> </html> 输入输出语句 输入框 prompt(“提示内容”); 弹出警告框 alert(“提示内容”); 控制台输出 console.log(“显示内容”); 页面内容输出 document.write(“显示内容”); <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>输入输出语句</title> </head> <body> <script> /* * 输入框 * prompt("提示内容"); * 弹出警告框 * alert("提示内容"); * 控制台输出 * console.log("显示内容"); * 页面内容输出 * document.write("显示内容"); */ prompt("请输入数据") alert("hello") console.log("打印logo") document.write("DaDaDa...") document.write("<br/>") document.write("DaDa") document.write("<h1>Hello</h1>") </script> </body> </html> 变量和常量 JavaScrip属于弱类型语言, 定义变量时不区分具体的数据类型 定义局部变量 let 变量名 = 值 定义全局变量 变量名 = 值; 定义常量 const 常量名= 值 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>变量和常量</title> </head> <body> <script> // 1. 定义局部变量 let name = "张三"; let age = 23; document.write(name+", "+ age) document.write("<br/>") // 2. 定义全局变量 { let l1 = "aa"; l2 = "bb"; } // document.writeln(l1) document.writeln(l2) document.write("<br/>") // 3. 定义常量 const PI = 3.1415926 // PI = 3.15 document.write(PI) </script> </body> </html> 原始数据类型 数据类型 说明 boolean 布尔类型,true或false null 声明null值的声明关键字 undefined 代表变量未定义 number 整数或浮点数 string 字符串 bigint 大整数,例如let num=10n; typeof用于判断变量的数据类型 let age=18; document.write(typeof(age)); //number <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>typeof方法</title> </head> <body> <script> let l1 = true document.write(typeof (l1)) document.write("<br/>") let l2 = null document.write(typeof (l2)) document.write("<br/>") let l3 document.write(typeof (l3)) document.write("<br/>") let l4 = 10 document.write(typeof (l4)) document.write("<br/>") let l5 = "hello" document.write(typeof (l5)) document.write("<br/>") let l6 = 100n document.write(typeof (l6)) document.write("<br/>") </script> </body> </html> 算数运算符 算术运算符 运算符 说明 + 加法运算 - 减法运算 * 乘法运算 / 除法运算 % 取余数 ++ 自增 -- 自减 赋值运算符 运算符 说明 = 将箱封号右边的值赋值给箱封号左边的变量 += 想回后赋值 -= 相减后赋值 *= 相乘后赋值 /= 相除后赋值 %= 取余数后赋值 比较运算符 运算符 说明 == 判断值是否相等 === 判断数据类型和值是否相等 > 大于 >= 大于等于 < 小于 <= 小于等于 != 不等于 逻辑运算符 运算符 说明 && 逻辑与,并且 || 逻辑或,或者 ! 取反 三元运算符 三元运算符格式 (比较表达式)?表达式1:表达式2; 执行流程 如果比较表达为true, 则取表达式1 如果比较表达为false, 则取表达式2 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>运算符</title> </head> <body> <script> let num = "10" // 和字符之间的+号, 拼接, 其他符号则把字符转成number运算 document.write(num + 5) document.write("<br/>") document.write(num + "5") document.write("<br/>") document.write(num - 5) document.write("<br/>") document.write(num * 5) document.write("<br/>") let num2 = 10 document.write(num == num2) document.write("<br/>") document.write(num === num2) document.write("<br/>") </script> </body> </html> JavaScrip的 流程控制和循环语句 if switch for while <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>流程控制和循环语句</title> </head> <body> <script> // if 语句 let month = 10 if(month >= 3 && month <= 5){ document.write("春季") } else if( month >= 6 && month <= 6){ document.write("夏季") } else if( month >= 9 && month <= 11) { document.write("秋季") } else if( month == 12 || month == 1 || month == 2) { document.write("冬季") } else { document.write("月份有误") } document.write("<br/>") // switch 语句 switch (month){ case 3: case 4: case 5: document.write("春季") break case 6: case 7: case 8: document.write("夏季") break case 9: case 10: case 11: document.write("秋季") break case 12: case 1: case 2: document.write("冬季") break default: document.write("月份有误") } document.write("<br/>") // for for(let i=1;i<=5;i++){ document.write(i+"<br/>") } // while let n =6 while (n <= 10){ document.write(n+"<br/>") n++ } </script> </body> </html> 数组 数组的使用Java中的数据基本一致, 但是在JavaScript中的数据更加灵活, 数据类型和长度都没有限制 定义格式 let 数组名 = [元素1,元素2,…]; 索引范围 从0开始, 最大到数组长度-1 数组长度 数组名.length 数组高级运算符… 数组复制 合并数组 字符串转数组 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>数组</title> </head> <body> <script type="text/javascript"> // 定义数组 let arr = [10,20,30] for(let i=0; i < arr.length; i++){ document.write(arr[i]) document.write("<br/>") } document.write("=======================<br/>") arr[3] = 40 for(let i=0; i < arr.length; i++){ document.write(arr[i]) document.write("<br/>") } document.write("=======================<br/>") // 数组高级运算符: ... // 复制数组 let arr2 = [...arr] for(let i=0; i < arr2.length; i++){ document.write(arr2[i]) document.write("<br/>") } document.write("=======================<br/>") // 合并数据 let arr3 = [40,50,60]; let arr4 = [...arr2,...arr3] for(let i=0; i < arr4.length; i++){ document.write(arr4[i]) document.write("<br/>") } for(var i of arr4){ document.write(i) document.write("<br/>") } document.write("=======================<br/>") // 字符串转成数组 let arr5 = [..."heima"] for(var i of arr5){ document.write(i) document.write("<br/>") } </script> </body> </html> 函数 函数类似于java中的方法, 可以将一些代码进行抽取, 达到复用的效果 定义格式 function 方法名(参数列表){方法体 return 返回值} 有返回值, 可以写 无返回值, 则不需要写 可变参数 function 方法名(…参数名){ 方法体; return 返回值 } 匿名函数 function(参数列表){ 方法体; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>函数</title> </head> <body> <script > // 无参无返回值的函数 function println(){ document.write("Hello JS"+"<br/>") } println() // 有参 有返回值方法 function getSum(num1,num2){ return num1 + num2; } let sum = getSum(10,20); document.write(sum+"<br/>") // 可变参数, 对n个数字进行求和 function getSum(...params){ let ss = 0 for(let i=0; i <params.length; i++){ ss+=params[i] } return ss; } let sum2 = getSum(10,20, 20) document.write(sum2) // 匿名函数 let fun = function(){ document.write("hello") } fun() </script> </body> </html> DOM DOM(Document Object Model):文档对象模型 ...

November 14, 2021&nbsp;·&nbsp;7 分钟&nbsp;·&nbsp;Lizicai