Web言語マスター復活への道/12日目

alice

昨日朝からはじめて、この先どうしようって考えてたら次の日。。😪

目標

・jQuery完了

本日の作業

・エラーチェック
submitイベントを利用して、フォーム送信前にチェックすることができる。このコードは書いててわかりやすかったです。

index.html

<!DOCTYPE html>
<html lang="ja">

<head>
   <meta charset="utf-8">
   <title>JavaScript</title>
   <link rel="stylesheet" href="index.css">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
   <script src="main.js"></script>
</head>

<body>
   <form class="my-form" action="" method="post">
       パスワード
       <p>
           <input type="password" class="pass1">
       </p>
       <p>
           <input type="password" class="pass2">
       </p>
       <p>
           <input type="submit" value="送信">
       </p>
       <p class="error"></p>
   </form>
</body>

</html>

index.css

.error {
   color: red;
}

main.js

$(document).ready(function () {
   $(".my-form").submit(function () {
       var p1 = $(".pass1").val();
       var p2 = $(".pass2").val();
       if (p1 !== p2) {
           $(".error").html("不一致");

           return false;
       }

   });
});

結果

画像1


表示切替
.toggleで表示を出したり消したり。

index.html

<!DOCTYPE html>
<html lang="ja">

<head>
   <meta charset="utf-8">
   <title>JavaScript</title>
   <link rel="stylesheet" href="index.css">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
   <script src="main.js"></script>
</head>

<body>
   <button type="button" class="button">test</button>
   <div class="box">テスト</div>
</body>

</html>

main.js

$(document).ready(function () {
   $(".button").click(function () {
       $(".box").toggle();
   });
});

結果

画像2

画像3


ページトップへ戻る方法

index.html

<!DOCTYPE html>
<html lang="ja">

<head>
   <meta charset="utf-8">
   <title>JavaScript</title>
   <link rel="stylesheet" href="index.css">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
   <script src="main.js"></script>
</head>

<body>
   <div class="box">テスト</div>
   <a href="#" class="back-to-top">上</a>
</body>

</html>

index.css

.box {
   height: 5000px;
}


.back-to-top{
   position: fixed;
   bottom: 20px;
   right: 20px;

   color: white;
   background-color: blue;

}

main.js

$(document).ready(function () {
   $(".back-to-top").click(function () {
       $("html, body").animate(
           {
               scrollTop: 0
           },
           600
       );

   });
});

結果

画像4


​所感

他にもオプションがいくつかあって、タブは近々やる予定です。
この後の勉強方法ですが、少し悩んでいて、そのままvue.jsなどやるか、もしくは自作で環境作りながら進めるか、といった2択になります。おそらくですが、このまま勉強していくと、いつ仕事にありつけるの？という趣味の領域から出ない状態になりかねないため、8月中旬には応募できるステータスでいたいです。完成物がほしいです。
スキル的にサーバーサイドがいけそうなので、node.jsをやるか、、といったところでしょうか。

この記事が気に入ったらサポートをしてみませんか？