Javascript学習1週間

33899 ワード
JavaScript 検索 テキストリンク
8月からはイケメン戦士フロントでJavaScriptを勉強…今週は最初の週です.
以前ハッカーの口調やプロジェクトをしていたとき、メンバーがjsで気まずい思いをしていたことに気づき、何なのか気になりました.
でも今はそれを学びます努力しなければならない.
まず今週.
✔¥ААААААААААААААА\1040
ААААААААААААА
この任務だ本当に何を言っているのか全然分かりません.少し鳥肌が立ったそして実は今使っているベルの音も何なのか分からない.8月が終わる頃にはよくわかるでしょうが・・・
まずノーソンで講義を見て、勉強しました.先生はよく教えてくれました.でも分からないでも頑張った...週末はもう2回見ないと80%理解できません.週末は必ず見ます.
まず勉強の内容で仕事をした.しかし、これまでjsについてよく知らなかった部分がグーグルでたくさん検索されました.
まずはライトモード!

ぼろぼろに見えるので書体を変えておばさんの地図も置いてありました.
そしてダークモード.

本来ダークモードだとやる気があるはずなのに、ちょっとボロ.さらに発展する.
このサイトは、以下のリストの動物を検索するサイトです.「d」を検索ウィンドウに入力すると、次の画面が表示されます.

この部分はちょっと難しいです.次の故障シュート欄に何か問題がありますか.
これで1週間目の任務は完成したしかし、解決されていない問題は多い.
[🌈必要な質問
❗ボタンを押すたびに、ボタンのフォントや色も変わります(たとえば、現在のモードが「光源」であればボタン文字は「暗」、現在のモードが「暗」であればボタン文字は「光」となります).
個々に保存するのではなく、異なる方法で動物のリストを保存する方法について説明します.
❗ダークモード切り替えの場合、タイトル色と背景色の変更方法について
「100」リストの順序を1つずつ指定するのではなく、昇順、降順関数の使用方法について説明します.
[🌈問題シュート
❗最初の画面で、中間のリストに検索語を入力すると左に移動します.
->value、cssを使用してlistの値をcenterに配置して解決
❗検索ウィンドウに「d」と入力すると、dを含む動物のリストが必要になりますが、元の場所で出力される現象が見つかりました
->リスト内の改行タグをクリアする
次にコードです.
まずはhtml!
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>search_ms</title>
    <link rel="stylesheet" href="search.css">
    <script type="text/javascript">
      function filter(){

        var value, name, list, i;

        value = document.getElementById("value").value.toUpperCase();
        list = document.getElementsByClassName("list");

        for(i=0;i<list.length;i++){
          name = list[i].getElementsByClassName("name");
          if(name[0].innerHTML.toUpperCase().indexOf(value) > -1){
            list[i].style.display = "flex";
          }
          else{
            list[i].style.display = "none";
          }
        }
      }
      // 다크모드, 라이트모드 코드

        function BodySetColor(color){
            document.querySelector('body').style.color = color;
        }

        function BodySetBackgroundColor(color){
            document.querySelector('body').style.backgroundColor = color;
        }

        function day_night_handler(self) {
            var target = document.querySelector('body');
            if (self.value == 'light') {
                BodySetBackgroundColor('black');
                BodySetColor('white');
                self.value = 'dark';
            }
            else {
                BodySetBackgroundColor('white');
                BodySetColor('black');
                self.value = 'light';
            }
        }
    </script>
    <style>
      h1 {text-align: center;}
    </style>
</head>
</script>
</head>
<body>
    <div class="searchbox">
      <div class="header">
         <br><h1>🙈 동물을 검색 🐹</h1>
         <div class="btn">
         <input type="button" class="btn" value="light" onclick="day_night_handler(this)">
        </div><br><br>
      </div><br>
      <div class="searchh">
        <input onkeyup="filter()" class="in" type="text" id="value" placeholder="동물을 영어로 입력해 주세요">
      </div><br>
 
       <div class="container">

          <div class="list">
            <span class="name">Wolf</span>
          </div>

          <div class="list">
            <span class="name">Tiger</span>
          </div>

          <div class="list">
            <span class="name">Rabbit</span>
          </div>

          <div class="list">
            <span class="name">Panda</span>
          </div>

          <div class="list">
            <span class="name">Monkey</span>
          </div>

          <div class="list">
            <span class="name">Lion</span>
          </div>

          <div class="list">
            <span class="name">Koala</span>
          </div>

          <div class="list">
            <span class="name">Hamster</span>
          </div>

          <div class="list">
            <span class="name">Giraffe</span>
          </div>

          <div class="list">
            <span class="name">Dog</span>
          </div>

          <div class="list">
            <span class="name">Cat</span>
          </div>

          <div class="list">
            <span class="name">Bird</span>
          </div>

       </div>
     </div>
 </body>
 </html>입력하세요
そしてcssコード!!
@font-face {
    font-family: 'ONE-Mobile-POP';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/[email protected]/ONE-Mobile-POP.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

* {
    margin: 0;
    padding: 0;
}   

.btn {
    text-align: right;
    margin-right: 20px;
}

.searchh {
    text-align: center;
}

.in {
    font-family: 'ONE-Mobile-POP';
    width: 300px;
    height: 50px;
    text-align: center;
    font-size: 20px;
    border: 2px solid cornflowerblue;
    border-radius: 15px;
}


.list {
    font-family: 'ONE-Mobile-POP';
    text-align: center;
    margin: 15px;
}

.header {
    font-family: 'ONE-Mobile-POP';
    background-color: rgb(93, 160, 180);
    width: 100%;
}

.body {
    font-family: 'ONE-Mobile-POP';
}

.value, .list {
    text-align: center;
    justify-content: center;
}
第1週目のJavaScript学習はこれで終わりです...👋🏻
TIL 13日目データ型、スキャン、エンクロージャ
細かく見るあなたのコード:非同期メッセージ処理