数据类型
- string
- String(x) 将x转换为string类型
- x.toString() 将x转换为string类型，数字也可以
- number
- 整数，小数，NaN
- Number(x) 转为数字
如果传入空，空格返回0，
boolean，false=0，true=1
其他非法字符串返回NaN
日期对象Number(new Date()) 相同于 new Date().getTime(); - parseFloat()
- paseInt()
- 对象前加上符号+可转换为数字,无法转换时返回NaN，如var n = + "2.2";
- 其他数字运算
5 + null = 5
"5" + 1 = "51"
"5" - 1 = 4
- boolean
- function
- object
- null
- Date
- Array
- Obejct
- symbol
- undefined
- 判断是不是undefined注意使用引号 typeof obj === 'undefined'
- if(typeof obj === 'undeifned' || obj === null) {//dosth}
使用 typeof obj
使用 obj.constructor
- NaN 的数据类型是 number
- 数组(Array)的数据类型是 object
- 日期(Date)的数据类型为 object
- null 的数据类型是 object
- 未定义变量的数据类型为 undefined
正则表达式
Regular Expression
语法:
/正则表达式主体/修饰符(可选)
- i： 忽略大小写
- g： 全局扫描，不加时，匹配到第一个就停止
- m： 多行匹配
方法
- search()
用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串，并返回子串的起始位置 - replace()
用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串
使用 RegExp 对象
/e/.方法("The best things in life are free!")
- test()
- 返回true如果匹配到
- exec()
- 返回匹配到的数组
debugger;
语句可以打断点
异常处理
js中异常处理语法同java，
1。区别是catch中参数无需指定异常类型，因此也没有多catch块
2。throw 可以是任何对象
严格模式(use strict)
"use strict";
可以在脚本第一行，也可以在函数体第一行声明
验证表单
通过html中的onsubmit return一个方法，方法返回false来阻止表单提交
<form name="myForm" action="demo_form.php" onsubmit="return validateForm()" method="post">
名字: <input type="text" name="inputName">
<input type="submit" value="提交">
</form>
function validateForm() {
var x = document.forms["myForm"]["inputName"].value;
//数字验证if (isNaN(x) || x < 1 || x > 10) {
if (x == null || x == "") {
alert("需要输入名字。");
return false;
}
}
html事件
onblur
onclick
onerror
onfocus
onkeydown
onkeypress
onkeyup
onmouseover
onload
onmouseup
onmousedown
onsubmit
显式函数绑定
在 JavaScript 严格模式(strict mode)下, 在调用函数时第一个参数会成为 this 的值， 即使该参数不是一个对象。
在 JavaScript 非严格模式(non-strict mode)下, 如果第一个参数的值是 null 或 undefined, 它将使用全局对象替代。
apply 和 call
call() 和 apply() 是预定义的函数方法。 两个方法可用于调用函数，两个方法的第一个参数必须是对象本身
通过 call() 或 apply() 方法你可以设置 this 的值, 且作为已存在对象的新方法调用。
允许切换函数执行的上下文环境（context），即 this 绑定的对象
var person1 = {
fullName: function() {
return this.firstName + " " + this.lastName;
}
}
var person2 = {
firstName:"John",
lastName: "Doe",
}
person1.fullName.call(person2); // 返回 "John Doe"
常用对象及方法
- window
- document
- location
- navigator
- console
- history
- on...
js 操作 json
- json字符串->js对象
var obj = JSON.parse(jsonStr); - js对象->json字符串
var jsonStr = JSON.stringify(obj)
json 语法
- 数据为 键/值 对，（json字符串中键用双引号，值数字，布尔可以不用引号）
- 数据由逗号分隔
- 大括号保存对象
- 方括号保存数组
javascript:void(0)
void: 指定要计算一个表达式但是不返回值
void func()
javascript:void func()
//or
void(func())
javascript:void(func())
//点击以后不会发生任何事
<a href="javascript:void(0)">单击此处什么也不会发生</a>
<a href="javascript:undefined">单击此处什么也不会发生</a>
//点击链接后显示警告信息
<a href="javascript:void(alert('Warning!!!'))">点我!</a>
//a 为 undefined,
// 不管传入什么表达式，或函数，被void包装一下，返回结果为undefined
var a = void(3);
//href="#"
//# 包含了一个位置信息，默认的锚是#top 也就是网页的上端
<a href="javascript:void(0);">点我没有反应的!</a>
<a href="#pos">点我定位到指定位置!</a>
js 多线程
回调
这个函数执行之后会产生一个子线程，子线程会等待 3 秒，然后执行回调函数
主线程不会阻塞
setTimeout(method, 3000);
异步 ajax
XMLHttpRequest
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
var xhr = new XMLHttpRequest();
xhr.onload = function () {
// 输出接收到的文字数据
document.getElementById("demo").innerHTML=xhr.responseText;
}
xhr.onerror = function () {
document.getElementById("demo").innerHTML="请求出错";
}
// 发送异步 GET 请求
xhr.open("GET", "https://www.runoob.com/try/ajax/ajax_info.txt", true);
xhr.send();
jquery
$.get("https://www.runoob.com/try/ajax/demo_test.php",function(data,status){
alert("数据: " + data + "\n状态: " + status);
});
new Promise(function (resolve, reject) {
setTimeout(function () {
console.log("First");
resolve();
}, 1000);
}).then(function () {
return new Promise(function (resolve, reject) {
setTimeout(function () {
console.log("Second");
resolve();
}, 4000);
});
}).then(function () {
setTimeout(function () {
console.log("Third");
}, 3000);
});
Promise
//该方法返回一个 Promise
function print(delay, message) {
return new Promise(function (resolve, reject) {
setTimeout(function () {
console.log(message);
resolve();
}, delay);
});
}
//然后用不同的时间间隔输出了三行文本
print(1000, "First").then(function () {
return print(4000, "Second");
}).then(function () {
print(3000, "Third");
});
//将这段代码变得更好看
//异步函数 async function 中可以使用 await 指令，await 指令后必须跟着一个 Promise，异步函数会在这个 Promise 运行中暂停，直到其运行结束再继续运行
async function asyncFunc() {
await print(1000, "First");
await print(4000, "Second");
await print(3000, "Third");
}
asyncFunc();
//处理异常的机制将用 try-catch 块实现
async function asyncFunc() {
try {
await new Promise(function (resolve, reject) {
throw "Some error"; // 或者 reject("Some error")
});
} catch (err) {
console.log(err);
// 会输出 Some error
}
}
asyncFunc();
js 函数
typeof 操作符判断函数类型将返回 "function"
但是JavaScript 函数描述为一个对象更加准确
JavaScript 函数有 属性 和 方法
arguments.length 属性返回函数调用过程接收到的参数个数
函数对象的toString() 方法将返回一个字符串
函数即可以成为对象的属性，也可以是对象的方法
JavaScript 函数对参数的值没有进行任何的检查
函数显式参数(Parameters，形参)与隐式参数(Arguments，实参)
- 函数显式参数在函数定义时列出
- 函数隐式参数在函数调用时传递给函数真正的值。
- 函数定义显式参数时没有指定数据类型
- 函数对隐式参数没有进行类型检测
- 函数对隐式参数的个数没有进行检测
函数在调用时未提供隐式参数，参数会默认设置为： undefined
this 关键字
函数作为对象方法调用，会使得 this 的值成为对象本身
obj.fun();//this绑定到obj
使用 new fun() 调用函数，此时this不绑定任何值，对象被创建this为新的对象
es6 可以这样检查入参
如果y已经定义 ， y || 返回 y, 因为 y 是 true, 否则返回 0, 因为 undefined 为 false
function myFunction(x, y) {
y = y || 5;
return x * y;
}
let res = myFunction(4);//20
如果函数调用时设置了过多的参数，参数将无法被引用，因为无法找到对应的参数名。 只能使用 arguments 对象来调用
arguments是数组，通过arguments.length获取长度，通过arguments[i]获取元素
//ES6 支持函数带有默认参数，就判断 undefined 和 || 的操作
function myFunction(x, y = 10) {
// y is 10 if not passed or undefined
return x + y;
}
myFunction(0, 2) // 输出 2
myFunction(5); // 输出 15, y 参数的默认值
函数声明
声明函数不需要结尾，不需要调用前声明，会自动提升
function functionName(parameters) { }
函数表达式
函数存储在变量中，不需要函数名称，通常通过变量名来调用，
需要分号结尾，并且需要在调用前声明。
var x = function (a, b) {return a * b};
构造函数
不推荐使用，不推荐new
var myFunction = new Function("a", "b", "return a * b");
自调用函数
通过括号包裹函数，并使用参数列表括号来调用
实际上是一个 匿名自我调用的函数 (没有函数名)
(function () { alert("Hello");})();
箭头函数
since es6
箭头函数是不能提升的，所以需要在使用之前定义
箭头函数会默认帮我们绑定外层 this 的值
使用 const 比使用 var 更安全，因为函数表达式始终是一个常量
const x = (x, y) => x * y;
(参数1, 参数2, …, 参数N) => { 函数声明 }
当函数体只有一条语句，可以省略大括号，和return关键字，该条语句将作为函数的返回值
当只有一个参数时，圆括号可省略
内嵌函数与闭包
变量 add 指定了函数自我调用的返回字值。
自我调用函数只执行一次。设置计数器为 0。并返回函数表达式。
add变量可以作为一个函数使用。非常棒的部分是它可以访问函数上一层作用域的计数器。
这个叫作 JavaScript 闭包。它使得函数拥有私有变量变成可能。
计数器受匿名函数的作用域保护，只能通过 add 方法修改。闭包是一种保护私有变量的机制，在函数执行时形成私有的作用域，保护里面的私有变量不受外界干扰。
直观的说就是形成一个不销毁的栈环境。
var add = (function () {
var counter = 0;
return function () {return counter += 1;}
})();//自调用，返回内部函数，外部函数无法引用（保护）
add();//1
add();//2
add();//3
js 操作HTML DOM (文档对象模型)
能够改变页面中的所有 HTML 元素，属性， CSS 样式，
能够对页面中的所有事件做出反应
查找多元素转数组方法htmlcollection -> Array
Array.prototype.slice.apply/call(y)Array.prototype.slice.bind(y)()
获取dom元素
getElementById
getElementsByTagName
getElementsByClassName
改变dom内容
document.write
innerHTML
改变属性
直接当做js对象处理
.name="xxx";
改变样式
.style.property=新样式
document.getElementById("p2").style.color="blue";
事件处理
当网页已加载时
当用户点击鼠标时
当图像已加载时
当鼠标移动到元素上时
当输入字段被改变时
当提交 HTML 表单时
当用户触发按键时
// 用户进入或离开页面时
// onload 和 onunload 事件可用于处理 cookie。
<body onload="checkCookies()">
<script>
function checkCookies(){
alert("Cookies " + (navigator.cookieEnabled ? "可用" : "不可用"));
}
</script>
<p>弹窗-提示浏览器 cookie 是否可用。</p>
</body>
//onchange 事件常结合对输入字段的验证来使用
输入你的名字: <input type="text" id="fname" onchange="myFunction()">
<p>当你离开输入框后，函数将被触发，将小写字母转为大写字母。</p>
<script>
function myFunction(){
var x=document.getElementById("fname");
x.value=x.value.toUpperCase();
}
</script>
//onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时
<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:#D94A38;width:120px;height:20px;padding:40px;">Mouse-Over-Me</div>
<script>
function mOver(obj){
obj.innerHTML="Thank You"
}
function mOut(obj){
obj.innerHTML="Mouse Over Me"
}
</script>
//onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件
// 增加监听器,或 removeEventListener()
document.getElementById("myBtn").addEventListener("click", displayDate);
function displayDate() {
document.getElementById("demo").innerHTML = Date();
}
