JavaScript 函数
在JavaScript中,函数即对象,可以随意地被程序操控,函数可以嵌套在其他函数中定义,这样可以访问它们被定义时所处的作用域中的任何变量。
函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
alert("Hello World!");
}
</script>
</head>
<body>
<button onclick="myFunction()">Try it</button>
</body>
</html>
JavaScript 函数语法
函数就是包裹在花括号中的代码块,前面使用了关键词 function:
function functionname() {
执行代码
}
当调用该函数时,会执行函数内的代码。
可以在某事件发生时直接调用函数(比如当用户点击按钮时),并且可由 JavaScript 在任何位置进行调用。
注意:JavaScript 对大小写敏感。关键词 function 必须是小写的,并且必须以与函数名称相同的大小写来调用函数。
提示:function 中的花括号是必需的,即使函数体内只包含一条语句,仍然必须使用花括号将其括起来。
调用带参数的函数
在调用函数时,您可以向其传递值,这些值被称为参数。
这些参数可以在函数中使用。
您可以发送任意多的参数,由逗号 (,) 分隔:
myFunction(argument1,argument2)
声明函数时,请把参数作为变量来声明:
function myFunction(var1,var2){
代码
}
变量和参数必须以一致的顺序出现。第一个变量就是第一个被传递的参数的给定的值,以此类推。
<button onclick="myFunction('Harry Potter','Wizard')">Try it</button>
<script>
function myFunction(name,job)
{
alert("Welcome " + name + ", the " + job);
}
</script>
上面的函数在按钮被点击时会提示 "Welcome Harry Potter, the Wizard"。
函数很灵活,您可以使用不同的参数来调用该函数,这样就会给出不同的消息:
<button onclick="myFunction('Harry Potter','Wizard')">Try it</button>
<button onclick="myFunction('Bob','Builder')">Try it</button>
根据您点击的不同的按钮,上面的例子会提示 "Welcome Harry Potter, the Wizard" 或 "Welcome Bob, the Builder"。
带有返回值的函数
有时,我们会希望函数将值返回调用它的地方。
通过使用 return 语句就可以实现。
在使用 return 语句时,函数会停止执行,并返回指定的值。
语法
function myFunction(){
var x=5;
return x;
}
上面的函数会返回值 5。
注意: 整个 JavaScript 并不会停止执行,仅仅是函数。JavaScript 将继续执行代码,从调用函数的地方。
函数调用将被返回值取代:
var myVar=myFunction();
myVar 变量的值是 5,也就是函数 "myFunction()" 所返回的值。
即使不把它保存为变量,您也可以使用返回值:
document.getElementById("demo").innerHTML=myFunction();
"demo" 元素的 innerHTML 将成为 5,也就是函数 "myFunction()" 所返回的值。
可以使返回值基于传递到函数中的参数:
function myFunction(a,b)
{
return a*b;
}
document.getElementById("demo").innerHTML=myFunction(4,3);
仅仅希望退出函数时 ,也可使用 return 语句。返回值是可选的:
function myFunction(a,b){
if (a>b){
return;
}
x=a+b
}
如果 a 大于 b,则上面的代码将退出函数,并不会计算 a 和 b 的总和。
局部 JavaScript 变量
在 JavaScript 函数内部声明的变量(使用 var)是局部变量,所以只能在函数内部访问它。(该变量的作用域是局部的)。
您可以在不同的函数中使用名称相同的局部变量,因为只有声明过该变量的函数才能识别出该变量。
只要函数运行完毕,本地变量就会被删除。
局部变量比同名全局变量的优先级高,所以局部变量会隐藏同名的全局变量。
全局 JavaScript 变量
在函数外声明的变量是全局变量,网页上的所有脚本和函数都能访问它。
JavaScript 变量的生存期
JavaScript 变量的生命期从它们被声明的时间开始。
局部变量会在函数运行以后被删除。
全局变量会在页面关闭后被删除。
向未声明的 JavaScript 变量分配值
如果您把值赋给尚未声明的变量,该变量将被自动作为全局变量声明。
这条语句:
carname="Volvo";
将声明一个全局变量 carname,即使它在函数内执行。
案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 事件 -->
<!-- 1.在外部js文件中定义testThis函数 -->
<!-- 2.在元素上添加onclick事件,触发testThis函数 -->
<!-- 基于DOM驱动:修改数据的时候,需要找到元素,对元素进行修改 li-> li-->
<!-- 基于数据驱动:修改数据的时候,找到数据.push,对数据进行操作 -->
<button onclick="testThis(this)">求和</button>
<!-- this --》button元素 -->
<script src="./js/myjs.js"></script>
<script type="text/javascript">
//函数的定义
//函数:求两个数的和
//function 函数名(参数列表)
function mySum(a,b){
// 这里要进行100行的代码处理
let c = a + b;
//返回结果
return c
}
//为什么要定义函数:1.代码简洁 2.代码复用(减少重复代码) 3.维护方便
var result;
//调用mySum函数,并将结果赋值给result
result = mySum(10,20);
console.log(result)
result2 = mySum(1000,20);
console.log(result2)
//无语法错误
// console.log(mySum(1))
//作用域:变量起作用的范围
//全局变量 --》从定义开始,在整个代码段中都生效
var s1 = "abc";
//定义函数
function testVar(){
console.log(s1) // "abc"
s1 = "def"
//局部变量:只在自己定义的函数中生效
var s2 = "this is s2"
}
//调用函数
testVar()
console.log(s1) // "def"
// Uncaugth ReferenceError: s2 is not defined
// console.log(s2)
function testThis(obj){
console.log(obj)
}
</script>
</body>
</html>
JavaScript 作用域
作用域是可访问变量的集合。
在JavaScript中,能够定义全局作用域或者局部作用域。
在 JavaScript 中, 对象和函数同样也是变量。
在 JavaScript 中, 作用域为可访问变量,对象,函数的集合。
JavaScript 函数作用域: 作用域在函数内修改。
JavaScript 局部作用域
变量在函数内声明,变量为局部作用域。
局部变量:只能在函数内部访问。
// 此处不能调用 carName 变量
function myFunction() {
var carName = "Volvo";
// 函数内可调用 carName 变量
}
因为局部变量只作用于函数内,所以不同的函数可以使用相同名称的变量。
局部变量在函数开始执行时创建,函数执行完后局部变量会自动销毁。
JavaScript 全局变量
变量在函数外定义,即为全局变量。
全局变量有 全局作用域: 网页中所有脚本和函数均可使用。
var carName = " Volvo";
// 此处可调用 carName 变量
function myFunction() {
// 函数内可调用 carName 变量
}
如果变量在函数内没有声明(没有使用 var 关键字),该变量为全局变量。
以下实例中 carName 在函数内,但是为全局变量。
// 此处可调用 carName 变量
function myFunction() {
carName = "Volvo";
// 此处可调用 carName 变量
}
JavaScript 变量生命周期
JavaScript 变量生命周期在它声明时初始化。
局部变量在函数执行完毕后销毁。
全局变量在页面关闭后销毁。
函数参数
函数参数只在函数内起作用,是局部变量。
HTML 中的全局变量
在 HTML 中, 全局变量是 window 对象: 所有数据变量都属于 window 对象。
//此处可使用 window.carName
function myFunction() {
carName = "Volvo";
}
注意:
你的全局变量,或者函数,可以覆盖 window 对象的变量或者函数。
局部变量,包括 window 对象可以覆盖全局变量和函数。
在 ES6 中,提供了 let 关键字和 const 关键字。
let 的声明方式与 var 相同,用 let 来代替 var 来声明变量,就可以把变量限制在当前代码块中。
使用 const 声明的是常量,其值一旦被设定便不可被更改。
案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function mySum1(a,b){
return a+b
}
mySum2 = function (a,b){
return a + b;
}
console.log(mySum1(1,3))
console.log(mySum2(1,3))
//匿名函数的意义 -》一次性的
//有一些函数,需要的参数是一个函数
var arr1 = [1,2,3,4];
var arr1Sum = 0;
arr1.forEach(function(item,index){
console.log(item**2,index)
// arr1Sum += item**2
arr1Sum = arr1Sum + item**2
})
console.log(arr1Sum)
// mySum2 = function (a,b){
// return a + b;
// }
//箭头函数
//(参数列表) => {函数体}
mySum3 = (a,b)=>{
return a+b
}
console.log(mySum3(10,20))
var arr2 = [1,2,3,4]
// 求元素之和
var arr2Sum = 0;
arr2.forEach((item)=>{
arr2Sum += item;
})
console.log(arr2Sum)
//普通函数:用function定义的函数
//箭头函数 =>
//区别 this
var a = "This is a";
var obj = {
//定义字符串a
a:"This is obj.a",
b:"This is obj.b",
//定义普通函数func1
func1:function(){
console.log(this)
console.log(this.a)
},
//定义箭头函数func2
func2:()=>{
console.log(this)
console.log(this.a)
},
func3:function(){
return this.a + this.b
}
}
// this => window
console.log(this)
// obj.func1 => 普通函数 => this =>obj
// this => 谁调用我,this表示的就是谁
// obj.func1() => this 代表的是obj
console.log("function func1")
obj.func1()
// obj.func2 => 箭头函数 => this => window
// 箭头函数没有自己的this
// 去上下文中去找,将找到的this当作自己的this
console.log("=>func2")
obj.func2()
console.log(obj.func3())
</script>
</head>
<body>
</body>
</html>
JavaScript 事件
事件是可以被 JavaScript 侦测到的行为。
HTML 事件是发生在 HTML 元素上的事情。
当在 HTML 页面中使用 JavaScript 时, JavaScript 可以触发这些事件。
HTML 事件
HTML 事件可以是浏览器行为,也可以是用户行为。
HTML 网页中的每个元素都可以产生某些可以触发 JavaScript 函数的事件。
以下是 HTML 事件的实例:
- HTML 页面完成加载
- HTML input 字段改变时
- HTML 按钮被点击
通常,当事件发生时,你可以做些事情。
在事件触发时 JavaScript 可以执行一些代码。
HTML 元素中可以添加事件属性,使用 JavaScript 代码来添加 HTML 元素。
单引号:
<some-HTML-element some-event='some JavaScript'>
双引号:
<some-HTML-element some-event="some JavaScript">
按钮元素中添加了 onclick 属性
<button onclick='getElementById("demo").innerHTML=Date()'>The time is?</button>
JavaScript 代码将修改 id="demo" 元素的内容。
代码将修改自身元素的内容 (使用 this.innerHTML):
<button onclick="this.innerHTML=Date()">The time is?</button>
JavaScript代码通常是几行代码。比较常见的是通过事件属性来调用:
<button onclick="displayDate()">The time is?</button>
常见的HTML事件
JavaScript 可以做什么?
事件可以用于处理表单验证,用户输入,用户行为及浏览器动作:
- 页面加载时触发事件
- 页面关闭时触发事件
- 用户点击按钮执行动作
- 验证用户输入内容的合法性
- 等等 ...
可以使用多种方法来执行 JavaScript 事件代码:
- HTML 事件属性可以直接执行 JavaScript 代码
- HTML 事件属性可以调用 JavaScript 函数
- 你可以为 HTML 元素指定自己的事件处理程序
- 你可以阻止事件的发生。
- 等等 ...
在 HTML DOM 章节中你将会学到更多关于事件及事件处理程序的知识。
案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form action="" onsubmit="return onSubmit()">
<p>
用户名:<input type="text" name="username" id="username" placeholder="请输入用户名" onchange="onUserNameChange()"/>
</p>
<p>
密码:<input name="password" type="password" id="password" placeholder="请输入密码" onfocus="onPasswdFocus()" onblur="onPasswdBlur()"/>
</p>
<P>
<input type="submit" value="登录"/>
<!-- type=button与type=submit的区别? -->
</P>
</form>
<script type="text/javascript">
function onUserNameChange(){
console.log("username发生了变化~")
}
function onPasswdBlur(){
console.log("password失去了焦点")
}
function onPasswdFocus(){
console.log("password获取了焦点")
}
function onSubmit(){
console.log("表单要提交了,做一些检查")
//内容合法 =>提交
var userEl = document.getElementById("username")
console.log(userEl.value)
//判断
if(userEl.value.length ==0){
//内存不合法 -> 不提交
// return false
console.log("用户名为空")
return false
}
return true
}
</script>
</body>
</html>