JavaScript 实例
2021-03-27 16:27:37 50 举报AI智能生成
本思维导图是根据https://www.runoob.com/js/js-examples.html的教程所做的笔记
作者其他创作
大纲/内容
JavaScript 用法
HTML 中的脚本必须位于 <script> 与 </script> 标签之间
脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中
如需在 HTML 页面中插入 JavaScript，请使用 <script> 标签
可以在 HTML 文档中放入不限数量的脚本
脚本可位于 HTML 的 <body> 或 <head> 部分中，或者同时存在于两个部分中
基础 JavaScript 实例
用JavaScript输出文本
<h1>我的第一个 Web 页面</h1>
<p>我的第一个段落。</p>
<script>
document.write(Date());
</script>
<p>我的第一个段落。</p>
<script>
document.write(Date());
</script>
用JavaScript改变HTML元素
<h1>我的第一个 Web 页面</h1>
<p id="demo">我的第一个段落。</p>
<script>
document.getElementById("demo").innerHTML="段落已修改。刚刚";
</script>
在页面加载时向 HTML 的 <body> 写文本
<!DOCTYPE html>
<html>
<body>
.
.
<script>
document.write("<h1>这是一个标题</h1>");
document.write("<p>这是一个段落</p>");
</script>
.
.
</body>
</html>
把一个 JavaScript 函数放置到 HTML 页面的 <head> 部分
该函数会在点击按钮时被调用
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
}
</script>
</head>
<body>
<h1>我的 Web 页面</h1>
<p id="demo">一个段落</p>
<button type="button" onclick="myFunction()">尝试一下</button>
</body>
</html>
把一个 JavaScript 函数放置到 HTML 页面的 <body> 部分
<!DOCTYPE html>
<html>
<body>
<h1>我的 Web 页面</h1>
<p id="demo">一个段落</p>
<button type="button" onclick="myFunction()">尝试一下</button>
<script>
function myFunction()
{
document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
}
</script>
</body>
</html>
外部的 JavaScript
使用外部文件，请在 <script> 标签的 "src" 属性中设置该 .js 文件
<!DOCTYPE html>
<html>
<body>
<script src="myScript.js"></script>
</body>
</html>
myScript.js 文件代码如下
function myFunction()
{
document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
}
外部脚本不能包含 <script> 标签。
注意:
在标签中填写 onclick 事件调用函数时，不是 onclick=函数名， 而是 onclick=函数名+()，代码如下
<script>
function myfunction(){
document.getElementById("demo").innerHTML="onclick事件触发";
}</script>
</head>
<body>
<h1 id="demo">一个段落</h1>
<button onclick="myfunction()" type="button">点击这里</button>
</body>
外部 javascript 文件不使用 <script> 标签，直接写 javascript 代码
HTML 输出流中使用 document.write，相当于添加在原有html代码中添加一串html代码。而如果在文档加载后使用（如使用函数），会覆盖整个文档
<script>
function myfunction(){
document.write("使用函数来执行doucment.write，即在文档加载后再执行这个操作，会实现文档覆盖");
}
document.write("<h1>这是一个标题</h1>");
document.write("<p>这是一个段落。</p>");
</script>
<p >
您只能在 HTML 输出流中使用 <strong>document.write</strong>。
如果您在文档已加载后使用它（比如在函数中），会覆盖整个文档。
</p>
<button type="button" onclick="myfunction()">点击这里</button>
JavaScript 语句、注释和代码块
JavaScript 语句
<body>
<h1>我的 Web 页面</h1>
<p id="demo">一个段落。</p>
<div id="myDIV">一个 DIV。</div>
<script>
document.getElementById("demo").innerHTML="你好 Dolly";
document.getElementById("myDIV").innerHTML="你最近怎么样?";
</script>
</body>
JavaScript 代码块
<body>
<h1>我的 Web 页面</h1>
<p id="myPar">我是一个段落。</p>
<div id="myDiv">我是一个div。</div>
<p>
<button type="button" onclick="myFunction()">点击这里</button>
</p>
<script>
function myFunction(){
document.getElementById("myPar").innerHTML="你好世界！";
document.getElementById("myDiv").innerHTML="你最近怎么样?";
}
</script>
<p>当您点击上面的按钮时，两个元素会改变。</p>
</body>
JavaScript 单行注释
<h1 id="myH1"></h1>
<p id="myP"></p>
<script>
// 输出标题：
document.getElementById("myH1").innerHTML="Welcome to my Homepage";
// 输出段落：
document.getElementById("myP").innerHTML="This is my first paragraph.";
</script>
<p><b>注释：</b>注释不会被执行。</p>
JavaScript 多行注释
/*
下面的这些代码会输出
一个标题和一个段落
并将代表主页的开始
*/
JavaScript 变量
使用 var 关键词来声明变量
声明一个变量，为它赋值，然后显示出来
<script>
var firstname;
firstname="Hege";
document.write(firstname);
document.write("<br>");
firstname="Tove";
document.write(firstname);
</script>
var firstname;
firstname="Hege";
document.write(firstname);
document.write("<br>");
firstname="Tove";
document.write(firstname);
</script>
变量名称对大小写敏感
变量分配文本值时，应该用双引号或单引号包围这个值
向变量赋的值是数值时，不要使用引号
var pi=3.14;
// 如果你熟悉 ES6，pi 可以使用 const 关键字，表示一个常量
// const pi = 3.14;
var person="John Doe";
var answer='Yes I am!';
一条语句，多个变量
var lastname="Doe", age=30, job="carpenter";
未使用值来声明的变量，其值实际上是 undefined
var carname;
如果重新声明 JavaScript 变量，该变量的值不会丢失：
在以下两条语句执行后，变量 carname 的值依然是 "Volvo"：
var carname="Volvo";
var carname;
可以通过 JavaScript 变量来做算数，使用的是 = 和 + 这类运算符
y=5;
x=y+2;
在 2015 年以前，我们使用 var 关键字来声明 JavaScript 变量。
在 2015 后的 JavaScript 版本 (ES6) 允许我们使用 const 关键字来定义一个常量，使用 let 关键字定义的限定范围内作用域的变量
JavaScript 条件语句 If ... Else
If 语句
<p>如果时间早于 20:00，会获得问候 "Good day"。</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction(){
var x="";
var time=new Date().getHours();
if (time<20){
x="Good day";
}
document.getElementById("demo").innerHTML=x;
}
</script>
If...else 语句
<p>点击这个按钮，获得基于时间的问候。</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction(){
var x="";
var time=new Date().getHours();
if (time<20){
x="Good day";
}
else{
x="Good evening";
}
document.getElementById("demo").innerHTML=x;
}
</script>
随机链接
<p id="demo"></p>
<script>
var r=Math.random();
var x=document.getElementById("demo")
if (r>0.5){
x.innerHTML="<a href='http://www.runoob.com'>访问菜鸟教程</a>";
}
else{
x.innerHTML="<a href='http://wwf.org'>Visit WWF</a>";
}
</script>
Switch 语句
<p>点击下面的按钮来显示今天是周几：</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction(){
var x;
var d=new Date().getDay();
switch (d){
case 0:x="今天是星期日";
break;
case 1:x="今天是星期一";
break;
case 2:x="今天是星期二";
break;
case 3:x="今天是星期三";
break;
case 4:x="今天是星期四";
break;
case 5:x="今天是星期五";
break;
case 6:x="今天是星期六";
break;
}
document.getElementById("demo").innerHTML=x;
}
</script>
if...else if...else 语句
if (time<10)
{
document.write("<b>早上好</b>");
}
else if (time>=10 && time<20)
{
document.write("<b>今天好</b>");
}
else
{
document.write("<b>晚上好!</b>");
}
JavaScript 消息框
Alert(警告)框
<script>
function myFunction(){
alert("你好，我是一个警告框！");
}
</script>
带有换行的警告框
<script>
function myFunction(){
alert("Hello\nHow are you?");
}
</script>
确认框
<p>点击按钮，显示确认框。</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
function myFunction(){
var x;
var r=confirm("按下按钮!");
if (r==true){
x="你按下了\"确定\"按钮!";
}
else{
x="你按下了\"取消\"按钮!";
}
document.getElementById("demo").innerHTML=x;
}
</script>
提示框
<script>
function myFunction(){
var x;
var person=prompt("请输入你的名字","Harry Potter");
if (person!=null && person!=""){
x="你好 " + person + "! 今天感觉如何?";
document.getElementById("demo").innerHTML=x;
}
}
</script>
JavaScript 函数
函数
<script>
function myFunction(){
alert("你好，世界!");
}
</script>
带有参数的函数
<p>点击这个按钮，来调用带参数的函数。</p>
<button onclick="myFunction('Harry Potter','Wizard')">点击这里</button>
<script>
function myFunction(name,job){
alert("Welcome " + name + ", the " + job);
}
</script>
带有参数的函数 2
<form>
<input type="button"
onclick="myfunction('Good Morning!')"
value="在早上">
<input type="button"
onclick="myfunction('Good Evening!')"
value="在晚上">
</form>
<p>
当你点击其中任意一个按钮，一个函数将被执行，函数结果弹出一个警告显示传递的参数。
</p>
<script>
function myfunction(txt) {
alert(txt);
}
</script>
返回值的函数
<script>
function myFunction(){
return ("Hello world!");
}
</script>
</head>
<body>
<script>
document.write(myFunction())
</script>
带有参数并返回值的函数
<p>本例调用的函数会执行一个计算，然后返回结果：</p>
<p id="demo"></p>
<script>
function myFunction(a,b){
return a*b;
}
document.getElementById("demo").innerHTML=myFunction(4,3);
</script>
JavaScript 循环
For 循环
<p>单击按钮将代码块循环执行5次。</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
function myFunction(){
var x="",i;
for (i=0;i<5;i++){
x=x + "这个数字是" + i + "
";
}
document.getElementById("demo").innerHTML=x;
}
</script>
循环输出 HTML 标题
<p>单击按钮将HTML标题设置从1到6的样式显示</p>
<button onclick="myFunction()">点我</button>
<div id="demo"></div>
<script>
function myFunction(){
var x="",i;
for (i=1; i<=6; i++){
x=x + "<h" + i + ">Heading " + i + "</h" + i + ">";
}
document.getElementById("demo").innerHTML=x;
}
</script>
While 循环
<p>点击下面的按钮，只要 i 小于 5 就一直循环代码块。</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction(){
var x="",i=0;
while (i<5){
x=x + "该数字为 " + i + "
";
i++;
}
document.getElementById("demo").innerHTML=x;
}
</script>
Do while 循环
<p>点击下面的按钮，只要 i 小于 5 就一直循环代码块。</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction(){
var x="",i=0;
do{
x=x + "该数字为 " + i + "
";
i++;
}
while (i<5)
document.getElementById("demo").innerHTML=x;
}
</script>
break 语句
<p>点击按钮，测试带有 break 语句的循环。</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction(){
var x="",i=0;
for (i=0;i<10;i++){
if (i==3){
break;
}
x=x + "该数字为 " + i + "
";
}
document.getElementById("demo").innerHTML=x;
}
</script>
continue 语句
<p>点击下面的按钮来执行循环，该循环会跳过 i=3 的数字。</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction(){
var x="",i=0;
for (i=0;i<10;i++){
if (i==3){
continue;
}
x=x + "该数字为 " + i + "
";
}
document.getElementById("demo").innerHTML=x;
}
</script>
使用 For...In 声明来遍历数组内的元素
<p>点击下面的按钮，循环遍历对象 "person" 的属性。</p>
<button onclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction(){
var x;
var txt="";
var person={fname:"Bill",lname:"Gates",age:56};
for (x in person){
txt=txt + person[x];
}
document.getElementById("demo").innerHTML=txt;
}
</script>
不同类型的循环
for - 循环代码块一定的次数
for/in - 循环遍历对象的属性
while - 当指定的条件为 true 时循环指定的代码块
do/while - 同样当指定的条件为 true 时循环指定的代码块
JavaScript for/in 语句循环遍历对象的属性
var person={fname:"Bill",lname:"Gates",age:56};
for (x in person) // x 为属性名
{
txt=txt + person[x];
}
JavaScript 事件
onclick事件
<p id="demo">这是一个段落</p>
<button type="button" onclick="displayDate()">显示日期</button>
<script>
function displayDate(){
document.getElementById("demo").innerHTML=Date();
}
</script>
onmouseover 事件
<body>
<img src ="planets.gif" width ="145" height ="126" alt="Planets" usemap="#planetmap" />
<map name="planetmap">
<area shape ="rect" coords ="0,0,82,126"
onmouseover="writeText('太阳和气体巨星类似木星是太阳系中最大的物体。')"
href ="sun.htm" target ="_blank" alt="Sun" />
<area shape ="circle" coords ="90,58,3"
onmouseover="writeText('从地球上很难研究水星，因为它太接近太阳。')"
href ="mercur.htm" target ="_blank" alt="Mercury" />
<area shape ="circle" coords ="124,58,8"
onmouseover="writeText('至到1960年，金星经常被认为是地球的孪生妹妹，因为金星是最靠近我们的行星，并且两个行星有很多相似的特点。')" t')"
href ="venus.htm" target ="_blank" alt="Venus" />
</map>
<p id="desc">鼠标在太阳和星星上移动，可以看到不同的描述。</p>
</body>
<script>
function writeText(txt){
document.getElementById("desc").innerHTML=txt;
}
</script>
JavaScript HTML DOM 事件
HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应。
如需在用户点击某个元素时执行代码，请向一个 HTML 事件属性添加 JavaScript 代码
onclick=JavaScript
HTML 事件的例子
当用户点击鼠标时
当网页已加载时
当图像已加载时
当鼠标移动到元素上时
当输入字段被改变时
当提交 HTML 表单时
当用户触发按键时
本例中，当用户在 <h1> 元素上点击时，会改变其内容
<!DOCTYPE html>
<html>
<body>
<h1 onclick="this.innerHTML='Ooops!'">点击文本!</h1>
</body>
</html>
本例从事件处理器调用一个函数
<!DOCTYPE html>
<html>
<head>
<script>
function changetext(id)
{
id.innerHTML="Ooops!";
}
</script>
</head>
<body>
<h1 onclick="changetext(this)">点击文本!</h1>
</body>
</html>
使用 HTML DOM 来分配事件
向 button 元素分配 onclick 事件
<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
</script>
如需向 HTML 元素分配 事件，您可以使用事件属性
向 button 元素分配 onclick 事件
<button onclick="displayDate()">点这里</button>
onload 和 onunload 事件会在用户进入或离开页面时被触发
onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本
onload 和 onunload 事件可用于处理 cookie
<body onload="checkCookies()">
onchange 事件
onchange 事件常结合对输入字段的验证来使用
使用 onchange 的例子
当用户改变输入字段的内容时，会调用 upperCase() 函数
<input type="text" id="fname" onchange="upperCase()">
onmouseover 和 onmouseout 事件
onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数
onmousedown、onmouseup 以及 onclick 事件
onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。
JavaScript 错误处理
try...catch 语句
<script>
var txt="";
function message(){
try {
adddlert("Welcome guest!");
}
catch(err) {
txt="本页有一个错误。\n\n";
txt+="错误描述：" + err.message + "\n\n";
txt+="点击确定继续。\n\n";
alert(txt);
}
}
</script>
<body>
<input type="button" value="查看消息" onclick="message()" />
</body>
带有确认框的 try...catch 语句
<script>
var txt="";
function message(){
try{
adddlert("Welcome guest!");
}
catch(err){
txt="本页有一个错误。\n\n";
txt+="单击确定继续跳转\n";
txt+="或者单击取消返回\n\n";
if(confirm(txt)){
document.location.href="//www.runoob.com/";
}
}
}
</script>
<body>
<input type="button" value="查看消息" onclick="message()" />
</body>
onerror 事件
<script>
onerror=handleErr;
var txt="";
function handleErr(msg,url,l){
txt="该页面有一个错误\n\n";
txt+="错误: " + msg + "\n";
txt+="URL: " + url + "\n";
txt+="行: " + l + "\n\n";
txt+="点击确定继续。\n\n";
alert(txt);
return true;
}
function message(){
adddlert("Welcome guest!");
}
</script>
<body>
<input type="button" value="查看消息" onclick="message()" />
</body>
JavaScript 错误 - throw、try 和 catch
try 语句测试代码块的错误。
catch 语句处理错误。
throw 语句创建自定义错误。
finally 语句在 try 和 catch 语句之后，无论是否有触发异常，该语句都会执行。
catch 语句处理错误。
throw 语句创建自定义错误。
finally 语句在 try 和 catch 语句之后，无论是否有触发异常，该语句都会执行。
JavaScript try 和 catch
try 语句允许我们定义在执行时进行错误测试的代码块。
catch 语句允许我们定义当 try 代码块发生错误时，所执行的代码块。
JavaScript 语句 try 和 catch 是成对出现的。
try {
... //异常的抛出
} catch(e) {
... //异常的捕获与处理
} finally {
... //结束处理
}
在下面的例子中，我们故意在 try 块的代码中写了一个错字。
catch 块会捕捉到 try 块中的错误，并执行代码来处理它。
var txt="";
function message()
{
try {
adddlert("Welcome guest!");
} catch(err) {
txt="本页有一个错误。\n\n";
txt+="错误描述：" + err.message + "\n\n";
txt+="点击确定继续。\n\n";
alert(txt);
}
}
finally 语句
finally 语句不论之前的 try 和 catch 中是否产生异常都会执行该代码块
function myFunction() {
var message, x;
message = document.getElementById("p01");
message.innerHTML = "";
x = document.getElementById("demo").value;
try {
if(x == "") throw "值是空的";
if(isNaN(x)) throw "值不是一个数字";
x = Number(x);
if(x > 10) throw "太大";
if(x < 5) throw "太小";
}
catch(err) {
message.innerHTML = "错误: " + err + ".";
}
finally {
document.getElementById("demo").value = "";
}
}
Throw 语句
throw 语句允许我们创建自定义错误。
正确的技术术语是：创建或抛出异常（exception）。
如果把 throw 与 try 和 catch 一起使用，那么您能够控制程序流，并生成自定义的错误消息
语法
throw exception
异常可以是 JavaScript 字符串、数字、逻辑值或对象。
本例检测输入变量的值。如果值是错误的，会抛出一个异常（错误）。catch 会捕捉到这个错误，并显示一段自定义的错误消息
function myFunction() {
var message, x;
message = document.getElementById("message");
message.innerHTML = "";
x = document.getElementById("demo").value;
try {
if(x == "") throw "值为空";
if(isNaN(x)) throw "不是数字";
x = Number(x);
if(x < 5) throw "太小";
if(x > 10) throw "太大";
}
catch(err) {
message.innerHTML = "错误: " + err;
}
}
请注意，如果 getElementById 函数出错，上面的例子也会抛出一个错误
高级 JavaScript 实例
创建一个欢迎 cookie
function setCookie(cname,cvalue,exdays){
var d = new Date();
d.setTime(d.getTime()+(exdays*24*60*60*1000));
var expires = "expires="+d.toGMTString();
document.cookie = cname+"="+cvalue+"; "+expires;
}
function getCookie(cname){
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++) {
var c = ca[i].trim();
if (c.indexOf(name)==0) { return c.substring(name.length,c.length); }
}
return "";
}
function checkCookie(){
var user=getCookie("username");
if (user!=""){
alert("欢迎 " + user + " 再次访问");
}
else {
user = prompt("请输入你的名字:","");
if (user!="" && user!=null){
setCookie("username",user,30);
}
}
}
<body onload="checkCookie()"></body>
简单的计时
<p>点击按钮，在等待 3 秒后弹出 "Hello"。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
setTimeout(function(){alert("Hello")},3000);
}
</script>
另一个简单的计时
<script>
function timedText(){
var x=document.getElementById('txt');
var t1=setTimeout(function(){x.value="2 秒"},2000);
var t2=setTimeout(function(){x.value="4 秒"},4000);
var t3=setTimeout(function(){x.value="6 秒"},6000);
}
</script>
<form>
<input type="button" value="显示文本时间!" onclick="timedText()" />
<input type="text" id="txt" />
</form>
<p>点击上面的按钮，输出的文本将告诉你2秒，4秒，6秒已经过去了。</p>
在一个无穷循环中的计时事件
<script>
var c=0;
var t;
var timer_is_on=0;
function timedCount(){
document.getElementById('txt').value=c;
c=c+1;
t=setTimeout("timedCount()",1000);
}
function doTimer(){
if (!timer_is_on)
{
timer_is_on=1;
timedCount();
}
}
</script>
<form>
<input type="button" value="开始计数!" onClick="doTimer()">
<input type="text" id="txt">
</form>
<p>单击按钮，输入框将从0开始一直计数。</p>
带有停止按钮的无穷循环中的计时事件
<script>
var c=0;
var t;
var timer_is_on=0;
function timedCount(){
document.getElementById('txt').value=c;
c=c+1;
t=setTimeout(function(){timedCount()},1000);
}
function doTimer(){
if (!timer_is_on){
timer_is_on=1;
timedCount();
}
}
function stopCount(){
clearTimeout(t);
timer_is_on=0;
}
</script>
<form>
<input type="button" value="开始计数!" onclick="doTimer()" />
<input type="text" id="txt" />
<input type="button" value="停止计数!" onclick="stopCount()" />
</form>
<p>
单击开始计数按钮，按下时开始计数，输入框将从0开始一直计数。单击停止计数按钮，按下时停止计数，再次点击开始计数按钮，又再次开始计数。
</p>
使用计时事件制作的钟表
<script>
function startTime(){
var today=new Date();
var h=today.getHours();
var m=today.getMinutes();
var s=today.getSeconds();// 在小于10的数字前加一个‘0’
m=checkTime(m);
s=checkTime(s);
document.getElementById('txt').innerHTML=h+":"+m+":"+s;
t=setTimeout(function(){startTime()},500);
}
function checkTime(i){
if (i<10){
i="0" + i;
}
return i;
}
</script>
<body onload="startTime()">
<div id="txt"></div>
</body>
创建对象的实例
<body>
<script>
person={firstname:"John",lastname:"Doe",age:50,eyecolor:"blue"}
document.write(person.firstname + " is " + person.age + " years old.");
</script>
</body>
创建用于对象的模板
<body>
<script>
function person(firstname,lastname,age,eyecolor){
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;
}
myFather=new person("John","Doe",50,"blue");
document.write(myFather.firstname + " is " + myFather.age + " years old.");
</script>
</body>
收藏
0 条评论
下一页
