谈谈我的js学习过程(二)——“Hello World!”
在《谈谈我的js学习过程(一)》中,我简单聊了一下我认为的javascript的学习方法,接下来我们可以尝试来写一个最简单的js代码。
“Hello World!”对于我而言意义真的很重大,例如当你看到一个弹窗美妙优雅(=。=!)地从浏览器里蹦出来,带着你亲手敲上的hello world!
那种成就感,会让你不可自拔地相信你完全可以很好地学会这门语言。当然,也就是那时而言。不废话了……
我们使用javascript并不用特别安装额外的组件,不用配置任何的路径等等,便可以直接在浏览器中运行。最基础的,我们需要做的,就是在.html文档中加一个script代码块。至于这个代码块的位置,我稍微再说,现在先将这个代码块加在<head>元素里面。
【代码】
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>window_onload()</title> <meta name="author" content="blck" /> <!-- Date: 2015-03-24 --> <script type="application/javascript"> alert("Hello World!"); </script> </head> <body> </body> </html>
这个网页中的script代码只有一行,用于弹出一个alert对话框。
在这段代码中,javascript代码被封装在<script></script>元素内,当浏览器读取到这个元素时候,就不会以HTML或XHTML的方式解析这段代码,而是通知浏览器的脚本引擎(js解释器)来管理这里面的内容。嵌入在网页的脚本不一定指的是javascript,script元素的type属性定义了脚本的类型,这个例子中定义的标本类型就是text/javascript。还有其它可能的属性,例如
关于script的其它属性,可以参照这里的内容来扩展学习。
http://www.w3school.com.cn/tags/tag_script.asp
【关于javascript代码的位置】
首先,按理来说,javascript可以放在HTML文档中的任何位置,但是由于浏览器是按照文档流从上到下来解析页面结构和信息的,所以放在不同的位置会对解析产生不同的效果,或者说,会对javascript的执行有一定影响。
在网页中引用js有几种不同的方法:
第一种最常用的是在head标签内嵌入javascript代码;
第二种是将js代码放在<body></body>标签内;
第三种是引用外部的.js文件,就是在<head />里面写上例如,<script src=”test.js”></script>来调用一个外部的名为test的js文件。
1)定义在head元素中的js代码,会在整个页面完成前就加载js,一般推荐写在这个位置,虽然总会出现一个问题就是,如果想在js获取HTML的某个元素,但是这时候HTML并没有加载完成,容易出现js找不到对应的元素的问题,所以我们会通过window.onload = function(){},将部分js代码写在这个匿名函数里面,也就可以,在页面全部加载完成之后,再执行window.onload = function(){}里面的js语句。
2)定义在body元素中的js代码,是按照文档流加载的,当遇到js代码的时候,浏览器会停止对html、css和图片等的加载,将js加载完成才继续。
3)引用外部的js文件的话,是一种内容结构分离的做法,当js代码量比较多的时候,可以将js代码写在一个.js文件中,然后用<script />标签引用进来。
(关于js的位置,这个问题涉及的内容比较多,例如对页面效果的呈现,是否能顺序修改dom元素等等,这部分内容之后再单独谈,在这里推荐一篇博客,关于js加载问题
http://www.blogjava.net/BearRui/archive/2010/04/08/web_performance_js_where.html BearRui(AK-47)的博客)
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。