复习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 这个前缀。 一些例子:

一些实例:


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.groupconsole.groupend这两个方法用于将显示的信息分组。它只在输出大量信息时有用,分在一组的信息,可以用鼠标折叠/展开。

console.groupCollapsed方法与console.group方法很类似,唯一的区别是该组的内容,在第一次显示时是收起的(collapsed),而不是展开的。

profile(),profileEnd()

console.profile方法用来新建一个性能测试器(profile),它的参数是性能测试器的名字。

console.profileEnd方法用来结束正在运行的性能测试器。

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值