🌴 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