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>
댓글 17개
저는 굉장히 많이 사용하는 편이구요.
저는 자바스크립트를 w3school에서 처음 접했는데요
비타주리님 코드를 보면서 많이 배우고 있습니다.
모르는 부분은w3school에서 찾아보기도 하고요
유용한 팁 많이 공개해주세요 ^^
코드는 장기와 같습니다. 차포마상 가는 길은 누구나 다 알지요. 문제는 그 운용이라고 생각해요. 운용에서 모두가 아는 길인데 하수와 고수의 차이가 극명하게 나지요.
자바스크립트에서 자주 사용하는 함수와 속성과 메소드는 기껏해야 100개도 안 됩니다.
다른 언어도 마찬가지구요.
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/with#description
게시글 목록
| 번호 | 제목 |
|---|---|
| 16181 | |
| 16175 | |
| 16173 |
기타
일반적인 미디어쿼리
4
|
| 16172 |
PHP
특정 ip에서만 모바일 사용
|
| 16170 | |
| 16168 |
PHP
하루전 일주일전 한달전
1
|
| 16167 |
JavaScript
어제날짜, 내일날짜 구하기
|
| 16161 |
JavaScript
날짜형식 체크
2
|
| 16152 | |
| 16145 | |
| 16133 | |
| 16131 | |
| 16128 | |
| 16122 | |
| 16117 |
PHP
php async
3
|
| 16102 | |
| 16099 | |
| 16095 | |
| 16089 |
JavaScript
스택(stack)을 이용한 사칙연산(+ - * /) 계산기
4
|
| 16088 | |
| 16077 |
JavaScript
다양한 카운트다운 소스
6
|
| 16065 |
PHP
간단한 PHP 프레임워크
10
|
| 16060 |
jQuery
atj.js
3
|
| 16055 | |
| 16052 |
JavaScript
네이버 지도 api v3 주소->좌표 변환해서 출력하는 예제
5
|
| 16051 | |
| 16050 | |
| 16046 | |
| 16039 | |
| 16027 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기