js学习02——对象、函数、作用域、事件、字符串

最新推荐文章于 2024-10-23 23:43:56 发布

原创最新推荐文章于 2024-10-23 23:43:56 发布 · 208 阅读

0 ·

CC 4.0 BY-SA版权

JavaScript 专栏收录该内容

4 篇文章

订阅专栏

该博客聚焦于JS学习，涵盖对象、函数、作用域、事件和字符串等内容。其中，作用域部分区分了全局变量和局部变量。这些都是JavaScript编程中的重要概念。

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>