JavaScript的简介及基本语法
1. JavaScript是一种脚本语言，它可以嵌入到HTML中，由浏览器解释执行，不需要编译，简称为js
2.JavaScript的作用：1.制作网页特效，2.前后端数据交互
3.JavaScript的特点：
3.1解释执行--不需要编译，由浏览器解释执行
3.2弱类型--变量类型可以随时改变
3.3基于对象--不是面向对象的语言，但是它是基于对象的
4.JavaScript的基本写法方式：
4.1 内部写法：在script标签中编写js代码
4.2 外部写法：在script标签中通过src属性引入外部js文件
<button id="btn">点击</button><button id="btn2">点击2</button><script>let btn = document.getElementById('btn');btn.onclick = function () {alert('hello world');};</script><script src="js/demo1.js"></script></body>
</html>5.注释：
5.1分类：
单行注释：//注释内容
多行注释：/* 注释内容 */
5.2 作用：
1.对代码进行解释说明，提高代码的可读性
2.注释的代码不会被执行
5.3 vscode快捷键：
单行注释开关：ctrl + /
多行注释开关：ctrl + shift + /
6.输入输出语句：
6.1 输入语句：prompt('提示信息')，弹出一个对话框，对话框中有一个输入框，用户可以在输入框中输入内容，点击确定按钮，将输入的内容返回
6.2 输出语句：alert('提示信息')，弹出一个对话框，对话框中显示提示信息
6.3 输出语句：console.log('提示信息')，在控制台中输出提示信息
6.4 输出语句：document.write('提示信息')，将提示信息写入到页面中
<!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><h1>JavaScript学习</h1><script>// 6.输入和输出语句：// 6.1 输入语句：prompt('提示信息')--- 弹出一个对话框，对话框中有一个输入框，用户可以在输入框中输入内容，点击确定按钮，将输入的内容返回let keywords = prompt('请输入关键字：');// 6.2 输出语句：alert('提示信息')--- 弹出一个对话框，对话框中显示提示信息// alert(keywords);// 6.3 输出语句：console.log('提示信息')--- 在控制台中输出提示信息--- 一般用于调试--F12打开控制台,或者右键检查打开控制台// console.log(keywords); //console.log 快捷键 clg// 6.4 输出语句：document.write('提示信息')--- 将提示信息写入到页面中document.write(keywords);</script></body>
</html>变量
1.什么是变量：变量是用来存储数据的容器,本质上是内存中的一块空间
2.为什么要使用变量：方便数据的使用
3.变量的声明与使用：
3.1声明变量：let 变量名;0
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.变量名要见名知意
<script>// 3.1声明变量：let 变量名;---- let是ES6中声明变量的关键字let name;let NAME;var age; // var是ES5中声明变量的关键字console.log(name); //undefined 未定义--- 变量声明后，没有赋值，那么变量的值就是undefined// 3.2使用变量：变量名 = 值;name = "张三";console.log(name); //张三// 3.3声明并赋值：let 变量名 = 值;----变量初始化let schoolName = "清华大学";console.log(schoolName);name = "李四";console.log(name); //李四//5.多变量同时声明：let 变量名1,变量名2,变量名3;let userName, userAge, userSex;userName = "王五";userAge = 18;userSex = "男";console.log(userName, userAge, userSex);</script>运算符分类：
1. 算术运算符
+ - * / %
2. 赋值运算符
=， += ，-=， *=， /=， %=
3. 比较运算符
> < >= <= == === != !==
4. 逻辑运算符
&& || !
5. 三元运算符
条件表达式 ? 表达式1 : 表达式2
6. 字符串拼接运算符
+
7. 一元运算符
++ --
字符模版：`字符串${变量}字符串` -- `` -- tab键上面的那个键
*/
// 7. 一元运算符 ++ --
/*
++ 自增运算符---让变量的值加1
-- 自减运算符---让变量的值减1
<script>let str1 = 'hello';let str2 = 'world';let num14 = 10;let num15 = '20';let str3 = str1 + str2 + num14;console.log(str3); //let num16 = num14 + num15;console.log(num16);let num17 = +prompt('请输入一个数字：'); // + 号可以把字符串转换成数字console.log(num17 + 20, typeof num17); // 1020 "string"let num11 = 20;let num12 = '20';let num13 = num11 >= num12 ? num11 : num12;console.log(num13, typeof num13); // 20 "number"let num1 = 10;let num2 = 3;console.log(`num1+num2=${num1 + num2}`); // 13console.log(`num1-num2=${num1 - num2}`); // 7console.log(`num1*num2=${num1 * num2}`); // 30console.log(`num1/num2=${num1 / num2}`); // 3.3333333333333335console.log(`num1%num2=${num1 % num2}`); // 1let num3 = 20; // = 赋值运算符---把等号右边的值赋值给等号左边的变量console.log(`num3的值是${num3}`); // 20let num4 = 30;num4 += 10; //等价于 num4 = num4 +console.log(`num4的值是${num4}`); // 40let num5 = 40;num5 -= 10; // num5 = num5 - 10;console.log(`num5的值是${num5}`); // 30let num6 = 50;num6 %= 10; // num6 = num6 % 10;console.log(`num6的值是${num6}`); // 0let num7 = 10;let num8 = 20;let num9 = 10;let num10 = '20';console.log(num7 > num8); // falseconsole.log(num7 < num8); // trueconsole.log(num7 >= num8); // falseconsole.log(num7 <= num9); // trueconsole.log(num7 == num9); // trueconsole.log(num7 == num8); // falseconsole.log(num8 === num10); // falseconsole.log(num8 == num10); // trueconsole.log(num7 != num8); // trueconsole.log(num7 != num9); // falseconsole.log(num7 !== num10); // truelet blon1 = true;let blon2 = false;let blon3 = false;console.log(!blon1); // falseconsole.log(!blon2); // trueconsole.log(!blon3); // trueconsole.log(!blon1 && blon2); // falseconsole.log(blon1 && !blon3); // falseconsole.log(!blon2 && !blon3); // trueconsole.log(blon1 && blon2); // falseconsole.log(blon1 && blon3); // trueconsole.log(blon2 && blon3); //falseconsole.log(blon1 || blon2); // trueconsole.log(blon1 || blon3); // trueconsole.log(blon2 || blon3); // false</script>