JavaScript简介-JavaScript入门基础（001）

今天我们分享关于JavaScript的内容。

 

早期的web，内容主要是文本，现在的web则完全不同，它包含了声音、视频、动画、交互导航等元素，在这其中JavaScript扮演着很重要的角色。

 

JavaScript常见功能包括：

 

1、以指定尺寸、位置和样式打开新窗体；

2、提供用户友好的导航帮助，如下拉菜单等；

3、检验web表单输入的数据，以保证向服务器提交的数据是有效的格式；

4、在事件发生时，改变页面元素的外观与行为；

5、检测和发现特定浏览器支持的高级功能，比如第三方插件的支持。

 

由于JavaScript代码只在用户浏览器内部运行，页面对指令做出的相应快速，这样就增强了用户的体验感，仿佛web应用程序是在本地计算机运行的程序。

 

JavaScript起源：

 

20世纪90年代，首先是Netscape Navigator 2 引入了1.0版本。

 

随后，欧洲计算机制造商协会ECMA开始介入，制定了ECMAScript规范，从而奠定了JavaScript的发展基础。同时呢，微软也开发了自己版本的JavaScript，叫做JScript，并在其自己的IE浏览器上适配。

 

20世纪90年代后期，Netscape Navigator 4 和 IE4都宣布对JavaScript提供更好的支持，但是两组开发人员却走上了不同的道路，他们分别给JavaScript语言本身和web页面的交互，定义了自己的规范，从而导致了开发者的混乱，开发人员在开发代码时总是需要编写更多的代码来适应两种规范。

 

后期，经过网际网络联盟W3C的努力，通过DOM规范了浏览器制造商对页面交互方式的定义和操作。（网际网络联盟W3C，全称是 World Wide Web Consortium，是一个国际组织，致力于指定开放标准来支撑互联网的发展。）

 

 

<script>标签：

 

在HTML里使用<script>和</script>标签，来定义JavaScript的语句。

 

语法：

 

 

<script>  ......Javascript statements代码</script>

 

JavaScript是一种解释性语言，无需编译，不像C++或Java语言，需要编译才可以运行。JavaScript指令以纯文本的形式发送给浏览器，然后依次解释执行。正是由于这个特点，JavaScript程序便于阅读，也便于编辑，在本地就可以进行测试。

 

本次分享的代码都是符合HTML5规范的，即在<script>元素中没有任何必须设置的属性，但是如果是在HTML4.01或XHTML页面中声明JavaScript，就需要使用type属性了。比如

 

​​​​​​​

<script type="text/javascript">  .....代码</script>

 

但是在早期的页面开发中，我们还能够见到属性language="JavaScript"，这种方式已经被弃用了，除非是需要支持非常古老的浏览器，否则代码不必这样写的。

 

在代码分享过程中，为了便于学习和理解，我会把Javascript代码放在body部分中，但是实际开发中都是在head部分，进行引用的，这个需要大家了解。

 

DOM简介：

 

文档对象模型，英文简称Document Object Model，是对文档及其内容的抽象表示。

 

每次浏览器在加载和显示页面时，都需要解析页面的HTML代码，在解析过程中，浏览器建立一个内部模型来表示文档里的内容，这个模型就是DOM。

 

在早期，JavaScript只能对web页面的某部分进行基本的访问，所以web开发人员有时把这样的情形称为0级DOM，以便与W3C的1级DOM向下兼容。

 

window和document对象：

 

在DOM里，页面的元素具有一个逻辑化、层级化的结构，就像相互关联的父对象和子对象组成一个树形结构。这个层级树的最顶端是浏览器window对象，它是页面DOM中一切对象的父对象。

 

window对象包含，document，location，history，navigator。

 

对象表示法：

 

在这个树形结构中，表示父与子的关系，如下：

 

 

parent.child

 

这个学习过c语言或者c++，java的同学，对这种表示方式很熟悉。

 

如果需要多层次的表示父子关系，如下：

 

 

object1.object2.object3

 

表示object3，其父对象是object2，而object2,又是object1的子对象。

 

在HMTL页面的body部分，如果需要使用DOM表示，如下：

 

 

window.document.body

 

需要表示一个对象的属性或者方法，可以这样：

 

​​​​​​​

object1.object2.property属性object1.object2.method方法

 

简洁写法：

 

window对象始终包含当前浏览器窗口，所以使用window.document就可以访问文档，作为简化表示，就可以直接使用document来访问文档。

 

​​​​​​​

window.document 简化 document

 

与用户交互：

 

在介绍window和document对象之前，我们先介绍两个非常常用的方法，这个是与用户交互的最便捷手段。

 

提示框：

 

 

window.alert("提示内容");

 

很多时候，我们调试程序时，需要输出一个变量的值，来观察程序的正确与否，通常会使用提示框，观察结果。

 

​​​​​​​

<script>  window.alert("提示内容");</script>

 

同样可以简洁写法：

 

​​​​​​​

<script>  alert("提示内容");</script>

 

这里需要注意一点，要显示的文本必须位于引号之中。引号可以是双引号，也可以是单引号。

 

页面输出：

 

语法：

 

​​​​​​​

<script>  window.document.write("输出内容");</script>

 

这个方法的功能是，直接向页面输出HTML文档内容的。

 

 

 

---