目录
1.js介绍
1.JavaScript的作用：
2.JavaScript的特点：
3.JavaScript的基本写法方式：
4.注释：
2.输入和输出语句
1. 输入语句：
2. 输出语句：
3. 输出语句：
4 . 输出语句：
3.变量
1.什么是变量：
2.为什么要使用变量：
3.变量的声明与使用：
4.注意：
5.变量的数据更新：
6.多变量同时声明：
7.变量命名规则：
4.数据类型
1.数据分类：
1.1 基本数据类型
1.2 引用数据类型
2. 检测基本数据类型的方法
5.运算符分类
1. 算术运算符
2. 赋值运算符
3. 比较运算符
4. 逻辑运算符
5. 三元运算符
6. 字符串拼接运算符
7. 一元运算符
1.js介绍
JavaScript是一种脚本语言，它可以嵌入到HTML中，由浏览器解释执行，不需要编译，简称为js
1.JavaScript的作用：
1.制作网页特效，2.前后端数据交互
2.JavaScript的特点：
1.解释执行，2.弱类型，3.基于对象
3.JavaScript的基本写法方式：
3.1 内部写法：在script标签中编写js代码
3.2 外部写法：在script标签中通过src属性引入外部js文件
4.注释：
4.1分类：
单行注释：//注释内容
多行注释：/* 注释内容 */
4.2 作用：
1.对代码进行解释说明，提高代码的可读性
2.注释的代码不会被执行
4.3 vscode快捷键：
单行注释开关：ctrl + /
多行注释开关：ctrl + shift + /
标签代码:
<button id="btn">小刘</button>
<button id="btn2">张三</button>js样式代码:
<script>
//内部写法---在script标签中编写js代码
//第一步：获取元素对象
let btn = document.getElementById("btn");
//第二步：给元素对象绑定事件
btn.onclick = function () {
//第三步：编写事件处理程序
alert("叫儿子干嘛？");
};
</script>
<!-- 外部写法 -->
<script src="js/demo1.js"></script>
demo1.js代码:
//第一步：获取元素对象
let btn2 = document.getElementById("btn2");
//第二步：给元素对象绑定事件
btn2.onclick = function () {
//第三步：编写事件处理程序
alert("你好，我伟大的爸爸");
};效果:
点击小刘后:
点击张三后:
2.输入和输出语句
1. 输入语句：
prompt('提示信息')，弹出一个对话框，对话框中有一个输入框，用户可以在输入框中输入内容，点击确定按钮，将输入的内容返回
2. 输出语句：
alert('提示信息')，弹出一个对话框，对话框中显示提示信息
3. 输出语句：
console.log('提示信息')，在控制台中输出提示信息
4 . 输出语句：
document.write('提示信息')，将提示信息写入到页面中
js样式代码:
<script>
// 输入输出语句
// 1. 输入语句：prompt('提示信息')，弹出一个对话框，对话框中有一个输入框，用户可以在输入框中输入内容，点击确定按钮，将输入的内容返回
let keywords = prompt("请输入你的关键字:");
// 2. 输出语句：alert('提示信息')，弹出一个对话框，对话框中显示提示信息
// alert(keywords);
// 3. 输出语句：console.log('提示信息')，在控制台中输出提示信息
console.log(keywords); //快捷键clg
// 4. 输出语句：document.write('提示信息')，将提示信息写入到页面中
// document.write(keywords);
</script>效果:
点击确定按钮,鼠标右键检查
同理:对话框中显示提示信息
提示信息写入到页面中
3.变量
1.什么是变量：
变量是用来存储数据的容器,本质上是内存中的一块空间
2.为什么要使用变量：
方便数据的使用
3.变量的声明与使用：
3.1声明变量：let 变量名;
3.2使用变量：变量名 = 值;
3.3声明并赋值：let 变量名 = 值;
3.4 变量的使用： 先声明，再赋值，最后使用
4.注意：
4.1.变量名是区分大小写的
4.2 let声明的变量同一个名称只能使用一次
5.变量的数据更新：
变量名 = 新值;
6.多变量同时声明：
let 变量名1,变量名2,变量名3;
7.变量命名规则：
7.1.变量名只能包含字母、数字、下划线、$符号
7.2.变量名不能以纯数字开头
7.3.变量名不能是ES中的关键字或保留字
7.4.变量名要有意义
7.5.变量名采用驼峰命名法 ---- 单驼峰userName，双驼峰UserName，
7.6.变量名要见名知意
js样式代码:
<script>
// 3.1声明变量：let 变量名;---let是ES6中声明变量的关键字
let name;
var age; //var是ES5中声明变量的关键字
console.log(name); //undefined 未定义
// 3.2使用变量：变量名 = 值;
name = "张三";
console.log(name);
// 3.3声明并赋值：let 变量名 = 值;---变量初始化
let schoolName = "清华大学";
console.log(schoolName);
// 5.变量的数据更新：变量名 = 新值;
name = "李四";
console.log(name);
// 6.多变量同时声明：let 变量名1,变量名2,变量名3;
let userName, userAge, userSex;
userName = "王五";
userAge = "19";
userSex = "男";
console.log(userName, userAge, userSex);
</script>效果:
4.数据类型
1.数据分类：
1.1 基本数据类型
number -- 数字--整数，小数，NaN
string -- 字符串--- 一切用引号引起来的都是字符串
boolean -- 布尔值 -- true ,false
undefined -- 未定义
null -- 空值-- 什么都没有
1.2 引用数据类型
object
array
function
2. 检测基本数据类型的方法
typeof 变量名称 --- 返回值是一个字符串，字符串中包含了对应的数据类型
js样式代码:
<script>
let num1 = 10; //整数
let num2 = 20.5; //小数
console.log(typeof num1); //number
console.log(typeof num2); //number
let str1 = "hello"; //字符串
console.log(typeof str1); //string
let flag1 = true; //布尔值
let flag2 = false; //布尔值
console.log(typeof flag1); //boolean
console.log(typeof flag2); //boolean
let und = undefined; //未定义
console.log(typeof und); //undefined
let nul = null; //空值
console.log(typeof nul); //object
</script>效果:
5.运算符分类
1. 算术运算符
+ - * / %
注意事项 : 如果我们计算失败，则返回的结果是 NaN (not a number)
2. 赋值运算符
=， += ，-=， *=， /=， %=
3. 比较运算符
> < >= <= == === != !==
4. 逻辑运算符
&& || !
5. 三元运算符
条件表达式 ? 表达式1 : 表达式2
6. 字符串拼接运算符
+
7. 一元运算符
++ --
字符模版：`字符串${变量}字符串` -- `` -- tab键上面的那个键
js样式代码:
<script>
// 1. 算术运算符
// + - * / %
let num1 = 10;
let num2 = 20;
console.log(`num1 + num2=${num1 + num2}`);
console.log(`num1 - num2=${num1 - num2}`);
console.log(`num1 * num2=${num1 * num2}`);
console.log(`num1 / num2=${num1 / num2}`);
console.log(`num1 % num2=${num1 % num2}`);
console.log(`num1 + num2 * num1 / num2=${num1 + (num2 * num1) / num2}`);
// 2. 赋值运算符
// =， += ，-=， *=， /=， %=
let num3 = 10;
let num4 = 5;
console.log(num3, num4);
num4 = num3 + num4;
console.log(`num4的值=${num4}`);
num4 += 10;
console.log(`num4的值=${num4}`);
num4 = num4 - num3;
console.log(`num4的值=${num4}`);
num4 -= 10;
console.log(`num4的值=${num4}`);
num4 *= 10;
console.log(`num4的值=${num4}`);
num4 /= 2;
console.log(`num4的值=${num4}`);
num4 %= 4;
console.log(`num4的值=${num4}`);
// 3. 比较运算符
// > < >= <= == === != !==
/*
>= 大于或者等于
<= 小于或者等于
== 等于 --- 只比较值,不比较类型
=== 严格等于--- 既比较值，又比较类型
!= 不等于---只比较值,不比较类型
!== 严格不等于--- 既比较值，又比较类型
!--- 取反,把true变成false，把false变成true
*/
console.log(3 > 5); //f
console.log(3 < 5); //t
console.log(3 >= 5); //f
console.log(3 <= 5); //t
console.log(3 <= 3); //t
//==---左右两边'值'是否相等
console.log(3 == 5); //f
console.log(3 == "3"); //t
//===---左右两边是否'类型'和'值'都相等
console.log(3 === 3); //t
console.log(3 === "3"); //f
//!=---左右值不相等
console.log(3 != 5); //t
console.log(3 != "5"); //t
console.log(3 != 3); //f
console.log(3 != "3"); //f
//!==---左右两边是否不全等
console.log(3 !== 5); //t
console.log(3 !== "5"); //t
console.log(3 !== 3); //f
console.log(3 !== "3"); //t
//4. 逻辑运算符
// && || !
// 逻辑与 && 一假则假
console.log(false && false); // false
console.log(false && true); // false
console.log(true && false); // false
console.log(true && true); // true
console.log(3 > 5 && 2 < 4); // false
// 逻辑或 || 一真则真
console.log(true || false); // true
console.log(false || true); // true
console.log(true || true); // true
console.log(false || false); // false
// 逻辑非 取反
console.log(!false); // true
console.log(!true); // false
//5. 三元运算符
// 条件表达式 ? 表达式1 : 表达式2
// 条件表达式为t，输出表达式1
// 条件表达式为f，输出表达式2
let num5 = 10;
let num6 = "10";
let num7 = num5 >= num6 ? num5 : num6;
console.log(num7, typeof num7);
// 6. 字符串拼接运算符
// +
num8 = "hello" + 10;
console.log("hello" + "world");
console.log("hello" + 10);
console.log(typeof num8);
// 7. 一元运算符
// ++ --
/* ++:变量自身的值加1，例如: x++
--:变量自身的值减1，例如: x--
*/
let num9 = 10;
let num10 = 15;
num9++;
num10--;
console.log(num9);
console.log(num10);
</script>效果:
