JS基本语法-JavaScript自定义函数及其在html中的使用

冷不防 2023-10-05 15:16 26阅读 0赞

## 简介： ##

javascript（即js）自定义函数用function来标识，参数和返回值都不用标注类型。

在html可以直接嵌套js代码，也可以将函数的实现写在js（后缀为.js）文件中。

1. javascript自定义函数的实现

举例：

#### 1.在html中嵌套js函数： ####

func1.html：

<!DOCTYPE html>
    <html>
    <body>
    
    <h1>求两个数的和：</h1>
    <p id="res">结果：</p>
    <script>
    	function sum(a,b){
    		console.log("a=" + a);
    		console.log("b=" + b);
    		return a+b;
    	}
    	function setUi() {
    		var res = sum(2,3);
    		document.getElementById("res").innerHTML=res;
    	}
    	setUi();
    </script>
    
    
    
    </body>
    </html>

运行：

打开html文件所在的目录，双击在浏览器中运行，结果如下：

> ## 求两个数的和： ##
> 
> 5

####  ####

#### 2.js函数的实现写在js文件中，再由html调用： ####

sum.js:

function my_sum(a,b){
    	console.log("a=" + a);
    	console.log("b=" + b);
    	return a+b;
    }

func2.html:

<!DOCTYPE html>
    <html>
    
    <script src="./sum.js"></script>
    <body>
    
    <h1>求两个数的和(sum函数写在js文件中)：</h1>
    <p id="res">结果：</p>
    <script>
    	function setUi() {
    		var res = my_sum(3,5);
    		document.getElementById("res").innerHTML=res;
    	}
    	setUi();
    </script>
    
    
    
    </body>
    </html>

运行：

打开html文件所在的目录，双击func2.html, 在浏览器中运行，结果如下：

> ## 求两个数的和(sum函数写在js文件中)： ##
> 
> 8

注意：

必须引用sum.js，才能调用js文件中的函数，即如下代码：