자바 스크립트 응용 style="display:none;" style="display:inline;" 로 넌센스 퀴즈 만들기
우선 자바스크립트의 사용자 함수를 정의 하고 지난 시간에 다룬document.getElementById 메소드와
.innerHTML 객체 그리고 .setAttribute ()메소드를 이용 하여 체크폼 속에 내용을 css로 적용 해 보고 적용 되어 지는 내용의 결과를 보면서 액션이 이루어지는 과정에 대한 공부를 하도록 해 봅니다.
아래는 자바 스크립트와 html태그의 div태그에 적용된 스타일과 소스 입니다.<style>
.red{font-size:20px; color:red;}
.blue{font-size:20px; color:blue;}
#tast1{font-size:20px; color:blue; display:none;}
</style>
<script>
function chkfrm(a){
var a=document.getElementById ("megu").value;
if (a==""){
document.getElementById ("test").innerHTML="답을 입력 하지 않았습니다.";
document.getElementById ("test").setAttribute('class','red');
}else {document.getElementById("test").style.display="inline";
document.getElementById("test").setAttribute('class','blue');
}
}
</script>
<input type="text" name="memo" id="megu">
<input type="button" value="확인" onclick="chkfrm()">
<div id="test"></div>
다른 웹언어 도 그렇지만 Javascript 는 특히 약속과 대입의 언어 라고 할수가 있을것 같습니다.
다른 언어 역시 서로 약속된 기호나 부호들로 웹에 기록 하고 브라우져로 표현 하는 것은 기본으로 하지만
자바스크립트의 함수는 그중 특히 대입의 언어라고 생각 될만큼 대입되는 경로를 잘 파악 하지 못 하면
상당히 힘든 언어 인것 같습니다.
그리고 영어나 외국어 공부에서 단어를 많이 암기 할수록 유리 하게 작용 하는 것 처럼
자바스크립트 역시 수없이 많은 인자나 요소명들을 갖고 있어 끊임 없이 이름과 뜻을 암기 하지 않으면
진도를 나가기가 벅찬 것 같습니다.
그리고 구슬이 서말 이라도 꿰어야 보배 라는 말 처럼 자바 스크립트를 실제 웹 상에 응용 하여 원하는 프로그램을 만들수 있느냐가 중요 한 것이며 진정한 자바스크립트를 배우는 목적이 아닐까요
위의 소스를 보시면 document.getElementById()
라는 메소드를 함수 로직안에 두어 Id가 뭐뭐인 태그 에 접근해 값을 주는 역할을 하는 약속된 함수 라고 할수가 있습니다.
이렇게 이미 원천적으로 만들어 제공 되는 함수를 가리켜 내장 메소드 라고 하는 것이죠
이렇게 이미 원천적으로 만들어 제공 되는 함수를 가리켜 내장 메소드 라고 하는 것이죠
폼 안에 내용을 입력 하지않은 경우 css스타일의 red클래스가 적용된 결과를 볼수 있으며
정답을 입력시엔 blue클레스가 적용되면서 답안지의 결과를 확인 할수 있습니다.
아래는 폼내 의 정답 유무에 따라 도출되는 결과값에 따라 컬러와 display가 다르게 적용 되는것을 확인 할수가 있습니다.
그것은 style의 display:none를 display:inline로 체인지 해 줬기 때문에 원래 있었지만 보이지 않든 것을 보이게 만든 것이죠
소스보기로 하면 보이지만 브라우져에는 보이지 않토록 하는 속성자가 있는데요 이렇게 아래 처럼 스타일로 설정 하면 됩니다.
<div id="aa" style="display:none">숨겨진 글자</div>이렇게 display:none으로 감춰진 글자를 드러내기 위해 서는 <div id="aa" style="display:none">숨겨진 글자</div>를 <div id="aa" style="display:inline;>숨겨진 글자</div> 이렇게 바꿔 줘야 되는데요 그렇게 바꾸기 위해서는 직접 에디터로 접근해서 태그의 속성값을 바꾸는 방법이 있지만 그것은 자바 스크립트 적 이지 못한 방법이죠 브라우져 상에서 버튼으로 기능을 제어 할수 있도록 하는 것이 바로 자바스크립트가 가진 동적기능으로 스크립트 기능의 핵심 이라 할수가 있죠 자 이제 이렇게 숨겨져있는 글자를 드러내도록 하면서 그 드러난 글자가 넌센스 퀴즈의 답이라면 좀더 퀴즈를 보는 재미가 더하겠지요
우선 정답을 div태그에 감싼후에 그 div태그에 위처럼 아이디id명을 주고 클래스 명을 같이 줘도 상관 없습니다.
그런후에 스타일정의를 display:none속성과 속성값을 주어 감추어 줍니다.
그리고 아래와 같은 스크립트를 만들어 주도록 합니다.
<script>
function chkfrm(a){
var a=document.getElementById("megu").value;
if (a==""){
document.getElementById("test1").innerHTML="답을 입력 하지 않았습니다. ";
document.getElementById("test1").setAttribute('class','red');
}else{
document.getElementById("tast1").style.display="inline";
document.getElementById("tast1").setAttribute('class','blue');
}
}
</script>
스크립트와 태그의 순서에는 상관이 없으니 아래에다 퀴즈 문제와 숨기는 태그를 만들어 주도록 합니다.
그리고 사용자가 정답을 입력 할수 있도록 인풋 창을 하나 만들고 이벤트 메소드가 걸린 확인 버튼을 만들어 주도록 합니다.
" 낯선 여자에게서 내 남자의 향기를 느꼈다 " 를 5자로 줄이면 ...
<input type="text" name="memo" id="megu"> <input type="button" value="확인" onclick="chkfrm(test1)">
<div id="test"></div><p></p><div id="tast1">?? 정답???</div><p></p>
위처럼 이런 모습으로 만들어 주도록 합니다.
퀴즈 문제가 여러개 이면 퀴즈의 갯수에 맞도록 메서드를 따로 생성 해 줘야 하기 때문에 id명과 태그명에 순서를 가진 이름을 설정 하면 관리하기가 편하겠죠.
실제 적용 하는 스타일은 헤드부에 기록 해 두며 화면상에는 드러나지 않습니다.
인풋 창안에 아무것도 입력 하지 않고 확인 버튼을 눌러 보고 글을 입력 하고 확인 버튼을 눌러 봅니다.
위의 소스는 아래 처럼 결과가 도출 되도록 만든 것이죠
혹시 이년이?
" 나보다 조금 더 높은 곳에 네가 있을 뿐 " 을 6자로 줄이면?
니 거기 와 있노?
슈퍼맨의 가슴에 있는 " S " 자는 무엇의 약자인가?
스판
3개 국어를 동시에?
핸들 이빠이 꺽어.
쓰레기 통에 뚜껑을 덮어 놓은 이유는?
먼지 들어갈까봐
아몬드가 죽으면?
다이아몬드
애 낳다가 죽은 여자?
다이애나
" 당신은 시골에 삽니다 " 를 세자로 줄이면?
유인촌
꽃이 제일 좋아하는 벌?
재벌
콜라와 마요네즈를 섞으면?
버려야 한다
곤충의 몸을 3등분하면?
죽.는.다.
뉴코아 백화점이 무너지지 않는 이유?
리본으로 묶어 나서...
가짜 휘발유를 만들 때 가장 많이 들어가는 재료는?
진짜 휘발유
무엇이든지 혼자 다 해먹는 사람은?
자취생
소금이 죽으면?
죽염
애들이 학교에 가는 이유는?
학교가 올수 없으니까
우유를 여섯 글자로 늘이면?
송아지 쭈쭈바
소가죽을 입고 사는 황금벌레를 여섯 자로 하면?
우피 골드 버그
똥인지 된장인지 안먹어봐도 안다. -人之常情 (인지상정) -
똥인지 된장인지 먹어봐야 안다. - 事實確認 (사실확인) -
똥인지 된장인지 먹어봐도 모른다. - 人事不省 (인사불성) -
똥인지 된장인지 먹어보고 똥이 맛있다고 한다. - 特異體質 (특이체질) -
먹은만큼 싼다. - 萬古眞理 (만고진리) -
먹은 것보다 적게 싼다. - 財産隱匿 (재산은닉) -
먹은 것보다 많이 싼다. - 바보아냐(?) -
용변을 보고 나면 손을 씻는다. - 病菌洗滌 (병균세척) -
그걸로는 모자라서 라이타불로 지진다. - 完全撲滅 (완전박멸) -
기분좋게 일보는데 똥물이 튀어 올랐다. - 不意一擊 (불의일격) -
너무 많이튀어올라 엉덩이 전체가 젖었다. - 作業尨大 (작업방대) -
건더기도 튀어올라 붙었다. - 疊疊山中 (첩첩산중) -
겨우 닦아내고 나와야 했다. - 엉거주춤(?) -
고장난 문을 억지로 잠궜는데 문이 안열려 갖혀버렸다. - 自繩自縛 (자승자박) -
누군가 문이 고장났는지 안에서 난리를치고 있다. - 오도방정 -
변비고생 3일째, 그러나또 실패했다. - 作心三日 (작심삼일) -
변비고생 4일째, 내일은 쌀 수 있을거 같다. - 四顚五起 (사전오기) -
오늘이 8일째, 손꾸락이라도 집어 넣으리라. - 死生決斷 (사생결단) -
재래식 변소에 10원짜리 동전이 빠졌다. - 袖手傍觀 (수수방관) -
500원짜리 동전이 빠졌다. - 에이쉬펄(?) -
1000원짜리 지폐가 빠졌다. - 右往左往 (우왕좌왕) -
5000원짜리 지폐가 빠졌다. - 안절부절 -
10000원짜리 지폐가 빠졌다. - 理判事判(이판사판) -
100000원짜리 수표가 빠졌다. - 旦潛水 (일단잠수) -
친구 놈이 10원짜리 동전 건지려다 변소에 빠졌다. - 拍掌大笑 (박장대소)-