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

绝地灬酷狼 2021-11-11 16:24 398阅读 0赞

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

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

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

**一、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结构如下图所示：

![2012110311233895.jpg][]

CSS:

p {
    	color:#333;
    	font-size:1.2em;
    }	
    
    #main {
    	width:90%;
    	background-color:#eee;
    }

** **

**二、JavaScript 简介**

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

![2012110311353014.jpg][]

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

![2012110311403676.jpg][]

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

*  不能访问本地文件（local files）
 *  不能直接与数据库交互（database）
 *  不能访问硬件（如，USB等）

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

![2012110311482092.jpg][]

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

![2012110311514093.jpg][]

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

** **

**三、JavaScript的一些问题**

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

** **

**四、JavaScript的前世今生**

![2012110312051776.jpg][]

![2012110312053037.jpg][]

** **

**五、用什么来写JavaScript？**

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

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

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

** **

**六、JavaScript工具**

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

![2012110312152940.jpg][]

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

![2012110312160496.jpg][]

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

![2012110312191445.jpg][]

最后，用一个简单的例子来结束我的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>

转载于:https://www.cnblogs.com/giszhou/archive/2012/11/03/2752318.html

[HTML]: http://www.w3schools.com/html/default.asp
[CSS]: http://www.w3school.com.cn/css/
[2012110311233895.jpg]: /images/20211109/fc4009450e624519950bebf487845cc8.png
[2012110311353014.jpg]: /images/20211109/6c9fcb03828c46d38f1dec47144a9e19.png
[2012110311403676.jpg]: /images/20211109/51fdfe45326944918868a1e621d8ce34.png
[2012110311482092.jpg]: /images/20211109/876e7fab100244d5bad69848a21ee3ac.png
[2012110311514093.jpg]: /images/20211109/371f6edd4d04413eaa40366f2131b084.png
[2012110312051776.jpg]: /images/20211109/be5dfd226593499cb478797dd58b6daa.png
[2012110312053037.jpg]: /images/20211109/c9e2a68ebc394a289695c60af1133e76.png
[Aptana]: http://www.aptana.com
[2012110312152940.jpg]: /images/20211109/b7c2ce40d74d4308a06e7d20e7e0293e.png
[2012110312160496.jpg]: /images/20211109/8ce42456555344afa44ba490e39ec19a.png
[Firebug]: http://getfirebug.com
[2012110312191445.jpg]: /images/20211109/05f2a53b39e5401e870d78dfbb0d6175.png