CHAPTER 9. 자바스크립트객체
객체 객체 (object) 는사물의속성과동작을묶어서표현하는기법 ( 예 ) 자동차는메이커, 모델, 색상, 마력과같은속성도있고출발하기, 정지하기등의동작도가지고있다.
객체의종류 객체의 2 가지종류 내장객체 (bulit-in object): 생성자가미리작성되어있다. 사용자정의객체 (custom object): 사용자가생성자를정의한다. 내장객체들은생성자를정의하지않고도사용이가능하다. Date, String, Array 와같은객체들이내장객체이다.
객체생성방법 객체를생성하는 2 가지방법 객체를객체상수로부터직접생성한다. 생성자함수를이용하여객체를정의하고 new 를통하여객체의인스턴스를생성한다.
객체상수로부터객체생성
생성자를이용한객체생성
생성자를이용한객체생성
객체생성예제 <!DOCTYPE html> <html> <body> <script> function Car(model, speed, color) { this.model=model; this.speed=speed; this.color = color; this.brake = function () { this.speed -= 10; this.accel = function () { this.speed += 10; mycar = new Car("520d", 60, "red"); document.write(" 모델 :" + mycar.model + " 속도 :" + mycar.speed + "<br />"); mycar.accel(); document.write(" 모델 :" + mycar.model + " 속도 :" + mycar.speed + "<br />"); mycar.brake(); document.write(" 모델 :" + mycar.model + " 속도 :" + mycar.speed + "<br />"); </script> </body> </html>
객체에속성과메소드추가 기존에존재하고있던객체에도속성을추가할수있다. 생성자함수는변경할필요가없다. mycar.turbo = true; mycar.showmodel = function() { alert( " 모델은 " + this.model + " 입니다." )
프로토타입 자바스크립트에서메소드를여러객체가공유하려면어떻게해야하는가? 현재는메소드를공유할수없다. function Point(xpos, ypos) { this.x = xpos; this.y = ypos; this.getdistance = function () { return Math.sqrt(this.x * this.x + this.y * this.y); ; var p1 = new Point(10, 20); var p2 = new Point(10, 30);
프로토타입 자바스크립트의모든객체들은 prototype 이라는숨겨진객체를가지고있으며이객체를이용하여서공유되는메소드를작성할수있다. function Point(xpos, ypos) { this.x = xpos; this.y = ypos; Point.prototype.getDistance = function () { return Math.sqrt(this.x * this.x + this.y * this.y); ;
프로토타입예제 <!DOCTYPE html> <html> <body> <script> function Point(xpos, ypos) { this.x = xpos; this.y = ypos; Point.prototype.getDistance = function (p) { return Math.sqrt(this.x * this.x + this.y * this.y); var p1 = new Point(10, 20); var d1 = p1.getdistance(); var p2 = new Point(10, 30); var d2 = p2.getdistance(); document.writeln(d1 + "<br />"); document.writeln(d2 + "<br />"); </script> </body> </html>
프로토타입체인 자바스크립트에서속성이나메소드를참조하게되면다음과같은순서대로찾는다. 1. 객체안에속성이나메소드가정의되어있는지체크한다. 2. 객체안에정의되어있지않으면객체의 prototype 이속성이나메소드를가지고있는지체크한다. 3. 원하는속성 / 메소드를찾을때까지프로토타입체인 (chain) 을따라서올라간다.
자바스크립트내장객체 String 객체 Date 객체 Array 객체...
Date 객체 Date 객체는날짜와시간작업을하는데사용되는가장기본적인객체 new Date() // 현재날짜와시간 new Date(milliseconds) //1970/01/01 이후의밀리초 new Date(dateString)// 다양한문자열 new Date(year, month, date[, hours[, minutes[, seconds[,ms]]]])
예제 <script> var d1 = new Date(2013, 7, 21, 0, 0, 0); var d2 = new Date("January 20, 2013 11:13:00"); alert(d1); alert(d2); </script>
Date 객체의메소드
예제 <script> var today = new Date(); document.write(today.todatestring() + "<br>"); document.write(today.toisostring() + "<br>"); document.write(today.tojson() + "<br>"); document.write(today.tolocaledatestring() + "<br>"); document.write(today.tolocaletimestring() + "<br>"); document.write(today.tolocalestring() + "<br>"); document.write(today.tostring() + "<br>"); document.write(today.totimestring() + "<br>"); document.write(today.toutcstring() + "<br>"); </script>
날짜비교예제 <!DOCTYPE html> <html> <head> <script> function checkdate() { var s = document.getelementbyid("pdate").value; var pdate = new Date(s); var today = new Date(); var diff = today.gettime() - pdate.gettime(); var days = Math.floor(diff / (1000 * 60 * 60 * 24)); if (days > 30) { alert(" 교환기한이지났습니다."); </script> </head>
예제 <body> 구입날짜 : <input type="date" id="pdate"> <button onclick="checkdate()"> 검사 </button> </body> </html>
타이머예제 <div id='remaining'></div> <script> function datesuntilnewyear() { var now = new Date(); var newyear = new Date('January 1, ' + (now.getfullyear() + 1)); var diff = newyear - now; var milliseconds = Math.floor(diff % 1000); diff = diff / 1000; var seconds = Math.floor(diff % 60); diff = diff / 60; var minutes = Math.floor(diff % 60); diff = diff / 60; var hours = Math.floor(diff % 24); diff = diff / 24; var days = Math.floor(diff); var outstr = ' 내년도신정까지 ' + days + ' 일, ' + hours + ' 시간, ' + minutes; outstr += ' 분, ' + seconds + ' 초 ' + ' 남았읍니다.'; document.getelementbyid('remaining').innerhtml = outstr; // 1초가지나면다시함수를호출한다. settimeout("datesuntilnewyear()", 1000); // 타이머를시작한다. datesuntilnewyear(); </script>
시계예제 <div id='clock'></div> <script> function setclock() { var now = new Date(); var s = now.gethours() + ':' + now.getminutes() + ':' + now.getseconds(); document.getelementbyid('clock').innerhtml = s; settimeout('setclock()', 1000); setclock(); </script>
Number 객체 Number 객체는수치형값을감싸서객체로만들어주는랩퍼 (wrapper) 객체 var num = new Number(7); 메소드 tofixed([digits]) var num = 123.456789; document.writeln(num.tofixed(1) + '<br>'); // 123.5 toprecision([precision)) var num = 123.456789; document.writeln(num.toprecision(1) + '<br>'); // 1e+2 tostring([radix])
예제 <script> var count1, count2; count1 = new Number(1.237); count2 = 1.238; if (count1.tofixed(2) === count2.tofixed(2)) alert(" 소수점 2 째자리까지같습니다."); </script>
String 객체 속성 length prototype constructor 메소드 charat() concat() indexof() lastindexof() match() replace() search() slice()...
예제 <script> var s = 'abcdef'; var result1 = s.tolowercase(); var result2 = s.touppercase(); document.writeln(result1); // 출력 : abcdef document.writeln(result2); // 출력 : ABCDEF </script>
예제 <script> var s1 = " 문자열 1 "; var s2 = " 문자열 2 "; s3 = s1.concat(s2); document.writeln(s3 + '<br>'); // 문자열 1 문자열 2 </script>
예제 <script> s = "One,Two,Three,Four,Five"; array = s.split(','); for (i = 0; i < array.length; i++) { document.writeln(i + '-' + array[i] + '<BR>'); </script>
예제 <script> var s = "This is a test."; document.write("big: " + s.big() + "<br>"); document.write("small: " + s.small() + "<br>"); document.write("bold: " + s.bold() + "<br>"); document.write("italic: " + s.italics() + "<br>"); document.write("fixed: " + s.fixed() + "<br>"); document.write("strike: " + s.strike() + "<br>"); document.write("fontcolor: " + s.fontcolor("green") + "<br>"); document.write("fontsize: " + s.fontsize(6) + "<br>"); document.write("subscript: " + s.sub() + "<br>"); document.write("superscript: " + s.sup() + "<br>"); document.write("link: " + s.link("http://www.google.com") + "<br>"); </script>
Math 객체
계산기예제 <html> <head> <script> function calc(type) { x = Number(document.calculator.number1.value); if (type == 1) y = Math.sin((x * Math.PI) / 180.0); else if (type == 2) y = Math.log(x); else if (type == 3) y = Math.sqrt(x); else if (type == 4) y = Math.abs(x); document.calculator.total.value = y; </script> </head>
예제 <body> <form name="calculator"> 입력 : <input type="text" name="number1"><br /> 계산결과 : <input type="text" name="total"><br /> <input type="button" value="sin" onclick="calc(1);"> <input type="button" value="log" onclick="calc(2);"> <input type="button" value="sqrt" onclick="calc(3);"> <input type="button" value="abs" onclick="calc(4);"> </form> </body> </html>
Array 객체 배열을나타내는객체 var myarray = new Array(); myarray[0] = "apple"; myarray[1] = "banana"; myarray[2] = "orange";
예제 <html> <head> <script> function printarray(a) { document.write("[ "); for (var i = 0; i < a.length; i++) document.write(a[i] + " "); document.write(" ] <br>"); var myarray1 = new Array(); myarray1[0] = "apple"; myarray1[1] = "banana"; myarray1[2] = "orange"; var myarray2 = new Array("apple", "banana", "orange"); var myarray3 = ["apple", "banana", "orange"]; printarray(myarray1); printarray(myarray2); printarray(myarray3); </script> </head> <body> </body> </html>
Array 객체의메소드 속성 length, prototype 메소드 concat() indexof() join() lastindexof() pop() push() shift() slice() sort() splice()
예제 <script> var x = [1, 2, 3]; var y = [4, 5, 6]; var joined = x.concat(y); document.writeln(x); // 출력 : 1,2,3 document.writeln(joined); // 출력 : 1,2,3,4,5,6 </script> <script> var fruits = ["apple", "banana", "grape"]; document.writeln(fruits.indexof("banana")); // 출력 : 1 </script>
예제 <script> var numbers = [1, 2, 3, 4, 5]; numbers.push(6); document.writeln(numbers + '<BR>'); // 출력 : 1,2,3,4,5,6 item = numbers.pop(); document.writeln(numbers + '<BR>'); // 출력 : 1,2,3,4,5, </script> <script> var numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; var item = numbers.shift(); document.writeln(item + '<BR>'); // 출력 : 1 document.writeln(numbers + '<BR>'); // 출력 : 2,3,4,5,6,7,8,9,10 </script>
예제 <script> var myarray = [10, 7, 23, 99, 169, 19, 11, 1]; myarray.sort() document.writeln(myarray); </script> <script> var myarray = [10, 7, 23, 99, 169, 19, 11, 1]; myarray.sort(function (a, b) { return a - b ); document.writeln(myarray); </script>
오류처리 자바스크립트에서의예외처리기는 try 블록과 catch 블록으로이루어진다. try { // 예외가발생할수있는코드 catch ( 변수 ) { // 예외를처리하는코드
예제 <!DOCTYPE html> <html> <head> <script> var msg = ""; function test() { try { allert("hello World!"); catch (error) { msg = " 다음과같은오류가발생하였음 : " + error.message; alert(msg); </script> </head> <body> <input type="button" value="try-catch 시험 " onclick="test()" /> </body> </html>
throw 문장 throw 문장은개발자가오류를생성할수있도록한다. throw 문장을사용하여서오류처리를이용할수도있다. ( 예 ) 숫자맞추기게임
예제 <!DOCTYPE html> <html> <body> <script> var solution = 53; function test() { try { var x = document.getelementbyid("number").value; if (x == "") throw " 입력없음 "; if (isnan(x)) throw " 숫자가아님 "; if (x > solution) throw " 너무큼 "; if (x < solution) throw " 너무작음 "; if (x == solution) throw " 성공 "; catch (error) { var y = document.getelementbyid("message"); y.innerhtml = " 힌트 : " + error; </script>
예제 <h1>number Guess</h1> <p>1 부터 100 사이의숫자를입력하시오.</p> <input id="number" type="text"> <button type="button" onclick="test()"> 숫자추측 </button> <p id="message"></p> </body> </html>
Q & A