JS(第七课)认识function函数(一)

简介: JS(第七课)认识function函数(一)

第一点:JavaScript的函数定义:

函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。JavaScript函数语法,函数就是包裹在花括号中的代码块,前面使用了关键词 function: 当调用该函数时,会执行函数内的代码。可以在某事件发生时直接调用函数(比如当用户点击按钮时),并且可由 JavaScript 在任何位置进行调用。

第二点:JavaScript的函数语法:

函数就是包裹在花括号中的代码块,前面使用了关键词 function:

函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。

function functionname(){    // 执行代码
}

当调用该函数时,会执行函数内的代码。

可以在某事件发生时直接调用函数(比如当用户点击按钮时),并且可由 JavaScript 在任何位置进行调用。

思考:函数不去调用代码会执行吗,如何调用函数呢?观察下面的一个案例:看看浏览器控制的变化:

一个案例让你深刻的理解函数这个概念:



 

 

 

 

 

 

 

CSS的部分

    h1{
        margin: auto;
        border-radius: 12px;
        font-size: 30px;
        color: red;
        height: 100px;
        width: 80%;
        background-color: rgb(106, 239, 155);
        line-height: 100px;
        text-align: center;
    }

Html的信息内容

/**

* @function 他是一种语法的规范只要写了js函数必要function

* @index 他是定义函数的方法名

* @alert 请弹出你要输入的信息内

* @consolelog 在控制台中打印输出语句

* @documentwrite 在浏览器展示打印的信息

*/

// !函数声明的方法

// !function 函数名(参数的信息){执行的代码块}

// !函数名() 调用函数的方法

// !function a(){confirm("开始")}

// !a() 调用上面的函数a()

function index() {
    confirm("开始")
    alert("方案一请弹出我要将的内容");
    console.log("我在调用函数的信息内容在控制台中去打印")
    document.write("<h1>我在浏览器中显示信息是在调用函数的名称为index()</h1>")
}
/**
 * @index 在声明的函数调用上面定义的方法index()
 */
index();

上面的案例自己可以尝试一下

// 如果我定义的函数声明了没有调用会有用吗
function a() {
    alert("用户声明了一个函数one()")
}
function aa() {
    document.write("用户输出的内容为one1()")
}
function aaa() {
    console.log("用户在控制台中打印输出的内容aaa()")
}
function aaaa() {
    confirm("用户借宿信息")
}

如果声明的函数声明了没有调用代码不会执行的

// * 如果我定义的函数方法调用了会执行代
// *如何去调用上面的函数呢?
function one() {
    confirm("开始")
    alert("方案一请弹出我要将的内容");
    console.log("我在调用函数的信息内容在控制台中去打印")
    document.write("<h1>我在浏览器中显示信息是在调用函数的名称为index()1</h1>")
    alert("用户声明了一个函数one()")
}
function two() {
    confirm("开始")
    alert("方二请弹出我要将的内容");
    console.log("我在调用函数的信息内容在控制台中去打印")
    document.write("<h1>我在浏览器中显示信息是在调用函数的名称为index()2</h1>")
    document.write("用户输出的内容为one1()")
}
function three() {
    confirm("开始")
    alert("方三请弹出我要将的内容");
    console.log("我在调用函数的信息内容在控制台中去打印")
    document.write("<h1>我在浏览器中显示信息是在调用函数的名称为index()3</h1>")
    console.log("用户在控制台中打印输出")
}
function four() {
    confirm("开始")
    alert("方案四请弹出我要将的内容");
    console.log("我在调用函数的信息内容在控制台中去打印")
    document.write("<h1>我在浏览器中显示信息是在调用函数的名称为index()4</h1>")
    confirm("用户借宿信息")
}
// ! 函数的调用
one()
two()
three()
four()

总结:在JS中声明的函数一定要调用,如果不去调用函数的方法,改方法块的内容不会执行

参数这个概念如何理解呢?

HTML结构

如果转入的是两个参数呢!

/* 转入两个参数 */
function asd(name, age) {
  alert("姓名:" + name + "年龄:" + age + "岁");
}

如果转入的是三个参数呢!

/* 转入三个参数 */
function asd1(name, age, sex) {
  alert("姓名:" + name + "年龄:" + age + "岁" + "性别" + sex);
}

如果转入的是四个参数呢!

/* 转入四个参数 */
function asd2(name, age, sex, phone) {
  alert("姓名:" + name + "年龄:" + age + "岁" + "性别" + sex + "电话" + phone);
}

相关文章
|
5天前
|
JavaScript 前端开发
JavaScript基础&实战(4)js中的对象、函数、全局作用域和局部作用域
这篇文章介绍了JavaScript中对象的基本概念和操作,包括对象属性和方法的使用、对象字面量的创建、函数的定义和作用域的概念,以及全局作用域和局部作用域的区别和特性。
JavaScript基础&实战(4)js中的对象、函数、全局作用域和局部作用域
|
5天前
|
JavaScript
js中有哪些函数?
js中有哪些函数?
7 0
|
5天前
|
JavaScript 前端开发 Java
JavaScript 特殊函数
JavaScript 特殊函数
6 0
|
5天前
|
JavaScript 前端开发
JavaScript 函数中break,continue,return 的区别
JavaScript 函数中break,continue,return 的区别
14 0
|
5天前
|
JavaScript 前端开发
JS - 立即执行函数
这篇文章解释了JavaScript中的立即执行函数(IIFE,Immediately Invoked Function Expression)的概念和用法,它用于创建局部作用域以避免全局变量的污染。文中提供了多种立即执行函数的示例,展示了如何通过不同的语法结构立即调用函数。
13 0
|
8天前
|
JavaScript 前端开发
JavaScript——实现compose函数
JavaScript——实现compose函数
14 0
|
8天前
|
JavaScript 前端开发
JavaScript——实现一些常用函数
JavaScript——实现一些常用函数
9 0
|
8天前
|
JavaScript
Vue——使用JS文件中的函数ESLint报错未定义
Vue——使用JS文件中的函数ESLint报错未定义
18 0
|
8天前
|
存储 JavaScript 前端开发
js之函数区别
js之函数区别
13 0
|
8天前
|
存储 JavaScript 索引
js arguments 的使用与自执行函数
js arguments 的使用与自执行函数
11 0

热门文章

最新文章