Ⅰ. JavaScript基础-Part1
一. 定义和规范
一种运行在客户端的编程语言
(1) 组成
①ECMAScript
规定了JS基础语法核心知识：变量、分支语句、循环语句、对象等
②web APIs
- DOM
操作文档，比如对页面元素进行移动、改变大小、添加删除等操作
- BOM
操作浏览器，比如页面弹窗，检测窗口宽度、储存数据到浏览器等等
(2) 引入方式
① 内联写法
<body>
<!-- 不常用 编写代码的体验不好，很容易写错，了解一下即可 -->
<button onclick="alert('面朝大海 春暖花开')">点击我 就春暖花开</button>
</body>
② 内部写法
<body>
<script>
// 可以在这个里面写js代码
alert('你好 js');
</script>
</body>
③ 外部写法
<body>
<script src="./js/弹出窗口.js"> </script>
</body>
(3) 注释方式
① 单行注释
- 快捷键：crtl + / （macOS：command + /）
- 呈现形式： " // "
<script>
//alert('你好 js');
</script>
② 多行注释
- 快捷键：shift + alt + a （macOS：shift + option + a）
- 呈现形式： " /**/ "
<script>
/*alert('你好 js');*/
</script>
(4)结束符号
做好统一的格式化设置
(5) 输入输出语法
① 输入
-
console.log('控制台打印')
-
alert('弹窗')
-
document.write('写入网页')
*补充：反引号 - 换行依然生效
document.write(`
<div>
<p>
<button>按钮又来啦</button>
</p>
</div>
`)
② 输出
- prompt('用户输入的文字内容')
- 获取多个输入prompt(' ' + ' ' + ' ')
<script>
username = prompt('你叫什么名字');
address = prompt('你家住哪里');
foods = prompt('你喜欢吃什么');
music = prompt('你喜欢自己一个听音乐吗');
sports = prompt('你喜欢运动')
console.log(username + address + foods + music + sports);
</script>
二.变量
(1) 变量的基本使用
- 创建变量：let 变量名
- 变量赋值：变量名 = ''
- 变量使用：console.log(变量名)
代码示例
<script>
let username;
username = '王翠花';
// let username = '王翠花'
console.log(username);
</script>
(2) 变量的规则和规范
① 规则
- 不能使用关键：let、var、if、for
- 可以符号开头：_开头 、$开头、 字母开头
- 不可以数字开头
- 区分大小写
② 规范
- 命名有意义
- 驼峰写法：
<script>
// 小驼峰 首字母小写
let shoppingSupermarketShop = '111';
// 大驼峰 首字母大写
let ShoppingSupermarketShop = '111';
</script>
(3) 变量的数据类型
① 常见类型
- 数字
//数字类型外表一点不能加'',否则会转成字符串类型
let money = 100;
//使用算数符号可直接运算
let money = 100 + 100;
console.log(money)//200
- 字符串
注意拼接写法
let userName = '树屋';
// 传统 字符串拼接
let girl = '树';
let boy = '屋';
let name = girl + boy;
console.log(name + ',欢迎大家！');//树屋
//反引号 拼接写法（*推荐）
console.log(`${name},欢迎大家！`)
- undefined
不会报错，显示当前的数据是未定义，提醒对代码进行矫正
// 声明了但是没有赋值
let age;
console.log(age);
- 布尔类型
只有两种值：true（真）、false（假），多用于条件语句判断
let isEat = true;
let isSleep = false;
- null
空
let age = null;
console.log(age);
②获取变量的数据类型
- typeof
let num = 1;
let userName = '树屋';
let isRain = true;
let foods;
let money = null;
console.log(typeof num); // number 输出 num变量的类型
console.log(typeof userName); // string
console.log(typeof isRain); // boolean
console.log(typeof foods); // undefined
console.log(typeof money); // object 对象类型
③ 类型转换
- 隐性转换
// 工作中 比较常用的隐式转换写法
let num2 = '2';
let num3 = num2 - 0;
console.log(typeof num3);// num3转换成数字类型
// 最简洁的写法
let num4 = +num2;
console.log(typeof num4);//num4转换成数字类型
- 显性转换
//显示转换 转成 数字类型
let num1 = '1'
let num2 = Number(num1);
//显示转换 转成 字符串类型
let num3 = 123;
let str = String（num1）；
//取整
let num4 = parseInt(9.9);
