JavaScript初学

最新推荐文章于 2024-11-12 11:19:19 发布

XError＿xiaoyu

最新推荐文章于 2024-11-12 11:19:19 发布

阅读量510

点赞数 1

分类专栏：编程学习专栏文章标签： javascript 前端开发语言笔记学习

本文链接：https://blog.csdn.net/weixin_72543266/article/details/132615308

版权

编程学习专栏专栏收录该内容

31 篇文章 1 订阅

订阅专栏

前言

本系列文章是对自己大一假期学习js后，是对自己学习js过程中的一些理解和看法，本篇文章主要是对学习JavaScript后我们可以去做一些什么事情，算是对js有一个初步了解。

当然本章中的示例，我是在IJ中编写代码，所以我会先介绍一下如何在IJ中编写JavaScript。

当然学习之前需要有HTML和CSS代码的基础

思维导图

1，下载和安装Node.js

1.1，为什么下载？

IJ在下载后会自带一个插件Node.js,但是并没有进行js的解释器配置，会导致无法运行js代码

1.2，如何下载？

1.2.1，下载

这里我们点击下面的链接，推荐下载稳定版(红圈)

节点.js (nodejs.org)https://nodejs.org/en

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标签的话，浏览器会自动解析，并将其展示出来。

<!DOCTYPE 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()，作用是在被调用后会在浏览器页面出现一个简单的警告或通知信息

<!DOCTYPE html>
<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。

<!DOCTYPE html>
<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()

<!DOCTYPE html>
<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，改变 HTML 图像

6.1，代码实例解读

这里我们再次用到了onclick()这个方法，而这次将其应用到了图片中，所以，点击图片会调用函数。

这里我们分析这段方法，先是获取id元素然后赋值给了element，然后使用了一个element.src.match(),这个方法的作用是去判断图片的src，图片名中是否含有bulbon这个字符串，如果有，那么就会切换为另一张图片。

<!DOCTYPE html>
<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的元素的颜色将其改变。

<!DOCTYPE html>
<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)

注释部分为使用正则表达式判断进行，如果懂的可以看看，下面的判断方法更加严谨

<!DOCTYPE html>
<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>