JavaScript是什么
1是一种运行在客户端(浏览器)的编程语言,实现人机交互效果,
2作用
网页特效(监听用户的一些行为让网页作出反馈),表单验证(针对表单数据的合法性进行判断),数据交换(获取后台的数据,渲染到前端) 服务端编程 (node.js)
3 js的组成
js书写位置
1内联
<body>
<!-- 不常用 编写代码的体验不好，很容易写错， 了解一下即可 -->
<button onclick="alert('过万啦')">点击我 我就月薪过万</button>
<button onclick='alert("也过万啦")'>点击我 我就月薪过万</button>
<div onclick='alert("也过万啦")'>我来啦</div>
</body>
代码写在标签内部,不常用,后面vue中会看到这种使用模式
2内部
<body>
<script>
// 可以在这个里面写js代码,警告弹窗,注意括号里写单引号
alert('你好 js 我呸');
</script>
</body>
直接写在html文件里面,用script标签包住
规范:script标签写在上面
3外部
<body>
<script src="./js/弹出窗口.js"> </script>
</body>
代码写在以.js结尾的文件里
语法:通过script标签,引入到html页面中
js注释写法
<script>
// ctrl+/单行注释
/* shift+alt+a多行注释 */
</script>
1单行注释:ctrl+/
2多行注释shift+alt+a
js结束符
js输入输出语法
输出语法
<body>
<script>
// 直接在 body标签中书写内容
document.write("通过js加进去的内容")
</script>
</body>
<body>
<script>
// 推荐 控制台 log,简写log
console.log('控制台打印1');
</script>
</body>
<body>
<script>
alert('页面弹出警告对话框');
</script>
</body>
输入语法
输入名字弹窗
<body>
<script>
// 输入
prompt("请输入你的姓名")
</script>
</body>
输入输出配合使用
注意语法自定义名字不要加引号
<body>
<script>
// 获取用户的名称
username = prompt("请输入你的姓名");
// 打印出来 用户的名称,一种输入三种输出
document.write(username);
alert(username);
console.log(username);
</script>
</body>
获取多个输入
<script>
username = prompt('你叫什么名字');
address = prompt('你家住哪里');
foods = prompt('你喜欢吃什么');
music = prompt('你喜欢自己一个听音乐吗');
sports = prompt('你喜欢运动');
// 使用 一个 + 表示连接
console.log(username + address + foods + music + sports);
</script>
使用+表示连接
变量是什么
变量的基本使用
<script>
// 变量名不能一样
// 变量 我的姓名 创建变量
let username;
// 变量赋值
username = '橙子';
// 变量的使用
console.log(username);
// 声明变量的同时 也赋值 常用！
let color = 'yellow';
color = 'black'; // 变量更新
// 一次性声明多个变量 同时赋值
let number1 = 20,
name1 ='赵四';
console.log(number1,name1);
</script>
变量的交换
<script>
// 1 要创建三个变量
let num1 = 101,
num2 = 202,
temp;
// 2 设置 空的变量 存放num1的值
temp = num1;
// 3 设置num1 等于 num2
num1 = num2;
// 4 设置num2 等于之前num1的值(temp)
num2 = temp;
console.log(num1);
console.log(num2);
// 5 小结
// 思路在于 要多创建一个变量 来存放临时的数据 即可
</script>
变量命名规则与规范
<script>
//变量不可以不允许使用重复声明
// 创建一个变量 名字叫 let,var,if,for....内置的关键字都不能用
// 可以以_,$符号开头,字母开头,不能以数字开头
let _he = 123;
let $he = 123;
let he = 123;
// 命名英文区分大小写
// 命名要有意义,不要起无意义的命名
// 小驼峰,首字小写,中间有大写字母
let shopShop = 111;
// 大驼峰,首字母大写,中间有大写字母
let ShopShop = 111;
</script>
数组
<script>
let names = ['西门','武松','楚留香','香妃']
document.write(names[0])
document.write(names[1])
document.write(names[2])
document.write(names[3])
</script>
格式: let 数组名 = [ 数据1,数据2,数据3,数据4,数据n...]
取值: 数组名[0] 数组名[1] 数组名[2] 数组名[3]
1 数组是按顺序保存，所以每个数据都有自己的编号
2 计算机中的编号从0开始，所以小明的编号为0，小刚编号为1，以此类推
3 在数组中，数据的编号也叫索引或下标
4 数组可以存储任意类型的数据
JS 数据类型
注：JavaScript 中变量的值决定了变量的数据类型。
数据类型:数字型(number)
JavaScript 中的正数、负数、小数等 统一称为 数字类型。
注意不要加引号
let money2 = 100;/正数
let money1 = -200;/负数
let money3 = 2.4;/小数
数据类型 – 字符串类型（string）
通过单引号（ ''） 、双引号（ ""）或反引号( ` )包裹的数据都叫字符串，单引号和双引号没有本质上的区别， 推荐使用单引号。
注意事项：
-
无论单引号或是双引号必须成对使用
-
单引号/双引号可以互相嵌套，但是不以自已嵌套自已（口诀：外双内单，或者外单内双）
-
必要时可以使用转义符 \，输出单引号或双引号
字符串的加法(字符串拼接)
<script>
// 数字类型和字符串类型
// 以上这两种类型 使用 加号 + 功能不一样
// 数字类型使用 + 表示数字的相加
let money1 = 100;
let money2 = 200;
let sum = money1 + money2; // 300
console.log(sum);
// 字符串类型 使用加号 表示两段文字的 拼接
let userName = '奥特曼';
let skill = '打怪兽';
let msg = userName + skill;
console.log(msg);
</script>
模板字符串
<script>
// 早些时候 写代码 都是这样来拼接的 看起来不太直观
let every = '大家好';
let age=100;
console.log('你好-' + every + '-世界美好');
console.log('你好' + '-' + every + '-' + '世界美好');
// 你好-大家好-世界美好
// 使用 反引号的方式来拼接 字符串 推荐！！
console.log(`你好-every-世界美好`);
// 模版字符串
console.log(`你好-${every}-世界美好${age}`);// 变量 在反引号中 只能使用 ${every} 固定用法
// 错误的演示
console.log('你好-${every}-世界美好${age}');
// 反引号和 ${} 两个是一对 要配套出现 。 .;..........
</script>
数据类型 – 布尔类型（boolean）
表示肯定或否定时在计算机中对应的是布尔类型数据。 它有两个固定的值 true 和 false，表示肯定的数据用 true（真），表示否定的数据用 false（假）。
<script>
/*
boolean 布尔 只有两种值 真 true 假 false
*/
// 你吃饭了吗
let isEat = true;
// 你睡觉了没有
let isSleep = false;
// 有什么用 ？ 还没有学习到 条件语句 暂时 感觉不到它的作用</script>
未赋值undefined
未定义是比较特殊的类型，只有一个值 undefined。
1 什么情况出现未定义类型？ 只声明变量，不赋值的情况下，变量的默认值为 undefined，一般很少【直接】为某个变量赋值为 undefined。
2 工作中的使用场景：
我们开发中经常声明一个变量，等待传送过来的数据。 如果我们不知道这个数据是否传递过来，此时我们可以通过检测这个变量是不是undefined，就判断用户是否 有数据传递过来。
数据类型 – null（空类型）
null 表示 值为 空
let name = null
null 和 undefined 区别：
- undefined 表示没有赋值 ,用来试错
- null 表示赋值了，但是内容为空
- null 开发中的使用场景：
- 官方解释：把 null 作为尚未创建的对象 大白话： 将来有个变量里面存放的是一个对象，但是对象还没创建好，可以先给个null
检测数据类型
用于控制台测试结果类型使用
<script>
let num = 1
let userName = '翠花花'
let isEat = true
let fods
let money = null
console.log(typeof num);//mumber 类型
console.log(typeof userName);//string 类型
console.log(typeof isEat);//boolean 类型
console.log(typeof fods);//undefined 类型
console.log(typeof money);//object 类型
</script>
类型转换
为什么需要类型转换
JavaScript是弱数据类型： JavaScript也不知道变量到底属于那种数据类型，只有赋值了才清楚。
坑： 使用表单、prompt 获取过来的数据默认是字符串类型的，此时就不能直接简单的进行加法运算。
此时需要转换变量的数据类型。 通俗来说，就是把一种数据类型的变量转换成我们需要的数据类型。
隐式转换
某些运算符被执行时，系统内部自动将数据类型进行转换，这种转换称为隐式转换。
规则： + 号两边只要有一个是字符串，都会把另外一个转成字符串 , 除了+以外的算术运算符 比如 - * / 等都会把数据转成数字类型
- 小技巧： +号作为正号解析可以转换成Number
<script>
// 工作中 比较常用的隐式转换写法
let num2 = '2';
let num3 = num2 - 0; // num3 是一个数字类型
console.log(typeof num3);
// 最简洁的写法 //没有为什么 js内部就有这样的技巧 你知道会用即可
let num4 = +num2; // 也是可以的！
console.log(typeof num4);//num3 是一个数字类型
</script>
显式转换
概念： 自己写代码告诉系统该转成什么类型
转换为数字型 Number(数据) 转成数字类型
如果字符串内容里有非数字，转换失败时结果为 NaN（Not a Number）即不是一个数字 NaN也是number类型的数据，代表非数字
parseInt(数据) , 只保留整数 ; parseFloat(数据) ,可以保留小数
<script>
// 把一个真正的字符串强行转成数字会失败
// let num1 = 'abg'
//显示转换 转成数字类型
// let num2 = Number(num1)
//NaN不是一个数字但是是数字类型
//其他类型转数字 成功=数字本身 失败=NaN
let num1 = '9.9';
let num2 = parseInt(9.9) //常用变成整数
// let num2 = parseFloat(num1); //少用保留小数
let num3 = +num1;
console.log(num3)
console.log(Number(num1));
</script>
概念： 自己写代码告诉系统该转成什么类型
转换为字符型: String(数据) 变量.toString(进制)
标签字符串
<script>
//把内容输入到 body标签中
// document.write ("呵呵,我来了")
// document.write(' <h1>大标题</h1>')
// let str = '<button>按钮</button>'
let str = '<input type="text"> <button>按钮</button>'
document.write(str)
//反引号可以换行,建议使用单引号
</script>
