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']
815
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
