js语言简介
- 脚本语言(解释型语言,不需要编译,直接运行)
- 存放位置
- 客户端
- 表单验证
- 特效制作
- 数据交互
- 服务端
- nodejs (结合mysql使用) —》koa 框架
- 组成
- ECMAscript js 基础语法
- DOM 文档对象模型
- BOM 浏览器对象模型
js引入
- 行内式 写在html标签中
- 内嵌式 写在script 标签中
- 外链式 外部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>
<!-- 行内样式 -->
<button onclick="alert('122')" > 按钮</button>
<button id="btn2">按钮2</button>
<!-- 写在下面;防止空指针 -->
<script>
let btn2 = document.getElementById("btn2");
btn2.onclick=function(){
alert("点击");
}
</script>
<!-- 引入js文件,同理写在下面 -->
<script src="demo.js"></script>
</body>
</html>
js输入输出
- alert() 弹窗输出
- console.log() 控制台输出,会换行
- prompt 弹出输入框
js变量
var v;
var 声明的变量,可以变量提升;全局作用域(函数内变成局部作用域);可重复声明
let l;
let 声明的变量,不可以变量提升;块级作用域;不可重复声明
当没有var 或者let 声明的时候,默认是 var声明;
<script>
//var 变量提升
console.log(unm);
var unm = 10;
// let 报错 不能变量提升
console.log(unmm);
let unmm = 10;
var v = 10;
var v = 20;
console.log(v); //20
let l = 10;
// let l = 20; // 报错
console.log(l);
if(true){
var v1 = 10;
}
console.log(v1); //10
if(true){
let l1 = 10;
}
// console.log(l1); //报错
//常量
const con = 10;
// con=20; //报错,只能一次赋值
console.log(con);
// 当没有var 或者let 声明的时候,默认是 var声明;
l = 12;
l = 10;
l='12';
if(true){
n=2.3;
}
console.log(n); //2.3
console.log(typeof l); //String
</script>
js数据类型
基本数据类型
Number 数值型(整数和浮点数)
String 字符串 String s = “”; 单引号、双引号都表示字符串
Boolean true或者false 等价与1或者0;
Underfind 未定义(变量只声明,未赋值)
null 空
typeof 变量名; 判断基本数据类型; null 的类型为object ; NAN 非数值的Number型
复杂数据类型
- 数组
- 对象
- funtion 函数
数据类型转换
- 转换为字符串: .toString() 方法 ; String(变量名) 强制类型转换 ;+ 字符串拼接
- 转换为数值类型: parseInt(‘12’) 转整型,parseFloat(‘4’) 转浮点型,Number()强制类型转换;字符串的 隐式转换:‘12’-0 , ‘12’/1 , ‘12’*1
- 转换为Boolean : 代表空、否定的值会被转换为 false ,如 ‘’、0、NaN、null、undefined 其余值都会被转换为 true
var variable;
console.log(variable); // undefined
console.log('你好' + variable); // 你好undefined
console.log(11 + variable); // NaN
console.log(true + variable); // NaN
js运算符
a == b ; 判断两边的值是否相等(会隐式转换)
a===b; 判断两边的值和数据类型相等
数组
数组声明: 两种方式
数组长度可设置修改,即可以手动修改数组大小,实现扩容;数组变短,直接丢弃后面的元素;数组变长,后面增加空白元素(undefined);
数组元素可以为任意类型;
var arr1 = new Array(); //空数组
var arr = new Array(2); //长度为2的空数组
var arr4 = new Array(2,3);
console.log(arr4); // 2,3
console.log(typeof arr1); //object
var arr2 = []; //空数组
var arr3 = ['1','2','3','4'];
var array1 = [1,"test",true]; //任意类型
console.log(arr3); // ['1', '2', '3', '4']
console.log(arr3[0]); // 1
console.log(arr3[10]); // undefined
console.log(arr1[0]); // undefined
// 数组遍历
for(var i = 0;i<arr3.length;i++){
console.log(arr3[i]);
}
console.log("==================");
arr1.length = 2; // 数组长度可被修改
console.log(arr1.length); //2
for(var i = 0;i<arr1.length;i++){
console.log(arr1[i]); //undefin
}
arr3.length = 6;
console.log(arr3[5]); //undefined
//判断是否是数组
console.log(array1 instanceof Array); //true
console.log(Array.isArray(array1)); //true
//排序和反转
console.log(arr3.sort(function(a,b){
return b-a; //降序
// a-b 升序
}));
//反转
console.log(arr3.reverse());
//数组末尾添加元素,返回数组长度
console.log(array1.push("123",12));
console.log(array1);
//数组末尾删除一个元素
console.log(array1.pop());
console.log(array1);
//数组开头添加元素,返回数组长度
console.log(array1.unshift("123",12));
console.log(array1);
//数组开头删除一个元素
console.log(array1.shift());
console.log(array1);
//查找数组索引
array1.indexOf(1);
array1.lastIndexOf(1);
//数组转字符串
var str = array1.toString();
//join 参数为空时默认按”,“ 分割 ;
var str2 = array1.join(" ");
console.log(str2);
//数组拼接 concat()
//数组截取 slice(begin,end)
//数组删除 splice(开始位置,删除个数);
函数 function
- 函数声明方式
- function 函数名( 参数列表){ };
- var 变量名 = function(参数列表){ };
- (function( ){ })( 参数列表); 直接运行
- 第一种声明方式写在调用前后都可,第二种类似于变量,写在调用前;
- 函数调用
- 实参个数大于形参,直接丢弃后面的参数;
- 实参个数小于形参,返回NaN
- 函数返回
- 当函数没有返回值的时候,返回undefined;
function fun(a,b){
return a+b;
}
function fun1(a,b){
console.log(a+b);
}
fun1(10,30); //40
console.log(fun1(10,30)); // 40 undefined
console.log(fun(1,2)); //3
console.log(fun('1','2')); //12
console.log(fun('1','2','3')); //12
console.log(fun(1)); //NaN
fun1(1); //NaN
//匿名函数声明,采用变量的方式
var fn = function(){
console.log("fn");
}
fn();
(function(a,b){
console.log(a+b);
})(5,6); //11
js作用域
- 全局作用域 作用于所有代码执行的环境(整个 script 标签内部)或者一个独立的 js 文件。
- 局部作用域 作用于函数内的代码环境,就是局部作用域。 因为跟函数有关系,所以也称为函数作用域。
- js没有块级作用域 也就是{ } 大括号
- 全局变量
- 在全局作用域下用var 声明的变量叫做全局变量(在函数外部定义的变量)
- 特殊情况下,在函数内不使用 var 声明的变量也是全局变量(不建议使用)
- 局部变量
- 在函数内部 var 声明的变量是局部变量
- 局部变量只能在该函数内部使用
- 函数的形参实际上就是局部变量
js 对象
js 对象分为:
- 自定义对象
- 内置对象 (Math、 Date 、Array、String等 )
- 浏览器对象
Math
属性,方法名 功能 Math.PI 圆周率 Math.floor() 向下取整 Math.ceil() 向上取整 Math.round() 四舍五入版 就近取整 注意 -3.5 结果是 -3 Math.abs() 绝对值 Math.max()/Math.min() 求最大和最小值 Math.random() 获取范围在[0,1)内的随机值
for(i = 0;i<25;i++){
// ran = Math.floor(Math.random()*10); // [0,1) 左闭右开
ran2 = (Math.random()*10).toFixed(2); //保留2位小数
console.log(ran2);
}
Date
var now = new Date();
var future = new Date("2022/2/2");
console.log(now.getDate); //获取当前日期
console.log(now.getMonth); // 获取月份
console.log(now.getDay); //获取星期几
// 实例化Date对象
var now = new Date();
// 1. 用于获取对象的原始值
console.log(date.valueOf())
console.log(date.getTime())
// 2. 简单写可以这么做
var now = + new Date();
// 3. HTML5中提供的方法,有兼容性问题
var now = Date.now();
String
基本包装类型就是把简单数据类型包装成为复杂数据类型,这样基本数据类型就有了属性和方法
js 会把基本数据类型包装为复杂数据类型,其执行过程如下 :
var str = 'andy';
//基本数据-》包装类型-》调用方法
console.log(str.length);
//转换过程
// 1. 生成临时变量,把简单类型包装为复杂数据类型
var temp = new String('andy');
// 2. 赋值给我们声明的字符变量
str = temp;
// 3. 销毁临时变量
temp = null;
字符串不可变:
js里的字符串不可变指的是里面的值不可变,虽然看上去可以改变内容,但其实是地址变了,内存中新开辟了一个内存空间
var str1 = "abc123";
//返回指定索引位置的字符
console.log(str1.charAt(1));
//返回指定索引位置的字符Ascll码
console.log(str1.charCodeAt(1));
//返回指定索引位置的字符
console.log(str1[1]);
var str2 = "jack";
//拼接字符串
console.log(str1.concat(str2));
//截取字符串 substr(开始index,截取的长度)
console.log(str1.substr(3,3)); //123
//截取字符串 slice(start,end) end取不到
console.log(str1.slice(3,6)); //123
//截取字符串 substring(start,end) end取不到,不接受负值
console.log(str1.substring(3,6)); //123
//替换
console.log(str1.replace("123","1")); //abc1
console.log(str1); //abc123
//分割
console.log(str1.split("2")); // ['abc1', '3']