本文已参与「新人创作礼」活动，一起开启掘金创作之路。
🌴 2022.3.15 早八
前言
🎬本文章是 【JAVA WEB开发技术】 专栏的文章，主要是上课的随堂笔记与练习
🔗JAVA WEB开发技术专栏 传送门
💻提示：目录顺序以当堂内容(教材)为准，所以并非“1、2、3”
📽本节主要内容：JS语言基础(语法,关键字,数据类型,变量,运算符)
3.1 JavaScript脚本语言
3.1.1什么是JavaScript
JavaScript是一种基于对象和事件驱动并具有安全性能的解释型脚本语言。它不需要进行编译，而是直接嵌入在HTTP页面中，把静态页面转变成支持用户交互并响应应用事件的动态页面
🚀 JavaScript 是脚本语言
- JavaScript 是一种轻量级的编程语言
- JavaScript 是可插入 HTML 页面的编程代码
- JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行
- JavaScript 很容易学习
3.1.2 JavaScript的特点
🚀 解释性
JavaScript不同于一些编译性的程序语言，例如C、C++等，它是一种解释性的程序语言，它的源代码不需要经过编译，而直接在浏览器中运行时被解释
🚀 基于对象→封装、继承、多态
JavaScript是一种基于对象的语言。这意味着它能运用自己已经创建的对象。因此，许多功能可以来自于脚本环境中对象的方法与脚本的相互作用
🚀 事件驱动
JavaScript可以直接对用户或客户输入做出响应，无须经过Web服务程序。它对用户的响应，是以事件驱动的方式进行的
🚀 跨平台
JavaScript依赖于浏览器本身，与操作环境无关，只要能运行支持JavaScript的浏览器就可正确执行
🚀 安全性
JavaScript是一种安全性语言，它不允许访问本地的硬盘，并不能将数据存入到服务器上，不允许对网络文档进行修改和删除，只能通过浏览器实现信息浏览或动态交互
3.1.3 JavaScript与Java的区别
🚀 基于对象和面向对象
javaScript是一种基于对象和事件驱动的脚本语言，它本身提供了非常丰富的内部对象供设计人员使用；而Java是一种真正的面向对象的语言，即使是开发简单的程序，也必须设计对象
🚀 解释和编译
JavaScript是一种解释性编程语言，其源代码在发往客户端执行之前不需经过编译，而是将文本格式的字符代码发送给客户端由浏览器解释执行；而Java的源代码在传递到客户端执行之前，必须经过编译才可以执行
🚀 弱变量和强变量
JavaScript采用弱变量，即变量在使用前无须声明，解释器在运行时将检查其数据类型；而Java则使用强类型变量检查，即所有变量在编译之前必须声明
3.2 在Web页面中使用JavaScript
3.2.1 在页面中直接嵌入JavaScript
JS脚本必须位于
<script>标签内，可被放置在 HTML 页面的<body>和<head>部分中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
var t=new Date()
alert("现在是"+t.getHours()+":"+t.getMinutes()+"欢迎访问本站点")
</script>
</head>
<body>
</body>
</html>
3.2.2 链接外部JavaScript
可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。如需使用外部文件，在
<script>标签的src属性中设置该 .js 文件
.js文件
var t=new Date()
alert("现在是"+t.getHours()+":"+t.getMinutes()+"欢迎访问本站点")
.html文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js" type="text/javascript"></script>
</head>
<body>
</body>
</html>
3.3 JavaScript语言基础
3.3.1 JavaScript的语法
JavaScript的语法与JAVA、C++大同小异
- JavaScript区分大小写
- 每行结尾的分号 ==可有可无==
- 变量是 ==弱类型==
- 使用大括号标记代码块
- 注释:单行
//，多行/* */
3.3.2 JavaScript中的关键字
| abstract | continue | finally | instanceof | private | this |
|---|---|---|---|---|---|
| boolean | default | float | int | public | throw |
| break | do | for | interface | return | typeof |
| byte | double | function | long | short | true |
| case | else | goto | native | static | var |
| catch | extends | implements | new | super | void |
| char | false | import | null | switch | while |
| class | final | in | package | synchronized | with |
3.3.3 JavaScript的数据类型
JavaScript 数据类型主要有字符串
String、数字Number、布尔Boolean、数组Array、对象Object、空Null、未定义Undefined
| 类型 | 说明 | 举例 |
|---|---|---|
| 数值型 | JavaScript的数值型数据又可以分为整型和浮点型两种 | 729 3.1415926 |
| 字符型 | 字符型数据是使用单引号或双引号括起来的一个或多个字符 | 'a' |
| 布尔型 | 布尔型数据只有两个值，即true或false，主要用来说明或代表一种状态或标志。在JavaScript中，也可以使用整数0表示false，使用非0的整数表示true | true,false,0,1 |
| 转义字符 | 以反斜杠开头的不可显示的特殊字符通常称为控制字符，也被称为转义字符 | \b \n \f \t \r \’ \” \\ |
| 空值 | JavaScript中有一个空值（null），用于定义空的或不存在的引用。如果试图引用一个没有定义的变量，则返回一个null值 | var tmp = null; |
| 未定义值 | 当使用了一个并未声明的变量，或者使用了一个已经声明但没有赋值的变量时，将返回未定义值（undefined） | var tmp ; |
🚀 JavaScript 数字
JavaScript 拥有动态类型，相同的变量可用作不同的类型.即“弱变量"
var x; // x 为 undefined
var x = 5; // 现在 x 为数字
var x = "John"; // 现在 x 为字符串
🚀 JavaScript 字符串
可在字符串中使用引号，只要不匹配包围字符串的引号
var answer="It's alright";
var answer="He is called 'Johnny'";
var answer='He is called "Johnny"';
🚀 JavaScript 数组
new Array()
var cars=new Array();
cars[0]="Saab";
cars[1]="Volvo";
cars[2]="BMW";
//或者
var cars=new Array("Saab","Volvo","BMW");
[ ]
var cars= [ ];
cars[0]="Saab";
cars[1]="Volvo";
cars[2]="BMW";
//或者
var cars= ["Saab","Volvo","BMW“];
🚀 JavaScript 对象
对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔
JAVAScript的对象不像JAVA,C++,需要声明定义，而是直接建立
var person={firstname:"John", lastname:"Doe", id:5566};
var person={
name : "小明",
sex : "男",
like : function(){
return ‘篮球、音乐';
}
};
var person=new Object();
person.name='小明';
person.sex='男';
person.like=function(){
return ‘篮球、音乐';
}
//寻址方式两种
name=person.name;
sex=person["sex"];
document.write(person.name + "<br>");
document.write(person["sex"] + "<br>");
3.3.4 变量的定义及使用
🚀 变量的命名规则
变量可以使用短名称（比如 x 和 y），也可以使用描述性更好的名称（比如 age, sum, totalvolume）
- 变量必须以字母开头，变量也能以 $ 和 _ 符号开头
- 变量名称对大小写敏感（y 和 Y 是不同的变量）
- 不能使用关键字
🚀 变量的声明
使用 var 关键词来声明变量
var carname; //未赋值，默认为undefined
可以在一条语句中声明很多变量。该语句以 var 开头，并使用逗号分隔变量即可
var lastname="Doe", age=30, job="carpenter";
🚀 变量的作用域
局部作用域和全局变量与C+和JAVA同理，变量生命周期有点像C++的析构，不知道一样不一样
🚁 JavaScript 局部作用域
变量在函数内声明，为局部作用域，只能在函数内访问
🚁 JavaScript 全局变量
变量在函数外定义，即为全局变量，网页中所有脚本和函数均可使用
🚁 JavaScript 变量生命周期
JavaScript 变量生命周期在声明时初始化
局部变量在函数执行完毕后销毁
全局变量在页面关闭后销毁
🚁 举个栗子
var a=10;//全局变量
function fun(){q
var b=20;//局部变量
console.log(a,b);
}
fun();//无法访问局部变量b
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
var a=10;
function fun(){
var b=20;
console.log(a++,b++);
}
</script>
</head>
<body>
<button type="button" onclick="fun()">按钮</button><!-- 每点一次a++，b不变，因为局部变量每次执行完都会销毁，再次调用函数，b=10 -->
</body>
</html>
3.3.5 运算符的应用
🚀 赋值运算符
| 运算符 | 描述 | 例子 |
|---|---|---|
| = | 将右边表达式的值赋给左边的变量 | userName="mr" |
| += | 将运算符左边的变量加上右边表达式的值赋给左边的变量 | a+=b //相当于a=a+b |
| -= | 将运算符左边的变量减去右边表达式的值赋给左边的变量 | a-=b //相当于a=a-b |
| *= | 将运算符左边的变量乘以右边表达式的值赋给左边的变量 | a*=b //相当于a=a*b |
| /= | 将运算符左边的变量除以右边表达式的值赋给左边的变量 | a/=b //相当于a=a/b |
| %= | 将运算符左边的变量用右边表达式的值求模，并将结果赋给左边的变量 | a%=b //相当于a=a%b |
| &= | 将运算符左边的变量与右边表达式的值进行逻辑与运算，并将结果赋给左边的变量 | a&=b //相当于a=a&b |
| |= | 将运算符左边的变量与右边表达式的值进行逻辑或运算，并将结果赋给左边的变量 | a|=b //相当于a=a|b |
| ^= | 将运算符左边的变量与右边表达式的值进行异或运算，并将结果赋给左边的变量 | a^=b //相当于a=a^b |
🚀 算术运算符
| 运 算 符 | 描 述 | 示 例 |
|---|---|---|
| + | 加运算符 | 4+6 //返回值为10 |
| - | 减运算符 | 7-2 //返回值为5 |
| * | 乘运算符 | 7*3 //返回值为21 |
| / | 除运算符 | 12/3 返回值为4 |
| % | 求模运算符 | 7%4 返回值为3 |
| ++ | 自增运算符。该运算符有两种情况：i++（在使用i之后，使i的值加1）；++i（在使用i之前，先使i的值加1） | i=1; j=i++ //j的值为1，i的值为2 i=1; j=++i //j的值为2，i的值为2 |
| -- | 自减运算符。该运算符有两种情况：i--（在使用i之后，使i的值减1）；--i（在使用i之前，先使i的值减1） | i=6; j=i-- //j的值为6，i的值为5 i=6; j=--i //j的值为5，i的值为5 |
🚀 比较运算符
🚀 逻辑运算符
| 运算符 | 描述 | 例子 |
|---|---|---|
| && | and | (x < 10 && y > 1) 为 true |
| || | or | (x==5 || y==5) 为 false |
| ! | not | !(x==y) 为 true |
🚀 条件运算符
variablename=(condition)?value1:value2
