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>
运行效果如图:
点击按钮:
未完待续…