欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

js学习之路1 初识js函数

程序员文章站 2024-03-31 00:01:03
1. 简单的函数: 2.1 带参数的函数: 2.2 带参数的函数: 3.1 带返回值的函数 3.2 带有参数和返回值的函数 尝试把返回值用字符串拼接的方式组合了一下,还真成功了 结果: ......

1. 简单的函数:

<html>
<head>

<script type="text/javascript">
function myfunction()
{
    alert("您好!")
}
</script>

</head>

<form>
<input type="button" onclick="myfunction()" value="调用函数">

<p>通过点击这个按钮,可以调用一个函数。该函数会提示一条消息。</p>

</body>
</html>

 2.1 带参数的函数:

<html>
<head>

<script type="text/javascript">
function myfunction(txt)
{
    alert(txt)
}
</script>

</head>
<body>

<form>
<input type="button" onclick="myfunction('你好,你个蠢货...')" value="调用函数">
</form>

<p> 通过点击这个按钮,可以调用一个带参数的函数。该函数会输出这个参数 </p>

</body>
</html>

 2.2 带参数的函数:

<html>
<head>
<script type="text/javascript">
function myfunction(txt)
{
    alert(txt)
}
</script>
</head>

<body>
<form>
<input type="button" onclick="myfunction('早安,靖哥哥!')" value="早晨">

<input type="button" onclick="myfunction('晚安,蓉儿!')" value="晚上">
</form>

<p>通过点击这个按钮,可以调用一个函数。该函数会输出传递给它的参数。 </p>

</body>
</html>

 3.1 带返回值的函数

<html>
<head>

<script type="text/javascript">
function myfunction()
{
    return ("这一段话,会在结果中显示")
}
</script>
</head>

<body>
<script type="text/javascript">
document.write(myfunction())
</script>

<p> body部分中的脚本调用一个函数。</p>
<script type="text/javascript">
document.write(myfunction())
</script>

</body>
</html>

3.2 带有参数和返回值的函数

  尝试把返回值用字符串拼接的方式组合了一下,还真成功了

<html>
<head>

<script type="text/javascript">
function product(a, b, c)
{
    return "某食品厂" + a + "年度,生产了" + b + "万箱" + c
}
</script>


</head>

<body>

<script type="text/javascript">
document.write(product("2018", "15", "饼干"))
</script>

</body>
</html>

结果:

某食品厂2018年度,生产了15万箱饼干