JavaScript基础

最新推荐文章于 2024-10-09 00:58:21 发布

mashihaonb

最新推荐文章于 2024-10-09 00:58:21 发布

阅读量166

点赞数 2

文章标签： javascript

本文链接：https://blog.csdn.net/mashihaonb/article/details/112759714

版权

JavaScript基础

JavaScript基础

JavaScript基础

1.1 :为什么学习JavaScript？
JavaScript在网页制中有非常重要的地位,总结起来学习JavaScript的目的有主要基于以下三点。
1.客户端表单验证。
2.页面动态效果。
3.jQuery的基础。

什么是JavaScript

JavaScript是一种描述性语言。也是一种基于对象（Object）和事件驱动（Event Driven）的。并具有安全性能的脚本语言。它与HTML(超文本标记语言)一起，在一个Wed页面中链接多个对象与Wed客户实现交互。无论在客户端还是在服务器端，JavaScript应用程序都要下载到浏览器的客户端执行，从而减少了服务器端的负担。总结其特点如下。
➢JavaScript 主要用来在HTML页面中添加交互行为。

➢JavaScript 是一种脚本语言，语法和Java类似。

➢JavaScript一般用来编写客户端的脚本。

➢JavaScript 是一种解释性语言，边执行边解释。

JavaScript的组成

尽管ECMASeript是一个重要的标准，但它并不是 JavsScript唯一的部分，当然，它也不是唯一被标准化的部分。实际上，一个完整的JavaScript是由以下三个不同的部分组成的，如图1.6所示。

在这里插入图片描述

1. ECMAScript标准

ECMASript是一种开放的、被国际上广为接受的、标准的脚本语言规犯。它不与任何具体的浏览器绑定。ECMAScript 标准主要描述了以下内容。

➢语法。

➢变量和数据类型。

➢运算符。

➢逻辑控制语句。

➢关键字、保留字。

ECMAScript是一一个描述，规定了脚本语言的所有属性、方法和对象的标准，因此在使用 Web客户端脚本语言编码时一定要遵循ECMAScript标准。

2.浏览器对象模型

浏览器对象模型(Browser Object Model, BOM)，提供了独立于内容与浏览器窗口进行交互的对象，使用浏览器对象模型可以实现与HTML的交互，如网上常见的弹出窗口、前进后退等功能都是浏览器对象控制的。

3.文档对象模型

文档对象模型(Document Object Model, DOM)，是HTML文档对象模型(HTML DOM)定义的一套标准方法，用来访问和操纵HTML文档，如网上商城常见的随鼠标移动显示大的图片、弹出小提示等都是文档对象的功劳。

JavaScript的基本结构

通常，JavaScript 代码是用script标签嵌入HTML文档中的。如果需要将多条JavaScript 代码嵌入一个文档中，只需将每条JavaScript 代码都封装在< (script>标签中即可。浏览器在遇到script标签时，将逐行读取内容，直到遇到script结束标签为止。浏览器将检查JavaScript 语句的语法.如果有任何错误，则会在警告框中显示;如果没有错误，则浏览器将编译并执行语句。

1. JavaScript的基本结构JavaScript的基本结构如下。

<script type="text/Javascript">
JavaScript语句;
</script >

其中type是

<!DOCTYPE html>
<html ><head lang="en">
<meta charset="UTF-8"><title></title>
</head>
<body>
<script type-"text/ javascript">
document. write ("初学JavaScript") ;
document. write ("<h1>Hello, JavaScript</h1>") ;</script>
< /body>
</html>

示例1在浏览器中的运行结果如图1.7所示。在这里插入图片描述

2. JavaScript的执行原理

了解了JavaScript的基本结构，下面再来深入了解JavaScript的执行原理。

在JavaScript的执行过程中，浏区著客户端与应用服务器端采用请求/响应模式进行交互，如图1.8所示。
在这里插入图片描述

现在，让我们逐步分解一下这个过程。

(1)浏览器客户端向服务器端发送请求：一个用户在浏览器的地址栏中输入要访问的页(页面中包含JavaScript 程序)。

(2) 数据处理:服务器端将某个包含JavaScript的页面进行处理。

(3)发送响应:服务器端将含有JavaScript 的HIML文件处理页面发送到浏览器客户端，然后由浏览器客户端从上至下逐条解析HTML标签和JavaScript,并将页面效果呈现给用户。

使用客户端脚本的好处有以下两点。

➢包含JavaScript的页面只要下载一次即可，这样能减少不必要的网络通信。

➢JavaScript程序由浏览器客户端执行，而不是由服务器端执行的，因此能减轻服务器端的压力。

在网页中引用JavaScript的方式

我们已经学习了Jvsiei的基本结构和执行原理，如何在网页中引用JasSarap 呢7 lnSecp作为客户端程序，嵌入网页时有以下三种方式。

➢内部JavaScript文件。

➢使用外部JavaScript文件。

➢直接在HTML标签中。

1.内部JavaScript文件

示例1就直接使用script标签将JavaScript 代码加入HTML文档中。这是最常用的方式，但这种方式通常适用于JavaScript 代码较少，并且网站中的每个页面使用的JavaScript 代码均不相同的情况。

2.使用外部JavaScript文件

在实际工作中，有时会希望在若干个页面中实现相同的JavaScript效果，针对这种情况，再使用内部JavaScript文件就会使代码冗余，而使用外部JavaScript文件就不一-样了，JavaScript 可以在多个页面重复使用。外部JavaScript文件是将JavaScript 代码写入-一个外部文件中，以* . js为扩展名保存，然后将该文件指定给script标签中的"src” 属性，这样就可以使用这个外部文件了。这种方式与在网页中引用外部样式类似。使用外部JavaScript 文件实现示例1中实现的页面效果的代码如示例2所示。

实例二

export.js文件代码。

document .write ("初学JavaScript");

document.write ("<h1>He11o，JavaScript</h1>");

beginner . html页面代码。

< ! DOCTYPE html >

<html>

<head lang="en">

<meta charset="UTF-8">

<title>初学JavaScript</title>

</head>

<body>
Cscript type- "text/javascript" src= "js/export.js" > 
< / script >

< / body >

< / htm1 >

export.js就是外部JavaScript文件，src 属性表示指定外部JavaScript文件的路径，在浏览器中运行示例2.运行结果与示例1的运行结果相同。

3.直接在HTML标签中

有时需要在页面中加入简短的JavaSript 代码实现一个简单的页面效果，如单击按钮时弹出一个对话框等，这样通常会在按钮事件中加入JavaSeript?处理程序。下面的例子就是是单击按钮时弹出提示对话框。

关键代码如下所示。

<input name="btn" type="button" value="弹出消息框" onclick="javascript: alert('欢迎你')"/>

当单击“弹出消息框”按钮时，弹出提示对话框，如图1.9所示。
在这里插入图片描述

代码中，onclick 是单击的事件处理程序，当用户单击按钮时，就会执行“javascript:"后面的JavaScript命令，alert( )是一个函数，类似Java中的方法，作用是向页面弹出一个对话框。

通过以。上可以知道这三种方式的应用场合:

➢内部JavaScript文件适用于JavaScript特效代码量少，仅用于单个页面。

➢外部js 文件则适用于代码较多，重复应用于多个页面。

mashihaonb

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
3
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫