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

화면이 로딩되면 등급을 물어보고 입력된 등급에 따른 메시지를 브라우저 화면에 출력해 줍니다. 입력값이 A,B,C가 아닌경우 No Level 을 출력 합니다.

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) 메인화면 탭 메뉴 구현

홈페이지 메인화면에서 사용할 수 있는 탭기반의 메뉴를 구현해 봅니다. 넓은 배너 영역이 있고 4개의 탭 메뉴를 선택하면 배너 영역의 색상과 내용이 변경되는 구조 입니다.

실행 결과

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">
    <title>Document</title>
</head>

<body>
    <div id="About" class="content">
      <h1>About</h1>
      <p>Custom Software Development Company</p>
    </div>

    <div id="Products" class="content">
      <h1>Products</h1>
      <p>Building tailored software to address critical needs of global enterprises.</p>
    </div>

    <div id="Technology" class="content">
      <h1>Technology</h1>
      <p>Machine Learning, Artificial Intelligent, Cloud Platform.</p>
    </div>

    <div id="Downloads" class="content">
      <h1>Downloads</h1>
      <p>You can download a free 10 days trial.</p>
    </div>

    <button id="default" class="tab" onclick="openMenu('About', this, 'tomato')">About</button>
    <button class="tab" onclick="openMenu('Products', this, 'darkolivegreen')">Products</button>
    <button class="tab" onclick="openMenu('Technology', this, 'dodgerblue')">Technology</button>
    <button class="tab" onclick="openMenu('Downloads', this, 'orange')">Downloads</button>

    <script>

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

css 코드

기본 CSS 코드는 다음과 같이 작성 합니다. 외부 CSS 파일 혹은 임베디드 CSS 로 작성할 수 있습니다.

/* tab button */
.tab {
    background-color: #555;
    color: white;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    font-size: 17px;
    width: 25%;
}

/* change background color when mouse over */
.tab:hover {
    background-color: #777;
}

/* default content */
.content {
    color: white;
    display: none;
    padding: 50px;
    text-align: center;
}

/* Style each tab content individually */
#About { background-color: tomato; }
#Products { background-color: darkolivegreen; }
#Technology { background-color: dodgerblue; }
#Downloads { background-color: orange; }

openMenu() 함수

각각의 탭이 클릭되었을때 호출되는 함수로 오픈할 타켓의 id, 호출한객체(this), 변경할 tab색상 을 인자로 가진다.

function openMenu(target, seltab, color) {

}

작성 요령

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>

작성 요령