happy cat image

everdevel

Web Technology, 에버디벨

UI 변경

EEOS

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

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

내용 변경하기

오늘 배울 내용은 text(),html() 함수 입니다.

text()

어떤 p태그 안에 내용이 hello가 있다면 text()를 사용해서 konnichiha로 변경할 수 있습니다.

신기하죠? 그럼 한번 해볼까요?

HTML

<p class="change_greeting">hello</p>

jQuery

$('.change_greeting').text('konnichiha');

이렇게 되면 change_greeting가 감싸고 있는 텍스트는 konnichiha로 변경됩니다.

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>EVERDEVEL :: 제이쿼리 강좌</title>
<script type="text/javascript"
src="http://code.jquery.com/jquery-2.1.0.min.js">
</script>
<script type="text/javascript">
$(function(){
  $('.change_greeting').text('konnichiha');
});
</script>
</head>
<body>
    <p class="change_greeting">hello</p>
</body>
</html>

이 소스 실행 버튼을 눌러서 결과를 확인해 보시기 바랍니다.
^^결과를 확인하셨나요?
hello가 아닌 konnichiha가 출력이 되죠?
모터에 전기를 공급하면 모터가 정방향으로 빠르게 회전 하죠?
LED에 전기를 공급하면 다이오드에서 빛이 발광하죠?
모터의 반대로 역방향으로 돌리면 모터는 전기를 생산합니다.
LED는의 빛이 발광하는 부분에 역으로 우리가 빛을 공급해주면 어떻게 될까요?
LED는역으로 전기를 생산합니다.
text()안에 아무것도 쓰지 않는다면 역으로 해당하는 요소의 글을 가져온답니다.
text()의 괄호 안에 어떠한 문구를 써 넣으면 해당하는 요소의 텍스트를 괄호안의 문구로 변경해주는데요.
반대로 아무것도 쓰지 않는다면 해당하는 요소가 감싸는 텍스트를 가지고 오는 기능도 있답니다.
아래는 클래스 hello감싸는 텍스트hello를 jquery의 text()가 값을 가져와서 alert창으로 띄워주는 소스 입니다.

HTML

<p class="hello">hello</p>

jQuery

var i = $('.hello').text();
alert(i);

아래의 소스 웹에서 보기 버튼을 눌러서 확인해 보시기 바랍니다.

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>EVERDEVEL :: 제이쿼리 강좌</title>
<script type="text/javascript"
src="http://code.jquery.com/jquery-2.1.0.min.js">
</script>
<script type="text/javascript">
    $(function(){
        var i = $('.hello').text();
        alert(i);
    });
</script>
</head>
<body>
<p class="hello">hello</p>
</body>
</html>

text()에 대해서 알아봤는데요.
이번에는 html();에 대해서 알아봅시다.

html()

html()도 text()와 비슷한 기능인데요.
text()은 텍스트만 불러오지만 html()은 html태그도 불러 옵니다.

$('.class_Name').html('hello');

위와 같이 괄호 안에 태그를 사용할 수 있습니다.
위의text()예제를 html로 변경해서 사용할게요. hello 를 볼드가 들어간 konnichiha로 변경해주는 소스입니다.

HTML

<p class="change_greeting">hello</p>

jQuery

$('.change_greeting').html('<b>konnichiha</b>');
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>EVERDEVEL :: 제이쿼리 강좌</title>
<script type="text/javascript"
src="http://code.jquery.com/jquery-2.1.0.min.js">
</script>
<script type="text/javascript">
$(function(){
    $('.change_greeting').html('<b>konnichiha</b>');
});
</script>
</head>
<body>
<p class="change_greeting">hello</p>
</body>
</html>

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

EEOS 신청하기 EEOS 알아보기

강좌로 돌아가기