第五周学习周记

最新推荐文章于 2022-01-16 23:49:34 发布

又景众

最新推荐文章于 2022-01-16 23:49:34 发布

阅读量98

点赞数

本文链接：https://blog.csdn.net/weixin_49001166/article/details/115374309

版权

第五周学习周记

信息管理创新实践课程第五周学习周记
- 学习内容
- - 知识点
  - 代码区

信息管理创新实践课程第五周学习周记

信息管理创新实践课程学习进度已至第五周，应课堂要求，创作此学习周记，并将以此方式持续记录。

学习内容

本节课初步学习HTML和JavaScript，可完成一些简单操作。
菜鸟教程自学地址：link.
编辑器：HBuilder X

知识点

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

1.1

1.2JavaScript 函数和事件
上面例子中的 JavaScript 语句，会在页面加载时执行。
通常，我们需要在某个事件发生时执行代码，比如当用户点击按钮时。
如果我们把 JavaScript 代码放入函数中，就可以在事件发生时调用该函数。
您将在稍后的章节学到更多有关 JavaScript 函数和事件的知识。

1.3在 < head> 或者 < body> 的JavaScript
您可以在 HTML 文档中放入不限数量的脚本。
脚本可位于 HTML 的 < body> 或 < head> 部分中，或者同时存在于两个部分中。
通常的做法是把函数放入 < head> 部分中，或者放在页面底部。这样就可以把它们安置到同一处位置，不会干扰页面的内容。

1.4外部的 JavaScript
也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。
外部 JavaScript 文件的文件扩展名是 .js。

2、JavaScript 对象
JavaScript 对象是拥有属性和方法的数据。

2.1对象属性
可以说 “JavaScript 对象是变量的容器”。
但是，我们通常认为 “JavaScript 对象是键值对的容器”。
键值对通常写法为 name : value (键与值以冒号分割)。
键值对在 JavaScript 对象通常称为对象属性。

2.2对象方法
对象的方法定义了一个函数，并作为对象的属性存储。
对象方法通过添加 () 调用 (作为一个函数)。

3、JavaScript HTML DOM

3.1查找 HTML 元素
通常，通过 JavaScript，您需要操作 HTML 元素。
为了做到这件事情，您必须首先找到该元素。有三种方法来做这件事：
通过 id 找到 HTML 元素
通过标签名找到 HTML 元素
通过类名找到 HTML 元素

3.2改变 HTML 属性
实例讲解：
上面的 HTML 文档含有 id=“image” 的元素
我们使用 HTML DOM 来获得 id=“image” 的元素
JavaScript 更改此元素的属性（把 “smiley.gif” 改为 “landscape.jpg”）

代码区

知识点1

<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	
	</head>
	<body>
		<script src="./new_file.js">
		
		</script>
		<h1>Lelio</h1>
		<p id="demo">Duan</p>
		<button type="button" onclick="myFunction()">点击这里</button>
	</body>
</html>

知识点2

<html>
<head> 
<meta charset="utf-8"> 
<title></title> 
</head>
<body>

<p>创建和使用对象方法。</p>
<p>对象方法作为一个函数定义存储在对象属性中。</p>
<p id="demo"></p>
	<button type="button" onclick="myFunction()">点击这里</button>
<script>
var person = {
    firstName: "猜猜",
    lastName : "我是谁",
    id : 5566,
    fullName : function() 
	{
       return this.firstName + " " + this.lastName;
    }
};
document.getElementById("demo").innerHTML = person.fullName();
function myFunction(){
			document.getElementById("demo").innerHTML="Lelio Duan";
		}
	</script>
	
</body>
</html>

知识点3.1

<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>

<p>奶牛的一生!</p>
<div id="main">
<p> 养成类游戏</p>
<p>线下度假村！  <b>大家一起来！</b> 养牛！</p>
</div>
<script>
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
document.write(  y[0].innerHTML);
</script>

</body>
</html>

知识点3.2

<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
	function mypicture(){
		document.getElementById("image").src="landscape.jpg";
	}
	function mypicture1(){
		document.getElementById("image").src="smiley.gif";
	}
	</script>
</head>
<body>

<img id="image" src="smiley.gif" width="160" height="120">
<script>

</script>
<button onclick="mypicture()">换过去</button>
<button onclick="mypicture1()">换回来</button>
	

</body>
</html>