티스토리 뷰
먼저 오늘의 코드부터 보시죠.
<!DOCTYPE html>
<html>
<head>
<title>jQuery Basic</title>
<script src="http://code.jquery.com/jquery-3.1.0.js"></script>
<script>
$(document).ready(function () {
// 문서 객체를 추가합니다.
var output = '';
for (var i = 0; i < 256; i++) { //1번 i
output += '<div>'+i+'</div>';
}
document.body.innerHTML = output;
$('div').text(i); // 2번 i
// 스타일을 적용합니다.
$('div').css({
height: 20,
backgroundColor: function (i) { //3번 i
return 'rgb(' + i + ',' + i + ',' + i + ')';
}
});
});
</script>
</head>
<body>
</body>
</html>여기서 3번 i라는 변수가 나옵니다.
첫 번째 i는 for문에서 조건문을 만들기 위해 쓰였고
두 번째 i는 div에 텍스트 형식으로 값을 넣어주기 위해 쓰였고
세 번째 i는 div에 rgb 값을 지정해주기 위해 function에서 쓰였습니다.
여기서 각각의 i는 어떠한 값을 나타내고 있을까요??
첫 번째 i는 조건문에서 지정해주는 것 처럼 0부터 255까지 숫자가 지정됩니다. 그래서 for 문 안에서는 0부터 255까지 값을 갖게 되죠.
두 번째 i는 div에 값을 넣어주게 되는데 256이라는 값을 지니게 됩니다. 그래서 위 파일을 실행시켜보면 다음과 같이 div 하나당 숫자 하나씩 지정하게 됩니다.
세 번째 i는 첫 번째 i, 두 번째 i와는 별개의 i 입니다. var i인데 var의 특징은 키워드 생략이 가능하다는 점이죠. 그래서 새로 선언된 변수입니다. 근데 어떻게 0부터 255까지 지정이 되냐?
먼저 div가 앞서 for문에서 여러 개가 생성이 되었는데 총 256개로 배열의 형식으로 생성되었습니다. 그래서 div 배열의 크기는 256 이 되는 것이죠. 근데 여기서 function의 i는 배열의 인덱스를 가지고 함수를 실행합니다. 따라서 다음과 같이 인덱스 값에 따라 차례대로 div의 배경색이 정해지는 것이죠.
한 마디로 말하면 세 번째 i는 생성된 div의 인덱스 값을 받아 실행하기 때문에 0부터 255까지 값이 나왔던 겁니다.
저도 이 부분을 캐면서 흰 머리가 자라는 것 같았습니다. 다행히 멋쟁이 사자처럼 선생님께 질문드려서 해결되었죠..
여담이긴 한데 제가 공부를 하면서 느낀 점은 jquery도 언어라는 것을 느꼈습니다. 마치 토익을 900 이상 맞아도 원어민과 차이가 있다는 것 처럼 말이죠. 학교에서 시험을 잘 보는 거랑 코딩 실력이랑 다르기 때문에 역시 실습을 많이 해봐야겠다고 느꼈습니다.
'프로젝트' 카테고리의 다른 글
| [Django] 무쓸모톤 - 찐품명품(번외) 서비스 배포 (2) | 2021.07.31 |
|---|---|
| [Django] 무쓸모톤 - 찐품명품(3) 프로젝트 완료!! (0) | 2021.07.31 |
| [Android] K-HACKATHON (1) 예선 합격과 본선 준비 (0) | 2021.07.30 |
| [Django] 무쓸모톤 - 찐품명품(2) ajax를 이용한 model DB 수정 및 업데이트 (0) | 2021.07.25 |
| [Django] 무쓸모톤 - 찐품명품(1) (0) | 2021.07.25 |
- Total
- Today
- Yesterday