JavaScript学习笔记[1]---入门

前端时间也一直在接触JavaScript的一些东西,最近陆续要做一些笔记,方面以后查阅。不知道怎么开始,先从Douglas Crockford的《JavaScript:The Good Parts》中的一段话作为开头吧。

JavaScript是一门重要的语言,因为它是Web浏览器的语言。它与浏览器的结合使它成为世界上最流行的编程语言之一。同时,它也是世界上嘴被轻视的编程语言之一。浏览器的API和文档对象模型(DOM)相当糟糕,连累JavaScript遭到不公平的指责。

好了,废话少说,开始JavaScript的入门,我这个以前没接触过任何Web相关的编程菜鸟,先得简单看看与JavaScript不能分隔的HTMLCSS

一、HTML & CSS的第一印象

下面是一段简单的HTML代码(这个应该很简单):

<html>
	<head>
		<title>About JavaScript </title>
	</head>
	<body>
		<h1>Learning JavaScript</h1>
		<p>JavaScript is:</p>
		<ul id="optionList">
			<li>a language that runs in the browser</li>
			<li>simple, but powerful</li>
			<li>misunderstood</li>
		</ul>
	</body>
</html>

上面的HTML结构如下图所示: 

CSS:

p {
	color:#333;
	font-size:1.2em;
}	

#main {
	width:90%;
	background-color:#eee;
}

 

二、JavaScript 简介

说到网页制作,谈到JavaScript,就不得不说HTML和CSS。三者之间有什么关系呢,下图很好的诠释了三者在网页中的功能和关系。HTML是网页内容的主体,承载着所有要显示的内容;而CSS主要是控制内容的展示方式和风格;至于JavaScript就是网页的行为和交互(PS.这么说挺别扭的,先将就着看吧),比如走马观花似的如何控制图片的运动和如何渐变切换等等。

JavaScript从名字看,可以大概知道它是一门Script的Language,可是何谓脚本语言呢?与我之前接触的.NET、Java、C……有何区别?JavaScript就是为浏览器而生的,下图很清晰的介绍了他们的区别。

从图中看以看出,其他语言的应用直接依附与操作系统,与操作系统进行交互;而JavaScript依赖与网页,网页又必须有相应的浏览器的支持。因此JavaScript虽然强大,但也有很多做不了的事情,如:

  • 不能访问本地文件(local files)
  • 不能直接与数据库交互(database)
  • 不能访问硬件(如,USB等)

同时,它还是一种基于客户端(浏览器)的语言,用户通过浏览器访问网页,将请求发送至Web服务器;Web服务器会将HTML、CSS、JavaScript一并发送至用户的浏览器端。

当然,随着JavaScript的发展,它越来越流行,当然不仅仅局限于Web端,还有一些其他的应用,如在应用程序中,甚至服务端,如Node.js等。

总的来说,JavaScript是一门针对Web Page灵活的语言。(PS.等我更深层次的学习后,在修改这句),当然我这里学的都是,怎么说,经典的JavaScript,至少不会涉及到Node.js以及应用程序中的应用。这里谈的只是单纯的做网页的JavaScript。

 

三、JavaScript的一些问题

在网站中用到JavaScript时,还需要考虑一些问题。如,用户是否会禁用JavaScript(貌似基本不会);另一个,就是客户端浏览器的兼容问题(这个很让人头疼)。不过,我相信随着JavaScript的发展,和一些工具的出现,这些问题都不再是问题。

 

四、JavaScript的前世今生

 

五、用什么来写JavaScript?

说了那么多JavaScript,那我用什么来写JavaScript代码呢?

  • Mac?
  • PC?
  • Linux?
  • Unix?
  • ASP.NET?
  • Ruby on Rails?
  • ColdFusion?
  • PHP?
  • Xcode?
  • Visual Studio?
  • Eclipse?
  • NetBeans?
  • TextMate?

不,我只需要一个文本编辑器,如记事本或者是Notepad++。

 

六、JavaScript工具

当然,为了更高效的编写JavaScript,可以选择你喜欢的工具。我这里推荐一款Aptana

由于我已经安装了Eclipse,所以下载了Eclipse Aptana的插件。

至于浏览器,可以使用Chorme、IE或者是Firefox。如果是Firefox浏览器,推荐一个好用的调试Bug的工具Firebug

最后,用一个简单的例子来结束我的JavaScript入门:

<html>
	<head>
		<title>Simple Page</title>
	</head>
	<body>
		<h1>Simple HTML Page</h1>
		<p>
			This is a very simple HTML page.
		</p>

		<p>
			It's about as basic as they come. It has:
		<p>
			<ul>
				<li>
					An H1 Tag
				</li>
				<li>
					Two paragraphs
				</li>
				<li>
					An unordered list
				</li>
			</ul>

			<script>
			// this is a comment
			/*
			this is a
			multiple
			line
			comment
			*/
				alert("Hello, world!");
			</script>
	</body>
</html>
posted @ 2012-11-03 12:28  Vincent Chou  阅读(...)  评论(...编辑  收藏