- 일반오브젝트 -
일반 오브젝트는 브라우저와 상관없는 기능으로 내장오브젝트라고도 부른다. 내장오브젝트는 ECMAScript에 정의되어 있다.
일반 오브젝트에는 Array 오브젝트, RegExp - 정규식 표현, Math 오브젝트, String 오브젝트 - 문자열, Date 오브젝트 - 날짜 등이 있다.
Lesson 1 | |
a = new Array(1,2,3); a = [1,2,3,]; a = new Array(); | 모두 같은 배열을 생성한다. 내장 오브젝트를 이용하려면 new 연산자를 사용하여 새로운 오브젝트를 생성해야한다. |
a = new Array(1,2,3); b = a[0]; | 배열 요소 참조 |
a = new Array(1,2,3); a[0] = 4; a[1] = "five"; a[2] = "육"; | 배열 요소 대입하기 수치와 문자열과 같이 다른 형의 변수를 하나의 배열로 묶을 수도 있다. |
Lesson 2 | |
ani = new Array(); ani['dog'] = '개'; ani['cat'] = '고양이'; | 배열에서는 첨자에 문자열을 사용할 수 있다. 문자열을 첨자로 사용하는 배열을 '연상배열'이라고 한다. |
ani = new Array(); ani.dog = '개'; ani.cat = '고양이'; | 첨자가 영문자일 경우에는 다음과 같이 배열을 만들 수 있다. |
a = new Array(); a['dog']['name'] = '개'; a['dog']['cry'] = '멍멍'; a['cat']['name'] = '고양이'; a['cat']['cry'] = '야옹'; | 배열과 배열을 조합하여 만든 2차원 배열... 다차원 배열도 가능하다. |
a = ["a", "b", "c"]; delete a[1]; | 배열 요소의 제거 |
a = ["a", "b", "c"] delete a; | var로 선언하지 않은 배열 등의 오브젝트는 한꺼번에 제거할 수 있다. var로 선언된 오브젝트는 제거할 수 없다. |
Lesson 3 | |
a = [1.2.3.4]; b = a.slice(1,3); | a.slice(1,3) a배열의 a[1]요소부터 a[3]직전인 a[2]까지 잘라라. |
a = [1,2]; a.push(3); | 배열 a의 맨 끝 요소에 3을 추가하라. |
a = [1,2]; a.unshift(3); | 배열 a의 맨 처음 요소에 3을 추가하라. |
a = [1,2,3]; b = a.pop(); | 배열 a의 맨 끝 요소 a[2]를 삭제하라. |
a = [1,2,3]; b = a.shift(); | 배열 a의 맨 처음 요소 a[0]를 삭제하라. |
Lesson 4 | |
str = new String("복숭아"); | 문자열을 다루는 String 오브젝트 작성 |
str = "복숭아"; len = str.length; | 문자열의 길이를 구하는 length 프로퍼티 |
str = new String("복숭아"); c = str.charAt(1); | 문자열에 지정된 한 문자를 잘라내는 charAt(n)메소드; 옆의 보기는 '숭'을 잘라낸다. |
str = "2008/5/30"; arr = str.split("/"); | 문자열을 배열로 분할하는 split()메서드 split("/") 메서드 -> 슬래시도 구분한 문자를 분할하여 배열로 저장한다. arr[0] = 2008 arr[1] = 5 arr[2] = 30 |
str = "엣날이야기"; num = str.indexOf("기", 1); | '날'부터 문자 "기"를 검색한다. 인덱스 번호를 반환하며 해당 문자를 찾지 못했을 시 - 를 반환한다. 검색위치를 지정하지 않으면 문자열의 처음부터 검색한다. |
Lesson 5 | |
a = Math.abs(01); | 절대값 |
a = Math.PI; | 원주율 |
a = Math.ceil(100.4) | 절상 101 |
a = Math.floor(100.4); | 절하 100 |
a = Math.max(1,10,3); | 최대값 10 |
a = Math.min(1,8,3); | 최소값 1 |
a = Math.pow(4,2); | 제곱 4^2 = 16 |
a = Math.random(); | 난수 (0이상 1미만) |
a = Math.round(100.4); | 소수점 이하 버림 100 |
a = Math.sqrt(25); | 평방근 5 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <script type="text/javascript"> col = new Array(); col[0] = "red"; col[1] = "blue"; col[2] = "yellow"; col[3] = "green"; col[4] = "pink"; col[5] = "gray"; n = Math.floor(Math.random()*col.length); document.bgColor = col[n]; </script> </body> </html> | |
Lesson 6 | |
now = new Date(); document.write(now); | 날짜 혹은 시간을 다루려면 Date 오브젝트를 사용한다. 인수를 지정하지 않으면 현재 날짜와 시각으로 된 Date 오브젝트가 만들어진다. |
day = new Date(2008, 1, 1, 0, 0, 0); | |
now = new Date(); FY = now.getFullYear(); M = now.getMonth() + 1; Dt = now.getDate(); Dy = now.getDay(); | getFullYear() - 연도를 반환한다. getMonth() - 월을 하나 작은 숫자로 반환한다. getDate() - 일을 반환한다. getDay() - 일요일을 0으로 하여 0부터 6까지의 수치로 요일을 반환 |
now = new Date(); H = now.getHours(); Min = now.getMinutes(); Sec = now.getSecounds(); time = now.getTime(); | getHours() - 시간을 반환한다. getMinutes() - 분을 반환한다. getSecounds() - 초를 반환한다. getTime() - 1970년 1월 1일 오전 0시부터 센 현재 시간을 밀리초 단위로 반환한다. |
now = new Date(); time = now.getTime(); | 지정한 날짜까지의 일수를 구하려면 getTime()메서드를 사용한다. |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <script type="text/javascript"> day = new Date(2008,1,1,0,0,0); now = new DAte(); time = day.getTime() - now.getTime(); days = Math.ceil(time/(24*60*60*1000)); document.write(days,"일"); </script> </body> </html> | 현재부터 지정된 날짜까지의 일수 구하기 |
Lesson 7 | |
정규 표현을 사용하면 반복되는 패턴을 사용할 수 있다. 정규 표현은 문자열을 추상적으로 표현한다. | <반각영문자> 부분을 정규표현으로 나타내면 다음과 같다. |
메타문자 | 의미 |
. | 임의의 한 문자 (줄바꿈문자 제외) |
* | 0번 이상의 반복 |
+ | 1번 이상의 반복 |
? | 0번 또는 1번 이상의 반복 |
^ | 처음 |
$ | 끝 |
| | 선택 |
() | 정규 표현의 그룹 |
[] | 문자 클래스 |
{n} | n번 반복 |
{n,} | n번 이상 반복 |
{n,m} | n번 이상 m번 이하 반복 |
\ | 메타문자를 문자로 취급 |
[02468] | 0,2,4,6,8 중 어느 한 문자 여러 개의 문자를 모아둔 것을 '문자 클래스'라고 한다. 문자 클래스는 [ ]로 묶어서 기술한다.
|
[^024] | 0,2,4 이외의 한 문자 문자 클래스앞에 ^를 붙이면 문자 클래스의 부정을 나타낸다. |
[0123456789] = [0-9] | 숫자나 알파벳이 연속으로 있을 때는 처음 문자열과 맨 마지막 문자열을 --로 연결하여 쓸 수 있다. |
\w [0-9a-zA-z] | 영문자와 언더바(_) |
\W [^0-9a-zA-Z] | 영문자와 언더바(_) 외 |
[\t\n\r\f] | 공백(스페이스, 탭, 개행) |
\S [^\t\n\r\f] | 공백 이외 |
\d [0-9] | 숫자 |
\D [^0-9] | tntwk dldhl |
(ab)+b | ()를 사용하면 패턴을 그룹화할 수 있다. 문자열 ab를 1번이상 반복한다. 즉, abb 혹은 ababb혹은 abababb... |
Lesson 8 | |
str = "I like kimchi."; reg = new RegExp("[a-z]{5}"); mat = str.match(reg); | RegExp 오브젝트 - 정규 표현으로 패턴 매치를 수행할 때 사용하는 오브젝트이다. math()메서드 - 패턴이 일치한 문자열을 포함하는 배열을 반환한다. |
str = "I like Kimchi." reg = new RegExp("[A-Z]{5}", "i"); mat = str.match(reg); | 대문자와 소문자를 구분하지 않을 때는 i 플러그 옵션을 사용한다. |
str = "i like kimchi and curry." reg = new RegExp("[a-z]}{5,}", "g"); mat = str.match(reg); | g 플러그 - 일치한 문자열을 모두 구한다. reg = new RegExp(...) |
str1="i like kimchi."; rep = "curry"; reg = new RegExp("[a-z]{5}"); str2=str1.replace(reg, rep); | 문자열의 치환 |
Practice | |
1. 3개의 과일 이름을 나열하는 배열을 정의하라 | fruits = new Array(3); fruits[0] = '복숭아'; fruits[1] = '포도'; fruits[2] = '망고'; fruits = new Array('복숭아', '포도', '망고'); |
2. 1.에서 작성한 배열에 수박과 무화과를 추가한 후 맨 처음 요소를 삭제하라. | fruits.push('수박'); fruits.push('무화과'); fruits.shift(); 배열 끝에 요소 추가 push()메서드 배열 처음 추가 unshift() 메서드 배열 끝 삭제 pop() 메서드 배열 처음 삭제 shift() 메서드 |
3. 다음 두 문자열의 길이를 구하여 긴쪽의 문자열을 보여주는 코드를 작성하라 장수풍뎅이 vs 하늘소 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <script type="text/javascript"> str1 = '장수풍뎅이'; str2 = '하늘소'; len1 = str1.length; len2 = str2.length; if(len1>len2) document.write(str1); else if(len1 < len2) document.write(str2); else document.write("두 문자열의 길이가 같습니다."); </script> </body> </html> |
4. 난수로 발생한 1부터 100까지의 정수를 이진 검색을 사용하여 알아맞히는 코드를 작성하라. 이진 검색은 범위를 절반씩 좁혀가며 원하는 수를 찾는 검색방법이다. 예) 찾는 숫자가 12인 경우 먼저 1부터 100의 중간이 50보다 큰지, 작은지를 비교한다. 12는 50보다 작으므로 범위를 다시 1부터 50까지로 조정한다. 그 후 25보다 큰지 작은지를 비교하여 25보다 작으므로 1부터 25로 범위를 재종한다. 1과 25의 반은 소수가 되므로 비교값으로 12나 13을 선택한다. 만약 12를 선택했다면 찾는 값과 비교값이 일치하므로 3번의 검색으로 12를 찾을 수 있다. | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <script type="text/javascript"> start = 0; middle =0; end = 100; i =0; num = Math.floor(Math.random()*100) +1; while(1){ i++; middle = parseInt((start+end)/2); if(num==middle) { document.write("찾는 숫자는" + middle + "입니다.<br>"+i+"번 검색함."); break; } else if (num<middle){ end = middle; } else { start = middle; } } </script> </body> </html> |
댓글