프로그램 언어의 핵심(크게 자료/제어문으로 구분)
자료 - 자료형, 저장공간, 연산자
제어 - 조건/반복문
모듈(라이브러리 - 재사용성 확보하기 위함)
함수
객체
소스 -> 실행
행단위 실행(=REPL) - Read Eval Print Loop (단순 확인용/산업용은 아님)
문자열 특수 기호 표시
\'/\" = 각각 작은/큰 따옴표 추가
\n = 줄바꿈
\t = 탭 기능 수행
등등
`(템플릿 리터럴)과 '(")의 차이 - 템플릿 리터럴은 문자 그대로 표현이 가능(예로 문자 안에서 엔터키를 사용해도 그대로 적용돼서 나옴), 변수는 오류뜸
또한 출력 부분에서도 ${}로 묶어주면 결과가 나오는 편리함이 있다.
undefined / null
undefiend - 값이 할당되지 않았을 때 변수의 초깃값(값이면서 동시에 자료형이다)
사용자가 실수로 지정하지 않을 떄의 값이라고 생각
<body>
<script type="text/javascript">
let data1 = 1;
console.log(typeof data1);
//선언되지 않은 자료형(undefined)
console.log(typeof data2);
console.log(data2);
let data3;
console.log(typeof data3);
console.log(data3);
</script>
</body>
null - null로 초기화되는 자료형
사용자가 일부려 유효하지 않은 값을 지정한 것이라고 생각
<body>
<script type="text/javascript">
//특정자료형이 아니라 null(미정)으로 초기화
let data4= null;
console.log(typeof data4);
console.log(data4);
</script>
</body>
형 변환
//문자열 연결 연산
console.log('10'+'10');
//자동 형 변환(10이 문자로 취급되어 문자열 연결로 돼서 1010이 나옴)
//더하기 이외는 강제 현 변환 작업을 해 줘야 함
console.log( 10 + '10');
//강제 형 변환(넘버 함수로 인하여 숫자로 변환 후 연산)
console.log(10 + Number('10'));대입(할당) 연산자
// = == 대입(할당)연산자
let num1 = 10;
//== num1 = num1 + 10; (다른 산술 연산도 가능)
num1 += 10;
console.log(num1);
// ** == 제곱
let num2 = num1 ** 2;
console.log(num2);
대입 연산자 사용 예
<body>
<script type="text/javascript">
document.write('<table border="1" width="150">');
document.write('<tr>');
document.write('<td>Hello String</td>');
document.write('</tr>');
document.write('</table>');
let html = '<table border="1" width="150">'; -->요 방법을 더 많이 씀
html += '<tr>';
html += '<td>Hello String</td>'
html += '</tr>';
html += '</table>';
document.write(html);
</script>
let htm2 = `<table border="1" width="150"> -->요즘 이렇게 써가는 중
<tr>
<td>
hi
</td>
</tr>
</table>`;
document.write(htm2);
</body>증감연산자(++/--)
//1씩 증가, 감소 --> 증감연산자
let num1 = 1;
num1 = num1 + 1;
console.log(num1);
let num2 = 1;
num2++; // ++num2 --> 둘 다 사용 가능하나 결과가 차이가 있다.
console.log(num2);
let num10 = 1;
let num20 = 1;
let num11 = num10++; //num11에 값을 대입 후 증감(num10 = 1 num11= 2)
let num21 = ++num20; //num20 값을 증가 후 num21에 대입(둘 다 2)
console.log(num10 + ' : ' + num11); --> 2:1
console.log(num20 + ' : ' + num21); --> 2:2비교연산자
== -> 피연산자값이 같으면 true / === -> 피연산자 / 데이터 유형 모두 같으면 true
!= -> 피연산자값이 다르면 true / !== -? 피연산자 / 데이터 유형 모두 다르면 true
<, <=, >, >= ... 등등
console.log('a'>'b') --> 아스키 코드 값에 의해 97>98로 연산하여 false.
console.log(0==false);
console.log('273'==273);
console.log(''==false);
console.log(''===false);
console.log(''=== 0);
console.log(0 === false);
console.log('273' === 273);
--> 0이나 ''(빈공간)은 false로 나오고 console.log(0=='')는 true로 나온다.
(===는 자료형도 전부 같아야 하므로 false)
논리연산자(boolean 연산자)
참과 거짓을 사용해 조건 체크
!(NOT 연산자) - 피연산자의 값과 반대의 값을 가진다.
&&(AND 연산자) - 피연산자값이 모두 참일 경우만 참(A B모두 참이면 참)
||(OR 연산자) - 피연산자값 중 하나만 참이어도 참(A B 둘 중 하나만 참이어도 참)제어문
- 조건(true/false) - 비교/논리연산자
프로그램 해석 : 위 -> 아래
조건에 의한 분기(단일 / 중첩)
조건에 의한 반복(반복 횟수 정하기)
if 조건문
if(조건)이 참이면 {}안의 내용 실행, 거짓이면 x
if~else문 - 참이면 if문 실행, 거짓이면 else문 실행(두 개 분할)
응용 예제 - 시간 나눠보기
<body>
<script type="text/javascript">
let hour=12;
if(hour<=12) {
if(hour<=9) {
console.log('아침');
}
else {
console.log('아점');
}
}
else {
if(hour<=18) {
console.log('오후');
}
else {
console.log('저녁');
}
}
</script>
</body>if~ else if ... ~ else 문(선택적 if)
응용 문제 - 점수 등급 나타내기
<script type="text/javascript">
let score = 91;
let grade;
if(score>=90) {
grade = 'A';
}
else if(score>=80) {
grade = 'B';
}
else if(score>=70) {
grade = 'C';
}
else if(score>=60) {
grade = 'D';
}
else {
grade = 'F';
}
console.log(grade);
</script>조건(삼항) 연산자
조건 간단하고 명확하게 참 거짓이 나올 경우에 if문 대신 조건 연산자 사용 가능하다.
//ex
let num = 10;
let result = (num>10) ? true : false;
console.log(result); --> falseswitch문
체크해야 할 조건값이 많을 경우 if문보다 switch문이 더 편리할 수 있다.
<script type="text/javascript">
let score = 85;
switch(true) {
case score>=90: console.log('A');
break;
case score>=80: console.log('B');
break;
case score>=70: console.log('C');
break;
case score>=60: console.log('D');
break;
default: console.log('F');
}
</script>반복문
for문
for(초기값; 조건식; 증가식) { 실행문 }
- 초기값 정한 후 조건식과 비교
- 실행 -> 후 증가식
- 증가식값 조건식과 비교
- 실행 -> 후 증가식 ,,,,,
- 조건식이 거짓이 되면 반복 중지
for 예제
<script type="text/javascript">
let sum=0;
//0~100까지 중 3의 배수의 합계 구하기
for(let i = 0; i <= 100; i++) {
if(i%3==0) sum+=i;
}
console.log(sum);
</script>
--> 1683for문 이용하여 반복 표 만들기
<body>
<script type="text/javascript">
document.write('<table border="1">');
document.write('<tr>');
document.write('</tr>');
for(let i = 0; i<10; i++){
document.write('<td>' + i + '</td>');
}
document.write('<table>');
</script>
</body>
중첩 for문
for문 안에 for 중첩 가능하다.
<body>
<script type="text/javascript">
for(let i = 0; i < 3; i++){
for(let j = 0; j < 3; j++){
console.log(i + ':' + j);
}
}
</script>
</body>
중첩된 for문으로 표 형태 만들기 ``` ```
끄적끄적