接前边，大白话来了解一下程序员-JavaScript（JS）篇-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_45122975/article/details/139738264

接前边的文章，这篇回应一下JavaScript的相关，就现在看到的这个页面，行话叫web页面，对应的所有编码，叫前端代码，简称前端，前端页码的功能类似于手机的外观，就如手机壳、屏幕的材料等等，更新的速度很慢，相邻版本的手机之间也只是材料使用多少或者颜色等等的改变，改动很小基本可以忽略不计。

所谓的后端，指的就是手机内部的芯片、电路、元件等等，相比外观、屏幕等等，这些材料更新的很快，行话叫“技术迭代”。所以后端注定是一个不断学习的过程，并且后端涉及到精密电路等等，可能会出现版本不兼容的情况，意思是，比如在制造手机的时候，使用了最先进的芯片，却使用了比较老旧的其他配件（如电池），也会导致制造的手机不能使用。但是外壳对于手机来说，迭代的很慢，基本上一直都是同一种材料。

这一块写在<script></script>里边，要表达的，其实也就是，哪个元素（砖块），在什么时候（触发条件，如鼠标悬停、点击、拖拽等等），发生了什么变化（什么联动效果，比如字体变色、弹出窗口等等）。所以下边就按这个顺序来。

一、哪个元素的问题

其实说白了也就是怎么选择到元素的问题，前边那一篇是渲染的，用的选择器，写在<style></style>里边，这里的话就稍微复杂一点，但是表达都是固定的，在这里行话叫“查找HTML元素”，有如下三种方式

按照id var 变量名 = document.getElementById("")
按照标签名 var 变量名 = document.getElementByTagName("")
按照类名 var 变量名 = document.getElementByClassName("")

这里边var 是声明变量的意思，所谓的声明变量，就类似于数学的方程中，“设某个量为X”，这个X就带代表了一个量，那个“设”，就是这里的“var”，

其实细论一下的话，这个所谓的声明还有let，我举个例子来理解一下这个区别，假设数学一个大题有三个小问，如三个小问求不同条件下同一个量的不同值，此时应在第一小问之前设此变量为X，那么后边三问都可以直接列方程，三个小问都可以直接用这个X，这就叫var，行话叫var是全局作用域的声明。如果三个小问分别求三个不同的量，那么一般是每个小问单独的设某变量为A,第二问设所求量为B这样的，这叫let，第一问设为A，第二问里边是不能直接用A这个字母来列方程的，甚至第二问可以把另外一个量也设为A，它和第一问的A之间互相不影响。行话叫局部作用域、函数作用域。

到这里，叫，获取了某个元素，只是到元素这一层，一般是不够的，要看干什么，可能需要这个元素的id，或者需要这个元素的class，或者这个元素的内容，甚至是获取这个元素的内容的类型等等，那么到这里，其实一样的是和前边那篇里边说的，背英语单词的感觉是一致的。我来举例说明

比如要更改元素的内容，那就是“.innerHtml("要变更成的内容")”，没有为什么，背单词而已，具体的写法如下：
document.getElementById("某个元素的id").innerHTML("要变更成的新内容") 或者

var A = document.getElementById("某个元素的id")

A.innerHTML(“要变更成的新内容”)

再比如，修改属性，就是setAttribute("要修改的属性"，“修改成什么”)，你或者就可以理解为一个公式，就比如长方形的面积等于长乘宽，没有为什么，就是那样的，当英语单词或者数学公式来背，没有为什么，背的公式越多，数学题就解的越顺手。也就是编码越顺手。这些东西行话叫“API”，那本来就只能是InnerHTML的，非写个inerHTML，那肯定是报错的。至于这里选择到某个属性之后，我就不搬运和列举了，这个不是重点，知道是这么回事就行了。至于说怎么更熟练，那肯定多用会熟练，各位看官自己百度自己实验感兴趣的部分就好了。上述的这些东西，行话叫DOM模型。

所谓的编码，其实类似于读书时候学的英语，每天就背单词背课文然后自己用英文写句子写文章就这样的，英语考的好离不开词汇量，编程写得好也离不开这些词汇。记住的越多，就是所谓的自己技术越好，就可以跟别人狗叫“也不看看我简历比你长两页”(没错这个事情真的是恶心到我了，我写这大白话的文章就是想看一下，编码是什么很高级很有难度很值得骄傲的事情吗？让那几个同事在那嗷嗷叫）

二、什么时候的问题

就是在什么时候发生各种花里胡哨效果的时间点，这其实有很多，我略举一下，先简单体验一下，比如，点击按钮，鼠标悬停，鼠标离开，按下某个按键，松开某个按键，或者结束播放视频的瞬间等等，就很多是吧，接下来记录一下。

先来一个类和对象的问题，这里的对象可不是你那个Ta，指的是，比如，所有的学生加在一起，叫“学生类”，其中的某一个学生，叫“学生类的对象”，衍射的各个类，于是简称“对象”。

（1）、窗口相关的部分细节

这个所谓的窗口，指的是就是，这里编写的JS代码所在的那个页面的最外边一层，就比如前边那一篇教程里边<title></title>对应的部分，然后在操作窗口时，有如下可能

onblur → 失去焦点时运行
onfocus →获得焦点时运行
onload →文档加载之后运行
onresize →调整窗口的大小时运行

// 为窗口的blur事件添加事件监听器
window.addEventListener('blur', function() {
    console.log('窗口失去了焦点！');
    // 在这里执行当窗口失去焦点时您想要做的操作
});

// 或者使用旧版的附加事件方法（不推荐）
window.onblur = function() {
    console.log('窗口失去了焦点！');
    // 在这里执行当窗口失去焦点时您想要做的操作
};

这里说的时间监听器，就是前边说的，哪个元素，在什么时间，发生什么动作的意思，就好像有一个专门的设备在指定的时间触发某个元素执行某些操作一样，因而得名“事件监听器”。所谓的获得焦点，失去焦点，指的是，鼠标悬停在窗口和鼠标离开窗口的情况。console.log()是打印的意思，符合条件时，将会把内容输出到控制台。控制台的位置如下图所示

onreload，指的是，当页面或者图片加载完之后再执行的事情，关键是两处

<body onreload="函数名"></body>，要在<body>注明执行的函数。
window.addEventListener('Load',function(){})这两个要对应，其实和上边的onblur的写法是完全对应的，换汤不换药而已，知道reload指的是图片和页面完全加载完成之后才执行的意思即可。

onresize的写法也和上边一样，记也好记，on,是什么的时候，re一般表示重复，第二次的，size是型号，连起来就是重复型号的时候，重复型号就是调整大小嘛。

（2）、页面相关的

其实行话叫“表达事件”，这里也有获得焦点、失去焦点的监听，写法就是var一个变量名获得某个元素，然后和上边窗口的写法一样，window换成对应的变量名，其他的一模一样，一个标点都不差。除了这几个之外还有以下常见的

onchange → 当元素改变时运行代码
oninput → 当元素获得用户输入时运行
oninvalid → 当元素无效时运行脚本
onselect → 当提取元素时运行
onsubmit → 当提交表单时运行

提交表单指的是<form></form>这个元素就会形成一个表单，里边可以填充各种各样的元素，然后最后加一个<button>用于标识提交表单，这个最常用于开发系统时，绑定后端逻辑。所以提交表单可以理解为点击了<form>里边的<button>，就是提交了表单，然后oninvalid指的是，在表单元素的验证失败时触发的时间，在用户提交表单但某个元素的内容不满足验证条件（如必填、格式不正确）等等，这叫元素无效，会触发oninvalid事件，类比前边窗口操作，这些写在元素里边，如<input oninvalid="函数名">所谓的用户，指的就是提交表单的那个人，是谁都行。onselect指的是用户选择文本框（<input>或者<textarea>）中的文本时触发。写法和前边一样。

（3）、键鼠监听

下边开始背单词了，写法和前边类比，就是各种属性，背单词而已

onkeydow →按下按键时
onkeyup →松开按键时
onkeypress →按下并松开时
onclick →单击鼠标时
ondblclick →双击鼠标时
onmouseclick →当按下鼠标按钮时运行
onmouseup →松开鼠标按钮时运行
onmousemove →指针移动时运行
onmouseover →指针移动到元素上时
onmouseleave →鼠标移开时，
onmouseenter →当鼠标进入某元素时
onmouseleave →当鼠标移出元素时
onmousewheel →滑动鼠标滚轮时
onscroll →滚动元素的滚动条时

就背单词嘛，一背一个不吱声，不知道这有什么难理解的地方，单词可能更多，不止上边列出来的那些，就背嘛，背不住也无所谓，知道百度也行。当然了肯定是背下来更好一点，大概程序员头发少都是背这些背的，天天在记东西。

这里有一个细节要注意，表达与某个按键相关时，可不是直接按键的名字，比如要监听按下“W"键时触发某时间，应该是function(e){e.keycode=87}，这表示当按下W键时触发什么事情，这个不难理解，function表示函数的意思，e表示输入的意思，e.keycode表示键码，等于87，这个可以搜一下各个按键对应的键码，我也记不住，百度就好。输入的话，就按照前边获得某个元素的值，然后判断是否等于87，等于的时候触发事件，具体怎么判定，现在不扯，咱们逻辑清晰，现在只唠有关于”什么时间”这个事情。

除了上边这些，还有比如当某个视频播放完的时候，等等好多的，我就在这里背单词了，讲清楚是个道理就行了，至于单词怎么背，各自看吧。

三、触发什么事件

这个问题，基本上能想到的效果，都可以实现，所以真的又是特别多的单词要背。比如获取浏览器的类型（Navigator对象），获取实时的年月日（getFullYear()等），弹出窗等等。这里简单举例一些常用的，说明一下问题，至于全貌，还是背单词的形式，所以举例阐明通用的逻辑就不再啰嗦了。

（1）、弹出窗

这是第一种效果，叫警告框，写法是alert(“这是一个警告框！”)，

然后是第二种效果，叫确认框，写法是confirm('这是一个确认框，您要继续吗？')

最后是第三种效果，叫提示框，是可以输入文字的，写法是prompt('请输入您的名字：', '匿名')

三种窗口甚至可以定时，写法是setTimeout(function,milliseconds)重复一次，setInterval(function,millseconds)重复多次。

（2）、条件和循环

就是顾名思义，有多种情况的时候，每种情况对应不同的处理方式，比如判断一个时间点至今是否超过三年，超过了如何，没超过又是另外一样

首先是第一个，简称if条件，总结一下格式就是

if(条件1){运行1}

else if (条件2){运行2}

else{运行3}

如果有更多的条件，那么else if 是可以无限往下续的，注意最后一种情况写else 即可。

演示如下：

<!DOCTYPE html>
<html>
<head>
    <title>JS的if条件演示</title>
</head>
<body>

<h1>使用if条件</h1>

<p id="demo"></p>

<script>
    var x = 10;
    var txt = "";
    if (x > 10) {
        txt = "x 大于 10";
    } else if (x < 10) {
        txt = "x 小于 10";
    } else {
        txt = "x 等于 10";
    }
    document.getElementById("demo").innerHTML = txt;
</script>

</body>
</html>

然后是第二个条件格式，简称switch，总结一下格式就是

switch(变量条件/条件变量)
{case 值1 ：执行1 ; break ;

case 值2 : 执行2 ; break ;

default ; 执行3 ;

}

break，表示结束的意思，如果没有执行，会继续向下对照条件，如果执行了，然后break，下边的就不再对照条件了，可以提高代码的运行效率

演示如下：

<!DOCTYPE html>
<html>
<head>
    <title>JS的switch语句演示</title>
</head>
<body>

<h1>使用switch语句</h1>

<p id="demo"></p>

<script>
    var x = 3;
    var txt = "";
    switch (x) {
        case 0:
            txt = "x 是 0";
            break;
        case 1:
            txt = "x 是 1";
            break;
        case 2:
            txt = "x 是 2";
            break;
        default:
            txt = "x 不是 0, 1 或 2";
    }
    document.getElementById("demo").innerHTML = txt;
</script>

</body>
</html>

然后是循环

循环有三种，也都是固定格式，首先第一种，直接上代码看注释即可理解

<!DOCTYPE html>
<html>
<head>
    <title>JS的while循环演示</title>
</head>
<body>

<h1>使用while循环</h1>

<p id="whileDemo"></p>

<script>
    var i = 0;
    var txt = "";
    while (i < 5) {
        txt += "数字 " + i + "<br>";  //<br>表示换行的意思，+= 表示 A+=B，意思是A=A+B
        i++;//i++表示i=i+1的意思，原先是0这一步之后就+1，再有就再+1
    }
    document.getElementById("whileDemo").innerHTML = txt;
</script>

</body>
</html>

然后是第二种，

<!DOCTYPE html>
<html>
<head>
    <title>JS的do...while循环演示</title>
</head>
<body>

<h1>使用do...while循环</h1>

<p id="doWhileDemo"></p>

<script>
    var i = 0;
    var txt = "";
    do {
        txt += "数字 " + i + "<br>";
        i++;
    } while (i < 5);
    document.getElementById("doWhileDemo").innerHTML = txt;
</script>

</body>
</html>

再然后是第三种循环

<!DOCTYPE html>
<html>
<head>
    <title>JS的for循环演示</title>
</head>
<body>

<h1>使用for循环</h1>

<p id="forDemo"></p>

<script>
    var txt = "";
    for (var i = 0; i < 5; i++) {//对比前边的代码，这个()里边依次就是初始条件，临界的判断条件，执行结果
        txt += "数字 " + i + "<br>";
    }
    document.getElementById("forDemo").innerHTML = txt;
</script>

</body>
</html>

循环的条件要注意设置合理，避免产生死循环或者无限循环的情况，然后这里唠叨一下while 和“do......while”的区别，while 会出现在开头，直接先循环一遍条件，而“do......while”会在结尾处检查表达式的值，相比之下将少一遍循环的条件，此外，和break同样用处的还有continue，其效果是结束本次循环，执行下一次循环，只能在循环中使用。

（3）、正则校验

白话讲就是说用指定的规则去检验一些量是否合规，多用于检验用户输入，比如输入的手机号是否是11位，输入的密码是否包含字母大小写和特殊符号等等。写法如下：
var 正则规则名称 = new RegExp("具体规则","模式")

模式指的是，i,表示忽略大小写，g，全局，|是或的意思，[a-z]任意小写字母，[A-Z]任意大写字母，[A-z]任意字母，[0-9]任意数字，括号内先写^则表示非的意思。下边是举例哈，可以直接拉去过。

限定符

*：匹配前面的子表达式零次或多次。

+：匹配前面的子表达式一次或多次。

?：匹配前面的子表达式零次或一次。

{n}：n是一个非负整数，匹配确定的n次。

{n,}：至少匹配n次。

{n,m}：至少匹配n次，至多匹配m次。

定位符

^：匹配输入字符串的开始位置。

$：匹配输入字符串的结束位置。

\b：匹配一个单词边界，即字与空格间的位置。

\B：非单词边界匹配。

选择符

|：匹配符号左边的子表达式或右边的子表达式。

反向引用

\n：n是正整数，引用第n个括号匹配的子字符串。

分组和捕获

(exp)：匹配exp并捕获文本到自动命名的组里。

(?:exp)：匹配exp但不捕获匹配的文本。

(?<name>exp)：匹配exp并捕获文本到名称为name的组里，在JavaScript中不适用。

(?=exp)：匹配exp前面的位置。

(?!exp)：匹配后面跟的不是exp的位置。

特殊字符

\：将下一个字符标记为特殊字符或原义字符。

.：匹配除换行符以外的任意字符。

\d：匹配一个数字字符。等价于[09]。

\D：匹配一个非数字字符。等价于[^09]。

\w：匹配包括下划线的任何单词字符。等价于[AZaz09_]。

\W：匹配任何非单词字符。等价于[^AZaz09_]。

\s：匹配任何空白字符，包括空格、制表符、换页符等等。等价于[ \f\n\r\t\v]。

\S：匹配任何非空白字符。等价于[^\f\n\r\t\v]。

[...]：匹配方括号内的任意一个字符（字符类）。

[^...]：匹配不在方括号内的任意一个字符（否定字符类）。

Unicode属性

\p{P}：匹配任何标点符号。

\P{P}：匹配任何非标点符号。

\p{L}：匹配任何字母。

\P{L}：匹配任何非字母。

断言

(?=exp)：正向先行断言，匹配exp前面的位置。

(?!exp)：负向先行断言，匹配后面跟的不是exp的位置。

(?<=exp)：正向后行断言，匹配exp后面的位置（JavaScript不支持）。

(?<!exp)：负向后行断言，匹配前面不是exp的位置（JavaScript不支持）。

控制字符

\cX：匹配控制字符^X。

Unicode字符

\uHHHH：匹配一个四位数的Unicode字符。

杂项

\n：匹配换行符。

\r：匹配回车符。

\t：匹配制表符。

\v：匹配垂直制表符。

\f：匹配换页符。

\0：匹配空字符。

就这还只是冰山一角呢，反正我没有能力全部背下来，而且用的时候还用的很顺手，这里我也简单举个例子，放点代码这里，便于实际理解

<!DOCTYPE html>
<html>
<head>
    <title>JS正则表达式应用演示1</title>
</head>
<body>

<h1>检测字符串中是否包含数字</h1>

<p id="demo1"></p>

<script>
    var str = "Hello World!";
    var pattern = /\d/; // 检测任何数字
    var result = pattern.test(str);
    document.getElementById("demo1").innerHTML = "字符串中包含数字: " + result;
</script>

</body>
</html>

（4）、关于如何将事件和元素绑在一起的问题

最最常用的就是直接写在元素里边，举个例子，在<script>里边，function了一个函数，那肯定是有名字的，可以参考前边的代码哈，然后比如点击触发那就是<button click=functionname>functionname就是函数名字的意思，然后就绑定到元素上了，如果说需要考虑用户（前边提到过，就是使用页面的人，甚至可以和写页面的是同一个）输入的话，函数加上参数就可以了function(){}，()里边写的是参数，{}里边写的是触发的事件，什么事件随便好了，想得到想不到的，代码基本都能做到，当然了，要实现的效果越花哨，需要的代码越多，相对就会越难一点，编码的过程，行话叫做“开发”。

（5）、涉及到系统开发的一些内容

上边内容没有交代完，是脱离后端代码的部分，其余还有一些点，要涉及到后端的代码，这里交代出来也没什么用，比如元素的父子级链接和操作，Location对象封装浏览器信息，WebStoRage=LocalStorage+sessionStorage等等，这些要结合后端的一些概念一起理解的，所以这类不啰嗦了，哪天有时间把后端啰嗦了，到时候一起啰嗦了。正文到这里就结束了。

最后，我还是每篇都要“狗叫”一下，所谓的程序员，所谓的编码，是什么很难理解的事情吗，那几个同事，SpringBoot框架也就那一般般水平，怎么那么骄傲啊，那么觉得高人一等啊，那么嚣张呢“也不看看我简历比你长两页”,那倒是多干点活儿呀，能者多劳嘛，有的时候多点几下鼠标的事，宁肯钉钉找过来打好多个字也不愿意多点几下鼠标，真的去他的吧！！！最恶心的是，有一次关于公司使用产品的一个小功能，一个同事教了我一顿，说要多用，一周之后，同样的那个小功能，另外一个同事又教了我一顿，说那是不对滴（特么的，三十多岁的大男人，在那儿，不对滴~），叫我不该那么用，我两边都说好的！！两边都是一句话没多说。太狗血了！

上边的举例也比较少，有不对的地方也是欢迎各位大佬交流学习的哦！