[생활코딩] 웹어플리케이션 만들기 6일차

이 글은 오픈튜토리얼스의 생활코딩의 '웹어플리케이션 만들기'를 듣고 개인적으로 정리한 내용입니다. 

굵은 글씨로 된 제목을 누르시면 해당 강좌로 이동할 수 있습니다.

함수

 

   사람은 인지 능력에 한계가 있기 때문에 어느정도 복잡해지면 받아들일 수가 없다. 이를 위해 정리정돈 해야 하는 기술이 필요한데 이것이 함수다.

  여러 부품이 합쳐서 함수가 되고 여러 함수들이 하나의 함수로 만들 수 있다.

 

JS와 PHP의 함수 예제

  JavaScript(이하 JS)와 PHP에서는 'function 함수 이름( ){}'을 사용하여 선언하고 '함수이름( );'으로 사용을 한다.

 

return을 통한 값 반환

 

  'input'이 입력 값을 받아 함수의 계산을 거친 값을 'return'을 사용하여 출력 값을 반환한다. C언어와 사용 방법이 비슷하지만 함수를 처음 선언할 때 'function'과 함께 적어 선언 해야한다.

 

UI vs API

출처 : 생활코딩 (UI vs API)

 

  UI = User Interface, API = Application Programming Interface 를 말한다. 화면상에 나타나는 프로그램 창, 아이콘 등이 UI이고 Application이 무언가를 하기 위해서 프로그래밍적으로 System에게 전달하는 명령이 API라고 할 수 있다.

  prompt 창의 종료, 확인, 취소 버튼 등은 이미 만들어진 것이다. 이는 웹브라우저가 prompt 명령을 받고 운영체제에서 기본적으로 제공되는 것을 조립하여 화면상에 띄우는 것이다. 하지만 "비밀번호를 입력해주세요"는 개발자가 작성해서 만든 것이다.

  웹브라우저>운영체제>C>어셈블리어>기계어>전자공학>전기공학>물리학 으로 계속 파고들 수 있다. 각 Level 마다 API와 UI가 있고 그것이 교류하고 있다.

  웹브라우저가 갖고 있는 API뿐만 아니라 웹 어플리케이션 자체 내에서도 API를 갖고있는 경우가 많아졌다. 이런 API의 폭발적 증가와 쉬워진 프로그래밍 덕택에 이른바 API 전성시대가 도래했다고 할 수 있다.

JavaScript 실습

 

alert 함수 예제

 

  input 태그는 type, 즉 입력의 방식을 설정할 수 있고 value로 input에 대한 값을 부여하게 된다.

  alert 함수는 JavaScript함수이며 경고문을 띄우는 함수이다. input 태그에 있는 onclick, onfocus, onblur의 값들은 JS의 함수인 alert 함수로 값을 취할 수 있다.

 

사용자가 입력한 값을 alert 함수에 보내는 법

 

   텍스트 바에 입력된 값을 경고창에 뜨게끔 하는 방법은 다음과 같다. 먼저 type을 text로 설정한 코드에서 id 값을 부여하고 경고창을 뜨게 하는 함수인 alert의 입력 값을 'document.getElementById('id 값').value'를 한다. 이것은 해당 id가 갖고있는 value를 불러 사용한다는 뜻과 같다.

 

'강조' 버튼 누르기 전

 

 '강조' 버튼 누른 후

className 예제

  className을 이용하여 버튼 하나로 한꺼번에 텍스트 강조를 할 수 있다. 위 코드와 같이 꾸미려는 id 값을 부여하고 버튼 타입의 input의 onclick 값을 document.getElementById('target').className='em' 을 부여한다. 이것은 target이라는 id를 갖은 태그에 class 값을 em으로 설정한다는 것이다. head 태그 하위에 먼저 선언한 CSS 코드인 '.em'이 클래스 em에 대한 style을 나타내는 것이다. target에 없던 class를 부여하면서 underline으로 꾸며지는 것이다.

 

첫 페이지

black 버튼을 누르면 'class="black"'이 추가 된다.

white 버튼을 누르면 'class="white"'가 추가 된다.

해당 예제의 소스코드

'style.css'의 소스코드

 

  div 태그는 어떤 코드들을 하나로 묶는데 사용한다. 이를 묶어서 id 값을 'control'로 부여하였고 CSS에서는 #control을 사용하여 이에 해당하는 style을 부여하였다.

  버튼을 눌러 페이지의 배경화면을 검게 하거나 흰색으로 하기 위해서는 앞에서 실습해봤던 className을 이용하여 class 값을 바꾸는 것으로 구현할 수 있다. CSS에 클래스를 선언하는데 body.black, body.white가 그것이다. 각각 검은 배경, 흰 배경을 의미한다. HTML 문서에서는 두 개의 버튼을 선언하고 각각 onclick 값으로 document.getElementById('black' or 'white').className='black' or 'white' 을 입력하였다. 이렇게 함으로써 black 버튼을 눌렸을 때는 body의 class값이 black으로 바뀌어 배경화면이 검은 색으로 바뀌고 white 버튼을 눌렸을 때는 body의 class값이 white로 바뀌어 배경화면 다시 흰색으로 바뀐다.