从零开始学前端：初识函数 --- 今天你学习了吗？（JS）
从零开始学前端：程序猿小白也可以完全掌握！—今天你学习了吗？（JS）
复习：从零开始学前端：初识JavaScript — 今天你学习了吗？（JS）
文章目录
- 从零开始学前端：程序猿小白也可以完全掌握！—今天你学习了吗？（JS）
前言
js前两节课比较基础，但是也有重点，还是要仔细过一下的。
第二节课：初识函数
一、初识function函数
函数：
函数是由事件驱动的或者当它被调用时执行的可重复使用的代码。
函数的语法：
- 当调用改函数时，会执行函数内的代码。
- 可以在某事件发生时直接调用函数（比如用户点击按钮时），并且可由JavaScript在任何位置进行调用。
- JavaScript对大小写敏感。关键词function必须是小写的，并且必须以与函数名称相同的大小写来调用函数。
二、函数声明
函数声明：
JavaScript使用关键字function定义函数。
例如：
// 函数声明 function fn() { console.log("123"); }三、有名函数与匿名函数
有名函数：
或称为定义函数或则函数命名。
语法：function fn ( ) { } //函数名+括号
例如：
function fn() { console.log("我有名字啦~"); }匿名函数：
或称为函数表达式。
语法：var a = function ( ) { }
例如：
var a = function () { console.log("我猜你不知道我的名字~"); }四、自执行与他执行
自执行：
通过函数名fn()，这种叫做函数的自执行（即有名函数）；
他执行：
被其它接收的变量来触发的函数（匿名函数），比如事件函数；
五、函数表达式
函数表达式：
在表达式中可省略它，从而创建匿名函数
特点：
- 在代码中须出现在表达式的位置
- 有可选的函数名称
- 不会影响变量对象
- 在代码执行阶段创建
8种函数表达式：
var fun = function () { console.log(1); }; ~function () { console.log(2) }; - function () { console.log(3) }; + function () { console.log(4) }; !function () { console.log(5) }; (function () { console.log(6) })(); (function () { console.log(7) }());六、this（指针）
直接打印this，this是指向Window的，Window是顶层对象。
console.log(this); function fn() { console.log(this); } fn();输出：
事件触发this指向事件源
1.
var mybox = document.getElementById("mybox"); mybox.onclick = function () { console.log(this); }
2.
mybox.onclick = fn; mybox.onmouseenter = fn; function fn() { console.log(this); } fn();
七、“=” 等号
一个等号是赋值
二个三个等号是判断
八、合法属性与自定义属性
合法属性：
类似系统自带的属性（innerHTML）、本身就有的属性，称之为合法属性！
例如：
console.log(mybox.innerHTML)console.log(mybox.innerText)自定义属性6：
不是系统制定好的，而是人为自己定义的属性！如果再来访问这个自定义属性，就能到这个值；
例如：
melody为自定义属性
<div id="mybox" melody="melodyCandy"></div>九、自定义属性的运用
- getAttribute(“属性的名字”) //获取自定义属性的值
- etAttribute(“属性的名字”, ‘属性的值’) // 设置自定义属性的值
- show.removeAttribute(“属性的名字”) // 移除自定义属性
实例：
原：
<div id="mybox" melody="meloddddy" kan="you"></div>使用后：
代码：
var show = document.getElementById("mybox") show.getAttribute("melody") //获取自定义属性的值 console.log(show) show.setAttribute("tianyou", 'asdd') // 设置自定义属性的值 console.log(show) show.removeAttribute("kan") // 移除自定义属性 console.log(show)十、点击增加或减少
效果：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .mybox { width: 200px; height: 50px; margin: 0 auto; } input { width: 40px; text-align: center; } button { width: 24px; } </style></head><body> <div id="mybox" class="mybox"> <button id="down">-</button> <input type="text" value="0" id="inp"> <button id="up">+</button> </div> <script> var mybox = document.getElementById("mybox"); var down = document.getElementById("down") var up = document.getElementById("up") var inp = document.getElementById("inp") down.onclick = function () { console.log(down) inp.value-- console.log(inp.value) } up.onclick = function () { console.log(up) inp.value++ console.log(inp.value) } </script></body></html>预习：中括号代替点操作，获取对象，自定义标签属性
