目录
-简介
--ECMAScript
---介绍
1966年11月，js的创造公司-NetScape公司决定将JavaScript交给国际化组织ECMA，希望这门语言能够成为国际标准。第二年ECMA就发布了262号标准文件(ECMA-262)的第一版，该版规定了浏览器脚本语言的标准，并将此语言称为ECMAScript，就是1.0版。
该标准一开始是针对JavaScript语言制定的，但却没有称其为JavaScript。一是因为商标，JavaScript本身已被NetScape注册为商标；二是想体现这门语言的制定者是ECMA而不是NetScape，有利于保证这门语言的开发性和中立性。
---历史
| 年份 | 名称 | 描述 |
|---|---|---|
| 1997 | ECMAScript 1 | 第一个版本 |
| 1998 | ECMAScript 2 | 版本变更 |
| 1999 | ECMAScript 3 | 添加正则、try/catch |
| 2009 | ECMAScript 5 | 添加strict mode,json支持 |
| 2011 | ECMAScript 5.1 | 版本变更 |
| 2015 | ECMAScript 6 | 添加类和模块 |
| 2016 | ECMAScript 7 | 添加指数运算符** 增加Array.prototype.includes |
--JavaScript
尽管ECMAScript是一个重要的标准，但它并不是js的唯一部分。实际上js包括3部分：
- ECMAScript
- DOM(Document Object Model)
- BOM(Browser Object Model)
简单来说，ECMAScript是JS的规格，JS是ECMAScript的实现；ECMAScript描述了JS语言本身的相关内容。
JS语言的特点：
- JavaScript是脚本语言
- js也是面向对象的轻量级的编程语言
- js是可插入HTML页面的代码
- js嵌入HTML页面后，可由所有的代理浏览李执行
- JavaScript很容易学习
PS：浏览器提供了一个快捷简单写js代码测试的平台
右键-检查-控制台
-JS基础
--注释
---单行注释
// 单行注释---多行注释
/*
多行注释1
多行注释2
多行注释3
*/--变量与常量
---声明
在js中，首次声明一个变量需要用关键字声明：
1 var：声明的是全局变量，一变则变
var name = 'weer';2 let:声明的是局部变量
let age = 18;注：如果你的js版本是5.1及以下，则无法使用let；若是6.0及以上则两者兼容
在Python中没有真正意义上的常量，一般用全大写字母表示常量。
但在js中，有真正意义上的常量，与C语言类似，用const声明
const pi = 3.14;---命名规范
1 变量名只能是字母、数字、下划线、$，不能以数字开头
2 命名推荐使用小驼峰式命名法：userName,dataIndex
3 不能用关键字命名
--数据类型
js和Python的数据类型一样，都是动态类型。
---数值类型(number)
包括整型、浮点型、NaN(Not a Number)
类型转化：parseInt()、parseFloat()
>var a = 11;
var b = 8.8;
typeof a;
typeof b;
<'number'
>typeof NaN;
<'number'
>parseInt(11.11);
<11
>parseFloat('12.12');
<12.12
>parseInt('123jaljfi');// 只取开头数字
<123
>parseInt('ajfie123jajl');
<NaN---字符串类型(string)
用单引号或双引号命名字符串类型变量
模板字符串：
多行文本用模板字符串(``)命名
>let more = `111
222`;
<undefined
>typeof more
<'string'模板字符串还能用于格式化字符串
>let name = 'weer';let age = 18;
<undefined
>let s = `my name is ${name},age is ${age}`;
<undefined
>s;
<'my name is weer,age is 18'字符串常用方法
js字符串常用方法 .length 返回字符串长度 .trim() 移除字符串两端空白/空格
// 不能去除指定内容
.trimLeft() 移除左侧空格 .trimRight() 移除右侧空格 .charAt(n) 返回第n个字符 .indexOf(substring) 子序列首字符串索引位置 .substring(from,to) 切片
// 不识别负数
.slice(start,end) 切片 .toLowerCase() 所有字母小写 .toUpperCase() 所有字母大写 .split(delimter,n) 按delimter分割字符串成n个元素的数组 .concat(p) 连接p序列
---布尔类型(boolean)
js中布尔值全是小写的：true，false
表示false的有：0，null，NaN，undefined，空字符串等
>null：表示值为空，一般是指定或清空一个变量时用
>undefined：指定义了一个变量但没有赋初始值，或函数没有指定返回值
--流程控制
---if判断
使用语法：
if： if(条件){处理}
if-else： if(){}else{}
if-else if-else： if(){}else if(){}else{}---switch
var num = 1;
switch(num){
case 0:
console.log('www');
break;
case 1:
console.log('mmm');
break;
default:
console.log('qqq');
break;
};---while
使用语法：while(限制条件){处理代码};
var i = 0;
while(i<10){
console.log(i);
i++;
}---for
使用语法：for(循环条件){循环代码}
// 循环打印1~10
for(let i=1;i<=10;i++){
console.log(i);
}---三元运算符
var res = 3>5?0:1; // res结果为1--运算符
---算术运算符
+ - * / ...
i++表示先用后算，++i表示先算后用
---逻辑运算符
&&(与) ||(或) !(非)
&&前面为真取决于后面的数据；||前面为假取决于后面的数据。
>1 && '1';
<'1' // 是'1'不是1
>0 && '1';
<0
>1 || '1';
<1
>0 || '1';
<'1' // 是'1'不是1---比较运算符
> < >= <= == ===
注：js中==是弱等于，===才是强等于：
>1 == '1';
<true
>1 === '1';
<false---赋值运算符
= *= -= += ...
--函数
---定义方法
function 函数名(形参){函数逻辑};
1 调用时传少参数或传多参数都不会报错，js只取对应数据
2 js内置关键字arguments可以获取传入所有实参的值
function func(a,b){ if(arguments.length < 2){ console.log('传少了') }else if(arguments.length > 2 ){ console.log('传多了') }else{ console.log(a+b) } };
---使用
·有返回值函数：仍用return关键字，多个返回值用数组接收
·匿名函数：需用一个变量来接收 var res = function(){console.log('hhh')};
·箭头函数：左边为形参，右边为返回值
var res=a=>b; <==> var res = function(a){return b};
var res = (id1, id2)=>id1 + id2; <==> var res = function(id1,id2){return id1+id2};
--对象
---数组
类似于Python中的列表[1,2,3]，但不支持负数索引取值
| .length | 数组大小 |
| .push(ele) | 尾部追加ele |
| .pop() | 获取尾部元素并在数组中删除 |
| .unshift(ele) | 头部插入ele |
| .shift() | 获取头部元素并在数组中删除 |
| .slice(start, end) | 切片 |
| .reverse() | 逆置 |
| .join(seq) | 将数组元素连接成字符串 |
| .concat(seq) | 尾部插入数组/连接数组 |
| .sort() | 排序(从小到大) |
| .forEach() | 绑定回调函数 function(function(){}, alter) 传一个参数：元素 传两个参数：元素+索引 传三个参数：元素+索引+元素来源 顶多传三个参数 |
| .splice() | 删除元素并向数组中添加新元素 传两个参数：.splice(0,3)第一个是起始位置，第二个是删除个数 传三个参数：.splice(0,1,666)第一个是起始位置，第二个是删除个数，第三个是添加元素 |
| .map() | 返回调用数组元素的函数处理后的值的新数组 |
---自定义对象
类似Python中的字典{ }
创建方式：
1、直接创建：var d = {'name':'weer', }
2、使用关键字new： var d = new Object() // 创建的d是空的自定义对象
获取方式：
1、d['name']
2、d.name // 更方便
3、for循环 for(let i in d){console.log(i,d[i])};
增值方式：
1、d['age'] = 18;
2、d.age = 18;
---JSON对象
把数据转换为json格式数据供传输交互
序列化 -----------------> JSON.stringfy()
反序列化 ----------------> JSON.parse()
---Date对象
>let timeObj = new Date();
<undefined
>timeObj
<Thu Oct 04 2022 13:13:01 GMT+0800 (中国标准时间)
>timeObj.toLocaleString(); // 转换为好看时间
<'2022/10/4 12:13:01'也可以手动输入时间：
>let t1 = new Date('2022/10/1 11:11:11');
<undefined
>t1;
<Sat Oct 01 2022 11:11:11 GMT+0800 (中国标准时间)
>let t2 = new Date(2022,10,1,11,11,11);
<undefined
>t2;
<Tue Nov 01 2022 11:11:11 GMT+0800 (中国标准时间)时间对象内置方法 let t = new Date();
时间对象内置方法 t.getDate() 获取日 t.getDay() 获取星期 t.getMonth() 获取月份0~11 t.getFullYear() 获取年份 t.getHours() 获取小时 t.getMinutes() 获取分钟 t.getSeconds() 获取秒 t.getMilliseconds() 获取毫秒 t.getTime() 时间戳
---RegExp对象
在js中需要使用正则时就需要用到RegExp(正则)对象
使用方式：
1、let reg1 = new RegExp('^[0-9][a-zA-Z]{1,6}')
2、let reg2 = /'^[0-9][a-zA-Z]{1,6}'/
匹配内容：
1、reg1.test('6weer') // true
2、reg2.test('weer') // false
---math对象(了解)
| abs(x) | 绝对值 | exp(x) | e的指数 |
| floor(x) | 向下取整 | log(x) | 自然对数 |
| max(x,y) | 最大 | pow(x,y) | 幂 |
| random() | 0~1随机数 | round(x) | 四舍五入 |
| sin(x) | 正弦 | sqrt(x) | 平方根 |
| tan(x) | 正切 | cos(x) | 余弦 |
-事件
当触发某个条件时自动触发某个动作
--使用
| onclick | 点击某个对象时调用 的事件句柄 | onfocus | 元素获得焦点 | onkeydown | 某个按键被按下 | onselect | 文本框中内容被选中 |
| ondbclick | 双击某个对象时调用的事件句柄 | onblur | 元素失去焦点 | onkeypress | 某个按键被按下并松开 | onsubmit | form对象的提交按钮被点击 |
| onchange | 文本域的内容改变 | onkeyup | 某个按键被松开 | ||||
| onload | 一张页面或一幅图片完成加载 | ||||||
| onmousedown | 鼠标按钮被按下 | ||||||
| onmousemove | 鼠标被移动 | ||||||
| onmoseout | 鼠标从某元素上移开 | ||||||
| onmouseover | 鼠标移到某元素上 |
--使用方式
<button onclick='func1()'>点我触发事件1</button>
<button id='btn2'>点我触发事件2</button>
<script>
// 第一种方式
function func1(){
alert('事件1')
}
// 第二种方式
let btn2Ele = document.getElementById('d2');
btn2Ele.onlick = function(){
alert('事件2')
}
</script>PS：script标签一般放在body底部
-BOM操作
前面所学js基础好像与操作浏览器和HTML页面没什么关系，因为要介入BOM和DOM
BOM(Browser Object Model)浏览器对象模型，即用js操作浏览器
--对象操作
---window对象
window对象指的是浏览器窗口
>window.innerHeight;//浏览器窗口高度px
<262
>window.innerWidth; //浏览器窗口宽度px
<1279
>window.open('https://www.baidu.com/','','height=400px,width=1000px,top=200px,left=200px'); // 打开小窗百度页面
<Window {window: Window, self: Window, document: document, name: '', location: Location, …}
>window.close(); // 关闭当前页面---window子对象
- 1 navigator
>window.navigator.appName;
<'Netscape'
>window.navigator.userAgent;// !!!
<'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) >Chrome/105.0.0.0 Safari/537.36 Edg/105.0.1343.53'
<window.navigator.appVersion;
>'5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/105.0.0.0 <Safari/537.36 Edg/105.0.1343.53'
>window.navigator.platform;
<'Win32'
>navigator.userAgent;//window的子对象可以不用写window
<'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/105.0.0.0 Safari/537.36 Edg/105.0.1343.53'- 2 history
window.history.back();// 返回上一级
window.history.forward();// 前进到下一级- 3 location
window.location;// 获取当前地址信息
window.location.href;// 获取当前地址
window.location.href = url; //跳转到指定url
window.location.reload(); // 刷新页面--弹出框
- 警告框alert()
alert('hhh') - 确认框confirm()
confirm('are you sure?') - 提示框prompt()
prompt('input your age')
prompt('input your age', '18') // 输入两个参数第二个为默认信息
--计时器
---一定时间后触发一次
setTimeout(function, time) 在time毫秒后触发函数function
clearTimeout(timer) 清除计时器效果，需要传入计时器对象
function func1(){alert(111)};
let t1 = setTimeout(func, 4000); //在4s后执行func1
clearTimeout(t1); //清除计时器效果t1，同步执行，所以func1在这不会执行
---每隔一定时间循环触发
setInterval(function, time) 每隔time毫秒执行一次function
clearInterval(timer) 清除计时器效果，需要传入计时器对象
function func2(){alert(222)};
let t2 = setInterval(func2, 3000); //每隔3s后执行func2
clearInterval(t2); //清除计时器效果t2，同步执行，所以func2在这不会执行---混合使用
function fnt(){alert('hhh')};
function show(){
let t = setInterval(fnt, 3000);
function inner(){
clearInterval(t);
}
setTimeout(inner, 9000);
};
show();-DOM操作
DOM(Document Object Model)文档对象模型，即可以使用js操作HTML页面中的标签
在DOM树中，将每一个标签视为一个节点
--查找标签(必须使用关键字document)
---直接查找
- id查找：document.getElementById()
- 类查找：document.getElementsByClassName()
- 标签查找：document.getElementsByTagName()
注：类查找和标签查找的Element均为复数(因为可能不止一个)，获得的是对象数组
一般通过索引取出对象并赋值给对象变量(变量名一般为xxxEle)
---间接查找(了解)
.parentElement // 拿父标签
.children // 拿所有子标签
.firstElementChild // 拿所有子标签中的第一个
.lastElementChild // 拿所有子标签的最后一个
.nextElementSibling // 拿同级别下面的第一个标签
.previousElementSibling // 拿同级别上面的第一个标签--节点操作
创建标签： document.createElement()
属性操作：
设置属性： .setAttribute(' ', ' ')
获取属性： .getAttribute()
移除属性： .removeAttribute()
标签位置操作：
标签内部追加(尾部追加)： .appendChild()
删除子标签： .removeChild()
替换子标签： .replaceChild()
补：innerText和innerHTML
eg: divEle.innerText 获取标签内部所有文本
divEle.innerHTML 内部文本和标签结构都获取
当用来给标签内部赋值时：
divEle.innerText = '<h1>weer</h1>' 不识别html标签
divEle.innerHTML = '<h1>weer</h1>' 识别标签，自动形成h1标签weer
--获取值操作
通过.value()获取用户输入数据(input标签、select标签...)
获取文件数据用.files[0]获取。.files返回一个列表，第一个即为文件对象
--class操作
.classList # 返回标签类属性的所有值，数组
.classList.remove('c1') # 移除类属性中的c1
.classList.add('c2') # 添加类属性c2
.classList.contains('c3') # 检查是否含有类属性c3
.classList.toggle('c4') # 类属性中有c4即删除，无则添加--css操作
js也能对标签实现css操作，首先应带关键字style起手，且css方法中的-或_在js中统一变为大写即小驼峰式命名
let pEle = document.getElementsByTagName('p')[0];
pEle.style.color = 'red'; // 更改标签颜色
pEle.style.fontSize = '24px'; // 更改标签大小
pEle.style.backgroundColor = 'green'; // 更改标签背景色
pEle.style.border = '3px solid red'; // 设置标签边框
1489
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
