零基础讲解JavaScript函数

时间:2024-01-01 09:33:03

一 JavaScript函数
1 什么是函数
  函数是一组代码(指令)的集合,通常用来完成某个单一的功能。(书的目录和章节,电视剧剧集的名称等)
2 为什么要使用函数
  2.1 把复杂程序划分成不同的功能模块,代码清晰、易懂、易维护(电影短不用分集,电视剧分集)
  2.2 可重复使用

我们一起看一下,提问,下列代码的特点?(总结代码的功能)
<script>
   document.write('我叫关羽<br/>');// 1 介绍关羽
   document.write('今年37岁<br/>');
   document.write('我来自山西运城<br/>');
 
   document.write('我叫张飞<br/>');// 2 介绍张飞
   document.write('今年30岁<br/>');
   document.write('我来自河北涿州<br/>');

document.write('我叫刘备<br/>');// 3 介绍刘备
   document.write('今年40岁<br/>');
   document.write('我来自河北涿州<br/>');

document.write('我叫马志国<br/>');//4 自我介绍
   document.write('今年37岁<br/>');
   document.write('我来自北京<br/>');

</script>

3 如何实现函数及调用函数
3.1 函数的基本语法
    function 函数名称(arg0,arg1,...argN)//关键字function
    {
       statements; //执行的代码
    }
使用函数修改代码
function Hello(name,age,address)
{
   document.write('我叫'+name+'<br/>');
   document.write('今年'+age+'岁<br/>');
   document.write('我来自'+address+'<br/>');
}

3.2 函数调用,名字加上括号中的参数
Hello('关羽',37,'山西运城');
Hello('张飞',30,'河北涿州');
Hello('刘备',40,'河北涿州');
Hello('马志国',37,'北京');

3.3 通常由事件驱动或者在代码中调用
    3.2.1 外部事件驱动。例如,用户点击鼠标、键盘
    3.2.2 内部事件驱动。页面加载,定时器事件等
<html>
<head>
<title>JavaScript学习</title>
<script>
 function Hello(name,age,address)
 {
    document.write('我叫'+name+'<br/>');//
    document.write('今年'+age+'岁<br/>');
    document.write('我来自'+address+'<br/>');
 }
 window.onload="Hello('马志国',37,'北京')";//内部事件
</script>
<body>
<h1>JavaScript函数</h1>
<button onclick="Hello('关羽',37,'山西运城')">关羽</button>
<button onclick="Hello('张飞',30,'河北涿州')">张飞</button>
<button onclick="Hello('刘备',40,'河北涿州')">刘备</button>

</body>
</head>
</html>    
3.4 进阶,带返回值的函数(加减乘除)
    
    ...