从零开始学前端：程序猿小白也可以完全掌握！—今天你学习了吗？（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）

从零开始学前端：初识函数，合法属性与自定义属性 --- 今天你学习了吗？（JS：Day2）相关推荐

从零开始学前端：css3新属性scss和less --- 今天你学习了吗？（CSS:Day22）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:形变 - 今天你学习了吗?(CSS:Day21) 文章目录从零开始学前端:程序猿小白也可以完全掌握!-今 ...
从零开始学前端 - 5. CSS常用属性
作者: 她不美却常驻我心博客地址: https://blog.csdn.net/qq_39506551 微信公众号:老王的前端分享每篇文章纯属个人经验观点,如有错误疏漏欢迎指正.转载请附带作者信息 ...
从零开始学前端：OPPO商城轮播图 --- 今天你学习了吗？（CSS：Day23）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:css3新属性scss和less - 今天你学习了吗?(CSS:Day22) 文章目录从零开始学前端:程 ...
从零开始学前端：函数 --- 今天你学习了吗？（JS：Day8）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(JS) 复习:从零开始学前端:九九乘法表.全选反选全不选 - 今天你学习了吗?(JS:Day7) 文章目录从零开始学前端:程序猿小白也可 ...
从零开始学前端：CSS字体属性和文本属性 --- 今天你学习了吗？（CSS：Day08）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:CSS引入 - 今天你学习了吗?(CSS:Day07) 文章目录从零开始学前端:程序猿小白也可以完全掌握 ...
从零开始学前端：字符串和数组的方法 --- 今天你学习了吗？（JS：Day10）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(JS) 复习:从零开始学前端:作用域.执行顺序 - 今天你学习了吗?(JS:Day9) 文章目录从零开始学前端:程序猿小白也可以完全掌握 ...
从零开始学前端：购物车和鲜花价格排序 --- 今天你学习了吗？（JS：Day12）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(JS) 复习:从零开始学前端:对象序列化与反序列化.冒泡排序.数组去重 - 今天你学习了吗?(JS:Day11) 文章目录从零开始学前端 ...
从零开始学前端：标签渐变和媒体查询 --- 今天你学习了吗？（CSS：Day25）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS:Day25) 复习:从零开始学前端:grid布局和音频和媒体查询 - 今天你学习了吗?(CSS:Day24) 文章目录从零开始学 ...
从零开始学前端：显示隐藏与文本溢出 --- 今天你学习了吗？（CSS：Day16）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:浮动 - 今天你学习了吗?(CSS:Day15) 文章目录从零开始学前端:程序猿小白也可以完全掌握!-今 ...

从零开始学前端：初识函数，合法属性与自定义属性 --- 今天你学习了吗？（JS：Day2）