page contents

WEB前端教程:使用函数创建模块化代码

函数是要创建的任何应用程序的构建基块。 利用函数,可以创建命名的、可重用的代码段,以帮助使其更易于阅读和维护。

attachments-2022-10-z2zGAINc635219fa35485.png课程目标

为了掌握函数的基础知识,本模块介绍了以下内容:

  • 如何编写基本函数。
  • 什么是参数以及如何使用它们。
  • 如何从函数返回值。
  • 如何使用匿名函数,箭头函数。
  • 如何使用函数表达式,回调函数

函数基础

函数是要创建的任何应用程序的构建基块。 利用函数,可以创建命名的、可重用的代码段,以帮助使其更易于阅读和维护

请阅读下面的材料掌握函数的基础知识

编码

  1. 声明一个叫做 showMessage() 的函数并返回 "您好,陌生人"。将 showMessage() 函数返回的值输出到控制台中。
/*
 * QUIZ REQUIREMENTS
 * - Your code should have a `showMessage()` function
 * - Your `laugh()` function should return the correct output
 * - Your code should print `\"hello,stranger!\"` by calling the `showMessage()` function inside `console.log()`
 * - BE CAREFUL ABOUT THE PUNCTUATION AND THE EXACT WORDS TO BE PRINTED.
 */
// your code goes here
console.log(/* 调用showMessage函数 */);
  1. 基于上一个任务,给 showMessage 函数传入一个参数 name ,函数返回一个字符串,其中显示“您好”和提供该输入的人员的姓名,将 showMessage() 函数返回的值输出到网页中
<script>
  // your code goes here document.write(/* 调用showMessage函数 */);
</script>

函数表达式&回调函数

阅读

编码

  1. 使用函数表达式重写上面的任务,写一个匿名函数表达式,并且将函数存储在叫做“showMessage”的变量中.
  2. 使用 setTimout 与 匿名函数在网页中显示一条打招呼的消息,内容还是为“您好”和提供该输入的人员的姓名,这条消息延迟 1 秒后再显示。
  3. 使用回调函数,实现一个体温打卡程序。

用例说明

进入页面,首先弹出系统提示框,要求输入您的体温

体温在 36℃ - 38℃ ,表示体温正常,打卡成功。页面中显示“体温正常,打卡成功! 否则,体温异常,“体温异常,打卡失败!

步骤

  • 写一个函数表达式,并且将函数存储在叫做“ success ”的变量中,表示打卡成功执行的函数,在页面中显示“体温正常,打卡成功!
  • 写一个函数表达式,并且将函数存储在叫做“ fail ”的变量中,表示打卡失败执行的函数,在页面中显示“体温异常,打卡失败!
  • 您需要封装一个 temperatureBodyDetection 函数,传入上面封装好的两个异步回调函数,success 和 fail

任务伪代码如下

function temperatureBodyDetection(success,fail){
  if(体温符合标准)
    success() /*执行成功函数*/
  else
    fail() /*执行失败函数*/
}

var success = /* finish the function expression */
var fail = /* finish the function expression */

temperatureBodyDetection(success,fail) /**调用打卡函数**/

自测问题

  1. 下面的哪个变量是在全局作用域中定义的:a、b、c 或 d?
var a = 1;
function x() {
  var b = 2;
  function y() {
    var c = 3;
    function z() {
      var d = 4;
    }
    z();
  }
  y();
}

x();
  1. 下面这段代码返回的是什么?
function sleep() {
  console.log("I'm sleepy!");
  return "我睡着了";
  return "我在打呼";
}

sleep();

3.不用将代码粘贴到控制台中,能判断出这段代码的输出内容吗?

var x = 1;

function addTwo() {
  x = x + 2;
}

addTwo();
x = x + 1;
console.log(x);

进阶任务

如果你很快就完成上面的任务,可以去 LeetCode 上去多进行一些练习。

提交

把你今天觉得做得最好的代码放在 Github 后进行提交。

总结

依然把今天的学习用时,收获,问题进行记录。


更多相关技术内容咨询欢迎前往并持续关注六星社区了解详情。

长按或扫描下方二维码,免费获取 Python公开课和大佬打包整理的几百G的学习资料,内容包含但不限于Python电子书、教程、项目接单、源码等等

attachments-2022-10-zUUcDyFE63521911c431d.jpg

0 条评论

请先 登录 后评论
小柒
小柒

1324 篇文章

作家榜 »

  1. 轩辕小不懂 2403 文章
  2. 小柒 1324 文章
  3. Pack 1135 文章
  4. Nen 576 文章
  5. 王昭君 209 文章
  6. 文双 71 文章
  7. 小威 64 文章
  8. Cara 36 文章