JavaScript内容与应用——学习周记6

最新推荐文章于 2022-08-21 15:48:01 发布

咸盐月饼

最新推荐文章于 2022-08-21 15:48:01 发布

阅读量349

点赞数 2

分类专栏： JavaScript 文章标签： js javascript 前端

本文链接：https://blog.csdn.net/weixin_54919878/article/details/115376228

版权

JavaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

JavaScript内容与应用

JavaScript简介
JavaScript用法
JavaScript对象
JavaScript函数

JavaScript简介

JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。它是一种轻量级的编程语言，也是可插入 HTML 页面的编程代码。

JavaScript用法

body中的JavaScript

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>body中的JavaScript用法</title> 
</head>
<body>
<h1>我的第一个 Web 页面</h1>
<p id="demo1">这是一个段落。</p>
<p id="demo2">这也是一个段落。</p>
<button type="button" onclick="myFunction1()">Step1:点击这里</button>
<button type="button" onclick="myFunction2()">Step2:点击这里</button>
<script>
function myFunction1(){
	document.getElementById("demo1").innerHTML="我的第一个 JavaScript 函数";
}
function myFunction2(){
	document.getElementById("demo2").innerHTML="我的第二个 JavaScript 函数";
}
</script>
</body>
</html>

运行效果如图：

点击第一个按钮：

点击第二个按钮：

head中的JavaScript

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>head中的JavaScript</title> 
<script>
function myFunction(){
	document.getElementById("demo").innerHTML="<a href='#'>我的 JavaScript 函数</a>";
}
</script>
</head>
<body>

<h1>我的 Web 页面</h1>
<p id="demo">一个段落。</p>
<button type="button" onclick="myFunction()">点击这里</button>
	
</body>
</html>

运行结果如图：

点击按钮：

引用外部.js文件

HTML文件：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>引用外部js文件</title> 
</head>
<body>
	
<h1>我的 Web 页面</h1>
<p id="demo">一个段落。</p>
<button type="button" onclick="myFunction()">点击这里</button>

<script src="js文件/引用外部文件.js"></script>
	
</body>
</html>

JS文件：

function myFunction()
{
    document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
}

运行效果如图：
在这里插入图片描述
点击按钮：

JavaScript对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JavaScript对象</title>
		
	</head>
	<body>
		<h1>JavaScript对象</h1>
		<p id="d"><b>注释：</b>点击按钮后即可显示JavaScript对象信息</p>
		<button type="button" onclick="myFunction()">点击这里</button>
		<script>
			var person = {
			    firstName : "John",
			    lastName  : "Doe",
			    age       : 50,
			    eyeColor  : "blue",
				 fullName : function() 
					{
				       return this.firstName + " " + this.lastName;
				    }
			};
			function myFunction(){
				document.getElementById("d").innerHTML=person.fullName();
			}
		</script>
	</body>
</html>

运行效果如图：
在这里插入图片描述
点击按钮：

JavaScript函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>调用带参数的函数</title>
	</head>
	<body>
	<p>点击这个按钮，来调用带参数的函数。</p>
	<button onclick="myFunction('Harry Potter','Wizard')">点击这里</button>
	<script>
	function myFunction(name,job){
		alert("Welcome " + name + ", the " + job);
	}
	</script>
	</body>
	</html>

运行效果如图：
在这里插入图片描述
点击按钮：

未完待续…

咸盐月饼

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript内容与应用——学习周记6

JavaScript内容与应用JavaScript用法body中的JavaScripthead中的JavaScript引用外部.js文件JavaScript对象JavaScript函数JavaScript用法body中的JavaScript<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>body中的JavaScript用法</title> </he
复制链接

扫一扫