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>