![JavaScript程序设计基础教程(慕课版)](https://wfqqreader-1252317822.image.myqcloud.com/cover/511/27112511/b_27112511.jpg)
上QQ阅读APP看书,第一时间看更新
1.7 编写第一个JavaScript程序
精讲视频
![015-01](https://epubservercos.yuewen.com/4DABB9/15478139405819406/epubprivate/OEBPS/Images/48694-00-14-2.jpg?sign=1739315560-iTaYOUDH705RqO7PT04UbBujrym9dto9-0-4a9412d61db507c554a9162f460b3d41)
编写第一个JavaScript程序
学习JavaScript或者其他新技术的最佳方法都是一样的,要多写多练。每一个范例都务必弄懂并亲自编写。
下面通过一个例子——脚本1-1,编写第一个JavaScript程序。通过它可以说明JavaScript的脚本是怎样被嵌入到HTML文档中的。
脚本1-1.html
<html> <head> <span class="kindle-cn-bold"><script Language="JavaScript"></span> <span class="kindle-cn-bold">// JavaScript Appears here</span> <span class="kindle-cn-bold">alert("这是第一个JavaScript例子!");</span> <span class="kindle-cn-bold">alert("欢迎你进入JavaScript世界!");</span> <span class="kindle-cn-bold"></script></span> </head> </html>
上例是一个HTML文档,其标识格式为标准的HTML格式。如同HTML一样,JavaScript程序代码是一些可用字处理软件浏览的文件,它在描述页面的HTML相关区域出现。alert()是JavaScript的窗口对象方法,其功能是弹出一个具有“确定”按钮的对话框,并显示()中的字符串。//用来标识注释,注释内容不会被执行。使用注释是一个好的编程习惯,它使其他人可以读懂你的代码。JavaScript以</script>标签结束。从上面的实例分析中可以看出,编写一个JavaScript程序是非常容易的。
运行这个实例分别弹出两个窗口,如图1.6和图1.7所示。
![015-01](https://epubservercos.yuewen.com/4DABB9/15478139405819406/epubprivate/OEBPS/Images/48694-00-14-3.jpg?sign=1739315560-SAswhPMnR0DrExTJ2gIrgUT45cKNm5E7-0-80e334faddb06416e565788d9ddc673a)
图1.6 第一个JavaScript程序弹窗1
![015-01](https://epubservercos.yuewen.com/4DABB9/15478139405819406/epubprivate/OEBPS/Images/48694-00-15-1.jpg?sign=1739315560-6UIaofBMdrYpcpYPmnw0xRTSOffXxUIX-0-df987c3d5586e5a068808f655ddddbcc)
图1.7 第一个JavaScript程序弹窗2
【任务1-1】热身
1. 任务介绍
JavaScript是一门很神奇的语言,在开始学习之前,先来按照下面的操作做一个小任务,看看结果窗口会有什么变化。
如脚本1-2所示,在<script></script>标签中输入document.write("hello")和document.getElementById("p1").style.color = "blue";保存后运行脚本看看结果窗口会有什么变化。
2. 实现代码
完整代码如脚本1-2所示。
脚本1-2.html
<html> <head> <title>热身</title> </head> <body> <p id="p1">我是第一段文字</p> <p id="p2">我是第二段文字</p> <script Language="JavaScript"> document.write("hello"); document.getElementById("p1").style.color="blue"; </script> </body> </html>
3. 运行结果
运行脚本1-2显示结果如图1.8所示。
![015-01](https://epubservercos.yuewen.com/4DABB9/15478139405819406/epubprivate/OEBPS/Images/48694-00-15-2.jpg?sign=1739315560-wRaOO89EIZU6k7pjRuRPul5scd8ODehv-0-c5c7472116ac754a764b3c2e2236d9c7)
图1.8 运行结果