js 함수를 html 안에 바로 넣기 > 그누보드5 팁자료실

그누보드5 팁자료실

js 함수를 html 안에 바로 넣기 정보

js 함수를 html 안에 바로 넣기

본문

 

http://www.mediaplayer.kr/main/bbs/html_editor.php

위 링크에서 직접 확인해 보세요. 좌측창에 코드 붙이고 결과보기 클릭하면 우측창에 결과가 나옵니다.

 

1. 우리가 보통 버튼 이벤트를 줄 때는 아래와 같은 형태를 사용합니다.


<style>
#my {
    width:200px;
    padding:5px;
    text-align:center;
    background-color:#eeeeee;
    border:1px solid #cccccc;
}
</style>
<div id=my>내용물</div>
<span id=you style=cursor:pointer>클릭</span>
<script>
you.onclick = function() {
    my.style.textAlign = "left";
    my.style.backgroundColor = "#ffffff";
    my.style.border = "1px dashed #900000";
    my.innerText = "그누보드";
}
</script>

 

아니면 함수만 만들고 클릭이벤트가 일어나는 엘레먼트 안에 onclick 으로 연결해도 되구요.


<style>
#my {
    width:200px;
    padding:5px;
    text-align:center;
    background-color:#eeeeee;
    border:1px solid #cccccc;
}
</style>
<div id=my>내용물</div>
<span id=you style=cursor:pointer onclick=youClick()>클릭</span>
<script>
function youClick() {
    my.style.textAlign = "left";
    my.style.backgroundColor = "#ffffff";
    my.style.border = "1px dashed #900000";
    my.innerText = "그누보드";
}
</script>

 

하지만 때에 따라서는 엘레먼트 안에 함수의 내용을 직접 입력해도 됩니다.

단 그럴때는 쌍따옴표로 두르고 쌍따옴표 안에는 홑따옴표만 들어가야 합니다.


<style>
#my {
    width:200px;
    padding:5px;
    text-align:center;
    background-color:#eeeeee;
    border:1px solid #cccccc;
}
</style>
<div id=my>내용물</div>
<span id=you style=cursor:pointer onclick="my.style.textAlign = 'left'; my.style.backgroundColor = '#ffffff'; my.style.border = '1px dashed #900000'; my.innerText = '그누보드';">클릭</span>

 

--------------------

 

본문의 내용과는 상관이 없지만

같은 구문이 반복될 경우는 함수를 만들 때 with 블럭으로 감는 것이 소스가 간명합니다.


<style>
#my {
    width:200px;
    padding:5px;
    text-align:center;
    background-color:#eeeeee;
    border:1px solid #cccccc;
}
</style>
<div id=my>내용물</div>
<span id=you style=cursor:pointer onclick=youClick()>클릭</span>
<script>
function youClick() {
    with (my.style) { // with 블럭 적용
        textAlign = "left";
        backgroundColor = "#ffffff";
        border = "1px dashed #900000";
    }
    my.innerText = "그누보드";
}
</script>
추천
2

댓글 5개


자바스크립트야말로 프론트의 제왕이지요.

인간을 예를 들자면
벌거벗은 몸뚱아리와 기본골격이 html 이고
여기에 화장과 옷을 입혀 꾸미기를 하는 것이 css 이고
보이지 않는 내부의 호흡기나 혈액기관이나 내장기관이 백단과 php 라고 할 수 있지요.
이것들만 가지면 다 될 것 같지만 그리한다면
그 자리에 부동으로 서 있는 인간만이 존재합니다.

자바스크립트는 동적인 움직임을 가능하게 하지요.
자바스크립트 없는 웹페이지는 생명은 있지만 움직이지 못하는 식물일 뿐이에요.
자바스크립트가 약하면 집안에서 간신히 돌아다니는 집돌이의 운명일 수 밖에 없지만
자바스크립트를 잘 하면 류현진이나 손흥민같은 역동적인 활동을 할 수 있습니다.

쏟아져 나오는 js계열의 프레임워크는 이제 백단까지 점령하려고 합니다.
코딩이 존재하는 한 영원히 망하지 않을 것 같은 1순위 언어가 제가 생각하기로는 자바스크립트입니다. 물론 라이브러리나 프레임워크는 유행을 타겠지만요.
"자바스크립트가 약하면 간신히 돌아다니는 집돌이의 운명일 수 밖에 없지만..."이 말씀에 지극히 공감합니다.
제 홈페이지가 저와 가까운 사람만 보는 집돌이 인것 같습니다.^^
비타주리님의 스킨과 팁을 보면서 자바스크립트를 많이 공부해야겠다는 생각이 듭니다.
전체 2,411 |RSS
그누보드5 팁자료실 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT