본문 바로가기
Javascript

Javascript 기초(객체1)

포돌이 2021. 9. 18. 15:02

안녕하세요 19살 IT 개발자 포돌이라고 합니다.

 

저번 시간에는 Javascript(제어문 2)을 배우면서 제어문을 다 배웠습니다. 제어문은 특히 많이 공부를 해야 합니다. 제어문을 못하시면... 다음 단계로 나갈 때 더욱 어려워집니다. 왜냐하면. 제어문을 많이 쓰거든요. 그래서 꼭 반드시 하루에 한 번이라도 좋으니 계속 복습하셔야 합니다. 자 그러면 Javascript 기초(객체)를 배워보도록 하겠습니다.

 

객체

자바스크립트는 객체(object) 기반 언어입니다. 객체는 기능과 속성을 가지고 있습니다. 가령 TV에는 켜다, 끄다, 볼륨을 낮추다, 볼륨을 높이다 등의 기능이 있습니다. 이렇든 TV라는 객체에는 다양한 기능이 있습니다. 이러한 주변의 모든 사물들을 객체라고 합니다.

 

기본형

 

 

다음은 메소드를 잘못 사용한 경우를 알려드리겠습니다 "앞으로 가"라는 메소드는 사람, 또는 동물, 등 움직이는 물체에 있을 법한 기능이겠죠?

 

TV 앞으로 가(); (X)

너(사람) 앞으로 가(); (O)

 

또한 자바스크립트에서 TV의 너비와 색상, 속성 정보를 알고 싶다면 다음과 같이 적용할 수 있습니다.

 

TV.width; (TV의 너비) 또는 TV.color; (tv의 색상) // TV의 속성 값을 가져옵니다.

TV.color = black; // TV의 속성값을 바꿉니다.

 

객체의 종류

자바스크립트의 객체는 크게 내장 객체, 브라우저 객체모델 (BOM), 문서 객체 모델(DOM)로 나눌 수 있습니다.

 

내장 객체

내장 객체는 자바스크립트 엔진에 내장되어 있어 필요한 경우에 생성해서 사용할 수 있습니다.

내장 객체로는 문자(String), 날짜(Date), 배열(Array), 수학(Math) 객체 등이 있습니다. 가령 오늘 날짜를 알고 싶다면 Date 객체를 생성하여 오늘 날짜를 알려주는 메소드 getDate()를 사용하면 됩니다.

 

 

브라우저 객체 모델(BOM)

브라우저 객체 모델(BOM)은 브라우저에 계층 구조로 내장되어 있는 객체를 말합니다. 브라우저 객체로는 window, screen, location, history, navigator 객체 등이 있으며, 다음에 브라우저에 포함된 객체를 나타내었습니다. 브라우저(window)는 document와 location 객체의 상위 객체입니다.

 

브라우저 객체 모델은 Javascript 기초(객체2)에서 좀 더 자세하게 알아보겠습니다.

 

문서 객체 모델(DOM)

문서 객체 모델(DOM)은 HTML 문서 구조를 말합니다. HTML 문서의 기본 구조는 최상위 객체로 <html>이 있으며, 그 하위 객체로는 <head>와 <body>가 있습니다. 예를 들어 자바스크립트를 이용해 이미지의 src 속성을 바꾸고 싶다면 지정된 <img>를 선택해 src 속성을 바꿔야 합니다. 이때 지정 요소를 제대로 선택해서 가져오려면 문서 객체의 구조를 잘 이해하고 있어야 합니다. 이렇게 문서 객체 모델에서는 HTML의 모든 요소들을 문서 객체로 선택하여 자유롭게 속성을 바꿀 수 있고, 선택한 문서 객체에 원하는 스타일(CSS)을 적용할 수도 있습니다.

 

그런데  자바스크립트의 문서 객체 모델은 IE 8 이하 버전에서는 호환성이 떨어져서 사용하기 힘든 단점이 있습니다 이점 유의해주시기 바랍니다. 

 

이제 기본 설명은 다 끝났기 때문에 내장 객체부터 자세히 알아보도록 하겠습니다. 위에 객체의 종류 설명서는 너무 자세하게 안 읽으셔도 좋으니, 그냥 흠.. 그렇군.. 오케이! 하면서 넘어가시면 됩니다. 자 내장 객체 들어가겠습니다!

 

내장 객체

앞에서 언급했듯이 내장 객체(Bulit - in Object)란 브라우저의 자바스크립트 엔진에 내장한 객체를 말합니다 

내장 객체로는 문자(String), 날짜(Date), 배열(Array), 수학(Math) 객체 등이 있습니다.  이건 무조건 외우세요.

 

내장 객체 생성하기

내장 객체를 생성하는 기본형을 알려드리기에 앞서서, 객체를 생성할 때는 new라는 키워드와 생성 함수를 사용합니다.

 

기본형

 

 

기본형을 봣으니 예제를 풀어야겠죠? 그런데 이 에제는 이해하기 힘들 수 있습니다. 함수를 배우기 전이기 때문이죠. 하지만 객체는 어떻게 생성하는 것인지, 속성과 메서드의 생성 과정은 어떻게 되는지 가볍게 이해하고 넘어가시면 되겠습니다.

 

코딩해보기

 

 

 

이해하기가 많이 어려울 겁니다 하지만. 이 예제를 통해서 function()이라는 새로운 함수를 보게 되었고 앞으로 이 함수는 계속해서 나올겁니다.

 

 

날짜 정보 객체

날짜나 시간 관련 정보를 제공받고 싶을 때는 날짜 객체(Date Object)를 생성합니다. 날짜 정보 객체는 날짜와 관련된 작을 할 때 유용한 객체입니다. 회사에서 2015년 8월 9일이 무슨 요일이고 무슨 업무를 했는지 알아야 할 때 사용할 수 있습니다. 또한 날짜 정보 객체를 이용하면 달력과 특정 기념일 D - day 계산기도 만들 수 있습니다. 여기에서는 현재 날짜 정보를 제공하는 방법, 특정 날짜 정보를 제공하는 방법을 알려드리겠습니다.

 

기본형

 

 

Date 객체 생성 방법에 이어 생성된 객체의 다양한 메소드를 알아보겠습니다. 날짜 정보 객체는 날짜의 정보를 가져오는 메소드와 날짜를 수정하는 메소드로 나눌 수 있습니다.

 

한번 정리를 해볼까요?

 

날짜 관련 메소드

날짜 정보를 가져올 때(GET) | 날짜 정보를 가져올 때(SET)

 

    (set) getFullYear()   (연도)

    (set) getMonth()    (월) 

    (set) getDate() (일)

    (set) getHours() (시) 

    (set) getMinutes() (분) 

    (set) getSeconds() (초)

  (set) getMiliseconds() (밀리초)

 

  (set) getTime() (1970/1/1부터 경과된 시간을 밀리 초로 표기함)

toGMTString() GMT 표준 표기 방식으로 문자형 데이터로 반환함 (set)

toLocaleString() 운영 시스템 표기방식으로 문자형 데이터로 반환함(get)

 

코딩해보기

현재 날짜 객체와 특정 날짜 객체를 이용하여 2002년 월드컵 날짜와 관련된 정보를 출력하는 예제입니다.

 

 

 

결과가 깔끔하게 나왔습니다 코딩 예제는 반드시 확인하시고 복습하시기 바랍니다. 

 

 

수학 객체

자바스크립트 내장 객체에는 수학과 관련된 기능과 속성을 제공하는 수학 객체(Math Object)가 있습니다. 

더하기, 곱하기, 나누기 등은 앞에서 배웠죠? Javascript 기초(연산자)에 배웠던 산술 연산자를 사용하면 됩니다. 하지만 최댓값, 최솟값, 반올림 값 등은 산술 연산자로 구할 수 없기 때문에 이 부분은 반드시 숙지하셔야 합니다.

 

수학 객체의 메소드 및 상수

 

Math.abs(): 숫자 절댓값을 반환합니다.

 

Math.max(): 숫자 중 가장 큰 값을 반환합니다.

 

Math.min(): 숫자 중 가장 작은 값을 반환합니다.

 

Math.pow(숫자, 제곱 값) 숫자의 거듭 재곱값을 반환합니다.

 

Math.random(): 0~1 사이의 난수를 반환합니다.

 

Math.round(): 소수점 첫째 자리에서 반올림 하여 정수를 반환합니다.

 

Math.ceil(): 소수점 첫째 자리에서 무조건 올림하여 정수를 반환합니다. 

 

Math.floor(): 소수점 첫째 자리에서 무조건 내림하여 정수를 반환합니다.

 

Math.sqrt(): 숫자의 제곱근 값을 반환합니다.

 

Math.PI  원주율 상수를 반환합니다.

 

코딩해보기

 

 

 

주석으로 결과를 알려드렸습니다 Random 함수는 말 그대로 Random이기 때문에 똑같은 결과가 나오지 않습니다. 참고하시기 바랍니다.

 

배열 객체

우리가 Javascript 기초(변수)에서 변수에는 데이터 값이 단 한 개만 저장된다고 하였습니다. 그런데 배열 객체를 쓰면 여러 개의 데이터 값을 하나의 저장소에 저장할 수 있습니다. 처음에 배열 어렵습니다. 저도 계속 쓰면서 살짝 헷갈려요.. 배열을 능수능란하게 쓰시면 훨씬 더 객체에 대해서 잘 알게 됩니다. 

 

기본형(방식)

 

방식을 1번 2번 3번으로 나눠서 예시를 넣었습니다. 계속 읽어보시면 이해가 되실 거라 믿습니다.

 

코딩해보기

배열 객체에 저장된 값들을 모두 출력하는 예제입니다. 위에 있는 3개의 실행문을 모두 같은 결과를 출력하도록 만드세요.

 

 

다음은 배열 객체에서 사용할 수 있는 메소드와 속성입니다. 메소드와 속성을 적절히 활용하면 배열의 순서를 바꿀수 있을 뿐만 아니라 배열 객체에 새 데이터의 삽입과 삭제도 가능합니다.

 

배열 객체의 메소드 및 속성

join(연결 문자); 배열 객체의 데이터를 연결 문자 기준으로 1 개의 문자형 데이터로 반환합니다.

 

reverse(); 배열 객체의 데이터 순서를 거꾸로 바꾼 후 반환합니다.

 

sort(); 배열 객체의 데이터를 오름차순으로 정렬합니다.

 

slice(index1, index2); 배열 객체의 데이터 중 원하는 인덱스 구간만큼 잘라서 배열 객체로 가져옵니다.

 

splice(); 배열 객체의 지정 데이터를 삭제하고 그 구간에 새 데이터를 삽입할 수 있습니다.

 

concat(): 2개의 배열 객체를 하나로 결합합니다.

 

pop(); 배열에 저장된 데이터 중 마지막 인덱스에 저장된 데이터를 삭제합니다.

 

push(new data); 배열 객체의 마지막 인덱스에 새 데이터를 삽입합니다.

 

shift(); 배열 객체에 저장된 데이터 중 첫 번째 인덱스에 저장된 데이터를 삭제합니다.

 

unshift(new data); 배열 객체의 가장 앞의 인덱스에 새 데이터를 삽입합니다.

 

length  배열에 저장된 총데이터의 개수를 반환합니다.

 

코딩해보기

join(), concat(), slice(), sort(), reverse()를 사용한 예제입니다.

 

 

 

console.log()로 찍어서 console로 나온 겁니다 안 나오시는 분들 있으면 F12를 누르시면 콘솔 창이 뜹니다 아니면 마우스 우클릭하면 검사 버튼이 있습니다 그 버튼을 클릭하시면 화면이 뜹니다. 

 

코딩해보기

splice(), pop(), push(), shift(), unshift()를 사용한 예제입니다.

 

 

 

예제를 출력하면 콘솔 창에 다음과 같이 나옵니다.  제가 왜 힘들이면서 이렇게까지 하는 이유는 기본을 가지고 응용하는 예제를 풀면 이해력이 빨라지기 때문에 이렇게 예제를 드리고 저도 문제를 풀면서 결과를 도출된 화면을 캡처해서 올리면, 비록 힘들지만 저도 한번 더 이해가 됩니다. concat() 저는 있는지도 몰랐어요 근데 다시 복습을 하니까 보이더라고요. 여러분도 그렇게 하셔야 합니다. 저도 Javascript를 잘하는 건 아니지만 정말 완벽하게 배우고 싶은 의지가 있기 때문에 하는 겁니다. 여러분도 하실 수 있습니다. 마지막으로 문자열 객체 들어가도록 하겠습니다.

 

문자열 객체

문자열 객체를 생성하는 기본형은 다음과 같이 new 키워드와 String() 메서드를 사용합니다. 생성된 객체는 변수에 참조합니다. 

 

문자열 객체의 메소드 및 속성

charAt(index); 문자열에서 인덱스 번호에 해당하는 문자를 반환합니다.

 

indexOf("찾을 문자"); 문자열에서 왼쪽부터 찾을 문자와 일치하는 문자를 찾아 제일 먼저 일치하는 문자의 인덱스 번호를 반환합니다. 만일 찾는 문자가 없으면 -1을 반환합니다.

 

lastIndexOf("찾을 문자"); 문자열에서 오른쪽부터 찾을 문자와 일치하는 문자를 찾아 제일 먼저 일치하는 문자의 인덱스 번호를 반환합니다. 만일 찾는 문자가 없으면 -1을 반환합니다.

 

match("찾을 문자"); 문자열에서 오른쪽부터 찾을 문자와 일치하는 문자를 찾아 제일 먼저 일치하는 문자의 인덱스 번호를 반환합니다. 만일 찾는 문자가 없으면 null을 반환합니다.

 

replace("바꿀 문자", "새 문자"); 문자열에서 왼쪽부터 바꿀 문자와 일치하는 문자를 찾아 제일 먼저 찾은 문자를 새 문자로 치환합니다.

 

slice(a, b); a개의 문자를 자르고 b번째 이후에 문자를 자른 후 남은 문자를 반환합니다.

 

substring(a, b); a 인덱스부터 b 인덱스 이전 구간의 문자를 반환합니다.

 

substr(a, 문자 개수); 문자열에 a 인덱스부터 지정한 문자 개수만큼 문자열을 반환합니다.

 

split("문자"); 지정한 문자를 기준으로 문자 데이터를 나누어 배열에 저장하여 반환합니다.

 

toLowerCase(); 문자열에서 영문 대문자를 모두 소문자로 바꿉니다.

 

toUpperCase(); 문자열에서 영문 소문자를 모두 대문자로 바꿉니다.

 

length 문자열에서 문자의 개수를 반환합니다.

 

concat("새로운 문자"); 문자열에 새로운 문자열을 결합합니다.

 

charCodeAt(index); 문자열 index에 해당 문자의 아스키코드값을 반환합니다.

 

fromCharCode(아스키코드 값); 아스키코드값에 해당하는 문자를 반환합니다.

 

trim(); 문자의 앞 또는 뒤에 공백 문자열을 삭제합니다(" hello ") --> ("hello")

 

여기까지 문자열 객체 메서드와 속성을 정리했습니다. 이제 예제를 한번 풀어보자고요.

 

코딩해보기

 

 

 

 

 

 

 

 

너무 길어서 3등분으로 나눴습니다 <script> 안에 전부 다 치셔야 합니다. 결과는 이렇게 나옵니다.

 

 

여기까지 Javascript 기초(객체 1)를 배웠습니다. 고생 많으셨습니다. 객체가 정말 외울게 많아요... 저도 지금 현채 진행형이고.. 잘 까먹습니다. 하지만 포기하지 마세요 포기는 배추 썰 때나(읍읍).. 죄송합니다. ㅋㅋ 아무튼 오늘은 여기까지 하겠습니다.

 

19살 IT 개발자 포돌이였습니다.

 

-Coding is an Art-

-코딩을 예술이라 생각하는 사람-

 

 

'Javascript' 카테고리의 다른 글

Javascript 기초(함수1)  (0) 2021.09.19
Javascript 기초(객체2)  (0) 2021.09.18
Javascript 기초(제어문2)  (0) 2021.09.17
Javascript 기초(제어문 1)  (0) 2021.09.17
Javascript 기초(연산자)  (0) 2021.09.16

'Javascript' Related Articles

티스토리툴바