初识JavaScript(js)
网页上的脚本语言,运行执行逻辑代码,可以使网页实现一个动态的效果。
组成
核心语法-ECMAScript :规范js的基本语法
文档对象模型-DOM(Document Object Model):提供一系列操作文档的方法。
浏览器对象模型-BOM(Browser Object Model):提供一系列操作浏览器的方法。
特点:动态的(可以重新赋值)、弱语言(变量的类型,可能运算时间会发生改变)、基于原型、解释型(脚本语言 js/python等)。
js书写
内部js写法:
推荐写在body结束标签之前,内容写在script标签内。
外部js写法:
新建一个.js格式的文件,书写js代码。但不通过link引入,通过script标签的src属性引入。
js输出内容的方法
注意:文本都需要加引号
弹出框 alter
alter('你好’)(进入浏览器页面后就可以看到)
控制台 console.log
console.log('你好!')(点击检查在控制台可以看到)
书写规范:
- 严格区分大小写
- 半角输入(标点符号)
- 严格缩进(增加代码的可读性,维护性)
- 语句结束后加分号
声明变量
声明变量 let
<script>
//第一种方式
// 声明变量
let cs;
// 将 开始 赋值给变量cs
cs = '开始';
// 通过console方法,打印cs值
console.log(cs);
//第二种方式
// 声明变量并且赋值
let cs = '结束';
console.log(cs)
</script>
变量的命名规范:
- 不能以数字开头,符号只能是$或者_
- 不能用关键字
- 变量名严格区分大小写
- 见名知意
1.可以进行变量运算
// 运算
let a = 1;
let b = 2;
let sum = a + b;
console.log(sum);
2.不可重复声明
3.一次性声明多个变量用逗号隔开
// 一次性声明多个变量
let text1 = '可行', text2 = 22;
console.log(text1, text2)
4.省略let 解析器会帮我们隐式声明,但不利于表达意图
5.声明变量,重复给这个变量赋值,后者会覆盖前面的
6.可以利用const来声明常量(不可以修改的,且声明时必须要赋值)
数据类型
1.数值类型 number
整数和小数都包括在内
正无穷大:console.log(Infinity);
负无穷大:console.log(-Infinity);
特殊值:NaN(not a number)非数字
2.字符串类型 string
用单引号/双引号包裹起来的文本
console.log('有一点难受');
如果内部文本已经使用单引号了,可以用双引号进行包裹
如果想内部和外部使用同样的引号,可以在前面加上转义字符\
\n:在内部使用换行
定义转换为字符串:let str = String();
字符串拼接:console.log(str1+str2);
但凡+两侧有一侧是字符串,就会认为是字符串拼接。
str.length:获取字符串长度
${}:模板字符串
let age = 20;
console.log('我今年${age}岁了');
3.布尔值类型 boolen
console.log(1>2);
通过typeof判断数据类型
console.log(typeof true);
Undefined类型
打印值是未定义的
空类型 unll
可以手动设置
let num = null;
bigint --> 超大整数
js能表示的最大整数
console.log(Number.MAX_SAFE_INTEGER);
js能表示的最小整数
console.log(Number.MIN_SAFE_INTEGER);
类型判断
console.log(typeof 2); //number
let a; console.log(typeof a); //undefind
console.log(llun); //null
console.log(null); //object
undefind的实用性比object强
isNaN方法判断是否为非数字
console.log(isNaN(123)); // False
isFinite判断是否为正常的值
console.log(isFinite(123)); // True
console.log(isFinite(Infinity)); // False
console.log(isFinite(null)); // True (默认转化为0)
类型转换
显式类型转换
let a = 123;
let str1 = Boolen(a); //将a的123转换为布尔值
constle.log(str1); // True
let num = Number(false); // 将布尔值转换为数字
console.log(num); // 0
隐式类型转换
+是特殊的。任何值,只要一边是字符串,结果都是字符串
let num1 = 2+'123'; // 2123
除了+以外的算术运算符 - *等都会把数据转成数字类型
let num2 = '222'-1; // 221
数组
概念:将多个元素(通常是一个类型)放到一个集合里面的集合称为数组。
含义:数组是一个有序的列表,可以存放任意的数据并且它的长度也可以任意调整。
数组的创建
// 创建空数组
let arr=[];
// 在数据[]里存放多条数据,每条逗号隔开
let arr1=[1,2,'一花','二乃'];
console.log(arr);
// 用Array方法创建数组
let arr2=Array('三玖',20);
console.log(arr2);
// 数组是一个有序列表
let num=[1,2,3,4,5];
num.length=3; // 将数组长度赋值为3,多出来的数组会被切掉
console.log(num);
获取数组的列表项
// 获取数组中的粉色,并取出来
let arr3=['红色','粉色','蓝色'];
// 获取数组项 数组名[下标]
console.log(arr3[1]);
push 新增数组值
// 新增数组值
let Arr = ['我','和','你'];
// 给下标为0的值赋值
Arr[0] = '她';
// 给下标为2的值赋值,有就进行修改
Arr[2] = '他';
// 给下标为3的值赋值,没有就新增
Arr[3] = '一起';
console.log(Arr);
let array = [11,22,33];
// push可以在原数组后面添加新的数组项
array.push(444,555);
console.log(array);
删除数组值 pop / shift / splice / slice
let per=['一花','二乃','三玖'];
// 可以这样删除
per[2]='';
console.log(per);
// 也可以使用pop返回要删除最后一个项
console.log(per.pop());
// 使用shift返回要删除的第一个值
console.log(per.shift());
// unshift()将新数组项添加在数组最前面
per.unshift('四叶');
console.log(per);
// splice() 万能方法,增删改
let newArr = [12,23,34,45];
newArr.splice(1,2,'五月');
// 第一个值(1):从数组的第几项开始裁剪
// 第二个值(2): 裁剪的数量几个
// 第三个值(3): 修改进数组内的值
console.log(newArr);
// slice()
let arr = ['你在','做什么','呢?'];
console.log(arr.slice(1)); // 做什么呢? 从下标为1的值开始裁剪
console.log(arr.slice(0,2)); // 你在做什么 左闭右开区间
一些数组的方法:
toString / join / reverse / sort
let num1 = [1,2,3];
// toString():将数组类型转换为字符串,返回字符串结果
console.log(num1.toString());
// join 将数组转换为字符串
let num2 = [1,2,3];
// 将逗号改为空格隔开
console.log(num2.join(' '));
// 将数组的位置进行颠倒
console.log(num2.reverse());
// sort排序
num3 = [2,1,3];
// 放入函数
num3.sort(function(a,b){return a-b;});
// 箭头函数写法 从小到大(升序)
num3.sort((a,b) => a-b);
// 箭头函数写法 从大到小(降序)
num3.sort((a,b) => b-a);
console.log(num3);