从博客园主题了解前端 - JS
使用方法
文档内部
<!DOCTYPE html>
<html>
<body>
<button type="button" onclick="myFunction1()">点击这里</button>
<script>
function myFunction1(){
;
}
</script>
</body>
</html>
文档外部
<!DOCTYPE html>
<html>
<body>
<button type="button" onclick="myFunction2()">点击这里</button>
<script src="myScript.js"></script>
</body>
</html>
/* myScript.js */
function myFunction2()
{
;
}
语法
| 项 | 示例 | 描述 |
|---|---|---|
| 注释 | //这里不被执行 | |
| 变量 | var a=1, s="hello"; | |
| 运算符 | + - * / % ++ -- = += -= /= %= + |
+可用于字符串拼接 |
| 比较运算符 | > < >= <= != === !== |
绝对比较要值和类型相同 |
| 逻辑、条件 | `&& | |
| 语句 | ; if switch for while break continue |
switch使用===比较 |
数据类型
| 项 | 示例 | 描述 |
|---|---|---|
| String | "hello" 'he"llo"' '3.14' |
|
| Number | 123 1.234 123e-5 |
|
| Boolean | true false |
|
| Array | var cars=new Array(); var cars=new Array("Sa","Vo","Bm"); var cars=["Saab","Volvo","BMW"]; |
引用数组元素 cars[0]="Saab"; |
| Object | var person={firstname:"John", lastname:"Doe", id:5566}; |
引用对象属性 name=person.lastname; |
| Undefined | undefined |
变量不含有值 |
| Null | null |
清空变量 |
JavaScript 变量均为对象。
作用域
var x = 2;
// 这里可以使用 x 变量
{
// 这里可以使用 x 变量
}
{
var y = 2;
}
// 这里可以使用 y 变量
{
let z = 2;
}
// 这里不能使用 z 变量
var x = 1;
{
/*重新定义变量*/
var x = 20000;
}
// 这里输出 x 为 20000
函数
函数声明
function myFunction(a, b) {
return a * b;
}
函数表达式
var x = function (a, b) {return a * b};
var z = x(4, 3);
自调用函数
(function () {
var x = "Hello!!"; // 我将调用自己
})();
箭头函数
// ES5
var x = function(x, y) {
return x * y;
}
// ES6
const x = (x, y) => x * y;
函数作为方法调用
var myObject = {
firstName:"John",
lastName: "Doe",
fullName: function () {
return this.firstName + " " + this.lastName;
}
}
myObject.fullName(); // 返回 "John Doe"
闭包函数
var add = (function () {
var counter = 0; //设置计数器为 0
return function () {return counter += 1;} //返回函数表达式
})();
add(); //执行表达式 +1
add(); //执行表达式 +1
add(); //执行表达式 +1
// 计数器 counter 为 3
json
var text = '{ "sites" : [' +
'{ "name":"Runoob" , "url":"www.runoob.com" },' +
'{ "name":"Google" , "url":"www.google.com" },' +
'{ "name":"Taobao" , "url":"www.taobao.com" } ]}';
var obj = JSON.parse(text);
var str = obj.sites[0].name + " " + obj.sites[0].url;
void
void 表示计算一个表达式但不返回值，如javascript:void(alert('Warning!!!'))表示执行弹窗显示且不返回值。
链接中void表示无需任何效果，#定位到指定锚点。
<a href="javascript:void(0);">点我没有反应的!</a>
<a href="#pos">点我定位到指定位置!</a>
