JavaScript基础和一些常用的语法

1.JavaScript引入和用法<script></script>标签

1.1在页面里面引入js文件

<script src="练习.js"></script>    <!-- src里面引入你js的路径 -->

1.2在页面直接写js不用外部引入

<script>
    //写js代码的地方
</script>

2.基本数据类型

2.1点击、输入框、键盘事件,

<button onclick="add">点击按钮</button>

onclick			//鼠标点击触发；
onmouseover		//鼠标移上触发；
onmouseenter    //鼠标移上触发，只能经过自身触发事件；
onmouseout		//鼠标离开触发；
onchecked       //发生改变时触发
onblur			//输入框失去焦点触发；
onfocus		    //输入框获取焦点触发；
onmousemove		//鼠标移动触发，在指定的区域鼠标移动1px触发一次；
onmouseup		//鼠标弹起触发；
onmousedown		//鼠标按下触发；
onkeyup		    //键盘事件，某个按键按下松开时触发；
onkeydown		//键盘事件，某个键盘按下时触发，按下不松开会一直触发，可以识别功能键；
onkeypress		//键盘事件，某个键盘按下触发，不识别功能键ctrl、shift以及箭头功能；
addEventListener()	//方法注册监听事件,要用传统事件的话不带on,写法：数组名.addEventListener('事件',执行函数)，括号写法:('click',function(){触发之后的效果})

 2.2在js里面获取html标签

//获取id标签的元素
document.getElementById('#名')             //获取元素对象,通过id标签获取元素,查看类型输出的来类型为object；
document.getElementsByTagName('标签名')；  //获取单个标签的元素，根据类名返回元素对象集合；
//    H5新增的两个获取元素的标签	注意通过id获取方式加#，通过class获取方式加.(点)；
//获取class标签的元素
document.querySelector('.名')			   //查询单个标签，根据第一个选择器返回第一个元素；
document.querySelectorAll('标签名')		   //查询多个标签，根据指定的选择器返回；
document.body							   //获取特殊标签body；
document.documentElement				   //获取特殊标签html；
document.body.style                        //就是页面的css的；
prompt();                                  //输入框；

2.3、基础用法，函数，常用的基础

//JavaScript 输出
console.log("控制台打印");                       //这是在控制台打印
alert("弹出框");                                 //这是弹出框
document.write("方法将内容写到 HTML 文档中")     //方法将内容写到HTML文档中(可以写标签)
//innerHTML                                      //写入到 HTML 元素
document.body.style                              //就是页面的css的；
prompt();                                        //输入框；
            
//函数

//普通函数
function fun (){
    console.log(这是一个箭头函数);
} 
fun()//函数调用 

//箭头函数      
var funt=>(){
    console.log(这是一个箭头函数);
}               
console.log("funt");//打印函数 

2.4数组方法

// 写法都是：数组名.方法
lenght	                    //数字长度写法：数组名.lenght，如果要拿的数组的最后一个元素可以写lenght-1,写法为：数组名.lenght-1；
concat()                    //方法用于两个或多个数组合并；
indexOf(检查的元素)         //该方法用于检测索引下标，indexOf(检查的元素,从第几个开始查)；
charAt(要返回第几个数组)    //返回元素；
forEach()                   //方法对数组每一个元素执行一次给定的函数；
join(分隔符)                //方法将一个数组的所有元素连接成一个字符串,并返回这个字符串；
split()                     //方法将一个字符串转成数组，括号里可以填分隔符比如('-')；
toString()                  //元素转换字符串;写法：数组名.toString() ；
push()                      //方法将一个或多个元素添加到数组的末尾，并且返回数组的长度；
shift()	                    //头部删除；
pop()                       //方法删除数组中最后一个元素，并返回删除的该元素的值；
unshift()                   //方法将一个或多个元素添加到数组的头部，并返回添加过后的数组长度；
eval()                     //吧字符串当成函数去运行
sort(function(a,b){return a - b}) //数字排序；
sort()                      //是进行字母排序；
splice(操作位置(索引下标)， //删除个数，添加的元素) ；
slice(开始位置，结束位置)   //包左不包右 方法截取某一段；
reverse()                  //翻转数组；
includes()                 //检测字符串是否包含某个数,有的话返回:true,没得话返回:false;写法：数组名.includes(3)；
substr(从第几个开始，取几个)//输出取得字符串；
toLocaleUpperCase()        //转换为大写；
toLocaleLowerCase()        //转换为小写；

//数字
Math.PI()                  //圆周率输出结果为:3.141592653589793;写法：Math.PI；
Math.floor()               //向下取整;写法：Math.floor(数组名)；
Math.ceil()                //向上取整;写法：Math.ceil(数组名)；
Math.max()                 //输出最大的数字：Math.max(数组名1,数组名2,数组名3)或Math.max(1,2,3)；
Math.min()                 //输出最小的数字：Math.min(数组名1,数组名2,数组名3)或Math.min(1,2,3)；
Math.random()              //随机数,范围是0-1可取到小数;写法：Math.random()；
Math.floor(Math.random()*(max-min+1))+min        //这是个固定格式:随机数max和min是自定义的数字,定义的位数就是结果的位数;

// 随机数，固定格式，想要几位数就加几个零；
function 函数名(min,max){
    return Math.floor(Math.random()*(max-min+1))+min
}；

2.5时间、时间戳、时间戳转换

// Date() 日期对象，它是一个构造函数，必须用new来调用，写法：数组名 =new Date()；
// 时间写法都是：数组名.方法（只能写在有new Date()调用的数组里面）；
getFullYear()		                //获取：年份；
getMonth()+1		                //获取：月份，因为月份是0—11；
getMDate()			                //获取：天数；
getDay()			                //获取：星期几；
getHours()			                //获取：小时；
getMinutes()		                //获取：分钟；
getSeconds()		                //获取：秒数；
+new Date()		                    //获取当前时间
+new Date('2022-4-16-10:50:00')		//未来时间；
${+new Date()}		                //获取当前总毫秒数，固定格式；
${new Date().toLocaleString()}	    //获取时间并打印到页面，只能在`里用`，固定格式；

//获取时间戳
const shi=Date.now()
// 转换时间戳
const data=new Date(shi)
const dateString = data.toLocaleDateString();
console.log(dateString); //转换结果:年/月/日
const timeString = data.toLocaleTimeString();
console.log(timeString);//转换结果:小时:分钟:秒
const dateTimeString = data.toLocaleString();
console.log(dateTimeString);//转换结果:年/月/日 小时:分钟:秒

2.6网页标签的类型，写法基本都是：数组名.方法

innerText			    //该属性获取双标签，进行修改内容，写法：数组名.innerText='新内容'；
innerHTML			    //该属性是修改文本内容的，该属性是替换文本的，写法数组名.innerHTML='新内容'；
className			    //该属性是只能修改class标签的属性的，写法：数组名.className='新的属性名'；
classList.add('')		//添加类名；
classList.remove('')	//移除类名；
removeAttribute()		//删除属性值，写法：对象名.removeAttribute('属性名')，div.removeAttribute('id')；
setAttribute()		    //设置自定义属性，括号里写：('属性名',属性值)；
getAttribute()		    //获取自定义属性值，括号里填属性名；
dataset			        //获取自定义属性，data-自定义名,开头的集合，想获取单个写法dataset.自定义名(这是H5新增标签)；
createElement('标签')	//创建标签，写法：var 数组名=document.createElement('标签')；
appendChild()		    //添加标签到指定的位置，写法：指定位置数组.appendChild(标签名)，ul..appendChild(li)，   //不需要引号括号里填创建的标签的函数，(末尾添加)，；
insetBefore()		    //创建标签，不需要引号，写法(创建的标签的函数,'指定位置代码为.children[0]')；
removeChild()		    //删除标签括号里填要删除标签；
children[0]			    //获取标签，中括号里填要获取的标签位置(下标)；
remove() 			    //删除节点；
cloneNode()			    //克隆，clone是克隆，node是节点,括号里填true深度拷贝-拷贝标签和内容，false浅拷贝-只拷贝标签不拷备内容；
disabled			    //禁用或不禁用，true是禁用，false不禁用，写法：数组名.disabled=true/false；
target				    //删除；

2.7本地存储，回话存储

// 存储-查看方法：打开网页F12或右击检测找到应用程序；
window.sessionStorage                        //回话存储，关闭浏览器数据会销毁，在同一个窗口(页面)下数据可以共享，以键值对的式形存储便用；
sessionStorage.setItem('list', data)	     //回话存储；
sessionStorage.getItem('list')		         //获取回话数据；
sessionStorage.removeItem('list')		     //删除数据；
sessionStorag.clear()				         //清空数据；

// window.localStorage本地存储，只能手动删除元素才能销毁数据关闭浏览器依然存在，可以多个窗口(页面)共享(同一个浏览器可以共享)，以键值对的式形存储便用；
localStorage.setItem('list', data)	         //本地存储；
localStorage.getItem('list')			     //获取本地数据；
localStorage.removeItem('list')		         //删除数据；
localStorage.clear()				         //清空数据；

2.8定时器

setTimeout(调用函数，延迟时间毫秒数)	  //只能执行一次，毫秒不写的话默认是0，单位是毫秒数1秒等于1000毫秒；
setInterval(调用函数，间隔时间)	      //每间隔时间都会重新调用函数；
clearTimeout(要清除定时器的数组名)；
clearInterval（要清除定时器的数组名）；

2.9路由跳转方式

//location对象的常用方法；
location.search			        //拿到网页提交的信息；
location.assign('跳转的路径')	//有历史记录，可以实现后退功能；
location.replace('跳转的路径')	//没历史记录，不可实现后退功能；
navigator.userAgent.match	    //判断用户那个终端打开页面的，判断是否为（移动端或PC端）；

2.10offse系列-元素偏移，类似一外边距

offsetParebt	            //返回有定位的父级如果父级没有定位返回body；
offsetTop	                //返回自己上距离带有定位父级的偏移量；
offsetLeft	                //返回自己左距离带有定位父级的偏移量；
offsetWidth	                //返回自身宽度，包含内边框+边框+内容大小；
offsetHeight	            //返回自身高度，包含内边框+边框+内容大小；
client                      //系列-元素可视区，类似外边距；
clientTop	                //返回元素上边框的大小；
clientLeft	                //返回元素左边框的大小；
clientWidth	                //返回自身包含padding(内填充)内容区的宽度、不含边框，返回数值不带单位；
clientHeighe	            //返回自身包含padding(内填充)内容区的宽度、不含边框，返回数值不带单位；
//scroll系列-元素滚动（onscroll是滚动事件）；
scrollTop		            //返回被卷进去的上侧距离，返回值不带单位吧 ；
scrollLeft		            //返回被卷进去的左侧距离，返回值不带单位吧 ；
scrollWidth		            //返回自身实际款度不含边框；
scrollHeight		        //返回自身实际高度不含边框；
pageYOffset		            //页面被卷进去的部分，写法window.pageYOffset；

 2.11节点

// 节点
node				                            //节点；
nodeName			                            //节点类型；
nodeType			                            //节点值；
parentNode			                            //父节点；
childNodes			                            //所有子节点；
chlideNodes[i]		                            //某一个子节点；
children			                            //所有子元素节点；

nextSibling			                            //下一个兄弟节点；
nextElementSibling	                            //下一个兄弟元素节点；
previousSibling		                            //上一个兄弟节点；
previousElementSibling	                        //上一个兄弟元素节点；

createElement('创建的标签名')				    //创建标签元素节点；
appendChild(添加元素的对象名-不需要引号)		    //父节点尾部添加；
insertBefore(添加元素的对象名-不需要引号)		//父节点头部添加；
removeChild(移动的元素)					        //删除指定的元素；

2.12这些都是只能写在addEventListener()(方法注册监听事件)里面的事件类型

// 这些都是只能写在addEventListener()(方法注册监听事件)里面的事件类型；
contextmenu			    //可以控制右键菜单写法：document.addEventListener('contextmenu',function(e){})；
selectstart			    //可以控制文字写法：document.addEventListener('selectstart',function(e){})；
e.preventDefault()		//禁止默认行为这个，写在contextmenu是禁止鼠标右键菜单，写在selectstart是禁止选取文字；
e.clientX,e.clientY		//获取鼠标在页面坐标，X是X轴,Y是Y轴；
e.pageX,e.pageY		    //获取鼠标在页面文档；
e.screenX,e.screenY		//获取鼠标在整个电脑屏幕的坐标；
e.keyCode			    //输出按键对应的数值，用来判断键盘的按键是否为对应的数值好用；