찾다

집 >웹 프론트엔드 >CSS 튜토리얼 >간단한 JavaScript로 할 수 있는 놀라운 일들

간단한 JavaScript로 할 수 있는 놀라운 일들

王林
王林원래의
2024-08-06 22:59:42429검색

Amazing Things You Can Do With Simple JavaScript

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

  1. 대화형 웹페이지 만들기

웹페이지에 상호작용 기능을 추가하려면 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: 이벤트 소개

  1. 간단한 게임 만들기

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: 키보드 이벤트

  1. 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

  1. 양식 확인

클라이언트측 양식 유효성 검사는 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: 양식, 컨트롤

  1. 애니메이션 만들기

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: 애니메이션

  1. 단일 페이지 애플리케이션(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: 위치 및 역사

  1. 접근성 강화

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)

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

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 웹 문서: 브라우저 확장

  1. 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 웹 문서: 파일 시스템

  1. 머신러닝 구현

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

JavaScript html5 css chrome angular Object for using JS dom this location history display animation canvas tensorflow everything
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：유틸리티 우선 CSS의 철학다음 기사：유틸리티 우선 CSS의 철학

관련 기사

더보기