ド素人のドリルとメモ

ド素人の個人的なメモです。


     https://qiita.com/tochiji/items/4e9e64cabc0a1cd7a1ae



     'use strict';
    {
      const point = {
        x: 100, 
        y: 180,
      };

    //keysでオブジェクトを配列に変換できる

      // const keys = Object.keys(point);
      // keys.forEach(key => {
      //   console.log(`Key: ${key} Value: ${point[key]}`);
      // });

      const points = [
        {x: 30, y: 20},
        {x: 10, y: 50},
        {x: 40, y: 40},
      ];
      console.log(points[1].y);
    }



    'use strict';

    {
      const otherProps = {
        r: 4,
        color: 'red',
      };

      const point = {
        x: 100, 
        y: 180,
        ...otherProps, 
      };
      // console.log(point);

      const {x, r, ...others} = point;
      console.log(x);
      console.log(r);
      console.log(others);



    'use strict';

    {
      const point = {
        x: 100,
        y: 180,
      };

      point.x = 120;
      // point['x'] = 120;

      // console.log(point.x);
      // console.log(point['y']);

    //zを追加したいとき↓
      point.z = 90;
    //yをデリートしたいとき↓
      delete point.y;
      console.log(point);

    配列の左にさらにXとYをつけたいとき

     'use strict';
    {
      // const point = [100, 180];

      // const point = {x: 100, y: 180};
      const point = {
        x: 100,
        y: 180,
      };
      console.log(point);
    }



    'use strict';

    {
      const numbers = [1, 4, 7, 8, 10];

      // const evenNumbers = numbers.filter(number => {
      //   if (number % 2 === 0) {
      //     return true;
      //   } else {
      //     return false;
      //   }
      // });

      const evenNumbers = numbers.filter(number => number % 2 === 0);

      console.log(evenNumbers);

    配列の各要素に何らかの処理をして別の配列を作りたい場合は map() が便利なので覚えておくと良いでしょう。

    'use strict';

    {
      const prices = [180, 190, 200];

      // const updatedPrices = prices.map((price) => {
      //   return price + 20;
      // });

      const updatedPrices = prices.map(price => price + 20);
      console.log(updatedPrices); 

    'use strict';

    {
      const scores = [80, 90, 40, 70];

      // scores.forEach((score) => {
      scores.forEach((score, index) => {
        console.log(`Score ${index}: ${score}`);
      });
    }

    'use strict';

    {
      const scores = [80, 90, 40, 70];

      // const [a, b, c, d] = scores;
      // console.log(a);
      // console.log(b);
      // console.log(c);
      // console.log(d);

      // const [a, b, ...others] = scores;
      // console.log(a);
      // console.log(b);
      // console.log(others);

      let x = 30;
      let y = 70;
      [x, y] = [y, x];
      console.log(x);
      console.log(y);
    }

    'use strict';

    {
      const otherScores = [10, 20];
      const scores = [80, 90, 40, 70, ...otherScores];
      // console.log(scores);

      function sum(a, b) {
        console.log(a + b);
      }

      sum(...otherScores);
      // sum(10, 20);
    }




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

    <head>
        <meta charset="utf-8">
        <title>JavaScript Basics</title>
    </head>

    <body>
        <script>
            'use strict';

            for (let i = 1i <= 10i++) {
                // if (i === 4) {
                // if (i % 3 === 0) {
                //   continue; 4のみ外す
                // }
                if (i === 4) {
                    break// 4で処理を止める
                }
                console.log(i);
            }
        </script>
    </body>

    </html>




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

    <head>
        <meta charset="utf-8">
        <title>JavaScript Basics</title>
    </head>

    <body>
        <script>
            'use strict';

            for (let i = 1i <= 10i++) {
                // console.log('hello');
                // console.log('hello' + i);
                console.log(`hello ${i}`);
            }
        </script>

    </body>

    </html>




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

    <head>
        <meta charset="utf-8">
        <title>JavaScript Basics</title>
    </head>

    <body>
        <script>
            const score = 65;
            score >= 70 ? console.log('great!') : console.log('OK');
        </script>

    </body>

    </html> 

    padStartメソッド

    変数 = 文字列.padStart(文字列の長さ[,埋める文字]);
    • 引数の文字列の長さまで引数の文字を頭(先頭)に埋めます。
    • padは、詰め物という意味です。
    • IEは未対応です。

    padStartメソッドで、頭ゼロをつけるサンプルです。

    <script>
    
    	const str1 = "9"
    	console.log(str1.padStart(3, "0")); // 009
    	console.log(str1.padStart(5, "0")); // 00009
    
    	const str2 = "90"
    	console.log(str2.padStart(3, "0")); // 090
    	console.log(str2.padStart(5, "0")); // 00090
    
    </script>


    https://dekiru.net/article/13234/


    フレックスアイテムの折り返しを指定する

    flex-wrap

    flex-wrapフレックス・ラップ : 折り返し; }

    flex-wrapプロパティは、フレックスアイテムの折り返しを指定します。また、折り返す場合の方向も指定できます。

    初期値nowrap
    継承なし
    適用される要素フレックスコンテナ
    モジュールCSS Flexible Box Layout Module Level 1

    値の指定方法

    折り返し

    nowrapフレックスアイテムは折り返されず、1行で表示されます。
    wrapフレックスアイテムは折り返され、複数行で表示されます。通常は上から下に折り返され、2行目以降のアイテムは左から右に配置されます。
    wrap-reverseフレックスアイテムは折り返され、複数行で表示されます。ただし、wrapとは逆に、下から上に折り返されます。
     

    getMonth()は +1 をせないかん。

    <!DOCTYPE html>

    <html lang="ja">

    <head>
        <meta charset="UTF-8">
        <title>今日の日付</title>
    </head>

    <body>

        <div>
            <script>
                var today = new Date();
                var todayHtml = today.getFullYear() + '/' + (today.getMonth() + 1) + '/' + today.getDate();
                document.write('<p>' + todayHtml + '</p>');
          // getMonth() は +1 をせないかん     
         
            </script>
        </div>

    </body>

    </html> 


                 // 入力が空か確認
                var checkBlank = function() {
                    // 入力欄が空か確認
                    if ($("#name").val() == "") {
                        alert("[名前]が空です。");
                        return true;
                    }
                    if ($("#free").val() == "") {
                        alert("[自由記入]が空です。");
                        return true;
                    }

                    // ラジオボタンが選択されていないか確認
                    if ($("input[name=sex]:checked").val() === undefined) {
                        alert("[性別]が選択されていません。");
                        return true;
                    }

                    // セレクトが選択されていないか確認
                    if ($("#lst").val() === null) {
                        alert("[リスト]が選択されていません。");
                        return true;
                    }

                    // 問題なし
                    return false;
                };

                // [Submit]ボタンにイベントを登録
                $("#f").submit(function() {
                    var isBlank = checkBlank();
                    if (isBlank) {
                        console.log("stop");
                        return false;
                    }
                });
            });
        </script>

    変数指定して取り出す
     
                var copyRadio = function() {
                    // チェックされている値を取得
                    var sex = $("input[name=sex]:checked").val();

                    // チェックを反映
                    $("input[name=sex2]").val([sex]);

                    // コンソールに出力
                    console.log("radio"sex);
                };

    addEventListenerメソッドで検知できるイベント

    イベント名イベント発生条件
    clickマウスでクリックしたとき
    mouseoverマウスカーソルを重ねたとき
    keydownキーボードのキーを押したとき
    load読み込みが完了したとき

    ● currentregionメソッド
      任意のセルが含まれている塊!
    CTRL +  SHIFT + * を押した範囲

    http://officetanaka.net/excel/vba/cell/cell10.htm

    ● intersect メソッド

    Sub Sample2()
        Dim DataTable As Range
        Set DataTable = Range("A1").CurrentRegion → A1を含む塊

        Intersect(DataTable, DataTable.Offset(1, 0)).Select

    End Sub

    ● UNION メソッド
    複数セルを選択

    Sub Sample5()
        Dim Target As Range
        Set Target = Union(Range("A1"), Range("B3"))
        Set Target = Union(Target, Range("C5"))         a1とb3とc5を選択
        Target.Select
    End Sub

    1行ごとに色をつける

    Sub 隔行色設定()

        Dim i As Integer
        Range("A4:D53").Interior.ColorIndex = xlNone
        For i = 4 To 53 Step 2 ※ step のあとの数字は、○行ごとという意味
            Range("A" & i).Resize(1, 2).Interior.ThemeColor = xlThemeColorAccent1 ※resizeの後のは、列の長さを決めるやつ
            Range("A" & i).Resize(1, 2).Interior.TintAndShade = 0.8
        Next
    End Sub

    Sub さまざまな割り算()
     ' 割り算の余りを求める
     Range("A1").Value = 5 Mod 2

     ' 割り算の商を求める
     Range("A2").Value = 5 \ 2

     ' 通常の割り算
     Range("A3").Value = 5 / 2

    End Sub


    ● 1行おきに異なる色を設定する。

    Sub 隔行色設定_応用1()
        Dim i As Integer
        Range("A4:D53").Interior.ThemeColor = xlThemeColorAccent1
        For i = 4 To 53
            If i Mod 2 = 0 Then ' mod は、割ったあまりを求めるやつ
                Range("A" & i).Resize(1, 4).Interior.TintAndShade = 0.8
            Else
                Range("A" & i).Resize(1, 4).Interior.TintAndShade = 0.4
            End If
        Next
    End Sub


    ● データの入力範囲を自動認識して1行おきに色を設定する。

    Sub 隔行色設定_応用2()
        Dim 最終行番号 As Long
        Dim i As Long
       
        最終行番号 = Range("A3").CurrentRegion.Rows.Count + 2  '2は、3行目から表が始まるので空白の2行をプラス
        Range("A4:D" & 最終行番号).Interior.ColorIndex = xlNone
        For i = 4 To 最終行番号 Step 2
            
            
            Range("A" & i).Resize(1, 4).Interior.ThemeColor = xlThemeColorAccent1
            Range("A" & i).Resize(1, 4).Interior.TintAndShade = 0.8
        
        
        Next
    End Sub

    xlContinuous 実線(細) 
    xlDash 破線 
    xlDashDot 一点鎖線 
    xlDashDotDot 二点鎖線 
    xlDot 点線 
    xlDouble 二重線 
    xlSlantDashDot 斜め斜線 
    xlLineStyleNone 無し 

    ● 5行単位で中罫線を点線にする

    Sub 中罫線変更()
        Dim i As Integer
        Dim 行間隔 As Integer
        行間隔 = 5
        Range("A3:D3").Borders.LineStyle = xlContinuous
        For i = 4 To 32 Step 行間隔
            Range("A" & i).Resize(行間隔, 4).Borders.LineStyle = xlContinuous
            Range("A" & i).Resize(行間隔, 4).Borders(xlInsideHorizontal).LineStyle = xlDot
        Next
    End Sub

    ● 3行おきに行を挿入する
    ※ やっぱり、下から

    Sub 空白行挿入_応用()
        Dim i As Integer
        For i = 52 To 4 Step -1
            Rows(i & ":" & i + 2).Insert
        Next
    End Sub

    ● 商品ごとに連番をふる

    sub renban()

    dim i as long, num as Long
    For i = 2 to 100

    If cells(i,2).value = cells(i - 1 , 2).value then
    num = num + 1
    else
    num = 1
    end if
    cells(i,m1).value = num

    ● 商品ごとのデータを別々のワークシートに貼り付ける

    sub shohin()

    dim data(1 to 4) as string '一気に1から4までのこういうdimができる!
    dim i as long
    Data(1) = "デスクトップ"
    Data(2) = "ノートパソコン"
    Data(3) = "プリンタ"
    Data(4) = "周辺機器"

    for i = 1 to 4
    range("A1").autofilter field:3, Criteria1:=Data(i) 'ここの数字を変える

    Range("A1").CurrentRegion.copy
    Worksheets(Data(i)).Range("A1")
    Next

    Active.Sheet.Range("A1").autofilter

    end sub

    ● セルの中の前の空白を削除する

    sub sample()
    dim target as range

    for each target in range("B2:B16")
    target.value = trim(target.value)

    next

    end sub

    TRIM → 前の空白を削除
    RTRIM → 後ろのスペースを削除

    データの種類を数える(count 関数)



    sub kaunto()
    dim target as range
    dim num as long

    for each target in range("B2:B500")
    if target.value = "田中" then
    num = num +1

    end if 
    next
    msgbox num & "人"

    end sub

    ● 重複しているデータを削除

    sub juhuku()

    range("A1:H100").removeduplicates _
    Array(1,2,3,4,5,6,7,8)

    end sub


    ● Findメソッドで検索

       dim myField as Range, my Range as Range
       set my field = _
         range("B3:H53).colums(2),cells (B3からH53の表の左から2行目の列全部。すなわち "C")
     set my range = _ 
       my field.find(what:="小町ストア",_
       lookat:=xlWhole → 全文同じ
     if myrange Is Nothing then 
          msgbox"対象なし"
          exit sub
       end if 
       msgbox "対象セイルのアドレスは"&myrange.address&"です。"出したいものは&で挟むらしい。

    ● 部分的に一致するセルを検索

       dim i as long
       for i =4 to 53
       if cells (i,3).value like "*ストア" then (部分的に検索するため→like .....
          .......................

    など。

    ● 最終行まで

    dim my table as range
           set my talbe  = range("B3:H53")

    dim i as long
          for i = 2 to my table. rows.count(2から最終行までという意味)

    など。

    ● オブジェクト型(range やobject)の場合は、宣言して変数指定する前にsetがいる。

    ● End プロパティ

    起点となるセル.End

    xldown 下方向
    XlUP 上方向
    xltoright 右方向
    xlToLeft 左方向

    【例】
    range ( range("B5").End(xltoright)).select → B5から右端のセルまで
     


    こうすると、奇数のもののみが選択

    $(".top").next().addBack(":odd");
     


    ↓index部分は、0から配列の数だけ増えていく。


    1. $('li').each(function(index, element) {
    2. console.log(index);
    3. console.log($(element).text());
    4.  
    5. })

    数字順に並ばせる

            var arr = [5234222];
            arr.sort(function(ab) {
                return a > b ? 1 : -1;
            });


            var arr = [5234222];
            arr.sort(function(ab) {
                return a - b;
            });


    .sort() は並べ替えのためのメソッド


    var status = (age >= 18) ? 'adult' : 'minor';

    ?の前の条件がtrue ならばadult、falseならばminor

    といった具合に書く
     


    <input   type  = ' radio '  id =  'sexMale'  name =  'sex'  value = 'male' /> 男性
    <input   type  = ' radio '  id =  'sexFemale'  name =  'sex'  value = 'female' /> 女性

    name の値が同じものがグループになってる。

    nameがsexで、かつチェックされている値を取得
    var sex =$('input [ name = sex ] : checked' ).val();

    name sex の値を違うところ( name sex2 など)で反映する場合
    $('input [ name = sex2 ] ).val( [sex] ); 
     
     


    <input type ='checkbox' id ='chck' name='ok' value='ok' checked />

    checkedはチェックボックスにチェックされてるかどうかを示す

    チェックされているかを取得
    var check =$('#chck').prop('checked');

    チェックのオンオフを設定
    $('#chck').prop('checked',chck);

    チェックの valueの値を取り出す。
    var chckVal =$('#chck").val();

    チェックボックスすべての値を取り出す場合
    ↓タイプがチェックボックスで、かつチェックされているチェックボックス
    $('input [ type = checkbox ] :checked').each(function(){*******




    windows + shift + s 
    そしたら、操作するのが上の方に出てくる

    フォームにURLとサイト名を入力して、ボタン押したらサイト名にリンクがつくようにしろ


    コメント

    【(javascript ドリル)ボタン押したら】の続きを読む

    テキストボックスに文字を入力しボタンをクリックすると、入力された文字が1秒ごとに先頭から1文字ずつ順番に表示されるプログラムを作成してください。

    Jquery使って作れ。。↓みたいな感じ。


    コメント 2019-12-02 205926


    【(javascript ドリル) スタート押したら一文字づつ表示】の続きを読む

    00:00:00から、スタート押したら1秒づつ動くタイマー作れ
    スタートボタンとストップボタンは共有する。
    こんな感じの↓


    コメント 2019-12-02 221300
    【(javascript ドリル) タイマー】の続きを読む


    <!DOCTYPE html>
    <html>

    <head>
        <meta charset="utf-8" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <script>
            $(function() {
            })
        </script>
    </head>
    <body>
    </body>
    </html>
     

    以下をコピペして、javascriptとCSSを補充しながら、タブを作れ

    <!DOCTYPE html>
    <html>

    <head>

        <meta charset="utf-8" />
        <style>
            #tab {
                width400px;
                list-stylenone;
            }        
            #tab ul {
                margin0;
                padding0px
            }        
            #tab li {
                padding5px 25px;
                cursorpointer;
            }      
            #tab li.active {
                background-colorblack;
                colorantiquewhite;
            }   
            #tabbox {
                width400px;
                padding30px 0;
                border2px solid royalblue;
                background-colorbrown;
                colorwhite;
                text-aligncenter;
            }      
            #tabbox div {
            }
            #tabbox div.active {
            }
        </style>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <script>
            $(function() {

            });
        </script>
    </head>

    <body>
        <h1>タブ</h1>
        <hr>

        <div id="tab">
            <ul>
                <li class="active">野球</li>
                <li>サッカー</li>
                <li>F1</li>
                <li>散歩</li>
            </ul>
        </div>
        <div id="tabbox">
            <div class="active">うったー</div>
            <div>入ったー</div>
            <div>速い</div>
            <div>のんびり</div>
        </div>

    </body>

    </html>
    【(javascript ドリル) タブを作る】の続きを読む

    このページのトップヘ