在开始学习任何一种编程语言时,我们总会沿用传统,也就是编写的第一个程序,向世界问声好,下面我们使用JavaScript编写一个“Hello World”的范例。
Hello World!
示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript的第一个程序</title>
</head>
<body>
<script>
window.alert("Hello World!");
</script>
</body>
</html>
之前我们在分享学习HTML和CSS时,全部示例代码都是我在文本编辑器中手动敲出来的,并且我也告诉大家多加练习,最好是使用文本编辑器写代码,这样对代码的每一个关键字都会记忆的更加深刻。
其实另外一点原因是,HTML和CSS在编写过程中,代码的复杂程度还比较低的,即使手动编写代码,出错有bug时,调试程序也不会出现奔溃的结果,最多是你想的效果没有实现或者出现而已。
但是从我们学习编程语言开始,我们就需要用到IDE集成环境工具了,因为编程语言都是比较复杂的,如果没有IDE工具的协助,我们写错了代码或者变量的名称,方法名等简单的问题,调试程序就会变得相当困难,从而导致你降低对学习的兴趣。
能够开发HTML,CSS,JavaScript的IDE集成环境工具很多,大家可以在百度搜索中找找,选择适合自己的,比如像文本编辑器的升级版Notepad++,网页三剑客中的Dreamweaver等等。
我在学习编程的时候,最先接触到的就是JetBrains公司的WebStrom,后来当我需要学习PHP时,就直接切换使用了他们公司的另一款工具phpstrom,用起来很顺手,推荐给大家,当然这些工具都是需要付费的,我们都是初学者,一般都需要下载破解版。
回到上面的代码,大家会发现,有IDE的协助后,一些关于HTML的声明,不用自己写,编辑器会替大家写,这样就减少工作量,也不容易出错了。
编写JavaScript脚本时,一般都是在文件后缀为.js的文件中编写,然后通过在HTML的head部分,引入脚本文件的,但是现在我们是以学习的态度来编写脚本的,所以我一般会把<script></script>放在body部分,这点需要大家注意。
读取document对象的属性:
之前我们讲述过,DOM树包含着方法和属性。现在我们以document属性为例,看看如何读取它的title属性,也就是页面的标题。
示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我是标题</title>
</head>
<body>
<script>
window.alert(document.title);
</script>
</body>
</html>
我们使用window对象的方法alert时,如果是字符串,需要包含在引号内,但是document.title是对象的属性,返回的直接是文本,所以它们没有包含在引号内,这点大家注意。
另外我啰嗦一句,很多编程教程,因为是出版的纸质书籍,纸张呢很贵,篇幅有限,所以在编写代码时,总是把核心代码或者关键代码写出来,这样其实对于初学者来说很不友好,就拿我自己的学习经验来说,看到核心代码或者关键代码,看明白了,但是写不明白,因为不知道把核心代码放在哪里,最后的结果就是调试不出效果,内心很受打击。
所以,我在分享编程语言的代码内容时,尽量做到全部代码都上墙,给初学者最大的帮助,也友好些,但是请有一定经验的码农们不要烦躁,认为我啰嗦的很,包容一下。
小知识点:
如果使用服务器端脚本PHP或者ASP,还能在客户端使用JavaScript进行编程吗?
可以的。
编写的代码,应该对多少种不同的浏览器进行测试呢?
方便的情况下越多越好。实际我的建议是,在谷歌浏览器测试一下即可,毕竟现在的我们,还远没有到技术大牛的阶段。
页面包含JavaScript代码,会不会增加页面加载的事件?
会的,但是因为目前的网络速度较快,而脚本的文件体较小,一般都在百兆以下,所以耗时可以忽略不计的。
作业:
1、JavaScript是解释型语言,还是编译型语言?
2、要添加JavaScript语句,必须在HTML页面里使用什么标签?
a.<script>和</script>
b.<type= "text/javascript">
3、DOM层级结构的最顶层对象是:
a.document对象
b.window对象
4、window.alert("")方法的用途是什么?
a.弹出模态对话中,显示提示
b.把字符内容写入页面文本中
答案:
1、解释型
2、a
3、b
4、a