01-js初体验
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
alert('hi~~~北京十级大风!!!!!')
</script>
</head>
<body>
<input type="button" value="点我啊~~~~" onclick='alert("班长看看");'>
</body>
</html>
02-js代码的书写位置
<!DOCTYPE html>
<html lang="en">
<title>Document</title>
<!--
强调:
1.最常用是 内嵌式js----学习期间
外部js---开发部署最多,使用时,为了 不让js 文件 被爬虫抓取 会写一堆比较复杂的js动态加载 其他外部的js页面
行内JS 一般不会直接 写到html中 而是通过webapi 来动态创建!!!
2.小坑: script标签 一旦使用了src属性来引用外部的 js文件的话,
标签中的js代码将不会被执行!!!!!!!!
-->
<!-- 1.内嵌式 -->
alert('hi,你好我是内嵌式');
</script>
<!-- 2.外部JS -->
alert('这里的内容写了也显示不出来')
</script>
</head>
<body>
<!-- 3.行内式JS -->
<input type="button" value="点我试试看" onclick="alert('我是小白');">
</body>
</html>
02-js代码的书写位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!--
强调:
1.最常用是 内嵌式js----学习期间
外部js---开发部署最多,使用时,为了 不让js 文件 被爬虫抓取 会写一堆比较复杂的js动态加载 其他外部的js页面
行内JS 一般不会直接 写到html中 而是通过webapi 来动态创建!!!
2.小坑: script标签 一旦使用了src属性来引用外部的 js文件的话,
标签中的js代码将不会被执行!!!!!!!!
-->
<!-- 1.内嵌式 -->
<script>
alert('hi,你好我是内嵌式');
</script>
<!-- 2.外部JS -->
<script src="./02外部js文件.js">
alert('这里的内容写了也显示不出来')
</script>
</head>
<body>
<!-- 3.行内式JS -->
<input type="button" value="点我试试看" onclick="alert('我是小白');">
</body>
</html>
```HTML
```
03-js的注释
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
/*
注意:
a.注释 一般用在 内嵌JS 和外部JS中
b.用处:对代码业务做备注说明--给其他开发者看+也给自己看
面试的时候用得着,代码如果有注释,会专业度更高!!!
*/
// 1.单行注释
/* 2.多行注释
我是班长
我还没有吃早饭
因为没有女朋友帮买
*/
alert('我是前端开发小白');
</script>
</head>
<body>
</body>
</html>
04-js常用的输入法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
// 1.【输出 函数】 -- 输出内容给 浏览器用户 ----------------------------------------
// 1.1 alert 消息弹出框 --主要是 给浏览器用户看
// 用法 alert('要输入的内容')
// alert('今天521....')
// 1.2 console.log 控制台输出 --主要是给 开发者 看
// 内容会输出到 浏览器的 控制台 选项卡中~~~(通过f12 可以打来浏览器的控制台)
console.log('中午在教室睡觉很难受....想哭');
// 1.3 document.write 输出内容到body -- 主要用来 输出局部的 html 代码
// 注意:使用频率非常低,基本上不用!!!!!!
document.write('<h1>晚上回家还要预习哭唧唧</h1>');
</script>
</head>
<body>
</body>
</html>
05-直接量和数据量类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
// 1.因为 使用代码 来做业务,大部分 都是包含数据的,所以 需要数据(直接量) 和 存储数据(变量等) 的语法!!!!!
// 2.直接量(数据) --直接 可以被 js引擎 (浏览器) 解析的数据 就是直接量 !!!!
console.log(110);
console.log(35);
console.log(28.6);
console.log('八千里路云和月');
console.log('橘子辉煌,玻璃晴朗!');
console.log('我爱中国共产党~');
console.log('i love mum~~~~');
console.log('3.14159265358');
console.log(true);
console.log(false);
// console.log(james);
// 3.数据类型: 由于 JS中的 数据有多种 ,所以为他们分类 这些类别统称为 : 数据类型
// 3.1 数值类型 Number
// 作用: 用来 在JS中 表示 各种数字 ->整数(整型数值) , 小数(浮点数), 负数
console.log(111);
console.log(222);
console.log(333);
console.log(3.14159265358); /* 加了小数点的 小数 */
console.log(-321); /* 负数 */
// a. 数值类型的取值范围--因为内存是有限的, 数字是无限的, 所以 在JS中 已经规定好数字范围!
// 最大值 和 最小值
console.log('最大值为:');
console.log(Number.MAX_VALUE); // 最大值:js能够显示的 最大值
console.log('最小值为:');
console.log(Number.MIN_VALUE); // 最小值:js能够显示的 最小值
// 无穷大和 无穷小 ---因为 数学的范畴中 数字是无限的 所以 js中 使用无穷大和无穷小来表示 这两个概念
console.log(Infinity); //Infinite 无穷大
console.log(-Infinity); //-Infinite 无穷小
//3.2 数值类型里 两个特殊的地方
// a. Infinity 和任何数值运算 结果都是Infinity
console.log(Infinity+1);
//b. JS中 由于 处理机制的问题, 相除时, 可能得到 的无穷循环小数 只会显示 15-17位
console.log(10/3);
</script>
</head>
<body>
</body>
</html>
06-字符串的类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
//1.在JS 中 如果要表达一句话~~~ 就需要 是使用到字符串类型了!!!
// 凡是使用''或者 "" 包裹起来的 ,都是字符串类型的 数据
console.log('这是我上JS基础的第一天,迷迷糊糊....');
console.log('不知道具体的主题,就是跟着老师的代码敲一遍....');
// 2.字符串的嵌套使用
// console.log('i am so sad..."); //报错: 因为 js引擎 无法找到结束字符串的 '
// console.log("i am meng'); // 报错: 因为 js引擎无法找到 结束字符串用的 "
// 注意: 可以在 ' "" ' 或者" '' "
console.log('纵使疾风起,"人生不言弃"~~~'); // 没报错:因为 js 引擎 找到了 结束字符串用的 ',中间的 " " 被当做字符串的一部分
console.log("居住长江头,'我住长江尾'"); // 没报错:因为 js 引擎 找到了 结束字符串用的 ',中间的 " " 被当做字符串的一部分
// 思考:打印一句话 内容为: 我是天真烂漫的小天使,是"裙姐"的好朋友
console.log('我是天真烂漫的小天使,是"裙姐"的好朋友');
// 内容中有双引号的话 用单引号包裹 内容中有单引号的话 用双引号包裹
// -----【强调:】开发是,一般使用【单引号】来表示字符串!!!!!!!!
//3.字符串的转义符
// 转义符: 字符串中 有时候 需要使用到一些特殊的效果 那么就需要特殊的命令 来 告诉js引擎 特殊的命令 就叫做转义符
// 【转义符的 核心 就是 \】,后面可以匹配一些指定的 字母代表 特殊命令!!!!
//常见的转义符:
// 换行/r(相当于 html 里面的p标签) 或者 /n(相当于 html 里面的br标签)
// \' 代表一个单引号
// \" 代表一个双引号
// \t 代表一个(tab键)
// \\ 代表一个\
// 思考 :打印一句话 : 好好学习
// 天天向上
// 我是\祖国\的花朵
console.log('好好学习\n天天向上\n我是\\祖国\\的花朵');
console.log('i\'m rich and handsome and tall guy~~~');
</script>
</head>
<body>
</body>
</html>
07-布尔值类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
//1.在JS中 经常会遇到 要表示两种对立状态: 对错 是否 好坏 男女....
// 【布尔值数据类型】:专门用来表示 两种 对立状态
// 只有两个值: true 和 false
console.log(true);
console.log(false);
// 2.扩展:
// true 本质上 就是 1
// false 本质上 就是 0
// js 执行时, true和 false 都会被转成 1和0 来保存 及 运行
</script>
</head>
<body>
</body>
</html>
08-typeof检测数据类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
// 1.typeof
// 用法:
// a. typeof 直接量 ->直接量的 数据类型名字
// b.typeof(直接量) ->直接量的 数据类型名字
// c.typeof 返回的 类型名字 也是 字符串类型的数据
console.log(typeof '存在的即是合理的'); // string
console.log(typeof "八千路云和月"); // string
console.log(typeof "\t\n\\"); // string
console.log(typeof ''); // string
console.log('111'); // string 加了引号的,就是字符串!!!!!->string
console.log(typeof (110)); // number
console.log(typeof 1.1); // number
console.log(typeof -101); // number
console.log(typeof true); //boolean
console.log(typeof false);//boolean
</script>
</head>
<body>
</body>
</html>
09-变量
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
//1.需求 要在内存中 开辟一个空间 保存在浏览器用户 输入的数据
var bzGFNumber = prompt('请输入班长女朋友的电话号码:'); //将用户 输入的值保存到 【变量空间】
console.log(bzGFNumber); //打印【变量空间】里保存的值
//2.什么是变量:本质上 就是 内存里 一块小的空间 变量名 就是 这个空间的代号~~~
// 通俗的说 就是一个容器(盒子) 往里面 可以保存 一个苹果!!!
//2.1 变量的 声明------------------------------------
// 语法: var 变量名;
// 变量名 = 值 ; // 声明后,赋值
// a.声明变量,但没有赋值 之前 变量中的默认值 为undefined
var bzBFNumber; //在内存中开辟一个空间 默认值为 undefined
console.log(bzBFNumber); //undefined
bzBFNumber=1111111111;
console.log(bzBFNumber); //1111111111
//2.2变量的 声明赋值----------------------------------
// 语法: var 变量名 = 值;
var bzBFNumber = 22222222222;
console.log(bzBFNumber);
//强调 : 一个变量 只能存 1个 数据
//2.3 访问和设置 变量里的值-----------------------------
//a. 访问变量: 只需要 使用变量名就可以了!!!!
var usrName = '菜鸟';
console.log(usrName);
// alert(usrName);
//b.修改变量空间里的值 -- 本质上 是 覆盖了 原来 变量空间里的值
usrName = '小白';
console.log(usrName);
//2.4 小坑: 变量中 和 字符串容易弄混
var a = 110;
console.log('a'); // ->a 打印出来的是字符串
console.log(a); // 110 打印出来的是变量值
</script>
</head>
<body>
</body>
</html>
10-变量的扩展
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
// 1.不适用 var 关键字 也能声明 ----强调 : 不推荐使用!!!!------
var a = 111;
a = 222;
console.log(a);
b = 250; // JS 引擎 检查之后 发现 页面上没有 叫做 b 的变量,所以 就 自动创建了一个 变量b!!!
console.log(b);
//1.1 注意 : 不适用 var 关键字 来声明时, 变量声明和赋值 必须在一行!!!!!
// c; // 报错: c is not defined
c = 11;
console.log (c);
//2.批量声明变量
var a,b,c;
a = 1;
b = 2;
c = 3;
//3.批量声明变量并赋值
var a = 1 , b = 2, c = 3;
//4.变量给变量赋值--------
// 注意: 变量之间赋值 :本质上 是将变量a 的值 复制了一份 给了 变量b
var usrName = '小白白';
var usrName2 = usrName;
console.log(usrName2);
</script>
</head>
<body>
</body>
</html>
11-变量的命名规则和规范
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
//1.变量的 命名规则 --- 规则 相当于 法律,违反了 就会 要收到严惩!!
//a. 变量名 只能用 英文字母 数字 _ $ 四种构成
var usrName234;
var _name;
var $xiaobai;
var ______3234234aabc$$$111aaabb;
//b. 变量名 不能用 数字开头
// var 23aa; // 报错
//c. 不能是 js系统关键字 或 保留关键字 (凡是 在vscode中成 蓝色的字都是 关键字 -- var)
// var var = 1;
//2.变量的 命名规范 -- 规范,相当于 道德,违反了 不用坐牢,但是 边上的人可能 鄙视 指责你!!
//a. 命名要有意义
var usrName;
var abc; // 没有意义,不推荐
//b. 驼峰命名法 :当 变量名由多个 单词构成,首字母 小写,后面的 每个单词 首字母 大写!
var usrLoverName;
var usrDogAge;
//注意:
// js中的 变量名 区分大小写
var a = 1;
var A = 2;
</script>
</head>
<body>
</body>
</html>
12-交换两个变量的值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
// 1.将 两个 变量中保存的值 交换位置
var a = '苹果';
var b = '梨子';
console.log(a,b);
// a = b;
// b = a;
//1.1 将 a 的值 保存到 临时变量中
var temp = a; // temp = 苹果 a = 苹果 b = 梨子
//1.2 将 b 的值 保存到 a 中
a = b; // temp = 苹果 a = 梨子 b = 梨子
//1.3 将 临时变量 的值 保存到 b 中
b = temp; // temp = 苹果 a = 梨子 b = 苹果
console.log(a,b);
</script>
</head>
<body>
</body>
</html>
13-算数运算符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
//加减乘除
//1.加法
console.log(1 + 1);
var res = 1 + 1;
console.log(res);
//2. 减法 除法 / 乘法 *
//3.取余(取模) % -> 用来 获取两个数 除不尽的值
var res = 10 % 3; // 3 ->1
console.log('10/3 的余数 为:' + res);
//4.神奇的+号
//4.1 在两边 都是 数值类型的 情况下 ,进行 求和运算 , 返回两个数的和
var res= 1 + 1;
console.log (res) ;
/* 4.2 在两边 有任意一边 为字符串时 会先将 另一边 自动转换成字符串 ,然后
将 两个字符串 拼接在一起 返回一个新的字符串*/
var str = '我爱' + '妈妈';
console.log(str);
//补充: 如果变量值 为字符串 , 那么也会起到拼接 字符串的作用
var mum ='妈妈';
var dad ='爸爸';
var str = mum + dad +'我很爱他们~~~';
console.log(str);
</script>
</head>
<body>
</body>
</html>
14-会魔法的Math对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
//1.Math 中的 PI ,保存了一个 圆周率 的数值
console.log(Math.PI); // 3.141592653589793
//2.求绝对值
console.log(Math.abs(-11)); // 11
//3.天花板函数 ceil -- 整数位 + 1 , 小数位 去掉
// 注意:只针对 有效数位的数值 ,如果是整数 则返回原来的值
console.log(Math.ceil(1.333)); //2
console.log(Math.ceil(2.01));// 3
console.log(Math.ceil(100.0000001));// 101
console.log(Math.ceil(100));// 100
//4.地板函数 floor--整数位不变 小数位去掉
console.log(Math.floor(1.111));// 1
console.log(Math.floor(2.01));// 2
console.log(Math.floor(100.0000001));// 100
//5. 四舍五入函数 round --- 小数位 >= 0.5 ,小数位去掉,整数位 +1
// < 0.5 ,小数位去掉,整数位 不变
console.log(Math.round(1.111));// 1
console.log(Math.round(2.01));// 2
console.log(Math.round(100.5));// 101
//6.求最大值
var num1 = 99;
var maxNumber = Math.max(2,4,78,num1,5,7,9);
console.log('maxNumber'+maxNumber);
//7.求最小值
var num1 = 99;
var minNumber = Math.min(2,4,78,1,0,num1,5,9,7);
console.log('minNumber'+minNumber);
</script>
</head>
<body>
</body>
</html>
15-使用JS生成随机数
<html>
<head>
<title></title>
<meta charset='UTF-8'/>
<script>
//1.计算机中 几乎所有的 随机生成的数 都是 伪随机数! --- 有规律可循!!
//2.使用 JS 生成 随机数 很简单, Math.random() 会 返回一个 0 - 1 之间的 随机小数
// 取值范围: 大于等于0 ,小于 1 --> [0,1)
var ranNum = Math.random();
console.log(ranNum);
//3.生成 0 - 100 之间的随机数(包含小数点)
var ranNum = Math.random() * 100;
console.log(ranNum);
//4.生成 0 - 100 之间的 随机整数!!!
var ranNum = Math.random() * 100;
ranNum = Math.floor(ranNum); // 将 生成的 随机数 传入 floor方法,返回去掉 小数点的 整数 ,从新 赋值给 ranNum 变量
console.log(ranNum);
</script>
</head>
<body>
</body>
</html>