JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

HTMLとJavaScriptでスピードコンバーターを作成する方法を解説

はじめに

HTMLとJavaScriptを組み合わせることで、キロメートル毎時（km/h）をメートル毎秒（m/s）にリアルタイムで変換できるスピードコンバーターを簡単に作成できます。入力欄に数値を入力すると、JavaScriptの関数が即座に計算を行い、結果を画面に表示する仕組みです。

サンプルコード

以下が、HTMLとJavaScriptを使ったスピードコンバーターの完全なコード例です。

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    input, span {
        font-size: 20px;
    }
</style>
</head>
<body>
<h1>Speed Converter</h1>
<h2>Type speed in Kilometer per hour to convert it into meter per hour</h2>
<p>
<label>Kilometer Per Hour</label>
<input
id="inputKm"
type="number"
placeholder="KilometersPerHour"
oninput="KmphtoMphConverter(this.value)"
onchange="KmphtoMphConverter(this.value)"/>
</p>
<p>Meters Per second: <span class="metersPerSecond"></span></p>
<script>
    function KmphtoMphConverter(speed) {
        document.querySelector(".metersPerSecond").innerHTML = speed * 0.277778;
    }
</script>
</body>
</html>

コードのポイント解説

1. 入力フィールドの設定

<input>タグには type="number" を指定することで、数値のみを入力可能にしています。また、oninput イベントと onchange イベントの両方に関数を紐付けることで、ユーザーが値を入力した瞬間に変換処理が実行されます。

2. 変換の仕組み

JavaScriptの関数「KmphtoMphConverter」では、入力された km/h の値に係数 0.277778 を掛けて m/s に変換しています。この係数は「1 km/h = 約0.277778 m/s」という換算式に基づいています。

3. 結果の表示

document.querySelector() を使ってクラス名「metersPerSecond」の要素を取得し、innerHTML プロパティで変換結果を動的に書き込んでいます。

実行結果

上記のコードを実行すると、次のような画面が表示されます。

HTMLとJavaScriptでスピードコンバーターを作成する方法を解説

キロメートル毎時の数値を入力すると、メートル毎秒への変換結果が自動的に表示されます。

HTMLとJavaScriptでスピードコンバーターを作成する方法を解説

まとめ

このように、HTMLの入力フォームとJavaScriptのイベント処理を組み合わせるだけで、シンプルながら実用的な単位変換ツールを作ることができます。応用として、マイル毎時への変換や複数の単位に同時対応させるなど、機能を拡張してみるのもおすすめです。

  1. HTMLとJavaScriptで作る重量コンバーター：kgをgに変換する方法

    HTMLとJavaScriptを組み合わせれば、ブラウザ上で動作するシンプルな重量コンバーター（単位変換ツール）を簡単に作成できます。この記事では、キログラム（kg）を入力するとグラム（g）に自動変換して表示するウェイトコンバーターの実装方法を、サンプルコードとともにわかりやすく解説します。 実装コード例 以下のコードをそのままHTMLファイルとして保存し、ブラウザで開くだけで動作します。 <!DOCTYPE html> <html> <head> <style>     body{   

  2. CSSとJavaScriptでアコーディオン（開閉パネル）を作成する方法をわかりやすく解説

    CSSとJavaScriptを組み合わせることで、クリックすると内容が開閉する「アコーディオン（折りたたみパネル）」を簡単に実装できます。本記事では、実際に動作するサンプルコードをもとに、その作成手順と仕組みを詳しく解説します。 アコーディオンの実装例 以下は、HTML・CSS・JavaScriptを使ってアコーディオンを実装した完全なサンプルコードです。 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, ini