【使用jQuery简化客户端开发】第一课：初步了解JavaScript，掌握JavaScript基础语法

怼烎@ 2024-04-17 15:58 40阅读 0赞

**知识点：**了解JavaScript的组成部分，掌握JavaScript的基础语法，能自定义函数，掌握JavaScript代码调试能力。

# 1、JavaScript简介 #

## 1.1  JavaScript是什么？ ##

JavaScript是一种描述性语言，也是一种基于对象（Object）和事件驱动（EventDriven）的、具有安全性能的脚本语言。JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。

![format_png][]

## 1.2  JavaScript的特点 ##

*  JavaScript主要用来向HTML页面中添加交互行为。
 *  JavaScript是一种脚本语言。
 *  JavaScript一般用来编写客户端脚本。
 *  JavaScript是一种解释性语言，边执行边解释。

## 1.3 为什么学习JavaScript？（JavaScript的起源） ##

我们学习JavaScript的原因主要有两点。

**第一点，客户端表单验证。**浏览网页时，我们经常见到会员注册的表单，当用户填写注册信息时，如果某项信息输入错误（如密码长度位数不够等），表单页面将及时给出错误提示。这些错误信息在没有提交到服务器前，就由客户端提前进行验证，成为客户端表单验证。这样的一个好处是：用户得到了即时交互（反馈填写情况是否有异常），同时也减轻了网站服务器端的压力，这是JavaScript最常用的场合。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RucnVhbmppYW4_size_16_color_FFFFFF_t_70][]

**第二点，实现页面动态效果。**在JavaScript中，可以编写相应鼠标单击等事件的代码，创建动态页面特性，从而高效地控制页面的内容。例如，菜单的切换特效和树形菜单特效等，它们可以在有限的页面空间里展现更多的内容，从而增加客户端的体验，使我们的网站更加动感、有魅力，可以吸引更多的浏览者。

![20190828144903221.gif][]

需要注意的是，虽然JavaScript可以实现许多动态效果，但要实现一个特性可能需要十几行，甚至几十行代码，而使用jQuery（JavaScript程序库）可能只需要几行代码就能实现同样的效果，关于jQuery方面的技术，我们会在后面讲解，而JavaScript是学习jQuery的基础，打好基础至关重要。

## 1.4 JavaScript的组成 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RucnVhbmppYW4_size_16_color_FFFFFF_t_70 1][]

*  **ECMAScript：**开放的、国际上广为接受的，标准的脚本语言规范。（核心语法）
 *  **BOM：**浏览器对象模型，提供了与浏览器窗口进行交互的对象，使用BOM可以实现与HTML交互
 *  **DOM：**文档对象模型，是HTML文档对象模型定义的一套标准方法，用于访问和操纵HTML文档

## 1.5 JavaScript的基本结构 ##

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

**注意：**

*  旧的 JavaScript 例子也许会使用 type 属性：<script type="text/javascript">。type 属性不是必需的。JavaScript 是 HTML 中的默认脚本语言。
 *  语句是注释标签。这些标签用于告知不支持 JavaScript 的浏览器忽略标签中包含的语句。是结束注释标签。这些标签是可选的，但最好在脚本中使用这些标签。目前大多数浏览器支持 JavaScript，但使用注释标签可以确保不支持JavaScript 的浏览器会忽略嵌入到 HTML 文档中的 JavaScript 语句。

### （1）<script>标签写在哪里？ ###

**建议：**<script>标签放置位置的原则：页面效果实现类的js应该放在body之前。动作，交互，事件驱动，需要访问dom属性的js都可以放在body之后。

### （2）实例练习：使用JavaScript输出“hello world” ###

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title></title>
    		<script type="text/javascript">
    			document.write("Hello World！");
    		</script>
    	</head>
    	<body>
    	</body>
    </html>

**界面显示效果：**

![20190828162537901.png][]

**代码分析：****document.write();用来向页面输出可以包含 HTML标签的内容**。 把document.write();语句包含在<script>与</script>之间，浏览器就会把它当作一条JavaScript 命令来执行，这样浏览器就会向页面输出内容。

**自己测试：**如果不使用<script>标签，游览器就会将 document.write("<h2>如果不使用script标签，此条语句会被当做纯文本</h2>");当作纯文本来处理，也就是说会把这条命令本身写到页面上。

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title></title>
    		<script type="text/javascript">
    			document.write("Hello World！");
    			document.write("<h2>JavaScript的使用</h2>");
    		</script>
    		document.write("<h2>如果不使用script标签，此条语句会被当做纯文本</h2>");
    	</head>
    	<body>
    	</body>
    </html>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RucnVhbmppYW4_size_16_color_FFFFFF_t_70 2][]

## 1.6 JavaScript的执行原理 ##

在 JavaScript 的执行过程中，浏览器客户端与应用服务器端采用**请求/响应模式**进行交互， 如图所示。

![20190829081501837.gif][]

**分解一下这个过程：**

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

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

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

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

*  包含 JavaScript 的页面只要下载一次即可，这样能减少不必要的网络通信。 
 *  JavaScript 程序由浏览器客户端执行,而不是由服务器端执行的，因此能减轻服务器端的压力。

## 1.7 JavaScript在网页中的三种使用方式 ##

何在网页中引用 JavaScript ？JavaScript 作为客户端程序，嵌入网页时有以下 3 种方式。

*  使用<script>标签。 例：上面的案例。
 *  使用外部 JavaScript 文件。例：<script src="hello.js" type="text/javascript"></script>
 *  直接在 HTML 标签中使用。例：<input type="button" value="弹出消息" οnclick="javascript:alert('hello')" />

### 练习：使用三种方式引用JavaScript ###

# 2、JavaScript基本语法 #

JavaScript 像学习过的 Java 或者 C\# 语言一样，也是一门编程语言，它包含变量的声明、 赋值、运算符号、逻辑控制语句等基本语法。

## 2.1 变量的声明和赋值 ##

JavaScript 是一种弱类型语言，没有明确的数据类型，也就是说，在声明变量时，不需要指定变量的类型，变量的类型由赋给变量的值决定。这一点不像 Java 和 C\# 语言那样，在声明变量的同时需指定变量的数据类型。在 JavaScript 中，变量是使用关键字 var 声明的。**变量命名和 C\# 变量命名规则一致**。

JavaScript 声明变量的语法：**var 变量名;**

//举例：
    var width=30;//在声明变量 width 的同时，将数值 30 赋给了变量 width
    var x,y,z=20;//在一行代码中声明多个变量时，各变量之间用逗号分隔
    
    //先声明变量，再赋值
    var name;
    name = 'lily';//字符串用单引号或双引号，包围起来

**注意： **

*  **JavaScript 变量均为对象**。当您声明一个变量时，就创建了一个新的对象。
 *  **JavaScript 区分大小写，所以大小写不同的变量名表示不同的变量。**
 *  变量可以不经过声明而直接使用，但这种方法很容易出错，也很难查找拍错，因此不推荐使用。在使用变量之前，请先声明后使用，养成良好的编程习惯。
 *  JavaScript 的关键字是保留的，不能作为变量名或者函数名，具体内容如表所示。

![20190829082827140.png][]

### 练习：使用JavaScript，输出自我介绍 ###

## 2.2 数据类型 ##

尽管在声明变量时不需要声明变量的数据类型，而由赋给变量的值决定。但在JavaScript 中，提供了常用的基本数据类型，这些数据类型如：undefined、null、number、boolean和String。

###   2.2.1 undefined(未定义类型) ###

undefined 类型只有一个值，即 undefined。当声明的变量未初始化时，该变量的默认值是 undefined。当声明的变量未初始化时，该变量的默认值是undefined。

举例：var width;

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RucnVhbmppYW4_size_16_color_FFFFFF_t_70 3][]

### 2.2.2 null(空类型) ###

只有一个值，表示“什么都没有”的占位符，可以用来检测某个变量是否被赋值。值 undefined 实际上是值 null 派生来的，因此 JavaScript 把它们定义为相等的。例如：document.write(null==undefined);返回的结果是true。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RucnVhbmppYW4_size_16_color_FFFFFF_t_70 4][]

尽管这两个值相等，但它们的含义不同，undefined 是声明了变量，但未对其初始化时赋予该变量的值。 null 则表用于标识尚未存在的对象。如果函数或者方法要返回的是对象，那么找不到该对象时，返回的通常是null。

### 2.2.3  number(数值类型) ###

既可以表示32位的整数，又可以表示64位的浮点数。整数还可以表示为八进制或十六进制。

//举例：
    var num1 = 20;
    var num2 = 20.1;
    //对于非常大或非常小的数，可以使用科学计数法表示
    var x=123e5;      // 12300000
    var y=123e-5;     // 0.00123

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RucnVhbmppYW4_size_16_color_FFFFFF_t_70 5][]

### 2.2.4   boolean(布尔类型) ###

只有两个值：true或false;

var x=true;
    var y=false;

### 2.2.5   String(字符串类型) ###

是一组被引号引起来的文本。JavaScript不区分字符和字符串。

**（1）String对象的属性**

JavaScript 语言中的 String 也是一种对象，和 Java 中的 String 对象相似。它也有一个 length 属性，表示字符串的长度（包括空格等），调用 length属性的语法格式：**字符串对象.length；**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RucnVhbmppYW4_size_16_color_FFFFFF_t_70 6][]

**（2）String对象的方法 **

调用方法的语法格式：**字符串对象.方法名()；**

<table> 
 <tbody> 
  <tr> 
   <td> <p><strong>方法名称</strong></p> </td> 
   <td> <p><strong>说&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;明</strong></p> </td> 
  </tr> 
  <tr> 
   <td> <p><span style="color:#000000;">toString() </span></p> </td> 
   <td> <p><span style="color:#000000;">返回字符串</span></p> </td> 
  </tr> 
  <tr> 
   <td> <p><span style="color:#000000;">toLowerCase() </span></p> </td> 
   <td> <p><span style="color:#000000;">把字符串转化为小写</span></p> </td> 
  </tr> 
  <tr> 
   <td> <p><span style="color:#000000;">toUpperCase()</span></p> </td> 
   <td> <p><span style="color:#000000;">把字符串转化为大写</span></p> </td> 
  </tr> 
  <tr> 
   <td> <p>charAt(index)</p> </td> 
   <td> <p>返回在指定位置的字符</p> </td> 
  </tr> 
  <tr> 
   <td> <p><strong>indexOf(str，index)</strong></p> </td> 
   <td> <p><strong>查找某个指定的字符串，在字符串中首次出现的位置，如果找到，返回索引位置，否则返回-1。</strong></p> </td> 
  </tr> 
  <tr> 
   <td> <p>substring(index1，index2)</p> </td> 
   <td> <p>返回位于指定索引index1和index2之间的字符串，并且包括索引index1对应的字符，不包括索引index2对应的字符</p> </td> 
  </tr> 
  <tr> 
   <td> <p>split(str)</p> </td> 
   <td> <p>将字符串分割为字符串数组</p> </td> 
  </tr> 
 </tbody> 
</table>

在这几个方法中，最常用的是 indexOf(Str,index)方法，如果找到了指定字符串，则返回索引位置，否则返回-1。 index 是可选的整数参数，表示从第几个字符开始查找，**index 的值为 0~“字符串对象.length-1”**，如果省略该参数，则将从字符串的首字符开始查找。例如：

**思考：**返回的数值和你预期的是否一致？为什么会是这个结果？

### 2.2.6   检测变量的数据类型 ###

有时候需要检测变量的具体数据类型，JavaScript 提供了 type of 运算符来判断一个值或变量究竟属于哪种数据类型。语法格式：**typeof(变量或值)**

**思考：**返回的数据类型和你预期的是否一致？

### 2.2.7   数组 ###

JavaScript 中的数组也是具有相同数据类型的一个或多个值的集合。数组用一个名称存储一系列的值，用下标区分数组中的每个值，数组的下标从 0 开始。 JavaScript 中的数组也需要先创建、赋值，再访问数组元素，并通过数组的一些方法和属性对数组元素进行处理。

**（1）创建数组的方法**

第一种方法：创建数组的同时，进行赋值。

var fruit=new Array("apple","orange","peach","bananer");

第二种方法：先创建数组，然后分别为数组元素赋值。

var fruit=new Array(4);

fruit\[0\]="apple";

fruit\[1\]="orange";

fruit\[2\]="peach";

fruit\[3\]="bananer";

前两种方法，都是使用new关键字来，新创建一个数组对象Array

第三种方法：除了 Array()对象外，数组还可以方括号“\[”和“\]”来定义，

var fruit=\["apple","orange","peach","bananer"\];

**（2）访问数组元素**

可以通过数组的名称和下标直接访问数组的元素，访问数组的表示形式：数组名\[下标\]。 例如，fruit\[0\]表示访问数组中的第 1 个元素，fruit 是数组名，0 表示下标。

**（3）数组的常用属性和方法**

<table style="width:624px;"> 
 <tbody> 
  <tr> 
   <td> <p><strong>&nbsp;类别</strong></p> </td> 
   <td> <p><strong>&nbsp; 名 &nbsp;称</strong></p> </td> 
   <td style="width:467px;"> <p><strong>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 描述</strong></p> </td> 
  </tr> 
  <tr> 
   <td> <p>属性</p> </td> 
   <td> <p>length</p> </td> 
   <td style="width:467px;"> <p>设置或返回数组中元素的数目，返回值为整型。</p> </td> 
  </tr> 
  <tr> 
   <td> <p>方法</p> </td> 
   <td> <p>join( 分隔符)</p> </td> 
   <td style="width:467px;"> <p>把数组的所有元素放入一个字符串，通过一个的分隔符进行分隔</p> </td> 
  </tr> 
  <tr> 
   <td> <p>sort()</p> </td> 
   <td style="width:467px;"> <p>对数组排序</p> </td> 
  </tr> 
  <tr> 
   <td> <p>push()</p> </td> 
   <td style="width:467px;"> <p>向数组末尾添加一个或更多元素，并返回新的长度</p> </td> 
  </tr> 
 </tbody> 
</table>

### 实例练习1：对数组进行排序 ###

**分析结果：**使用sort()方法进行排序时，针对数字的排序显然不是我们你想要的，为什么呢？sort函数在比较时会调用每个数组项的toString()转型方法，即会将每一项转化为ASCII进行比较。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RucnVhbmppYW4_size_16_color_FFFFFF_t_70 7][]

### 实例练习2：对数组、字符串进行分割 ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RucnVhbmppYW4_size_16_color_FFFFFF_t_70 8][]

### 2.2.8   常用的输入 / 输出 ###

在网上冲浪时，页面上经常会弹出一些信息提示框，如注册时弹出提示输入信息的提示框，或者弹出一个等待用户输入数据的对话框等，这样的输入/输出在 JavaScript 中称为警告对话框（alert) 和提示对话框（prompt)。

**（1）输入 prompt()方法**

prompt()方法会弹出一个提示对话框，等待用户输入一行数据。 prompt()方法的基本语法格式：

**prompt("提示信息”,”输入框的默认信息”);**

该方法的返回值也可以被引用或存储到变量中，举例：

**界面效果演示：**

![20190829134659329.gif][]

**注意：**prompt()方法的第一个参数值显示在对话框上，通常是一些提示信息；第二个参数出现在用户输入的文本框中，且被选中，作为默认值使用。如果省略第二个参数，则提示对话框的输入文本框中会出现“undefined”，可以将第二个参数的值设置为空字符串，例如：**var color=prompt(“请输入你喜欢的颜色","");**

如果用户单击“取消”按钮或直接关闭提示对话框，则该方法将返回 null。如果用户单击“确定”按钮，则该方法将返回一个字符串型数据。*分析以下几种情况，如何出现的？*

![20190829135418536.png][]

**（2）输出 alert()方法**

alert()方法会创建一个特殊的小对话框，该对话框带有一个字符串和一个“确定”按钮，用来提示用户。

语法格式：**alert("提示信息”)；**

alert()方法将弹出一个警告对话框，其内容可以是一个变量的值，也可以是一个表达式的值。 如果要显示其他类型的值，则需要将其强制转换为字符串型。

**界面效果演示：**

![20190829140105264.gif][]

**       注意：**警告对话框是当前运行的网页弹出的，在对该对话框做出处理前，当前网页将不可用，后面的代码也不会被执行，只有对警告对话框进行处理后（单击“确定”按钮或直接关闭）， 当前网页才会继续显示后面的内容。

# 3、JavaScript调试程序 #

通常，我们在编写一个新的JavaScript代码过程中都会发生错误。但是一般情况下，如果 JavaScript 出现错误，是不会有提示信息的，这样你就无法快速找到代码错误的位置，这时我们需要学会对代码进行调试。编写的代码可能包含语法错误，逻辑错误，如果没有调试工具，这些错误比较难于发现，幸运的是大部分浏览器都内置了调试工具，我们可以借助调试工具快速进行代码调试。

## 3.1 打开浏览器的调试工具 ##

通常，浏览器启用调试工具一般是按下 F12 键，并在调试菜单中选择 "Console" 。也可以在浏览器中打开网页，在空白处 → 单击鼠标右键 → 检查元素 / 查看元素，进入调试界面。

![20190829143645760.gif][]

## 3.2  JavaScript语法错误的排除 ##

语法错误，一般都是代码拼写的错误，标点符号的缺失、中英文切换等问题。

**JavaScript排除语法错误的步骤：**

第一步：使用IE打开包含JavaScript的页面，按F12进入脚本调试界面。（有些需要Fn+F12）

第二步：选择【控制台/Console】选项，单击“启动调试”按钮或者按F5，在右侧控制台界面显示语法错误。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RucnVhbmppYW4_size_16_color_FFFFFF_t_70 9][]

## 3.3  逻辑错误的排除 ##

调试的基本原理：程序在执行时时自动的，而且速度非常快，开发人员无法了解中间的执行过程。但是几乎所有的开发工具都提供了调试的功能，可以去控制程序的执行节奏，从而可以让开发者开清楚程序执行的过程。怎么去控制节奏呢？我们可以通过设置断点来进行。

**JavaScript排除语法错误的步骤：**

**第一步：**设置断点的位置。

**第二步：**单步进入，观察变量

**实例练习：**

**提前准备：**希望实现效果，当用户输入整数大于等于5时，输出直角三角形，当用户输入整数小于5时，输出倒立直角三角形。（要求，行数=用户输入的整数，每一行的\*的数量=2\*行数-1）

![20190829161528853.gif][]

给定代码，该代码无法完全输出同样效果

# 4、JavaScript中的函数 #

JavaScript 中，函数类似于 c\# 中的方法，是执行特定功能的 JavaScript 代码块。但是 JavaScript 中的函数使用更简单，不用定义函数属于哪个类，因此调用时不需要用“对象名.方法名()”的方式，直接使用函数名称来调用函数即可。 JavaScript 中的函数有两种：一种是 JavaScript 自带的系统函数，另一种是用户自行创建的自定义函数。

## 4.1   常用系统函数 ##

### 4.1.1 parseInt()和parseFloat() ###

**parseInt();解析字符串，并返回整数。**

**parseFloat();解析字符串，并返回浮点数。**

**注意：**parseInt()和parseFloat()函数，在处理字符串时，首先查看位置0处的字符，判断它是否为一个有效数字，如果不是则返回 NaN，不再继续执行其他操作。但如果该字符是有效数字，则该函数将查看位置 1 处的字符， 进行同样的测试，这一过程将持续到发现非有效数字的字符为止，此时parselnt();将该字符之前的字符串转换成整数，parseFloat();将字符之前的字符串转换成浮点数。

### 实例练习：使用JavaScript制作一个加法运算 ###

**要求：**提示用户分别输入两个数字，然后计算两个数字的求和。

![20190829165421671.gif][]

**案例实现代码：**

### 4.1.2    isNaN()函数 ###

isNaN()函数用于检查其参数是否是非数字，语法格式：**isNaN();**

如果是特殊的非数字值，则返回值是 true,否X 则返回 false。isNaN()函数通常用于检测 parseFloat()和 parselnt()的结果，以判断它们表示的是否是合法的数字。也可以用 isNaN()函数来检测算数是否错误，如用 0 作为除数的情况。

## 4.2  自定义函数 ##

除了使用系统自带的系统函数之外，开发人员还可以自己定义函数，同 C\# 语言一样，JavaScript 需要先定义函数，然后才能调用函数。下面学习如何定义及调用函数。

### 4.2.1   定义函数 ###

在 JavaScript 中，自定义函数由关键字 function、函数名、一组参数以及置于括号中的待执行的 JavaScript 语句组成，语法格式：

function 函数名([参数1,参数2,……]){
                 语句体；
           }

*  fonction 是定义函数的关键字，必须有。 
 *  参数 1、参数 2 等是函数的参数。因为 JavaScript 本身是弱类型，所以它的参数也没有类型检査和类型限定。函数中的参数是可选的，根据函数是否带参数，可分为不带参数的无参函数和有参函数。例如：**function 函数名() \{ 代码块; \}  **
 *  “\{ ”和“\}”定义了函数的开始和结束。

### 4.2.2  调用函数 ###

要执行一个函数，必须先调用这个函数，当调用函数时，必须指定函数名及其后面的参数（如果有参数)。函数的调用一般和元素的事件结合使用，语法格式：**事件名="函数名()"；**

### 4.2.3 自定义函数案例练习-无参函数 ###

**要求实现效果：**当用户点击按钮时，输出5次hello world

![20190830082849737.gif][]

**需求分析：**①先定义一个函数，该函数的功能是输出5次hello world，这里可以使用for循环语句实现。②我们希望的是当用户点击按钮时，函数被调用，按钮的点击事件onclick。③调用函数οnclick=函数名();

**案例代码：**

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title>无参函数 - 使用函数显示5次”hello world“</title>
    		<script type="text/javascript">
    			//先定义一个函数，
    			function ShowHello(){
    				for(var i=0;i<5;i++){
    					document.write("Hello world <br/>");
    				}
    			}
    		</script>
    	</head>
    	<body>
    		<input type="button" value="点击我，显示5次hello world"  onclick="ShowHello();"/>
    	</body>
    </html>

### 4.2.4 自定义函数案例练习-有参函数 ###

**要求实现效果：**当用户点击按钮时，提示用户输入整数，然后输出对应次数的hello world

![20190830083942688.gif][]

**需求分析：**①先定义一个函数，该函数需要一个参数，根据该参数输出对应次数的hello world，这里可以使用for循环语句实现。②用户点击按钮时，函数被调用，这时需要传递一个参数给函数，以确定输出次数，参数哪里来？让用户自己输入整数，可以使用promp()函数获取。

**案例代码：**

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title>使用有参函数显示”hello world“</title>
    		<script type="text/javascript">
    			//先定义一个函数，
    			function ShowHello(count){
    				for(var i=0;i<count;i++){
    					document.write("Hello world <br/>");
    				}
    			}
    		</script>
    	</head>
    	<body>
    		<input type="button" value="请输入显示hello world的次数"  onclick="ShowHello(prompt('请输入显示hello world的次数',''));"/>
    	</body>
    </html>

### 4.2.5  匿名函数 ###

网络中还流行匿名函数的用法。这种方式灵活但很 难控制，因此不推荐使用。为了方便大家阅读网络中的脚本代码，这里进行简单介绍。

**（1）定义匿名函数**

function (参数列表){
                            方法体；
                        }

**（2）调用匿名函数**

由于匿名函数定义的整个语句可以像值一样赋给一个变量进行保存，因此可用变量名调用匿名函数。

var showFun=function (count){
        方法体;
        }

由于匿名函数定义的整个语句可以赋给某个变量，该变量可以作为函数的参数进行传递，所以匿名函数的使用很灵活、方便，但也很难控制，容易出错，大家可以参阅网络中的相关资料进一步了解其用法。我们**不推荐使用匿名函数**，只要能看懂网上的脚本代码即可。

# 5、变量的作用域 #

什么是变量的作用域？就是变量的作用范围，变量既可以是全局，也可以是局部的。

*  全局变量：可以在脚本中的任何位置被引用，一旦你在某个脚本里声明了全局变量，你就可以在这个脚本的任何位置（包括函数内部）引用它，全局变量的作用域是整个脚本。
 *  局部变量：只存在于对它做出声明的函数内部，在函数的外部无法相用它，局部变量的作用域 仅限于函数内部。

### 案例练习：分析以下代码，预测输出结果，并分析原因 ###

=========这里是结束分割线============

[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9zczEuYmRzdGF0aWMuY29tLzcwY0Z2WFNoX1ExWW54R2twb1dLMUhGNmhoeS9pdC91PTM4NDE1MTAzNDEsNDI4NDE2OTAyMiZmbT0yNiZncD0wLmpwZw?x-oss-process=image/format,png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RucnVhbmppYW4_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/123bfd9615b446e3982c55b4025cc47a.png
[20190828144903221.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/c6eff7d8b27b41c381baab49a7f8aa20.gif
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RucnVhbmppYW4_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/db77942c1ade45b38a8d067df0163a40.png
[20190828162537901.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/50dfcec1849a4e26819c324e025dcd1e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RucnVhbmppYW4_size_16_color_FFFFFF_t_70 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/6b5c3e26a3994f6b91668caac1d64ee4.png
[20190829081501837.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/e01082d0a04b4d4ba5043b6bfc413a7c.gif
[20190829082827140.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/15172f5e260144ac8b5c3abbb126c919.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RucnVhbmppYW4_size_16_color_FFFFFF_t_70 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/810f0a33cea24b75b26101ce763575cc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RucnVhbmppYW4_size_16_color_FFFFFF_t_70 4]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/20b0ea7078f145c4b3f401e6840f88b2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RucnVhbmppYW4_size_16_color_FFFFFF_t_70 5]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/c5707b0ec1fc4a51a1f08b34cac94ccb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RucnVhbmppYW4_size_16_color_FFFFFF_t_70 6]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/033c3039964e40fa8f539e6c06de6a17.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RucnVhbmppYW4_size_16_color_FFFFFF_t_70 7]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/40b5e2fe9a52477b874c15acac043a6c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RucnVhbmppYW4_size_16_color_FFFFFF_t_70 8]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/7bfb9b82e6f748519e57844bb0f57ff5.png
[20190829134659329.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/4fb96c401e774375bec370fe6e26ceba.gif
[20190829135418536.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/3cc78b07e7b8410fa8b0822104c35a1f.png
[20190829140105264.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/b2c603fcf13c4778b3961cb1acf28c53.gif
[20190829143645760.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/aeb8308a0666415d8588965d9ef999df.gif
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2RucnVhbmppYW4_size_16_color_FFFFFF_t_70 9]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/a9d343ca61024c59a7f9919d0c72d2d9.png
[20190829161528853.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/06aa5ec5b0f240d297ae52b7b076b32e.gif
[20190829165421671.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/eaf28a5236564e49a1fc438a5ba19aaf.gif
[20190830082849737.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/5e30594bee3941c3b602894e179b0609.gif
[20190830083942688.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/358f50a234584e1dbffe24653a5f4f1f.gif