【RL-TCPnet网络教程】第48章 JavaScript基础知识

席萌0209 · 发表于 2018-1-11 15:45:26

第48章 JavaScript基础知识

本章节为大家讲解JavaScript基础知识，JavaScript属于网络脚本语言，被数百万计的网页用来改进设计、验证表单、检测浏览器、创建cookies，以及更多的应用，是因特网上最流行的脚本语言。

（本章的知识点主要整理自网络）

48.1 初学者重要提示

48.2 JavaScript基础知识参考资料

48.3 JavaScript基础知识点

48.4 HTML中嵌入JavaScript的方法

48.5 总结

48.1 初学者重要提示

1、学好JavaScript有举足轻重的作用，如果打算深入Web前端设计，JavaScript必学。

2、通过本章的学习，要为后面章节学习Ajax（异步JavaScript+XML）技术做准备。

3、关于JavaScript的学习资料汇总和快速上手的说明专门放在了此贴里面：

http://bbs.armfly.com/read.php?tid=36065 。由于涉及到的资料不是我们原创，所以就不往教程中添加了，建议初学者必看！！！

48.2 JavaScript基础知识参考资料

大家可以从以下地址获得JavaScript基础知识参考资料：

1、wiki百科中文版JavaScript：地址链接（这个是超链接）

2、wiki百科英文版JavaScript：地址链接（这个是超链接）

3、百度百科JavaScript：地址链接（这个是超链接）

对这些基础知识有个了解后，直接看48.1小节中推荐的入门学习资料即可。

席萌0209 · 发表于 2018-1-11 15:50:00

48.3 JavaScript基础知识点

（这里的知识点整理自上面的参考资料地址和w3school）

教程这里也对JavaScript的基础知识做个介绍，方便大家先有个大概的认识。

48.3.1 JavaScript简要说明

JavaScript，一种高级编程语言，通过解释执行，是一门动态类型，面向对象（基于原型）的直译语言。它已经由ECMA（欧洲电脑制造商协会）通过ECMAScript实现语言的标准化。它被世界上的绝大多数网站所使用，也被世界主流浏览器（Chrome、IE、FireFox、Safari、Opera）支持。JavaScript是一门基于原型、函数先行的语言，是一门多范式的语言，它支持面向对象编程、命令式编程以及函数式编程。它提供语法来操控文本、数组、日期以及正则表达式等，不支持I/O，比如网络、存储和图形等，但这些都可以由它的宿主环境提供支持。

虽然JavaScript与Java这门语言不管是在名字上，或是在语法上都有很多相似性，但这两门编程语言从设计之初就有很大的不同，JavaScript的语言设计主要受到了Self（一种基于原型的编程语言）和Scheme（一门函数式编程语言）的影响。在语法结构上它又与C语言有很多相似（例如if条件语句、while循环、switch语句、do-while循环等）。

在客户端，JavaScript在传统意义上被实现为一种解释语言，但在最近，它已经可以被即时编译（JIT）执行。随着最新的HTML5和CSS3语言标准的推行，它还可用于游戏、桌面和移动应用程序的开发和在服务器端网络环境运行，如Node.js。

一般来说，完整的JavaScript包括以下几个部分：

1、ECMAScript，描述了该语言的语法和基本对象。

2、文档对象模型（DOM），描述处理网页内容的方法和接口。

3、浏览器对象模型（BOM），描述与浏览器进行交互的方法和接口。

它的基本特点如下：

1、是一种解释性脚本语言（代码不进行预编译）。

2、主要用来向HTML页面添加交互行为。

3、可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离。

JavaScript常用来完成以下任务：

1、嵌入动态文本到HTML页面。

2、对浏览器事件作出响应。

3、读写HTML元素。

4、在数据被提交到服务器之前验证数据。

5、检测访客的浏览器信息。

6、控制cookies，包括创建和修改等。

48.3.2 JavaScript发展史

1995年，当时在网景公司就职的Brendan Eich正为Netscape Navigator 2.0浏览器开发的一门名为LiveScript的脚本语言。后来网景在与Sun公司合作之后将其改名为JavaScript。JavaScript最初受Java启发而开始设计的，目的之一就是“看上去像Java”，因此语法上有类似之处，一些名称和命名规范也借自Java。但JavaScript的主要设计原则源自Self和Scheme。JavaScript与Java名称上的近似，是当时网景为了营销考虑与Sun达成协议的结果。

JavaScript推出后在浏览器上大获成功，微软公司不久后就为Internet Explorer 3.0浏览器推出了JScript，用来与处于市场领导地位的网景产品同台竞争。JScript也是一种JavaScript实现，这两个JavaScript语言版本在浏览器端共存意味着语言标准化的缺失，对这门语言进行标准化被提上了日程，在1997年，由网景、Sub、微软、Borland等公司组织及个人组成的技术委员会在ECMA（欧洲计算机制造商协会）确定定义了一种名叫ECMAScript的新脚本语言标准，规范名为ECMA-262。JavaScript成为了ECMAScript的实现之一。

完整的JavaScript实现应该包含三个部分：ECMAScript（语言核心）、DOM（文档对象模型）和BOM（浏览器对象模型）。

JavaScript目前为甲骨文公司在美国的注册商标。

48.3.3 JavaScript特性

JavaScript脚本语言具有以下特点：

1、脚本语言

JavaScript是一种解释型的脚本语言。C、C++等语言先编译后执行，而JavaScript是在程序的运行过程中逐行进行解释。

2、基于对象

JavaScript是一种基于对象的脚本语言，它不仅可以创建对象，也能使用现有的对象。

3、设计简单紧凑

JavaScript语言中采用的是弱类型的变量类型，对使用的数据类型未做出严格的要求，是基于Java基本语句和控制的脚本语言，其设计简单紧凑。

4、动态性

JavaScript是一种采用事件驱动的脚本语言,它不需要经过Web服务器就可以对用户的输入做出响应。在访问一个网页时,鼠标在网页中进行点击或上下移、窗口移动等操作，JavaScript都可直接对这些事件给出相应的响应。

5、跨平台性

JavaScript脚本语言不依赖于操作系统,仅需要浏览器的支持。因此一个JavaScript脚本在编写后可以带到任意机器上使用，前提是机器上的浏览器支持JavaScript脚本语言，目前JavaScript已被大多数的浏览器所支持。

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

不同于服务器端脚本语言，例如PHP与ASP。JavaScript主要被作为客户端脚本语言在用户的浏览器上运行，不需要服务器的支持。所以早期程序员比较青睐于JavaScript来减少对服务器的负担，而与此同时也带来另一个问题：安全性。

随着服务器的强壮，虽然程序员更喜欢运行于服务端的脚本以保证安全，但JavaScript仍然以其跨平台、容易上手等优势大行其道。同时，有些特殊功能（比如Ajax）必须依赖Javascript在客户端进行支持。随着引擎（比如V8）和框架（比如Node.js）的发展，及其事件驱动、异步IO等特性，JavaScript逐渐被用来编写服务器端程序。且在近几年中，Node.js的出世，让JavaScript也具有了一定的服务器功能，且在某些方面比PHP的效果更为显著。

席萌0209 · 发表于 2018-1-11 15:54:11

48.4 HTML中嵌入JavaScript的方法

HTML 中的脚本必须位于<script>与</script>标签之间。脚本可被放置在HTML页面的<body>和<head>部分中。

48.4.1 <script>标签

如需在HTML页面中插入JavaScript，需使用<script>标签。<script>和</script>会告诉 JavaScript在何处开始和结束。<script>和</script>之间的代码行包含了JavaScript：

<script>
alert("My First JavaScript");
</script>

复制代码

浏览器会解释并执行位于<script>和</script>之间的JavaScript。一些老旧的实例可能会在<script> 标签中使用 type="text/javascript"，现在已经不必这样做了。JavaScript是所有现代浏览器以及HTML5 中的默认脚本语言。

48.4.2 <head>或<body>中的JavaScript

用户可以在HTML文档中放入不限数量的脚本。脚本可位于HTML的<body>或<head>部分中，或者同时存在于两个部分中。通常的做法是把函数放入<head>部分中，或者放在页面底部。这样就可以把它们安置到同一处位置，不会干扰页面的内容。

1、<head>中的JavaScript函数

我们这里把一个JavaScript 函数放置到HTML页面的<head>部分。该函数会在点击按钮时被调用：

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
document.getElementById("demo").innerHTML="My First JavaScript Function";
}
</script>
</head>
<body>
<h1>My Web Page</h1>
<p id="demo">A Paragraph.</p>
<button type="button" onclick="myFunction()">点击这里</button>
</body>
</html>

复制代码

将这个代码放在Notepad++里面编辑运行，会看到如下效果：

点击“Try it”按钮后，效果如下：

2、<body>中的JavaScript函数

同样，我们这里把一个JavaScript函数放置到HTML页面的<body>部分，该函数会在点击按钮时被调用：

<!DOCTYPE html>
<html>
<body>
<h1>My Web Page</h1>
<p id="demo">A Paragraph</p>
<button type="button" onclick="myFunction()">Try it</button>
<script>
function myFunction()
{
document.getElementById("demo").innerHTML="My First JavaScript Function";
}
</script>
</body>
</html>

复制代码

（注：我们把 JavaScript 放到了页面代码的底部，这样就可以确保在 <p> 元素创建之后再执行脚本）

将这个代码放在Notepad++里面编辑运行，会看到如下效果：

点击“Try it”按钮后，效果如下：

48.4.3 JavaScript脚本放在外部文件

JavaScrip脚本也可以保存到外部文件中。外部文件通常包含被多个网页使用的代码。外部JavaScript文件的扩展名是 .js。如需使用外部文件，需要在 <script> 标签的 "src" 属性中设置该 .js 文件：

<!DOCTYPE html>
<html>
<body>
<script src="myScript.js"></script>
</body>
</html>

复制代码

在<head>或<body>中引用脚本文件都是可以的，实际运行效果与大家在<script>标签中编写脚本完全一致。

（注：外部脚本不能包含<script>标签。）

席萌0209 · 发表于 2018-1-11 15:54:49

48.5 总结

关于本章节，我们这里讲解比较简单，建议初学者务必看48.1小节中推荐的入门学习资料。

		自动登录	找回密码
密码			立即注册

[RL-TCPnet教程] 【RL-TCPnet网络教程】第48章 JavaScript基础知识