WEB2 JavaScript - 20.배열
<script>
var coworkers = ["egoing", "leezche"];
</script>
<!-- coworkers라는 변수에 배열이라는 새로운 데이터 타입을 넣음 --> <script>
document.write(coworkers[0]);
document.write(coworkers[1]);
</script>
<!-- egoingleezche
데이터를 불러올 때에는 0부터 (처음 데이터가 0 그 다음이 1 ~) ,
갯수를 셀때는 1부터 센다. -->
```
<script>
coworkers.push('duru');
coworkers.push('taeho');
</script>
<!-- push 명령어를 통해 이미 만들어진 배열에 새로운 데이터를 넣을 수 있음. -->참고 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/length
WEB2 JavaScript - 21.반복문
i의 초기값을 0으로 주고 한번 실행될때마다 +1이 되게 함 0> 1 > 2 > 3(false)
while문을 이용해서 3번 반복할 수 있게 만들어줌
WEB2 JavaScript - 22.배열과 반복문
학원에서 vs code를 쓰다가 생활코딩을 들으며 다시 atom을 쓰려니 불편함이 느껴진다.
22.07.26 - 학원에서 자바스크립트 수업을 들은 후 생활코딩을 다시 듣는 중.
이전에는 그저 그대로 따라치는 수준이었지만 작동 원리를 좀 알고나니
무작정 따라치지 않고 이렇게도 해보고 저렇게도 해보면서 습득이 되는 느낌.
WEB2 JavaScript - 23.배열과 반복문의 활용
여러 <li>태그의 style을 JS를 이용해 변경하기.
<ul> <li><a href="#">리스트1</a></li> <li><a href="#">리스트2</a></li> <li><a href="#">리스트3</a></li> </ul>// 일단 a태그를 모두 불러오는 변수를 선언한다. var linkCol = document.querySelectorAll('a'); /* linkCol[0] = 첫번째 a태그 linkCol[1] = 두번째 a태그 linkCol[2] = 세번째 a태그 변수 linkCol 에는 정확히는 배열은 아니지만 배열처럼 여러개의 값이 설정된다. (노드 리스트? 배열로 생각해도 된다고 함.)*/linkCol[0].style.color = 'white' linkCol[1].style.color = 'white' linkCol[2].style.color = 'white' // JS를 이용해 모든 a태그의 스타일을 변경하려면 // 이 코드처럼 각각을 지정해서 값을 입력해줘야 한다.var linkCol = document.querySelectorAll('a'); var i = 0; while ( i < linkCol.length ) { linkCol[i].style.color = 'white' i++ }; // 이를 반복문을 이용해서 중복된 코드를 줄일 수 있다.- 응용
for (let i = 0; i < linkCol.length; i++) { linkCol[i].style.color = 'white' }; // 이렇게 while문 대신 for문을 사용해도 같은 결과를 얻을 수 있는데 // for문을 이용해서 반복문을 작성하는게 변수선언도 안에서 할수 있고 더 깔끔한 것 같다.
- 응용
WEB2 JavaScript - 26.함수 : 매개변수와 인자
<script>
function sum(i, j) {
document.write(i + j + "<br>")
}
sum(2,7); //9
</script>-
Parameter (매개변수)
- i, j
- 입력값을 받아서 함수 안으로 매개해주는 변수
-
Argument (인자)
- 2, 7
- 입력값
- Return (출력)
- 5
- document.write와 다르게 결과 자체가 계산값을 가지고 이를 이용해 다른 곳에 활용이 가능함.
WEB2 JavaScript - 28.함수의 활용
input의 onclick 안에 직접 script를 넣었을땐 this를 이용해서 this.value로 input의 value값을 비교, 수정이 가능했는데
script를 독립된 함수로 만들면 this는 더 이상 input이 아닌 전역객체(웹브라우저에서는 윈도우)를 가리키게 됨.
즉 this를 대신해서 매개변수를 지정해줘야하는데
<script>
function changebackground(self) {
var bodytbtn = document.querySelector('body');
var linkCol = document.querySelectorAll('a');
if (self.value == "night") {
bodytbtn.style.backgroundColor = 'black';
bodytbtn.style.color = 'white';
self.value = 'day';
.
.
.
</script><input id="btn" type="button" value="night" onclick="changebackground(this)">함수()의 괄호안에 함수(self)라고 작성한 후 input에서 함수를 호출할땐 괄호 안의 값을 this로 변경해줌.
- 내 생각
- 매개변수를 이용하지 않으면 독립된 함수에서 this는 전역객체를 가리킨다
- 전역객체를 가리키는 것을 막기 위해 입력값이 들어오기 전엔 아무것도 가리키지 않도록 매개변수를 이용
- self는 매개변수 ( i 나 j 같은) ( selfy 등 다른 값을 넣어도 작동 )
- 매개변수에 this라는 argument(인자)를 넣음으로써 그 함수를 호출한 <input>태그를 선택함
Hi