JavaScript  ·  04日 9月 2025

    JavaScript今さら入門(1)

     

    今さらなんだけど、JavaScriptに挑戦してみる。


    ほんと今さらなんだけど、今まで完全にスルーしていたJavaScriptに挑戦してみる。GUIのあるアプリを書く際に、pythonだとtkinterのコードをpyに埋め込むけど、まぁそれならGUIをHTMLで記述して処理をJavaScriptで書いてもいいじゃんねって思った(マジで今さら)。

    まずは、開発環境ってことで、VSCodeだけあればいいらしい。開発用のローカルサーバーとか必要そうだけど、そういうのは今は書かない。
    プロジェクトってかコードを置くフォルダを開いた状態で
    新規ファイルを作成。名前はtest0.htmlってする。
    エディタ部に
    html
    っていれると、こんなになるので、
    html:5
    ってのを選ぶ。すると、
    って感じで、ひな型を作ってくれる。
    で、これを、こんな感じにする。
    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Document</title>
    7. </head>
    8. <body>
    9.     <div id="hello"></div><br>
    10.     <script>
    11.         let hello=document.getElementById('hello');
    12.         hello.insertAdjacentHTML('afterend','<H1>Hello World!!</H1>')
    13.     </script>
    14. </body>
    15. </html>
    scriptタグで囲われた部分がJavaScriptで、htmlからIDが"hello"ってやつを探してきて、そこにHTMLを流し込むってことかな
    で、htmlをchromeで開くとこうなる。
    たぶん最もめんどくさいHello World。
    んで、もちっと込み入ったこともしてみる。入力ボックスから値をとってボタンでアクションする。
    いきなりだけど、こんな感じ(ちなみに、見やすいようにhtmlとJavaScriptコードを分割した)

    test1.html
    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Document</title>
    7. </head>
    8. <body>
    9.     <div id="out0"></div><br>
    10.     <input type="number" id="in1" placeholder="ここに数字を入力"><br>
    11.     <input type="number" id="in2" placeholder="ここに数字を入力"><br>
    12.     <button type="button" id="button1">足す</button><br>
    13.     <div id="out1"></div><br>
    14.     <script src="test1-src.js"></script>
    15. </body>
    16. </html>

    test1-src.js
    1. let out0=document.getElementById('out0');
    2. let out1=document.getElementById('out1');
    3. let in1=document.getElementById('in1');
    4. let in2=document.getElementById('in2');
    5. let button1=document.getElementById('button1');
    6. out0.insertAdjacentHTML('afterend','Hello World!!')
    7. function add(a, b) {
    8.     return a + b;
    9. }
    10. function button1_clicked(){
    11.     let in1_value = parseInt(in1.value,10);
    12.     let in2_value = parseInt(in2.value,10);
    13.     let result = add(in1_value, in2_value);
    14.     out1.insertAdjacentHTML('afterend',result);
    15. }
    16. button1.addEventListener("click",button1_clicked);

    htmlを開くとこうなる
    数字を入れてボタンを押すとこうなる
    うまくいった(*´꒳`*)
    JavaScript Programmer JS Tシャツ Computer Developers Tシャツ Tシャツ


    カテゴリ： 非現実