1 . 오전 <! DOCTYPE html >< html >< head >< meta charset =" UTF - 8 ">< title > Insert title here </ title >< script type =" text / javascript "> / * * * * * * * * * * * * * * * * * * * * * * * * * * * * * ************************* 객체 - 자바 스크립트 는 객체 ( Obeject ) 기반 언어 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * ************************/ / * 1 . 객체 1 ) 객체 , 메 서드 ( ) ; 2 ) 객체 , 속성 ; - 객체 의 메서 드 를 실행 - 객체 의 속성 값 을 가지 고 온다 . - 객체 의 속성 값 을 변경 2 . 객체 의 종류 1 ) 내장 객체 - 문자 , 날짜 , 배열 , 수학 2 ) 브라우저 객체 ( bom ) - window , screen , location , history , navigator 3 ) 문서 객체 ( dom ) - html 문서 구조 3 . 내장 객체 - 브라우저 의 자바 스크립트 엔진 에 내장 된 객체 - 문자 ( String ) , 날짜 ( Date ) , 배열 ( Array ) , 수학 ( Math ) - 참 조변수 ( 인스 턴 드 이름 ) = new 생성 함수 ( 내장 객체 ) ; 1 ) 날짜 정보 객체 ( Date ) - var 참 조변수 = new Date ( ) ; - var 참 조변수 = new Date ( ' 년 / 월 / 일 '); - var 참 조변수 = new Date ( 년 , 월 , 일 ) ; - 참 조변수 . getdate ( ) - 오늘 날짜 - 참 조변수 . getMonth ( ) - 월 - 참 조변수 . getFullYear ( ) - 년 도 - 참 조변수 . setDate ( 참조 변수 . getDate ( ) + 1 ) ; - 날짜 변경 - 1 초 : 1000 - 1 분 : 1000 * 60 - 1 시간 : 1000 * 60 * 60 - 하루 : 1000 * 60 * 60 * 24 ex ) var date = new Date ( ' 2019 / 08 / 14 '); var date 2 = nate Date ( ' 2019 / 08 / 13 '); date - date 2 = 8600000 값 반환 86400000 = 1000 * 60 * 60 * 24 같 은 값 이 며 하루 차이 나 는 걸 볼 수 있 음 . 2 ) 수학 객체 ( Math ) - 수학 과 관련 된 기능 과 속성 을 제공 - Math . abs ( 숫자 ) : 절대값 - Math . round ( 숫자 ) : 반올림 - Math . cell ( 숫자 ) : 올림 - Math . floor ( 숫자 ) : 내림 3 ) 배열 객체 ( Array ) - 하나 의 저 장소 에 여러 데이터 를 저장 - var 참 조변수 = new Array ( ) ; - var 참 조변수 = [ ] ; - var 참 조변수 = new Array ( 값 1 , 값 2 , 값 3 ) ; - 참 조변수 . join ( "-"); - 배열 의 저장 된 값 을 지정 된 문자열 로 연결 하 여 하나 의 문자열 로 반환 한다 . - 참 조변수 . concat ( 참조 변수 2 ) ; - 2 개 의 배열 을 하나 의 배열 로 통합 한다 . - 참 조변수 . unshift ( 값 ) ; - 배열 의 가장 앞쪽 인덱스 에 값 을 추가 한다 . - 참 조변수 . phsh ( 값 ) ; - 배열 의 가장 뒤쪽 인덱스 에 값 을 추가 한다 . - 참 조변수 . pop ( ) ; - 배열 의 마지막 인덱스 값 을 불러온다 . - 참 조변수 . shift ( ) ; - 배열 의 가장 앞쪽 인덱스 값 을 불러온다 . 4 ) 문자열 객체 - 문자열 을 객체 로 취급 - var 참 조변수 = new String ( ' 값 '); - var 참 조변수 = ' 값 '; - 참 조변수 . indexOf ( ' 찾 는 문자열 ') - 문자열 왼쪽 부터 찾 는 문자열 과 일치 하 는 인덱스 번호 를 반환 한다 . - 참 조변수 . lastIndexOf ( ' 찾 는 문자열 ') - 찾 는 문자열 중 가장 오른쪽 에 위치 하 며 일치 하 는 인덱스 번호 를 반환 한다 . - 참 조변수 . charAt ( index ) ; - 문자열 에서 인덱스 번호 에 해당 되 는 문자 를 반환 한다 . - 참 조변수 . replace ( ' 바꿀 문자열 ', ' 새 문자열 ') - 문자열 에서 왼쪽 부터 바꿀 문자 와 일치 하 는 문자 를 찾 아 새 문자열 로 대체 한다 . - 참 조변수 . subtring ( a , b ) - a 인덱스 부터 b 인 데스 까지 구간 문자 를 반환 한다 . - 참 조변수 . length - 문자열 의 크기 ( 문자 갯 수 ) 를 반환 한다 . - 참 조변수 . split ( ' 값 ') - 문자열 을 값 기준 으로 나누 어 배열 로 반환 한다 . 4 . 브라우저 객체 - 브라우저 에 내장 된 객체 ( window ) - window . open ( ' url ', ' 새창 이름 ', ' 새창 옵션 '); - url 페이지 를 새창 으로 나타냅니다 . ex ) window . open ( ' http : / / naver . com ', ' 한국 스마트 정보 교육 원 ', ' width = 350 , height = 350 , left = 50 , top = 50 , scrollbars = no '); - window . setInterval ( 함수 , 시간 ) ; - 지속 적 으로 일정 한 시간 간격 으로 함수 실행 ex ) - 1 초 마다 카 운 팅 var count = 0 ; var counting = setInterval ( function ( ) { console . log ( count ) ; count ++; if ( count == 5 ) { clearInterval ( counting ) ; / / 지속 적 으로 실행 되 는 setInterval 정지 ( setInterval 함수 안 에 명령 하 여야 작동 ) } }, 1000 ) ; - sindow . setTimeout ( 함수 , 시간 ) ; - 지정 된 시간 이후 에 함수 실행 ex ) 5 초 이후 에 창 닫 기 setTimeout ( function ( ) { window . close ( ) ; }, 5000 ) ; *** *** 실습 1 . 10 초 이후 에 ksmart . or . kr 사이트 를 새창 으로 띄워 주 세요 . *** setTimeout ( function ( ) { window . open ( ' http : / / naver . com ') }, 5000 ) ; - location . href - 주소 영역 의 참조 주소 를 설정 하 거나 url 을 반환 - location . search - 주소 영역 의 쿼리 를 반환 - location . reload ( ) ; - 새로 고침 - history . back ( ) ; - 이전 방문 사이트 이동 혹은 매개변수 값 이 있 는 만큼 이동 - history . go ( 이동 숫자 ) ; - 이동 숫자 에 들어간 숫자 만큼 사이트 이동 ( 이동 숫자 : - 숫자 or + 숫자 ) 5 . dom - 문서 객체 모델 - document . getElementById ( ' 테 그 아이디 '); - 테 그 의 속성 아이디 값 과 일치 하 는 테 그 객체 를 가지 고 온다 . - document . getElementsByTagName ( ' 테 그 명 '); - 테 그 명과 일치 하 는 테 그 객체 를 가지 고 온다 . - document . getElementsByClassName ( ' 클 레스 명 '); - 클 레스 명과 일치 하 는 테 그 객체 를 가지 고 온다 . ex ) < input type =" text " id =" myInput " value =" 한국 스마트 정보 교육 원 "> / / html < body ></ body > 내 에 있 는 테 그 / / javascript 에 작성 하 여야 하 며 , 절차 적 으로 코드 를 진행 하 기 에 뒷부분 에 작성 var myInput = document . getElementById ( ' myInput '); myInput . value ; / / 결과 값 : " 한국 스마트 정보 교육 원 " myInput . value = ' 전주 '; / / value 값 을 " 전주 " 로 변경 */ </ script ></ head >< body > < input type =" text " id =" myInput " value =""> < button type =" button " id =" btnEv " onclick =" a ( ) "> 확인 </ button > < div id =" createHtml "> </ div > < script type =" text / javascript "> if ( myInput . value == ""){ alert ( ' 값 을 입력 해 주 세요 . '); myInput . focus ( ) ; / / 해당 input 에 커서 위치 시키 기 } var a = function ( ) { var myInput = document . getElementById ( ' myInput '); var createHtml = document . getElementById ( ' createHtml '); myInput . value = ' 전주 '; / / value 값 을 " 전주 " 로 변경 alert ( ' 입력 된 값 이 없 어 값 을 임의 값 " 전주 " 로 입력 하 겠 습니다 . '); createHtml . innerHTML = '< h 1 > 안녕 하 세요 . 전주 에서 오 셨 군요 . </ h 1 >'; } </ script ></ body ></ html > 2 . 오후 <! DOCTYPE html >< html >< head >< meta charset =" UTF - 8 ">< title > Insert title here </ title >< script type =" text / javascript "> / * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * ************************* 함수 - 코드 를 메모리 에 저장 했 다가 필요 할 때 마다 호출 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * ************************/ / * 1 . 기본 함수 정의 문 - 함수 를 사용 하 여 코드 를 저장 한 것 1 ) 기본 형 function 함수 명 ( ) { } 2 ) 참조 형 var 변수 = 함수 명 ( ) { } 3 ) 함수 실행 - 함수 명 ( ) ; ex ) var count = 0 ; function fun ( ) { setInterval ( function ( ) { console . log ( count ) ; count ++; if ( count == 5 ) { clearInterval ( ) ; } }, 1000 ) ; } 2 . 매개변수 가 있 는 함수 정의 문 1 ) 기본 형 function 함수 명 ( 매개변수 1 , 매개변수 2 , 매개변수 3 , ... 매개변수 n ) { } 2 ) 참조 형 var 변수 = function ( 매개변수 1 , 매개변수 2 , 매개변수 3 , ... 매개변수 n ) { } 3 ) 함수 실행 - 함수 명 ( 매개변수 1 , 매개변수 2 , 매개변수 3 , ... 매개변수 n ) ; - 매개변수 없이 도 실행 가능 / / 함 수명 ( ) ; ex ) var count = 0 ; var fun = function ( sum 1 , sum 2 ) { console . log ( sum 1 , sum 2 , '<< 매개변수 값 '); if ( sum 1 == undefined ) { sum 1 = 1000 ; } if ( sum 2 == undefined ) { sum 2 = 1 ; } var m = setInterval ( function ( ) { console . log ( count ) ; count ++; if ( count == 5 ) { clearInterval ( m ) ; } }, sum 1 * sum 2 ) ; } **** **** 실습 1 . 함수 에 매개변수 를 1 개 받 아 받 은 매개변수 의 값 의 구구단 을 출력 시켜 주 세요 . **** 풀이 ) var gugudan = function ( a ) { if ( a > 0 && a < 10 ) { for ( var b = 1 ; b < 10 ; b ++){ console . log ( a + " X " + b + " = " + a * b ) ; } } else { console . log ( " 1 ~ 9 까지 입력 가능 합니다 . 다시 입력 해 주 세요 . "); } } gugudan ( 2 ) ; / / 매개변수 값 에 2 를 넣 고 함수 실행 3 . 데이터 를 반환 하 고 강제 종료 하 는 return 문 ; 1 ) 기본 형 function 함수 명 ( 매개변수 1 , 매개변수 2 , 매개변수 3 , ... 매개변수 n ) { return 값 ; } 2 ) 참조 형 var 변수 = function ( 매개변수 1 , 매개변수 2 , 매개변수 3 , ... 매개변수 n ) { retunr 값 ; } 3 ) 함수 실행 - 함수 명 ( 매개변수 1 , 매개변수 2 , 매개변수 3 , ... 매개변수 n ) ; - 매개변수 없이 도 실행 가능 / / 함 수명 ( ) ; ex 01 ) var fun = function ( n ) { if ( n > 9 ) { console . log ( 9 ) ; return false ; } if ( n > 6 ) { console . log ( 6 ) ; return false ; } if ( n > 3 ) { console . log ( 3 ) ; return false ; } console . log ( n , ' 매개 변수 값 '); } ex 02 ) var fun = function ( n 1 , n 2 ) { return n 1 + n 2 ; } var sum = fun ( 1 , 2 ) ; / / sum 호 출시 함수 fun 에 매개변수 1 과 2 를 입력 하 여 실행 **** **** 실습 2 . 함수 에 매개변수 를 1 개 받 아 받 은 매개변수 의 값 의 구구단 의 값 을 합산 시켜 리턴 해 주 세요 . **** 풀이 ) var c = 0 ; var gugudan = function ( a ) { for ( var b = 0 ; b < 10 ; b ++){ c += a * b ; } return c ; } var sum = gugudan ( 1 ) ; console . log ( sum ) ; 4 . 함수 스코프 - 함수 의 유효 범위 *** 스코프 ( Scope ) = 범위 ( 대괄호 범위 ) ex ) 변수 명 이 전역 , 지역 변수 . 즉 , sum 으로 동일 하 게 선언 하 라도 inside 와 outside 는 따로 인식 var sum = 2 ; var fun = function ( ) { var sum = 1 ; console . log ( sum , ' inside '); } fun ( ) ; console . log ( sum , ' outside '); 결과 값 : 1 " inside " 2 " outside " 5 . 재귀 호출 - 함수 정의 문 내 에서 작성 된 코드 로 함수 를 다시 호출 하 는 방법 *** 무한 루프 되 기 에 해당 코딩 은 피해야 한다 . var fun = function ( ) { console . log ( ' fun call '); fun ( ) ; } fun ( ) ; **** **** 실습 2 . 함수 에 매개변수 를 1 개 받 아 받 은 매개변수 의 값 의 구구단 의 값 을 합산 하 다가 값 이 50 이 넘 으면 바로 리턴 해 주 세요 . **** 풀 이 01 ) var gugudan = function ( a ) { var c = 0 ; for ( var b = 0 ; b < 10 ; b ++){ c += a * b ; if ( c > 50 ) { return c ; } } } var sum = gugudan ( 8 ) ; 풀 이 02 ) var count = 0 ; var b = 0 ; var gugudan = function ( a ) { var roof = setInterval ( function ( ) { b = a * count ; console . log ( a + " X " + count + " = " + b ) count ++; if ( b > 50 ) { clearInterval ( roof ) ; console . log ( b ) ; return b ; } if ( count >= 10 ) { clearInterval ( roof ) ; console . log ( b ) ; return b ; } }, 1 ) ; } */ </ script ></ head >< body ></ body ></ html > 3 . jone . html 응용 < script type =" text / javascript "> var submitFun = function ( ) { / / memberForm 아이디 를 가진 form 객 채 를 가지 고 온다 . var form = document . getElementById ( ' memberForm '); var memberId = form . memberId ; / / form 객체 의 요소 중 하나 만 input 의 name 속성 값 이 ' memberId ' 만 input 한다 . var memberPw = form . memberPw ; / / form 객체 의 요소 중 하나 만 input 의 name 속성 값 이 ' memberPw ' 만 input 한다 . var memberRePw = form . memberRePw ; / / form 객체 의 요소 중 하나 만 input 의 name 속성 값 이 ' memberRePw ' 만 input 한다 . var memberName = form . memberName ; / / form 객체 의 요소 중 하나 만 input 의 name 속성 값 이 ' memberName ' 만 input 한다 . var memberHobby = form . memberHobby ; / / form 객체 의 요소 중 하나 만 input 의 name 속성 값 이 ' memberHobby ' 만 input 한다 . // memberId 의 속성 인 ( input 의 vale 속성 ) value 값 을 가지 고 와서 비교 한다 . if ( memberId . value == ''){ alert ( ' 아이디 를 입력 해 주 세요 . '); memberId . focus ( ) ; / / memberId 의 개체 로 포 커싱 을 한다 . return false ; } if ( memberPw . value == ''){ alert ( ' 비밀 번호 를 입력 해 주 세요 . '); memberPw . focus ( ) ; / / memberPw 의 개체 로 포 커싱 을 한다 . return false ; } if ( memberPw . value ! = '' && memberPw . value ! = memberRePw . value ) { alert ( ' 비밀 번호 가 동일 하 지 않 습니다 . '); memberPw . focus ( ) ; / / memberPw 의 개체 로 포 커싱 을 한다 . return false ; } var count = 0 ; for ( var i = 0 ; i < memberHobby . length ; i ++){ if ( memberHobby [ i ] . checked ) { count ++; } console . log ( memberHobby [ i ] . checked ) ; } if ( count == 0 ) { alert ( ' 취미 를 1 개 이상 체크 하 여 주 세요 . '); memberHobby [ 0 ] . focus ( ) ; return false ; } console . log ( memberHobby ) ; } </ script >