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
2
댓글 5개
감사합니다.
@들레아빠 감사합니다.
감사합니다. 자바스크립트 많이 배웁니다.^^
@김철용
자바스크립트야말로 프론트의 제왕이지요.
인간을 예를 들자면
벌거벗은 몸뚱아리와 기본골격이 html 이고
여기에 화장과 옷을 입혀 꾸미기를 하는 것이 css 이고
보이지 않는 내부의 호흡기나 혈액기관이나 내장기관이 백단과 php 라고 할 수 있지요.
이것들만 가지면 다 될 것 같지만 그리한다면
그 자리에 부동으로 서 있는 인간만이 존재합니다.
자바스크립트는 동적인 움직임을 가능하게 하지요.
자바스크립트 없는 웹페이지는 생명은 있지만 움직이지 못하는 식물일 뿐이에요.
자바스크립트가 약하면 집안에서 간신히 돌아다니는 집돌이의 운명일 수 밖에 없지만
자바스크립트를 잘 하면 류현진이나 손흥민같은 역동적인 활동을 할 수 있습니다.
쏟아져 나오는 js계열의 프레임워크는 이제 백단까지 점령하려고 합니다.
코딩이 존재하는 한 영원히 망하지 않을 것 같은 1순위 언어가 제가 생각하기로는 자바스크립트입니다. 물론 라이브러리나 프레임워크는 유행을 타겠지만요.
자바스크립트야말로 프론트의 제왕이지요.
인간을 예를 들자면
벌거벗은 몸뚱아리와 기본골격이 html 이고
여기에 화장과 옷을 입혀 꾸미기를 하는 것이 css 이고
보이지 않는 내부의 호흡기나 혈액기관이나 내장기관이 백단과 php 라고 할 수 있지요.
이것들만 가지면 다 될 것 같지만 그리한다면
그 자리에 부동으로 서 있는 인간만이 존재합니다.
자바스크립트는 동적인 움직임을 가능하게 하지요.
자바스크립트 없는 웹페이지는 생명은 있지만 움직이지 못하는 식물일 뿐이에요.
자바스크립트가 약하면 집안에서 간신히 돌아다니는 집돌이의 운명일 수 밖에 없지만
자바스크립트를 잘 하면 류현진이나 손흥민같은 역동적인 활동을 할 수 있습니다.
쏟아져 나오는 js계열의 프레임워크는 이제 백단까지 점령하려고 합니다.
코딩이 존재하는 한 영원히 망하지 않을 것 같은 1순위 언어가 제가 생각하기로는 자바스크립트입니다. 물론 라이브러리나 프레임워크는 유행을 타겠지만요.
@비타주리 "자바스크립트가 약하면 간신히 돌아다니는 집돌이의 운명일 수 밖에 없지만..."이 말씀에 지극히 공감합니다.
제 홈페이지가 저와 가까운 사람만 보는 집돌이 인것 같습니다.^^
비타주리님의 스킨과 팁을 보면서 자바스크립트를 많이 공부해야겠다는 생각이 듭니다.
제 홈페이지가 저와 가까운 사람만 보는 집돌이 인것 같습니다.^^
비타주리님의 스킨과 팁을 보면서 자바스크립트를 많이 공부해야겠다는 생각이 듭니다.