专业编程基础技术教程

网站首页 > 基础教程 正文

第14天|16天搞定前端，Javascript，要你何用?

ccvgpt 2024-11-21 11:03:31 基础教程 7 ℃

不止有一个人问我Javascript和java有什么关系？我不止一次回答过，没有关系，没有关系，没有任何关系。只是名字中都有java这4个字母而已。

JavaScript 是 Web 的编程语言，所有现代的 HTML 页面都使用 JavaScript；Java是一门面向对象编程语言，可以编写桌面应用程序、Web应用程序、分布式系统和嵌入式系统应用程序。

第14天|16天搞定前端，Javascript，要你何用?

我们现在学习前端，当然要学会Javascript(简称Js)了，至于Java，后期有时间的话，再进行详细地讲解。

14.1 Js有什么用

JavaScript 是一种轻量级的编程语言，可以对用户的操作进行反应；可以验证表单输入的内容；可以改变HTML内容；可以更换HTML图像；可以改变CSS样式等等。如果HTML是名词，CSS是形容词，那么Js就是动词。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Javascript来也</title>
    <style>
        .btn1 {
            background-color: #4CAF50; /* Green */
            border: none;
            color: white;
            padding: 16px 32px;
            font-size: 16px;
        }

        .btn2 {
            background-color: #008CBA;
            color: white;
            border: none;
            padding: 16px 32px;
            font-size: 16px;
        }
    </style>
    <script>
        function changeStyle() {
            document.getElementById("btn2").style.background = "darkgreen";
        }
    </script>
</head>
<body>
<button class="btn1" onclick="alert('你胆子真大，竟然敢点我');">响应事件</button>
<button id="btn2" class="btn2" onclick="changeStyle();">改变样式</button>
</body>
</html>

输出结果(录了操作过程)

14.2 Js在HTML中

同CSS一样，也是有3种方法，同HTML 页面进行衔接。可在HTML标签中，直接调用；可在<head></head>之间的<script></script>编写脚本内容；还可以放在js文件中并通过<link>引入。

前两种方法，在上一个例子已经说过，这里说一下外部文件的方式。在HTML同目录下，新建check.js文件。

在check.js文件中的代码，在Js中，单行注释以 // 开头，多行注释以 /* 开始，以 */ 结尾。

// 非空校验
function check() {
    let name = document.forms["form"]["account"].value;
    let pwd = document.forms["form"]["pwd"].value;
    if (null == name || name.trim() == "") {
        alert("账号不能为空，请输入!");
        return false;
    }
    if (null == pwd || pwd.trim() == "") {
        alert("密码不能为空，请输入!");
        return false;
    }
    alert("恭喜你，登录成功!")
}

HTML文件代码，为了提高表单颜值，我特意配了效果。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>引入js文件</title>
    <script type="text/javascript" src="check.js"></script>
    <style>
        .btn-div {
            width: 250px;
            text-align: center;
            vertical-align: center;
            line-height: 30px;
        }

        .login {
            background-color: #4CAF50; /* Green */
            border: none;
            color: white;
            padding: 8px 32px;
            font-size: 16px;
            margin-top: 15px;
        }

        .reset {
            background-color: gray;
            color: white;
            border: none;
            padding: 8px 32px;
            font-size: 16px;
            margin-top: 15px;
        }

        input {
            border: 1px solid darkcyan;
            line-height: 25px;
            width: 200px;
            color: #000;
            font-weight: bold;
            margin-top: 5px;
        }
    </style>
</head>
<body>
<form name="form" action="#" onsubmit="return check()" method="post">
    账号：<input type="text" name="account"/><br/>
    密码：<input type="password" name="pwd"/><br/>
    <div class="btn-div">
        <button class="login" type="submit">登录</button>
        <button class="reset" type="reset">重置</button>
    </div>
</form>
</form>
</body>
</html>

输出结果(录了操作过程)

好了，有关Javascript作用的内容，老陈讲完了，如果觉得对你有所帮助，希望老铁能转发点赞，让更多的人看到这篇文章。你的转发和点赞，就是对老陈继续创作和分享最大的鼓励。

一个当了10年技术总监的老家伙，分享多年的编程经验。想学编程的朋友，可关注今日头条：老陈说编程。分享Python，前端(小程序)、App和嵌入式方面的干货。关注我，没错的。

#前端##HTML5##JavaScript##程序员##Web#

Tags：

猜你喜欢

最近发表
标签列表