前言
版权声明：本文为本博主在CSDN的原创文章搬运而来，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/weixin_72543266/article/details/132615308
本系列文章是对自己大一假期学习js后，是对自己学习js过程中的一些理解和看法，本篇文章主要是对学习JavaScript后我们可以去做一些什么事情，算是对js有一个初步了解。
当然本章中的示例，我是在IJ中编写代码，所以我会先介绍一下如何在IJ中编写JavaScript。当然学习之前需要有HTML和CSS代码的基础
思维导图
1，下载和安装Node.js
1.1，为什么下载？
IJ在下载后会自带一个插件Node.js,但是并没有进行js的解释器配置，会导致无法运行js代码
编辑
1.2，如何下载？
1.2.1，下载
这里我们点击下面的链接，推荐下载稳定版(红圈)
1.2.2，下载过程中的注意事项
中间没有什么需要配置的主要就是一直下一步,中间出现四个条款时选择最后一个，最后一个会将系统变量直接添加到环境变量path中，省略了我们需要配置环境变量的过程。
下载后我们自行安装到一个能记住的位置，不推荐C盘,注意安装时，会出现推荐安装npm的软件包管理器，点击安装即可
然后，我们依次在IJ中点击左上角的文件 -->然后点击设置-->先点击语言与框架-->然后点击Node.js和NPM，最后我们选择自己安装自定义安装的node.js中的node.exe文件即可
2，js的介绍
JavaScript 是一种高级、动态、弱类型的编程语言，广泛用于前端开发。它为网页增加了交互性和动态功能，可以通过在网页中嵌入 JavaScript 代码来控制 HTML 元素、响应用户操作、操作浏览器对象等。JavaScript 被所有现代浏览器支持，它也可以用于服务器端开发（Node.js）。 JavaScript 语法简单而灵活，可以实现各种功能，从简单的表单验证到复杂的应用程序。它还有各种库和框架，如React、Vue和Angular，进一步扩展了它的功能和用途。总体而言，JavaScript 是现代 Web 开发中不可或缺的一部分。
3，直接写入 HTML 输出流
3.1，IJ中如何操作
编写完代码，我们只需要，点击红圈中的任意一个浏览器或IJ图表即可打开页面
编辑
3.2，代码示例解读
我们先了解怎么使用，怎么操作，后续在练习和使用过程中会慢慢理解为什么这样可以。
我们可以通过document.write()直接向浏览器页面输出文字，并且输出中含有HTML标签的话，浏览器会自动解析，并将其展示出来。
<html lang="en"> <head> <meta charset="UTF-8"> <title>输出信息</title> </head> <body> <p>js能够直接写入HTML输出流</p> <script> // 使用document.write进行输出文字到页面 document.write("<h1>这是一个标题</h1>"); document.write("<p>这是一个段落。</p>"); </script> <p>你只能在HTML流中使用<strong>document.write()</strong> 如果你在文档已加载后使用它(比如在函数中)，会覆盖整个文档。 </p> </body> </html>
3.3，结果展示
我们会发现，浏览器确实解析了h1标签和strong标签
4.对事件的反应
4.1代码示例解读
这里主要是使用了一个创建按钮的标签<button>
onclick作用就是提供一个交互作用，现在我们是在按钮中，那么我们点击按钮就会调用它所绑定的方法或函数，如果是图片或是其他的也是这种情况，是比较常用的一种。
其中的有一个js全局方法alert()，作用是在被调用后会在浏览器页面出现一个简单的警告或通知信息
<html lang="en"> <head> <meta charset="UTF-8"> <title>点击反应</title> </head> <body> <h1>我的第一个js反应</h1> <p>js能对事件进行反应，比如说是对按钮的点击</p> <!--创建按钮然后通过alert弹窗弹出文本--> <button type="button" onclick="alert('欢迎来到我的世界!')">点我!</button> </body> </html>
4.2，结果展示
这里我们们点击按钮后就会出现图片中显示的警告框。
5.改变 HTML 内容
5.1，代码示例解读1
和上面的示例一样用到了常用的按钮创建标签，并且将我的函数进行绑定，点击按钮后就会调用这个函数，然后执行这个函数中的内容。
其中用到了一个 document.getElementById("demo").innerHTML="Hello js!";
我们拆解一下document.getElementById("demo")，是用于获取id含有demo的元素，而代码中<p>标签中含有，那么我们调用函数后就会对<p>标签的内容进行作用。
后面的.innerHTML="Hello.js!"; 也是一种方法，将获取id元素进行改变为Hello.js。
<html lang="en"> <head> <meta charset="UTF-8"> <title>改html的内容</title> </head> <body> <h1>我的第一段js代码</h1> <p id="demo">js能够改变html元素的内容</p> <!--创建按钮调用函数--> <button type="button" onclick="myFunction()">点击这里！</button> <script> function myFunction(){ document.getElementById("demo").innerHTML="Hello js!"; //点击后获取demo元素的标签，然后将其文本替换 } </script> </body> </html>
5.2，结果展示1
这里点击按钮后就会<p>标签中的js能够改变html元素的内容信息改为Hello.js.
5.3， 代码示例解读2
这里就有有一个方法要说，就是Date(),这个方法是js中的一个获取时间和日期的方法，我们让更改的信息改为Date()
<html lang="en" xmlns="http://www.w3.org/1999/html"> <head> <meta charset="UTF-8"> <title>测试用例</title> </head> <body> <script> // 定义一个展示日期的函数 function displayDate(){ //使用getElementById方法获取demo（id）的元素，然后用用.innerHTML将含有demo元素的标签的内容设置为Date document.getElementById("demo").innerHTML=Date(); } </script> <h1>这是一个显示时间的简单js程序</h1> <!--被修改的信息--> <p id="demo"></p> <!--创建一个绑定显示日期与时间的函数的按钮--> <button type="button" onclick="displayDate()">显示时间与日期</button> </body> </html>
5.4，结果展示2
这里点击按钮后就会出现实时的日期与时间
6.1，代码实例解读
这里我们再次用到了onclick()这个方法，而这次将其应用到了图片中，所以，点击图片会调用函数。
这里我们分析这段方法，先是获取id元素然后赋值给了element，然后使用了一个element.src.match(),这个方法的作用是去判断图片的src，图片名中是否含有bulbon这个字符串，如果有，那么就会切换为另一张图片。
<html lang="en"> <head> <meta charset="UTF-8"> <title>点亮灯泡</title> </head> <body> <script> //创建改变图像函数 function changeImage(){ const element=document.getElementById("myimage"); // 先获取图像元素 if(element.src.match("bulbon")) { //使用获取到的id元素的src中的字符串中是否含有bulbon字符串 element.src="pic_bulboff.gif"; // 将另一图片地址赋值给element中的src，然后出现切换图片 } else{ element.src="pic_bulbon.gif"; } } </script> <img id="myimage" onclick="changeImage()" src="pic_bulboff.gif" width="100" height="180" alt="灯泡图"> <p>点击灯泡就可以开启和关闭灯泡</p> </body> </html>
6.2，结果展示
这里点击灯泡就可以开关灯泡，这也是一种视觉欺骗吧，本质就是切换一下图片
7，改变 HTML 样式
7.1，代码实例解读
这里的大部分函数和标签都在前说过了，使用x.style.color这也是js中的以一种方法，是为了将id为demo的元素的颜色将其改变。
<html lang="en"> <head> <meta charset="UTF-8"> <title>改变字体颜色</title> </head> <body> <h1>我的第一段改变样式的代码</h1> <p id="demo">js能够改变html的样式</p> <!--创建按钮并绑定改变函数--> <button type="button" onclick="myFunction()">点击这里!</button> <script> function myFunction(){ const x = document.getElementById("demo"); //找到元素 x.style.color="#00ccff"; //改变样式 } </script> </body> </html>
7.2，结果展示
点击按钮前后
8，验证输入
8.1，代码实例解读
这里我们使用了一个输入框标签input，会出现一个输入框，我们让js中的方法获取输入框中输入的文本信息的值. (.value)
然后我们创建一个按钮去控制方法的调用，其中会用x判断是否为空串，中间用的是||代表式或的意思，只要满足一个就会执行下面的代码，然后会判断是否为数字(isNaN)
注释部分为使用正则表达式判断进行，如果懂的可以看看，下面的判断方法更加严谨
<html lang="en"> <head> <meta charset="UTF-8"> <title>验证是否数字</title> </head> <body> <h1>我的第一个验证程序</h1> <p>请输入数字，如果不是数字会弹出提示框</p> <!--创建输入信息框--> <input id="demo" type="text"> <script> function myFunction(){ const x =document.getElementById('demo').value; //获取 id 为 “demo” 的元素的值，并将其赋值给变量 x //首先判断 x 的值是否为空字符串 ""，如果是则执行下面的代码,如果 x 不为空字符串，再判断 x 的值是否为非数值（NaN），如果是，则执行下面的代码。 if(x==""||isNaN(x)){ alert("不是数字！！！") } //使用正则进行判断可以更好的进行判断 // if(isNaN(x)||x.replace(/(^\s*)|(\s*$)/g,"")==""){ // alert("不是数字"); // } } </script> <!--创建一个按钮，绑定函数，进行验证操作--> <button type="button" onclick="myFunction()">点击这里</button> </body> </html>
8.2，结果展示
输入数字，点击按钮不会产生弹窗
输入其他符号会，出现弹窗
9，总结
本章主要是对js初学者，对于js的使用方向有一个初步了解，同时也是对我学习过程中的一中记录，也是同这些实例的练习，然后对于js有了更加清晰的了解，对于我来说，可玩性更高了。
每日一言
如果你只读每个人都在读的书，你也只能想到每个人都能想到的事。
如果我的学习笔记对你有用，不妨点赞收藏一下，感谢你的支持，当然也欢迎大佬给我一下建议或是对笔记中的不足进行补充，对我学习大有帮助，谢谢。
