티스토리 뷰
1. 자바 스크립트 – 연산자
- 1 ) 문자열 연산자 : + ( 문자열 연결 )
- 2 ) 산술 연산자 : ++ / -- ( 증감 연산자 ), * / + / - / % / / ( 사칙 연산자 )
- 3 ) 비교 연산자 : == ( 값이 같다 ), === ( 속성과 값이 같다 ), >, <, >=, !=, !==
- 4 ) 논리 연산자 : & ( AND ), | ( OR ), && ( 논리 AND ), || ( 논리 OR )
- + 자바에서 &&는 두 피연산자 중 첫번째 피연산자가 false이면 false를 출력하지만,
- + &는 앞의 피연산자가 false여도 뒤의 피연산자도 확인한다. ( & 권장 )
- + 자바 스크립트에서는 &&를 더 자주 사용한다.
- 5 ) 조건 연산자 : (조건문) ? true : false;
- 6 ) 대입연산자 : =, += , -=, *=, /=, %=, <<=, &=, |=
2. 자바 스크립트 – 제어문
- 프로그램의 실행 과정을 제어하기 위해 사용하는 구문
- 제어문의 유형 : 조건문, 반복문, 보조 제어문
[ 1. 지역변수 ( 함수 return ) ]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자바 스크립트 - 지역변수2</title>
</head>
<body>
<script>
function getGrade() { // 함수 정의
var kor = 95; // 지역변수 정의
return kor; // kor 값 반환
} // getGrade 함수
// 자바스크립트에서는 자바와는 다르게 함수에 리턴타입을 지정할 수 없다. (*)
// 왜냐하면 자바스크립트에서는 값에 따라서 타입이 변하기 때문이다.
getKor = getGrade(); // 함수 호출
console.log("국어 점수 : ", getKor);
// 콘솔 창에 국어 점수 : 95라고 출력된다.
</script>
</body>
</html>[ 2. 증감 연산자 (*) ]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자바 스크립트 - 변수</title>
</head>
<body>
<script>
var incData = 1;
var decData = 5;
var r1 = r2 = 0;
r1 = 15 % 6; // 나머지 연산
console.log("15 % 6 = ", r1);
console.log("incData++ = ", incData++); // 후위 증가
console.log("incData++ = ", ++incData); // 전위 증가
console.log("decData++ = ", decData++); // 후위 증가
console.log("++decData = ", ++decData); // 전위 증가
// 자바 스크립트에서도 전위 / 후위를 지키기 때문에 후위 연산자의 경우 출력 후에 ++가 반영된다. (***)
// + 산술연산자
console.log(decData**3); // decData의 3제곱을 구하라는 의미이다.
// **는 제곱을 의미한다. ( **의 뒤의 정수에 따라서 몇 제곱인지 정해진다. )
</script>
</body>
</html>[ 3. 비교 연산자 (*) ]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자바 스크립트 - 변수</title>
</head>
<body>
<script>
var x = 5; // 변수 정의
var y = "5"; // 변수 정의
var result; // 변수 선언
result = ( x > y ); // 비교 연산자
console.log(" x > y : ", result);
result = ( x == y ); // 두 값이 같은지 비교
console.log( " x == y : ", result);
result = ( x === y ); // 두 변수의 속성과 값이 같은지 비교
console.log( " x === y : ", result);
result = ( x != y ); // 두 값이 다른지 비교
console.log( " x != y : ", result);
// '값'이 다른지 물어보았기 때문에, flase가 나온다.
result = ( x !== y ); // 두 변수의 속성 또는 값이 다른지 비교
console.log( " x !== y : ", result);
// 속성이 다르기 때문에 true가 나온다.
</script>
</body>
</html>[ 4. 논리 연산자 ]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자바 스크립트 - 논리 연산자</title>
</head>
<body>
<script>
var x = 5;
var y = 7;
var result;
result = ( x < 10 && y > 10); // 논리곱
console.log("1. ( x < 10 && y > 10) : ", result);
// x가 10보다 작고 동시에 y가 10보다 커야지 참
result = ( x < 10 || y > 10 ); // 논리합
console.log("2. ( x < 10 || y > 10 ) : ", result);
// x가 10보다 작거나 y가 10보다 크면 참
result = !( x < 10 && y > 10 ); // 논리 부정
console.log("3. !( x < 10 && y > 10 ) ", result );
// x가 10보다 작지 않거나 y가 10보다 크지 않으면 참
</script>
</body>
</html>[ 5. 조건 연산자 ( 삼항 연산자 ) (*) ]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자바 스크립트 - 조건 연산자</title>
</head>
<body>
<script>
var x = 5;
var y = 7;
var result;
result = ( x > y ) ? x : y; // 조건 연산
console.log("1. ( x > y ) ? x : y 결과 : ", result);
// 1. x가 y보다 크면(참이면) x를 출력하고, 아니면(거짓이면) y를 출력한다.
result = ( x > y ) ? x-y : y-x; // 조건 연산
console.log("2. ( x > y ) ? x-y : y-x 결과 : ", result);
// 2. x와 y중 큰 값에서 작은 값을 연산하여 반환하는 조건 연산식이다.
// + 이처럼 조건 연산식에서는 x-y처럼 연산식을 넣을 수 있다.
// + 또한 조건 연산식에서는 조건 연산식을 중복할 수도 있다. ( ex. ( x > y ) ? ( ( x == y ) ? 1 : 2 ) : y-x )
</script>
</body>
</html>[ 6. console 메소드 (****) ]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자바 스크립트 - console 메소드(****)</title>
</head>
<body>
<script>
console.log("1. typeof Console : ", typeof console);
// console의 타입은 object이다.
// ----------------------------------------------------------------------------------------------
console.clear(); // 콘솔창을 지워버린다.
// ----------------------------------------------------------------------------------------------
console.info("3. Information"); // 정보를 남길 때 사용한다.
console.debug("4. Debug"); // 디버그 정보 ( 로그 Default 레벨을 조절해 줘야 보여진다. )
console.trace("5. Trace"); // 어떤 파일의 몇 번째 행으로 인해 메세지가 남겨졌는지 남긴다.
console.warn("6. Warning"); // Warning 로그를 남긴다. ( trace와 같이 주소를 남긴다. )
console.error("7. Error"); // Error 로그를 남긴다. ( trace와 같이 주소를 남긴다. )
// ----------------------------------------------------------------------------------------------
console.group("그룹이름"); // 그룹 로그를 시작할 때 사용한다.
console.log("group log1");
console.log("group log2");
console.log("group log3"); // 그룹 안에 들어가게 된다.
console.groupEnd(); // 그룹을 끝낼때 사용한다. ( group과 다르게 매게변수는 비어있는 상태로 한다. )
// + 그룹에는 log 외에도, trace나 dedug 등을 포함할 수 있다.
// ----------------------------------------------------------------------------------------------
console.time("Sample code"); // time에서는 라벨명을 지정해 줘야 한다.
for ( var i = 0; i < 10000; i++ );
console.timeEnd("Sample code"); // timeEnd에서도 time에서 사용했던 라벨을 동일하게 사용해야 한다.
// ----------------------------------------------------------------------------------------------
var obj = { name : "hehehe", age : 23 };
console.dir(obj); // 해당 변수(obj)에 대한 정보를 알려준다.
console.dir(document);
console.table(obj); // 해당 변수 내부를 테이블의 형태로 보여준다.
// ----------------------------------------------------------------------------------------------
</script>
</body>
</html>[ 7. 조건문 - if - else문 ]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자바 스크립트 - 조건문1 </title>
</head>
<body>
<script>
var gender = "M";
var age = 23;
if ( gender == "M" ){
if(age >= 19){
result = "남자 성인입니다."
}else{
result = "남자 미성년자 입니다."
} // if - else
} else {
if(age >= 19){
result = " 여자 성인입니다."
}else{
result = "여자 미성년자 입니다."
} // if - else;
} // outer : if- else
console.log(result);
</script>
</body>
</html>[ 8. 내장함수 : prompt (*****) ]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자바 스크립트 (***)</title>
</head>
<body>
<p>아이디, 비밀번호 입력</p>
<script src="./js/script.js"></script>
</body>
</html>// 첫번째 내장함수 : prompt를 써보자!
id = prompt('아이디 입력'); // 모달(팝업) 창이 생성된다. (**)
// id에 prompt에서 입력받은 값을 대입한다.
console.log("1. id : ", id, "타입 : ", typeof id); // 어떻게 id값이 결정되는지 알아보기 위해 출력
if ( id == 'admin') {
password = prompt('비밀번호 입력');
// password에 입력받은 값을 대입한다.
if ( password === '123456' ){
// location.href = "https://www.naver.com/";
console.log("2 - 1. 관리자 계정으로 로그인하였습니다.");
console.log("id : ", id, "타입 : ", typeof id);
console.log("password : ", password, "타입 : ", typeof password);
} else {
// location.href = "https://www.daum.net/";
console.log("2 - 2. 로그인이 실폐하였습니다.");
console.log("id : ", id, "타입 : ", typeof id);
console.log("password : ", password, "타입 : ", typeof password);
} // if -else
} else {
// location.href = "https://programmers.co.kr/";
console.log("3. 일반 계정입니다.");
console.log("id : ", id, "타입 : ", typeof id);
console.log("password : ", password, "타입 : ", typeof password); // 이 경우에는 비밀번호를 입력받지 않기에, undefind가 뜬다.
} // if - else
// location.href로 하면 해당 링크로 옮겨지고, console.log로 하면 콘솔창에 출력이 된다.
// 취소버튼을 누르면 콘솔창에서 null이 들어가 있는 것을 알 수 있다.[ 9. 다중 IF - ELSE문 ]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자바 스크립트 - 다중 if-else문</title>
</head>
<body>
<script>
var point = 93;
var grade;
if ( point > 100 ){
console.log("0-100 사이의 점수를 입력해 주세요.");
} else if ( point >= 90 ) {
grade = "A";
} else if ( point >= 80 ) {
grade = "B";
} else if ( point >= 70 ) {
grade = "C";
} else if ( point >= 60 ) {
grade = "D";
} else {
grade = "F";
} // if - else
console.log("학생의 점수는", grade,"입니다.");
</script>
</body>
</html>[ 10. switch 문 ]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자바 스크립트 - 변수</title>
</head>
<body>
<script>
var day;
var week = new Date().getDay(); // 0(일요일) ~ 6(토요일)
// 오늘의 요일을 가져온다. ( Date 객체 생성 )
console.log(new Date());
switch (week){
case 0 : day = "일요일"; break;
case 1 : day = "월요일"; break;
case 2 : day = "화요일"; break;
case 3 : day = "수요일"; break;
case 4 : day = "목요일"; break;
case 5 : day = "금요일"; break;
case 6 : day = "토요일"; break;
default : day = "잘못 입력된 요일";
} // switch
console.log("오늘은", day, "입니다.");
</script>
<!-- 자바스크립트의 스위치문은 자바와 동일하게 break;를 만날때까지 쭉 밀고 내려온다. -->
</body>
</html>[ 11. switch문 2 - break문 생략 ]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자바 스크립트 - 변수</title>
</head>
<body>
<script>
var text;
var week = new Date().getDay();
switch(week){
case 1 : // 월
case 2 : // 화
text = "HTML5";
break;
case 3 : // 수
case 4 : // 목
text = "자바 스크립트";
break;
case 5 : // 금
case 6 : // 토
text = "영어";
break;
case 0 : // 일
default :
text = "휴식";
} // switch
console.log("오늘 해야 할 일은", text, "입니다.");
// week에서 Date 객체를 생성하여 현재 요일을 가져오고 있다.
// get Date와 get Day는 다르기에 주의해야 한다.
</script>
</body>
</html>[ 12. for 문 - 구구단 ]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자바 스크립트 - for문</title>
</head>
<body>
<script>
var x, y;
for ( x = 1; x <= 9; x++){
console.log("--- [", x, "단] ---");
for ( y = 1; y <= 9; y++){
console.log(x, "*", y, "=", (x*y));
} // inner for
} // for
</script>
</body>
</html>[ 13. for문 2 ]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자바 스크립트 - for문 2</title>
</head>
<body>
<script>
var num = 1;
var st = "ABCDEF";
var ct = st.length; // st 문자열의 길이
for( ; ; ){
if( num < ct ){
console.log("for문 수행 :" + num);
num++;
continue;
} // if - 1씩 더해서 문자열의 길이와 동일하게 되면 바로 탈출한다.
break;
} // for
// for문의 조건문, 증감식, 초기식을 따로 작성하였다.
</script>
</body>
</html>[ 14. for 문 - N개의 초기식 지정 / for - of ( 배열 원소 출력 ) / for - in ( 인덱스 번호 출력 ) (****) ]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자바 스크립트 - for문 3</title>
</head>
<body>
<script>
var num = 1;
var st = "ABCDEF";
var ct;
for(num = 1, ct=st.length; num < ct; num++){
console.log("1. for문 수행 :", num);
} // for
// 초기식을 여러개 지정할 수도 있다.
// ------------------------------------------------------
var arr = [ 1, 2, 3, 4, 5 ];
console.log("2. arr :", arr);
console.log("2-1. arr length :", arr.length);
// 배열은 typeof만으로는 object로 나오고 실제 타입이 나오지 않을 수 있는데,
// 이 경우 콘솔창의 Prototype를 보면 자세하게 볼 수 있다.
// 자바 스크립트도 자바에서와 같이 인덱스의 번호가 0번 부터 시작된다.
// for ( var n : arr ){
// console.log(n);
// } // enhanced for
// enhanced for문은 자바와 같은 방법으로는 자바스크립트에서 실행되지 않는 것을 알 수 있다.
for ( var n of arr ){
console.log(n);
} // for - of문 ( enhanced for ) (***)
// 자바스크립트에서는 :가 아닌 of로 작성해야지 자바의 enhanced for와 같은 기능을 할 수 있다. (***)
console.log("지역변수일까? 전역변수 일까? >>>", n);
// 잘 출력되고 있는 것으로 보아 전역변수임을 알 수 있다.
// ------------------------------------------------------
for(var idex in arr ){
console.log(idex);
} // for - in ( enhanced for ) (***)
// 인덱스 번호를 출력한다.
</script>
</body>
</html>[ 15. while 문 - 기본 ]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자바 스크립트 - while문</title>
</head>
<body>
<script>
var num = 1;
var sum = 0;
while ( num <= 100 ){
sum += num;
num++;
} // while
console.log("1 ~ 100까지 합 :", sum);
</script>
</body>
</html>[ 16. while 문 - 무한 반복문 ]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자바 스크립트 - while문 2</title>
</head>
<body>
<script>
var num = 1;
var sum = 0;
// + 조건식에서 0은 false와 동일하고, 0이외의 숫자는 모두 true이다.
// + 즉, 값이 있으면 true를 반환하고, 값이 없으면 false를 반환하게 된다.
// + 그렇기에 null도 false가 된다.
// + 배열의 경우 배열 안에 원소가 없어도, 배열이라는 객체 []가 존재하기 때문에 true이다.
while ( 1 ){ // 무한반복
sum += num;
num++;
if ( num == 10001 ){
break;
} // if - 탈출조건
} // while
// + 반복문을 만들 때에는 무조건 탈출조건을 만들어야 한다.
// + 이때 num이 10001이 탈출조건의 기준이지만, sum에는 10001까지가 아닌 10000까지만 더해진 값이 들어간다.
console.log("1 ~ 100까지 합 :", sum);
console.log("\t+ true :", true, 'false :', false);
</script>
</body>
</html>[ 17. do - while문 ]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자바 스크립트 - do while</title>
</head>
<body>
<script>
var num = 1;
var sum = 0;
do{
sum += num;
num++;
} while ( num <= 100 );
console.log("1부터 100까지의 합 :", sum);
// for문과 while문은 서로 호환이 가능하다.
</script>
</body>
</html>[ 18. 라벨 활용 ]
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자바 스크립트 - 라벨</title>
</head>
<body>
<script>
var i, j;
outloop : // 라벨
for ( i = 0; i < 3; i++ ){
inloop : // 라벨
for ( j = 0; j < 3; j++ ){
if ( i === 1 && j === 0 ){
continue outloop;
// 이 즉시 바로 outloop i++의 증감식으로 가서 i = 2일때의 for 문을 실행하게 된다.
// 이를 통해서 중간의 수를 건너뛰고 출력하게 된다. ( 하지만 이렇게는 잘 사용하지 않는다. )
} // if
console.log( " i =", i, "j =", j);
} // inner for : inloop
} // outer for : outloop
console.log("Done."); // 출력이 끝났는지 확인
</script>
</body>
</html>728x90
'KH 정보교육원 [ Java ]' 카테고리의 다른 글
| KH 66일차 - 자바스크립트 ( 배열 / 객체 ) (****) (0) | 2022.05.31 |
|---|---|
| KH 65일차 - 자바 스크립트 ( 함수 / ES6 / 배열 (*****) ) (0) | 2022.05.30 |
| KH 63일차 - 미디어 쿼리 / 자바 스크립트 (***) (0) | 2022.05.26 |
| KH 62일차 - 변이효과 / 애니메이션 / 반응형 웹 (*****) (0) | 2022.05.25 |
| KH 61일차 - CSS 기본 다지기 7 ( 그림자 / position / 레이아웃 ) (***) (0) | 2022.05.24 |
댓글