with 블럭 사용하기 > 개발자팁

개발자팁

개발과 관련된 유용한 정보를 공유하세요.
질문은 QA에서 해주시기 바랍니다.

with 블럭 사용하기 정보

JavaScript with 블럭 사용하기

본문

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

 

위 에디터에서 직접 확인하시면 더 좋습니다.

예를 들어서 하나의 div 등을 만들고 아이디를 하나 주고

엘레먼트의 형태가 바뀌는 아래의 이벤트를 주었습니다.

 

<div id=sir>그누보드</div>
<script>
sir.innerText = "비타주리";
sir.style.color = "#ff0000";
sir.style.padding = "10px";
sir.style.border = "1px solid #cccccc";
sir.style.borderRadius = "10px";
sir.style.textAlign = "center";
</script>

 

----------

 

이걸 with 블럭으로 감으면 코드가 상당히 매끈해 집니다.

 

<div id=sir>그누보드</div>
<script>
with (sir) {
    innerText = "비타주리";
    style.color = "#ff0000";
    style.padding = "10px";
    style.border = "1px solid #cccccc";
    style.borderRadius = "10px";
    style.textAlign = "center";
}
</script>

 

----------

 

아래처럼 사용해도 되겠지요.

with 블럭은 단순히 id 나 class 뿐만이 아니라 공통으로 엮인 부분은 모두 대상화 할 수 있습니다.

 

<div id=sir>그누보드</div>
<script>
sir.innerText = "비타주리";
with (sir.style) {
    color = "#ff0000";
    padding = "10px";
    border = "1px solid #cccccc";
    borderRadius = "10px";
    textAlign = "center";
}
</script>

 

----------

 

<div id=sir>그누보드</div>
<script>
with (sir) {
    innerText = "비타주리";
    with (style) {
        color = "#ff0000";
        padding = "10px";
        border = "1px solid #cccccc";
        borderRadius = "10px";
        textAlign = "center";
    }
}
</script>

추천
7

댓글 14개

고맙습니다 저도 많이 배읍니다
저는 자바스크립트를 w3school에서 처음 접했는데요
비타주리님 코드를 보면서 많이 배우고 있습니다.
모르는 부분은w3school에서 찾아보기도 하고요
유용한 팁 많이 공개해주세요 ^^
@김철용 영어 페이지는 안 봅니다. 공동제작을 하지 않는지라 깃헙도 통과입니다.ㅋ
코드는 장기와 같습니다. 차포마상 가는 길은 누구나 다 알지요. 문제는 그 운용이라고 생각해요. 운용에서 모두가 아는 길인데 하수와 고수의 차이가 극명하게 나지요.
자바스크립트에서 자주 사용하는 함수와 속성과 메소드는 기껏해야 100개도 안 됩니다.
다른 언어도 마찬가지구요.
전체 5,110
개발자팁 내용 검색

회원로그인

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