1、JavaScript的介绍
js是一种运行在客户端(浏览器)的编程语言,实现人机交互
1、主要作用
- 网页特效(监听用户的一些行为,让网页做出对应的3反馈)
- 表单验证(针对表单数据的合法性进行判断)
- 数据交互
- 服务器编程
2、JS的引入方式
JavaScript程序是不能被独立运行,他需要被嵌入到HTML当中,然后浏览器才能执行代码,把js代码引入到HTML中,有两种方式
1、内部形式
通过scrpit标签包裹javaScript代码
<!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>
<script>
alert('嗨,欢迎来传智播学习前端技术!');
</script>
</body>
</html>
2、外部形式
一般将JavaScrpit代码写在独立的.js结尾的文件中,通过script标签中的src进行引入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript 基础 - 引入方式</title>
</head>
<body>
<!-- 外部形式:通过 script 的 src 属性引入独立的 .js 文件 -->
<script src="demo.js"></script>
</body>
</html>
3、注释
注释一共有两种 1、单行注释 // 多行注释/* / 被注释的代码是不会被执行的 注释快捷键为* ctrl + /**
<!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>
<script>
// alert('这是一个弹窗')
/*alert('这是一个弹窗')
alert('这是一个弹窗')*/
</script>
</body>
</html>
4、输入和输出三种形式
1、输出
alert() 页面弹出一个输入框
docment.wirte() 输出HTML页面上(可以解析HTML标签)
2、输入
prompt() 弹窗的形式出现在浏览器中,一般需要用户来输出什么
<!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>
<script>
alert('这是一个弹窗')
document.write('向文档中输入数据')
prompt('您想输入点什么呢')
</script>
</body>
</html>
5、变量
变量就是存储数据的容器,用来存储数据
<!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>
<script>
// x是存储变量的标识符,可以通过x标识符把5取出来
let x = 5
let y = 6
</script>
</body>
</html>
1、声明和赋值
声明变量和赋值的格式: 声明关键字、 变量名 、赋值
<script>
// let 为关键字 x为标识符 5为赋值
let x = 5
let y = 6
</script>
注意
- 不允许重复声明
- javascript内置的关键字不能作为变量名
- 允许声明和赋值同时进行
2、变量的命名规则
- 只能是字母、下划线、$ 且不能为数字开头
- 字母区分大小写,数字
- javascript内置关键字不能作为变量进行使用
- 尽量保证变量具有一定的语意,见字知意
6、数据类型
一共分为4个数据类型 1、数值类型 2、字符串类型3、布尔类型 4、undefined类型
检测数据类型可以使用typeof关键字
1、数值类型
- 整数 小数 整数 负数
<!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>
<script>
console.log(typeof 1);
console.log(typeof -1);
console.log(typeof 1.1);
console.log(typeof -1.11);
</script>
</body>
</html>
2、字符串类型
被(‘’)活(“”) 包裹的数据叫做字符串,推荐使用单引号,无论单引号还是双引号,必须成对进行使用
<!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>
<script>
console.log(typeof 'AS');
console.log(typeof "BB");
</script>
</body>
</html>
3、布尔类型
布尔类型有两个固定的值 true和flase
<!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>
<script>
console.log(typeof false);
console.log(typeof true);
</script>
</body>
</html>
4、undefined类型
一个比较特殊的值,可以理解为 变量被声明了 但是没有赋值
<!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>
<script>
let age;
console.log(typeof age);
</script>
</body>
</html>
7、类型转换
1、隐式转换
某些运算符被执行时,系统内部自动将数据进行转换,这种被称为隐士转换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript 基础 - 隐式转换</title>
</head>
<body>
<script>
let num = 13; // 数值
let num2 = '2'; // 字符串
// 结果为 132
// 原因是将数值 num 转换成了字符串,相当于 '13'
// 然后 + 将两个字符串拼接到了一起
console.log(num + num2);
// 结果为 11
// 原因是将字符串 num2 转换成了数值,相当于 2
// 然后数值 13 减去 数值 2
console.log(num - num2);
let a = prompt('请输入一个数字');
let b = prompt('请再输入一个数字');
alert(a + b);
</script>
</body>
</html>
2、显示转换
因为只靠系统内部的隐式转换是不严谨的,因为隐式转换规律并不清晰,大多是靠经验来总结规律,所以一些数据就需要进行显示转换
Number
通过 Number 显示转换成数值类型,当转换失败时结果为 NaN(Not a Number)即不是一个数字。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript 基础 - 隐式转换</title>
</head>
<body>
<script>
let t = '12';
let f = 8;
// 显式将字符串 12 转换成数值 12
t = Number(t);
// 检测转换后的类型
// console.log(typeof t);
console.log(t + f); // 结果为 20
// 并不是所有的值都可以被转成数值类型
let str = 'hello';
// 将 hello 转成数值是不现实的,当无法转换成
// 数值时,得到的结果为 NaN (Not a Number)
console.log(Number(str));
</script>
</body>
</html>