Web Programming 실습 코드 모음

---

• Week 1
  • 1주차 연습
  • 기본 HTML 문서 작성
  • 1주차 공부 내용 정리
• Week 2
  • 2주차 연습
  • 표, 링크, 시맨틱 태그 등 추가
  • 2주차 공부 내용 정리 추가
• Week 3
  • 3주차 연습
  • 색상과 배경, 텍스트, 폰트, 박스 모델 배치, 리스트, 테이블, 사용자 인터페이스 등
  • 3주차 공부 내용 정리 추가
• Week 4
  • JavaScript 개요, 기초
  • 함수
  • 객체 개요
  • 코어 객체
  • 사용자 객체
• Week 5
  • DOM 개요
  • DOM 트리와 HTML 관계
  • DOM 객체 제어
  • 동적 DOM 조작
• Week6
  • 이벤트
  • 이벤트 리스너
  • 이벤트가 DOM 트리를 따라 흘러가는 경로
  • 특정 이벤트(키, 마우스, 로딩 등)
  • Week7
    • prac10-5,6.html: 실습문제 5번+6번 (클릭으로 정지 및 재시작 가능한 실시간 시계 만들기)
  • Week9
    • prac12-1.html: 실습문제 1번 (쿠키를 사용해 방문 횟수와 사용자 이름을 저장 및 표시하는 웹페이지)
    • prac12-2.html: 실습문제 2번 (세션 스토리지를 사용해 품목명과 개수를 저장하고 검색하는 기능 구현)
    • prac12-3.html: 실습문제 3번 (로컬 스토리지에 품목과 개수를 저장/검색하며, 스토리지 변경 시 이벤트를 통해 변경 내용을 실시간으로 표시하는 웹페이지)
  • Week10
    • add.js (워커가 전달받은 숫자 범위의 합을 계산해 결과를 메인 스레드로 전달하는 코드)
    • add1to10.js (0부터 9까지의 합을 계산해 결과를 메인 스레드로 전달하는 워커 코드)
    • prac13-5.html: 예제 5번 (사용자의 현재 위치 정보를 가져와 출력하고, Google Static Maps API를 사용해 지도를 표시하는 웹페이지)
    • prac13-6.html: 예제 6번 (사용자의 위치 변화를 실시간으로 추적하여 최대 5회 위치 정보를 표시하고, Google Static Maps API로 지도를 업데이트하는 웹페이지)
    • prac13-7.html: 예제 7번 (웹 워커를 사용해 1부터 10까지의 합을 계산하고 결과를 웹페이지에 표시하는 프로그램)
    • prac13-8.html: 예제 8번 (웹 워커를 사용하여 입력된 시작과 끝 숫자를 전달받아 합을 계산하고, 결과를 웹페이지에 표시하는 프로그램)
    • prac13-9.html: 예제 9번 (웹 워커를 사용해 타이머를 실행 및 중지하며, 카운트 값을 실시간으로 웹페이지에 표시하는 프로그램)
    • prob13-6.html: 실습문제 6번 (웹 워커를 사용해 두 숫자의 곱셈을 비동기적으로 계산하고 결과를 웹페이지에 표시하는 프로그램)
    • timer.js (워커가 start 메시지로 1초마다 카운트를 증가시키고 stop 메시지로 타이머를 중지하는 코드)
  • Week11
    • varlet.js (var와 let의 스코프 차이를 파악할 수 있는 코드)
  • Week12
    • prac12-1.js: 12주차 실습문제 1번 (배열에서 for, forEach, reduce, map을 활용해 총합 계산 및 제품별 금액을 출력하는 코드)
    • prac12-2.js: 12주차 실습문제 2번 (배열의 문자열을 map을 사용해 모두 대문자로 변환하거나 첫 글자만 대문자로 변환하는 코드)
  • Week13
    • webserver1.js: 13주차 실습 1 (Node.js로 간단한 HTTP 서버를 생성하여 클라이언트 요청에 HTML 응답을 반환하는 코드)
    • webserver2.js: 13주차 실습 2 (Node.js로 HTTP 서버를 생성하고, 클라이언트 요청 시 파일을 읽어 반환하거나 파일이 없으면 에러 메시지를 반환하는 코드)
  • Week14
    • public/login1.html: 예시 로그인 화면을 보여줄 코드
    • app1.js: 14주차 실습 1 (Express를 사용해 간단한 웹 서버를 만들고, 모든 요청에 대해 HTML 메시지를 반환하는 코드
    • app3.js: 14주차 실습 2 (Express에서 두 개의 미들웨어를 사용해 요청을 처리하며, 첫 번째 미들웨어는 데이터를 추가하고, 두 번째 미들웨어는 추가된 데이터를 포함한 응답을 반환하는 코드)
    • app7.js: 14주차 실습 3 (Express 서버에서 User-Agent 헤더와 URL 쿼리 파라미터 name 값을 읽어 클라이언트에 응답하는 코드)
    • app8.js: 14주차 실습 4 (Express 서버에서 body-parser를 사용해 POST와 GET 요청의 데이터를 처리하고, 정적 파일을 서빙하며 입력된 id와 password를 HTML로 응답하는 코드)