JS
在日常中遇到的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);
创建元素
创建需要的数据 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 这个前缀。 一些例子:
一些实例:
-
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
方法用来结束正在运行的性能测试器。