HTML CSS JAVASCRIPT 学习周记第五周

最新推荐文章于 2022-08-21 22:04:11 发布

猫猫狗狗www

最新推荐文章于 2022-08-21 22:04:11 发布

阅读量124

点赞数

文章标签： html

本文链接：https://blog.csdn.net/Catsdoge/article/details/115373741

版权

HTML CSS JAVASCRIPT 学习周记第五周

> JAVASCRIPT <script> 标签 如需在 HTML 页面中插入 JavaScript，请使用 <script> 标签。
> 
> <script> 和 </script> 会告诉 JavaScript 在何处开始和结束。
> 
> <script> 和 </script> 之间的代码行包含了 JavaScript:

例如

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="myscript.js"></script>
	</head>
	<body>
		<h1>我的 Web 页面</h1>
		<p id="demo">一个段落。</p>
		<button type="button" onclick="myfunction()">点击这里</button>
	</body>
</html>

我的 Web 页面

一个段落。

点击这里

在 < head> 或者 < body> 的JavaScript 您可以在 HTML 文档中放入不限数量的脚本。

脚本可位于 HTML 的 < body> 或 < head> 部分中，或者同时存在于两个部分中。

通常的做法是把函数放入 < head> 部分中，或者放在页面底部。这样就可以把它们安置到同一处位置，不会干扰页面的内容。

> 对象方法

对象的方法定义了一个函数，并作为对象的属性存储。对象方法通过添加 () 调用 (作为一个函数)。该实例访问了 person 对象的
fullName() 方法:

!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1>我的 Web 页面</h1>
		<p id="demo" >个人资料</p>
		<script>
		function myfunction(){
			document.getElementById("demo").innerHTML=person.fullName();
			}
			</script>
		<button type="button" onclick="myfunction()">点击这里</button>
		<script>
		var person = {
		    firstName: "John",
		    lastName : "Doe",
		    id : 5566,
		    fullName : function() 
			{
		       return this.firstName + " " + this.lastName;
		    }
		};
		
		</script>
	</body>
</html>

点击按钮显示个人资料

HTML DOM (文档对象模型)
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<p>你好世界!</p>
<div id="main">
<p> DOM 是非常有用的。</p>
<p>该实例展示了  <b>getElementsByTagName</b> 方法</p>
</div>
<script>
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
document.write('id="main"元素中的第一个段落为：' + y[0].innerHTML);
</script>

</body>
</html>

切换图片

<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<button type="button" onclick="myfunction1()">点击这里</button>
<img id="image" src="smiley.gif" width="160" height="120">
<script>
	function myfunction1(){
document.getElementById("image").src="landscape.jpg";
	}
</script>
	<button type="button" onclick="myfunction2()">点击这里</button>
	<script>
	function myfunction2(){
document.getElementById("image").src="smiley.gif";
	}
</script>
<p>原图片为 smiley.gif,脚本将图片修改为 landscape.jpg</p>

</body>
</html>

猫猫狗狗www

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML CSS JAVASCRIPT 学习周记第五周

**HTML CSS JAVASCRIPT 学习周记第五周**> JAVASCRIPT <script> 标签如需在 HTML 页面中插入 JavaScript，请使用 <script> 标签。> > <script> 和 </script> 会告诉 JavaScript 在何处开始和结束。> > <script> 和 </script> 之间的代码行包含了 JavaScript:
复制链接

扫一扫