谈谈我的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对话框。

image

在这段代码中,javascript代码被封装在<script></script>元素内,当浏览器读取到这个元素时候,就不会以HTML或XHTML的方式解析这段代码,而是通知浏览器的脚本引擎(js解释器)来管理这里面的内容。嵌入在网页的脚本不一定指的是javascript,script元素的type属性定义了脚本的类型,这个例子中定义的标本类型就是text/javascript。还有其它可能的属性,例如

image

关于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)的博客)

原文地址:https://www.cnblogs.com/magicgua/p/4373573.html