[개발일지 2022.3.24] JavaScript 2/3

1. 학습한 내용

1)제어문 flow statements

위의 사진에 정리하였듯이 boolean 은 ture 인지 false 인지 만을 가지는 데이터 타입이다.
그리고 비교연산자(comparison operator) 의 경우에는 등호 부등호와 같은 연산자를 사용하는데 이때 == 와 ===는 비슷하지만 다른 의미로
===는 엄격하게 같다는 의미인데 반해 ==는 얼추 같다는 것으로 예외적인 사항이 존재하는 등호이다.

그리고 조건문으로는
if 코드를 사용하게 되는데

if(a){b} : a가 true 일때 {b}를 출력한다 
else{c} : 앞의 a가 false 일떼 {c}를 출력한다

이때 else 코드가 없고 if코드만 있을때 a가 false 인 경우에는 출력하지 않으며, else코드는 if코드와 쌍이되는 코드이기 때문에 if와 else 코드 사이에 ;와 같은 세미콜론은 사용하지 않는다.

이 조건문을 이용하여 로그인 코드를 만들게 되었는데

화면을 띄웠을때 철수 라고 입력을 하면
철수님 안녕하세요^^ 가 출력이 되고
그외의 이름을 입력하게되면
ㅁㅁ는 누군가요? 가 출력이 된다


이를 통해서 결과가 나오는것을 확인할수 있다.
이를 이용해서 3.23일 만들었던 night 버튼과 day 버튼 두가지가 있던것을 하나로 합칠수가 있게 되었는데

이러한 조건문을 만들게 되면

"dnbtn 이라고 id가 정해진 night mode 라는 버튼을 넣었을때.

그 버튼을 눌렀을때 버튼이 night mode 라면 background의 색은 black, 폰트의 색은 white, 'a' 의 글씨의 색은 white, 그리고 버튼의 value 를 day mode 로 바꾼다.
그 버튼을 눌렀을때 버튼이 night mode 가 아니라면 background의 색은 white, 폰트의 색은 black, 'a' 의 글씨의 색은 black, 그리고 버튼의 value 를 night mode 로 바꾼다.

라는 1가지 버튼으로 바꿀수 있게되었다.

배열을 배우게 된것은 여러가지 원소(element) 를 중구난방하게 퍼트렸을때 이 각각의 원소를 저장하는 색인(index)를 만들어 내는것으로 정리할수 있다.


반복문(loop) for코드의 경우에는

for(a ; b ; c){d} : 
a를 시작으로 실행을 하여 b가 true라면 {d}를 출력하고 c를 실행한뒤 
b가 false 가 뜰때까지 반복한다.

라는 과정을 통해서 반복한다.
여기서 주의할점은 반복구간이 너무 길어지게 될경우 웹사이트에 과부하가 일어나서 웹사이트가 다운이 될수있다.


마지막으로 배열(array) 와 반복문(loop) 을 혼합하여 사용하게 되면

html, css, js 라는 element 를 가진 topics라는 index가 있을때
i가 0으로 시작했을때 i<3이 false가 될때까지 topics의 i번째 내용을 화면에 출력을 하는것을 실행하고, i=i+1 을 적용하여 실행하는것을 반복한다.

라는 코드를 만들수있게되었다.

2. 학습내용 중 어려웠던 점

수업을 진행하던중 조건문을 이용하여 night mode 버튼과 day mode 버튼을 하나로 만들어내는 과정에서 작동을 할때 오류가 많이 나는것을 확인하였다.

3. 해결방법

수업중 다른 학생들이 오류가 난다고 하는 코드와 비교 대조를 해가면서 문제가 나는 점을 확인하여 모르는것을 더 알게되었다.
예를들어 작은 따옴표를 백틱을 썻다거나 대문자로 써야하는것을 소무자로 썻다거나, 중괄호가 하나 덜써졌다거나 등 사소한것만으로도 오류가 나서 작동을 하지 않는것을 확인할수있었다.

4. 학습소감

날이 지날수록 배우는 내용이 복잡해지고 있지만 그 전에 배운것들이 활용되는것이 재밌어서 다음에 배우게 될것이 기대가 된다.

좋은 웹페이지 즐겨찾기