一.对象
对象是拥有属性和方法的数据。
在 JavaScript中,几乎所有的事物都是对象。
键值对通常写法为 name : value (键与值以冒号分割)。
对象的属性之间一定要用逗号隔开;
定义:
var person = {name:"蔡徐坤",
sing:"鸡你太美!",
like:function()
{
return "唱,跳,rap,打篮球";
}
}
访问:
//一般对象访问方式
person.name;
person["sing"];
//对象函数访问方式
person.like();
实例:
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>对象</title>
<script>
var person = {name:"蔡徐坤",
sing:"鸡你太美!",
like:function()
{
return "唱,跳,rap,打篮球";
}
}
function show()
{
document.getElementById("name").innerHTML = "姓名:" + person.name;
document.getElementById("sing").innerHTML = "歌唱:" + person["sing"];
document.getElementById("like").innerHTML = "爱好:" + person.like();
}
</script>
</head>
<body>
<button onclick = "show()">按下显示</button>
<p id = "name">姓名:</p>
<p id = "sing">歌唱</p>
<p id = "like">爱好</p>
</body>
</html>
结果:
二.函数
- 函数就是包裹在花括号中的代码块,前面使用了关键词 function:
- 在某事件发生时直接调用函数,并且可由 JavaScript 在任何位置进行调用。
- 关键词 function 必须是小写的,大小写敏感。
实例:
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>函数</title>
<script>
function add()
{
var a = document.getElementById("FirstNum").value;
var b = document.getElementById("SecondNum").value;
//Number()函数将字符串转化为数字
document.getElementById("Result").innerHTML = Number(a) + Number(b);
document.getElementById("WrongResult").innerHTML = a + b;
}
</script>
</head>
<body>
<input type = "text" id = "FirstNum"></input>
<button onclick = "add()">+</button>
<input type = "text" id = "SecondNum"></input>
=<span id = "Result"></span>
<br/>
错误结果(字符串相加):<span id = "WrongResult"></span>
</body>
</html>
结果:
输入不为数字:
三.作用域
在 JavaScript 中, 对象和函数同样也是变量。
在 JavaScript 中, 作用域为可访问变量,对象,函数的集合。
1.局部变量
局部变量:变量在函数内定义,只能在函数内部访问。
局部变量在函数执行完毕后销毁。
//a和b函数外无法调用
function add()
{
//a和b为局部变量,只能在函数内调用
var a = 5;
var b = 6;
return a + b;
}
2.全局变量
全局变量:变量在函数外定义,网页中所有脚本和函数均可使用。
如果变量在函数内没有声明(没有使用 var 关键字),该变量为全局变量。
全局变量在页面关闭后销毁。
var a = 5;
var b = 6;
//a和b函数外可以调用
function add()
{
name = "小明";
//name没有声明,也为全局变量
return a + b;
}
实例:
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>作用域</title>
<script>
var count = 0;
function add()
{
count++;
var a = document.getElementById("FirstNum").value;
var b = document.getElementById("SecondNum").value;
//Number()函数将字符串转化为数字
document.getElementById("Result").innerHTML = Number(a) + Number(b);
document.getElementById("count").innerHTML = count;
}
</script>
</head>
<body>
<input type = "text" id = "FirstNum"></input>
<button onclick = "add()">+</button>
<input type = "text" id = "SecondNum"></input>
=<span id = "Result"></span>
<br/>
你已经按下"+"按钮:<span id = "count"></span> 次
</body>
</html>
结果: