JavaScriptの基本

Yoku WebデザインはJavaScriptによるWebサイト、アプリの制作を得意としてます。当サイトTOPページのファーストビューの3DアニメーションはJavaScriptとCSSのみで作られてます。

1. JavaScriptの基本

JavaScriptは、HTMLやCSSと組み合わせて動的なウェブページを作成するためのプログラミング言語です。以下のコードは、基本的なJavaScriptの構文を示しています：

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Basics</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <script>
        // JavaScriptコードはここに書きます
        console.log("Hello, World!");
    </script>
</body>
</html>

とりあえず全部コピペしてどうなるか見てね。コードの詳細説明や、3Dアニメーションの作り方はまた次回。

2. DOM（Document Object Model）の操作

DOMは、HTMLドキュメントの構造を表すオブジェクトモデルです。JavaScriptを使って、DOMを操作し、ページの内容を動的に変更できます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM Manipulation</title>
</head>
<body>
    <h1 id="title">Hello, World!</h1>
    <button onclick="changeText()">Click Me</button>
    
    <script>
        function changeText() {
            document.getElementById("title").innerText = "You clicked the button!";
        }
    </script>
</body>
</html>

3. イベントリスナーの追加

イベントリスナーは、ユーザーのアクション（クリック、キーボード入力など）に応じてコードを実行するために使用されます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Event Listener</title>
</head>
<body>
    <h1 id="title">Hello, World!</h1>
    <button id="myButton">Click Me</button>
    
    <script>
        document.getElementById("myButton").addEventListener("click", function() {
            document.getElementById("title").innerText = "You clicked the button!";
        });
    </script>
</body>
</html>

4. アニメーションの作成

JavaScriptを使って、ウェブページにアニメーションを追加することもできます。setInterval や requestAnimationFrame を使って、スムーズなアニメーションを作成できます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animation</title>
    <style>
        #box {
            width: 100px;
            height: 100px;
            background-color: red;
            position: relative;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    
    <script>
        let box = document.getElementById("box");
        let position = 0;
        function animate() {
            position += 1;
            box.style.left = position + "px";
            if (position < 300) {
                requestAnimationFrame(animate);
            }
        }
        animate();
    </script>
</body>
</html>

5. フォームのバリデーション

JavaScriptを使って、フォーム入力のバリデーションを行うことができます。ユーザーがフォームを送信する前に入力内容をチェックし、不正なデータの送信を防ぎます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Form Validation</title>
</head>
<body>
    <form id="myForm">
        <label for="email">Email:</label>
        <input type="email" id="email" name="email">
        <input type="submit" value="Submit">
    </form>
    <p id="error"></p>
    
    <script>
        document.getElementById("myForm").addEventListener("submit", function(event) {
            let email = document.getElementById("email").value;
            if (!email.includes("@")) {
                document.getElementById("error").innerText = "Please enter a valid email address.";
                event.preventDefault();
            }
        });
    </script>
</body>
</html>

こういったJavaScriptの特性とCSSを組み合わせて複雑なアニメーションやシステムを作っていきます。