프론트엔드 자바스크립트 프로그래밍 기초

자바스크립트 프로젝트


본 강좌는 자바스크립트를 이용하여 HTML와 CSS 뿐만 아니라 페이지를 동적으로 표현할 수 있도록 하는 종합 실습 페이지입니다. 간단한 회원가입 페이지부터 Accordion UI와 JSON 파일을 Ajax를 통해 통신하여 날씨 정보를 페이지에 나타낼 수 있도록 하는 3개의 프로젝트 예제로 구성 되어 있습니다.

이 강의를 통해 단순한 태그의 연습이 아닌 실제 개발 경험을 할 수 있으며 좀 더 현실적인 개발 상황에 맞는 응용력을 키울 수 있습니다.


2. Accordion UI 만들기

본 예제에서는 Section버튼을 누르면 그 Section속에 있는 내용을 펼쳤다 접는것을 반복할 수 있습니다.

Accordion UI 보기 결과

step-1> 레이아웃 분석하기

2-1결과

step-2> html 기본 구조 작성 (project2.html)

project2.html파일을 생성하고 기본적인 html 코드 작성을 위해 아래와 같이 코드를 입력합니다.

<!DOCTYPE html>
<html>
<head>
    <title>Project2.html</title>
    <style>

    </style>
</head>
<body>

</body>
</html>

step-3> Accordion CSS 속성 설정

<style>
.accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
}
결과보기 2-2결과

step-4> panel CSS 속성 설정

.panel {
    padding: 0 18px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}
결과보기 2-3결과

step-5> .active, .accordion:hover 속성 설정

Section부분에 마우스를 올렸을 때 색을 지정합니다.

.active, .accordion:hover {
    background-color: #ccc; 
}
</style>
</head>

step-6> Section 생성

<div align=center>

Accordion


<div class="panel" align=left>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

</div> ``` > 이후의 코드는 위의 코드와 반복되므로 코드가 너무 길어짐을 방지하기 위해 중략합니다. ### step-7> accordion의 기능을 수행하도록 하는 script 코드 - 클래스 이름이 accordion인 태그들을 acc 배열에 저장합니다. - 반복문을 이용해 acc[i] 클릭시 function이 수행하도록 이벤트를 등록합니다. - this.classList.toggle("active") 은 accordion 속성을 가지고 있는 element에 active속성 추가/제거 하여 Section 버튼을 누를 때마다 Accordion 기능이 활성화되고 비활성화 되는 것을 반복할 수 있습니다. - this.nextElementSibling을 통해 accordion클래스 다음의 클래스인 panel 클래스를 가지는 태그들이 panel변수에 저장됩니다. - panel의 maxHeight의 값이 0이 아니라면 null값으로 만들고, 값이 0이면 panel의 maxHeight값을 Section 내부의 내용만큼의 height로 만듭니다. ```html </div>

</html>

<details>
<summary>결과보기</summary>


<img alt="2-4결과" src="img/js_proj2_04.gif" width="80%" >

</details> 

### step-8> Accordion UI 전체 소스코드
<details>
<summary>전체 소스코드 보기</summary>

```html
<!DOCTYPE html>
<html>
<head>

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

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

.panel {
    padding: 0 18px;
    background-color: white;
    max-height: 0;
    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, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.  </p>
</div>

<button class="accordion">Section 2</button>
<div class="panel" align=left>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.  </p>
</div>

<button class="accordion">Section 3</button>
<div class="panel" align=left>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.  </p>
</div>

<script>
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
    acc[i].addEventListener("click", function() {
        this.classList.toggle("active");
        var panel = this.nextElementSibling;
        if (panel.style.maxHeight) {
            panel.style.maxHeight = null;
        } else {
            panel.style.maxHeight = panel.scrollHeight +"px";
        }
    });
}
</script>
</div>
</body>
</html>

</details>


3. JQuery Ajax 예제

본 예제에서는 Ajax 통신을 통해 날씨 정보 사이트에서 날씨 정보를 JSON 으로 받아와 파싱해서 날씨 아이콘과 날씨 정보를 함께 보여주는 예제입니다.

JQuery Ajax 통신 보기 결과

step-1> 레이아웃 분석하기

3-1결과

날씨 정보의 각 요소는 div 태그를 이용하여 아이콘, 지역, 온도, 시간으로 나누어주고, Hide를 통해 내용을 다시 숨길 수 있도록 합니다.

step-2> html 기본 구조 작성 (project3.html)

project3.html파일을 생성하고 기본적인 html 코드 작성을위해 아래와 같이 코드를 입력합니다.

<!DOCTYPE html>
<html>
<head>
    <title>Project3.html</title>


</head>
<body>

</body>
</html>

step-3> Ajax 통신을 통해 날씨 정보 가져오기

step-4> JSON 파일에서 정보 넘겨오기

3-1결과

step-5> 클래스가 get_weather인 a 태그 클릭시 호출되는 함수

$('a.get_weather').click(function(e) {
      e.preventDefault();
      $(this).hide();
      getWeather();
      $('#result').fadeIn(1000);
    });

step-6> 클래스가 hide인 a 태그 클릭시 호출되는 함수

 $('a.hide').click(function(e) {
      e.preventDefault();
      $('#result').hide();
      $('a.get_weather').show();
    })
  })
  </script>
</head>

step-7> 파싱해온 데이터를 보여주는 화면

Weather

Get weather