从零开始学前端：程序猿小白也可以完全掌握！—今天你学习了吗？（JS）
复习：从零开始学前端：初识JavaScript — 今天你学习了吗？（JS：Day1）
文章目录
从零开始学前端：程序猿小白也可以完全掌握！—今天你学习了吗？（JS）前言第二节课：初识函数一、innerHTML与innerText二、通过点击事件改变宽高三、鼠标移入移出事件四、初识function函数五、有名函数与匿名函数六、自执行与他执行七、函数表达式和函数声明八、this（指针）九、“=” 等号十、合法属性与自定义属性十一、自增和自减十二、点击增加或减少运用前言
js前两节课比较基础，但是也有重点，还是要仔细过一下的。
第二节课：初识函数
一、innerHTML与innerText
innerHTML:
获取标签节点的内容/获取标签节点内容的操作权限 --> 能解析标签；
innerText:
获取表掐节点的内容/获取标签节点内容的操作权限 --> 不能解析标签；
实例：
最初内容（不使用innerHTML）：
<!-- style--><style>.box {width: 100px;height: 100px;background-color: pink;margin: 0 auto;}</style><!-- body--><body><div class="box" id="mybox">123</div></body>
使用innerHTML获取内容
console.log(document.getElementById("mybox").innerHTML);
使用innerHTML替换内容之后：
document.getElementById("mybox").innerHTML = "<b>我是替换后的内容</b>"
使用innerText替换内容之后：
document.getElementById("mybox").innerText = "<b>我是替换后的内容</b>"
代码：
<!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>.box {width: 100px;height: 100px;background-color: pink;margin: 0 auto;}</style></head><body><div class="box" id="mybox">123</div><script>// document.getElementById("mybox").innerHTML = "<b>我是替换后的内容</b>"document.getElementById("mybox").innerText = "<b>我是替换后的内容</b>"</script></body></html>
二、通过点击事件改变宽高
点击改变盒子的宽高和颜色
mybox.style.width = "200px";mybox.style.height = "200px";mybox.style.backgroundColor = "skyblue";
实例：
初始盒子：
点击后盒子：
代码：
<!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>.box {width: 100px;height: 100px;background-color: pink;margin: 100px auto;}</style></head><body><div class="box" id="mybox"></div><script>var mybox = document.getElementById("mybox")mybox.onclick = function () {mybox.style.width = "200px";mybox.style.height = "200px";mybox.style.backgroundColor = "skyblue";}</script></body></html>
注意事项：
背景颜色在CSS中是backgroubd-color，但是这种复合写法在script中并不适用，需要运用驼峰命名法，写为backgroundColor；宽高改变的写法如下，注意等号后面双引号里不能加“;”，需要加到外面。
mybox.style.width = "200px";mybox.style.height = "200px";
在script中CSS样式也可以合在一起写，鼠标事件中有运用；
mybox.style.cssText = "width:200px;height:200px;background-color:skyblue";
三、鼠标移入移出事件
鼠标移进移出，盒子样式发生变化
//移入mybox.onmouseenter = function () {}//移出mybox.onmouseleave = function () {}
实例：
初始时：
移进时：
移出时：
代码：
<!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>.box {width: 100px;height: 100px;background-color: pink;margin: 100px auto;}</style></head><body><div class="box" id="mybox"></div><script>var mybox = document.getElementById("mybox")mybox.onmouseenter = function () {mybox.style.cssText = "width:200px;height:200px;background-color:skyblue";}mybox.onmouseleave = function () {mybox.style.cssText = "width:150px;height:150px;background-color:purple";}</script></body></html>
四、初识function函数
函数：
函数是由事件驱动的或者当它被调用时执行的可重复使用的代码。
函数的语法：
当调用改函数时，会执行函数内的代码。可以在某事件发生时直接调用函数（比如用户点击按钮时），并且可由JavaScript在任何位置进行调用。JavaScript对大小写敏感。关键词function必须是小写的，并且必须以与函数名称相同的大小写来调用函数。
相当于模具，可以用function封装起来
console.log(1)console.log(2)console.log(3)function fn() {console.log(1)console.log(2)console.log(3)}
运行：
可以看出，封装起来的打印命令并没有运行，
就相当于之前的烟花是点燃了的，但是现在没有点燃，需要点燃才可以爆炸。
如何调用函数：
调用函数 => 函数名+括号
function fn() {console.log(1)console.log(2)console.log(3)}fn();
运行：
五、有名函数与匿名函数
有名函数：
或称为定义函数或则函数命名。
语法：function fn ( ) { } //函数名+括号
fn即为函数的名字。
例如：
function fn() {console.log("我有名字啦~");}
匿名函数：
或称为函数表达式。
语法：var a = function ( ) { }
函数并没有名字，他是通过使用另外定义的一个变量等于匿名函数从而可以调用函数。
例如：
var a = function () {console.log("我猜你不知道我的名字~");}
六、自执行与他执行
自执行：
通过函数名fn()，这种叫做函数的自执行（即有名函数）；
他执行：
被其它接收的变量来触发的函数（匿名函数），比如事件函数；
七、函数表达式和函数声明
函数表达式：
在表达式中可省略它，从而创建匿名函数
var fn = function ( ) { }
函数声明：
JavaScript使用关键字function定义函数。
例如：
// 函数声明function fn() {console.log("123");}
特点：
在代码中须出现在表达式的位置有可选的函数名称不会影响变量对象在代码执行阶段创建
函数表达式本身并不会执行，需要在其后面加()
7种函数表达式：
// 函数表达式// 1var fun = function () {console.log(1);};// 函数表达式本身并不会执行，需要在其后面加()// 2+ function () {console.log(4) }();// 3- function () {console.log(3) }();// 4~function () {console.log(2) }()// 5!function () {console.log(5) }();// 6.使用下面这个写法的时候，会和上面的额写法连在一起，所以上面的写法后面必须有“;”(function () {console.log(6) })();// 7.（立即执行函数）(function () {console.log(7) }());
运行：
八、this（指针）
<!-- style--><style>#mybox {width: 100px;height: 100px;background-color: pink;margin: 100px auto;}</style><!-- body --><body><div id="mybox"></div><script>// this 指针// 1.直接打印就是指向windoowconsole.log(this);// 2. 函数里面的this指向windowfunction fn() {console.log(this);}// 这里的fn() === window.fn()fn(); //this指向window// 3.事件触发的话，this指向事件源，这里是mybox对象var mybox = document.getElementById("mybox");mybox.onclick = function () {console.log(this);}mybox.onmouseenter = function () {console.log(this);}// 4.这是3的简写，this指向myboxmybox.onclick = fn;mybox.onmouseenter = fn;function fn() {console.log(this);}</script></body>
运行（直接打印就是指向windoow）
运行（函数里面的this指向window）
运行（事件触发的话，this指向事件源，这里是mybox对象）
运行（事件触发的话，this指向事件源，这里是mybox对象）
九、“=” 等号
一个等号是赋值
二个三个等号是判断
十、合法属性与自定义属性
合法属性：
类似系统自带的属性（innerHTML）、本身就有的属性，称之为合法属性！
<body><div id="mybox">999</div><script>console.log(mybox.id);</script></body>
例如：
console.log(mybox.id);console.log(mybox.innerHTML)console.log(mybox.innerText)
自定义属性：
不是系统制定好的，而是人为自己定义的属性！如果再来访问这个自定义属性，就能到这个值；
fight 为自定义属性
<body><div id="mybox"></div><script>mybox.fight = "加油"console.log(mybox.fight);</script></body>
自定义属性与自定义标签属性：
自定义属性：
mybox.fight
自定义标签属性：
melody即为自定义标签属性
<div id="mybox" melody="melodyCandy"></div>
十一、自增和自减
自增++
mydiv.num++ 等于 mydiv.num += 1;
自减–
mydiv.num-- 等于 mydiv.num -= 1;
<!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>#mydiv {width: 100px;height: 100px;background-color: pink;margin: 0 auto;}</style></head><body><div id="mydiv">0</div><script>var mydiv = document.getElementById("mydiv");mydiv.num = 0;mydiv.onclick = function () {mydiv.num++;// mydiv.num += 1; console.log(mydiv.num);}</script></body></html>
十二、点击增加或减少运用
点击网页按钮，网页标题增加减少<!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>0</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 down = document.getElementById("down")var up = document.getElementById("up")// var inp = document.getElementById("inp")console.log(document.title)down.onclick = function () {// console.log(down)// inp.value--// console.log(inp.value)document.title--}up.onclick = function () {// console.log(up)// inp.value++document.title++// console.log(inp.value)}</script></body></html>
点击网页按钮增加减少，输入框数字增加减少
注意：
console.log(inp.innerHTML) //无法获取值
获取表单的值不能使用innnerHTML或innerText，必须要用value； 记死！！！
效果：
<!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>0</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 down = document.getElementById("down")var up = document.getElementById("up")var inp = document.getElementById("inp")// 获取表单的值不能使用innnerHTML或innerText，必须要用value； 记死！！！// 不能获取值// console.log(inp.innerHTML)// 可以获取值console.log(inp.value)down.onclick = function () {inp.value--}up.onclick = function () {inp.value++}</script></body></html>
预习：从零开始学前端：中括号代替点操作，获取对象，自定义标签属性 — 今天你学习了吗？（JS：Day3）
