JS
w3cschool官网 - 1000多本编程教程免费学
在日常中遇到的js函数 forms
document.forms['name']
for--in 循环
let x={name:"lai",age:18,city:"nanyang"}
var y=""
for(y in x){
y=x[y]+"/"
}
y=lai/18/nanyang
do--while循环
let i=1;
do{
console.log(i)
i++
}while(i<5)
这里是基本的数据类型可以被typeof识别的类型
typeof可以识别的数据类型有
string
number
Boolean
object
function
undefined
以及新增的两个数据类型
Symbol
“bigint”：表示一个大整数。
let a=Symbol();
let b=4613468613135468461313846135856123n;
console.log(typeof b)
正则表达式
test()方法用来检测正则表达式
var patt = /e/;
patt.test("The best things in life are free!");
throw
throw 语句允许我们创建自定义错误。
正确的技术术语是：创建或抛出异常（exception）。
如果把 throw 与 try 和 catch 一起使用，那么您能够控制程序流，并生成自定义的错误消息。
<script>
function myFunction(){
try{
var x=document.getElementById("demo").value;
if(x=="") throw "empty";
if(isNaN(x)) throw "not a number";
if(x>10) throw "too high";
if(x<5) throw "too low";
}catch(err){
var y=document.getElementById("mess");
y.innerHTML="Error: " + err + ".";
}
}
</script>
js调试
可以通过设置断点，使用debugger关键字，以及浏览器自带的的调试工具【谷歌==console】，
我们在与后端进行交互的时候，会出现一些数据问题，我们可以通过postman来进行调试检测。
js保留关键字
就是一些内置的方法名和变量名，我们不可以使用，如function var float number等等
javascript:void(0)
<a href="javascript:void(alert('Warning!!!'))">点我!</a>
href="#"与href="javascript:void(0)"的区别
# 包含了一个位置信息，默认的锚是#top 也就是网页的上端。
而javascript:void(0), 仅仅表示一个死链接。
href="#"默认指的是网页上端，而###表示无意义的或者就是这个void
javascript:void(0) 中最关键的是 void 关键字， void 是 JavaScript 中非常重要的关键字，该操作符指定要计算一个表达式但是不返回值。
a = void ( b = 5, c = 7 );
这里的a因为不返回所以是个undefined
document.write('a = ' + a + ' b = ' + b +' c = ' + c );
闭包
var add = (function () {
var counter = 0;
return function () {return counter += 1;}
})();
在经历自调用之后，add就等于返回的函数了
add();
add();
add();
DOM
对document来进行操作的，对css样式，对本文属性添加修改。
document.write(Date());
**修改标签内容**
<p id="p1">Hello World!</p>
document.getElementById("p1").text="New text!";
document.getElementById("p1").innerHTML="New text!";
<img id="image" src="smiley.gif">
<script>
document.getElementById("image").src="landscape.jpg";
**修改style样式**
<h1 id="id1">My Heading 1</h1>
<button type="button"
οnclick="document.getElementById('id1').style.color='red'">
<p id="p1">这是一个文本。</p>
<input type="button" value="隐藏文本" οnclick="document.getElementById('p1').style.visibility='hidden'" />
<input type="button" value="显示文本" οnclick="document.getElementById('p1').style.visibility='visible'" />
inner.Text：
不识别html标签：会把内容全部打印出来 非标准（ie发起） 老版本火狐不可用 去除空格和换行直接显示内容
inner.HTML
识别html标签：会把内容配合标签打印出来 w3c标准推荐 保留标签内的换行以及空格等等
onload 和 onunload 事件
onload 和 onunload 事件会在用户进入或离开页面时被触发。
onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。
onload 和 onunload 事件可用于处理 cookie。
onchange 事件
onchange 事件常结合对输入字段的验证来使用。
onmouseover 和 onmouseout 事件
onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。
onmousedown、onmouseup 以及 onclick 事件
onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。
onfocus 焦点
事件监听器
addEventListener() 方法允许向同个元素添加多个事件，且不会覆盖已存在的事件：
element.addEventListener("mouseover", myFunction);
element.addEventListener("click", mySecondFunction);
element.addEventListener("mouseout", myThirdFunction);
默认值为 false, 即冒泡传递，当值为 true 时, 事件使用捕获传递。
document.getElementById("myDiv").addEventListener("click", myFunction, true);
removeEventListener() 方法移除由 addEventListener() 方法添加的事件句柄:
*element*.removeEventListener("mousemove", myFunction);
HTML DOM 事件对象_w3cschool 事件总结
创建元素
创建需要的数据
var para=document.createElement("p")
文本节点
var node=document.createTextNode("jdjdjdjd")
para.appendChild(node)
将元素添加到一个已经存在的元素下
var element=document.getElementById("div1")
element.appendChild(para)
删除已有的元素
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
BOM
浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器"对话"。
Window的子对象主要有如下几个：【DOM主要针对与document，BOM主要针对的浏览器window】
-
JavaScript document 对象
-
JavaScript frames 对象
-
JavaScript history 对象
-
JavaScript location 对象
-
JavaScript navigator 对象
-
JavaScript screen 对象
window Screen
document.write("可用宽度: " + screen.availWidth);
Window Location
window.location 对象在编写时可不使用 window 这个前缀。 一些例子：
一些实例:
document.write(location.href);
location.href属性返回当前页面的url；
Window Location Pathname
location.pathname 属性返回 URL 的路径名。
window.location.assign("https://www.w3cschool.cn")
location.assign()方法加载新的文档
window.history
history.back()
window.history.forward()
加载历史列表中的前或后一个url
window.navigator 对象包含有关访问者浏览器的信息。
来自 navigator 对象的信息具有误导性，不应该被用于检测浏览器版本，这是因为：
-
navigator 数据可被浏览器使用者更改
-
一些浏览器对测试站点会识别错误
-
浏览器无法报告晚于浏览器发布的新操作系统
浏览器检测
由于 navigator 可误导浏览器检测，使用对象检测可用来嗅探不同的浏览器。
由于不同的浏览器支持不同的对象，您可以使用对象来检测浏览器。例如，由于只有 Opera 支持属性 "window.opera"，您可以据此识别出 Opera。
弹窗
alert【警告框】
confirm【确认框】
var r=confirm("按下按钮")
if(r=true){
x="con"
}else{
x="cancel"
}
【prompt】提示框
提示框经常用于提示用户在进入页面前输入某个值。
当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。
如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为 null。
var person=prompt("请输入你的名字","Harry Potter");
if (person!=null && person!=""){
x="你好 " + person + "！今天感觉如何？";
}
"Harry Potter"为默认值
storage
sessionStorage和localStorage保存的数据，都以“键值对”的形式存在。也就是说，每一项数据都有一个键名和对应的值。所有的数据都是以文本格式保存。
存入数据
使用setItem方法。它接受两个参数，第一个是键名，第二个是保存的数据。
sessionStorage.setItem("key","value");
localStorage.setItem("key","value");
读取数据
使用getItem方法。它只有一个参数，就是键名。
var valueSession = sessionStorage.getItem("key");
var valueLocal = localStorage.getItem("key");
清除数据
removeItem方法用于清除某个键名对应的数据。
sessionStorage.removeItem('key');
localStorage.removeItem('key');
clear方法用于清除所有保存的数据。
sessionStorage.clear();
localStorage.clear();
遍历操作
利用length属性和key方法，可以遍历所有的键。
for(var i = 0; i < localStorage.length; i++){
console.log(localStorage.key(i));
}
除了key属性，event对象的属性还有三个：
-
oldValue：更新前的值。如果该键为新增加，则这个属性为null。
-
newValue：更新后的值。如果该键被删除，则这个属性为null。
-
url：原始触发storage事件的那个网页的网址。
Math
对象提供以下一些数学方法。
-
Math.abs()：绝对值
-
Math.ceil()：向上取整
-
Math.floor()：向下取整
-
Math.max()：最大值
-
Math.min()：最小值
-
Math.pow()：指数运算
-
Math.sqrt()：平方根
-
Math.log()：自然对数
-
Math.exp()：e的指数
-
Math.round()：四舍五入
-
Math.random()：随机数
-
Math.E：常数e。
-
Math.LN2：2的自然对数。
-
Math.LN10：10的自然对数。
-
Math.LOG2E：以2为底的e的对数。
-
Math.LOG10E：以10为底的e的对数。
-
Math.PI：常数Pi。
-
Math.SQRT1_2：0.5的平方根。
-
Math.SQRT2：2的平方根。
Math对象还提供一系列三角函数方法。
-
Math.sin()：返回参数的正弦
-
Math.cos()：返回参数的余弦
-
Math.tan()：返回参数的正切
-
Math.asin()：返回参数的反正弦（弧度值）
-
Math.acos()：返回参数的反余弦（弧度值）
-
Math.atan()：返回参数的反正切（弧度值）
console对象
-
调试程序，显示网页代码运行时的错误信息。
-
提供了一个命令行接口，用来与网页代码互动。
在浏览器中就是F12
console.log方法支持以下占位符，不同格式的数据必须使用对应格式的占位符。
-
%s 字符串
-
%d 数字
-
%i 整数
-
%f 浮点数
-
%o 对象的链接
-
%c CSS格式字符串
var number = 11 * 9;
var color = 'red';
console.log('%d %s balloons', number, color);
// 99 red balloons
console.log(
'%cThis text is styled!',
'color: red; background: yellow; font-size: 24px;'
)
console.info()和console.debug()
都是console.log方法的别名，用法完全一样。只不过console.info方法会在输出信息的前面，加上一个蓝色图标。
warn方法和error方法
也是在控制台输出信息，它们与log方法的不同之处在于，warn方法输出信息时，在最前面加一个黄色三角，表示警告；error方法输出信息时，在最前面加一个红色的叉，表示出错，同时会显示错误发生的堆栈。其他方面都一样。
table()
对于某些复合类型的数据，console.table方法可以将其转为表格显示。
var languages = [
{ name: "JavaScript", fileExtension: ".js" },
{ name: "TypeScript", fileExtension: ".ts" },
{ name: "CoffeeScript", fileExtension: ".coffee" }
];
console.table(languages);
count()
count方法用于计数，输出它被调用了多少次。
function greet(user) {
console.count();
console.count(user);
return 'hi ' + user;
}
该方法可以接受一个字符串作为参数，作为标签，对执行次数进行分类。
dir()，dirxml()
dir方法用来对一个对象进行检查（inspect），并以易于阅读和打印的格式显示。
该方法对于输出DOM对象非常有用，因为会显示DOM对象的所有属性。
console.dir(document.body)
Node 环境之中，还可以指定以代码高亮的形式输出。
console.dir(obj, {colors: true})
dirxml方法主要用于以目录树的形式，显示DOM节点。
console.dirxml(document.body)
如果参数不是DOM节点，而是普通的JavaScript对象，console.dirxml等同于console.dir。
assert()
assert方法接受两个参数，第一个参数是表达式，第二个参数是字符串。只有当第一个参数为false，才会输出第二个参数，否则不会有任何结果。
console.assert(true === false, '判断条件不成立')
// Assertion failed: 判断条件不成立
time()，timeEnd()
这两个方法用于计时，可以算出一个操作所花费的准确时间。
console.time('Array initialize');
var array= new Array(1000000);
for (var i = array.length - 1; i >= 0; i--) {
array[i] = new Object();
};
console.timeEnd('Array initialize');
// Array initialize: 1914.481ms
time方法表示计时开始，timeEnd方法表示计时结束。它们的参数是计时器的名称。调用timeEnd方法之后，console窗口会显示“计时器名称: 所耗费的时间”。
他们两个需要参数的名字的是相同的。不然就无法操作。
trace()，clear()
console.trace方法显示当前执行的代码在堆栈中的调用路径。
console.clear方法用于清除当前控制台的所有输出，将光标回置到第一行。
group()，groupend()，groupCollapsed()
console.group和console.groupend这两个方法用于将显示的信息分组。它只在输出大量信息时有用，分在一组的信息，可以用鼠标折叠/展开。
console.groupCollapsed方法与console.group方法很类似，唯一的区别是该组的内容，在第一次显示时是收起的（collapsed），而不是展开的。
profile()，profileEnd()
console.profile方法用来新建一个性能测试器（profile），它的参数是性能测试器的名字。
console.profileEnd方法用来结束正在运行的性能测试器。
