<! DOCTYPE html >< html >< head >< meta charset =" UTF - 8 ">< title > Insert title here </ title ><!-- html 주석 처리 방법 --><!-- 자바 스크립트 코드 를 작성 할 영역 을 선언 < script ></ script > -->< script type =" text / javascript "> / / 1 . 단일 주석 처리 / * 2 . 블럭 주석 처리 */ / * * * * * * * * * * * * * * * * * * * ************************* 1 . 자바 스크립트 기초 * * * * * * * * * * * * * * * * * * * * ************************/ / * 1 ) 자바 스크립트 코드 를 작성 할 영역 을 선언 script 태그 사용 */ / / document 는 문서 객체 이 며 , 출력 메 서 드 인 write ( ) 를 사용 / * document . writｅ ( ' 안녕 하 세요 '); document . writｅ ( '< br >'); */ / * * * * * * * * * * * * * * * * * * * ************************* 2 . 변수 * * * * * * * * * * * * * * * * * * * * ************************/ / * 1 ) 자바 스크립트 는 변수 선언 을 var 로 표기 한다 . 2 ) 문자 형 , 숫자 형 , 논리 형 , null 데이터 타입 이 있 다 . 3 ) 한글 은 사용 불가 하 며 , 영문 과 숫자 그리고 _, $ 문자 만 사용 가능 하 다 . 4 ) var 변수 명 : var 변수 명 = 값 ; 5 ) 데 이타 타입 확인 하 는 방법 은 typeof 로 확인 가능 */ document . writｅ ( typeof ' 안녕 하 세요 '); document . writｅ ( '< br >'); document . writｅ ( typeof 123 ) ; document . writｅ ( '< br >'); document . writｅ ( typeof true ) ; document . writｅ ( '< br >'); document . writｅ ( typeof null ) ; document . writｅ ( '< br >'); document . writｅ ( typeof function ( ) { }); var s 1 = ' javascript '; / / 문자 형 var s 2 = " javascript "; / / 문자 형 var n 1 = 1 ; / / number 형 var n 2 = Number ( ' 1 '); / / number 형 var n 3 = parseInt ( ' 1 '); / / numeber 형 var b 1 = true ; / / 논리 형 var b 2 = false ; / / 논리 형 var b 3 = 10 > 2 ; / / 논리 형 var u ; / / undefined - 값 이 없 는 기본 형태 var n = null ; / / n 이 라는 변수 에 null 을 대입 / * * * * * * * * * * * * * * * * * * * ************************* 3 . 연산자 * * * * * * * * * * * * * * * * * * * * ************************/ / * 1 ) 산술 연산자 - 더하기 , 빼 기 , 곱하 기 ( '*'), 나누 기 ( '/'), 나머지 ( '%') + : A + B - : A - B * : A * B / : A / B % : A % B 2 ) 문자 결합 연산자 - 피연산자 가 문자형 인 데이터 , 여러 개 의 문자 를 하나 형태 로 결합 할 때 사용 ' 한국 ' + ' 스마트 정보 교육 원 ' " 한국 " + " 스마트 정보 교육 원 " 3 ) 대입 연산자 - 연산 된 데이터 를 변수 에 저장 할 때 사용 A = B A += B A *= B A / = B A %= B 예시 ) var a = 2 ; var b = 5 ; a += b ; / / 결국 a 의 값 은 7 4 ) 증감 연산자 - 숫자 형 데이터 를 1 씩 증가 또는 감소 시킬 때 사용 변수 --; 또는 -- 변수 ; 변수 ++; 또는 ++ 변수 ; * 선 증가 혹은 선 감소 : -- 변수 ;, ++ 변수 ; * 후 증가 혹은 후 감소 : 변수 --;, 변수 ++; 예시 ) var a = ++ b ; / / b 의 값 을 1 만큼 증가 시키 고 증가 된 값 을 a 에 대입 ; var a = b ++; / / b 의 값 을 a 에 대입 하 고 , b 의 값 을 증가 ; 5 ) 비교 연산자 - 연산 된 결과 값 은 true 혹은 false 로 논리 형 데이터 로 변환 A > B ; / / A 가 B 보다 크 다 A < B ; / / A 가 B 보다 작 다 A >= B ; / / A 가 B 보다 크 거나 같 다 A <= B ; / / A 가 B 보다 작 거나 같 다 A == B ; / / A 와 B 는 같 다 A ! = B ; / / A 와 B 는 다르 다 6 ) 논리 연산자 - or ( ||), and ( &&), not ( ! ) or : 피연산자 중 값 이 하나 라도 true 가 존재 하 면 true ; and : 피연산자 중 값 이 모두 true 일 때 true ; not : 피연산자 중 값 이 true 이 면 반 대로 false , false 일 경우 반 대로 true ; 7 ) 연산자 우선 순위 ( ) ; 단항 연산자 ( --, ++, ! ); 산술 연산자 ( *, / , %, +, -); 비교 연산자 ( >, >=, <, <=, ==, ===, ! ==, ! =); 논리 연산자 ( &&, ||); 대입 연산자 ( =, +=, -=, *=, / =, %=); 8 ) 삼항 조건 연산자 조건식 ? 값 1 : 값 2 ; : 조건식 이 ture 라면 값 1 대입 아니 라면 값 2 대입 예시 ) var a = 10 > 2 ? 1 : 0 ; 안 좋 은 예시 ) var a = 10 > 2 ? 10 < 30 ? 10 : 20 : 30 < 40 ? 30 : 40 ; var a = b > c ? d < e ? f : g : h < i ? j : k ; */ var a = 10 > 2 ; var b = 10 >= 10 ; var c = 10 ! = 10 ; document . writｅ ( '< br >'); document . writｅ ( a + ', ' + b + ', ' + c ) ; / * 실습 1 . a 의 나이 는 20 세 이 다 . b 는 22 세 , c 는 25 세 , d 는 19 세 , e 는 23 세 이 다 . 내 나이 는 평균 나이 이상 인가 ? 라는 문항 의 조건문 을 서술 하 시 오 . 실습 2 . print 이 라는 변수 의 값 을 아래 조건문 에 따라 완성 을 하 고 출력 하 시 오 . var print = ' 나 의 나이 는 '; var a = 20 ; varage = / / 여러분 의 나이 ; if ( a < age ) { / / 20 살 이상 입니다 . } else { / / 20 살 이하 입니다 . } document . writｅ ( '< br >'); document . writｅ ( print ) ; / / 예측 값 ' 나 의 나이 는 20 살 이상 입니다 . ' 혹은 ' 나 의 나이 는 20 살 이하 입니다 . '; */ var a = 20 ; var b = 22 ; var c = 25 ; var d = 19 ; var e = 23 ; var i = 37 ; document . writｅ ( '< br >'); document . writｅ ( ' 내 나이 는 평균 이상 인가 ? : '); document . writｅ ( ( a + b + c + d + e ) / 5 >= i ? ' 이상 ' : ' 이하 '); var print = ' 나 의 나이 는 '; var a = 20 ; var b = 22 ; var c = 25 ; var d = 19 ; var e = 23 ; var i = 37 ; var age = ( a + b + c + d + e ) / 5 ; document . writｅ ( '< br >'); document . writｅ ( ' 내 나이 는 : ' + i ) ; document . writｅ ( '< br >'); document . writｅ ( ' 평균 나이 는 : ' + age ) ; if ( i < age ) { print += ' 평균 이하 입니다 . '; } else { print += ' 평균 이상 입니다 . '; } document . writｅ ( '< br >'); document . writｅ ( print ) ; / * 실습 3 . 아래 의 로직 을 보 고 c 의 값 에 들 어 갈 숫자 를 출력 시켜 주 세요 . var a = 25 ; var b = 5 ; var c = 0 ; var d = 0 ; a += 50 ; a += b ; c += ? d = a + c ; document . writｅ ( '< br >'); document . writｅ ( ' d 의 값 은 100 이 다 c 의 값 은 ? '); document . writｅ ( ' c = ' + ? ); */ var a = 25 ; var b = 5 ; var c = 0 ; var d = 0 ; a += 50 ; / / 75 a += b ; / / 80 c += 100 - a ; / / 20 d = a + c ; / / 80 + 20 = 100 document . writｅ ( '< br >'); document . writｅ ( ' d 의 값 은 100 이 다 c 의 값 은 ? '); document . writｅ ( '< br >'); document . writｅ ( ' d = ' + d ) ; document . writｅ ( '< br >'); document . writｅ ( ' c = ' + c ) ; document . writｅ ( '< br >'); / * * * * * * * * * * * * * * * * * * * ************************* 4 . 조건문 - 조건식 이 참 인지 거짓 인지 판별 * * * * * * * * * * * * * * * * * * * * ************************/ / * 1 ) if - 조건식 을 만족 할 경우 ( true ) 에 만 코드 실행 2 ) else - 조건식 이 만족 하 지 않 을 경우 이 후 실행 예시 ) if ( 비교 연산자 , 논리 연산자 ) { } else { } */ if ( 0 ) { / / false 로 반환 document . writｅ ( ' 0 출력 < br >'); } if ( 1 ) { / / 0 이상 true 로 반환 document . writｅ ( ' 1 출력 < br >'); } if ( '') { / / 값 이 없 음 으로 false 로 반환 document . writｅ ( ' 공백 출력 < br >'); } if ( ' 문자 열값 있 음 ') { / / 값 이 있 음 으로 true 로 반환 document . writｅ ( ' 문자 열값 있 음 출력 < br >'); } if ( null ) { / / 값 이 없 음 으로 false 로 반환 document . writｅ ( ' null 출력 < br >'); } if ( undefined ) { / / 값 이 없 음 으로 false 로 반환 document . writｅ ( ' undefined 출력 < br >'); } / * prompt ( ' 문자열 ', ' 기본 값 '); - 사용 자 에게 질문 에 대한 값 을 받 을 때 사용 */ var min = prompt ( ' 당신 의 하루 통화량 은 몇 분 인가요 ? ', ' 0 '); if ( min >= 60 ) { document . writｅ ( ' 많이 사용 하 는 편 이 네요 . < br >'); } else { document . writｅ ( ' 적당 합니다 . < br >'); } / * confirm ( ' 문자열 '); - 사용 자 에게 질문 에 대한 결과 값 을 확인 취소 로 받 는다 . 확인 은 true , 취소 는 false 를 말 한다 . alert ( ' 문자열 ') - 사용 자 에게 메세지 전달 */ var check = confirm ( ' 정말로 회원 탈퇴 를 하 시 겠 습니까 ? '); if ( check ) { document . writｅ ( ' 탈퇴 완료 . < br >'); alert ( ' 탈퇴 완료 '); } else { document . writｅ ( ' 탈퇴 취소 . < br >'); alert ( ' 탈퇴 취소 '); } / * * * * * * * * * * * * * * * * * * * ************************* 5 . 반 복문 - 코드 를 원하 는 횟수 ( 조건 ) 만큼 반복 하 여 실행 * * * * * * * * * * * * * * * * * * * * ************************/ / * 1 ) while 문 - 조건식 을 만족 할 때 까지 코드 를 여러 회 반복 하 여 실행 var 조건 초기 변수 선언 while ( 조건문 ) { / / 내부 코드 } */ var index = 10 ; while ( index > 0 ) { / / 내부 코드 console . log ( index , ' : 인덱스 값 확인 '); / / 콘솔 로 그 는 크롬 브 라우 져 F 12 를 눌러 콘솔 탭 에서 확인 이 가능 index --; } / * 실습 4 . 0 부터 100 까지 while 문 으로 증가 를 하 고 2 의 배수 만 콘 솔창 으로 출력 시키 시 오 . */ var i = 0 ; while ( i <= 100 ) { if ( i % 2 == 0 && i > 0 ) { / / 2 의 배수 만 출력 되 어야 하 기 때문 에 증가 되 는 i 값 에 2 로 나눈 나머지 값 이 0 인지 비교 하 고 , and 조건 으로 0 보다 큰 값 을 콘솔 로 그 에 출력 하 도록 한다 . console . log ( i , ': 100 이하 의 2 의 배수 입니다 . '); } i ++; } / * 2 ) for 문 - 조건식 을 만족 할 때 까지 특정 코드 를 반복 하 여 실행 for ( 초기 값 ; 조건식 ; 증감 식 ) { / / 내부 코드 } */ for ( var i = 0 ; i < 10 ; i ++){ console . log ( i , ' : for 문 반복 '); } / * 실습 5 . 10 부터 0 까지 for 문 으로 작동 시켜 주 세요 . */ for ( var i = 10 ; i >= 0 ; i --){ / / 앞서 i 변수 를 var i = 0 ; 선언 해 주 었 기 에 해당 문 에서 는 i = 10 으로 만 해도 작동 은 된다 . 변수 선언 이 되 어 있 지 않 다면 for 문 내 초기 값 에 꼭 ! ! 사용 변수 를 선언 해야 한다 . console . log ( i , ' 10 부터 0 까지 for 문 반복 '); } for ( var i = 0 ; i < 10 ; i ++){ console . log ( i , ' : for - break 반복 '); if ( i == 5 ) { break ; } } / * * * * * * * * * * * * * * * * * * * ************************* 6 . 배열 기초 - 배열 의 인덱스 를 이해 하 고 이 에 따른 배열 을 정의 할 수 있 다 . * * * * * * * * * * * * * * * * * * * * ************************/ / * 1 ) 배열 선언 1 : var array = [ ] ; 2 ) 배열 선언 2 : var array = new Array ( ) ; */ / / 인덱스 는 0 번 부터 시작 한다 . / / 배열 의 크기 는 배열 이 가지 고 있 는 총 갯 수 / / 배열 의 내부 값 을 가지 고 오 기 위해서 ' 배열 변수 [ 인덱스 ] ' 로 가지 고 올 수 있 다 . var nameArray = [ ' 홍길동 ', ' 홍길 순 ', ' 둘리 ', ' 고 길동 ', ' 마 이콜 ']; var len = nameArray . length ; var name 1 = nameArray [ 0 ] ; / / 홍길동 var nameArray 2 = [ ] ; nameArray 2 . push ( ' 홍길동 '); for ( var i = 0 ; i < nameArray . length ; i ++){ console . log ( nameArray [ i ] , ' : 회원 이름 '); } / * 실습 6 . 지역 5 개 이상 을 지정 하 여 배열 을 만들 고 반 복문 으로 해당 지역 을 출력 시키 시 오 . */ var array = [ ' 효자동 ', ' 태평동 ', ' 인후동 ', ' 삼천동 ', ' 평화동 ']; for ( var a = 0 ; a < array . length ; a ++){ console . log ( array [ a ] , ' : 지역 이름 '); } / * 실습 7 . 0 ~ 300 까지 의 숫자 를 가지 는 배열 을 만들 고 이 를 출력 시켜 주 세요 . */ var number = [ ] ; for ( var i = 0 ; i < 300 ; i ++){ number . push ( i ) ; console . log ( number [ i ] , ' : number 배열 의 값 '); } / * * * * * * * * * * * * * * * * * * * ************************* 7 . 다중 반 복문 : 2 개 이상 의 반 복문 을 겹쳐 실행 된다 . * * * * * * * * * * * * * * * * * * * * ************************/ for ( var i = 1 ; i < 10 ; i ++){ for ( var s = 1 ; s < 10 ; s ++){ if ( i == 3 ) { console . log ( i + ' X ' + s + ' : ', s * i ) ; } } } / * 실습 8 . 구구단 의 값 이 3 의 배수 인 값 만 배열 에 담 고 그 배열 을 출력 시키 시 오 . */ var sumArray = [ ] ; for ( var i = 1 ; i < 10 ; i ++){ for ( var s = 1 ; s < 10 ; s ++){ var sum = s * i ; if ( sum % 3 == 0 ) { sumArray . push ( i + ' X ' + s + ' = ' + s * i ) } } } for ( var i = 0 ; i < sumArray . length ; i ++){ console . log ( sumArray [ i ] , ' : 3 의 배수 출력 '); } </ script ><!-- js 외부 파일 가지 고 오 기 --><!-- < script type =" text / javascript " src ="./ test . js "></ script > --></ head >< body ></ body ></ html >