JavaScript(7)

객체.내장객체

객체 : 객체는 우리 주변에 있는 모든것들. 사람, 사물, 개념, 논리...객체 선언 : 객체는 키 값을 사용하여 속성을 식별. key : value 형식으로 작성.value에는 모든 종류의 자료형이 올 수 있고, 이중에서 함수가 오면 메소드라고 부름

객체선언

<p>

객체는 키 값을 사용하여 속성을 식별

key : value 형식으로 작성.

value에는 모든 종류의 자료형이 올 수 있고, 이 중에서 함수가 오면 메소드라고 부름.

</p>

// 이름, 나이, 취미...

let student = {

name : '김철수',

age : 20,

hobby : ['독서','영화'],

getString : function(){

return this.name+' '+this.age;

item : {

name:'샤프',

price : 2600

}

};

let student2 = {};

let student3 = new Object();

//대괄호를 쓰면 항상 string형태

student2['name'] = '김영희';

student2['n'+'a'+'m'+'e'] = '김영희';

// 괄호를 쓰지 않으면 변주가 불가능.

student2.age = 20;

//student2.age+1 = 21;(쓰면 안됨.)

</script>

객체 호출

[]또는 .으로 요소 값에 접근

객체에 선언되어 있는 속성에 접근
객체에 선언된 배열 속성에 접근
객체에 선언된 객체 속성에 접근
객체 내부의 함수 실행하기

객체 호출과 반복문

객체는 배열과 다르게 데이터의 순서가 없기 때문에 객체의 모든 속성을 출력할 경우 단순 for문이나 while문으로는 출력이 불가하고, for in문을 사용해야 함

//1. 객체에 선언되어 있는 속성에 접근

// document.getElementById('user_id').innerHTML = '아이디';

// let tempVal = document.getElementById('user_id').innerHTML;

console.log(student.name);

console.log(student['name']);

//2. 객체에 선언된 배열 속성에 접근

console.log(student.hobby[0]);

console.log(student['hobby'][0]);

student['hobby'].forEach(v=>console.log(v));

student.hobby.forEach(v=>console.log(v));

//3. 객체에 선언된 객체 속성에 접근

console.log(student.item.name);

console.log(student['item'].name);

// 4. 객체 내부에 함수 실행하기.

console.log(student.getString());

console.log(student['getString']());

// 5. 객체 속성 변수로 접근

let keyName = 'hobby';

//console.log(student.keyName); => 사용불가

console.log(student[keyName]);

// 6. 객체에 있는 모든 속성에 접근하기

// for in 문

for(key in student){

console.log(key, student[key]);

}

</script>

this

객체 내에서 자신의 속성을 호출할때 사용하는 키워드

let car = {

detail : {

birth : 2023,

price : 5000,

company : '현대'

show : function(){

alert(this.detail.price +'만원 입니다.');

}

};

car['show']();

</script>

함수 활용 객체 생성

함수의 매개변수에 필요한 속성 값을 다 받아서 객체 생성 후 리턴

// 학생 3명의 이름, 학년, 반, 번호를 저장

let s = {

name:'김철수',

grade : 1,

classNum : 3,

num : 3

}

let s1 = {

name:'김가남',

grade : 2,

classNum : 10,

num : 11

}

let s2 = {

name:'김영희',

grade : 3,

classNum : 2,

num : 5

}

// 객체를 반환하는 함수를 이용

function getStudent(name, grade, classNum, number){

let obj = {

name : name,

grade : grade,

classNum : classNum,

num : number

};

return obj;

}

객체 속성 추가 및 삭제

속성 및 메소드를 동적으로 추가/삭제 가능

//객체에 새로운 속성 추가, 삭제하기

let objTest = {};

objTest.number = 100;

console.log(objTest);

objTest['testFunc'] = function(){

console.log('가자~');

}

delete(objTest.number);

console.log(objTest);

</script>

let car = {

detail : {

birth : 2023,

price : 5000,

company : '현대'

show : function(){

alert(this.detail.price +'만원 입니다.');

}

};

car['show']();

</script>

let persons = [

{

name:'김가남',

grade : 2,

classNum : 10,

num : 11

{

name:'김가남',

grade : 2,

classNum : 10,

num : 11

}

];

console.log(persons[0].name);

</script>

Object

모든 기본 내장 객체는 Object객체를 상속. 모든 객체는 기본적으로 Object의 메소드를 다 가지고있음

String

문자열을 저장하는 객체

메소드	내용
toUpperCase()	모든 문자 대문자로 변환
toLowerCase()	모든 문자 소문자로 변환
length()	글자 개수 조회용 맴버변수
indexOf()	찾는 문자의 순번(위치) 리턴
lastIndexOf()	뒤에서부터 찾는 문자의 순번 리턴
charAt()	찾는 위치의 문자 리턴
substring()	값을 일부분만 리턴
split()	토큰 문자로 분리한 문자열 배열 리턴

// 이름, 나이, 취미...

let student = {

name : '김철수',

age : 20,

hobby : ['독서','영화'],

getString : function(){

return this.name+' '+this.age;

item : {

name:'샤프',

price : 2600

}

};

let student2 = {};

let student3 = new Object();

//대괄호를 쓰면 항상 string형태

student2['name'] = '김영희';

student2['n'+'a'+'m'+'e'] = '김영희';

// 괄호를 쓰지 않으면 변주가 불가능.

student2.age = 20;

//student2.age+1 = 21;(쓰면 안됨.)

</script>

Number 객체

<h3>Number 객체가 제공하는 함수</h3>

<p>

1. Number.MAX_VALUE : 자바스크립트가 나타낼 수 있는 최대 숫자<br>

2. Number.MIN_VALUE : 자바스크립트가 나타낼 수 있는 최소 숫자<br>

3. Number.isInteger(숫자) : 괄호 안 숫자가 정수인지 실수인지 확인<br>

4. Number.isNaN(숫자) : 괄호 안에 쓴 숫자가 NaN(not a number)인지 확인

</p>

console.log(Number.MAX_VALUE);

console.log(Number.MIN_VALUE);

let num = 393938900958092352;

if(num > Number.MAX_VALUE){

console.log('자바스크립트가 수용할 수 없는 숫자값입니다.');

}

//isInteger : 정수이면 true, 실수이면 false

console.log(Number.isInteger(87));

console.log(Number.isInteger(87.43));

console.log(Number.isNaN('팔십칠'));

</script>

Math 객체

<p>

수학적 계산을 할때 사용<br>

랜덤값(난수)을 출력할때 사용!!<br>

1. Math.floor() : 소수점 자리를 버림<br>

2. Math.round() : 소수점 반올림 <br>

3. Math.ceil() : 소수점 올림<br>

4. Math.random() : 0~1(1미포함) 사이의 구간에서 난수를 생성

</p>

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

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

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

// 1~10사이의 숫자를 하나 뽑고 싶다.

// 도달하고 싶은 범위까지 숫자를 곱해줍니다. (10)

// 시작점만큼 더해줍니다. (1)

console.log(Math.floor(Math.random()*10+1));

</script>

// 길이가 10인 변수를 하나 생성한다

let arrRan = new Array(10);

// for구문을 사용

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

let numRan = Math.floor(Math.random()*10+1);

arrRan[i] = numRan;

}

alert(arrRan);

</script>

Date 객체

메소드	내용
get/setFullYear()	년도 반환 / 년도 저장
get/setMonth()	월 (0:1월 ~ 11:12월)
get/setDate()	일 (1일 ~ 31일)
get/setDay()	요일 (0:일요일 ~ 6:토요일)
get/setHours()	시간 (0~23시)
get/setMinutes	분 (0~59분)
get/setSeconds	초
get/setMilliseconds()	밀리세컨초 (0~999)
get/getTimezoneOffset()	표준시와 현재지역 차이
get/setTime()	1970-01-01 자정 기준으로 밀리세컨드

<h3>Date객체</h3>

<p>

함수의 예시로 보여드린적이 있음.

날짜의 년, 월, 일, 시, 분, 초를 출력

</p>

let today;

today = new Date();

console.log(today.getFullYear());

console.log(today.getMonth()+1);

console.log(today.getDate());

console.log(today.getHours());

console.log(today.getMinutes());

console.log(today.getSeconds());

today = new Date(2022,8-1,22);

console.log(today);

</script>

내장객체

<h1>내장객체(Object)</h1>

<p>

자바스크립트가 기본적으로 가지고 있으면서 제공해주는 기능

우리가 만드는 객체 : 사용자 정의 객체

</p>

<h2>String, Number, Math, Date</h2>

<h3>String객체 : 문자열을 저장하는 객체</h3>

<p>

'' 혹은 ""

</p>

<p>

String객체가 제공하는 함수<br>

1. 영문자를 대문자로 변경 : toUpperCase();<br>

2. 영문자를 소문자로 변경 : toLowerCase();<br>

3. 문자열의 길이 확인 : length<br>

4. 문자열에서 특정 인덱스에 있는 문자를 출력하기 : charAt();<br>

5. 문자열에서 (앞에서부터) 특정 문자를 찾아 인덱스를 반환 : indexOf();<br>

6. 문자열에서 (뒤에서부터) 특정 문자를 찾아 인덱스를 반환 : lastIndexOf();<br>

7. 문자열에서 특정 문자를 잘라내는 함수 : substring();<br>

8. 문자열을 특정 구분자 기준으로 잘라서 배열로 만들주는 함수 : split();<br>

9. 문자열에 특정 문자가 포함되어 있는지 확인하는 함수 : includes();<br>

10. 지정된 만큼의 문자열을 다른 값으로 변경하는 함수 : replace();<br>

11. 양쪽끝 공백을 제거해주는 함수 : trim();

</p>

<h4>toUpperCase와 toLowerCase의 활용</h4>

<option value="APPLE ">apple</option>

<option value="banana">banana</option>

<option value="orange">orange</option>

</select>

let changeFruit = () =>{

let selectFruit = document.querySelector('#fruit').value;

//selectFruit = selectFruit.toUpperCase();

selectFruit = selectFruit.toLowerCase();

selectFruit = selectFruit.trim();

switch(selectFruit){

case 'apple' : console.log('사과!!');break;

case 'banana' : console.log('바나나!');break;

case 'orange': console.log('오렌지!!');break;

}

};

</script>

실습문제

<br>

<br>

<br>

<br>

<label for="5">뒤에서부터 찾았을 때 가장 가까운 'm'의 위치</label>

<br>

<br>

<br>

<button onclick="stringTest();">String객체 함수 연습하기</button>

let stringTest = () =>{

let text = 'Lorem ipsum dolor sit amet';

document.getElementById('1').value = text.toUpperCase();

document.getElementById('2').value = text.toLowerCase();

document.getElementById('3').value = text.length;

document.getElementById('4').value = text.indexOf('p');

document.getElementById('5').value = text.lastIndexOf('m');

document.getElementById('6').value = text.charAt(7);

document.getElementById('7').value = text.substring(12,5);

let textSplit = text.split(' ');

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

document.getElementById('8').value += textSplit[i]+'\n';

}

console.log('동해물과'+'\n'+'백두산이');

}

</script>

let temp = 'BTS,봉준호,손흥민,제이팍';

let tempArr = temp.split(',');

//includes : 매개변수에 쓴 문자가 현재 문자 전체에 있는지 확인

console.log(temp.includes('BTS'));

if(temp.includes('BTS')){

temp = temp.replace('BTS','뉴진스');

console.log(temp);

}

</script>

문자열 인코딩(암호화) 함수

웹 통신 시 유니코드 문자는 오작동을 일으킬 문제가 있어 인코딩 필요

<p>

encodeURI/decodeURI : 알파벳 숫자 - _ . ! ~ * ' () ; / ? : @ & = + $ , #<br>

encodeURIComponent/decodeURIComponent: 알파벳, 숫자, - _ . ! ~ * ' ( )<br>

</p>

function checkEncode(){

const url = "http://www.naver.com?test=한글입니다.123!@#$%^&*()";

let encode = encodeURI(url);

let encodeCompo = encodeURIComponent(url);

const area = document.querySelector('#result2');

area.innerHTML += '원본 : '+url+'<br>';

area.innerHTML += 'encodeURI : '+encode +'<br>';

area.innerHTML += 'decodeURI : '+decodeURI(encode)+'<br>';

area.innerHTML += 'encodeURIComponent : '+encodeCompo+'<br>';

area.innerHTML += 'decodeURIComponent : '+decodeURIComponent(encodeCompo);

}

</script>

'JavaScript & JQuery' 카테고리의 다른 글

JQuery serialize()를 사용하는 이유 (0)	2024.03.07
JavaScript(6) (0)	2023.08.27
JavaScript(5) (0)	2023.08.27
JavaScript(4) (2)	2023.08.27
JavaScript(3) (2)	2023.08.27

smile-coding

JavaScript(7)

객체.내장객체

'JavaScript & JQuery' 카테고리의 다른 글

티스토리툴바

JavaScript(7)

객체.내장객체

'JavaScript & JQuery' 카테고리의 다른 글

'JavaScript & JQuery' Related Articles

티스토리툴바