[수업 6월 3주 2일차] Javascript-6

김유민·2022년 6월 14일
0

대구 A.I. 스쿨

목록 보기
42/90

1. 학습내용

오늘은 이벤트에 대해 배워보았다.
웹 브라우저나 사용자가 행하는 동작
사용자가 웹 문서 영역을 벗어나 하는 동작은 이벤트가 아님.

이벤트 처리기
이벤트가 발생했을 때 어떤 함수를 실행할지 알려줌
태그 안에서 이벤트를 처리 할 때는 "on" + "이벤트명" 사용(예, 클릭하면 onclick 사용)

function showDetail(){
   document.querySelector("#desc").style.display = "block";
   document.querySelector("#open").style.display = "none";
   
}

위의 함수를 적어주고, 해당 버튼에 이벤트 클릭을 실행하면, 버튼을 눌렀을때 보이게끔 해준다.

<button class="over" id="open" onclick="showDetail();">상세 설명 보기</button>
coverImage.onmouseout = function(){
   coverImage.style.border = "";
}

이거는 'onclick'을 js파일에 같이 써준 형태이다. 마우스가 범위에서 벗어 났을때 선을 지우라는 뜻이다.

객체
객체는 자료를 저장하고 처리하는 기본단위
자바스크립트 프로그램에서 인식할 수 있는 모든 대상
복합 자료형(객체 안에 숫자, 문자열 등 여러가지 자료형이 포함됨)
한마디로 해당되는 자료와 자료의 index를 모아서 적어놓은 데이터 통이라고 보면 된다.

내장객체
미리 정의되어 있는 개체

  1. 문서 객체 모델(DOM): 문서 뿐만 아니라 웹 문서 안에 포함된 이미지.링크.텍스트 필드 등을 모두 별도의 객체로 관리
  2. 브라우저 객체 모델: 웹 브라우저 정보를 객체로 관리

사용자 정의 객체
: 필요할 때 마다 사용자가 직접 만드는 객체

속성(프로퍼티)
객체에 담고 있는 값
형태=>객체명. 속성명

메서드
객체의 동작을 정의한 함수(객체 안의 함수)
window는 최상위 객체이므로 생략해도 된다.
예) window.alert()가 아닌, alert()만 적어도 된다.

getter: 외부에서 읽는 것만 가능하게
setter: 외부에서 데이터를 바꿀수도 있고, 설정하는 게 가능하다.

  1. 어려웠던 점 및 해결방안
    알고는 있었지만 헷갈리는 점이 있어 왜 html상에서 js 주소를 body안의 아래에 적어주는 지 구글링 해 보았다.

웹브라우저가 HTML 문서를 해석(Parsing) 할 때

출처: https://hashcode.co.kr/questions/850/html-%EC%97%90%EC%84%9C-javascript-%EC%BD%94%EB%93%9C%EB%A5%BC-head%EC%97%90-%EB%84%A3%EC%A7%80-%EC%95%8A%EA%B3%A0-body-%EB%A7%A8-%EB%81%9D%EC%97%90-%EB%84%A3%EB%8A%94-%EC%9D%B4%EC%9C%A0%EB%8A%94-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80%EC%9A%94

DOM이랑 BOM 차이?
이벤트 발생 영역에서, body 태그 안에 거기에 대한 내용이 DOM
이벤트 발생하지 않는 브라우저의 주소창이라든지 창의 크기라든지 그런 부분에 대한게 BOM
BOM의 B가 브라우저이다.

프로토타입과 인스턴스
...객체지향언어에서 흔히 사용되는 클래스(Class)가 자바스크립트에서는 프로토타입(prototype)이며 생성자 함수가 사용된다. 다시 말해 클래스나 프로토타입을 사용하여 만들어 낸 것이 결과물이 인스턴스라고 할 수 있다.

이렇게 생성된 인스턴스는 원래의 객체인 클래스나 프로토타입이 가지고 있는 프로퍼티(property)와 메소드(method)를 모두 상속(inheritance)받는다!
출처 : https://velog.io/@nasowoo/%EC%9D%B8%EC%8A%A4%ED%84%B4%EC%8A%A4Instance

인스턴스를 만들려면 클래스에 대한 개념을 알아야 한다. 클래스는 일종의 거푸집이고, 인스턴스는 거푸집안에서 찍어내는 내용물들이라 보면 된다.

출처: https://seo-tory.tistory.com/47

이런식의 클래스를 생성하면, 바로 실행되지 않고, 인스턴스를 변수로 선언해야 실행된다.

let aStudent = new Student("dean", "harrison" , "red");

이런식으로 선언해 줘야 한다.
접근하려면
aStudent.firstName 이런식으로 입력하면 해당 요소에 접근할 수 있다.

프로토타입에 대한 이해가 어려워서 아래 사이트도 참고 했다.
출처: https://velog.io/@adam2/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-Prototype-%EC%99%84%EB%B2%BD-%EC%A0%95%EB%A6%AC

  1. 학습소감
    생소한 개념들이 많이 나왔다. 기존에 알고 있었던 것도 있었고, 몰랐던 것도 많았다.
    특히 프로토타입과 인스턴스는 바로 찾아봐도 이해가 어려워 시간을 두고 천천히 알아봐야 될 것 같았다.
profile
친숙한 개발자가 되고픈 사람

0개의 댓글