목록전체 글 (88)
Rainbow
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/t14OP/btsBgvcg4gp/UR2zSKlRVawYsOlXprZPEK/img.png)
var Links={ SetColor:function(color) { var alist = document.querySelectorAll('a'); var i = 0; while (i < alist.length) { alist[i].style.color = color; i = i + 1; } } } function BodySetColor(color) { document.querySelector('body').style.color = color; } function BodySetBackgroundColor(color) { document.querySelector('body').style.backgroundColor = color; } var Body = { SetColor: function (color) ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/deaB2r/btsA5iw7zjD/3FYKkyaKtvWZEbTtaClZsk/img.png)
1. 객체 생성 하기 coworkers = { "programmer" : "egoing", "designer" : "leezhe" }; - coworkers 라고 하는 객체안에 중괄호에 "egoing" 데이터 앞에 "programmer" 이름을 붙여 다음과 같이 출력한다 " programmer" : "egoing" 2. 객체 접근하기 document.write("programmer : " + coworkers.programmer + " "); - 객체의 담긴 데이터 이름을 가져온다 - " programmer : egoing / designer : leezche " 이름이 출력된다 3. 객체 추가하기 coworkers.bookkpper = "duru"; document.write("bookkpper : "..
객체 - 객체는 함수라는 기반 위에 존재 - 객체가 가지고 있는 여러 가지 특성 중 하나가 ' 정리 정돈의 수단 ' 변수나 함수 같은 코드가 하나의 페이지에 아주 길어지다 보면, 그것을 정리하기 위해 '객체'를 쓴다 - 함수의 이름을 지정할 때 set을 붙여서 많이 쓴다 기존의 코드를 함수화 시키는 의미 - 코드가 나타내는 의미가 조금 명확할 때는 함수화 안 시켜도 무방하지만 - 한 줄이라도 그 의미가 조금 불명확하거나 시간이 지나 무슨 뜻인지 파악하기 어려울 때 - 함수를 통해서 그 로직의 '이름'을 주어 알기 쉽게 할 수 있다. 동일한 함수를 만들면 아래에 있는 함수가 위의 함수를 덮어 씌워 버린다. - 새로 만든 함수의 이름이 기존에 존재하는 함수이름 인지 파악하기 어려워진다(코드가 아주 길 때) ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/yUEZZ/btsAIeW66AI/BcO60KnDQ6hpqK3ok8lku1/img.png)
함수가 필요한 이유!! 1. nightDayhandler(self) -> 함수 안에 있는 로직을 실행시키고 싶을 때 함수 이름 지정 2. 동일한 함수에 중복된 속성이 동시에 바뀐다 3. 유지보수가 쉬워짐 4. 프로그래밍에 나오는 거의 대부분 문법과 기능들을 중복되는 코드를 줄이기 위해서 만든 것 5. 코드가 한 줄로 줄어든다면 간결해지고 가독성이 좋아진다 ↓ 함수의 활용 소스코드 예시 1. function nightDayhandler(self) - slelf라는 매개변수를 만들고 함수 안에 동일하게 넣어준다 2. nightDayhandler(this) - this는 input 태그를 가리킨다 - this 를 사용하는 이유는 함수안에서 self 라는 변수를 하나만 사용해도 this가 가르키는 input 태..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/deTVRs/btsAyL8USd2/DCNDzQCKQ78ATzvkLuq8rK/img.png)
함수 기본 문법 1. two(){ } 함수를 선언한 후 중괄호 안에 document.write( ) 출력한다 2. 2-1 2-2 는 two() 함수를 이용해서 호출한다 ↓ 한 줄 요약 : 함수를 선언 / 함수를 호출한다 결과 Parameter(매개변수)와 Argument(인자) 1. onePlusOne(){} 함수를 선언한다 - document.write(1 + 1 + ' ') 중괄호 안에 입력받고 - onePlusOne() 함수가 호출되고 " 2 " 출력된다 2. sum(left, right) () 매개변수를 만든다 document.write(left+right + ' '); -sum 이란 함수가 만들어져 있다고 한다면 left와 right를 더한 값을 출력하는 기능을 가진 함수이다 3. sumColo..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/ssO3a/btsAyWnW8K2/pgnbvMJ0mfF2LmMJtlO871/img.png)
소스코드 예시 버튼 클릭하면 링크주소 밝은 컬러 or 어두운 컬러 주기 결과 1. f12를 누르고 console창에서 다음 코드들을 확인한다 document.querySelectorAll( ) 지정된 실렉터에 일치하는 element들을 list로 반환한다 var alist = document.querySelectorAll('a'); 모든 a 태그를 가져온다 var i =0; 카운트 작성 2. while(i < alist.length ){ alist의 개수가 작은 동안 반복한다 alist[i].style.color = 'blue'; i = i + 1 } 반복문이 실행될때 a태그를 하나씩 가져온다 총 정리 1. document.querySelector('a') 를 입력해 보시면 가장 위에 있는 web을 표시..