一、JavaScript简介
1. 什么是JavaScript
JavaScript简称为JS，由网景公司开发的客户端脚本语言，不需要编译，可以直接运行
Web前端三层：
- 结构层 HTML 定义页面的结构
- 样式层 CSS 定义页面的样式
- 行为层 JavaScript 用来实现交互，提升用户体验
2. JavaScript的作用
- 在客户端动态的操作页面
- 在客户端做数据的校验
- 在客户端发送异步请求
二、引用方式
1. 内联方式
在页面中使用script标签，在script标签的标签体中编写js代码
script标签可以放在页面的任意位置，一般放在head中
<script type="text/javascript">
js代码
</script>
2. 行内方式
在普通标签中编写js代码，一般需要结合事件属性，如onclick、onmouseover等
<input type="button" value="点我" onclick="alert('Hello')"/>
<!--使用超链接的href属性执行js时，必须添加javascript前缀-->
<a href="javascript:alert('World')">我是超链接</a>
3. 外部方式
使用单独的 .js 文件定义，然后在页面中使用script标签引入外部脚本文件
<script type="text/javascript" src="js文件的路径"></script>
注：如果某个script标签用于引入外部js文件，则该script标签的标签体中不能再写js代码
.js文件：
alert("哈哈");
.html文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS的引用方式</title>
<style>
div{
width: 100px;
height: 100px;
background: #ccc;
}
</style>
<!--1.内嵌方式-->
<script>
alert("Hello JavaScript"); //弹出一个窗口
</script>
<!--3.引用外部的js文件-->
<script src="js/hello.js"></script>
</head>
<body>
第一个JavaScript程序 <br>
<!--2.内部方式-->
<input type="button" value="点我" onclick="alert('我被点了，晕了！')">
<div onmouseover="alert('走开！')">把鼠标移上来！</div>
<a href="javascript:alert('超链接被触发')">我是超链接</a>
</body>
</html>
三、基本用法
1. 变量
js是一门弱类型的语言，声明变量时使用var关键字，不需要指定变量的类型
语法： var 变量名=变量值;
在ECMAScript 6规范中新增let关键字，也用于声明变量
使用let声明的变量支持块级作用域，而使用var声明的变量不支持块级作用域
注：在IDEA中配置ES版本 Settings——>Languages & FrameWorks——>JavaScript——>JavaScript Language version
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
//变量
var age;
age = 18;
var name = "tom";
sex = "male"; //强烈不建议
var a = 5, b = 2, c = 3;
var 姓名 = "张三"; //不建议
alert(age);
//使用var声明的变量不支持块级作用域,在代码块中的变量外部也可以使用,如果需要支持块级作用域,使用let声明变量
{
var x = 6;
let y = 7;
}
alert(x);
//使用let声明的变量不能在代码块外使用
//alert(y);
</script>
</head>
<body>
</body>
</html>
2. 输入和输出
输出：
- alert() 弹出警告框
- console.log() 输出到浏览器的控制台
- document.write() 输出到页面
输入：
- prompt() 弹出输入框，获取用户输入的数据
- 使用
typeof 变量判断变量的类型 - 使用
Number(变量)将字符串转换为数值
3. 转义符
常用转义符：
\n换行\t缩进\"双引号\'单引号
4. 注释
单行注释： //
多行注释： /* */
5. 编码规范
代码区分大小写
每条语句以分号
结尾代码缩进
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
//输出信息
alert('嘿嘿');
console.log('哈哈');
document.write('嘻嘻');
//输入
var age = prompt('请输入您年龄:');
console.log(typeof age);
console.log(age+2);
age = Number(age);
console.log(age+2);
//转义符
console.log('Hello\nWorld');
console.log('Hello\tWorld');
console.log("Hello\'World");
console.log('Hello\"World');
</script>
</head>
<body>
</body>
</html>
四、核心语法
1. 数据类型
基础数据类型：
- string 字符串
- number 数值（NaN表示非数字Not a Number，其自身是number类型，表示数值的不正常状态）
- boolean 布尔
- null 空类型 （使用typeof查看类型，如果数据是null、Date、Array等，会返回object）
- undefinded 未定义类型
数据类型转换：
-
转换为number
使用Number()、parseInt()、parseFloat() -
转换为string
拼接空字符串 -
转换为boolean
使用Boolean()
注：0、空字符串、null、undefinded、NaN会被转换成false，其他值都会被转换为true
2. 运算符
算术运算符:+、-、*、/、%、**（a**b表示a的b次方）、++、- -
比较运算符：<、>、>=、<=、== 、===、!=（==是等于，只判断内容是否相等；===是全等于，既要判断内容，也要判断数据类型）
赋值运算符：=、+=、=、*=、/=、%=
逻辑运算符：&&、||、!
条件运算符：条件?表达式1:表达式2
3. 选择结构
if…else、switch
4. 循环结构
while、do…while、for、for…in
break、continue
var str='welcome'; // 可以将字符串看作是由多个字符组成的集合
for(var index in str){ //index表示集合中每个元素的索引，并不是元素本身
// console.log(index);
console.log(str[index]);
}
5. 数组
5.1 定义方式
语法：
var arr = new Array();
var arr = new Array(值1,值2...);
var arr = [值1,值2...];
注意：
- 数组长度会自动扩展
- 数组中元素的默认值为undefined
- 使用length属性来获取数组的长度
5.2 常用方法
| 方法 | 描述 |
|---|---|
| sort() | 排序，默认按字符编码的顺序排列，非string类型会自动转换为string，可自定义比较规则 |
| reverse() | 反转，将数组元素倒序排列 |
| join(separator) | 将数组中元素使用指定的分隔符连接成字符串，默认通过逗号进行连接 |
| indexOf() | 返回指定元素在数组中首次出现的位置 |
| slice(begin,end) | 截取数组中索引从begin到end的元素，左闭右开，如果省略第二个参数，则表示截取到末尾 |
| toString() | 将数组转换为字符串 |
5.3 二维数组
二维数组可以认为是特殊的一维数组，即一维数组中的每个元素又是一个一维数组
语法：
var arr = new Array();
arr[0] = new Array();
arr[1] = new Array();
arr[][] = 值;
var arr=[
[值1,值2...],
[值1,值2...],
[值1,值2...]
];
6. 函数
6.1 自定义函数
语法：
function 函数名(参数1,参数2...){
// 函数体
}
注意：
- 定义函数时不需要指定参数的类型
- 实参个数和形参个数可以不同，未指定参数时其默认值为undefined
- 不需要指定返回值的类型，如果有返回值，直接使用return返回即可
- 如果函数中没有使用return返回值，则默认返回undefined
变量的作用域：
- 局部作用域
在函数中声明的变量，只能在该函数内访问，函数运行结束后变量自动销毁 - 全局作用域
在函数外声明的变量，在任何位置都可以访问 - 块级作用域
使用let关键字声明的变量，只能在声明它的代码块内访问
6.2 回调函数
不立即执行的函数调用，满足一定条件时才会执行或者由别的代码调用执行，称为回调函数callback 调用时只写函数名，没有小括号()和参数
应用：
- 作为事件绑定的函数
- 作为另一个函数的参数
<script>
function f1() {
console.log(111);
}
//将一个函数作为另一个函数的参数来回调
function f2(x,y){
y();
}
//点击页面时执行函数f1
window.onclick = f1; //回调函数,不能加小括号
f2(5,f1);
/*
*示例：利用回调函数自定义sort（）的比较规则
*/
var arr = [12,4,23,6,2,86];
/*定义一个比较器
*升序：如果第一个参数比第二个参数大，则返回正数
* 如果第一个参数比第二个参数小，则返回负数
* 如果两个参数相等，则返回0
*/
function compareFn(a,b) {
return a-b;
}
arr.sort(compareFn); //将自定义的比较规则函数作为参数传入
console.log(arr);
</script>
6.3 匿名函数
没有名字的函数，称为匿名函数，一般用于回调
应用场景：
- 用于函数的回调
window.onclick=function(){ // 匿名函数，用于回调
console.log("点击了页面！");
};
- 用于一次性执行的函数，会自动执行，称为自执行函数
(function(){
console.log("此函数只执行一次！");
})();
6.4 箭头函数
ES6中允许使用“箭头” => 定义函数，称为箭头函数，也叫lambda表达式，是一种特殊的匿名函数
<script>
/*
*箭头函数,语法:参数 => 返回值
*/
//示例1
// var a = function (x) {
// return x*2;
// }
var a = x => x*2;
//示例2:如果箭头函数没有参数或有2个以上参数，则必须使用小括号表示参数部分
// var a = function () {
// return 5;
// }
var a = () => 5;
// var a = function (x,y) {
// return 5;
// }
var a = (x,y) => 5;
//示例3:如果箭头函数的函数体多于一条语句，则必须使用大括号将它们括起来
// var a = function (x,y) {
// var sum = x + y;
// return sum;
// }
var a = (x,y) => {
var sum = x + y;
return sum;
};
</script>
注：因为内容过多，所以我分成了三篇博客，分别为JavaScript小白入门笔记（一）、JavaScript小白入门笔记（二）、JavaScript小白入门笔记（三），没有看过其他两篇的朋友可以关注我的博客阅读