信息管理创新实践第五周周记-CSDN博客

本文链接：https://blog.csdn.net/weixin_48694265/article/details/115377208

JavaScript 的使用

JavaScript 是脚本语言
JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。
JavaScript 很容易学习。

1、JavaScript 函数

①body 中的 JavaScript

<body>
.
.
<script>
document.write("<h1>这是一个标题</h1>");
document.write("<p>这是一个段落</p>");
</script>
.
.
</body>

②head 中的 JavaScript 函数

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

③外部的 JavaScript

<!DOCTYPE html>
<html>
<body>
<script src="myScript.js"></script>
</body>
</html>

myScript.js 文件代码如下：

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

2、JavaScript 对象

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

<p>创建和使用对象方法。</p>
<p>对象方法作为一个函数定义存储在对象属性中。</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
var person = {
    firstName: "Joesph",
    lastName : "Jostar",
    id : 5566,
    fullName : function() 
	{
       return this.firstName + " " + this.lastName;
    }
};
</script>

<script>
function myFunction() 
{
  document.getElementById("demo").innerHTML = person.fullName();
}
</script>
	
</body>
</html>

3、调用带参数的函数

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

<p>点击这个按钮，来调用带参数的函数。</p>
<button onclick="myFunction('bilibili','trash can')">点击这里</button>
<script>
function myFunction(name,job){
	alert("Welcome " + name + ", the " + job);
}
</script>

</body>
</html>

4、JavaScript HTML DOM

①改变 HTML 输出流

<!DOCTYPE html>
<html>
<body>

<script>
document.write(Date());
</script>

</body>
</html>

②改变 HTML 内容

<html>
<body>

<p id="p1">Hello World!</p>

<script>
document.getElementById("p1").innerHTML="新文本!";
</script>

</body>
</html>

③改变 HTML 属性

<!DOCTYPE html>
<html>
<body>

<img id="image" src="smiley.gif">

<script>
document.getElementById("image").src="landscape.jpg";
</script>

</body>
</html>