자바스크립트

// 자바스크립트 예제
// 1. 자바스크립트로 할 수 있는 일
console.log("Hello, World!");

// 2. 기본 자료형, 변수, 연산자


let num = 5; // 변수 선언
let str = "Hello"; // 문자열
let isTrue = true; // 불리언
console.log(typeof num); // 자료형 검사

// 3. 조건문
if (num > 3) {
  console.log("Num is greater than 3");
} else {
  console.log("Num is not greater than 3");
}

switch (num) {
  case 1:
    console.log("Num is 1");
    break;
  case 5:
    console.log("Num is 5");
    break;
  default:
    console.log("Num is not 1 or 5");
}

// 4. 반복문
for (let i = 0; i < 3; i++) {
  console.log(i);
}

let arr = [1, 2, 3];
arr.forEach(item => console.log(item));

// 5. 함수
function greet(name) {
  return `Hello, ${name}`;
}
console.log(greet("World"));

let add = (a, b) => a + b;
console.log(add(2, 3));

// 6. 객체
let person = {
  name: "Alice",
  age: 25,
  greet: function() {
    console.log("Hello!");
  }
};
console.log(person.name);
person.greet();

// 7. 표준 내장 객체
let date = new Date();
console.log(date.toDateString());

let jsonString = JSON.stringify({ name: "Alice", age: 25 });
console.log(jsonString);

// 8. 예외 처리
try {
  throw new Error("Something went wrong");
} catch (e) {
  console.log(e.message);
}

// __dirname과 __filename은 Node.js에서 제공하는 전역 변수이다.

// __dirname: 현재 모듈의 디렉터리 이름
console.log(__dirname);  // 현재 파일이 위치한 디렉터리의 절대 경로를 출력한다.

// __filename: 현재 모듈의 파일 이름
console.log(__filename); // 현재 파일의 절대 경로를 출력한다.

// process 객체는 Node.js 프로세스에 대한 정보를 제공하고, 제어할 수 있게 해준다.

// process.env: 시스템 환경 변수
console.log(process.env);  // 시스템의 환경 변수를 출력한다.

// process.argv: 명령줄 인수 배열
console.log(process.argv); // Node.js 실행 시 전달된 명령줄 인수들을 배열로 출력한다.

// beforeExit 이벤트: 이벤트 루프가 모두 비워지고, 프로세스가 종료되기 전에 발생한다.
process.on('beforeExit', (code) => {
  console.log('Process beforeExit event with code:', code);
});

// exit 이벤트: 프로세스가 완전히 종료될 때 발생한다.
process.on('exit', (code) => {
  console.log('Process exit event with code:', code);
});

// os 모듈은 운영 체제에 대한 정보를 제공하는 모듈
const os = require('os');

// os.platform(): 운영 체제의 플랫폼을 반환
console.log(os.platform()); // 예: 'darwin', 'win32', 'linux'

// os.cpus(): CPU 코어에 대한 정보를 배열로 반환
console.log(os.cpus());     // 각 CPU 코어의 정보가 담긴 객체 배열을 출력

// url 모듈은 URL 문자열을 구문 분석하고 조작하는 기능을 제공한다.
const url = require('url');

// 새로운 URL 객체를 생성한다.
const myURL = new URL('https://example.org:8000/pathname/?search=test#hash');

// myURL.hostname: 호스트 이름을 반환한다.
console.log(myURL.hostname); // 'example.org' 출력

// myURL.pathname: 경로 이름을 반환한다.
console.log(myURL.pathname); // '/pathname/' 출력

// fs 모듈은 파일 시스템과 상호 작용하는 기능을 제공
const fs = require('fs');

// fs.readFile(): 파일을 비동기적으로 읽어들인다.
fs.readFile('example.txt', 'utf8', (err, data) => {
  if (err) throw err; // 오류가 발생하면 예외를 던진다.
  console.log(data); // 파일의 내용을 출력한다.
});

// request 모듈은 HTTP 요청을 쉽게 수행할 수 있게 해준다.
const request = require('request');

// GET 요청을 보내고, 콜백 함수를 통해 응답을 처리
request('http://www.google.com', (error, response, body) => {
  if (error) throw error; // 요청 중 오류가 발생하면 예외를 던진다.
  console.log('body:', body); // 응답 본문을 출력한다.
});

// cheerio 모듈은 서버 측에서 jQuery와 유사한 방식으로 HTML을 조작할 수 있게 해준다.
const cheerio = require('cheerio');

// HTML 문자열을 로드
const html = '<h2 class="title">Hello world</h2>';
const $ = cheerio.load(html); // cheerio 객체를 생성

// 선택자를 사용하여 HTML 요소의 텍스트를 추출.
console.log($('.title').text()); // 'Hello world' 출력

// async 모듈은 비동기 작업을 쉽게 관리할 수 있는 도구를 제공
const async = require('async');

// async.series(): 여러 비동기 함수를 순차적으로 실행
async.series([
  function(callback) {
    setTimeout(() => {
      console.log('Task 1'); // 첫 번째 작업
      callback(null, 'one'); // 콜백을 호출하여 다음 작업으로 넘어
    }, 200); // 200ms 대기
  },
  function(callback) {
    setTimeout(() => {
      console.log('Task 2'); // 두 번째 작업
      callback(null, 'two'); // 콜백을 호출하여 완료를 알린다
    }, 100); // 100ms 대기
  }
], (err, results) => {
  if (err) throw err; // 작업 중 오류가 발생하면 예외를 던진다.
  console.log(results); // ['one', 'two'] 출력 - 각 작업의 결과를 배열로 반환합
});

// Node.js 기본 예제
const fs = require('fs');
const os = require('os');
const url = require('url');
const request = require('request');
const cheerio = require('cheerio');
const async = require('async');

console.log(__dirname); // 현재 디렉터리 출력
console.log(__filename); // 현재 파일명 출력
console.log(process.env); // 환경 변수 출력
console.log(process.argv); // 명령줄 인수 출력

process.on('beforeExit', (code) => {
  console.log('Process beforeExit event with code:', code); // 프로세스가 종료되기 직전에 실행
});

process.on('exit', (code) => {
  console.log('Process exit event with code:', code); // 프로세스가 종료될 때 실행
});

console.log(os.platform()); // 현재 운영체제 플랫폼 출력
console.log(os.cpus()); // CPU 정보 출력

const myURL = new URL('https://example.org:8000/pathname/?search=test#hash');
console.log(myURL.hostname); // 'example.org'
console.log(myURL.pathname); // '/pathname/'

fs.readFile('example.txt', 'utf8', (err, data) => {
  if (err) throw err; // 파일 읽기 중 오류가 발생하면 예외를 던짐
  console.log(data); // 파일 내용 출력
});

request('http://www.google.com', (error, response, body) => {
  if (error) throw error; // 요청 중 오류가 발생하면 예외를 던짐
  console.log('body:', body); // 응답 본문 출력
});

const html = '<h2 class="title">Hello world</h2>';
const $ = cheerio.load(html); // cheerio를 사용하여 HTML을 로드
console.log($('.title').text()); // 'Hello world' 출력

async.series([
  function(callback) {
    setTimeout(() => {
      console.log('Task 1'); // 첫 번째 작업
      callback(null, 'one'); // 콜백 호출
    }, 200); // 200ms 대기
  },
  function(callback) {
    setTimeout(() => {
      console.log('Task 2'); // 두 번째 작업
      callback(null, 'two'); // 콜백 호출
    }, 100); // 100ms 대기
  }
], (err, results) => {
  if (err) throw err; // 작업 중 오류가 발생하면 예외를 던짐
  console.log(results); // ['one', 'two'] 출력
});

// Express는 Node.js에서 웹 애플리케이션을 쉽게 구축할 수 있도록 도와주는 프레임워크.
const express = require('express'); // express 모듈을 가져온다.
const app = express(); // express 애플리케이션 객체를 생성

// 기본 경로('/')로 GET 요청이 들어오면 'Hello World!'를 응답으로 보낸다.
app.get('/', (req, res) => {
  res.send('Hello World!'); // 클라이언트에 응답을 보낸다.
});

// 서버를 포트 3000에서 실행한다.
app.listen(3000, () => {
  console.log('Server is running on port 3000'); // 서버가 실행 중임을 알리는 메시지를 출력
});

const express = require('express'); // express 모듈을 가져온다.
const app = express(); // express 애플리케이션 객체를 생성한다.

// 서버를 포트 3000에서 실행한다.
app.listen(3000, () => {
  console.log('Server is running on port 3000'); // 서버가 실행 중임을 알리는 메시지를 출력한다.
});

const express = require('express'); // express 모듈을 가져온다.
const app = express(); // express 애플리케이션 객체를 생성한다.

// GET 요청으로 /users 경로에 접근하면 'Users Page'를 응답한다.
app.get('/users', (req, res) => {
  res.send('Users Page'); // 클라이언트에 응답을 보낸다.
});

// POST 요청으로 /users 경로에 접근하면 'Create User'를 응답한다.
app.post('/users', (req, res) => {
  res.send('Create User'); // 클라이언트에 응답을 보낸다.
});

// 서버를 포트 3000에서 실행한다.
app.listen(3000, () => {
  console.log('Server is running on port 3000'); // 서버가 실행 중임을 알리는 메시지를 출력한다.
});

const express = require('express'); // express 모듈을 가져온다.
const app = express(); // express 애플리케이션 객체를 생성한다.

// 경로 매개변수를 사용하여 사용자 ID를 받아온다.
app.get('/users/:id', (req, res) => {
  const userId = req.params.id; // 요청 경로에서 사용자 ID를 추출한다.
  res.send(`User ID: ${userId}`); // 추출한 사용자 ID를 응답으로 보낸다.
});

// 서버를 포트 3000에서 실행한다.
app.listen(3000, () => {
  console.log('Server is running on port 3000'); // 서버가 실행 중임을 알리는 메시지를 출력한다.
});

const express = require('express'); // express 모듈을 가져온다.
const app = express(); // express 애플리케이션 객체를 생성한다.

// 모든 요청에 대해 미들웨어를 실행한다.
app.use((req, res, next) => {
  console.log('Request URL:', req.originalUrl); // 요청 URL을 로그에 출력한다.
  next(); // 다음 미들웨어 또는 라우터로 제어를 넘긴다.
});

// 기본 경로('/')로 GET 요청이 들어오면 'Hello World!'를 응답으로 보낸다.
app.get('/', (req, res) => {
  res.send('Hello World!'); // 클라이언트에 응답을 보낸다.
});

// 서버를 포트 3000에서 실행한다.
app.listen(3000, () => {
  console.log('Server is running on port 3000'); // 서버가 실행 중임을 알리는 메시지를 출력한다.
});

const express = require('express'); // express 모듈을 가져온다.
const app = express(); // express 애플리케이션 객체를 생성();

// /api/products 경로로 GET 요청이 들어오면 제품 목록을 JSON 형태로 응답한다.
app.get('/api/products', (req, res) => {
  res.json([{ id: 1, name: 'Product A' }, { id: 2, name: 'Product B' }]); // JSON 형식으로 응답을 보낸다.
});

// /api/products 경로로 POST 요청이 들어오면 새 제품을 생성하고, 생성된 제품을 JSON 형태로 응답한다.
app.post('/api/products', (req, res) => {
  res.status(201).json({ id: 3, name: 'Product C' }); // 상태 코드 201(Created)과 함께 JSON 형식으로 응답을 보낸다.
});

// 서버를 포트 3000에서 실행한다.
app.listen(3000, () => {
  console.log('Server is running on port 3000'); // 서버가 실행 중임을 알리는 메시지를 출력한다.
});

const express = require('express'); // express 모듈을 가져온다.
const app = express(); // express 애플리케이션 객체를 생성한다.

// 모든 요청에 대해 미들웨어를 실행한다.
app.use((req, res, next) => {
  console.log('Request URL:', req.originalUrl); // 요청 URL을 로그에 출력한다.
  next(); // 다음 미들웨어 또는 라우터로 제어를 넘긴다.
});

// 기본 경로('/')로 GET 요청이 들어오면 'Hello World!'를 응답으로 보낸다.
app.get('/', (req, res) => {
  res.send('Hello World!'); // 클라이언트에 응답을 보낸다.
});

// GET 요청으로 /users 경로에 접근하면 'Users Page'를 응답한다.
app.get('/users', (req, res) => {
  res.send('Users Page'); // 클라이언트에 응답을 보낸다.
});

// POST 요청으로 /users 경로에 접근하면 'Create User'를 응답한다.
app.post('/users', (req, res) => {
  res.send('Create User'); // 클라이언트에 응답을 보낸다.
});

// 경로 매개변수를 사용하여 사용자 ID를 받아온다.
app.get('/users/:id', (req, res) => {
  const userId = req.params.id; // 요청 경로에서 사용자 ID를 추출한다.
  res.send(`User ID: ${userId}`); // 추출한 사용자 ID를 응답으로 보낸다.
});

// /api/products 경로로 GET 요청이 들어오면 제품 목록을 JSON 형태로 응답한다.
app.get('/api/products', (req, res) => {
  res.json([{ id: 1, name: 'Product A' }, { id: 2, name: 'Product B' }]); // JSON 형식으로 응답을 보낸다.
});

// /api/products 경로로 POST 요청이 들어오면 새 제품을 생성하고, 생성된 제품을 JSON 형태로 응답한다.
app.post('/api/products', (req, res) => {
  res.status(201).json({ id: 3, name: 'Product C' }); // 상태 코드 201(Created)과 함께 JSON 형식으로 응답을 보낸다.
});

// 서버를 포트 3000에서 실행한다.
app.listen(3000, () => {
  console.log('Server is running on port 3000'); // 서버가 실행 중임을 알리는 메시지를 출력한다.
});

// window.alert(): 브라우저 경고 창을 표시한다.
window.alert("Hello, World!");

// window.innerWidth와 window.innerHeight: 브라우저 창의 너비와 높이를 반환한다.
console.log(`Window width: ${window.innerWidth}, height: ${window.innerHeight}`);

// screen.width와 screen.height: 화면의 너비와 높이를 반환한다.
console.log(`Screen width: ${screen.width}, height: ${screen.height}`);

// location.href: 현재 페이지의 URL을 반환한다.
console.log(location.href);

// location.assign(): 새로운 페이지로 이동한다.
location.assign("https://www.example.com");

// history.back(): 이전 페이지로 이동한다.
history.back();

// history.forward(): 다음 페이지로 이동한다.
history.forward();

// navigator.userAgent: 사용자가 사용 중인 브라우저의 정보를 반환한다.
console.log(navigator.userAgent);

// navigator.language: 브라우저의 언어 설정을 반환한다.
console.log(navigator.language);

// 하나의 문서 객체 선택
const header = document.querySelector('h1'); // 첫 번째 h1 요소를 선택한다.
console.log(header.innerText); // 선택한 요소의 텍스트를 출력한다.

// 여러 개의 문서 객체 선택
const items = document.querySelectorAll('li'); // 모든 li 요소를 선택한다.
items.forEach(item => {
  console.log(item.innerText); // 각 요소의 텍스트를 출력한다.
});

// 텍스트 내용 변경
const header = document.querySelector('h1');
header.innerText = "New Header Text"; // h1 요소의 텍스트를 변경한다.

// 스타일 변경
header.style.color = 'blue'; // h1 요소의 텍스트 색상을 파란색으로 변경한다.
header.style.fontSize = '2em'; // h1 요소의 텍스트 크기를 2em으로 변경한다.

// 속성 변경
const link = document.querySelector('a');
link.setAttribute('href', 'https://www.new-url.com'); // a 요소의 href 속성을 변경한다.

const button = document.querySelector('button');
button.onclick = function() {
  alert('Button clicked!'); // 클릭 시 경고 창을 표시한다.
};

// 이벤트 객체 사용
button.addEventListener('click', function(event) {
  console.log(event.type); // 이벤트 타입 출력 (예: 'click')
  console.log(event.target); // 이벤트가 발생한 요소 출력
});

const link = document.querySelector('a');
link.addEventListener('click', function(event) {
  event.preventDefault(); // 링크의 기본 동작(페이지 이동)을 막는다.
  console.log('Link clicked!'); // 메시지를 출력한다.
});

$(document).ready(function() {
  // 문서가 준비되면 실행됩니다.
  const $header = $('h1'); // jQuery 객체로 h1 요소를 선택한다.
  console.log($header.text()); // jQuery 객체의 텍스트를 출력한다.
});

$(document).ready(function() {
  const $items = $('li'); // 모든 li 요소를 선택한다.
  $items.each(function(index, item) {
    console.log($(item).text()); // 각 li 요소의 텍스트를 출력한다.
  });
});

$(document).ready(function() {
  const $firstItem = $('li').first(); // 첫 번째 li 요소를 선택한다.
  $firstItem.text('First Item'); // 선택한 요소의 텍스트를 변경한다.
});

$(document).ready(function() {
  const $header = $('h1');
  $header.text('New Header Text'); // h1 요소의 텍스트를 변경한다.
});

$(document).ready(function() {
  const $header = $('h1');
  $header.css('color', 'blue'); // h1 요소의 텍스트 색상을 파란색으로 변경한다.
  $header.css('fontSize', '2em'); // h1 요소의 텍스트 크기를 2em으로 변경한다.
});

$(document).ready(function() {
  const $link = $('a');
  $link.attr('href', 'https://www.new-url.com'); // a 요소의 href 속성을 변경한다.
});

$(document).ready(function() {
  const $newItem = $('<li>New Item</li>'); // 새로운 li 요소를 생성.
  $('ul').append($newItem); // 생성한 요소를 ul 요소의 끝에 추가.
});

$(document).ready(function() {
  $('button').click(function() {
    alert('Button clicked!'); // 버튼 클릭 시 경고 창을 표시한다.
  });
});

$(document).ready(function() {
  $('ul').on('click', 'li', function() {
    alert('List item clicked!'); // 동적으로 추가된 li 요소 클릭 시 경고 창을 표시하ㅏㄴ다.
  });
});

$(document).ready(function() {
  const $button = $('button');
  const clickHandler = function() {
    alert('Button clicked!'); // 버튼 클릭 시 경고 창을 표시한다.
  };

  $button.click(clickHandler); // 클릭 이벤ㅌ ㅡ 핸들러를 추가한다.
  $button.off('click', clickHandler); // 클릭 이벤트 핸들러를 제거한다.
});

$(document).ready(function() {
  $('button').click(function() {
    $('h1').fadeOut(1000).fadeIn(1000); // h1 요소를 1초 동안 사라지게 한 후, 다시 1초 동안 나타나게 한다.
  });
});

(function($) {
    // jQuery 플러그인 정의
    $.fn.imageSlider = function(options) {
        // 기본 설정을 정의하고, 사용자 설정으로 덮어씌움
        const settings = $.extend({
            width: 460, // 슬라이더의 너비
            height: 300, // 슬라이더의 높이
            animationDuration: 1000, // 애니메이션 지속 시간 (밀리초)
            interval: 3000 // 슬라이드 자동 전환 간격 (밀리초)
        }, options);

        // 각 슬라이더에 대해 초기화 함수 실행
        return this.each(function() {
            const $slider = $(this); // 현재 슬라이더 요소를 jQuery 객체로 선택
            const $images = $slider.find('.images'); // 슬라이더 내의 이미지 컨테이너 선택
            const $imageItems = $images.find('.image'); // 이미지 항목들 선택
            const imageLength = $imageItems.length; // 이미지의 개수
            let current = 0; // 현재 표시 중인 이미지의 인덱스

            // 이미지 슬라이더 이동 함수 정의
            const moveTo = function() {
                $images.animate({ 
                    left: -current * settings.width // 현재 인덱스에 따라 왼쪽으로 이동
                }, settings.animationDuration); // 애니메이션 지속 시간 설정
            };

            // 슬라이더 버튼 추가
            for (let i = 0; i < imageLength; i++) {
                $('<button></button>') // 새 버튼 요소 생성
                    .attr('data-position', i) // 버튼에 위치 정보 저장
                    .text(i) // 버튼에 인덱스 번호 텍스트 설정
                    .click(function() { // 버튼 클릭 이벤트 핸들러
                        current = $(this).attr('data-position'); // 클릭한 버튼의 위치를 현재 위치로 설정
                        moveTo(); // 슬라이더 이동
                    })
                    .insertBefore($slider); // 버튼을 슬라이더 앞에 삽입
            }

            // 슬라이더 스타일 설정
            $slider.css({
                position: 'relative', // 슬라이더를 상대적으로 위치
                width: settings.width, // 슬라이더의 너비 설정
                height: settings.height, // 슬라이더의 높이 설정
                overflow: 'hidden' // 넘치는 부분을 숨김
            });
            $images.css({
                position: 'absolute', // 이미지 컨테이너를 절대적으로 위치
                width: settings.width * imageLength // 이미지 컨테이너의 총 너비 설정
            });
            $imageItems.css({
                margin: 0, // 이미지의 외부 여백 제거
                padding: 0, // 이미지의 내부 여백 제거
                width: settings.width, // 이미지의 너비 설정
                height: settings.height, // 이미지의 높이 설정
                display: 'block', // 이미지를 블록 요소로 설정
                float: 'left' // 이미지를 왼쪽으로 정렬
            });

            // 자동 슬라이드 설정
            setInterval(function() {
                current = (current + 1) % imageLength; // 현재 인덱스를 증가시키고, 마지막 인덱스 이후에는 처음으로 돌아감
                moveTo(); // 슬라이더 이동
            }, settings.interval); // 설정된 간격마다 반복
        });
    };
})(jQuery); // jQuery를 플러그인 내에서 사용할 수 있게 즉시 실행 함수로 감싸기