信息管理创新实践学习周记5

最新推荐文章于 2024-07-22 15:13:59 发布

小六不是路痴

最新推荐文章于 2024-07-22 15:13:59 发布

阅读量126

点赞数 1

文章标签： javascript html

本文链接：https://blog.csdn.net/LCCCCCCHEN/article/details/116810854

版权

第五周学习周记

学习内容

学习内容

1.JavaScript的用法

HTML 中的脚本必须位于< script >与< /script >标签之间。脚本可被放置在 HTML 页面的< body >和< head >部分中。

2.JavaScript的对象

定义 JavaScript 对象可以跨越多行，空格跟换行不是必须的。
可以说 “JavaScript 对象是变量的容器”。但是，我们通常认为 “JavaScript 对象是键值对的容器”。键值对通常写法为 name : value (键与值以冒号分割)。键值对在 JavaScript 对象通常称为对象属性。
代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script>
		var person = {
		    fullName:function()
			{
				return this.firstName;
			}
		};
		document.getElementById("demo").innerHTML = fullName();
		function myFunction(){
			document.getElementById("demo").innerHTML="LCCCCCChen";
		}
		</script>
	</head>
	<body>
		<p>猜猜我是谁</p>
		<p id="demo"></p>
		<button type="button" onclick="myFunction()">点击这里</button>	
	</body>
</html>

展示：
在这里插入图片描述

3.JavaScript函数

函数就是包裹在花括号中的代码块，前面使用了关键词 function。当调用该函数时，会执行函数内的代码。可以在某事件发生时直接调用函数（比如当用户点击按钮时），并且可由 JavaScript 在任何位置进行调用。
代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<p>有一个人他姓铁，他从小到大都不长头发，请问他得了什么病？</p>
		<button onclick="myFunction('老铁没毛病')">答案</button>
		<script>
		function myFunction(name){
			alert(name);
		}
		</script>
	</body>
</html>

展示：
在这里插入图片描述

4.JavaScript HTML DOM

改变 HTML 属性
代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<img id="image" src="青蛙.gif" width="120" height="120">
		<button onclick="mypicture()">点击更换</button>
		<script>
			function mypicture(){
				document.getElementById("image").src="孤寡.png";
			}
		</script>
	</body>
</html>