- 학습한 내용
1) 제어문
- 제어문은 프로그램의 흐름을 제어 할 수 있도록 도와주는 실행문을 말함.
조건문과 반복문은 둘다 프로그램이 실행되는 순서를 제어하고 있음.
따라, 조건문과 반목문을 합쳐서 제어문이라고 함.
1-1) 제어문의 종류
: 조건문, 선택문, 반복문
<참고1>
조건문과 반복문을 선행하기 위해서는 선행되어야 하는 부분에서 '분리언'이 필요함.
분리언(Boolean)? 구체적인 data 2개를 말하며 true, false
즉, 참이냐 거짓이냐를 판단하는 값
<참고2>
분리언을 만들어내는 2개의 연산자
' 비교연산자'/ '분리연산자'
비교연산자
- 동등 비교 연산자, 일치 연산자(strict equality operator)
'===' 인 경우에는 [동등 비교 연산자, 일치연산자]라고 하며 왼쪽의 값(좌항)과 오른쪽 값(우항)이 같은지를 물음.
<참고 2-1>
'===' 와 '==' 의 차이
간략적으로 '==='의 경우는 완전하게 동등한지를 표현한다면,
'==' 의 경우 대충 비슷하게 동등한지를 표현한다.
동등한지를 표현하기 위해서는 '==='를 사용하는 편이 좋음.
2) 조건문(conditional statements)
- 프로그램이 조건에 따라 다른 기능들이 다른 순서에 따라 실행되도록 만들어 주는 것
- 조건문은 조건식의 값이 참(true)인지 아니면 거짓(false)인지에 따라 실행문의 제어가 결정됨.
- 조건문의 종류: if 문, else문, else if 문
2-1) if문
- 불 표현식의 값이 true 이면 중괄호 안의 문장을 시행하고, false이면 문장을 무시한다.
if (불 값이 나오는 표현식){
불 값이 참일때 실행할 문장
}예시-1)
<!DOCTYPE html>
<html>
<title>if</title>
<head>
<body>
<script>
if(300<100){
alert('300<100=>true')
}
alert('종료')
</script>
</head>
</body>
</html>결과-1)
if 조건문의 불 값이 false이므로, 중괄호 안의 문장을 실행하지 않게 되며, 예시를 실행하게 되면 '종료'가 출력된다.
예시-2)
<!DOCTYPE html>
<html>
<title>if</title>
<head>
<body>
<script>
if(300>100){
alert('true')
}
alert('종료')
</script>
</head>
</body>
</html>결과-2)
2-2) if~else 문
- if else구문은 하나의 조건으로 2가지의 실행문을 표현 할 수 있다.
if(조건식){
참일 때 실행할 구문
} else{
거짓일 때 실행할 구문
}예시)
<html>
<body>
<script>
let input_id= prompt('너의 이름은?');
if(input_id==='random'){
alert(input_id+'님 안녕하세요^^');
}else{
alert("누구세요");
}
</script>
</body>
</html>결과-1)
결과-2) if~else 문에서 참일 때 (결과1에서 'random' 입력)
결과-3) if~else 문에서 거짓일 때 (결과 1에서 'random' 이외 입력)
if 조건식에서 거짓(random 이외)으로 성립되자 참인 구문이 아닌 else 뒤로 오는 구문이 실행되는 것을 알 수 있다.
3) 반복문(loop statements)
반복문(for 문)
- 반복문을 사용하는 이유
:0,1,2,3,4....1000까지의 수를 코드로 작성할려면 console.log(1).....console.log(1000)까지 모두 타이핑을 해야하는데 이 경우 반복문을 사용한다.
for(시작조건, 반복조건, 매 반복 후 할 일){
매 반복마다 실행될 명령어}<script>// 반복문
for(let i=0 ; i<5 ; i++){
console.log(i)
// 현재 반복 작업을 중지하고 다음 반복작업을 continue
alert(i)
}
</script>
예시)
<!doctype html>
<html>
<head></head>
<body></body>
<h1>반복문(Loop)</h1>
<script>
console.log(1);
for( let i=0;i<2;i=i+1 ){
console.log(2);
console.log(3);
}
console.log(4);
</script>
</body>
</html>
<참고1>
배열(array) [인덱스, index]
배열[배열.length-1]
- 배열의 기본적인 조작은 문자열과 비슷하며, 각각의 요소에 접근하려면 배열 바로 뒤에 대괄호[]를 입력하고 그 안에 숫자를 넣는다.
- 요소의 순서를 인덱스(index)라고 부른다
-JavaScrpit의 경우 가장 앞에 있는 요소를 0번째로 표현한다.
예시에서 for(let i=0; i<2; i=i+1}
에서 i=0 이 된다. - 요소의 순서(가장 앞의 요소는 0번째)
예시)
<!doctype html>
<html>
<head></head>
<body>
<h1>배열(Array)</h1>
<script>
let topic1= 'html';
let member1='egoing'
let topic2='css';
let member2='leezche';
let topic3='js';
let member3='duru';
let topics= ['html','css','js'];
let members=['egoing','leezche','duru'];
console.log(topics.length);
console.log(topics[0]);
</script>
</body>
</html>결과)
- 학습한 내용 중 어려웠던 점 또는 해결못한 것들
- for 문 상의 오류
수업 도중 반복문(for 문)에서 오류가 지속적으로 생기게 되었다.
<!doctype html>
<html>
<head></head>
<body>
<h1>Array+Loop</h1>
<script>
topics=['html','css','js'];
for [let i=0; i<topics.length; i=i+1]{
document.write('<li>'+topics[i]+'</li>');
}
</script>
</body>
</html>- 콘솔에서의 화면
- 해결방법 작성
- 콘솔에서 힌트를 얻게 됨.
1) html: 8 즉, 8번째 열에서 오류 발생
2) 4번째 열에서 '[' 라는 부분
따라, 반복문(for문)에서 구조 상 오류가 있음을 발견 할 수 있었다.
3) 수정한 코드
<!doctype html>
<html>
<head></head>
<body>
<h1>Array+Loop</h1>
<script>
topics=['html','css','js'];
for (let i=0; i<topics.length; i=i+1){
document.write('<li>'+topics[i]+'</li>');
}
</script>
</body>
</html>- 코드를 수정하였을 때 콘솔 상의 화면
- 학습 소감
오늘은 강사님께서 작성하신 코드르 보지 않고 스스로 콘솔을 이용하여 본인의 반복문 오류를 발견해냈는데 어제만 해도 콘솔을 봐도 어느 부분을 어떻게 수정해야할 지 감이 없었는데 콘솔에서 어떤 부분이 잘못되었고를 판단 할 수 있는 능력이 조금씩 생기는 것 같았고, 수업시간에 강사님께서 개발자들도 콘솔을 이용하여 오류를 발견해 낸다. 라는 말씀을 하셨는데 그 의미가 무엇인지 정확히 파악 할 수 있게 되었습니다.
또한, velog도 어제 처음 사용해봐서 velog 상에서 코드를 어떻게 작성하는지에 대해 잘 알지 못하였는데 그 부분도 적응을 할 수 있었고, velog를 작성하면서 수업시간에 메모한 부분과 본인이 코딩한 부분, 수업동영상을 다시보고 인터넷도 찾아보면서 JavaScript에 대한 이해가 조금 더 폭 넓게 되었습니다.
