前端三层
语言 | 功能 | |
---|---|---|
结构层 | HTML | 搭建结构、放置部件、描述语义 |
样式层 | CSS | 美化网页、实现布局 |
行为层 | JavaScript | 实现交互效果、数据收发、表单验证等 |
1、JS书写位置
- 在
<body>
中的<script>
标签中书写 JS 代码 - 将 JS 代码单独保存为
.js
文件,然后在 HTML 文件中使用<script src=""></script>
引入
在body中书写JS代码
<!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>Document</title>
</head>
<body>
<!-- 在 HTML5 之前,必须要加上 type 属性,并且里面的内容一定要正确!-->
<!--
<script type="text/javascript">
</script>
-->
<!-- 目前都是使用 HTML5,所以不用写 type 属性,默认就是 JS -->
<!-- 推荐把 <script> 写到 body 的末尾(避免 JS 发生阻塞时页面受到牵连)-->
<script>
// 弹窗输出一句话
// 每一句 JS 代码以分号结尾!
alert('你好,JavaScript!');
</script>
</body>
</html>
将 JS 代码单独保存为 .js 文件
将 JS 代码单独保存为 .js 文件,然后在 HTML 文件中使用 <script src=""></script>
引入
-
文件结构
-
index.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>Document</title>
<!--
<script src="./js/index.js"></script>
-->
</head>
<body>
<!-- 也可以放在 body 末尾(推荐)-->
<script src="./js/index.js"></script>
</body>
</html>
- index.js
alert('你好,JavaScript!');
2、输出语句
alert()
:弹出消息框console.log()
:控制台输出
2-1 弹窗输出——alert
alert可以无对象调用,在首页,会优先于其他代码显示
- alert:消息、警报
【功能】
在浏览器(JavaScript 引擎 例如:Chrome V8)解析到 JS 文件中的alert()
语句时,便会中断 JS 脚本的执行,同时弹出消息框,直到用户单击确定后,才继续执行后续的 JS 脚本。
alert(111);
window.alert(123);
2-2 控制台输出——console.log()
- console:控制台
- log:记录、日志
【功能】
在浏览器(JavaScript 引擎 例如:Chrome V8)解析到 JS 文件中的console.log()
语句时,会直接在浏览器控制台输出语句,并自动继续执行后续的 JS 脚本。
3、变量
- 定义变量可以使用:
var
、let
、const
var
:可以控制变量提升 -----> 推荐let
:let定义的变量必须先定义再使用const
:const是用来定义常量 ---->常量必须有初始值
变量提升:
- 当浏览器开辟出供代码执行的栈内存后,代码并没有自上而下立即执行,而是继续做了一些事情:把当前作用域中所有带var/function关键字的进行提前的声明和定义 => 变量提升机制
- 变量声明的提升:可以提前使用一个稍后才声明的变量,而不会引发异常
- 在执行所有代码前,JS 有预解析阶段,会预读所有变量的声明(不会提升赋值,只会提升定义)
//使用var定义变量
var m = 25 ;
var n = 'HELLO';
//使用变量 —— 这里直接使用输出语句,将变量在控制台打印
console.log(a); //25
console.log(b); //HELLO
//改变变量的值
var m = 54;
console.log(m); //54
3-1 变量的命名
-
命名规则
- 只能由
字母
、数字
、_
、$
组成,但不能以数字开头(建议普通代码一律以字母开头) - 不能是 关键字 或 保留字
- 变量名大小写敏感,a 和 A 是两个不同的变量
函数、类名、对象的属性等也都要遵守这个标识符的命名规则!
- 只能由
- 默认的命名风格
- 小驼峰命名法:
mathTestScore
-----> 推荐 - C 风格变量命名法:
math_test_score
- 小驼峰命名法:
- 一个变量只定义,但没有赋初值,默认值是
undefined
(未定义)- 一个变量只有被
var
定义,并赋初值之后,才算正式初始化完成
4、基本数据类型
typeof
type of 用来判断数据类型
- 5种基本数据类型的 typeof 检测结果
类型名 | typeof 检测结果 | 值举例 |
---|---|---|
数字类型 | number | 5 、2.5 、-0.5 |
字符串类型 | string | '前端' 、"后端" 、'3.14' |
布尔类型 | boolean | true 、false |
undefined 类型 | undefined | undefined |
null 类型 | object(可以理解为空对象) | null |
4-1 Number(数字)类型
- 整数、小数都是number类型
typeof 925; // number
typeof 0.5; // number
typeof -24; // number
- 支持科学计数法表示数字
3e8; // 300000000
typeof 3e8; // number
3e-4; // 0.0003
typeof 3e-4; // number
- 可以使用不同进制的数字
- 二进制——
b
- 八进制——
o
- 十六进制——
x
- 二进制——
//进制表示
//二进制——b
var num6 = 0b111; //15
console.log(num3);
//八进制——o
var num3 = 0o17; //15
console.log(num3);
//十六进制——x
var num4 = 0xF; //15
console.log(num3);
- 特殊的数字型值——
NaN
NaN
不是数字的数字;是一个特殊的值;不是数字,但数据类型是number
//字符串相减(-*/)的结果就是NaN
//0/0 = NaN
//NaN == NaN 结果是false
console.log(typeof(NaN));
console.log('a'-'a');
4-2 String(字符串类型)
- js中没有字符型,只有字符串型
字符串用引号包裹,双引号或者单引号均可
//string
//js中没有字符型,只有字符串型
var s1 = "a";
console.log(typeof(s1)); //string
var s2 = 'a';
console.log(typeof(s2)); //string
//=== 全等于 值/地址都必须相等
console.log(s1===s2); //true
- 字符串拼接
- 字符串与字符串拼接
- 字符串与变量拼接
- 空字符串与变量拼接
//字符串与字符串拼接
console.log('HELLO' + 'World'); //HELLO World
//字符串与变量拼接
console.log('Lily'+20); //Lily20
//空字符串与变量拼接 ---> 主要目的是将数字转换为字符串
console.log(' '+100); //'100' 字符串的100
- 字符串的常用方法
方法 | 功能 |
---|---|
charAt() | 得到指定位置字符 |
substring() | 提取子串(左闭右开) |
substr() | 提取子串 |
slice() | 提取子串 |
toUpperCase() | 将字符串变为大写 |
toLowerCase() | 将字符串变为小写 |
indexOf() | 检索字符串 (返回查询字符的下标[不存在返回-1 ]) |
trim() | 删除首尾空格 |
trimStart() | 删除首部空格 |
trimEnd() | 删除尾部空格 |
5、数据类型的转换
5-1 其他值 —> Number
Number()
转换为数字
Number('-123.45'); // -123.45
// 字符串中不支持有非数值字符
Number('123年'); // NaN
Number('2e3'); // 2000
Number(''); // 0
// 字符串不支持是数学表达式
Number('1+1'); // NaN
// 除了字符串外,还可以直接放一个表达式
Number(1+1); // 2
Number(true); // 1
Number(false); // 0
Number(undefined); // NaN
Number(null); // 0
parseInt()
将字符串
或浮点数
转为整数
。
//自动截掉第一个非数字字符之后的所有字符
parseInt('3.14'); // 3
parseInt('3周吉瑞.14'); // 3
parseInt(-3.14); // -3
//如果字符串以非数字开头,则转为 NaN
parseInt('圆周率是3.14'); // NaN
//true、false、undefined、null 转为 NaN
parseInt(true); // NaN
parseInt(false); // NaN
parseInt(undefined); // NaN
parseInt(null); // NaN
parseFloat()
将字符串转为浮点数
parseFloat('3.14'); // 3.14
parseFloat('3.14是圆周率'); // 3.14
parseFloat('3.14.15'); // 3.14
5-2 其他值–>字符串
String()
//传入Num类型
String(123); // '123'
String(123.4); // '123.4'
String(2e3); // '2000'
Stiing(NaN); // 'NaN'
//Infinity 无穷大 -Infinity无穷小
String(Infinity); // 'Infinity'
//进制数,会先转换成十进制再输出
String(0xf); // '15'
//传入布尔值或特殊值
String(true); // 'true'
String(false); // 'false'
String(undefined); // 'undefined'
String(null); // 'null'