나의 하찮음에 그만 몰두해야 한다 하지만 아직까진 하찮다
안녕 오늘도 힘내 혜지나
자바스크립트의 사용자 함수 만들기 부터 시작하여 멘붕이 제대로 와서 뭘 알아야 실행을 해볼텐데 감을 못 잡겠어서 흑흑 (속으로) 울면서 공부했던 격동의 주말을 보내고 난 후
포기는 없다
하지만 슬픔은 있다
슬픔도 피하지 않겠다 부딪혀서 프로그래밍해버리겠어
오타 없이 오류 없이 괄호 잘 여닫아서 창을 열어내고야 말겠어
1. 배열을 하자
(1) for ~ in
for in 을 사용해
이미지를 순서대로 열어보았다.
차례대로 착 착
(2) for ~ of
for ~ in 과 for ~ of의 특징과 차이를 잘 이해해야 한다. 모르는 부분 적어두었다가 구글링으로도 해결이 안되면 ㅠㅠㅠ 선생님께 질문해야지!
객체 만들기
1. 사용자 기본 객체형
결과
let STR1 = new Object();
STR1.title 텍스트= '베스트셀러';
STR1.book = '나는 나로 살기로 했다';
STR1.person = '김수현';
STR1.year= 2020;
STR1.list= function(){
document.write(
분야 : ${STR1.title} <br> 책 제목 : ${STR1.book} <br> 저자 : ${STR1.person} <br> 연도 : ${STR1.year}
);
}
STR1.list();
<사용자 객체 기본형>
선언 객체이름 = new Object();
객체이름.속성 = 값;
객체이름.속성 = 값;
객체이름.매서드 = function(){
실행문;}
사용자 객체 기본형은 앞에 객체이름 꼭 붙이고,
= 과 ; 을 사용한다.
!응용하기!
사용자 객체 기본형을 사용해 밑의 화면을 만들어보자.
손에 익고 머리에 익을 때까지 반복만이 살길
2회
성공!
2. 리터널 형식으로 만들기
결과
let Art = {
title : '에펠탑의 신랑신부',
pic : 'images/pic01.jpg',
artist : '마르크 샤갈',
year : 1938,
Paint : function(){
document.write(
`
<dt>${Art.title}</dt>
<dd><img src="${Art.pic}".jpg
alt="${Art.title}"></dd>
<dd>${Art.artist}</dd>
<dd>${Art.year}</dd>
</dl>`
);
}}Art.Paint();
<리터널 형식으로 만들기>
var 객체이름 = {
속성명:값,
속성명:값,
매서드명 : function(){
실행문;}
};
리터널 형식은 객체이름만 선언하고 바로 리터널을 연다.
사용자 객체 기본형과 다르게 객체이름을 하나하나 붙이지 않고 속성명만 적는다.
리터널 형식에서는 : 과 , 를 사용한다.
리터널 형식에서 = 랑 ; 써서 오류 많이 났었다 ㅠㅠ 그만큼 잘 기억되겠지!
!응용하기!
위와 똑같은 그림이 화면에 나올 수 있도록 리터널 형식을 만들어보자.
결과
성공
다시 반복~!
: 을 =으로 했다가 오류났지만 역경을 헤치고 성공~!
3. 생성자 함수 만들기
생성자 함수를 만드는 과정
객체 시스템 만들기 -> 매서드(프로토타입) -> 인스턴스 -> 작동
차근 차근 해봅시다
결과는?
<객체 시스템 만들기>
function 객체이름 (매개변수,매개변수){
this. 속성 = 변수명;
this. 속성 = 변수명;
this. 매개변수 = function(){실행문}
인스턴스 만들기
만들기 1
var 인스턴스명 = new 객체(인수,인수),
new 객체(인수,인수),
new 객체(인수,인수)
만들기 2
var 배열명 = [객체(인수,인수),객체(인수,인수)]
this라는 편한 예약어가 있다니 ^_^
헷갈리지 않도록 손코딩과 노트 필기도 지속적으로 하고 있다!
백지에 써보고 틀린 부분 수정하기 반복~!
내일도 힘내쟈
