javaScript:是一种轻量解释型语言.浏览器接受到JavaScript代码，并以代码自身的文本格式运行它,当 JavaScript 源代码被执行时，它会被编译成二进制的格式，使代码运行速度更快。尽管如此，JavaScript 仍然是一门解释型语言，因为编译过程发生在代码运行中，而非之前。 JavaScript 转换器都运用了一种叫做即时编译（just-in-time compiling）的技术.
解释和编译区别
解释语言中.代码自上而下运行,且实时返回运行结果.不需要转化为其他形式,代码直接以文本格式被接收和处理
编译语言中:需要将代码转化(编译)成另一种形式才能运行.
服务端和客户端
客户端代码是在用户的电脑上运行的代码，在浏览一个网页时，它的客户端代码就会被下载，然后由浏览器来运行并展示。
而服务器端代码在服务器上运行，接着运行结果才由浏览器下载并展示出来。流行的服务器端 web 语言包括：PHP、Python、Ruby、ASP.NET 以及Node.js
动态页面和静态页面的区别
静态页面一次性设计，信息更新速度相对比较慢。每个页面都有固定的URL，内容相对稳定不会有太大改变，容易被搜索引擎检索，没有后台及数据库支持，制作简单但维护比较困难，数据交互较差，功能限制较大。
动态页面数据库技术为基础，能实现更多功能，对于搜索引擎存在一定问题。信息更新及时，内容丰富，制作复杂。
DOM元素获取
ID获取
使用getElementById获取元素中id的元素
let box = document.getElementById("box")
console.log(box)
输出结果:
进行简单封装：
function $(id){
return typeof(id) === "string " ? document.getElementById(id):id
}
//使用 获取id 为box 的元素信息
console.log($(box))
获取class类名的元素
使用getElementsByClassName获取元素中class类名的元素
<ul>
<li class="item-li"></li>
<li class="item-li"></li>
<li class="item-li"></li>
<li class="item-li"></li>
</ul>
<script>
let lis=document.getElementsByClassName("item-li")
console.log(lis)
</script>
插入标记
使用DOM操作给文档创建大量HTML标记非常麻烦，所以使用插入标记技术方便快捷。
1.使用innerHTML
用于获取或设置HTML元素的内容。它可以用于读取元素中的HTML内容，也可以用于修改元素中的HTML内容。
获取innerHTML
<div id="myDiv">
<h2>使用innerHTML</h2>
<p>方便，快捷</p>
<ul>
<li class="item">1</li>
<li class="item">2</li>
</ul>
</div>
<!-- js -->
<script>
let myDiv = document.getElementById("myDiv")
//打印出结果
console.log(myDiv.innerHTML)
</script>
需要注意的是不同浏览器返回的文本格式会不一样，有些浏览器会将所有标签转换大写，有些浏览器会原原本本的返回。
设置innerHTML
innerHTML的值在浏览器中按照处理HTML的标准方式转化为元素，转换结果根据不同浏览器来显示，如果值是纯文本没有标签，显示结果就是纯文本。
<div id="myDiv"></div>
<!-- js -->
<script>
let myDiv = document.getElementById("myDiv")
myDiv.innerHTML="哈哈哈"
</script>
<div id="myDiv"></div>
<!-- js -->
<script>
let myDiv = document.getElementById("myDiv")
myDiv.innerHTML="<p>哈哈哈</p><span>呵呵呵<span>嘿嘿嘿<b>Hellow</b>"
</script>
innerHTML设置HTML字符串之后，浏览器将字符串解析为相应的DOM树。但并非所有元素都支持innerHTML属性，如：style,table,framest,tr等等。
使用insertAdjacentHTML同样可以插入，他有两个参数：插入位置和插入的HTML文本。该方法可以在指定元素的前、后、开始位置或结束位置插入HTML标记，分别是：beforebegin，afterbegin，beforeend，afterend。
例如：
<div id="myDiv">
insertAdjacentHTML
</div>
<!-- js -->
<script>
let myDiv = document.getElementById("myDiv")
myDiv.insertAdjacentHTML("beforebegin", "<p>beforebegin当前元素之前插入一个紧邻的同辈元素。</p>");
myDiv.insertAdjacentHTML("afterbegin", "<p>afterbegin当前元素下插入一个新的子元素或在第一个子元素之前再插入一个新的。</p>");
myDiv.insertAdjacentHTML("beforeend", "<p>beforeend当前元素下插入一个新的子元素或在最后一个子元素之后插入新的子元素。</p>");
myDiv.insertAdjacentHTML("afterend", "<p>afterend当前元素之后插入一个紧邻的同辈元素。</p>");
</script>
beforebegin是作为前一个同辈元素插入
afterend是作为后一个同辈元素插入
afterbegin是作为第一个子元素插入
beforeend是作为最后一个子元素插入
性能问题
使用innerHTML替换或加入节点可能会导致浏览器内存占用问题
1.使用赋值方式，单独构建一个字符串，然后一次性将结果字符串进行赋值，使innerHTML执行了一次赋值。这样可以减少重建DOM树的次数，提高性能。
let myDiv = document.getElementById("myDiv")
let str = ''
for(let i=0;i<10;i++){
str+='<p>'+i+'</p>'
}
myDiv.innerHTML=str
2.使用textConten，如果不需要解析HTML，只需更新文本内容，可以使用textContent代替innerHTML。textContent不会解析HTML标签，避免了浏览器的解析和处理过程。
3.修改或删除时，先删除要被替换元素的所有事件处理程序，防止元素与事件处理程序之间绑定的关联还存在。
安全问题
使用innerHTML可能会导致安全问题，因为用户可以插入恶意代码。
- 输入验证：对于用户输入进行验证和过滤，确保合法的输入。
- 转义字符：将特殊字符进行转义，防止被解析为HTML或JavaScript代码。
HTML自定义数据属性
HTML5可以为元素添加非标准的属性，也就是自定义属性前缀加data-，为元素添加与渲染无关的信息。可以通过自定义属性作为判断条件或者值来进行DOM操作，增加了操作DOM的灵活性。
或给元素添加不可见数据方便其他处理，或者通过自定义属性知道点击来着页面的哪个部分。
<div data-userName="liSi" data-optionid="1"></div>
动态设置自定义属性
<div id="myDiv"></div>
<script>
let myDiv = document.getElementById("myDiv");
//进行添加自定义属性值
myDiv.setAttribute("data-name","user")
</script>
或
<div id="myDiv"></div>
<script>
let myDiv=document.getElementById("myDiv")
//进行添加自定义属性值
myDiv.dataset.appId=3
</script>
获取自定义属性值
使用dataset.命名（data-命名，但是不加data-前缀）获取自定义属性值
<div id="myDiv"></div>
<script>
let myDiv = document.getElementById("myDiv");
myDiv.setAttribute("data-name","user")
//打印获取自定义属性值
console.log(myDiv.dataset.name)
</script>
使用getAttribute("data-命名")获取自定义属性值，需要加data-前缀
<div id="myDiv"></div>
<script>
let myDiv = document.getElementById("myDiv");
myDiv.setAttribute("data-name","user")
//打印获取自定义属性值
console.log(myDiv.getAttribute("data-name"))
</script>
修改自定义属性的值
使用setAttribute()修改自定义属性值，setAttribute()在没有自定义属性时进行添加自定义属性，有自定义属性时进行修改值
<div id="myDiv" data-appId="1"></div>
<script>
let myDiv=document.getElementById("myDiv")
//修改自定定义属性值
myDiv.setAttribute("data-appId",2)
</script>
使用dataset.命名进行修改值，没有自定义属性时进行添加，有自定义属性进行修改。
<div id="myDiv" data-appId="1"></div>
<script>
let myDiv=document.getElementById("myDiv")
//修改自定义属性的值
myDiv.dataset.appId=3
</script>
日期
Date.now() 从1970年1月1日到现在所经过的毫秒数
console.log(Date.now())
输出结果是：1689659153623
Date 是一个构造函数，必须使用new创建日期对象。
//获取当前时间
let date = new Date()
console.log(date)
输出结果：Tue Jul 18 2023 13:42:46 GMT+0800 (中国标准时间)
获取当前日期
获取年：getFullYear() 四位数字返回年份。
获取月：getMonth() 返回值是 0（一月） 到 11（十二月） 之间的一个整数。
获取日：getDate() 所指的月份中的某一天，使用本地时间。返回值是 1 ~ 31 之间的一个整数。
获取时：getHours() 返回 Date 对象的小时 (0 ~ 23）。
获取分：getMinutes() 以本地时间显示。返回值是 0 ~ 59 之间的一个整数。
getTime()与Date.now()一个用法，返回 1970 年 1 月 1 日至今的毫秒数。
获取一个完整的日期写法如下:
let date = new Date();
let yy=date.getFullYear() //获取年
let mm=date.getMonth()+1 //获取月
let dd=date.getDate() //获取日
let time = yy+'-'+mm+'-'+dd //日期进行拼接
console.log(time)
输出结果：2023-7-18
let date = new Date();
let yy=date.getFullYear()
let mm=date.getMonth()+1<10?'0'+(date.getMonth()+1):date.getMonth()+1
let dd=date.getDate()<10?'0'+date.getDate():date.getDate()
let time = yy+'-'+mm+'-'+dd
console.log(time)
输出结果：2023-07-18
toLocaleDateString()以字符串的形式，就是把Date对象的日期部分转换为字符串，并返回结果。
let date = new Date();
let str = date.toLocaleDateString();
console.log(str)
输出结果：2023/7/18
如果转换成其他格式就需要进行处理：
let date = new Date();
function formatdate(date){
let time = !date ? new Date() : new Date(date)
return time.toLocaleDateString().split('/').map(item=>{
return (item.length<2)? item = '0'+item : item
}).join('-')
}
let newTime = formatdate(date)
console.log(newTime)
输出结果： 2023-07-18
获取昨天日期
使用数字型的时间 ,再减去24 * 60 * 60 * 1000
let date = new Date();
console.log(date.setTime(date.getTime() - 24 * 60 * 60 * 1000))
输出结果：1689574790297
//获取当前日期
let date = new Date();
// 毫秒时间 减去 24小时 * 60分钟 * 60秒 * 1000，再使用 setTime设置当前Date对象开始到现在的毫秒时间点
date.setTime(date.getTime() - 24 * 60 * 60 * 1000);
let yy = date.getFullYear() // 年份
let mm = ((date.getMonth() + 1) < 10) ? "0" + (date.getMonth() + 1) : date.getMonth() + 1 //月份
let dd = date.getDate() < 10 ? "0" + date.getDate() : date.getDate() //日
let time = yy + "-" + mm + "-" + dd
console.log(time)
输出结果：2023-07-17
获取每周一的日期
Date.parse() 函数的返回值为Number类型，返回该字符串所表示的日期与 1970 年 1 月 1 日午夜之间相差的毫秒数，与getTime()一样。
//获取当前时间戳
let timeStamp = Date.parse(new Date())
//获取当前时间
let date = new Date()
//获取周一时间
let day = date.getDay() || 7; //周一是每周的第一天
let oneDayTime = 24 * 60 * 60 * 1000;
let Monday = timeStamp - (day - 1) * oneDayTime;
let mondayTime = new Date(Monday);
let yy = mondayTime.getFullYear();
let mm = (mondayTime.getMonth() + 1 < 10 ? '0' + (mondayTime.getMonth() + 1) : mondayTime.getMonth() + 1);
let dd = mondayTime.getDate() < 10 ? '0' + mondayTime.getDate() : mondayTime.getDate();
let mondayDate = yy + "-" + mm + "-" + dd;
console.log('周一日期是：'+mondayDate)
输出结果：周一日期是：2023-07-17
获取七天前日期
//一天的时间戳
let oneDayTime = 24 * 60 * 60 * 1000
//获取昨天日期戳
let yesterdayTime = new Date(Date.now() - oneDayTime)
//获取七天前日期戳
let sevenTime = new Date(Date.now() - 7*oneDayTime)
//格式转换
yesterdayTime = handleNewDate(yesterdayTime)
sevenTime = handleNewDate(sevenTime)
//进日期格式转换
function handleNewDate(date){
let yy=date.getFullYear()
let mm=date.getMonth() + 1
let dd=date.getDate()
return yy+'-'+mm+'-'+dd
}
console.log("七天前日期:"+sevenTime)
console.log("昨天日期:"+yesterdayTime)
输出结果:七天前日期:2023-7-11 昨天日期:2023-7-17
Math用法
Math.random() 随机数
Math.random() //返回 0 ~ 1 之间的随机数。返回介于 0（包含） ~ 1（不包含） 之间的一个随机数
如：0.42846945318878027
获取 1 到 10 之间的一个随机数：Math.floor((Math.random()*10)+1);
let data = Math.floor((Math.random()*10)+1)
console.log(data)
输出结果：8
获取 1 到 100 之间的一个随机数：Math.floor((Math.random()*100)+1);
let data = Math.floor((Math.random()*100)+1)
console.log(data)
输出结果：38
Math.random()也可以用于清除缓存，如xxxxxx.com/api/getList…, 在每次访问时后面加上一个随机数xxxxxx.com/api/getList… 。 这样保证每次都不会有缓存，同理加入时间戳也行new Date().getTime()
Math.PI圆周率
Math.PI //返回PI 返回圆周率（约等于3.14159）。
Math.floor将浮点数向下取整
Math.floor(x) 用于将一个浮点数 x 向下取整为最接近的整数。返回的结果是小于或等于 x 的最大整数。
let a= Math.floor(11.9) //11
let b= Math.floor(11.01) //11
let c= Math.floor(11.999999) //11
let d= Math.floor(11.000000) //11
let e= Math.floor(11.5) //11
let m=Math.floor(-9.9) // -10
let n=Math.floor(-9.1) // -10
let h=Math.floor(-9.5) // -10
Math.ceil用于向上取整
Math.ceil()用于向上取整。它返回大于或等于参数的最小整数。
let a =Math.ceil(4.3) //5
let b =Math.ceil(4.9) //5
let c =Math.ceil(-2.1) //-2
let d =Math.ceil(-2.8) //-2
Math.round 数字四舍五入
Math.round()用于将一个 数字四舍五入到最接近的整数。小数部分大于0.5,则向上取整；如果小数部分小于等于0.5，则向下取整。
let a =Math.round(8.3) //8
let b =Math.round(8.9) //9
let c =Math.round(8.5) //9
let d =Math.round(-2.1) //-2
let e =Math.round(-2.8) //-3
let f =Math.round(-2.5) //-2
toFixed用法
toFixed() 方法返回的是一个字符串类型的值，取值时进行四舍五入。取值范围为 0 到 20
let num =3.9383383
console.log(num.toFixed()) //4 不传入参数时默认为0
console.log(num.toFixed(1))//3.9 保留1位小数
console.log(num.toFixed(2))//3.94 保留2位小数
console.log(num.toFixed(3))//3.938 保留3位小数
let fnum =-2.39813
console.log(fnum.toFixed()) //-2 不传入参数时默认为0
console.log(fnum.toFixed(1))//-2.4 保留1位小数
console.log(fnum.toFixed(2))//-2.40 保留2位小数
console.log(fnum.toFixed(3))//-2.398 保留3位小数
