了解JavaScript

来源：互联网发布：windows update更新慢编辑：程序博客网时间：2024/05/17 04:15

前言

现代的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里使用

注意：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 情绪控_

0 0