AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

Python JavaScript2: 函数

2022-05-22 160
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
本文涉及的产品
公共DNS（含HTTPDNS解析），每月1000万次HTTP解析
全局流量管理 GTM，标准版 1个月
云解析 DNS，旗舰版 1个月
简介： Python JavaScript2: 函数

总体内容


1、函数的定义与调用

2、提取行间事件与匿名函数

3、网页换肤

4、变量和函数的域解析

5、函数传参与return关键字


一、函数的定义与调用


  • 1.1、函数：就是重复执行的代码片
  • 1.2、函数定义与执行


<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>函数的基础学习</title>
   <script type="text/javascript">
        <!--函数的定义-->
        function fnAlter() {
             alert("测试弹框")
        }
        function changeColor() {
             var oDiv = document.getElementById("div1")
             oDiv.style.color = 'red'
             oDiv.style.fontSize = '30px'
        }
   </script>
</head>
<body>
   <div id="div1" onclick="fnAlter()">这是一个div元素</div>
   <input type="button" name="" value="改变标签" onclick="changeColor()">
</body>
</html>

提示：函数定义在  <script type="text/javascript"></script> 里面，可以在其他的标签里面设置 onclick="函数名()" 来点击标签调用函数

  • 使用：行间事件


二、提取行间事件与匿名函数


  • 2.1、由于在一中我们把函数的调用写在了 标签(行间)里面,这样做不太好，我们可以把行间事件提取出来，如下


<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>提取行间事件</title>
   <script type="text/javascript">
        window.onload = function () {
             var oBtn = document.getElementById('button1');
             oBtn.onclick = fnChangeDiv;
             function fnChangeDiv() {
                  var oDiv = document.getElementById('div1');
                  oDiv.style.color = 'red';
                  oDiv.style.fontSize = '30px';
             }
        }
   </script>
</head>
<body>
   <div id="div1">这是一个div</div>
   <input type="button" value="改变标签" name="" id="button1">
</body>
</html>
  • 2.2、匿名函数



<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>提取行间事件</title>
   <script type="text/javascript">
       window.onload = function () {
            var oBtn = document.getElementById('button1');
            oBtn.onclick = function() {
                var oDiv = document.getElementById('div1');
                oDiv.style.color = 'red';
                oDiv.style.fontSize = '30px';
            };   
       }
   </script>
</head>
<body>
   <div id="div1">这是一个div</div>
   <input type="button" value="改变标签" name="" id="button1">
</body>
</html>


提示：匿名函数仅仅是把 2.1 中 函数fnChangeDiv名字去掉，直接一步到位 oBtn.onclick = function(){},函数没有了名字也就成了匿名函数

  • 使用的情况：仅仅是做一件事的时候


三、网页换肤


  • 3.1、换肤->仅仅是利用js调用函数更换css,如下


<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>网页换肤</title>
   <link rel="stylesheet" type="text/css" href="css/main1.css" id="link1">
   <script type="text/javascript">
        window.onload = function () {
           var oBtn1 = document.getElementById('button1');
           var oBtn2 = document.getElementById('button2');
           var oLink = document.getElementById('link1');
           oBtn1.onclick = function () {
               oLink.href = 'css/main1.css';
          };
          oBtn2.onclick = function () {
               oLink.href = 'css/main2.css';
          };
       }
</script>
</head>
<body>
    <input type="button" value="皮肤1" name="" id="button1">
    <input type="button" value="皮肤2" name="" id="button2">
</body>
</html>


四、变量和函数的域解析


  • 4.1、JavaScript解析过程分为两个阶段，先是编译阶段，然后执行阶段，在编译阶段会将function定义的函数提前，并且将var定义的变量声明提前，将它赋值为undefined。也就是未定义先使用。
  • 4.2、变量的域解析：变量在未定以前如果使用，值会被赋值为undefined


<script type="text/javascript">
    alert(iNum);
    var iNum = 20;
</script>
  • 4.3、函数的域解析:在编译阶段会将function定义的函数提前,函数在定义前或者定义后调用都没事


<script type="text/javascript">
    changeValue()
    function changeValue() {
        alert("hello world!")
    }
</script>


五、函数传参与return关键字


  • 5.1、函数传参
  • <1>、基本的传值


<script type="text/javascript">
      function test(a) {
           alert(a);
      }
      test('hello world!');
</script>
  • <2>、传值改变标签样式


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>函数传参-return关键字</title>
    <script type="text/javascript">
          window.onload = function () {
               function fnChangeStyle(mystyle,val) {
                   var oDiv = document.getElementById('div1');
                   oDiv.style[mystyle] = val;
              }
             fnChangeStyle('color','red')
          }
    </script>
</head>
<body>
    <div id="div1">测试样式</div>
</body>
</html>
  • 5.2、return关键字的作用：返回函数执行的结果、结束函数的运行、阻止默认行为
  • <1>、求和函数，返回结果


<script type="text/javascript">
     function fnAdd(a,b) {
          return a+b;
     }
     alert(fnAdd(3,7));
</script>
  • <2>、结束函数的运行


<script type="text/javascript">
     function fnAdd(a,b) {
          return a+b;
          alert('这里不会再走');
     }
     alert(fnAdd(3,7));
</script>


文章标签：
云解析DNS
JavaScript
Python
前端开发
关键词：
Python函数
JavaScript函数
Python JavaScript
JoanKing
目录
相关文章
德国都芳最好
|
2月前
|
搜索推荐 Python
利用Python内置函数实现的冒泡排序算法
在上述代码中，`bubble_sort` 函数接受一个列表 `arr` 作为输入。通过两层循环，外层循环控制排序的轮数，内层循环用于比较相邻的元素并进行交换。如果前一个元素大于后一个元素，就将它们交换位置。
德国都芳最好
140 67
站大爷
|
2天前
|
JSON 监控 安全
深入理解 Python 的 eval() 函数与空全局字典 {}
`eval()` 函数在 Python 中能将字符串解析为代码并执行，但伴随安全风险，尤其在处理不受信任的输入时。传递空全局字典 {} 可限制其访问内置对象，但仍存隐患。建议通过限制函数和变量、使用沙箱环境、避免复杂表达式、验证输入等提高安全性。更推荐使用 `ast.literal_eval()`、自定义解析器或 JSON 解析等替代方案，以确保代码安全性和可靠性。
站大爷
13 2
vohelon
|
29天前
|
Python
Python中的函数是**一种命名的代码块，用于执行特定任务或计算
Python中的函数是**一种命名的代码块，用于执行特定任务或计算
vohelon
49 18
听白
|
21天前
|
数据可视化 DataX Python
Seaborn 教程-绘图函数
Seaborn 教程-绘图函数
听白
46 8
vohelon
|
30天前
|
Python
Python中的函数
Python中的函数
vohelon
43 8
廖小凡
|
2月前
|
JavaScript 前端开发 Java
[JS]同事：这次就算了，下班回去赶紧补补内置函数，再犯肯定被主管骂
本文介绍了JavaScript中常用的函数和方法，包括通用函数、Global对象函数以及数组相关函数。详细列出了每个函数的参数、返回值及使用说明，并提供了示例代码。文章强调了函数的学习应结合源码和实践，适合JavaScript初学者和进阶开发者参考。
廖小凡
45 2
[JS]同事：这次就算了，下班回去赶紧补补内置函数，再犯肯定被主管骂
游客5fdji2pvmf8888
|
2月前
|
监控 测试技术 数据库
Python中的装饰器：解锁函数增强的魔法####
本文深入探讨了Python语言中一个既强大又灵活的特性——装饰器（Decorator），它以一种优雅的方式实现了函数功能的扩展与增强。不同于传统的代码复用机制，装饰器通过高阶函数的形式，为开发者提供了在不修改原函数源代码的前提下，动态添加新功能的能力。我们将从装饰器的基本概念入手，逐步解析其工作原理，并通过一系列实例展示如何利用装饰器进行日志记录、性能测试、事务处理等常见任务，最终揭示装饰器在提升代码可读性、维护性和功能性方面的独特价值。 ####
游客5fdji2pvmf8888
32 2
bruce_xiaowei
|
2月前
|
Python
Python中的`range`函数与负增长
在Python中，`range`函数用于生成整数序列，支持正向和负向增长。本文详细介绍了如何使用`range`生成负增长的整数序列，并提供了多个实际应用示例，如反向遍历列表、生成倒计时和计算递减等差数列的和。通过这些示例，读者可以更好地掌握`range`函数的使用方法。
bruce_xiaowei
54 5
aliyun1622584902-46568
|
3月前
|
Python
Python之函数详解
【10月更文挑战第12天】
aliyun1622584902-46568
39 2
Python之函数详解
aliyun1622584902-46568
|
3月前
|
存储 数据安全/隐私保护 索引
Python 散列类型三以及函数基础
【10月更文挑战第11天】
aliyun1622584902-46568
32 1
Python 散列类型三以及函数基础

热门文章

最新文章

  • 1
    Node.js 的事件驱动机制
  • 2
    基于 JavaScript/VuePress 搭建的远程工作平台：YuanCheng.works
  • 3
    如何使用内存监控工具来优化 Node.js 应用的性能
  • 4
    html5 + Three.js 3D风雪封印在棱镜中的梅花鹿动效源码
  • 5
    js+jquery实现贪吃蛇经典小游戏
  • 6
    在 golang 中执行 javascript 代码的方案详解
  • 7
    Node.js新作《循序渐进Node.js企业级开发实践》简介
  • 8
    Node.js 的性能
  • 9
    基于SVG的js圆形菜单插件
  • 10
    如何使用内存快照分析工具来分析Node.js应用的内存问题？
  • 1
    Python 密码学实用指南（全）（2）
    46
  • 2
    【python】习题 第10周
    64
  • 3
    【python】习题第8周
    63
  • 4
    【python】习题第7周（上）
    95
  • 5
    【python】习题 6-10周（下）
    64
  • 6
    【python】习题 6-10周（中）
    69
  • 7
    Python 入门指南（七）（4）
    54
  • 8
    【python】习题 1-5周（中）
    97
  • 9
    【python】习题 1-5周（上）
    56
  • 10
    Python 入门指南（七）（2）
    63

    • 相关课程

    更多
  • Python Web开发基础
  • Python爬虫实战
  • Python开发基础入门
  • Python常用数据科学库
  • Python网络爬虫实战
  • JavaScript 自学手册文档教程

    • 相关电子书

    更多
  • JavaScript异步编程
  • Delivering Javascript to World
  • 编程语言如何演化-以JS的private为例

    • 相关实验场景

    更多
  • 用Python画圣诞树
  • Html5和Webpack2：Webpack5打包JS和样式表
  • 前端开发基础6：Node.js和LESS预编译工具
  • Python选择及循环结构
  • 云端Python及基本操作
  • Python网络通信程序典型应用

    • 推荐镜像

    更多
  • python-release
  • nodejs-release
  • pypi
    • 下一篇
    阿里云无影云电脑免费试用，最长可试用3个月