`
HotStrong
  • 浏览: 509122 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

JavaScript 第一章 基本语法 4~7节

阅读更多

 

 

JavaScript 第一章 基本语法1~3节

JavaScript 第二章 使用window对象

JavaScript 第一章 基本语法4~7节

 

4 JavaScript 的自定义函数

      4.1 )什么是 JavaScript 的函数?要回答这个问题先看一个示例:

      有一个计算器表单,点击 + - * / 四个按钮 可以对输入的两个数进行

              计算,并在第三个文本框中显示计算的结果 ,如图:

 

试着输入以下代码完成计算器:

<html>

<head>

      <script language="javascript">

           /* 加法函数 */

          function add(){

                 var num1, num2;

                 /*

    document.myform.txtNum1.value

   文档对象 . 表单名 . 文本框名 .value 可以取到文本框的值 ( 字符串 )

                 */

                  num1=parseFloat(document.myform.txtNum1.value);

                  num2=parseFloat(document.myform.txtNum2.value);

                 /*

   将文本框的值转换为浮点数后进行计算,

   将计算结果设置给 name 值为 txtResult 的文本框

   */

                document.myform.txtResult.value = num1 + num2;

          }

          /* 减法函数 */

          function subtration(){

                  var num1,num2;

                  num1=parseFloat(document.myform.txtNum1.value);

                  num2=parseFloat(document.myform.txtNum2.value);

                  document.myform.txtResult.value=num1 - num2;

          }

          /* 乘法函数 */

          function multiplication(){

                  var num1,num2;

                  num1=parseFloat(document.myform.txtNum1.value);

                  num2=parseFloat(document.myform.txtNum2.value);

                  document.myform.txtResult.value=num1 * num2;

          }

          /* 除法函数 */

          function division(){

                  var num1, num2;

                  num1=parseFloat(document.myform.txtNum1.value);

                  num2=parseFloat(document.myform.txtNum2.value);

                  document.myform.txtResult.value=num1 / num2;

          }

      </script>

</head>

<body>

<form action="" method="post" name="myform" id="myform">

购物简易计算器 <br />

第一个数 : <input name="txtNum1" type="text" id="txtNum1"

                 size="25"><br />

第二个数 :<input name="txtNum2" type="text" id="txtNum2"

                 size="25"><br />

     <!--

加法按钮, onclick 是按钮点击事件, add() 是加法函数,当

点击该按钮的时候会触发 onclick 事件并调用 add() 函数

-->

<input name="addButton2" type="button" id="addButton2"

value="     " onclick="add()">

         <!-- 减法按钮 -->

<input name="subButton2" type="button" id="subButton2"

value="    " onclick="subtration()">

         <!-- 乘法按钮 -->

<input name="mulButton2" type="button" id="mulButton2"

value="  ×  " onclick="multiplication()">

         <!-- 除法按钮 -->

<input name="divButton2" type="button" id="divButton2"

value="  ÷  " onclick="division()">

          <br />

计算结果 :<input name="txtResult" type="text"   

                   id="txtResult" size="25">

 

</form>

</body>

</html>

 

当你录入该段代码并执行成功后,我们再回答什么是 JavaScript 函数?其实

JavaScript 函数与 Java 中的方法类似,是执行特定任务的语句块,还可以定义参数和返回值

 

4.2 )如何使用函数?

      函数语法:

      function 函数名 ( 参数 1, 参数 2, …){ // 可以不带参数

           JavaScript 语句 ;

           return 返回值 ; // 如果有返回值才需要 return 语句

 }

     

      4.3 )体会带参函数,将计算器函数改为带参函数,如下:

            <script language=" javascript" >

                /*

   根据运算符执行计算的函数,参数 op 为运算符

  */

                 function compute(op ){  

                 var num1, num2;

                      num1=parseFloat(document.myform.txtNum1.value);

                      num2=parseFloat(document.myform.txtNum2.value);

                       if (op == "+"){

                           document.myform.txtResult.value = num1 + num2;

                      }else if (op == "-"){

                           document.myform.txtResult.value = num1 - num2;

                      }else if (op == "*"){

                           document.myform.txtResult.value = num1 * num2;

                      }else if (op == "/" && num2 != 0){

                           document.myform.txtResult.value=num1 / num2;

                      }

                }

           </script>

           + - * / 四个按钮的 onclick 事件中的函数改为:

                 compute(" 运算符 ")

      如: <!-- 减法按钮 -->

    <input name="subButton2" type="button" id="subButton2"

value="    " onclick=" compute ('-') ">

           执行效果相同,但是由之前的使用 4 个函数改成了使用 1 个函数搞定

 

5 、计算器代码常见错误

      常见错误 1 ,变量名区分大小写:

      var Num1, num2;

      num1 = parseFloat(document.myform.txtNum1.value);// 报错

     

      常见错误 2 ,文本框的值是字符串,进行算术运算需转换为数值型,

      var num1,num2;

          // 没有类型转换, num1 为字符串

      num1 = document.myform.txtNum1.value; 

 

6 、知识点总结

  •  JavaScript 脚本的基本结构是什么
  •  JavaScript Java 基本语法有哪些相似的地方
  •  如何定义函数、如何调用函数
  •  计算器代码的常见错误有哪些

7 、请下载JavaScript帮助文档

 

JavaScript 第一章 基本语法1~3节
JavaScript 第二章 使用window对象

 

 

2
0
分享到:
评论

相关推荐

    JavaScript 第一章 基本语法 1~3节

    本教程主要涵盖JavaScript的第一章,基础语法部分的1~3节,旨在帮助初学者快速理解并掌握JavaScript的基本用法。 首先,JavaScript是一种解释型的、基于原型的、弱类型的脚本语言。它的基本语法包括变量声明、数据...

    第一章 JavaScript基础语法

    JavaScript 基础语法 什么是 JavaScript JavaScript 是一种嵌入在网页中的解释型脚本语言,运行在浏览器中,用来丰富页面的互动。它最初由 Netscape 公司发明,最后提交给欧洲计算机制造商协会(ECMA), ECMA 将 ...

    JS的基本语法

    9. **JS_chp1课堂案例**:这部分内容可能包含了一些课堂上的实际示例,帮助学生理解和应用第一章学到的JS基础概念。 通过这些课件,初学者可以系统地学习和掌握JavaScript的基本语法,并通过实例加深理解,为进一步...

    【第九章】JavaScript【ECMAScript语法基础】

    JavaScript函数是第一类对象,可以赋值给变量、作为参数传递和返回。函数定义有两种方式:函数声明和函数表达式。作用域决定变量在哪里可见,全局变量在整个脚本中都可用,而局部变量只在函数内部有效。ES6引入了...

    JavaScript第1章的所有答案

    这个名为“JavaScript第1章的所有答案”的压缩包文件显然是一个学习资源,包含了解答JavaScript第一章节所有习题、实验和理论问题的答案。这为初学者提供了一个宝贵的自我检查和学习平台,帮助他们更好地理解和掌握...

    accp5.0JavaScript第五章上机答案

    本“accp5.0JavaScript第五章上机答案”应当包含了上述知识点的具体实践和解答,帮助学员巩固理论知识,提高动手能力。通过解决上机题目,学员能够更好地理解和运用JavaScript,为后续的Web开发打下坚实基础。

    JavaScript第2章的答案

    本资源"JavaScript第2章的答案"聚焦于这一编程语言的第二章内容,旨在帮助学习者深入理解和掌握JavaScript的基本概念和语法。 首先,JavaScript第二章通常涵盖的基础内容可能包括变量、数据类型和操作符。变量是...

    accp 5.0 s2 javascript 第六章

    在"accp 5.0 s2 javascript 第六章"的学习中,我们聚焦于JavaScript这一强大的编程语言,特别是在上机阶段。JavaScript是互联网应用开发的关键技术,尤其在网页动态交互方面有着不可替代的作用。本章的内容可能包括...

    javascript教案 JavaScript基础

    第一章 概述 4 1.1 JavaScript的由来 4 1.2 什么是JavaScript 4 1.3 JavaScript的特点 4 1.3.1 javascript的优点 5 1.3.2 javascript的局限性 5 1.4 Java 与 JavaScript 有什么不同 5 第二章 语法...

    js2阶段的js第一章课后习题答案

    本压缩包文件“js2阶段的js第一章课后习题答案”是针对JavaScript学习者的一个资源,特别是那些正在进行js2阶段学习的学员。这个章节通常涵盖JavaScript的基础概念,包括语法、变量、数据类型、操作符、流程控制以及...

    北大青鸟 accp5.0 s2 javascript 教材(4~7章)

    在北大青鸟ACCP5.0 S2的课程中,JavaScript作为核心部分,主要涵盖第4至7章的内容,旨在帮助学员深入理解和掌握这门语言的关键概念和技术。 第四章可能主要介绍了JavaScript的基础语法。这部分内容通常包括变量声明...

    JavaScript 语言基础知识点总结(思维导图)

    JavaScript 中函数是第一类对象,可以赋值给变量、作为参数传递或作为其他函数的返回值。函数声明使用 `function` 关键字,ES6 中引入了箭头函数(=&gt;)的简洁语法。 5. 对象: 对象是键值对的集合,通过花括号 `{...

    JavaScript简明语法教程

    #### 第一章 简介 - **JavaScript的特点**:JavaScript是一种弱类型的编程语言,这意味着在定义变量时无需指定其类型,使用`var`关键字即可创建变量。此外,JavaScript是区分大小写的,因此`a`与`A`、`valueof`与`...

    JavaScript第一章示例代码1.rar

    这个名为"JavaScript第一章示例代码1.rar"的压缩包很可能是为了教学或学习目的而准备的,包含了与JavaScript第一章相关的实践代码示例。在这个章节中,我们通常会接触到JavaScript的基础知识,包括但不限于变量、...

    S2-3使用JavaScript增强交互效果第一章到第三章课件及课后作业答案

    在“S2-3使用JavaScript增强交互效果第一章到第三章”的课程中,我们深入探讨了如何利用JavaScript来提升用户的在线体验。 第一章:JavaScript基础 在这个章节,我们将学习JavaScript的基本语法,包括变量声明、...

    javascript百炼成仙 第一章 掌握JavaScript基础01 初入宗门.pdf

    叶小凡通过资质检验,获得修行JavaScript的资格,这对应于编程初学者需要了解基本的编程概念和语法。在实际学习过程中,这通常涉及到理解变量的声明与赋值、数据类型的区分(如字符串、数字、布尔值等)、流程控制...

    21天学通JavaScript PDF 第一部分 1~18章

    在"21天学通JavaScript"这本书的第一部分中,涵盖了从基础到进阶的JavaScript知识,包括但不限于以下内容: 1. **JavaScript简介**:介绍JavaScript的历史、作用以及在网页开发中的地位,解释它是如何运行在浏览器...

    JavaScript第十章完整案例

    总的来说,"JavaScript第十章完整案例"是一个全面锻炼JavaScript技能的实践平台,涵盖了从基础语法到高级特性的广泛内容,同时也提供了实际项目经验,对于提升开发者解决问题的能力和理解Web开发的整体流程有着重要...

    JavaScript第5章

    在这个压缩包文件中,你将找到关于这一章的课后习题解答、上机实践指导以及理论知识的解析,这些内容对于学习和巩固JavaScript知识体系具有极大的价值。 首先,我们来深入理解JavaScript的基础语法。这包括变量声明...

Global site tag (gtag.js) - Google Analytics