happy cat image

everdevel

Web Technology, 에버디벨

UI 변경

EEOS

에버디벨 책을 학습할 수 있는 클라우드 개발 환경을 제공합니다.
개발환경구축없이 태블릿에서도 개발할 수 있는 책의 예제와 프로젝트
오직 당신을 위한 스토리지, URL, DB, 무제한 트래픽
그리고 웹기반 개발환경을 제공합니다.

더 알아보기
클라우드 개발환경 제공 (로그인 후 메인에서 EEOS 클릭)

클릭 했을때 무언가 실행하기

우리가 어떠한 요소에 클릭을 했을때 어떠한 현상이 일어나게끔 하는것을 오늘 배워 보도록 합시다. (너무진도가 빠른건가 -_-^;)

상황1

hello world라는 문구를 클릭했을때 hello world가 사라지게끔 해봅시다.^^

click() 이용하기

click시에 어떠한 이벤트가 발생하기 위해서는 click()함수를 사용합니다. 사용방법은 간단합니다.

자신이 누르고 싶은 요소를 선택자로 작성하고.click(function(){를 써주면됩니다. 이해가 되시나요?

만약,

<div class="content">Hello world!!</div>

를 작성하였다고 합니다. 그럴 경우 위의 hello world!!!를 클릭 한다는 것을 제이쿼리로 표현을 해본다면
먼저 content 클래스를 선택합니다.

$('.content')

위와 같이 선택을 하게 되죠?
그리고 선택자 뒤에 점을 찍고 클릭 함수를 적어줍니다. click(); 이렇게 하면 아래의 모양이 됩니다.

$('.content').click();

그러면 클릭을 했으면 어떠한 일이 일어나야 겠죠? 일이 일어나게 할려면 function(){} 가 필요합니다. 이것은 클릭을 할때 어떠한 일이 생기게끔 해야 하므로 클릭변수 click()안에 넣어 주게 됩니다. 그러면 모양이 이렇게 되죠?

$('.content').click(function(){});

그러면 일이 일어나야 하는 대상체는 어디에다가 쓸까요? 바로 function(){}의 {}안에 넣게 됩니다.
제가 하는 말이 어려울 수 있지만 위의 형태를 자주 타이핑 하면 저절로 쉽게 외워집니다. (인내심을......)
우리는 hello world를 클릭시에 hello world 자기 자신이 사라지게끔 하는 기능을 구현하려고 하기때문에 {}안에 hello world를 감싸는 클래스
content를 선언해줍니다.
그러면 모양이 이렇게 되죠? 보기 쉽게 하기 위하여 {}사이에 엔터를 쳐서 줄을 바꾸겠습니다.

$('.content').click(function(){
  $('.content');
});

위와같이 {}사이에 $('.content')를 선언했습니다. 그런데 어쩌라고??
바로 여기에서 사라지는 함수를 사용해야 합니다. 그것은 바로 두둥!! hide();입니다. 이 하이드 함수를 클래스 content 옆에 붙여줍니다. 점을찍고 hide();를 적어줍니다. 아래와 같이

$('.content').click(function(){
  $('.content').hide();
});

위와 같습니다. 그러면 한번 이 소스를 구현해 봅시다.

그래서 결론 소스는

$(function(){
    $('.content').click(function(){
        $('.content').hide();
    });
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>제이쿼리</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.2.0.min.js" ></script>
<script type="text/javascript">
$(function(){
  $('.content').click(function(){
    $('.content').hide();
  });
});
</script>
</head>
<body>
<div class="content">hello world<div>
</body>
</html>

그럼 하나 더 해봅니다. 다음은 show버튼과 hide버튼 2개의 버튼을 생성해서 hello world가 보이게도 또는 안보이게도 하는것인데요.. 해봅시다.

Hello world!!!

위의 기능을 구현하기 위해서 사용된 소스는 너무 너무 간단합니다. 처음보는 show()라는 것을 사용했는데요.보여주는 함수 입니다. 똑같은 형식의 소스를 하나더 써주고 hide()를 show()로 바꿔줬을뿐입니다. 일단 이렇게 간단하게 구현을 해보았습니다. ^^

$(function(){
  $('.btn_show').click(function(){
    $('.btn_word').show();
  });
  $('.btn_hide').click(function(){
    $('.btn_word').hide();
  });
});

전체 소스 보기

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>제이쿼리</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.2.0.min.js" ></script>
<script type="text/javascript">
$(function(){
  $('.btn_show').click(function(){
    $('.btn_word').show();
  });
  $('.btn_hide').click(function(){
    $('.btn_word').hide();
  });
});
</script>
</head>
<body>
<button class="btn_show" style="padding:3px">show</button>
<button class="btn_hide" style="padding:3px">hide</button>
<div class="btn_word">Hello world!!!</div>
</body>
</html>

2019년 에버디벨이 제안하는 클라우드 개발환경(EEOS)이 드디어 오픈했습니다.
이제 개발환경구축없이 웹브라우저에서 웹개발하자
HTML5, CSS3, JavaScript를 넘어 MySQL, PHP까지
앞으로 지원 언어는 더 늘어날 예정 react, node, angular등
웹브라우저만 있다면 기기도 가리지 않아요. 이제 아이패드에서도 웹개발해요.!!
자기만의 클라우드 에디터, 저장공간, 데이터베이스, 접속 URL(eeosXXX.adjkl.com/eeos/)을 제공해요.
현재 웹코딩 시작하기와 PHP200 독자는 mybook(책과 관련된 기능 제공)에서 사용할 수 있습니다.

EEOS 신청하기 EEOS 알아보기

강좌로 돌아가기