간단한 JavaScript로 할 수 있는 놀라운 일들-CSS 튜토리얼-php.cn

Amazing Things You Can Do With Simple JavaScript

JavaScript는 간단한 서버측 시스템부터 복잡한 온라인 앱까지 모든 것을 만드는 데 사용할 수 있는 상당히 유연한 언어입니다. 경험이 없는 개발자와 노련한 개발자 모두 다용성과 사용의 단순성으로 인해 이 앱을 좋아합니다. 이 게시물에서는 기본 JavaScript로 수행할 수 있는 10가지 놀라운 작업에 대해 자세히 알아보는 데 도움이 되는 코드 조각 및 리소스를 설명합니다.

대화형 웹페이지 만들기

웹페이지에 상호작용 기능을 추가하려면 JavaScript가 필수적입니다. 페이지를 다시 로드하지 않고도 동적 콘텐츠를 생성하고, 사용자 이벤트를 처리하고, DOM을 업데이트할 수 있습니다.

예: 다크 모드 전환

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dark Mode Toggle</title>
    <style>
        body {
            transition: background-color 0.3s, color 0.3s;
        }
        .dark-mode {
            background-color: #121212;
            color: #ffffff;
        }
    </style>
</head>
<body>
    <h1>Welcome to My Website</h1>
    <button id="toggle-dark-mode">Toggle Dark Mode</button>
    <script>
        const button = document.getElementById('toggle-dark-mode');
        button.addEventListener('click', () => {
            document.body.classList.toggle('dark-mode');
        });
    </script>
</body>
</html>

로그인 후 복사

참고자료:

MDN 웹 문서: DOM(문서 개체 모델)

JavaScript.info: 이벤트 소개

간단한 게임 만들기

JavaScript를 사용하면 브라우저에서 직접 매력적인 게임을 만들 수 있습니다. HTML5 캔버스 요소를 사용하면 그래픽을 그리고 개체에 애니메이션을 적용할 수 있습니다.

예: 기본 뱀 게임

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Snake Game</title>
    <style>
        canvas {
            display: block;
            margin: auto;
            background-color: #f0f0f0;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="400" height="400"></canvas>
    <script>
        const canvas = document.getElementById('gameCanvas');
        const ctx = canvas.getContext('2d');
        const grid = 20;
        let snake = [{ x: 160, y: 160 }];
        let direction = 'right';
        let food = { x: 200, y: 200 };

        function update() {
            const head = { ...snake[0] };
            switch (direction) {
                case 'up': head.y -= grid; break;
                case 'down': head.y += grid; break;
                case 'left': head.x -= grid; break;
                case 'right': head.x += grid; break;
            }
            snake.unshift(head);
            if (head.x === food.x && head.y === food.y) {
                food.x = Math.floor(Math.random() * canvas.width / grid) * grid;
                food.y = Math.floor(Math.random() * canvas.height / grid) * grid;
            } else {
                snake.pop();
            }
        }

        function draw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.fillStyle = 'green';
            snake.forEach(segment => ctx.fillRect(segment.x, segment.y, grid, grid));
            ctx.fillStyle = 'red';
            ctx.fillRect(food.x, food.y, grid, grid);
        }

        function loop() {
            update();
            draw();
            setTimeout(loop, 100);
        }

        document.addEventListener('keydown', (e) => {
            switch (e.key) {
                case 'ArrowUp': direction = 'up'; break;
                case 'ArrowDown': direction = 'down'; break;
                case 'ArrowLeft': direction = 'left'; break;
                case 'ArrowRight': direction = 'right'; break;
            }
        });

        loop();
    </script>
</body>
</html>

로그인 후 복사

참고자료:

MDN 웹 문서: 캔버스 API

JavaScript.info: 키보드 이벤트

API에서 데이터 가져오기 및 표시

JavaScript를 사용하면 API에서 데이터를 쉽게 가져와 웹페이지에 동적으로 표시할 수 있습니다. 이는 대화형 대시보드와 실시간 애플리케이션을 만드는 데 특히 유용합니다.

예: 날씨 데이터 표시

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Weather App</title>
</head>
<body>
    <h1>Weather App</h1>
    <input type="text" id="city" placeholder="Enter city">
    <button id="getWeather">Get Weather</button>
    <div id="weather"></div>
    <script>
        document.getElementById('getWeather').addEventListener('click', () => {
            const city = document.getElementById('city').value;
            fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=YOUR_API_KEY`)
                .then(response => response.json())
                .then(data => {
                    const weatherDiv = document.getElementById('weather');
                    weatherDiv.innerHTML = `
                        <h2>${data.name}</h2>
                        <p>${data.weather[0].description}</p>
                        <p>Temperature: ${(data.main.temp - 273.15).toFixed(2)} °C</p>
                    `;
                })
                .catch(error => console.error('Error fetching data:', error));
        });
    </script>
</body>
</html>

로그인 후 복사

참고자료:

MDN 웹 문서: Fetch API

OpenWeather API

양식 확인

클라이언트측 양식 유효성 검사는 JavaScript로 쉽게 처리할 수 있어 사용자에게 즉각적인 피드백을 제공하고 서버측 유효성 검사의 필요성을 줄여줍니다.

예: 간단한 양식 유효성 검사

<!DOCTYPE html>
<html lang="en">
<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="username">Username:</label>
        <input type="text" id="username" required>
        <span id="usernameError" style="color: red;"></span>
        <br>
        <label for="email">Email:</label>
        <input type="email" id="email" required>
        <span id="emailError" style="color: red;"></span>
        <br>
        <button type="submit">Submit</button>
    </form>
    <script>
        document.getElementById('myForm').addEventListener('submit', function (e) {
            e.preventDefault();
            let valid = true;
            const username = document.getElementById('username').value;
            const email = document.getElementById('email').value;

            if (username.length < 5) {
                valid = false;
                document.getElementById('usernameError').textContent = 'Username must be at least 5 characters';
            } else {
                document.getElementById('usernameError').textContent = '';
            }

            const emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
            if (!emailPattern.test(email)) {
                valid = false;
                document.getElementById('emailError').textContent = 'Invalid email address';
            } else {
                document.getElementById('emailError').textContent = '';
            }

            if (valid) {
                alert('Form submitted successfully!');
            }
        });
    </script>
</body>
</html>

로그인 후 복사

참고자료:

MDN 웹 문서: 클라이언트측 양식 유효성 검사

JavaScript.info: 양식, 컨트롤

애니메이션 만들기

JavaScript를 CSS와 함께 사용하면 웹페이지에 부드러운 애니메이션을 만들 수 있습니다. 이는 사용자 경험을 향상하고 사이트를 더욱 매력적으로 만드는 데 사용될 수 있습니다.

예: 페이드 인 효과

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fade In Effect</title>
    <style>
        #fadeInElement {
            opacity: 0;
            transition: opacity 2s;
        }
        .visible {
            opacity: 1;
        }
    </style>
</head>
<body>
    <h1>Fade In Effect</h1>
    <div id="fadeInElement">Hello, World!</div>
    <button id="fadeInButton">Fade In</button>
    <script>
        document.getElementById('fadeInButton').addEventListener('

click', () => {
            document.getElementById('fadeInElement').classList.add('visible');
        });
    </script>
</body>
</html>

로그인 후 복사

참고자료:

MDN 웹 문서: CSS 전환

JavaScript.info: 애니메이션

단일 페이지 애플리케이션(SPA) 구축

React, Angular, Vue와 같은 JavaScript 프레임워크를 사용하면 원활한 사용자 환경을 제공하는 단일 페이지 애플리케이션을 구축할 수 있습니다.

예: 바닐라 JavaScript를 사용한 간단한 SPA

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple SPA</title>
    <style>
        .hidden {
            display: none;
        }
    </style>
</head>
<body>
    <nav>
        <a href="#home">Home</a>
        <a href="#about">About</a>
        <a href="#contact">Contact</a>
    </nav>
    <div id="content"></div>
    <script>
        const routes = {
            home: '<h1>Home Page</h1><p>Welcome to the home page.</p>',
            about: '<h1>About Page</h1><p>This is the about page.</p>',
            contact: '<h1>Contact Page</h1><p>Get in touch through the contact page.</p>'
        };

        function navigate() {
            const hash = window.location.hash.substring(1);
            document.getElementById('content').innerHTML = routes[hash] || routes.home;
        }

        window.addEventListener('hashchange', navigate);
        navigate();
    </script>
</body>
</html>

로그인 후 복사

참고자료:

MDN 웹 문서: 단일 페이지 애플리케이션

JavaScript.info: 위치 및 역사

접근성 강화

JavaScript를 사용하면 웹 애플리케이션의 접근성을 향상시켜 장애인을 포함한 모든 사람이 사용할 수 있도록 할 수 있습니다.

예: 콘텐츠 링크로 건너뛰기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Skip to Content</title>
    <style>
        #mainContent {
            margin-top: 100px;
        }
    </style>
</head>
<body>
    <a href="#mainContent" id="skipToContent">Skip to Content</a>
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
    <main id="mainContent">
        <h1>Main Content</h1>
        <p>This is the main content of the page.</p>
    </main>
    <script>
        document.getElementById('skipToContent').addEventListener('click', function (e) {
            e.preventDefault();
            document.getElementById('mainContent').focus();
        });
    </script>
</body>
</html>

로그인 후 복사

참고자료:

MDN 웹 문서: 접근성

W3C 웹 접근성 이니셔티브(WAI)

브라우저 확장 프로그램 만들기

JavaScript를 사용하면 브라우저 기능을 향상하고 작업을 자동화하며 다른 서비스와 통합하는 브라우저 확장 기능을 개발할 수 있습니다.

예: 간단한 Chrome 확장 프로그램

Create a manifest.json file:

{
    "manifest_version": 2,
    "name": "Hello World Extension",
    "version": "1.0",
    "description": "A simple hello world Chrome extension",
    "browser_action": {
        "default_popup": "popup.html"
    }
}

Create a popup.html file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <button id="clickMe">Click Me</button>
    <script>
        document.getElementById('clickMe').addEventListener('click', () => {
            alert('Hello from your Chrome Extension!');
        });
    </script>
</body>
</html>

로그인 후 복사

참고자료:

Chrome 개발자: Chrome 확장 프로그램 시작하기

MDN 웹 문서: 브라우저 확장

Node.js로 작업 자동화

JavaScript를 Node.js와 함께 서버측에서 사용하여 파일 조작, 웹 스크래핑, 데이터 처리 등 반복적인 작업을 자동화할 수도 있습니다.

예: 파일 읽기 및 쓰기

app.js라는 파일을 만듭니다.

const fs = require('fs');

const content = 'Hello, World!';
fs.writeFile('hello.txt', content, (err) => {
    if (err) throw err;
    console.log('File written successfully');

    fs.readFile('hello.txt', 'utf8', (err, data) => {
        if (err) throw err;
        console.log('File content:', data);
    });
});

로그인 후 복사

Node.js로 스크립트를 실행하세요.

노드 app.js

참고자료:

Node.js 공식 홈페이지

MDN 웹 문서: 파일 시스템

머신러닝 구현

TensorFlow.js와 같은 라이브러리를 사용하면 JavaScript를 사용하여 브라우저에서 직접 머신러닝 모델을 구현할 수 있습니다.

예: 단순 이미지 분류

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Classification</title>
</head>
<body>
    <h1>Image Classification</h1>
    <input type="file" id="imageUpload" accept="image/*">
    <div id="result"></div>
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/mobilenet"></script>
    <script>
        const imageUpload = document.getElementById('imageUpload');
        const result = document.getElementById('result');

        imageUpload.addEventListener('change', async () => {
            const file = imageUpload.files[0];
            const img = new Image();
            img.src = URL.createObjectURL(file);

            img.onload = async () => {
                const model = await mobilenet.load();
                const predictions = await model.classify(img);
                result.innerHTML = predictions.map(p => `${p.className}: ${p.probability.toFixed(2)}`).join('<br>');
            };
        });
    </script>
</body>
</html>

로그인 후 복사

참고자료:

TensorFlow.js

MDN 웹 문서: 파일 API

결론

JavaScript는 용도가 다양하므로 다재다능하고 강력한 언어입니다. 단일 페이지 애플리케이션 개발 및 Node.js를 사용한 프로세스 자동화부터 간단한 게임 및 대화형 웹 페이지 제작에 이르기까지 가능성은 무한합니다. 제공된 예제와 리소스를 사용하여 기본 JavaScript로 수행할 수 있는 놀라운 작업을 탐색할 수 있습니다. 즐겁게 코딩해보세요!

추가 참고자료:

JavaScript.info

Eloquent JavaScript

MDN 웹 문서: JavaScript

위 내용은 간단한 JavaScript로 할 수 있는 놀라운 일들의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!