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):文档对象模型 ...