SMALL
/// 자바스크립트 변수 -> 데이터의 종류
숫자, 문자, 불린(참과 거짓),배열,함수, 객체(object)
/// OOP 객체지향프로그래밍
-- 자바스크립트 객체는 데이터와 함수를 저장하는 자료구조
-- 객체는 속성(property)과 메소드(method)로 구성
-- 속성은 객체의 상태를 나타내는 변수
-- 메소드는 객체의 행동을 나타내는 변수
-- 자바스크립트 객체는 {}를 사용하여 생성
-- 속성과 메소드는 Key, Value로 구성
연습1
<body>
<script>
// 일반변수를 활용하여 캐릭터 생성
let c_name = '홍길동';
let c_job = '전사';
let c_gender = '남';
let c_skill = function() {
console.log('방어기능');
}
// 객체라는 데이터를 조직화
// 기본형식
/*
let 변수명 = {
키 : 값,
키 : 값,
키 : 값
}
*/
/*
객체 데이터구조
a : b
a = key ( 문자, 숫자, 문자열, 심볼 )
b = value ( 문자,숫자,불린,함수)
*/
let user_cha = {
c_name : '홍길동',
c_job : '전사',
c_level : 100,
c_skill_1 : function() {
console.log('방어하기');
},
c_skill_2 : function() {
console.log('칼던지기');
}
}
console.log(user_cha);
// 객체의 속성과 데이터 접근
// 마침표 표기법 ( dot notation )
// object.key
console.log(user_cha.c_name);
console.log(user_cha.c_skill_1());
console.log(user_cha.c_skill_2());
</script>
</body>
</html>
연습2
<body>
<script>
const character1 = {
name : '도적',
gender : '남자' ,
age : '20',
level : '44',
skill : function() {
console.log('창던지기');
}
}
const character2 = {
name : '도적',
gender : '남자' ,
age : '20',
level : '44',
skill : function() {
console.log('창던지기');
}
}
//객체 함수 정의시 함수이름의 첫글자는 대문자로 작성하기
//생성자 함수 객체의 속성을 초기화
function Character(user_name,user_gender,user_job) {
this.name = user_name,
this.gender = user_gender,
this.job = user_job,
this.level = 0,
this.skill = function() {
console.log('창던지기');
}
}
//new 연산자를 객체의 인스턴트를 생성 객체 만들기
//new 생성자함수를 이용하여 객체 만들기
const newCha1 = new Character('홍길동','남자','도적');
const newCha2 = new Character('영희','여자','마법사');
//new는 객체의 인스턴스 데이터를 생성하는 연산자
//생성자 함수
console.log(newCha1);
console.log(newCha2);
</script>
LIST
'프론트엔드 개발자 > JS' 카테고리의 다른 글
| 자바스크립트 javascript 10. 자바스크립트 슬라이드 만들기 총정리(3) 클론코딩 연습하기 (0) | 2023.04.13 |
|---|---|
| 자바스크립트 javascript 10. 자바스크립트 슬라이드 만들기 총정리!!!!!!!(2) (0) | 2023.04.10 |
| 자바스크립트 javascript 10. 자바스크립트 슬라이드 만들기 총정리!!!!!!! (0) | 2023.04.07 |
| 자바스크립트 javascript 9. 자바스크립트 DOM, 다양한 효과넣기 (0) | 2023.04.07 |
| 자바스크립트 javascript 8. 동적으로 움직이는 서브메뉴 만들기 (0) | 2023.04.07 |
댓글