객체 - 정리정돈의 수단 ( 쉽게 표현하자면 폴더 ) , 자바스크립트의 기본 타입(data type)은 객체(object)입니다.
속성 - 자바스크립트에서 객체 내부의 속성을 의미
함수 - Function 이라는 수납공간 작업을 수행하거나 값을 계산하는 문장 집합
메소드 - 객체에 속해있는 함수, 객체에 어떤 액션을 취하는 것
매개변수 - 어떤 매개체를 받아 진행하겠다.
인자 - 인자는 매개변수에서 받아오는 것.
return - 반환값. 함수에서 나온 값을 반환
자동차를 비유:
속성 : 어디회사의 차인지 바퀴가 엔진을 무엇을 사용하는지 색은 무슨 색인지 몇명이 탈 수 있는지
메소드 : 달린다 , 선다, 커브를 돈다
객체 생성 : 공장에서 아우디 R8을 만드는 것에 해당
속성은 function을 사용하여 만든다.
function makeCar(){
//makeCar 속성을 정의하는 함수의 이름입니다.
//속성은 this를 사용하여 선언합니다.
this.name;
this.company;
this.color;
this.numPeople;
this.meth = showCar;
//그리고 이러한 자료들로 어떻게 할지에 대한 메소드를 출력합니다. 그래야 메소드와 연결이 됩니다.
// meth 라는 속성 안에 showCar이라는 메소드 명을 지정하여 선언합니다.
}this
this는 이것이라는 뜻이다.
this는 함수 내에서 함수 호출 맥락(context)를 의미한다.
(즉 함수를 어떻게 호출하느냐에 따라서 this가 가리키는 대상이 달라진다는 뜻이다.)
엄격모드, 비엄격모드가 있고 this의 값은 함수를 호출할때마다 다를 수있다.
함수와 객체의 관계가 느슨한 자바스크립트에서 this는 이 둘을 연결시켜주는 실질적인 연결점의 역할을 한다.
<script>
/* 1.할머니 : 나는 허리가 아프다 (나 === 할머니)
2.아버지 : 나는 다리가 아프다 (나 === 아버지)
3.어머니 : 나는 머리가 아프다 (나 === 어머니)
자바스크립트에서 this란 위의 문장들에서 나타난 '나'라는
단어와 비슷합니다. 어떤 문맥이냐에 따라 그 의미(값)이 바뀝니다. */
let name = 'window name';
function log() {
console.log(this.name); //거의 모든상황에서 this는 객체이다.
}
let obj = {
name : 'ken',
logName : log
};
log(); //'window name'
obj.logName(); //'ken'
/*this의 값은 this를 사용하는 해당 함수를 "어떻게" 실행하느냐에 따라 바뀐다.
함수를 실행하는 방법엔 크게 4가지가 있다.
this를 이용하는 해당 함수를 이 4가지 중 어떤 방식으로 실행하느냐에 따라 this의 값은 바뀐다.*/
</script>위 예제 출처 : https://www.youtube.com/watch?v=ayyuU0xdbIU
this는 function에 묶여 함께사용하면 위치를 잘 찾는데,
속성값의 this는 global이기때문에 위치를 못찾는다.
자바스크립트 객체 :
사용자 정의 객체 / 내장객체 (편의성으로 만들어져있는 객체)
내장 객체 :
BOM (브라우저 객체 모델) - navigator, screen, location, frames, history, XMLHttpRequest
DOM(문서객체모델) - document
전역자바스크립트객체 - Object, Arry, Function
document.getElementById(" ")
제어할 요소를 찾아 결과를 출력하는 방법
<body>
<p id="msg1"></p>
<p id="msg2"></p>
<p id="msg3"></p>
<script>
let obj = {
m1: function () {
return "Hello Sonata";
},
m2: function (a) {
let result = a;
return result;
},
m3: function (a, b) {
let result = a + b;
return result;
},
};
document.getElementById("msg1").innerHTML = obj.m1();
document.getElementById("msg2").innerHTML = obj.m2(100);
document.getElementById("msg3").innerHTML = obj.m3(100, 200);
</script>
</body>
<body>
<p id="carname"></p>
<p id="carcolor"></p>
<p id="carspeed"></p>
<script>
let car = {
name: "Sonata",
speed: 50,
color: "white",
start: function () {
return this.speed + 10;
},
};
let cname = document.getElementById("carname");
cname.textContent = car.name;
let colname = document.getElementById("carcolor");
colname.textContent = car.color;
let cspeed = document.getElementById("carspeed");
cspeed.textContent = car.start();
</script>
</body>
<body>
<p id ="upspeed"></p>
<p id ="downspeed"></p>
<script>
let car = {
name: 'Sonata',
speed: 100,
color: 'white',
speedup: function(a) {
let sp = this.speed+a;
if(sp>=300) {
sp=50;
return sp;
} else {
return sp;
}
},
speeddown: function(a) {
let sp = this.speed-a;
if(sp<0) {
sp=0;
return sp;
} else {
return sp;
}
}
};
var upspeed=document.getElementById("upspeed");
upspeed.textContent='속도증가 : ' + car.speedup(100);
var upspeed=document.getElementById("downspeed");
upspeed.textContent='속도감소 : ' + car.speeddown(30);
</script>
</body>
DOM 문서 객체 모델
문서 객체 생성 관련 메소드
creatElement() 요소노드를 생성
creatTextNode() 텍스트노드를 생성
appendChild() 요소노드를 body객체에 추가 *순서대로들어간다.
<body>
<script>
function add() {
let header=document.createElement('h3'); //header 요소노드생성
let textNode=document.createTextNode('내이름은 봉봉입니다.') //텍스트노드생성
header.appendChild(textNode); // header에 textNode ... 요소노드와 텍스트노드연결
document.body.appendChild(header); //생성한 문서객체를 body에 추가
}
</script>
<a href="#" onclick="add()">당신의 이름은 무엇입니까?</a>
</body>문서객체의 속성값을 설정하는 방법
객체변수.속성='값';
setAtrribute(속성, 값);
setAttribute 사용을 권한다.
<body>
<script>
function add() {
let img = document.createElement('img'); //요소노드를 생성
img.setAttribute('src', 'test.png');
img.setAttribute('width', 100 ); //setAttribute(속성, 값);
img.setAttribute('height', 122); //문서객체의속성값설정
document.body.appendChild(img); //요소노드를 body객체에 추가
}
</script>
<a href="#" onclick="add()">[이미지추가]</a>
</body>문서 객체 스타일 변경하기
document.getElementById(id).style.속성명="속성값";
<body>
<script>
function textstyle() {
document.getElementById("msg").style.color="blue";
//제어할 요소찾아 결과 출력 document.getElementById(" ")
document.getElementById("msg").style.fontSize="30px";
document.getElementById("msg").style.fontStyle="italic";
};
function texthidden() {
document.getElementById("msg").style.visibility="hidden";
};
function textvisible() {
document.getElementById("msg").style.visibility="visible";
};
</script>
<p id="msg"> 문서 객체 스타일 변경하기 </p>
<input type="button" onclick="textstyle()" value="텍스트스타일변경">
<input type="button" onclick="texthidden()" value="텍스트숨기기">
<input type="button" onclick="textvisible()" value="텍스트보이기">
</body>
첨부 이미지출처 : 한빛
'STUDY > JavaScript' 카테고리의 다른 글
| [JS-보충] 22-09-27 getElementById (0) | 2022.09.27 |
|---|---|
| [JS-보충] 22-09-26 변수 유효범위, typeof (1) | 2022.09.26 |
| [JS] 22-06-03 자바스크립트 배열 ☑ (0) | 2022.06.03 |
| [JS] 22-06-02 자바스크립트 함수 ☑ (0) | 2022.06.02 |
| [JS] 22-05-31 자바스크립트 반복문/보조제어문 ☑ (0) | 2022.06.02 |