일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
Tags
- 렛츠기릿자바스크립트
- git
- 타입스크립트
- 슬라이드전환
- PROJECT
- github
- 세로메뉴바
- 코딩독학
- 실기
- 리액트
- 깃
- JavaScript
- 프론트엔드
- 웹디실기
- 정보처리기사
- web
- 웹디자인기능사
- JS
- 웹디자인기능사실기
- 자바스크립트
- react
- HTML
- 비전공자
- 웹퍼블리셔
- Supabase
- jQuery
- 연산자
- 코드공유
- 생활코딩
- CSS
Archives
- Today
- Total
코딩하는라민
생활코딩 Javascript #11 함수 활용 본문
728x90
반응형
Javascript #11 함수 활용
> 선행
28. 함수 활용
<input id="night_day" type="button" value="night" onclick="
function nightDayHandler(){
var target = document.querySelector('body');
if(this.value == 'night'){
target.style.backgroundColor = 'black';
target.style.color = 'white';
this.value = 'day';
var alist = document.querySelectorAll('a');
var i = 0;
while (i < alist.length){
alist[i].style.color = 'powderblue';
i = i + 1;
}
} else {
target.style.backgroundColor = 'white';
target.style.color = 'black';
this.value = 'night';
var alist = document.querySelectorAll('a');
var i = 0;
while (i < alist.length){
alist[i].style.color = 'blue';
i = i + 1;
}
}
}
">
- 위와 같이 input 안에 있던 함수를 script 태그에 따로 가져와 독립된 함수로 만들게 되면, this 라는 것이 '전역객체'를 가리키게 된다. 즉, 웹브라우저에서는 window 를 가리키게 된다.
<head>
...
<script>
function nightDayHandler(){
var target = document.querySelector('body');
if(this.value == 'night'){
target.style.backgroundColor = 'black';
target.style.color = 'white';
this.value = 'day';
var alist = document.querySelectorAll('a');
var i = 0;
while (i < alist.length){
alist[i].style.color = 'powderblue';
i = i + 1;
}
} else {
target.style.backgroundColor = 'white';
target.style.color = 'black';
this.value = 'night';
var alist = document.querySelectorAll('a');
var i = 0;
while (i < alist.length){
alist[i].style.color = 'blue';
i = i + 1;
}
}
}
</script>
</head>
<body>
<input id="night_day" type="button" value="night" onclick="
nightDayHandler();
">
</body>
- 따라서, 위와 같이 input 태그 안에 단순히 함수를 불러오게 된다면 함수가 제대로 실행되지 않는다.
<head>
...
<script>
function nightDayHandler(self){
var target = document.querySelector('body');
if(self.value == 'night'){
target.style.backgroundColor = 'black';
target.style.color = 'white';
self.value = 'day';
var alist = document.querySelectorAll('a');
var i = 0;
while (i < alist.length){
alist[i].style.color = 'powderblue';
i = i + 1;
}
} else {
target.style.backgroundColor = 'white';
target.style.color = 'black';
self.value = 'night';
var alist = document.querySelectorAll('a');
var i = 0;
while (i < alist.length){
alist[i].style.color = 'blue';
i = i + 1;
}
}
}
</script>
</head>
<body>
<input id="night_day" type="button" value="night" onclick="
nightDayHandler(this);
">
</body>
- input 안에 함수에 this 라는 매개변수를 넣고,
- script 의 함수에 self 라는 매개변수를 넣고 모든 this 를 self 로 바꿔주면 함수가 정상적으로 실행되는 것을 확인할 수 있다.
728x90
반응형
'Core > JavaScript' 카테고리의 다른 글
생활코딩 Javascript #13 객체와 반복문 (0) | 2022.10.09 |
---|---|
생활코딩 Javascript #12 객체 쓰기와 읽기 (0) | 2022.10.07 |
생활코딩 Javascript #10 함수 (0) | 2022.10.05 |
생활코딩 Javascript #9 배열과 반복문 활용 (0) | 2022.10.04 |
생활코딩 Javascript #8 배열과 반복문 (2) | 2022.10.04 |