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 调用,创建对象,再对象去点方法
<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
<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>