JavaScript技术实验报告4

最新推荐文章于 2024-05-16 09:51:08 发布
最新推荐文章于 2024-05-16 09:51:08 发布
阅读量3.5k 收藏 18
点赞数 3
分类专栏： javaScript 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44788220/article/details/125487828
版权

一、实验目的

掌握JavaScript函数的使用方法

理解变量的复制，基本类型值和引用类型值的不同

理解函数的参数传递时所传递的内容

理解执行环境和作用域的概念

二、预习内容及要求（要求写出预习内容）

JavaScript中的变量类型

变量复制的原理，基本类型和引用类型的不同

变量类型的检测方法

函数的使用，函数参数的用法

三、实验内容、操作过程及实验结果记录     

1.请指出下面程序运行结果，并解释原因

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一题</title>
</head>
<script>
    var num1=0.0,num2=0.0,sum=0.0;
    function add(num1, num2){
        sum =num1+num2;
        return sum;
    }
    var result=add(10,20);
    alert(sum);
</script>
<body>
    
</body>
</html>

 

 

因为num1和num2这两个变量没有进行先声明就使用了，应该先声明在使用。下图为改正后的代码。

<script>
    var num1=0.0,num2=0.0,sum=0.0;
    function add(num1, num2){
        sum =num1+num2;
        return sum;
    }
    var result=add(10,20);
    alert(sum);
</script>

2. 函数求阶乘。

给出一个数，利用函数直接可以求出阶乘计算结果和求出阶乘函数的和。

  1. 效果如图4-1所示。

 

 

  1. 具体实现步骤如下：
  1. 定义一求数的阶乘的getJC(n)函数。
  2. 调用getJC(3)，求3的阶乘。
  3. 定义一求数的阶乘累加和的getSum (n)函数。
  4. 调用getSum(3)，求1!+2!+3!的阶乘的累加和。

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script>
    var a=3,num=1,sum=0;
   function getJC(a){
     for(var i=1;i<=a;i++){
        num =(num*i);
     }
     return num;
   } 
   document.write(a+"的阶乘是:"+getJC(a)+"</br>");
   function getSum (a){
    for(var i=1;i<=a;i++){
        sum +=getJC(i);
     }
     return sum;
   }
   document.write(a+"的阶乘叠加和是:"+getSum (a)+"</br>");
</script>
<body>
</body>
</html>

3. 判断是否是闰年。

  1. 效果如图4-2，4-3所示。

 

  1. 输入年份
  3. 给出判断结果
  4. 具体实现步骤如下：
  5. 用户在prompt弹出窗口中输入一个年份。
  6. 拿到输入框值，判断该值是否输入正确。
  7. 如果输入错误，给出错误提示。
  8. 如果输入正确，进入year(n)函数，处理逻辑运算

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>判断是否是闰年</title>
</head>
<body>
<script>
    var year1=prompt("请输入一个年份：");
    if(year1>0&&year1!=null){
    if((year1%400==0)||(year1%4==0&&year1%100!=0)){
        document.write(year1+"是闰年！")
    }else{
        document.write(year1+"不是闰年！")
    }
    } else{
        alert("年份要大于0，或年份不能为空！");
    }
</script>
</body>
</html>

 

 

 

 

 

4.编写函数，计算圆的面积和周长。

  1. 效果如图4-4、4-5所示。

 

  1. 具体实现步骤如下：
  1. 定义求面积函数。
  2. 圆的面积公式：3.1415926 * r * r或者Math.PI * Math.pow(r, 2)。
  3. 调用面积函数，得出结果。
  4. 定义求周长函数。
  5. 圆的周长公式：3.1415926 * 2 * r 或者2 * Math.PI * r。
  6. 调用周长函数，得出结果。

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计算圆的面积和周长</title>
</head>
<body>
<script>
    const PI=3.14;
    //求圆面积函数
    var r=prompt("请输入圆的半径：");
    function f1(r){
       return r*r*PI;
    }
    //求周长函数
    function f2(r){
       return r*2*PI;
    }
    document.write("半径为"+r+"的圆的周长是:"+f2(r)+"</br>");
    document.write("半径为"+r+"的圆的面积是："+f1(r)+"</br>");
</script>
</body>
</html>

 

5. 编写函数，比较最大值：求出求两个数中的最大值；求出三个数中的最大值。

效果如图4-6所示

 

 

  1. 具体实现步骤如下：
  1. 定义getMax(n1, n2)函数，比较2个数中谁最大，返回最大值。
  2. 调用getMax(6.98,6.99)。
  3. 定义getMax1(a,b,c)函数，比较3个数中谁最大，返回最大值。
  4. 调用getMax1(40,70,10)
  5. <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>比较最大值</title>
</head>
<body>
<script>
    var a,b,c,n1,n2;
 function getMax(n1, n2) {
if(n1>n2){
    document.write(n1+"和"+n2+"相比,"+n1+"最大"+"</br>");
}else{
    document.write(n1+"和"+n2+"相比,"+n2+"最大"+"</br>");
}
return 0;
 }
 function   getMax1(a,b,c){
if(a>b){
     if(a>c){
        document.write(a+","+b+","+c+"和相比,"+a+"最大"+"</br>");
     }else{
        document.write(a+","+b+","+c+"和相比,"+c+"最大"+"</br>");
     }   
}else if(a<b){
    if(b>c){
        document.write(a+","+b+","+c+"和相比,"+b+"最大"+"</br>");
    }else{
        document.write(a+","+b+","+c+"和相比,"+c+"最大"+"</br>");
    }
}
return 0;
 } 
getMax(6.98,6.99);
getMax1(40,70,10);
</script>    
</body>
</html>

  6.  

 6. 编写函数，计算并输出k以内的最大的10个能被13或17整除的自然数之和。

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第六题</title>
</head>
<body>
<script>
     var num=prompt("请输入一个数：");
     var sum=0;
     var count=0;
    function f(num){
     for(var i=1;i<=num;i++){
        if(i%13==0||i%17==0){
            sum +=i;
            count++;
        }
        if(count==10){
            break;
        }
     }
     return sum;
    }
    document.write(num+"以内的最大的10个能被13或17整除的自然数之和是："+f(num));
</script>  
</body>
</html>

 7. 编写一个简单的计算器。

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算器</title>
</head>
<body>
<!--页面布局-->
<input type="text" id="num1" placeholder="请输入第一个数字"/>
<input type="text" id="operator" placeholder="请输入运算符">
<input type="text" id="num2" placeholder="请输入第二个数字"/>
<input type="button" onclick="count()" value="计算"/><br/>
<span>计算结果：</span><span id="result"></span>
 
<!--JavaScript-->
<script>
    function count() {
        var num1 = document.getElementById("num1").value;
        var num2 = document.getElementById("num2").value;
        var operator = document.getElementById("operator").value;
        var num = "";
        //判断输入的两个数字是否为数字,如果为数字，返回结果为false
        var num1 = parseFloat(num1);
        var num2 = parseFloat(num2);
        var isNotNumber = isNaN(num1) || isNaN(num2);
        if (!isNotNumber) {
            switch (operator) {
                case "+":
                    num = num1 + num2;
                    break;
                case "-":
                    num = num1 - num2;
                    break;
                case "*":
                    num = num1 * num2;
                    break;
                case "/":
                    if (num2 == 0) {
                        // 除数不能为0
                        alert("除数不能为0");
                    } else {
                        num = num1 / num2;
                        break;
                    }
                default:
                    alert("请输入正确的运算符！！！");
            }
            num = num.toFixed(2);
            document.getElementById("result").innerText = num;
        } else {
            alert("请输入数字！！！")
        }
    }
</script>
</body>
</html>

 

 

Su魏
关注
  • 3
    点赞
  • 踩
  • 18
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
12、学习总结：JavaScript篇
weixin_45795182的博客
05-05 358
目录1.什么是JavaScript?1.1 JS、HTML、CSS 关系1.2 JS 是如何运⾏的？2.JS 前置知识2.1 第⼀个JS程序2.2 JS 书写格式2.2.1 ⾏内格式2.2.2 内嵌格式2.2.3 外部格式2.3 注释2.4 消息打印3.JS 基础语法3.1 定义变量3.2 JS 数据类型3.3定义⽅法3.4 条件判断3.4.1 if3.4.2三元表达式3.4.3 switch3.5循环语句3.5.1 while 循环3.5.2 for 循环4.JS 操作 DOM4.1 得到控件4.2 操纵
JavaScript函数实验题（2）
你若盛开，清风自来
02-11 1189
实验目的 1、熟悉JavaScript函数的定义。 2、掌握JavaScript函数的几种调用方法。 3、熟悉JavaScript函数库的定义和引用。 4、掌握JavaScript中几种特殊函数的定义和调用。 5、掌握JavaScript中模式消息对话框的3种内置函数。 实验内容与步骤 一、 函数库 在js文件中定义一些函数，之后在html文件中引用他们，就可以调用他们完成相应功能。例如： m...
JavaScript实验2
weixin_44788220的博客
06-27 4137
JavaScript实验2： 1.根据平均分来划分等级 2.加油优惠价格计算 3.输出100以内的所有质数 4：求圆的周长和面积 5：验证用户名和密码 6：打印九九乘法表 7：打印菱形，三角形 8：求红白黑球的个数
项目推荐：Youch - 节省时间的Node.js错误报告工具
最新发布
gitblog_00082的博客
05-16 356
项目推荐：Youch - 节省时间的Node.js错误报告工具 项目地址:https://gitcode.com/poppinss/youch 1、项目介绍 在开发过程中，面对着满屏混乱的堆栈跟踪信息可能会让你的进度停滞不前。为此，我们向你推荐一个名为Youch的开源项目。它是一个为Node.js设计的优美错误报告工具，能将错误信息以结构化的HTML形式展示在浏览器中，使错误处理变得简单高效。 2...
JavaScript程序设计——DOM访问实验报告.docx
11-11
1．实现文档对象的属性； 2．实现文档对象的属性方法； 3．实现文档对象的使用方式。 问：如何使用HTML DOM getElementsByTagName() 方法获取文档中所有的表： 答： Var tables = document.getElementsByTagName("table"); alert("This document contains contains"+tables.length+"tables");
javascript实践总结
u014784825的专栏
05-26 1816
1.document-当前html文档 2.内容的引号前加/转译 3.得到元素标签内的属性 document.getElementById("demo").元素内属性（=。。。可赋值） 得到元素标签夹的内容 document.getElementById("demo").innerHTML（=。。。可赋值） 4.head中的内容会最先执行，执行就会弹出对话框
网页设计与制作实验九Javascript 高级应用
Annzz123的博客
06-21 366
本次实验首先学习了元素的的应用，和与JavaScript一起使用的方法。其次学习了怎么用JavaScript来实现图片的自动轮播和手动轮播的效果，也就是定时器的学习和鼠标的移入、移出、点击事件。在轮播图的实验中也会使用到for循环和if条件选择的应用。
重二师JavaScript前端设计实验报告及2022期末作业
07-20
这篇实验报告和期末作业主要涵盖了JavaScript前端设计的相关知识，这是计算机科学中一个至关重要的领域，特别是在构建现代网页和Web应用程序时。JavaScript是一种解释型、基于原型的编程语言，以其动态特性和灵活性...
JavaScript程序设计——事件处理实验报告.docx
11-11
1．实现JavaScript事件注册； 2．实现JavaScript事件处理函数； 3．实现JavaScript鼠标和键盘事件；...4．实现JavaScript表单相关事件； 5．实现JavaScript字幕滚动事件； 6．实现JavaScript编辑事件；
旅游界面实验报告.docx
07-16
* 在本实验报告中，学生需要使用 Web 前端开发技术来实现旅游界面的开发。 * 学生需要了解 HTML、CSS、JavaScript 等技术的基础知识和应用。 七、实验报告书写 * 实验报告书写需要遵守一定的格式和结构。 * 实验...
web前端框架技术 实验报告
11-25
从学习vue组件的构成: template(组建的模板结构)、script(组件的JavaScript行为)、style(组件的样式)vue组件渲染期间需要用到的数据，可以定义在data节点中,组件中的data必须是一个函数，不能直接指向一个数据对象。...
jsp实验报告一
12-06
一个南昌航空大学的jsp实验报告，里面主要是包括利用jsp输出一些实验结果，还有一些验证之类的
Servlet实验报告.pdf
10-14
Servlet 实验报告.pdf 本实验报告的主要目的是掌握 Servlet 应用，熟悉 web 开发的 MVC 模式，了解 servlet 的工作流程和作用，并掌握 servlet 的方法 init()、destory()、doGet()、doPost()。 一、实验目的 1. ...
JavaScript对象总结
weixin_47255539的博客
04-26 136
一、 日期对象 1.Date对象（内建对象） ——在JS使用Date对象来表示一个时间 例://创建一个Date对象 //如果时间使用构造函数创建一个Date对象，则会封装为当前代码执行的时间 var date=new Date(); console.log(date); //创建一个指定的时间对象 //需要在构造函数中传递一个表示时间的字符串作为参数 var date1=new Date(“20...
网页设计与制作实验八Javascript 基础应用
Annzz123的博客
06-21 643
本次实验学习了JavaScript的使用，对对象获取的方法和点击事件，掌握了switch语句，与其他语法中switch语句的用法相同。
js函数学习小结
weixin_55418082的博客
05-15 607
文章目录函数1.函数的概念;2.函数的使用。2.1声明函数2.2.调用函数2.3.函数的封装3.函数的参数3.1、形参和实参3.2案例3.3函数形参和实参个数不匹配的问题3.4.小结4.函数的返回值4.2 return 终止函数4.5 break ,continue,return 的区别5.arguments的使用6.函数案例案例一：案例二：案例四、函数可以调用另外一个函数 函数 1.函数的概念; 什么是函数; 函数就是封装了一段可以重复执行调用的代码块，目的就是让代码重复使用 代码; <script
WEB编程Javascript实验报告
weixin_45004425的博客
04-24 1472
前言 写给广大网友: 如果不是为了作业我甚至不会写这篇博客, 这篇博客没有任何技术参考价值, 反而可能给各位造成误导, 请各位慎重参考莫要完全置信! 写给助教: 大多数内容是我学习笔记直接Paste上来的...未必代表我的学习顺序. 任务: 爬取网页 小任务: 学会使用request request的第一个参数包括请求头, url, 编码方式等信息, 代表请求; 第二个参数代表回调函数, 其中body部分相当于网页中的document对象 //重新包装后柯里化的request函数 let ..
Javascript研究心得总结
quasiceo
08-16 665
习惯于OOP语言编程后，会发现Javascript世 界有很多匪夷所思的奇奇怪怪的现象（比如闭包），我花了大量的精力研究这些奇怪现象的根源，最后发现：源自于javascript的作用域不是块级作用域，同时它有一套基于作用域链的标识查找机制。本文大部分内容来自互联网，经过整理、改进而成。 　　Javascript引擎和DOM采用的垃圾回收算法：引用计数 　　javascript和DOM有各自的垃
js学习小结
wenwenxiong的专栏
02-16 492
共7种数据类型：boolean，number，string，obejct,null,undefined,symbok.boolean的包装器Booleannew Boolean([value]) 对于value为 0, -0, null, false, NaN, undefined,””的初始值为false;其它的为true。number：数字类型string:字符串类型它常用的函数有foreach
实验项目 6 基于 JS 事件的计算器设计与实现 一、实验目的 . 掌握 JavaScript 函数的定义、调用和参数应用方法和技巧。 掌握 JavaScript 事件定义、监听的应用方法和技巧。 实验内容 实现页面中计算器效果。点击数量的加减案例，数量会加 1 或者减 1，并且 总价也会跟随变化。不用监听，用onclick方法
05-27
实现。页面布局样式自行设计。 二、实验步骤 1. 利用 HTML 和 CSS 实现计算器的页面布局样式。 2. 利用 JavaScript 实现点击事件的监听和处理，实现数量和总价的自动计算。 3. 测试代码功能，进行调试优化，确保计算器功能的正确性和稳定性。 三、参考代码 HTML 代码： ```html <div id="calculator"> <h2>计算器</h2> <div id="quantity"> <button onclick="decrease()">-</button> <span id="num">1</span> <button onclick="increase()">+</button> </div> <div id="price">总价：¥<span id="total">10</span></div> </div> ``` JavaScript 代码： ```javascript var price = 10; // 商品单价 var num = 1; // 商品数量 var total = document.getElementById("total"); // 总价标签 var numLabel = document.getElementById("num"); // 数量标签 function decrease() { if (num > 1) { num--; numLabel.innerHTML = num; total.innerHTML = price * num; } } function increase() { num++; numLabel.innerHTML = num; total.innerHTML = price * num; } ``` 四、实验提示 1. 在 JavaScript 中，可以利用 document.getElementById() 方法获取页面中的元素，并对其进行操作和设置。 2. onclick 事件可以在 HTML 标签中直接定义，也可以在 JavaScript 中动态添加。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Su魏

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值