JS的使用方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- <style>css</style> -->
</head>
<body>
<!-- html -->
<!-- aaaa -->
<!-- 1.内联JS -->
<a href="javascript:alert('点我干啥?');">点击一下</a>
<!-- 给当前的div注册一个单机事件 -->
<div title="123" onclick="alert('讨厌🤭')">你点完他就不要点我了</div>
<div title="123" onclick="console.log(123)">你点完他就不要点我了</div>
<!-- 2.创建一个script 标签 用来包裹js代码 -->
<script>
// alert警告框
alert('校服费4000元引争议 学校回应热');
// aaaa
</script>
<!-- 所以引入或者编写JS建议放在最下面 -->
<!-- 3.使用js script标签 的 src 引入外部JS -->
<script src="./01-JS的使用方式.js"></script>
</body>
</html>
window对象的方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- <style>css</style> -->
</head>
<body>
<!-- html -->
<!-- aaaa -->
<!-- 1.内联JS -->
<a href="javascript:alert('点我干啥?');">点击一下</a>
<!-- 给当前的div注册一个单机事件 -->
<div title="123" onclick="alert('讨厌🤭')">你点完他就不要点我了</div>
<div title="123" onclick="console.log(123)">你点完他就不要点我了</div>
<!-- 2.创建一个script 标签 用来包裹js代码 -->
<script>
// alert警告框
alert('校服费4000元引争议 学校回应热');
// aaaa
</script>
<!-- 所以引入或者编写JS建议放在最下面 -->
<!-- 3.使用js script标签 的 src 引入外部JS -->
<script src="./01-JS的使用方式.js"></script>
</body>
</html>
window对象的属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* .box {
} */
</style>
</head>
<body>
<div onclick="window.document.write('<h2>我是点击div被生成的文字</h2>')">点我生成文字</div>
<!-- -->
<script>
//
// window对象下面有一个属性叫做console
// window.console
// console这个属性下面有几个方法
// 会在控制台输出 日志信息
window.console.log('hello JavaScript!');
window.console.log('1234567890');
// 显示一个对象的所有属性和方法
window.console.dir(window);
// 将括号里面的内容输出到 html文档里面 可以识别HTML标签
window.document.write("我是JS生成的文字");
window.document.write("<h1>我是JS生成的文字</h1>");
// write 替换body里面的所有内容
// window可以进行省略
// 警告框
// alert('123');
// alert("123");
// 双引号:
// 双引号里面可以放单引号,但不能放双引号。
// 单引号:
// 单引号里面可以放放引号,但不能放双引号。
alert("'123'");
</script>
</body>
</html>
标识符
所谓标识符,就是指变量、函数、属性,或者函数参数的名字。
-
不能以数字开头。
-
严格区分大小写。
-
不能使用JavaScript中的关键字命名。
-
要尽量要做到“见其名知其意”。
变量
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 是一种 存储数据的方式
// 是一个容器,用来存储数据,他把数据存放到内存当中,
// 如果需要使用,就用引用地址去找
// 需要使用关键字 var
var userName;
// 当创建变量时会自动在内存中生成一个址
// 这样就声明了一个变量
// 用赋值运算符来给变量数据
// = 会将等号右边的值 赋给 = 左边的变量
userName = "天降大任于斯人也";
// 控制台输出
// 在访问时会自己去找址,从而拿到值
console.log(userName);
// 简化
var userInfo = "先帝创业为伴,而半路华光预算";
console.log(userInfo);
// 同时创建多个变量
var name, age, gender;
name = "胡歌";
age = 18;
gender = "男";
console.log(name);
console.log(gender);
console.log(age);
// 扩展
console.log(100 + 9);
console.log(100 - 9);
console.log(100 * 9);
console.log(100 / 9);
console.log(100 % 9);
console.log(20 % 5);
console.log(10 % 3);
console.log(2 * 2 * 2);
console.log(2 ** 10);
</script>
</body>
</html>
变量的声明提升
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 未声明,直接打印
// console.log(num); // num is not defined 报错,未进行定义
// 声明未赋值,进行打印
// var num;
// console.log(num); // undefined 未定义
// var num;
// num=1;
// console.log(num); // 1
// 先打印,后声明,变量声明提升
console.log(num); // undefined 未定义
var num;
// 先打印,后进行初始化,声明部分被提升,赋值不提升
// var num1;
// console.log(num1);
// num1= 10;
console.log(num1); // undefined 未定义
var num1 = 10;
</script>
</body>
</html>
数据类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 数据类型:为了便于把数据分成所需内存大小不同的数据,充分利用存储空间,于是定义了不同的数据类型。
// 1.基本数据类型 数值类型number 字符串类型sting 布尔类型boolean 未定义undefined 空null
// 1.number 所有的数字
var num = 10;
console.log(num);
// 二进制数
var num2 = 0b10100010; // 0*2^0 + 1*2^1 + 0*2^2 + 0*2^3 + 0*2^4 + 1*2^5 + 0*2^6 + 1*2^7 = 162
console.log(num2);
// 八进制
var num3 = 011; // 1*8^0 + 1*8^1 = 9
console.log(num3);
// 十六进制
var num4 = 0x11; // 1*16*^0 + 1*16^1 = 17
console.log(num4);
//2. string 带""都是字符串
var str = "张三";
console.log(str);
var str2 = "10";
console.log(str2);
// 转译字符
var str3 = "时隔三年\ntheshy重登世界赛舞台";
console.log(str3);
// 3. boolean true false
var bool = true;
console.log(bool);
var bool2 = "true";
console.log(bool2);
// 4.undefined 只有undefined
// 一般指出乎意料的情况,任何一个只声明而没有赋值的变量都会被隐式的(自动的)赋值为 undefined。
var und = undefined;
console.log(und);
// 5. null 只有null
// 需要赋值为nul
var kong = null;
console.log(kong);
</script>
</body>
</html>
引用数据类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 引用数据类型 Object
// 声明对象
var person = {
// 属性 属性值
name:"张三",
age:18,
sex:true,
}
console.log(person);
</script>
</body>
</html>
typeof检测数据类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 数据类型 1.基本数据类型
// 1.1 number
// 1.2 string
// 1.3 boolean
// 1.4 undefined
// 1.5 null
// 2.引用数据类型 object
var num = 10;
console.log(typeof num); // number
var str = "10";
console.log(typeof str); // number
var bool = false;
console.log(typeof bool); // boolean
var und = undefined;
console.log(und);
console.log(typeof und); // undefined
var kong = null;
console.log(typeof kong); // object 历史遗留问题,空对象指针
var person = {
name:'zs',
age:18
}
console.log(typeof person); // object
// typeof 返回值 number string boolean undefined object
</script>
</body>
</html>
其他数据类型转换成Boolean(布尔数据类型)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 1.将其他类型转换为 Boolean 类型
var num = 0;
console.log(Boolean(num)); // false
var str = "";
console.log(Boolean(str)); // false
var und = undefined;
console.log(Boolean(und)); // false
var kong = null;
console.log(Boolean(kong)); // false
var notNum = NaN; // not a number
console.log(notNum);
console.log(typeof notNum); // number
console.log(Boolean(notNum)); // false
var num1 = 1;
console.log(Boolean(num1)); // true
var str2 = "abc";
console.log(Boolean(str2)); // true
</script>
</body>
</html>
其他数据类型转换成Number(数值数据类型)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 2.其他类型转换为 Number 类型
// Number() 方法
var str = "";
console.log(Number(str)); // 0
var bool1 = true;
console.log(Number(bool1)); // 1
var bool2 = false;
console.log(Number(bool2)); // 0
var und = undefined;
console.log(Number(und)); // NaN
var kong = null;
console.log(Number(kong)); // 0
var str2 = "10";
console.log(Number(str2)); // 10
var str3 = "123.456";
console.log(Number(str3)); // 123.456
var str4 = "123abc";
console.log(Number(str4)); // NaN
var str5 = "abc123";
console.log(Number(str5)); // NaN
console.log("*************************************************");
// parseInt() 方法,将小数取整, 本质是用来取整的
console.log(parseInt(str)); // NaN
console.log(parseInt(bool1)); // NaN
console.log(parseInt(bool2)); // NaN
console.log(parseInt(und)); // NaN
console.log(parseInt(kong)); // NaN
console.log(parseInt(str2)); // 10
console.log(parseInt(str3)); // 123
console.log(parseInt(str4)); // 123
console.log(parseInt(str5)); // NaN
console.log("---------------------------------------------------");
// parseFloat() 方法,保留小数
console.log(parseFloat(str)); // NaN
console.log(parseFloat(bool1)); // NaN
console.log(parseFloat(bool2)); // NaN
console.log(parseFloat(und)); // NaN
console.log(parseFloat(kong)); // NaN
console.log(parseFloat(str2)); // 10
console.log(parseFloat(str3)); // 123.456
console.log(parseFloat(str4)); // 123
console.log(parseFloat(str5)); // NaN
</script>
</body>
</html>
其他数据类型转换成String(字符串数据类型)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 3.将其他类型转换为 String 类型
// String() 方法
var num = 10;
console.log(String(num)); // "10"
var bool = true;
console.log(String(bool)); // "true"
// toString() 方法
console.log(num.toString()); // "10"
console.log(num.toString(2)); // "1010"
console.log(num.toString(8)); // "12"
console.log(num.toString(16)); // "a"
</script>
</body>
</html>
隐式类型转换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 隐式类型转换
// 代码在运行的过程当中 浏览器的JS引擎会帮我们把 数据类型自动转换
// + - * / %
console.log(2 + 2);
// 字符串与任何数据类型相加 都是拼接的意思
console.log(2 + "2");
console.log(null + "2");
console.log(undefined + "2");
// +不具备隐式类型转换
// - * / % 都具备隐式类型转换
console.log(2 - "2");
console.log(2 * "2");
console.log(2 / "2");
console.log(2 / "2");
console.log(2 % "2c"); // NaN
console.log('10' / '2');
// number
console.log(typeof NaN);
</script>
</body>
</html>
判断一个数是否是有效数字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 隐式类型转换
// 代码在运行的过程当中 浏览器的JS引擎会帮我们把 数据类型自动转换
// + - * / %
console.log(2 + 2);
// 字符串与任何数据类型相加 都是拼接的意思
console.log(2 + "2");
console.log(null + "2");
console.log(undefined + "2");
// +不具备隐式类型转换
// - * / % 都具备隐式类型转换
console.log(2 - "2");
console.log(2 * "2");
console.log(2 / "2");
console.log(2 / "2");
console.log(2 % "2c"); // NaN
console.log('10' / '2');
// number
console.log(typeof NaN);
</script>
</body>
</html>