一、第一个function函数:
1、在代码中书写的function函数默认情况下是不执行的。
2、function函数只有在调用的时候才能被执行。
函数是使用函数名来进行调用的,并且函数名的后面必须带有一对括号。
3、可以多次调用函数(可以使用循环多次调用,可以书写多次函数名)。
例1:利用function实现页面数据的弹出。
// 声明了一个函数,名字叫做abc
function abc(){
window.alert("欢迎学习function函数");
}
// 函数的调用
abc();
4、一段代码中允许出现多个函数,多个函数之间可以相互调用。
例2:创建一个abc函数,用于在控制台输出内容。再创建一个xyz函数,用于在弹窗中输出内容。
function abc(){
console.log("欢迎学习function函数");
}
function xyz(){
abc();
window.alert("abc被调用成功了");
}
xyz();
二、函数的三要素:
1、函数的三要素包括:(1)功能;(2)参数;(3)返回值。
2、函数往往是功能单一的代码段。
3、函数创建的书写格式:
function 函数名(参数1,参数2,参数3,......){
// 函数体
return 返回值;
}
三、函数的参数:
1、例3:通过函数计算两个数的和。
function sum(a,b){
var temp=a+b;
console.log("结果是:" + temp);
}
sum(15,34);
sum(1,3)
sum(5,15)
练习:计算n!=n…5432*1*
function fact(n){
var temp=1;
for(var i=1;i<=n;i++){
temp=temp*i;
}
console.log(temp);
}
fact(5);
fact(4);
2、例4:利用函数在页面中显示n个星号并换行。
function star(n){ //定义函数
for(var i=1;i<=n;i++){
document.write("*");
}
document.write("<br />");
}
star(5); //调用函数
3、在定义函数时,函数的参数被称为“形式参数”,简称“形参”或“虚参”。形参必须是
变量。
在调用函数时,函数的参数被称为“实际参数”,简称“实参”。实参可以是常量、变量、表达式。
例如:调用函数star()。
star(10) //实参是常量
var w=15;
star(w); //实参是变量
star(w+5); //实参是表达式
在调用函数时,实参要传递给形参。所以实参的个数应该和形参一致,实参和形参之间
是按照位置进行传递的。
将实参传递给形参的过程被称为“虚实结合”。
四、函数的返回值:
1、函数通过return语句进行返回。
格式1:return 返回值;
格式2:return (返回值);
2、例5:要求在页面中有一个文本框和按钮,用户在文本框中输入摄氏温度,单击按钮将
用户输入的摄氏温度值转换为华氏温度值。
华氏温度=摄氏温度*1.8+32
<form>
<p>摄氏温度:<input type="text" name="wd" /></p>
<p><input type="button" value="转换为华氏温度" onclick="convert()" /></p>
</form>
function convert(){ //当单击按钮时执行convert()函数
// 1.先获得用户在文本框中输入的温度值
var t=parseInt(document.forms[0].wd.value);
// 2.调用temp()函数将t转换为华氏温度
var h=temp(t)
// 3.将最终的华氏温度h显示出来。
window.alert("华氏温度为:" + h);
}
// 先编写一个用户转换温度的函数 temp
// 参数c就是摄氏温度
function temp(c){ //在convert()函数执行时调用temp()函数
var f=c*1.8+32;
return f;
}
3、如果函数具有返回值,那么在调用函数时就需要一个变量接受该函数返回的结果。
五、函数的返回值:
例1:利用函数计算1!+2!+3!+…+n!=?
将上述“阶乘和”问题分解为两个问题:计算阶乘、求和。
// 第一个团队完成阶乘的计算
function fact(n){
var result=1;
for(var i=1;i<=n;i++){
result=result*i;
}
return result;
}
// 第二个团队完成1-n的阶乘和
function sum(n){
var result=0;
for(var i=1;i<=n;i++){
result=result+fact(i);
}
return result;
}
var w=sum(3);
console.log("1!+2!+3!=" + w); // 1!+2!+3!=1+2+6=9
五、虚实结合的两种参数传递方式:
1、传值调用:也被称为虚实结合的“值传递”。
普通变量做实参,形参的变化不会影响实参。
// 形参的变化是否会影响实参
function abc(x,y){ //x:1,y:2
x=x+1; //x:2
y=y+3; //y:5
return x+y; //7
}
var a=1,b=2;
var r=abc(a,b);
console.log("a=" + a); //a=1
console.log("b=" + b); //b=2
console.log(r); //7
2、传址调用:也被称为虚实结合的“地址传递”。【用于数组】
数组名做实参,形参的变化会影响实参。
有一个数组全是数值,编写一个函数,返回新数组,元素的值变为原来数组元素的2倍。
var a=[10,20,30,40,50]; 所有元素变为原来的2倍 [20,40,60,80,100]
// 功能:将数组中所有的元素变为原来的2倍
// 将数组arr中所有的元素变为原来的2倍
function array2(arr){ //形参也指向这个数组
for(var i=0;i<arr.length;i++){
arr[i]=arr[i]*2;
}
}
var a=[10,20,30,40,50];
array2(a); //实参是数组名
console.log(a);
// 实参a传递给形参arr之后,a和arr实际上是同一个数组
例:编写一个函数,对数组中的元素进行排序。
// 功能:对数组元素进行排序(升序)
// 对数组arr中的元素进行冒泡排序(升序)
// 规定当sa=1表示升序
// 规定当sa=0表示降序
function paixu(arr,sa){
var i,j,temp;
for(i=0;i<arr.length-1;i++){
for(j=i+1;j<arr.length;j++){
if(sa==1){
if(arr[i]>arr[j]){
temp=arr[i];
arr[i]=arr[j];
arr[j]=temp;
}
}
if(sa==0){
if(arr[i]<arr[j]){
temp=arr[i];
arr[i]=arr[j];
arr[j]=temp;
}
}
}
}
}
var w=[100,0,19,25,36,49,150,-5,-19];
paixu(w,0);
console.log(w);
六、如何生成随机数:
1、Math.random():随机生成一个大于等于0且小于1的实数。
(1)随机生成0-100之间整数:parseInt(Math.random()*100)
(2)随机生成100-200之整数:parseInt(Math.random()*100)+100
2、如何将十进制整数转换为十六进制字符串:
var m=15;
console.log(m.toString(16));
3、如何修改元素节点的CSS样式:
box.style.backgroundColor=CSS样式值
(1)CSS属性名必须采用驼峰式命名:去掉减号,减号后面的单词首字母大写。
(2)CSS属性值必须是一个字符串。