Sunday Engineer: JavaScript今さら入門(1)

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

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

まずは、開発環境ってことで、VSCodeだけあればいいらしい。開発用のローカルサーバーとか必要そうだけど、そういうのは今は書かない。
プロジェクトってかコードを置くフォルダを開いた状態で

新規ファイルを作成。名前はtest0.htmlってする。
エディタ部に
html
っていれると、こんなになるので、

html:5
ってのを選ぶ。すると、

って感じで、ひな型を作ってくれる。
で、これを、こんな感じにする。



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="hello"></div><br>
    <script>
        let hello=document.getElementById('hello');
        hello.insertAdjacentHTML('afterend','<H1>Hello World!!</H1>')
    </script>
</body>
</html>

scriptタグで囲われた部分がJavaScriptで、htmlからIDが"hello"ってやつを探してきて、そこにHTMLを流し込むってことかな
で、htmlをchromeで開くとこうなる。

たぶん最もめんどくさいHello World。
んで、もちっと込み入ったこともしてみる。入力ボックスから値をとってボタンでアクションする。
いきなりだけど、こんな感じ(ちなみに、見やすいようにhtmlとJavaScriptコードを分割した)

test1.html



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="out0"></div><br>
    <input type="number" id="in1" placeholder="ここに数字を入力"><br>
    <input type="number" id="in2" placeholder="ここに数字を入力"><br>
    <button type="button" id="button1">足す</button><br>
    <div id="out1"></div><br>
    <script src="test1-src.js"></script>
</body>
</html>

test1-src.js



let out0=document.getElementById('out0');
let out1=document.getElementById('out1');
let in1=document.getElementById('in1');
let in2=document.getElementById('in2');
let button1=document.getElementById('button1');
out0.insertAdjacentHTML('afterend','Hello World!!')
function add(a, b) {
    return a + b;
}
function button1_clicked(){
    let in1_value = parseInt(in1.value,10);
    let in2_value = parseInt(in2.value,10);
    let result = add(in1_value, in2_value);
    out1.insertAdjacentHTML('afterend',result);
}
button1.addEventListener("click",button1_clicked);

htmlを開くとこうなる

数字を入れてボタンを押すとこうなる

うまくいった(*´꒳`*)

2025年9月3日水曜日

JavaScript今さら入門(1)

0 件のコメント:

コメントを投稿