JavaScript 기본

@ 자바스크립트의 기초 문법

 

 

 

 

1. 자바스크립트 지정 

 

 

 

 

내부지정	<script type=”text/javascript”> </script>
외부파일 지정	<script type=”text/javascript” src=”filename.js”></script>

 

 

2. 문장(statement)의 규칙

 

 

 

 

           1) 문장의 맨 끝에 세미콜론(;)를 붙인다

                     - 세미콜론 생략이 가능하지만, 문장의 단락이 모호함으로 생략하지 않는다

                     [ex] document.writeln(‘Hello’);

           2) 문장의 도중에 공백이나 개행, 탭이 가능

                     [ex] document.

                                writeln

                                (‘Hello’);

           3) 대소문자 구별

                     [ex] document.WritelN(‘hello’); // 안됨

           4) 주석

                     // 한줄 주석

                     /* 여러줄 주석 */

 

 

3. 변수

 

 

 

 

var 변수명;

   (*) var 예약어 생략이 가능하나 원칙적으로 생략하지 않는다.

 

 

 

 

           (1) 변수명명규칙

                     - 영문자, 언더스코프( _ ), $, 숫자 조합

                     - 첫글자는 영문자로 시작을 권장

                     - 대소문자 구별

                     - 예약어 안됨

 

 

4. 데이터타입

 

 

   (1) 데이터 타입의 종류

기본형	수치형(number) / 문자열형(string) / 논리형(boolean) / 특수형(null/undefined)
참조형	배열(array) / 객체(object) / 함수(function)

           (*) 자바스크립트는 데이터타입에 관대하다.

                     var temp = ‘temp는 문자열변수’;

                     temp = 100;     // 문자열변수 temp에 숫자값 대입 가능

 

 

 

 

   (2) 리터럴 : 데이터타입에 저장되는 값 그 자체

           - 문자리터럴은 ‘ ‘ 또는 “ “로 표현

           - 배열리터럴

                     var arr = [‘홍길동’, [‘김씨네’, ‘박씨네’], ‘홍길자’ ];

                     document.writeln( arr[1][0]  );

           - 객체리터럴

              ` 배열이 인덱스번호로 접근하는데 반해, 객체는 문자열로 접근하여 가시성을 높임

              ` 배열 내의 개별 데이터럴 ‘요소(element)’라 하는데 반해,

               객체의 개별 데이터는 프로퍼티(property)라 한다.

              ` 객체명.프로퍼티명 또는 객체명[‘프로퍼티명’]

                     var obj = { x:’안녕하세요’, y:’헬로우’, z:’올라’ };

                     document.writeln ( obj[‘x’] );

           - 함수리터럴 : 자바스크립스에서는 함수도 데이터타입의 하나이다.

           - 미정의값(undefined)

                     var x;

                     var obj = { a:100 };

                     document.writeln ( x );

                     document.writeln ( obj.b );

 

 

 

 

5. 연산자

 

 

 

 

산술	+, - , *, / , %, ++, --
비트	&, |, ^, ~, <<, >>, >>>
논리	&&, ||, !
비교	==, !=, <, <=, >, >=, ===, !==
대입	=, +=, -=, *=, /=, %=, &=, |=, ^=, <<=, >>=, >>>=

           ` === : 값이 같고 데이터타입도 같으면 true

           ` !== : 값이 같지 않거나 데이터타입이 다른 경우 true

           document.writeIn ( 0.2 * 3 );        //0.60000000000001

           document.writeIn ( 0.2 * 10 * 3  === 0.6 * 10  );    // true

 

 

 

 

6. 제어문

 

 

           ` 조건문 : if  / switch~case

           ` 반복문 : while / do~while / for

           ` 반복제어문 : break / continue

           ` 예외처리문 : try~catch~finally

 

 

   (*) 배열이나 객체의 for 문

           var member = [‘김길동’, ‘이길동’, ‘박길동’];

           for( var i in member ) {

                     document.writeln(‘멤버 :’ + member[i] );

           }

           var obj = { width:30, height:40 };

           for( var j in obj ) {

                     document.writeln( j + obj[j] );

           }

           var book = new Object();

           book.title = ‘자바스크립트마스터북’;

           book.publish=’JPUB’;

           book.price = 28000

           for( var k in book ) {

                     document.writeln( k + “ : “ + book[k] );

           }

 

 

 

 

7. 객체란?

 

 

           객체 = 프로퍼티 + 메소드

 

 

객체생성	var str = new String(‘안녕하시렵니까’);                 ( 그러나, 일반적으로 var str = ‘안녕’; 이라 기술 )
멤버접근	str.length     (객체명.프로퍼티명 or 객체명.메소드명( ) )

 

 

(1) String 객체

 

 

검색	indexOf( substr [,start] )	부분문자열 substr을 start+1번째부터 검색
	lastIndexOf( substr [,start] )	부분문자열 substr을 뒤에서부터 start+1번째부터 검색
부분문자열	charAt(n)	n+1번째 문자를 추출
	slice( start [,end] )	start+1에서 end 번째 문자를 추출
	substring( start [,end] )	start+1에서 end 번째 문자를 추출
	substr ( start [, cnt] )	start+1에서  cnt 만큼의 문자를 추출
	split ( str [, limit] )	str 문자열을 limit으로 분할하여 배열로 반환
정규표현	match ( reg )	정규표현 reg로 문자열을 검색
	replace ( reg, rep )	정규표현 reg로 문자열을 검색하여 rep로 치환
	search ( reg )	정규표현 reg로 문자열을 검색, 일치한 맨 처음위치 반환
대소문자	toLowerCase( )	소문자로 변환
	toUpperCase( )	대문자로 변환
그 외	concat(str)	문자열 뒤에 문자열 str 붙임
	length	문자열 길이 반환

 

 

 [실습]

  <script type="text/javascript">             

           var str = '너의 삶 속에 나의 삶을 넣어 삶을 영위하자';

           document.writeln( str.indexOf('삶') + '<br/>');

           document.writeln( str.lastIndexOf('삶')+ '<br/>');

           document.writeln( str.indexOf('인생') + '<br/>');

           document.writeln( str.length + '<br/>');

 

 

           var msg = '자바에서 웹프로젝트까지 열심히 하자!';

           document.writeln( msg.charAt(3)+ '<br/>');

           document.writeln( msg.slice( 5, 12 )+ '<br/>');

           document.writeln( msg.substring( 5, 12 )+ '<br/>');

           document.writeln( msg.substr(5, 7 ) + '<br/>');

           document.writeln( msg.split(' ')+ '<br/>');

           document.writeln( msg.concat('화이팅')+ '<br/>');

   </script>

          

(2) Number 객체

 

 

     - 자바스크립트의 자동형변환으로 인해 버그의 문제가 발생하기에

           Number 객체로 변환하던 parseInt( )나 parseFloat( )를 사용한다.

 

 

           document.writeln( 123 + “순서” );  // String

           document.writeln( ‘123’ - 10 ) ;     // Number

           (*) + 연산자는 한쪽 값이 문자열이면 문자열로 변환하기만 - 연산자는 수치로 변환한다.

 

 

(3)  Array 객체

 

 

concat( arr )	지정 배열을 현재의 배열에 붙임
join ( ch )	배열 내의 요소를 구문문자로
slice ( start [,end] )	start ~ end-1 번째 요소를 축출
splice ( start, cnt [,rep] )	배열 내의 start+1 ~ start+cnt+1 번째 요소를 rep로 대체
pop ( )	배열 끝의 요소를 삭제
push( data )	배열 끝에 요소를 추가
shift ( )	배열 선두의 요소를 삭제
reverse ( )	역순으로 정렬
sort ( )	정렬
toString ( )	문자열로 변환
length	배열의 크기

 

    [실습]

    <script type="text/javascript">          

           var arr = ['김태희','송혜교','전지현','한가인','김하늘'];

           document.writeln( arr + '<br/>');

           document.writeln( arr.join('/')+ '<br/>');

           document.writeln( arr.slice(3) + '<br/>');

           document.writeln( arr.slice(1,4) + '<br/>');

 

 

           document.writeln( arr.pop() + '<br/>');

           document.writeln( arr + '<br/>');

           document.writeln( arr.shift() + '<br/>');

           document.writeln( arr + '<br/>');

           document.writeln( arr.push('사미자') + '<br/>');

           document.writeln( arr + '<br/>');

 

 

           document.writeln( arr.reverse() + '<br/>');

           document.writeln( arr.sort() + '<br/>');

           document.writeln( arr.toString() + '<br/>');

           document.writeln( arr.length + '<br/>');

 

 

           var arrTemp = ['강동원', '고수' ];

           document.writeln( arr.concat(arrTemp) + '<br/>');

    </script>

 

 

(4) Date 객체

 

 

   [실습]

          //var d = new Date( 2013, 8, 15 ); -> 8은 9월로 인식

           var d = new Date('2013/08/15');

           document.writeln( d  + '<br/>');

           document.writeln( d.getFullYear()  + '<br/>');

           document.writeln( d.getMonth()  + '<br/>');

           document.writeln( d.getDate()  + '<br/>');

           document.writeln( d.getDay()  + '<br/>');

 

 

           var today = new Date();

           today.setFullYear(2013);

           today.setMonth(7);         // 8월

           today.setDate(15);

           document.writeln( today.toLocaleString()  + '<br/>');

           document.writeln( today.toGMTString()  + '<br/>');

           document.writeln( today.toDateString()  + '<br/>');

 

 

           today.setMonth( today.getMonth() - 3 );

           document.writeln( today.toLocaleString()  + '<br/>');

           today.setDate( today.getDate() - 20 );

           document.writeln( today.toLocaleString()  + '<br/>');

 

 

           today.setDate(0); // 전달의 마지막날

           document.writeln( today.toLocaleString()  + '<br/>');

 

 

           </script>

 

 

 

 

8. 정규화 표현식