목차
WEB2 (14~23)
WEB2 JavaScript - 14. 조건문 예고 - YouTube
본 글은 유튜브 무료 강의 생활코딩의 내용과 검색을 통해 이해한 것을 정리한 글임을 밝힘.
1. 조건문
하나의 프로그램의 하나의 순서대로 가는 것이 아니라
조건에 따라서 다른 순서의 기능들이 실행되도록 하는 것
if
1.1. 비교연산자, 불리언(자료형)
1 == 1
>>> 좌항과 우항이 같다면 true라는 불리언 값을 가짐
1 == 2
>>> 좌항과 우항이 다르다면 false라는 불리언 값을 가짐.
즉 비교연산자로 좌항과 우항을 비교해서 그 값이 참인지 아닌지에 대한 데이터가 나타남.
1.2. 조건문
if () {}
else {}
if 문 뒤에 따라오는 괄호 안에는 불리언 데이터 타입이 존재
여기서 True면 첫번째 {}를 실행, 두번째 {}는 무시
False면 두 번째 {}를 실행, 첫 번째 {}는 무시
1.3. 조건문의 활용
<input id="dark_mode" type="button" value="다크on" onclick="
if
(document.querySelector('#dark_mode').value == '다크on')
{
document.querySelector('body').style.backgroundColor = 'black';
document.querySelector('body').style.color = 'white';
document.querySelector('#dark_mode').value = '다크off';
}
else
{
document.querySelector('body').style.backgroundColor = 'white';
document.querySelector('body').style.color = 'black';
document.querySelector('#dark_mode').value = '다크on';
}
" >
>> button을 누르면 다크 모드로 바뀐 후 value 값을 바꿔서 다시 누르면 다크 off로 바뀌는 기능
1.4. 리팩토링
코드 자체의 중복을 낮춰서 가독성 높은 코드를 짜는 것
1.4.1. this
this : 이 태그 자신을 가르키는 속성
※ 아이디를 또 만들 필요 없음!
ex.
if (document.querySelector('#dark_mode').value == '다크on')
→ if (this.value =='다크on')
1.4.2. var target (변수 선언)
target이라는 변수에 반복되는 문장을 대입한 후 target을 통해 간소화할 수 있음.
또한 target 변수만 조정해주면 target이라는 걸 포함한 것들을 모두 변경 가능하여 관리도 편리
<input type="button" value="다크on" onclick="
var target = document.querySelector('body');
if
(this.value == '다크on')
{
target.style.backgroundColor = 'black';
target.style.color = 'white';
this.value = '다크off';
}
else
{
target.style.backgroundColor = 'white';
target.style.color = 'black';
this.value = '다크on';
}
" >
2. 반복문
2.1. 배열
동일한 특성을 가지며 일정한 규칙에 따라 몇몇 요소가 나열되어 있는 데이터 집합.
2.1.1. 배열이 왜 필요한가?
소프트웨어를 개발하다보면 사람이 관리하기에는 데이터가 너무 많아짐
→ 데이터를 일정한 집합체로 묶어두고 보면 비교적 관리하기가 수월하기 때문에 나타난 것으로 이해
2.1.2. 배열의 문법
대괄호[]로 구성하고 여러 개의 값을 적을 수 있음, 값과 값 사이는 콤마로 구분
var list_1 = ["sdkd","2"];
배열에 있는 거를 꺼내고 싶을 때 사용하는 문법
<script>
document.write(list_1[0]);
document.write(list_1[1]);
</script>
→ sdkd2가 출력
배열에 있는 것을 몇 개인지 알고 싶을 때
document.write(list_1.length);
배열에 다른 거를 추가하고 싶을 때 (push : 리스트 마지막에 추가)
<script>
list_1.push('희망')
document.write(list_1)
</script>
배열을 조정해야 할 때 필요한 명령어들을 검색해서 활용!
2.2. 반복문
<body>
<h1>Loop</h1>
<ul>
<script>
var i=0;
while (i < 5) {
document.write('<li>sdsd</li>');
i = i +1 ;
}
</script>
</ul>
</body>
2.3. 배열과 반복문의 합성
<body>
<h1>Loop & Array</h1>
<script>
var friend_list = ['민수', '영희', '철수', '동훈'];
</script>
<ul>
<script>
var i = 0
while ( i < friend_list.length) {
document.write('<li>'+friend_list[i]+'</li>')
i = i +1 ;
}
</script>
</ul>
</body>
Friend_list라는 배열을 만들어둔뒤 while문을 사용해서 반복해서 출력!
'Web > JavaScript' 카테고리의 다른 글
| [Node.js] API 기본 개념 잡기 (express) (0) | 2023.05.02 |
|---|---|
| [JavaScript] Node.js 생활코딩 기초 내용 정리(Querystring, 파일 read) (0) | 2023.04.28 |
| [JavaScript] 생활코딩 Web2 내용정리 (함수, 객체, 라이브러리 등) (0) | 2023.03.14 |
| [JavaScript] 생활코딩 Web2 내용정리 (JavaScript-기초) (0) | 2023.03.10 |
댓글