[1日]JavaScript 1

22748 ワード
JavaScript 開発ログ テキストリンク

1.学習内容


グーグル経済学


URL : http://analytics.google.com
  • Googleが提供するWebサイト分析ツール
  • は、JavaScriptコードとして運営するWebサイトに無料で適用できます.
    より高いレベルの内部サイトを提供し、誰が、いつ、どのように私のサイトにアクセスするかを理解します.
    個人ブログ、ショッピングサイト、会社のホームページに適用

    • JavaScript


    1.F 12(開発者ツール)-コンソールの使用

  • Math.random()を使用して、ランダムな数値(1～100の数値)
    • を抽出します.
    Math.random() * 100;

    文字列を
  • クロムから通知ウィンドウ
    • に出力する.
    alert('안녕');

    文字列を
  • クロムの「OK」/「キャンセル」の選択可能な通知ウィンドウに出力します.
    「OK」をクリックしてF 12(開発者ツール)に戻ります.コンソールはtrueに戻り、「キャンセル」をクリックしてfalseに戻ります.
    • confirm('진짜?');
  • クロムに「OK」/「キャンセル」オプションと文字列を入力するための通知ウィンドウ
    文字を入力して「OK」を押して入力した文字を返し、入力せずに入力をキャンセルするとnullを返します.
    • prompt('아이디?');

  • クロムから通知ウィンドウに1から100までのランダムな数字を出力するには、どうすればいいですか?
    • alert(Math.random()*100));
  • クロムに複数のプロンプトウィンドウを作成するには、どうすればいいですか?
    alertを連続的に作成すると、作成したalertウィンドウに従って開きます.
    • alert(1); alert(2);

  • 反復文を使用して複数の通知ウィンドウを呼び出すことができますか?
    通知ウィンドウで、呼び出し通知ウィンドウと同じ数値を入力してみます.
    • for (let i=1; i<=10; i++)
	alert(i);

    2.Vscodeでの実習

  • コンソールの複数の実践ウィンドウ
    • <html>
    <body>
        <script>
            alert('1');
            alert('2');
            alert('3');
        </script>
    </body>
</html>
  • htmlページ
    • に出力
    <html>
    <body>
        <script>
            document.write('1+1 = ');
            document.write(1+1);
            document.write('<br>');
            const num = Math.random()*100;
            document.write(Math.floor(num));
            document.write('<br>');
            document.write(num.toFixed(1));
            document.write('<br>');
        </script>
        <input type = "button" value = "hello" onclick = "alert('안녕');">
    </body>
</html>


    Number

    <html>
    <body>
        <h1>Number</h1>
        <script>
            console.log(1);
            console.log(1.2);
            console.log('1 + 1 = ', 1+1);
            console.log('5 - 3 = ', 5-3);
            console.log('1 * 1 = ', 1*1);
            console.log('4 / 4 = ', 4/4);
            console.log('3 % 2 = ', 3%2);

            console.log('Math.random : ', Math.random());
            console.log('Math.Pi : ', Math.PI);
            console.log('Math.floor(1.9) : ', Math.floor(1.9)); // 내림
            console.log('Math.round(1.9) : ', Math.round(1.9)); // 반올림
            console.log('toFixed : ', (Math.random()*100).toFixed(0));
            //toFixed 소수점 자리 자르기
        </script>
    </body>
</html>

    文字列

    <h1>문자열(String)</h1>
<script>
	console.log("hello world");
	console.log(`hello
	world`);
</script>
  • `(backtick)を入力し、2行でコンソールに入力します.ロゴを書いても間違いはありません.
  • 長さで出力文字列長
    • console.log('hello world'.length);
  • で置換文字列
    • console.log('hell world'.replace('hell', 'hello'));
  • 「文字列」+「文字列
    • 」
    console.log('hello ' + 'world');
console.log('1'+'1');

    variable

  • varおよびletは、変数宣言に使用できます.
    • <!DOCTYPE html>
<html>
    <body>
        <h1>Variable</h1>
        <script>
            var a = 1;
            a = 2;
            console.log(a);

            let b = 1;
            b = 2;
            console.log(b);
        </script>
    </body>
</html>

    document.querySelect


    ターゲットは
  • オブジェクトです.
    F 12(開発者ツール)-コンソール
    • document.querySelector('#container');
  • ターゲットに対して背景色
    • を変更する.

    作成して
  • ボタンをクリックすると、BackgorundColor
    • が変更されます.
    <input type = 'button' value = 'night mode' onclick = "document.querySelector('body').style.backgroundColor='black'">
<input type = 'button' value = 'day mode' onclick = "document.querySelector('body').style.backgroundColor='white'">
  • オリジナル背景色:royalblue
  • night modeをクリックします
  • 日モードをクリック

    • 2.勉強の心得


    簡単なJavaScript文法があり、いろいろな実践ができます.
    これまで何の困難も解決できなかったことはありませんが、
    復習して、学んだことを総合的に使う必要があると思います.
    リストの並べ替え
    Webベース-CSS