프로토타입 = 자바의 상속개념?
40-1. 배열
<!DOCTYPE html>
<html lang="en">
<head>
<title>안녕 나는 배열이야 ~</title>
<style>
.area{
width : 300px;
border : 1px solid black;
}
.small{height : 100px;}
.big{height : 200px;}
</style>
</head>
<body>
<h1>배열</h1>
<p>
<!-- int char Object // [1] [2] [length]-->
자바스크립트에서는 변수 선언 시 별도의 자료형을 지정하지 않기 때문에 <br>
배열도!! var, let, const로 선언을 한다!! <br>
어떤 자료형이든 상관없이 하나의 배열에 담을 수 있음! (자바의 컬렉션과 유사)
</p>
<button onclick="arrayText();">버튼~</button>
<div class="area small" id="area1"></div>
<script>
function arrayText(){
// 배열의 선언 및 초기화
let arr = ['홍길동', 15, true, [1, 2, 3]];
// let arr = [];
// let arr = new Array(); 이렇게도 할 수 있음. 나중에 할것
console.log(arr);
console.log(arr[2]); // true
console.log(arr[3][1]); // 2
let arr2 = arr[3];
console.log(arr2[2]); // 3
// 반복문
/*
변수명과 id속성값이 중복이 날 수 있어서 이 방법은 굉장히 위험하다.
절대하면 안되는 방법!!!!!!!!!!!!!!!!!!!!!!!
for(let i = 0; i < arr.length; i++){
area1.innerHTML += arr[i] + '<br>';
}
*/
const area1 = document.getElementById('area1');
// 배열의 0번인덱스 ~ 마지막인덱스까지 순차적으로 모두 접근할 때!
/*
for(Strings s: list){ s가 요소를 담는 변수
System.out.println(s);
})
*/
// for in 문
// for(let 변수명 in 순차적으로 접근할 배열명)
for(let i in arr){
area1.innerHTML += arr[i] + '<br>';
}
}
</script>
<hr>
<h3>* 배열의 선언</h3>
<p>
배열 선언 시 배열의 크기를 지정한 채로 선언하거나, 따로 크기를 지정하지 않을 수도 있음! <br>
</p>
<button onclick="arrayTest2();">확인</button>
<div id="area2" class="area big"></div>
<script>
function arrayTest2(){
let arr1 = new Array(); // 배열의 크기가 0인 배열
let arr2 = new Array(2); // 배열의 크기가 2인 배열
let arr3 = []; // 배열의 크기가 0인 배열
console.log(arr1);
console.log(arr2);
console.log(arr3);
// 배열에 요소 추가
arr1[0] = '상우';
arr1[1] = '마와르';
arr1[10] = '구촐';
document.getElementById('area2').innerHTML += arr1 + '<br>';
console.log(arr1);
// arr2
document.getElementById('area2').innerHTML += arr2 + '<br>';
// arr2에 값 대입
arr2[0] = '칼림';
arr2[1] = '독수리';
arr2[2] = '카눈';
arr2[3] = '란';
document.getElementById('area2').innerHTML += arr2.length + '<br>';
document.getElementById('area2').innerHTML += arr2 + '<br>';
// 기존 크기 2 => 4개의 값을 넣는다고 해서 크기가 늘어나지 않는다
// 배열선언과 동시에 초기화
var arr4 = ['홍길동', '이승철']; // 배열의 크기가 2
var arr5 = new Array('Java', 'Oracle', 'HTML'); // 배열의 크기가 3
document.getElementById('area2').innerHTML += arr4 + '<br>' + arr5;
}
</script>
<hr>
<h3>* Array객체의 메소드</h3>
<h4> 1) indexOf(찾고자하는 요소) : 배열에서 해당 요소가 위치해있는 인덱스를 반환</h4>
<div id="area3" class="area small"></div>
<button onclick="indexOfTest();">확인</button>
<script>
function indexOfTest(){
let arr = ['설날', '추석', '광복절', '개천절', '크리스마스', '한글날'];
// 실습문제
// 사용자에게 연휴를 입력받아서
// let text = window.prompt('연휴를 입력해 주세요');
// 사용자가 입력한 연휴가 있을 경우 : 당신이 찾는 연휴 XXX은 0번째 인덱스에 있습니다.
/* for문이용했음
for(let i in arr){
if(text == arr[i]){
document.getElementById('area3').innerHTML = '당신이 찾는 연휴 ' + text + '는(은) ' + i + '번째 인덱스에 있습니다';
break;
}
// 사용자가 입력한 연휴가 없을 경우 : 당신이 찾는 연휴 XXX은 존재하지 않습니다.
else {
document.getElementById('area3').innerHTML = '당신이 찾는 연휴 ' + text + '는(은) 존재하지 않습니다.';
}
}
*/
/* indexOf이용했음
console.log(arr.indexOf(text));
if(arr.indexOf(text) >= 0){
document.getElementById('area3').innerHTML = '당신이 찾는 연휴 ' + text + '는(은) ' + arr.indexOf(text) + '번째 인덱스에 있습니다';
}
else{
document.getElementById('area3').innerHTML = '당신이 찾는 연휴 ' + text + '는(은) 존재하지 않습니다.';
}
*/
// 쌤꺼
let holiday = prompt('찾고자하는 연휴를 입력하세요.');
const area3 = document.getElementById('area3');
const index = arr.indexOf(holiday);
console.log(index);
if(index == -1){
area3.innerHTML = '당신이 찾는 연휴 ' + holiday + '는 존재하지 않습니다.';
}
else{
area3.innerHTML = '당신이 찾는 연휴 ' + holiday + '는 ' + index + '번째 인덱스에 있습니다.';
}
// 참고. 동등비교 연산자 ==
console.log(1 == 1); // true
console.log('1' == 1); //true => 자료형과 무관하게 실제 값만 일치하면 true
console.log([] == 0); // true => 대체 왜???
console.log('1' === 1); // false : 값, 자료형 둘 다 일치해야만 true
}
</script>
<hr>
<h4> 2) concat(배열, 배열, 배열, ...) : 여러 개의 배열을 결합하고자 할 때 사용 </h4>
<div id="area4" class="area big"></div>
<button onclick="concatTest();">확인</button>
<script>
function concatTest(){
/*
let arr1 = ['도라', '사울라'];
let arr2 = arr1;
arr2[2] = '머시기';
console.log(arr1); // ['도라', '사울라', '머시기'] => 얕은 복사됨
*/
let arr1 = ['도라', '사울라'];
let arr2 = ['담레이', '하이쿠이', '기러기'];
const area4 = document.getElementById('area4');
area4.innerHTML = 'arr1 : ' + arr1 + '<br>';
area4.innerHTML += 'arr2 : ' + arr2 + '<br>';
area4.innerHTML += 'arr1기준으로 합침 : ' + arr1.concat(arr2) + '<br>';
// arr1 = arr1.concat(arr2) + '<br>'; // 원본배열에 합쳐서 원본배열에 대입(복사)
area4.innerHTML += 'arr1 : ' + arr1 + '<br>';
area4.innerHTML += 'arr2기준으로 합침 : ' + arr2.concat(arr1) + '<br>';
area4.innerHTML += '많은 배열을 합침 : ' + arr2.concat([1,2], arr1, ['안녕']);
// 원본배열에 영향을 끼치지 않음
}
</script>
<hr>
<h4> 3) reverse() : 배열에 담긴 요소들을 역순으로 바꿔주는 메소드</h4>
<div id="area5" class="area small"></div>
<button onclick="reverseTest();">확인</button>
<script>
function reverseTest(){
let arr = ['Apple', 'Banana', 'Lemon', 'Kiwi'];
const area5 = document.getElementById('area5')
area5.innerHTML = 'arr : ' + arr + '<br>';
arr.reverse();
area5.innerHTML += 'reverse결과 : ' + arr + '<br>';
// 원본배열에 영향을 끼치는 메소드
area5.innerHTML += 'reverse의 reverse : ' + arr.reverse() + '<br>';
}
</script>
<hr>
<h4> 4) sort() : 배열에 담긴 값들을 정렬해주는 메소드</h4>
<div id="area6" class="area small"></div>
<button onclick="sortTest();">확인</button>
<script>
function sortTest(){
const area6 = document.getElementById('area6');
let arr = ['김건희', '김건늬', '김건릐', '김건긔', '김건믜'];
area6.innerHTML = 'arr : ' + arr + '<br>';
arr.sort();
area6.innerHTML += '다시 arr : ' + arr + '<br>';
// 원본배열에 영향을 끼치는 메소드
arr.sort().reverse();
area6.innerHTML += '내림차순 정렬 arr : ' + arr + '<br>';
}
</script>
<hr>
<h4>
5_1) push(추가할 요소) : 배열의 맨 뒤에 요소를 추가하고 크기를 반환 <br>
5_2) pop() : 배열의 맨 뒤 요소를 제거 -> 제거된 요소를 반환
</h4>
<div id="area7" class="area" style="height : 500px;"></div>
<button onclick="pushPopTest();">확인</button>
<script>
function pushPopTest(){
const area7 = document.getElementById('area7');
let lunchMenu = ['서브웨이', '돈까스', '김밥', '새우볶음밥'];
area7.innerHTML = 'lunchMenu : ' + lunchMenu + '<br>';
area7.innerHTML += 'Push 후 크기 : ' + lunchMenu.push('곰탕') + '<br>'; // 5
area7.innerHTML += lunchMenu + '<br>';
lunchMenu.pop(); // 제일 뒤에 있는 요소부터 제거
area7.innerHTML += lunchMenu + '<br>';
area7.innerHTML += lunchMenu.pop() + '<-- lunchMenu에서 pop한 요소 <br>';
}
</script>
<hr>
<h4>
6_1) unshift(추가할요소) : 배열의 맨 앞에 요소를 추가하고 크기 반환 <br>
6_2) shift() : 배열의 맨 앞 요소를 제거하고 제거된 요소를 반환
</h4>
<div id="area8" class="area big"></div>
<button onclick="shiftUnshiftTest();">안녕 나는 버튼이야</button>
<script>
function shiftUnshiftTest(){
const area8 = document.getElementById('area8');
let lunchMenu = ['곰탕', '꼬리곰탕'];
area8.innerHTML += 'lunchMenu : ' + lunchMenu + '<br>';
lunchMenu.unshift('설렁탕');
area8.innerHTML += 'lunchMenu에 unshift한 결과 : ' + lunchMenu + '<br>'; //설렁탕, 곰탕, 꼬리곰탕
area8.innerHTML += 'lunchMenu에 shift한 결과 : ' + lunchMenu.shift(); // 설렁탕(뽑은거 나옴)
}
</script>
<hr>
<h4>
7_1) slice(시작인덱스, 끝인덱스) : 배열의 요소들을 추출해주는 메소드 <br>
7_2) splice(시작인덱스, 제거수, 추가값) : 배열의 요소를 추출해서 제거 및 추가, 추가값은 생략 가능
</h4>
<div id="area9" class="area" style="height : 500px;"></div>
<button onclick="sliceSpliceTest();">확인</button>
<script>
function sliceSpliceTest(){
const area9 = document.getElementById('area9');
let arr = ['나는', '올 해', '금연을', '하겠다.'];
area9.innerHTML += 'arr : ' + arr + '<br>';
// slice
area9.innerHTML += 'slice결과 : ' + arr.slice(2, 4) + '<br>';
// 원본배열에 영향을 끼치지 않음!
// splice
area9.innerHTML += 'splice결과 : ' + arr.splice(2, 1) + '<br>';
// 원본배열에 영향을 끼침!
area9.innerHTML += 'arr : ' + arr + '<br>';
area9.innerHTML += arr.splice(2, 0, '다이어트') + '<br>'; // 추가할때도 많이 씀
area9.innerHTML += arr;
}
</script>
<hr>
<h4>
8) join(구분자)
: 배열에 담긴 값들을 하나의 '문자열'로 합쳐서 반환해주는 메소드
</h4>
<div id="area10" class="area small"></div>
<button onclick="joinTest();">확인</button>
<script>
function joinTest(){
const area10 = document.getElementById('area10');
let arr = ['점', '심', '시', '간'];
const obj = {};
console.log(arr);
console.dir(arr);
area10.innerHTML = 'arr : ' + arr + '<br>';
area10.innerHTML += obj + '<br>';
area10.innerHTML += arr.toString() + '<br>';
// 배열 객체를 html요소에 출력할 경우 내부적으로 toString() 호출 후 돌아온 결과 출력
area10.innerHTML += 'join : ' + arr.join() + '<br>'; // join : 점,심,시,간
area10.innerHTML += 'join : ' + arr.join('') + '<br>'; // join : 점심시간
area10.innerHTML += 'join : ' + arr.join('-') + '<br>'; // join : 점-심-시-간
// join은 기본적으로 , 을 통해서 하나의 문자열로 합침
// join메소드를 호출 시 구분자를 제시한다면 해당 구분자로 하나의 문자열이 만들어짐!
}
</script>
</body>
</html>
40-2. 함수
<!DOCTYPE html>
<html lang="en">
<head>
<title>함수</title>
<style>
.area{
width : 500px;
height : 100px;
border : 1px solid lightcoral;
background-color: hotpink;
}
</style>
</head>
<body>
<h1>함수! (function) </h1>
<!--
* 함수의 종류
1. 선언적 함수 : 이름이 있는 함수, 이름을 가지고 호출해서 실행함
2. 익명 함수 : 이름이 없는 함수, 함수 식별자 대신 변수에 함수를 대입해서 함수코드를 저장하는 구현 방식
-->
<h3>선언적 함수</h3>
<pre onclick="test1();">
[ 표현법 ]
function 함수식별자(매개변수, 매개변수){
해당 함수를 호출했을 때 실행할 코드;
return 결과값;
}
- 매개변수가 없는 경우 생략 가능
- 반환할 결과값이 없는 경우 return 결과값; 생략가능
</pre>
<div id="area1" class="area" onclick="test1();"></div>
<button onclick="test1();">나불렀어???</button>
<script>
function test1(){ // 재활용할 수 있지~, 가독성, 유지보수가 좋아짐
document.getElementById('area1').innerHTML = 'test1() 호출됨! <br>';
}
</script>
<hr>
<h3>* 익명함수</h3>
<pre>
[ 표현법 ]
변수/속성 = function(){
소스코드가 어쩌구저쩌구;
}
=> 특정 변수나 속성에 대입하는 함수가 필요할 경우 사용됨
(주로 이벤트 핸들러 작성 시 사용)
</pre>
<button id="btn">버튼</button>
<div id="area2" class="area"></div>
<script>
const btn = document.getElementById('btn'); // 버튼 요소객체
btn.onclick = function(){ // 이벤트 속성에 대입하는 function == 이벤트핸들러
document.getElementById('area2').innerHTML = '이벤트 핸들러를 통해 실행됨! <br>';
}
// console.dir(btn);
</script>
<hr>
<h2>함수의 매개변수</h2>
<button onclick="test3('프로개발자');">실행확인</button>
<button onclick="test3(10);">실행확인</button>
<button onclick="test3(true)">실행확인</button>
<button onclick="test3([1,2,3])">실행확인</button>
<button onclick="test3(prompt('이름을 입력하세요!!'))">실행확인</button>
<!-- 자료형에 상관없이 인자값과 매개변수의 개수가 동일하다면 실행하는데 문제가 없음! -->
<button onclick="test3();">실행확인</button>
<!-- 정의해둔 매개변수 개수보다 적게 전달하는것 가능!(실행에 문제 없음) / 단, undefined로 뜸(변수선언은 헀으나 초기화를 안한 상태) -->
<button onclick="test3('하나', '둘')">실행확인</button>
<!-- 정의해둔 매개변수 개수보다 많게 전달하는것 가능!(실행에 문제 없음) / 단, 초과된 전달값은 사라짐 -->
<div id="area3" class="area"></div>
<script>
function test3(value){ // 매개변수 작성시 자료형 지정 X. var, let X => 변수명만 적음
// 다 되니까 실수하기 딱 좋음!
// alert(value[0]); 이런거..
document.getElementById('area3').innerHTML = value;
}
</script>
<hr>
<h3>* 매개변수 관련 배열</h3>
<p>
함수 호출 시 전달하는 값은 내부적으로 arguments라는 배열에 담김 <br>
* arguments : 모든 함수마다 내부적으로 하나씩 존재하는 배열 객체
</p>
<button onclick="test4(1,7,15,486,254,55,7,8,9,17,99);">나는 버튼</button>
<div id="area4" class="area"></div>
<script>
function test4(){
console.log(arguments);
// test4함수 호출 시 전달한 인자값들의 총합과 평균을 구해서
// id속성값이 area4인 div요소의 innerHTML속성에 대입해주세요.
const area4 = document.getElementById('area4');
console.log(test4.arguments[0]);
let sum = 0;
for(let i in test4.arguments) {
sum += test4.arguments[i];
}
area4.innerHTML = sum;
let avg = sum/arguments.length;
area4.innerHTML = avg;
}
</script>
<hr>
<h3>
* 매개변수 있는 함수에 this키워드를 전달하기*********************
**************************************************************
☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★
★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆
☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★
★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆
☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★
★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆
☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★
</h3>
<button onclick="test5(this);">버튼</button> <!-- this : 해당 요소객체 버튼 자체 -->
<button id="abc" onclick="test5(this.innerHTML);">버튼2!</button>
<button id="btn33" onclick="test5(this.id);">버튼3!</button>
<button type="bytton" value="버튼4" onclick="test5(this.value);">버튼4</button>
<script>
function test5(a){
console.log(a);
}
</script>
<hr>
<h2>* 일반적인 값을 반환하는 경우 </h2>
<button onclick="test6();">실행확인</button>
<div id="area6" class="area"></div>
<script>
function test6(){
document.getElementById('area6').innerHTML += '랜덤값 : ' + rand();
}; // 보편적으로 밑에 또 뭐가 있으면 ; 달아주고 마지막으로 있는 애는 안달아줌.
// 1 ~ 100 사이의 랜덤한 난수를 생성해서 "반환"해주는 함수
function rand(){
// Math.random() => 0.0 ~ 0.9999999999
// Math.random() * 100 => 0.0 ~ 99.999999999999
// Math.random() * 100 + 1 => 1.0 ~ 100.9999999999
// parseInt(Math.random() * 100 + 1) => 1 ~ 100
return parseInt(Math.random() * 100 + 1);
}
</script>
<h3> * 익명함수를 리턴하는 경우 </h3>
이름 : <input type="text" id="userName">
<button onclick="test7()();">실행</button>
<script>
function test7(){
let name = document.getElementById('userName').value;
return function(){
alert(name + '님 안녕~');
}
}
</script>
</body>
</html>
40-3. 객체1
<!DOCTYPE html>
<html lang="en">
<head>
<title>객체는 쉽다~ 첫번째!!!</title>
<style>
.area{
background-color : khaki;
border : 1px solid goldenrod;
}
.small{height : 250px}
.big{height : 500px}
</style>
</head>
<body>
<h1>객체</h1>
<p>
Property(속성) + Value(속성값)을 한 쌍으로 저장할 수 있는 구조 <br>
여러 속성을 하나의 변수에 저장할 수 있도록 해주는 데이터 타입 <br>
* 객체는 중괄호를 {} 사용해서 생성하고 <br>
중괄호 안에 객체에 필요로 하는 속성(Property)들을 정의함(속성 : 속성값) <br>
참고로 속성값으로는 모든 자료형의 값을 담을 수 있음
-> 자바스크립트에서 객체 : 자바의 HashMap과 비슷한 개념 <br>
</p>
<pre>
[ 표현법 ]
var 변수명(== 객체명) = {
속성명 : 속성값,
속성명 : 속성값,
속성명 : 속성값,
...
}
</pre>
<button onclick="test1();">실행확인</button>
<div id="area1" class="area big"></div>
<script>
function test1(){
// 젤리
// 제품명 : 웰치 후르트스낵 믹스드후르트
// 가격 : 17000
// 재료 : 혼합과일퓨레, 설탕
// 회사 : 농심
// 배열
var arr = ['웰치 후르트스낵 믹스드후르트', 17000, ['혼합과일퓨레', '설탕'], '농심'];
// 각각의 인덱스를 알아야 됨... 힘들어
// 객체
let jelly = {
productName : '웰치 후르트스낵 믹스드후르트',
price : 17000,
'material' : ['혼합과일퓨레', '설탕'],
company : '농심'
}
console.log(arr); // [~~~]
console.log(jelly); // {~~~}
const area1 = document.getElementById('area1');
area1.innerHTML += 'arr : ' + arr + '<br>';
area1.innerHTML += 'jelly : ' + jelly + '<br>'; // [object object]로 출력됨
// 속성과 프로토타입이 출력됨(?)
// 해당 객체 내부의 각 속성에 접근하는 방법
// 방법 1. .을 이용해서 접근하는 방법 : 객체명.속성명
area1.innerHTML += '<b>방법 1. 객체명.속성명으로 접근하기 </b><br>';
area1.innerHTML += 'jelly.productName : ' + jelly.productName + '</br>';
area1.innerHTML += 'jelly.price : ' + jelly.price + '<br>';
area1.innerHTML += 'jelly.material : ' + jelly.material + '<br>';
area1.innerHTML += 'jelly.material[0] : ' + jelly.material[0] + '<br>';
area1.innerHTML += 'jelly.material[1] : ' + jelly.material[1] + '<br>';
area1.innerHTML += 'jelly.company : ' + jelly.company + '<br>';
// 방법 2. 대괄호를 이용하는 방법 : 객체명['속성명']
area1.innerHTML += '<b>방법 2. 객체명["속성명"]으로 접근하기</b><br>';
area1.innerHTML += 'jelly["productName"] : ' + jelly["productName"] + '<br>';
area1.innerHTML += 'jelly["price"] : ' + jelly["price"] + '<br>';
area1.innerHTML += 'jelly["material"] : ' + jelly["material"] + '<br>';
area1.innerHTML += 'jelly["material"][0] : ' + jelly["material"][0] + '<br>';
area1.innerHTML += 'jelly["material"][1] : ' + jelly["material"][1] + '<br>';
area1.innerHTML += 'jelly["company"] : ' + jelly["company"] + '<br>';
}
</script>
<hr>
<h3>* 객체 생성</h3>
<button onclick="test2();">실행</button>
<div id="area2" class="area small"></div>
<script>
function test2(){
var user = {
'user name' : '홍길동', // 속성명에 공백은 안됨 ''를 붙이면 쓸 수 있음
'age!!' : 20 // 속성명에 특수문자는 안됨 ''를 붙이면 쓸 수 있음
};
console.log(user);
const area2 = document.getElementById('area2');
// .을 이용 => 접근불가
// area2.innerHTML = '유저네임 : ' + user.user name + '<br>';
// 유일하게 쓸 수 있는 방법이야
area2.innerHTML = 'user name : ' + user["user name"] + '<br>';
area2.innerHTML += 'age!! : ' + user["age!!"] + '<br>';
}
</script>
<hr>
<h3>* 객체의 반복문</h3>
<p>
인덱스 개념이 없기 때문에 단순 for문은 사용 불가능, for in문 사용 가능 <br>
객체가 가지고 있는 모든 속성들에 대해서 순차적으로 접근하고자 할 때 사용 가능
</p>
<button onclick="test3();">실행</button>
<div id="area3" class="area small"></div>
<script>
function test3(){
const area3 = document.getElementById('area3');
let arr = ['치킨', 12000, '가마치통닭'];
for(let i in arr){
area3.innerHTML += arr[i] + '<br>';
}
// in 키워드 뒤에 배열을 제시했다면
// 반복할 때마다 0에서부터 마지막 인덱스까지의 인덱스가 i에 담김
let student = {
name : '홍길동',
age : 15,
grade : 3,
address : '한양'
}
// in 키워드 뒤에 객체를 제시 시
// 반복할 때마다 해당 객체의 속성명들이 key(변수명)에 담김
// . 이용
for(let key in student){
area3.innerHTML += 'key : ' + student.key + '<br>';
// 진짜 말 그대로 student객체한테 가서 key라는 속성명에 접근
// .을 가지고 접근 => 객체명.속성명 => 사용불가
}
// [] 이용
for(let key in student){
area3.innerHTML += key + ' : ' + student[key] + '<br>';
}
}
</script>
<hr>
<h3>* 객체의 메소드 속성</h3>
<p>
객체의 속성 중 함수자료형인 속성을 메소드라고 부른다.
</p>
<button onclick="test4();">실행확인</button>
<div id="area4" class="area small"></div>
<script>
function test4(){
const area4 = document.getElementById('area4');
let name = '이승철';
let bird = {
name : '미미',
kind : '회색앵무',
eat : function(food){ // 이 경우 속성명이 function의 이름이 되므로 익명함수 작성
area4.innerHTML += this.kind + '인 ' + this.name + '가 ' + food + '를 먹습니다. <br>';
// => 메소드 속성안에서 같은 객체 내의 속성을 호출할 경우 this.을 앞에 붙인다.
// => 만약 속성명과 변수명이 동일한 경우에는 this.을 안붙이면 변수가 호출됨!
}
};
bird.eat('지렁이');
}
</script>
<hr>
<h3>* in과 with</h3>
<p>
in : 객체 내에 해당 속성이 있는지 확인해주는 키워드 <br>
with : 코드를 줄여주는 키워드
</p>
이름 : <input type="text" id="name"> <br>
국어 : <input type="text" id="kor"> <br>
수학 : <input type="text" id="math"> <br>
생물 : <input type="text" id="fish"> <br>
<button onclick="test5();">실행</button>
<div id="area5" class="area big"></div>
<script>
function test5(){
// 객체 만들기
// 객체명 : student
// 속성명 : 속성값
// name : 사용자가 입력한 이름값
// kor : 사용자가 입력한 국어점수
// math : 사용자가 입력한 수학점수
// fish : 사용자가 입력한 낚시점수
// getSum : 점수의 합계를 구해서 반환해주는 익명함수
// getAvg : 점수의 평균을 구해서 반환해주는 익명함수
let name = document.getElementById('name').value;
let kor = Number(document.getElementById('kor').value);
let math = Number(document.getElementById('math').value);
let fish = Number(document.getElementById('fish').value);
let student = {
name : name,
kor : kor,
math : math,
fish : fish,
getSum : function() {
return this.kor + this.math + this.fish;
},
getAvg : function() {
return this.getSum()/3;
},
toString : function(){
return this.name + ', ' + this.kor + ', ' + this.math + ', ' + this.fish;
}
}
console.log(student);
// console.log(student.getSum()); // 값 꺼내오기
// console.log(student.getAvg()); // 값 꺼내오기
let arr = [1, 2, 3];
const area5 = document.getElementById('area5');
area5.innerHTML += 'arr : ' + arr + '<br>';
area5.innerHTML += 'student : ' + student + '<br>';
// 해당 객체에 해당 속성이 존재하는가? => '속성명' in 객체명 : 있으면 true 없으면 false
area5.innerHTML += 'student객체에 name속성이 존재하나? : ' + ('name' in student) + '<br>';
area5.innerHTML += 'student객체에 test속성이 존재하나? : ' + ('test' in student) + '<br>';
area5.innerHTML += 'student.name : ' + student.name + '<br>';
area5.innerHTML += 'student.math : ' + student.math + '<br>';
with(student){
area5.innerHTML += '학생이름 : ' + name + '<br>';
area5.innerHTML += '수학점수 : ' + math + '<br>';
}
}
</script>
<h3>* 객체의 속성 추가 및 제거</h3>
<button onclick="test6();">실행</button>
<div id="area6" class="area small"></div>
<script>
function test6(){
let arr = [];
// 빈객체 생성
let student = {};
// ************************ 객체에 속성을 추가하는 방법 ************************
// 객체명.추가할속성명 = 속성명에해당하는밸류값;
student.name = '홍길동';
student.hobby = ['산책'];
student.age = 60;
// 속성명이 중복되는 경우 기존에 존재하는 속성에 접근하는 것이기 때문에 값이 덮어씌어짐
student.age = 20;
// with 키워드를 쓴다면?
with(student){
address = '한양';
phone = '010-2323-3434';
} // with의 경우 속성추가가 불가능하다!!! 속성값을 가져오는 용도로만 사용할 수 있음
console.log(student);
// 메소드 속성 추가
student.toString = function(){
return this.name + ', ' + this.hobby + ', ' + this.age;
}
document.getElementById('area6').innerHTML = student.toString();
// [object Object]
// 객체에 속성 제거
// delete(객체명.속성명)
delete(student.toString);
console.log(student);
}
</script>
</body>
</html>'FrontEnd > JavaScript' 카테고리의 다른 글
| #43. JavaScript(정규표현식) 끝! UseCase Diagram, jQuery(개요) 시작! (3) | 2023.08.31 |
|---|---|
| #42. JavaScript(객체2, window객체, 이벤트) (1) | 2023.08.30 |
| JS에서의 this (+ jQuery에서의 this) (1) | 2023.08.28 |
| #39. JavaScript(요소접근하기, 변수와자료형, 문자열과 숫자) (0) | 2023.08.25 |
| #38. JavaScript(개요, 데이터입출력) (0) | 2023.08.24 |