28일차 JavaScript [ 객체, 내장객체 ]

네이버 클라우드 부트캠프/복습 정리

28일차 JavaScript [ 객체, 내장객체 ]

유정♡ 2024. 3. 29. 12:57

1. 객체 만들 때

var 객체명 = { 프로퍼티 : 데이터, 프로퍼티 : 데이터, ... 함수 : function }

2. 객체 반환 함수 (생성자 함수)

[ 내장 객체 = 코어 객체 ]

- String

- Number

- Math

- Array

- Date

[ JavaScript 객체 프로퍼티와 메서드 ]

- 객체 만드는 방법

<body>

var car={ // var 객체명 // undefined 는 함수호출 때문

name:'소나타',

color:['black','white','gray'],

fuel:'가솔린',

company:'삼성',

show: function(e) {

if(e=='on') {

alert('시동 켜짐');

}

else if(e=='off') {

alert('시동 꺼짐');

}

console.log(car.show('on'));

console.log(car.color[0]);

console.log(car.fuel);

console.log(car.name);

console.log(car.company);

</script>

</body>

<body>

// 객체 안에 또 다른 객체 포함 됨 // stu라는 객체 안에 tom과 juli 포함

var stu={

tom:{

gender:'male',

job:'student',

age:30

juli:{

gender:'female',

job:'programmer',

age:25

}

console.log(stu.tom); // 아예 객체를 출력 jason구조

console.log(stu.tom.job); // 객체 2번 접근

// 객체에 값 추가

stu.tom.loc='seoul';

console.log(stu.tom.loc);

</script>

</body>

<body>

// 객체 안에 또 다른 객체 포함 됨 // stu라는 객체 안에 tom과 juli 포함

var stu={

gender:'male',

job:'student',

age:30

}

console.log(stu);

console.log(stu.gender);

console.log(stu['age']);

stu.loc='seoul';

stu['major']='컴공'; // stu.major='컴공';

console.log(stu);

// delete를 활용하여 내용 삭제

delete stu.loc;

delete stu.gender;

console.log(stu);

</script>

</body>

[ JavaScript 내장객체 String ]

- 문자열의 다양한 사용 방법

<body>

// 내장 객체 String

let name = 'gildong'; // 태그 없이 문자열 사용할 경우 작은따옴표(''), 큰따옴표("") 둘다 사용 가능

let a = '<h1 class="a">HI</h1>'; // 문자열이 HTML인 태그인 경우 속성(class, id)을 큰따옴표("")로 묶어줘야함

let b = `${name}님 환영합니다 ~ `; // 백틱으로 변수와 문자열을 동시에 넣기

let c = "It's book"; // 문자열에 어퍼스트로피(')가 들어갈 경우에는 큰따옴표("")로 묶는다.

let d = `20+2=${20+20}`; // 백틱으로 사칙연산 사용 가능

document.write(a + "<br>");

document.write(b + "<br>");

document.write(c + "<br>");

document.write(d + "<br>");

</script>

</body>

<body>

// let 변수명 = '문자열';

let str='안녕하세요';

console.log(typeof(str));

// let 변수명 = new String();

let str2=new String('안녕하세요');

console.log(typeof(str2));

</script>

</body>

<body>

let n=prompt('비번 입력');

if(n.length >=4 && n.length <=10){

alert('비번 사용 가능');

}

else{

alert('사용 불가능 4~10자 사이여야 한다' );

}

</script>

</body>

<body>

let n=prompt('주민번호 뒷번호 입력');

let m=n.charAt(0);

if(m==1 || m==3) {

alert('남자');

}

else if(m==2 || m==4) {

alert('여자');

}

</script>

</body>

<body>

let n=prompt('언어 입력');

if(n.match('자바') || n.match('데이터베이스')) {

alert('백엔드')

}

else if(n.match('css')) {

alert('디자인');

}

</script>

</body>

<body>

let n=prompt('주민번호 앞자리 6자리 입력');

let a=n.length;

let b=n.substr(2,2); //001122

let c=n.substr(4,2);

if(a==6){

alert(b+' 월' +c+" 일");

}

else

alert('에러')

</script>

</body>

<body>

let n=prompt('코드 입력');

n=n.toUpperCase(); //대문자

document.write(n);

n=n.toLowerCase(); //소문자

document.write(n);

</script>

</body>

<body>

let n='Computer';

console.log(n.indexOf('C'));

console.log(n.indexOf('m'));

console.log(n.replace('C','c')); //replace문자바꾸기 oldchar newchar 설정

let m=' computer ';

console.log(m.trim()); //trim 공백제거

console.log(n.slice(2));

console.log(n.slice(2,5)); //인덱스 2부터 4까지

</script>

</body>

<body>

let n='Computer';

console.log(n.indexOf('C'));

console.log(n.indexOf('m'));

</script>

</body>

<body>

var n='100';

var m=Number(n);

var z=new Number(100);

console.log(typeof(n));

console.log(typeof(m));

console.log(typeof(z));

</script>

</body>

<body>

var n=77.77;

console.log(Math.floor(n));

console.log(Math.ceil(n));

console.log(Math.round(n));

var m=Math.round(Math.random()*9) +1;

console.log(m);

</script>

</body>

[ JavaScript 내장객체 Array ]

- forEach 함수 중요함

<body>

// forEach 함수 : 중요 !!!

let fruit=['Apple','Banana','Mango'];

function ch(a,b) {

console.log(`${a}의 인덱스 ${b}`);

}

fruit.forEach(ch);

fruit.forEach(function(fruit,index) {

console.log(`${a}의 인덱스 ${b}`);

}) // 이것도 위에꺼랑 똑같은 의미

</script>

</body>

<body>

// find 함수

let arr=[1,2,3,4,5];

function ch(number) {

return number > 3;

}

console.log(arr.find(ch)); // find 함수는 조건에 맞는 첫번째 값만 리턴

console.log(arr.find((number) => number > 3)); // 화살표 형태로 나타내기

</script>

</body>

<body>

// filter 함수 : 조건에 맞는 값을 배열로 전환

let arr=[1,2,3,4,5];

function ch(number) {

return number > 3;

}

console.log(arr.filter(ch));

console.log(arr.filter((number) => number > 3)); // 화살표 형태로 나타내기

</script>

</body>

<body>

// reduce 함수 : 배열의 각 요소를 순회 하면서 값을 누적하여 하나의 결과 값으로 반환

let arr=[1,2,3,4,5];

function plus(a,b) {

return a+b;

}

function multi(a,b) {

return a*b;

}

console.log(arr.reduce(plus));

console.log(arr.reduce(multi));

console.log(arr.reduce((a,b) => a+b)); // 화살표 함수로 표현하기

</script>

</body>

<body>

// 변수선언방식

let fruit=['Apple','Banana','Mango'];

// 생성자 함수선언방식

let fruit2=new Array('Apple','Banana','Mango');

console.log(fruit.length);

console.log(fruit2.length);

fruit[2]='PineApple';

console.log(fruit);

</script>

</body>

<body>

// 변수선언방식

let fruit=['Apple','Banana','Mango'];

let fruit2=['Orange','Kiwi','Peach'];

console.log(fruit.concat(fruit2));

fruit.pop(); // 맨 뒤 요소 제거

console.log(fruit);

fruit.shift(); // 맨 앞 요소 제거

console.log(fruit);

fruit2.push('PineApple'); // 맨 뒤에 요소 추가

console.log(fruit2);

fruit2.unshift('PineApple'); // 맨 앞에 요소 추가

console.log(fruit2);

</script>

</body>

<body>

// sclice 함수

let list=[

'01)자바',

'02)DB',

'03)CSS',

'04)JS',

]

let ary=[];

for(let i=0;i<list.length;i++) {

ary.push(list[i].slice(3)); // 빈 배열에 추가

}

console.log(ary);

</script>

</body>

<body>

// sclice 함수

let n=prompt('입력');

if(n.includes('자바') || n.includes('자바스크립트')) {

alert('포함됨');

}

</script>

</body>

<body>

let fruit2=['Orange','Kiwi'];

console.log(fruit2.sort());

console.log(fruit2.reverse());

</script>

</body>

<body>

//for-in 문

let arr=['aa','bb','cc','dd'];

console.log(arr[0]);

// for(let i=0;i<arr.length;i++)

for(let i in arr) {

console.log(i); // 그냥 숫자 0부터 출력

console.log(arr[i]); // 배열의 인덱스 0부터 출력

}

</script>

</body>

<body>

let number=['1990','1991','1992','1993','1994'];

n='<select>';

for(let i in number) {

n += '<option>'+number[i]+'</option>';

}

n += '</select>';

document.write(n);

</script>

</body>

[ JavaScript 내장객체 Date ]

<body>

let today=new Date();

console.log(today);

console.log(today.toLocaleDateString()); // 날짜만 출력

console.log(today.toLocaleTimeString()); // 시간만 출력

let yyyy=today.getFullYear();

let mm=today.getMonth()+1; //getMonth의 반환형은 0~11까지여서 항상 +1 해줘야함

let dd=today.getDate();

document.write(yyyy + "," + mm + "," + dd);

let.hour=today.getHours();

let.min=today.getMinutes();

let.se=today.getSeconds();

</script>

</body>

<body>

// setDate

let today=new Date();

console.log(today); // 오늘 날짜

let dd=today.getDate();

today.setDate(dd+99);

document.write('100일 기념일' + today.toLocaleDateString()); // 오늘 날짜 기준으로 100일 뒤 구하기

</script>

</body>

[ JavaScript 브라우저 관련 객체 window ]

- 새로운 브러우저 창을 여는 open() 메서드 : window.open(경로, 창 이름, 창 옵션)

- window 객체의 메서드 : moveBy()-현재 창을 지정한 크기만큼 이동 / moveTo()-현재 창을 지정한 좌표로 이동

resizeTo()-동적으로 브라우저 창의 크기를 조절

<head>

function on() {

window.open('http://www.naver.com','_blank','width=400, height=750'); //브라우저 창 열기

setTimeout(function(){ //브라우저 창 닫

n.close();

},3000);

}

</script>

</head>

<body>

</body>

let n=document.getElementById('in');

let m=document.getElementById('re');

n.onkeyup=function(e) {

let z=e.keyCode;

m.innerText=z;

}

</script>

<head>

// opne 버튼을 누르면 60초부터 1초마다 59초 58초 ... 줄어듦

let n=60;

function on() {

setInterval(function() {

document.write('<h2>' + n + '</h2>');

n--;

},1000);

}

</script>

</head>

<body>

</body>

<head>

// 위에 두개 응용 : 네이버 창 열리고 5초후에 닫히고 n은 60에서 1초마다 1씩 줄어들고

let n=60;

function on() {

let m=window.open('http://www.naver.com','_blank','width=400, height=750'); //브라우저 창 열기

setInterval(function() {

document.write('<h2>' + n + '</h2>');

n--;

},1000);

setTimeout(function(){ //브라우저 창 닫기

m.close();

},5000);

}

</script>

</head>

<body>

</body>

<body>

</body>

let m=window.open('','','width=400, height=400'); //브라우저 창 열기

m.moveTo(200,200); //부모 창 화면 기준으로 왼쪽으로 200px 오른쪽 200px으로 이동한다는 뜻

setInterval(function() {

m.moveBy(30,30); //1초마다 상대적인 위치

},1000)

</script>

<body>

</body>

let m=window.open('','','width=400, height=400'); //브라우저 창 열기

m.moveTo(200,200); //부모 창 화면 기준으로 왼쪽으로 200px 오른쪽 200px으로 이동한다는 뜻

m.resizeTo(400,400); // 브라우저 창 화면이 400px 400px 사이즈로 켜진다는 뜻

setInterval(function() {

m.resizeBy(30,30);

},1000) // 창 화면이 1초마다 30px씩 늘어남

</script>

[ JavaScript 브라우저 관련 객체 navigator ]

- location 객체 : 브라우저의 주소 표시줄과 관련 된 것. 현재 문제의 URL 주소 정보가 들어있는데 이 정보를 편집하면 현재 브라우저 창에서 열어야 할 사이트나 문서를 지정할 수 있다.

- 프로퍼티 href : 전체 URL이다. 이 값을 변경하면 해당 주소로 이동할 수 있다.

- 메서드 assign() : 현재 문서에 새 문서 주소를 할당해서 새 문서를 가져온다.

reload() : 현재 문서를 다시 불러온다.

replace() : 현재 문서의 URL을 지우고 다른 URL의 문서로 교체한다.

toString() : 현재 문서의 URL을 문자열로 반환한다.

<body>

</body>

let n=location.href; //현재 페이지 url

document.write(n);

// 5초후에 네이버 홈페이지로 이동

setTimeout(function() {

location.href='http://www.naver.com';

// location.assign='http://www.naver.com'; // location.href=location.assign 동일한 기능

},5000)

</script>

<body>

</body>

// 1초가 지났습니다 ... n초가 지났습니다 1초마다 뜰 수 있게

let n=1;

setInterval(function() {

document.write('<h2>' + n + '초가 지났습니다');

n++;

},1000);

// 10초 후 새로고침하고 새로고침됐다고 경고창 출력

setTimeout(function() {

location.reload(); //새로고침

alert('새로고침');

},10000);

</script>

[ 이론 ]

[ 객체 알아보기 ]

프로그래밍 언어에서는 '객체(object)'는 여러 가지 의미로 해석할 수 있지만, 자바스크립트에서 객체는 프로그램에서 인식할 수 있는 모든 대상을 가리킨다.

[ 자바 스크립트에서 사용하는 3가지 객체]

※ 문서 객체 모델(DOM) : 웹 문서 자체도 객체이고 그 안에 삽입되어 있는 이미지와 링크, 텍스트 필드등도 모두 객체이다. 일반적으로 웹 문서에 삽입하는 요소는 document, image, link 객체 등이 있다.

※ 브라우저 관련 객체 : 웹 브자루어젱서 사용하는 정보도 객체로 나타낼 수 있다. 사용하는 브라우저 정보를 담고 있는 navigator 객체를 비롯해 history, location, screen 객체 등이 있다.

※ 내장 객체 : 웹 프로그래밍을 할 때 자주 사용하는 요소는 자바스크립트 안에 미리 객체로 정의되어 있는데, 이를 내장 객체라고 한다. 예를 들어 날짜, 시간과 관련된 프로그램을 개발하려면 Date 객체를 가져와 쉽게 사용할 수 있다.

TIP) '문서 객체 모델(DOM: document object model)'은 객체를 사용해 웹 문서를 관리하는 방법이다.

[ 객체 인스턴스 만들기 ]

new 객체명 : 자바스크립트에서 객체는 참조 형태로 사용해야 한다.

[ 프로퍼티와 메서드 이해하기 ]

객체에는 프로퍼티(property)와 메서드(method)가 있는데, 쉽게 말해 프로퍼티는 객체의 특징이나 속성을 나타내고, 메서드는 객체에서 할 수 있는 동작을 표현한다. 예를들어 '자동차운전' 이 하나의 프로그램이라면 '자동차'는 객체가 되고, 자동차의 프로퍼티는 자동차 제조사나 모델명, 색상, 배기량 등이 된다. 또한 자동차의 메서드는 시동 걸기, 움직이기, 멈추기, 주차하기 등이 된다. 이런 방식으로 자바스크립트에서도 객체마다 메서드와 프로퍼티가 있다. 그리고 프로퍼티와 메서드를 이용해서 자바스크립트 프로그램을 작성하는 것이다.

프로퍼티	메서드
제조사	시동 걸기
모델명	움직이기
색상	멈추기
배기량	주차하기

[ 자바스크립트의 내장 객체 ]

자바스크립트 내장 객체에는 웹 문서의 계층 구조와 상관없이 나타낼 수 있는 객체가 있다. Array 객체와 Date 객체가 대표적이다.

[ Array 객체 ]

Array 객체는 자바스크립트의 여러 가지 내장 객체 중에서 배열을 다룬다. 배열은 자바스크립트에서 자주 사용하는 자료형이므로 Array 객체의 주요 프로퍼티와 메서드를 잘 알고 사용하는 것이 중요하다.

[ Array 객체로 배열 만들기 ]

Array 객체를 사용하려면 먼저 인스턴트를 만들어야 한다. 먼저 초깃값이 없는 상태에서 단순히 객체의 인스턴스만 만든다면 new 예약어를 사용해 변수에 할당하면 된다.

※ Array 객체 인스턴스 만들기 - 초깃값이 없는 경우

var numbers = new Array (); // 배열의 크기를 지정하지 않음

var nubers = new Array (4); // 배열의 크기를 지정함

※ Array 객체 인스턴스 만들기 - 초깃값이 있는 경우

var numbers = [ "one", "two", "three", "four" ] // 배열 선언

var numbers = Array( "one", "two", "three"m "four" ); // Array 객체를 사용한 배열 선언

[ Date 객체 ]

[ Math 객체 ]

수학 계산과 관련된 메서드. Math 객체는 따로 인스턴스를 만들지 않는다.

[ 브라우저와 관련된 객체 ]

자바스크립트를 사용하면 특정한 사이트로 이동하거나 새 탭을 여는 등 웹 브라우저와 관련된 여러 가지 효과를 만들 수 있다. 이런 작업이 가능한 이유는 자바스크립트 내에 웹 브라우저와 관련된 여러 객체가 미리 정의되어 있기 떄문이다.

종류	설명
window	브라우저 창이 열릴 때 마다 하나씩 만들어진다. 브라우저 창 안의 요소 중에서 최상위에 있다.
document	웹 문서마다 하나씩 있으며 <body> 태그를 만나면 만들어진다. HTML 문서의 정보가 담겨져 있다.
navigator

728x90