LoginSignup
1
0

More than 1 year has passed since last update.

JavaScriptの基礎中の基礎を詰め込んでみた

Last updated at Posted at 2022-07-20

他言語について基礎を学習している方がJavaScriptを簡潔に理解できるように、基本構文をまとめてみました。
参考になれば幸いです。

jsKiso.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    
    <script>
        //ここから記述するよ
        //!を入力後tabを押すと基礎的なhtmlが記述される。
        //bodyタグの末尾に<script>と閉じタグ</script>と記述すること
        //Javascriptのルール
        //基本構文はほぼほぼC言語と一緒
        //①基本変数定義にはletを使う
        //②定数や関数の定義にはconstを使うが慣れるまではletでいいよ
        //③長い変数や関数名にはキャメルケースを使うよ 例:getNumberChange
        //(真ん中が大文字になり、ラクダのように中がぼこぼこするのでそういう名前になったと思われる)
        //デバッグやコンパイルは不要な言語ですので、そのままchromeに投げ込んで実行してください。
        //当分デベロッパーツール(F12ででます)での実行になります。

        //標準出力:printfみたいなやつ
        console.log("hello, World");//デベロッパーツールでの確認
        alert("hello,world");//アラート画面に表示(デベロッパーツールは必要ない)

        //入力方法:scanfみたいなやつ。scanfとは違い文字を出力後、入力できる。
        //strという変数に格納後、alertで出力
        let str = prompt("文字を入力してください");
        alert(str);

        //変数宣言:変数の型がないため型(C言語でいうintとか)ははいらないのでなんでも入る
        let x = 20;
        let y = 11 * 2;
        let z = "Hello, World";
        console.log(`xとyとzの結果:${x}${y},${z}`);
        x ='xは20でしたが文字が代入されました';
        console.log(x);

        //文字列定数
        //ダブルクォーテーションかシングルクォーテーションで囲った文字列は定数として扱われます。どちらも意味は同じ。

        if ("" == '') console.log("結果:クォートはどっち使っても大丈夫です"); 

        //バッククォートで囲っても文字列です。このときその中に${}で囲った式は計算された後最終的に文字列になります。
        //表示に限ってはバッククォートの方が楽
        console.log(`20${y}年ですね,${z}`);//←これのこと``の中に${変数}を入れると文字と同時に表示できる
        //計算もできちゃう
        console.log(`10 * 12 = ${10 * 12}`); 

        //制御文
        //for, if, else
        //FizzBuzzで理解しよう
        //iはfor内で定義するのがよいとされる
        console.log("fizzbuzzはじまり");

        for(let i = 0; i <=30 ; i++) {
            if (i % 15 == 0) console.log("FizzBuzz");
            else if (i % 3 == 0) console.log("Fizz");
            else if (i % 5 == 0) console.log("Buzz");
            else console.log(i);
        }
        console.log("fizzbuzz終わり");

        //配列とforの扱い(配列数の定義はいらない)
        //lengthでaryの配列数を取得
        let ary = [1, 2, 3];
        for(let i = 0; i < ary.length; i++) {
            console.log(ary[i]);
        }
        //尚cosole.tableでも中身の確認をできる
        //学習用にはこっちのほうが便利
        console.log(`配列の中身は1.2.3のはず`);
        console.table(ary);

        //配列に数値を加える(push)関数
        let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
        console.log("push前");
        console.table(arr);
        arr.push(11); // 末尾に要素を追加する
        console.log("push後");
        console.table(arr); //arr[10]に11が加わる

        //自作関数
        //sumFuncという関数を自分で定義する
        //アロー関数という書き方をする。=(引数)=>(今回はa,bが引数)
        //引数は関数に使う値のこと(下のresultから1と2を引数として取得)
        //aとbは引数という仮の変数。どんな名前でもいい
        //sumという変数を定義しaとbを加算後、sum をそのままreturnで返す(戻り値)。
        let sumFunc=(a, b)=>
        {
            let sum = a+b;
            return sum;//sumに計算結果が入っているのでreturnでそのまま渡してOK。
        };
        //上で定義したsumFunc関数に(1,2)を引数(値渡し)として代入して呼び出し、resultに格納後結果を表示する
        let result = sumFunc(1, 2);//resultにsumFuncを呼び出した答えを格納
        console.log(`sumFuncの結果:${result}`); 

        //簡単な2次元配列の初期化(配列数の定義はいらない)
        let field = [[0,0,0],//結果表示用の配列
                    [0,0,0],
                    [0,0,0]];

        console.log("0にあらかじめ初期化された配列");           
        console.table(field);


        //ちょっと難しい。
        //2次元関数の一斉初期化(もしくは配列にforなどで数値を格納する場合)
        //数値s*sの配列を作りx+(y*10)を格納する
        //C言語と違い、x列をy分だけ縦に定義していく※C言語は横に定義していく
        let s = 5;
        let array = new Array(s); 
            for(let x = 0; x < s; x++) {
                array[x] = new Array(s); 
                for(let y = 0; y < s; y++) {
                    array[x][y] = x+(y*10); 
                }
            }
        console.log("配列一斉初期化");
        console.table(array);

        //おまけ:ランダム値取得//nで定義した数値を返す
        let n =6;
        let rand = Math.floor(Math.random()*n+1 )
        console.log(`randの中身は${rand}です`);

    </script>
    </body>
    </html>

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0