了解JavaScript

前言


现代的Web几乎是完全不同的,它包含了声音、视频、动画、交互导航等很多元素,而JavaScript对于实现这些


功能扮演了非常重要的角色。正因为JavaScript的强大,本人目前也在学习这门语言,为了能快速的了解这门语言,


选了一本入门级的书籍,博客中记录的内容出自《JavaScript入门经典(第五版)》,如果觉得博文不够详细的话,建议


初学者还是买一本入门级书籍学习。


Web脚本编程基础


在学习JavaScript这门语言之前,最好能对于使用某种HTML编写Web页面有一些基本的理解。HTML不是编程


语言,而是一款标签语言,用于标签页面的各个部分在浏览器里以何种方式展现,比如加粗或斜体字,或是作为标


题,或是一系列选项,或是数据表格,或是其他修饰方式。


当编写完成后,这些页面的本质就决定了他们是静态的。它们不能对用户操作做出响应,不能进行判断,不能调


整页面元素显示。无论用户何时访问这些页面,其中的标签都会被以相同的方式进行解析和显示。


在平时我们见到的页面基本上都不是静态的,其中包含各种交互操作,这些功能是通过程序来实现的,它们在后


台运行,操纵着浏览器显示的内容。


服务器端与客户端编程


给静态页面添加脚本有两种最基本的方式。


1、让Web服务器在把页面发送给用户之前执行脚本。这样的脚本可以确定把哪些内容发送给浏览器以显示给用户,


这些脚本通常运行在Web服务器上,而且是在生成页面并提供给用户之前运行的。


2、另外一种方式并不是在服务器运行脚本,而是把脚本与页面内容一起发送给用户的浏览器。然后浏览器运行这些


脚本,操作已经发送给浏览器的页面内容。这些脚本的主要功能包括动画页面的部分内容,重新安排页面布局,允许


用户在页面内拖放元素等等,这些脚本称为“客户端脚本”。


JavaScript是互联网上最广泛应用的客户端脚本。


JavaScript简介


用JavaScript编写的程序能够访问Web页面的元素和运行它的浏览器,对这些元素执行操作,还可以创建新元


素。JavaScript常见的功能包括:


(1)以指定尺寸、位置和样式打开新窗口。


(2)提供给用户友好的导航帮助,比如下拉菜单。


(3)校验Web表单输入的数据,在向Web服务器提交表单之前确保数据格式正确。


(4)在特定事件发生时,改变页面元素的外观与行为。


(5)检测和发现特定浏览器支持的功能,比如第三方插件,或是对新技术的支持。


由于JavaScript代码只在用户浏览器内部运行,页面会对JavaScript指令做出快速响应,从而改善用户的体验,


让Web应用更像在用户本地计算机运行的程序而不是一个页面。另外,JavaScript能够检测和响应特定的用户操作,


比如鼠标点击和键盘操作。


<script>标签


当用户访问一个页面是,页面中包含的JavaScript代码会与其他页面内容一起传递给浏览器,在HTML里使用


<script>和</script>标签,可以在HTML代码里直接包含JavaScript语句。


注意:JavaScript是一种解释型语言,不是C++或Java那样的编译语言,JavaScript指令以普通文本形式传递给浏览


器,然后依次解释执行。它们不必首先“编译”成只有计算机处理器能够理解的机器码,这让JavaScript程序很便于阅


读,能够迅速地进行编辑,然后在浏览器里重新加载页面就可以进行测试。


DOM简介


“文档对象模型”(DOM)是对文档及其内容的抽象表示。


每次浏览器要加载和显示页面时,都需要解析构成页面的HTML源代码。在解析过程中,浏览器建立一个内部模


型来代表文档里的内容,这个模型就是DOM。在浏览器渲染页面的可见内容时,就会引用这个模型。我们利用


JavaScript可以访问和编辑这个DOM模型的各个部分,从而改变页面的显示内容和用户交互的方式。


window和document对象


浏览器每次加载和显示页面时,都在内存里创建页面及其全部元素的一个内部表示体系,也就是DOM。在DOM


里,页面的元素具有一个逻辑化、层级化的结构,就像一个由父对象和子对象组成的树形结构。这些对象及其相互关


系构成了Web页面及显示页面的浏览器的抽象模型。每个对象都有“属性”列表来描述它,而利用JavaScript可以使用


一些方法来操作这些属性。


这个层级树的最顶端是浏览器window对象,它是DOM树里一切对象的根。


window对象具有一些子对象,浏览器加载的任何HTML页面都会创建一个document对象,包含全部HTML内容


及其他构成页面显示的资源。利用JavaScript以父子对象的形式就可以访问这些信息。这些对象都具有自己的属性和


方法。


与用户交互


window.alert()


window对象位于DOM层级的最顶端,代表了显示页面的浏览器窗口。当我们调用alert()方法时,浏览器会弹出


一个对话框显示设置的信息。代码如下:

<!DOCTYPE html>
<html>
<head>
	<title>JavaScript</title>
</head>
<body>
	<script>
		window.alert("Hello");
	</script>
</body>
</html>


运行的效果如下:


document.write()


这个方法是直接向HTML文档写入字符,如以下代码:

<!DOCTYPE html>
<html>
<head>
	<title>JavaScript</title>
</head>
<body>
	<script>
		document.write("Hello JavaScript!");
	</script>
</body>
</html>



运行效果如下:



读取document对象的属性


DOM树包含方法和属性,前面实例使用document对象的write方法向页面输出文本,也可以读取document对象


的属性,如以下程序,读取document对象的title,并传递给alert()方法。

<!DOCTYPE html>
<html>
<head>
	<title>Hello JavaScript!!!</title>
</head>
<body>
	<script>
		alert(document.title);
	</script>
</body>
</html>


运行效果如下:




 -------------------------------------------------------------------------------------------------------------------------------

   转载请注明出处:http://blog.csdn.net/hai_qing_xu_kong/article/details/40692609  情绪控_  

   

©️2020 CSDN 皮肤主题: 猿与汪的秘密 设计师:上身试试 返回首页