js_入门
js
-
js放入网页的方式
1、内联使用：放入标签里面
2、内部使用:多数放在body里面
3、使用外部js
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- <script> alert("hi, es"); </script> --> <!-- <script src="./jsDemo1.js"></script> --> </head> <body> <!-- 讲解js放入网页的方式 --> <!-- 1、内联使用：放入标签里面 --> <!-- <a href="给的是地址，就是跳转页面"></a> --> <!-- <a href="javascript:执行js代码，内联使用"></a> --> <!-- alert(弹出内容):函数，BOM对象里面一个函数，警告框， --> <!-- <a href="javascript:alert('欢迎使用js')">点击</a> --> <!-- 2、内部使用:多数放在body里面 --> <!-- <script type="text/javascript"> alert("hello,js"); </script> --> <!-- 3、使用外部js --> <!-- <script src="./jsDemo1.js"></script> --> <!-- 引用js代码的script标签里面不能再写js代码 --> </body> -
在js中声明变量
声明变量的关键字：
var:声明函数级别（在方法里面声明局部变量）
let:声明块级级别（在语句中声明变量）
const：声明常量的<body> <!-- 讲解在js中声明变量 --> <!-- 在js中声明变量 声明变量的关键字： var:声明函数级别（在方法里面声明局部变量） let:声明块级级别（在语句中声明变量） const：声明常量的 --> <script> // 声明一个变量 var a = 1; // 声明一个a变量，里面放入整数 var a = 1.5; var a = "abc"; var a = 'd'; var a = true; let b = "老王,掉了啥..."; b = 23; const NUM = 10; </script> </body> -
js的三种打印方式
1、alert():弹出
2、通过document.write()向页面写入
3、通过浏览器的控制台
<body> <!-- 讲解js的三种打印方式 --> <script> //1、alert():弹出 // var a = 1; // alert("a = " + a); // var a = true; // alert("a = " + a); // a = 1.5; // alert("a = " + a); // a = "老王吧"; // alert("a = " + a); // 2、通过document.write()向页面写入 let a = false; // document.write(a); // document.write("<br />"); // a = "去百度"; // document.write("<a href= 'https://www.baidu.com'>" + a + "</a>"); // document.writeln(a) // let b = 3.1415926 // document.writeln(b) // 3、通过浏览器的控制台 console.log(a); console.log("dsgfdg"); </script> </body> -
js中的原生数据类型
number：数字（数值）类型
boolean:布尔，true false
string:字符串
null:object类型对象类型
undefined:未定义，变量未赋值
Infinity:无穷大
NaN:非数字注意：判断变量的类型 typeof 或 typeof()
<body> <script> // var a = 3.14; // alert("a = " + a); // document.write("a") // console.log(a); // console.debug(a); // console.error(a); // console.info(a); // console.log(b); // js中的原生数据类型：number：数字（数值）类型，boolean:布尔，true false // string:字符串，null:object类型对象类型，undefined:未定义，变量未赋值 // Infinity:无穷大 // NaN:非数字 var a = 1; // number var b = true; // boolean var c = "abc"; // string var d = 'abc'; // var e = null; // object var f; // undefined console.log(1 / 0); // Infinity console.log("abc" / 2); // NaN // 判断变量的类型 typeof 或 typeof() console.log(typeof a); // 查看a变量的数据类型 console.log(typeof b); // 查看b变量的数据类型 console.log(typeof c); // 查看c变量的数据类型 console.log(typeof d); // 查看d变量的数据类型 console.log(typeof e); // 查看e变量的数据类型 console.log(typeof f); // 查看f变量的数据类型 console.log(typeof(h)) ; </script> </body> -
关系/比较运算符
比较运算符用于判断两个变量大小关系：>、<、、<=、>=、=、!=、!===，其中：
(1) == ：代表相等(它只比较内容，不比较类型)
(2) ===：绝对相等(先比较类型，再比较内容)
(3) !==：绝对不等
-
JavaScript流程控制
JS中同Java一样存在流程控制语句，用法一样：
分支：
(1) if语句 (2) switch语句循环：
(1) while语句 (2) do-while语句 (3) for循环 1.普通for循环 2.for in 循环 3.forEach循环break/continue语句
三目表达式
<body> <!-- js中语句 --> <script> // if语句 // var a = 9; // if(a % 2 === 0) { // console.log(a + "是偶数"); // }else{ // console.log(a + "是奇数"); // } // var age = 20; // if(age >= 0 && age < 18) { // console.log("未成年"); // } else if(age >= 18 && age < 60) { // console.log("青年"); // } else if (age >= 60 && age < 200) { // console.log("老年"); // }else { // console.log("无效年龄"); // } // 在if中那些条件为假：0,null,"" 空字符串，undefined,NaN,false // if(false) { // alert("真"); // }else { // alert("假"); // } // var a = 5; // switch(a) { // case 1: // console.log("查询"); // break; // case 2: // console.log("修改"); // break; // case 3: // console.log("删除"); // break; // default: // console.log("无效选择"); // break; // } // 循环语句 // var i = 1; // while(i <= 10) { // console.log(i); // i++; // } // var i = 10; // do { // console.log(i); // i--; // }while(i >= 1); // for(var i = 1; i <= 10; i++) { // console.log(i); // } // 循环中断语句：break continue // for(var i = 1; i <= 10; i++) { // if(i % 2 === 0 && i % 3 === 0) break; // console.log(i); // } // for(var i = 1; i <= 10; i++) { // if(i % 2 != 0) continue; // console.log(i); // } // 三目运算符 x ? y : z; var a = 15; var b = 34; var max = a > b ? a : b; console.log(max); </script> </body> -
JavaScript函数
函数是一组可以随时运行的代码语句，此处大家可以理解为方法
函数作用：可以避免载入时执行，可以被多次调用
-
语法
function 函数名(参数列表:可以没有){ JS代码; [return 返回值;] } -
全局变量和局部变量
全局变量：函数外面声明，局部变量：函数里面声明的
-
匿名函数
匿名函数顾名思义就是一个没有定义名称的函数：
function (参数列表){ JS代码 [return 返回值;] }<body> <script> // 匿名函数 /* var 变量名 = function() { } */ var m = function() { console.log(10 > 20 ? 10 : 20); } // 匿名函数的调用，声明变量名() m(); // 调用匿名函数 (function() { alert("匿名函数") })(); </script> </body> -
常用的本地对象
new 调用，创建对象，再对象去点方法
- Date:日期对象，表示当前的系统日期
- String：字符串对象
- 本地对象Array:数组
<body> <!-- 讲解常用的本地对象：new 调用，创建对象，再对象去点方法 --> <!-- 1、Date:日期对象，表示当前的系统日期 --> <!-- <script> // 使用Date对象 var date = new Date(); // 创建一个Date对象 // 获取date对象里面年月日 var y = date.getFullYear(); // 获取年份 var m = date.getMonth() + 1; // 获取月份 var d = date.getDate(); // 获取号数 m = m < 10 ? "0" + m : m; // 如果m小于10，在前面拼接0 d = d < 10 ? "0" + d : d; var rq = y + "-" + m + "-" + d; // 获取时分秒 var h = date.getHours(); // 获取小时 var mm = date.getMinutes(); // 获取分钟 var s = date.getSeconds(); // 获取秒 var sj = h + ":" + mm + ":" + s; console.log(rq + " " + sj); </script> --> <!-- 2、String：字符串对象 --> <!-- <script> // 创建字符对象 // var a = "abcdefg"; // 创建字符串对象 // console.log("a = " + a); // var b = new String("abcdefg"); // console.log("b = " + b); // var str = "123,45,78,90,12"; // var arrs = str.split(","); // 通过，分割成一个数组 // for(var i = 0; i < arrs.length; i++) { // console.log(arrs[i]); // } // for(var i in arrs) { // console.log(arrs[i]); // } var str2 = "ab2cd3ef4gh"; // var arrs = str2.split(/[0-9]{1,}/); // 通过正则表达式分割 // for(var i in arrs) { // console.log(arrs[i]); // } var s = str2.substring(1,2); console.log(s); </script> --> <!-- 3、本地对象Array:数组 --> <script> // 创建数组 // var arrs = new Array(); // 创建一个空数组 // arrs[0] = 10; // arrs[1] = 20; // arrs[2] = "abc"; // arrs[3] = 40; // arrs[4] = true; // console.log(arrs.length); // var arrs2 = Array(10); // for(var i = 0; i < arrs2.length; i++) { // arrs2[i] = "a" + i; // } // arrs2[10] = 123; // console.log(arrs2.length); // var arrs3 = [10,20,30]; // console.log(arrs3.length); // console.log(arrs3[2]); var arrs4 = new Array(10,20,30,40); console.log(arrs4.length); </script> </body> -
内置对象：不能new
- Global:全局对象
- Math:数学对象
<body> <!-- 讲解内置对象：不能new --> <script> // var a = "123"; // // Global:全局对象 // var a2 = parseInt(a); // console.log(a2 + 1); // var s = String(123); // console.log(s + 1); // var s2 = "3 + 2 - 5"; // var s3 = eval(s2);// 将s2中的表达式进行运算 // console.log(s3); // Math:数学对象 console.log(Math.ceil(3.0001)); console.log(Math.floor(3.999999)); console.log(Math.round(3.599999)); console.log(Math.random()); console.log(Math.pow(2,4)); console.log(Math.sqrt(16)); </script> </body>