一、JavaScript概述
1.1 定义
JavaScript简称(JS),当前它是一个脚本语言,负责给前端页面添加动态效果。
1.2 特征
-
弱类型语言,声明变量不需要指定对应的数据类型
-
脚本语言,不需要像Java代码一样编译,通过浏览器进行解析执行
-
交互性强,可以单独理解成它是一个语言,可以嵌套在html中进行使用
-
面向对象编程的语言,和Java中的面向对象编程思想相似
-
安全性高,JavaScript语言只能访问浏览器内部的数据,而外部的数据,像磁盘中的数据内容无法访问
1.3 JS使用
-
内联:可以在标签的事件中添加js代码逻辑,当事件触发的时候进行执行js的代码逻辑
例如:<input type="button" value="普通按钮" onclick="alert('内联引入')">
-
内部:在html页面中添加<script></script>,在标签内部进行书写相关逻辑的js代码
<script type="text/javascript">
alert('内部引入');
</script>
-
外部:单独新建js文件,在js文件中进行书写相关逻辑的js代码,然后在html页面中通过script的src属性进行引用外部js的文件路径位置
1.4 案例测试
js01.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>js引入使用案例</title>
</head>
<body>
<!-- JS内联方式引入 -->
<input type="button" value="普通按钮" onclick="alert('内联引入js')">
<!-- JS内部方式引入 刷新浏览器以后执行当前逻辑-->
<script type="text/javascript">
alert("内部引入js");
</script>
<!-- JS外部方式引入 -->
<script type="text/javascript" src="test01.js"></script>
</body>
</html>
test01.js
// 单行注释
/*
* 多行注释
*/
alert("外部引入js");
二、JS语法
2.1 变量
-
var x=10;
-
var d=3.14;
-
x=”今天是星期六”;
-
var p = new Person();
-
var b = true/false;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>变量</title>
</head>
<body>
<script type="text/javascript">
var x = 10;
var d = 3.14;
console.log(x);
console.log(d);
// js是弱类型语言,可以进行自动识别类型
x = "今天是星期六,七夕我和大家一起度过";
console.log(x);
</script>
</body>
</html>
2.2 数据类型
-
JavaScript 不分基本数据类型和引用数据类型,统称对象类型。
-
数值:number相当于java中所有数值类型的总和
-
字符串:string 可以用单引号或双引号修饰
-
布尔值: boolean true/false
-
未定义: undefined 当变量只声明不赋值类型为undefined
undefined与null是划等号的,比较的结果为true
-
自定义对象类型: Hero Airplane Bullet Person Son object
-
typeof (变量) 获取变量的类型 typeof(66 + 6) number类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>数据类型案例</title>
</head>
<body>
<script type="text/javascript">
var a = 99;
var b = 3.14;
var c = "JavaScript";
var d = 'JavaScript';
// 该变量只声明,没有进行初始化,是未定义类型
var e;
//创建日期对象
var date = new Date();
console.log(typeof(a));
console.log(typeof(b));
console.log(typeof(c));
console.log(typeof(d));
console.log(typeof(e));
console.log(typeof(date));
console.log(date);
console.log('判断未定义变量e和null是否相等:' + (e == null));
</script>
</body>
</html>
测试结果:
number number string string undefined object Sat Aug 14 2021 21:03:31 GMT+0800 (中国标准时间) 判断未定义变量e和null是否相等:true
2.3 运算符
-
算术运算符:+-*/%
-
除法运算: 会自动根据结果转换整数还是小数
-
Java: int x = 5; int y=2 x/y=2
-
JS: var x=5; var y=2 x/y=2.5;
-
-
关系运算符:> < >= <= != == ===
-
= =:先统一两个变量的类型再比较值是否相等 “666”==666 true
-
= = =:先比较类型是否相等相等之后再比较值是否相等 “666”===666 false
-
-
逻辑运算符:&& || !
-
赋值运算符:= += -= *= /= %= ++ --
-
三目运算符:?:
2.4 流程控制语句
分支:
-
使用 if 来规定要执行的代码块,如果指定条件为 true
-
使用 else 来规定要执行的代码块,如果相同的条件为 false
-
使用 else if 来规定要测试的新条件,如果第一个条件为 false
-
使用 switch 来规定多个被执行的备选代码块
循环:
-
for - 多次遍历代码块
-
for/in - 遍历对象属性
-
while - 当指定条件为 true 时循环一段代码块
-
do/while - 当指定条件为 true 时循环一段代码块
2.5 方法
-
常用的四种方法:
-
无参无返回值 2. 无参有返回值 3. 有参无返回值 4. 有参有返回值
-
三种声明方法的方式:
function 方法名(参数列表){方法体}
var 方法名 = function(参数列表){方法体}
var 方法名 = new Function(“参数1”,“参数2”,“方法体”);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>方法案例</title>
</head>
<body>
<input type="button" value="调用fn1方法" onclick="fn1()">
<input type="button" value="调用fn5方法" onclick="fn3(6,8)">
<script type="text/javascript">
var width = 100;
var height = 35;
console.log('方式一的方法定义');
/*
* 无参无返回值方法
* 方法定义完以后,需要调用才可以执行方法中的逻辑
*/
function fn1 () {
console.log("无参无返回值方法计算的面积值为:" + (width * height));
}
//调用无参无返回值fn1方法
//fn1();
console.log('-------------------------------------------------------------')
/*
* 无参有返回值方法
*/
function fn2 () {
var s = width * height;
return s;
}
//调用无参有返回值fn2方法
console.log(fn2());
console.log('-------------------------------------------------------------')
/*
* 有参无返回值方法
* 参数不需要指定类型(弱类型语言)
*/
function fn3 (w , h) {
console.log(w * h);
}
//调用有参无返回值方法
fn3(width,height);
console.log('-------------------------------------------------------------')
/*
* 有参有返回值方法
*/
function fn4 (w , h) {
return w * h;
}
console.log(fn4(width,height));
console.log('-------------------------------------------------------------')
console.log('方式二的方法定义');
var fn5 = function(w , h) {
return w * h;
}
console.log(fn5(width,height));
console.log('方式三的方法定义');
var fn6 = new