JavaScript 객체(objects) 이 서식 파일은 그룹 환경에서 교육 자료를 프레젠테이션할 때 시작 파일로 사용할 수 있습니다. 구역 구역을 추가하려면 슬라이드를 마우스 오른쪽 단추로 클릭하십시오. 구역을 사용하면 슬라이드를 쉽게 구성할 수 있으며, 여러 작성자가 원활하게 협력하여 슬라이드를 작성할 수 있습니다. 메모 설명을 제공하거나 청중에게 자세한 내용을 알릴 때 메모를 사용합니다. 프레젠테이션하는 동안 프레젠테이션 보기에서 이러한 메모를 볼 수 있습니다. 글꼴 크기에 주의(접근성, 가시성, 비디오 테이프 작성, 온라인 재생 등에 중요함) 배색 그래프, 차트 및 텍스트 상자에 특히 주의를 기울이십시오. 참석자가 흑백이나 회색조로 인쇄할 경우를 고려해야 합니다. 테스트로 인쇄하여 흑백이나 회색조로 인쇄해도 색에 문제가 없는지 확인하십시오. 그래픽, 테이블 및 그래프 간결하게 유지하십시오. 가능한 일관되고 혼란스럽지 않은 스타일과 색을 사용하는 것이 좋습니다. 모든 그래프와 표에 레이블을 추가합니다. Chapter 9 Part I
객체 객체(object)는 사물의 속성과 동작을 묶어서 표현하는 기법 (예) 자동차는 메이커, 모델, 색상, 마력과 같은 속성도 있고 출발하기, 정지하기 등의 동작도 가지고 있다.
객체의 종류 객체의 2가지 종류 내장 객체들은 생성자를 정의하지 않고도 사용이 가능하다. 내장 객체(bulit-in object): 생성자가 미리 작성되어 있다. 사용자 정의 객체(custom object): 사용자가 생성자를 정의한다. 내장 객체들은 생성자를 정의하지 않고도 사용이 가능하다. Date, String, Array, Math 와 같은 객체들이 내장 객체이다.
객체 생성
생성자를 이용한 객체 생성
프로토타입 SKIP
자바 스크립트 내장 객체 Math 객체 Date 객체 String 객체 Array 객체
Math 객체 Math.PI; // returns 3.141592653589793 Math.sqrt(64); // returns 8 Math.round(4.7); // returns 5 (반올림) Math.round(4.4); // returns 4 Math.ceil(4.4); // returns 5 (올림) Math.floor(4.7); // returns 4 (내림) Math.random(); // returns a random number
Math 객체 in w3schools.com Method Description abs(x) Returns the absolute value of x ceil(x) Returns x, rounded upwards to the nearest integer floor(x) Returns x, rounded downwards to the nearest integer max(x, y, z, ..., n) Returns the number with the highest value min(x, y, z, ..., n) Returns the number with the lowest value pow(x, y) Returns the value of x to the power of y random() Returns a random number between 0 and 1 round(x) Rounds x to the nearest integer sqrt(x) Returns the square root of x
Date 객체 Date 객체는 날짜와 시간 작업을 하는데 사용되는 가장 기본적인 객체 new Date() // 현재 날짜와 시간 new Date(milliseconds) //1970/01/01 이후의 밀리초 new Date(dateString)// 다양한 문자열 new Date(year, month, date[, hours[, minutes[, seconds[,ms]]]])
현재 시각 표시 – js-today.html <!doctype html> <body> <script> var today=new Date(); // 새로운 Date 객체 생성 document.write(today); </script> </body>
결과
Date 객체 in w3schools.com 위의 w3schools.com을 방문하여 Try it Yourself 실행.
날짜 표시 방법 – Date 메소드 사용 <!DOCTYPE html> <html> <body> <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> </body> </html>
결과
Date 메소드 (get) var d = new Date(); var n = d.getFullYear(); // 4자리 연도 var n = d.getMonth(); // 월(0-11) var n = d.getDate(); // 일(1-31) var n = d.getDay(); // 요일(0-6) var n = d.getHours(); // 시 (0-23) var n = d.getMinutes(); // 분 (0-59) var n = d.getSeconds(); // 초 (0-59) var n = d.getMilliseconds(); // 밀리초 (0-999)
Date 메소드 (set) var d = new Date(); var n = d.setFullYear(2020); // 2020년 var n = d.setFullYear(2020,4,16); // 연,월,일 지정 Var n = d.setMonth(4); // 5월 var n = d.setDate(16); // 16일 var n = d.setDay(2); // 화요일 var n = d.setHours(15); // 시 (0-23) var n = d.setMinutes(0); // 분 (0-59) var n = d.setSeconds(0); // 초 (0-59) var n = d.setMilliseconds(0); // 밀리초 (0-999)
Milliseconds & setTimeout 1밀리초는 1/1000(초) 자바스크립트는 1970년 1월 1일을 기준으로 현재까지의 밀리초를 기준으로 시간을 계산한다. 시계처럼 화면을 계속 반복하여 보여주는 함수 아래 코드는 alert()함수를 3000밀리초마다 반복 setTimeout(function() {alert("Hello"); }, 3000);
간단한 시계 만들기 – js.clock.html <!doctype html> <html> <body onload=printTime()> <script> function printTime() { var d = new Date(); var time=d.getHours()+":"+ d.getMinutes()+":" + d.getSeconds()+":"+d.getMilliseconds(); document.getElementById("clock").innerHTML=time; setTimeout(function() {printTime()},0); } </script> <H3>My first clock</h3> <p id=clock></p> </body> </html>
결과
Array 객체 속성 length 메소드 indexOf() pop() push() shift() sort()
Array 객체 속성 및 메소드 예 var fruits = ["Banana", "Orange", "Apple"]; fruits.length; // 3 var a = fruits.indexOf("Apple"); //return 2(not 3) fruits.sort(); // sort fruits.push("Kiwi"); // Kiwi 추가
Array 메소드 in w3schools.com Method Description concat() Joins two or more arrays, and returns a copy of the joined arrays indexOf() Search the array for an element and returns its position join() Joins all elements of an array into a string lastIndexOf() Search the array for an element, starting at the end, and returns its position pop() Removes the last element of an array, and returns that element push() Adds new elements to the end of an array, and returns the new length reverse() Reverses the order of the elements in an array shift() Removes the first element of an array, and returns that element slice() Selects a part of an array, and returns the new array sort() Sorts the elements of an array splice() Adds/Removes elements from an array toString() Converts an array to a string, and returns the result unshift() Adds new elements to the beginning of an array, and returns the new length
String 객체 var str = "Hello World!"; var n = str.length; var res = str.charAt(0); // H n = str.indexOf("welcome"); // -1 n = str.indexOf("World"); // 6 str = "Visit Microsoft!"; res = str.replace("Microsoft", "W3Schools");
String 객체 str = "How are you doing today?"; res = str.split(" "); //How, are, you, … str = “2017-5-16”; res = str.split(" "); // 2017, 5, 16 var str = " Hello World! "; res = str.trim()); // 양 끝의 공백 제거
String 객체 in w3schools.com Method Description charAt() Returns the character at the specified index (position) charCodeAt() Returns the Unicode of the character at the specified index concat() Joins two or more strings, and returns a new joined strings endsWith() Checks whether a string ends with specified string/characters fromCharCode() Converts Unicode values to characters includes() Checks whether a string contains the specified string/characters indexOf() Returns the position of the first found occurrence of a specified value in a string lastIndexOf() Returns the position of the last found occurrence of a specified value in a string localeCompare() Compares two strings in the current locale match() Searches a string for a match against a regular expression, and returns the matches
repeat() Returns a new string with a specified number of copies of an existing string search() Searches a string for a specified value, or regular expression, and returns the position of the match slice() Extracts a part of a string and returns a new string split() Splits a string into an array of substrings startsWith() Checks whether a string begins with specified characters substr() Extracts the characters from a string, beginning at a specified start position, and through the specified number of character substring() Extracts the characters from a string, between two specified indices toLowerCase() Converts a string to lowercase letters toString() Returns the value of a String object toUpperCase() Converts a string to uppercase letters trim() Removes whitespace from both ends of a string valueOf() Returns the primitive value of a String object
String HTML Wrapper Methods Description anchor() Creates an anchor big() Displays a string using a big font blink() Displays a blinking string bold() Displays a string in bold fixed() Displays a string using a fixed-pitch font fontcolor() Displays a string using a specified color fontsize() Displays a string using a specified size italics() Displays a string in italic link() Displays a string as a hyperlink small() Displays a string using a small font strike() Displays a string with a strikethrough sub() Displays a string as subscript text sup() Displays a string as superscript text