function函数
把一段公共代码进行封装，把封装的这个代码块称之为函数（工具、就是一个方法---功能）
数据类型
属于引用数据类型范畴
自身类型：function
语法
function 名称(){
需要封装的代码
}
名称()
说明
function属于系统关键字，就是函数的意思function关键字后面的名称就是函数的名称，命名规则遵循变量的命名规则- 花括号里面写的就是业务代码（根据具体的需求来，自定义，里面放什么代码其实函数没有限定）
- 不带系统关键字的这个函数名称表示的是函数的调用（函数你不调用它，那么它不会执行）
特点
- 一次定义，多次调用
- 减少代码量，方便代码的管理
规则
- 定义在函数内部的变量，函数的外部是使用不了的
- 可以
保护私有变量
function aFn(){
// 私有变量
var num = 10
console.log(num)
}
aFn()
function bFn(){
// 私有变量
var num = 20
console.log(num)
}
bFn()
var str = '我是函数外部的变量'
console.log(str)
var str = 'hello'
console.log(str)
参数
- 函数的小括号里面是可以传递参数的
- 形参，形式上的参数，起了一个占位的作用，其实就是一个变量，只不过不需要使用var关键字进行声明
- 实参，就是实际上你要使用的数据
- 函数的形参和实参是一个映射（一一对应）关系
- 如果形参相同的话，后面传递的实参的值会把前面的给覆盖掉
设置参数的默认值
- ES6（就是js的版本）里面新增函数参数可以设置默认值
注意：如果形参相同的话，后面传递的实参的值会把前面的给覆盖掉
求两个数的最大值
问题：重复的代码太多了，不利于二次使用。写在函数外面的变量，后面如果有和前面相同的变量的情况下会被覆盖
var a = 10
var b = 20
if(a>b){
console.log(a)
}else{
console.log(b)
}
var x = 10
var y = 20
if(x>y){
console.log(x)
}else{
console.log(y)
}
使用函数对其进行封装
function getMax(a, b){
if(a>b){
console.log(a)
}else{
console.log(b)
}
}
getMax(10, 20)
getMax(30, 15)
getMax(30, 66)
函数输出表格
function printTable(rows, cols){
var str = '<table border="1" width="500" height="200">'
for(var i=1; i<=rows; i++){
str += '<tr>'
for(var j=1; j<=cols; j++){
str += '<td></td>'
}
str += '</tr>'
}
str += '</table>'
document.write(str)
document.write('<hr/>')
}
printTable(10, 5)
printTable(5, 6)
计算两个文本框的和
<input type="text" value="" id="txt1">
+
<input type="text" value="" id="txt2">
<!-- onclick（事件）这个html属性，可以帮助咱们调用函数（当点击按钮的时候调用函数） -->
<button onclick="getSum()">计算</button>
<input type="text" value="" id="txt3">
function getSum(){
txt3.value = Number(txt1.value) + Number(txt2.value)
}
函数调用
- 通过函数名称加括号形式
- 通过事件来调用函数（函数只有在你触发事件的时候调用，可以做到控制代码执行时间）
函数调用
这里只是一种
** 第一种方式**
给元素取一个id名称，就可以直接获取到当前的元素（在js里面可以直接使用这个id名称）
一定是元素的名称是id的时候，js里面才可以直接获取。class或者name形式是不行的
第二种方式
document.getElementById()
在网页中通过id的形式获取元素
获取元素两种方式区别
第一种方式（取id，直接使用id名称），最早出现在IE浏览器（低版本）里面的，其他的浏览器是不支持这种方式的
其他浏览器支持的是document.getElementById()第二种方式，随着后面的发展慢慢的其他浏览器也支持了第一种 放松，但是为了兼容更多的浏览器，推荐大家使用第二种方式
常用事件
事件：把用户在网页中的一些列操作称之为事件，例如，鼠标点击、移入移出、键盘敲击。
onclick 单击事件，当点击（单击）的时候
onmouseover 移入事件
onmouseout 移出事件
onload 加载事件
事件绑定 : 把元素和事件绑定在一起，这样就可以通过事件调用函数
语法
ele.事件名称 = function(){}
说明 : 把没有名称的函数称之为匿名函数
js代码位置问题
正常的情况下只要不涉及获取元素、操作元素那么你的js代码放在页面的任何地方其实都可以
html、css、js代码开始都是按照自上而下的顺序去加载和执行的,
但是在加载的过程中如果遇到了script标记，那么此时其他代码要暂停执行，会优先把js代码执行完毕后，再去执行其他的代码
onload事件:当网页中其他的内容加载完毕后，才会去执行它里面的代码
return函数返回值
- return是函数隐含的一个参数，可以把函数内部的数据给函数外部返回
- 把return理解为是函数内部和外部沟通的一个‘桥梁’
函数访问规则:函数内部可以访问函数外部的数据, 函数外部是访问不了函数内部的数据
需求:
有时候希望函数外部可以拿到函数内部的数据,因此可以使用return
函数外部拿到函数内部数据方式:
可以通过函数名称加括号的形式来拿到
return 数据 <-> fn()
思考：函数外部为什么要通过fn()这种形式拿到函数内部的值呢
原因：
- 如果在外界直接使用函数内部的变量名称，那么很容易产生命名冲突问题
- 函数名称加括号表示函数调用，那么再给它加了层含义，这样的话一举两得
函数名称加括号作用：
- 第一层意思是表示函数的调用
- 第二层意思是表示的是接收函数内部返回的数据
注意：当一个函数没有返回值的时候，那么外界接收的到就是undefined
function fn(){
console.log(123)
}
console.log(fn()) // undefined
函数返回值的应用
求两个数的最大值：
// 求两个数的最大值
function getMax(a, b){
var max
if(a>b){
max = a
}else{
max = b
}
return max
}
var res = getMax(10, 20)
document.write('最大值：'+res)
非空验证：
<input type="text" id="txt" value="">
<button id="btn">提交</button>
// 获取元素
var txt = document.getElementById('txt')
var btn = document.getElementById('btn')
// length表示字符的长度
// console.log(txt.value.length)
// 事件绑定
btn.onclick = function(){
// 非空验证
if(txt.value == ''){
alert('亲，内容不能为空！')
return
}
// 验证字符的长度
if(txt.value.length > 6){
alert('亲，字符最多只能输入6个！')
return
}
console.log('hello')
}
选择器封装：
<button id="btn">按钮</button>
<div id="box">hello</div>
<script>
// var btn = document.getElementById('btn')
// var box = document.getElementById('box')
// 注意点：在很多的框架里面，把获取选择器的名称习惯性使用$来表示，当然咱们也可以
// 选择器封装
// function getEle(id){
// return document.getElementById(id)
// }
// var btn = getEle('btn')
// var box = getEle('box')
// console.log(btn, box)
function $(id){
return document.getElementById(id)
}
var btn = $('btn')
var box = $('box')
console.log(btn, box)
</script>
