js学习02——对象、函数、作用域、事件、字符
1、对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>对象学习</title>
</head>
<body>
<p>创建 JavaScript 对象。</p>
<p id="demo"></p>
<script>
var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};//创建对象
document.getElementById("demo").innerHTML =
person.firstName + " 现在 " + person.age + " 岁." +"眼睛是"+ person.eyeColor;
//对象的使用
</script>
</body>
</html>
2、函数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>函数</title>
</head>
<body>
<p>本例调用的函数会执行一个计算，然后返回结果：</p>
<p id="demo"></p>
<script>
function myFunction(a,b){
return a*b;
}
document.getElementById("demo").innerHTML = myFunction(10,21);
</script>
</body>
</html>
3、作用域
全局变量：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>全局变量</title>
</head>
<body>
<p>全局变量在任何脚本和函数内均可访问。</p>
<p id="demo"></p>
<script>
var carName = "Volvo";
myFunction();
function myFunction()
{
document.getElementById("demo").innerHTML =
"我可以显示 " + carName;
}
</script>
</body>
</html>
局部变量：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>局部变量</title>
</head>
<body>
<p>局部变量在声明的函数外不可以访问。</p>
<p id="demo"></p>
<script>
myFunction();
document.getElementById("demo").innerHTML = "carName 的类型是：" + typeof carName;
function myFunction()
{
var carName = "Volvo";
}
</script>
</body>
</html>
4、事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>事件</title>
</head>
<body>
<p>点击按钮执行 <em>displayDate()</em> 函数.</p>
<button onclick="displayDate()">点这里</button>
<script>
function displayDate(){
document.getElementById("demo").innerHTML=Date();
}
</script>
<p id="demo"></p>
</body>
</html>
5、字符串
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>字符串</title>
</head>
<body>
<p id="demo"></p>
<script>
var x = 'It\'s alright';
var y = "He is called \"Johnny\"";
document.getElementById("demo").innerHTML = x + "<br>" + y;
</script>
</body>
</html>
