复习js笔记

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】

1. JavaScript document 对象

2. JavaScript frames 对象

3. JavaScript history 对象

4. JavaScript location 对象

5. JavaScript navigator 对象

6. JavaScript screen 对象

---

window Screen

document.write("可用宽度: " + screen.availWidth);

Window Location

window.location 对象在编写时可不使用 window 这个前缀。 一些例子：

一些实例:

• location.hostname 返回 web 主机的域名

• location.pathname 返回当前页面的路径和文件名

• location.port 返回 web 主机的端口 （80 或 443）

• location.protocol 返回所使用的 web 协议（http:// 或 https://）

---

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方法用来结束正在运行的性能测试器。