frontend 자바스크립트 기초

1장. 자바스크립트 개요

예제 1-1) 자바스크립트 체험하기

웹 애플리케이션에 있어 자바스크립트의 역할은 절대적입니다. 다음의 링크를 통해 다양한 자바스크립트로 구현된 다양한 사례를 체험하며 자바스크립트로 어떤일을 할 수 있는지 알아 봅니다.

webix

Vue.js

React.js


예제 1-2) 자바스크립트 HelloWorld

본격적으로 자바스크립트 예제를 살펴보기전에 구현해 보는 간단한 예제 입니다. 화면이 로딩되면 이름을 물어보고 입력된 이름을 브라우저 화면에 출력해 줍니다.

1-2.html

코드 설명


2장. 자바스크립트 기본 문법

예제 2-1) 변수, 자료형 종합 실습 예제

자바스크립트의 변수, 자료형을 실습하기 위한 종합 예제 입니다. 다양한 방법으로 변수를 선언하고 문자열 변수를 사용하는 방법도 실습 합니다.

2-1.html

코드 설명


예제 2-2) 호이스팅 예제

본격적으로 자바스크립트 예제를 살펴보기전에 구현해 보는 간단한 예제 입니다. 화면이 로딩되면 이름을 물어보고 입력된 이름을 브라우저 화면에 출력해 줍니다.

2-2.html

코드 설명


예제 2-3) 출력문 예제

자바스크립트에서의 기본 출력은 console, alert, document 입니다. 실제 웹 프로그램 개발에는 DOM과 CSS를 조작하해서 콘텐츠를 변경하거나 디자인을 변경하는 방법을 사용합니다. 여기서는 세가지 방법을 이용한 출력을 예제를 통해 살펴 봅니다.

2-3.html

코드 설명

본문의 내용을 처리하는 부분은 3장 이벤트와 DOM 예제에서 자세히 살펴봅니다.


예제 2-4) 제어문 종합 실습 예제

제어문을 실습하기 위한 간단한 예제 모음 입니다.

switch

화면이 로딩되면 이름을 물어보고 입력된 이름을 브라우저 화면에 출력해 줍니다.

2-4-1.html

for

중첩 for 문을 사용해 구구단을 출력 합니다.

2-4-2.html

for, while, forEach

배열 데이터를 이용한 for, while, forEach 예제 입니다. 집합형 데이터를 처리하는 경우 일반적인 for 문 보다 forEach 가 편리한 경우가 많습니다.

2-4-3.html

for-in, for-of-for

배열 데이터를 이용한 for, while, forEach 예제 입니다. 집합형 데이터를 처리하는 경우 일반적인 for 문 보다 forEach 가 편리한 경우가 많습니다.

2-4-4.html


예제 2-5) 배열, 자료구조 종합 실습 예제

배열 데이터를 다루기 위한 다양한 함수들과 MAP, SET 자료구조를 활용하는 방법을 배우기 위한 예제 모음 입니다.

다양한 배열 선언

기본적인 배열이외 데이터형이 혼합된 배열, 객체형 배열의 선언과 참조 방법을 실습 합니다.

2-5-1.html

배열관련 함수 사용

배열에서 제공되는 다양한 함수를 통해 원하는 데이터 조작을 실습 합니다.

2-5-2.html

Map 기본 예제

Map의 기본적인 사용법을 익히고 다양한 방법으로 Map 데이터를 출력해 보는 예제 입니다.

2-5-3.html

Set 기본 예제

Set의 기본적인 사용법을 익히고 다양한 방법으로 Set 데이터를 출력해 보는 예제 입니다.

2-5-4.html

예제 2-6) 함수, 객체 종합 실습 예제

함수와 객체는 실제 프로그램을 설계하고 개발하는데 핵심적인 역할을 담당합니다. 간단한 함수 예제와 함께 객체를 활용한 응용 예제들을 실습 합니다.

함수 관련 예제

2-6-1.html

객체 이니셜라이저

2-6-2.html

생성자, 클래스

2-6-3.html


3장. 이벤트와 DOM

예제 3-1) 이벤트 핸들러

자바스크립트에서 이벤트를 처리하는 방법으로 HTML 속성으로 지정하는 방법과 자바스크립트에서 DOM 엘리먼트를 이용해 콜백함수를 구현하는 방법을 사용한 예제 입니다.

3-1.html

예제 3-2) DOM 핸들링

document 를 통해 제공되는 다양한 DOM 핸들링 메서드를 이용해 HTML 문서에서 원하는 요소를 선택하는 예제 입니다.

3-2.html

예제 3-3) 이벤트 종합 예제

이름과 전화번호를 입력하고 저장 버튼을 누르면 하단 목록에 입력 내용을 계속 추가해 나가는 종합예제 입니다.

html 양식 작성

다음과 같이 간단한 양식을 만듭니다.

<html>
  <body>
    <h2>주소록 예제</h2>
    <form>
      이름: <input type="text" name="name"><br> 전화번호: <input type="text" name="tel"><br>
      <input type=button value="저장" onclick='addAddr()'>
      <input type=button value="리셋" onclick='resetAddr()'>
      <input type=button value="배경변경" onclick='changeBg()'>
    </form>
    <hr>
    <h3>주소록 목록</h3>
    <ul id="addrlist">

    </ul>
  </body>
</html>

자바스크립트 작성

스크립트부는 addAddr(), resetAddr(), changeBg() 메스드로 구성.

function addAddr() {
	  const result = document.getElementById('addrlist');
    const newAddr = document.getElementsByName("name")[0].value + ' , ' + document.getElementsByName('tel')[0].value;

    const item = document.createElement('li');
    const txt = document.createTextNode(newAddr);

    item.appendChild(txt);
    result.appendChild(item);
}

function resetAddr() {
	document.getElementById('addrlist').innerHTML="";
}

function changeBg() {
	body=document.querySelector('body');
  body.className="bgyellow";
}

CSS 작성

CSS 는 body 태그와 .bgyellow 클래스로 구성. 버튼 클릭시 body 의 클래스를 bgyellow 로 지정함.

body {
  background-color:white;
}

.bgyellow {
  background-color:yellow;
}

전체소스 및 실행해보기

js3-3.html


Quiz-1) To Do 앱 구현

웹상에서 할일을 관리하는 To Do 앱을 html, css, javascript 를 이용해 구현해 봅니다.

실행 결과

5-4결과

요구 사항

html 코드

기본 HTML 코드는 다음과 같이 작성 합니다.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
    <title>Document</title>
</head>

<body>
    <div class="container shadow mx-auto mt-5 p-5 w-50">
        <h2>My To-Do App</h2>
        <hr>
        <form>
            <div class="input-group">
                <input id="item" class="form-control" type="text" placeholder="Input new todo">
                <button id="newBtn" type="button" class="btn btn-info">New Entry</button>
            </div>
        </form>
        <hr>
        <ul id="todolist" class="list-group"></ul>
    </div>
    <script>

    </script>
</body>
</html>

<li> 요소 디자인

등록시 동적으로 추가되는 요소는 다음과 같이 생성된다고 가정 합니다.

<li class="list-group-item list-group-item-action list-group-item-warning d-flex justify-content-between align-items-center">
<button class="close">&times;</button>
</li>

작성 요령


Quiz-2) 어코디언 UI 구현

웹상에서 한화면에 여러 정보를 보여주는 경우 필요에 따라 선택된 부분만 보여주고 나머지는 가리는 형태가 있습니다. 보통 늘어나고 줄어드는 모습이 어코디언 악기의 동적 모습과 비슷하다고 하여 어코디언 UI라고 합니다. 여기서는 순수 자바스크립트 코드만으로 간단한 어코디언 UI 를 구현해 봅니다.

실행 결과

JS퀴즈2

요구 사항

html 코드

기본 HTML 코드는 다음과 같이 작성 합니다.

<!DOCTYPE html>
<html>
<head>
    <style>
        .accordion {
            background-color: #eee;
            color: #444;
            cursor: pointer;
            padding: 18px;
            width: 80%;
            border: none;
            outline: none;
            font-size: 15px;
            transition: 0.4s;
        }

        .accordion:hover {
            background-color: #ccc;
        }

        .panel {
            padding: 0 18px;
            background-color: white;
            max-height: 0;
            width: 80%;
            overflow: hidden;
            transition: max-height 0.2s ease-out;
        }
    </style>
</head>

<body>
    <div align=center>
        <h2>Accordion</h2>
        <hr>
        <button class="accordion">Section 1</button>
        <div class="panel" align=left>
            <p>Lorem ipsum dolor sit amet...</p>
        </div>

        <button class="accordion">Section 2</button>
        <div class="panel" align=left>
            <p>Lorem ipsum dolor sit amet...</p>
        </div>

        <button class="accordion">Section 3</button>
        <div class="panel" align=left>
            <p>Lorem ipsum dolor sit amet...</p>
        </div>

        <script>
        </script>
    </div>
</body>
</html>

어코디언 요소 디자인

어코디언 요소를 구현하는 방법은 다양하지만 여기서는 다음과 같이 button, div 의 구조를 사용합니다.

<button class="accordion">Section 1</button>
<div class="panel" align=left>
    <p>Lorem ipsum dolor sit amet...</p>
</div>

작성 요령