전체 글 (30) 썸네일형 리스트형 CH9. 클래스- 클래스의 고급 기능 09-2 클래스의 고급 기능 1. 상속 정사각형을 나타내는 Square이라는 클래스와 직사각형을 나타내는 Rectangle이라는 클래스를 만들고 각각에 넓이와 둘레의 길이를 구하는 메소드를 추가하자. 다음과 같이 Rectangle, Square 클래스와 각 속성과 메소드를 다르게 작성하였지만 사실상 크게 다를 것은 없다. 정사각형이 직사각형에 포함되기 때문에 Rectangle의 메소드도 Square 클래스에 적용이 가능하기 때문이다. class 클래스 이름 extends 부모클래스 이름{ } ㄴ이때 상속을 사용하면 중복해서 작성하지 않고 다른 클래스에게 속성과 메소드를 그대로 물려줄 수 있다. ㄴ Square 메소드에서 getPerimeter() 메소드와 getArea() 메소드를 선언하지 않았지만 Re.. CH9. 클래스- 클래스의 기본 기능 09-1 클래스의 기본 기능 1. 추상화 현실의 객체는 수많은 속성을 가지고 있고 그 속성들이 모두 데이터가 될 수 있다. 그러나 프로그램을 만들 때는 수많은 정보 중 필요한 데이터가 무엇인지 생각할 필요가 있다. 병원에서 사용하는 업무 프로그램을 만든다면 의사, 간호사, 환자, 예약 기록, 진료 기록 등만 사용하면 된다. 이와 같이 프로그램에 필요한 요소만 사용해서 객체를 표현하는 것을 추상화라고 한다. 2. 클래스 선언하기 객체들을 정의하고 활용해서 프로그램을 만드는 것을 객체 지향 프로그래밍이라고 한다. 클래스와 프로토타입으로 객체를 효율적으로 만들 수 있다. 클래스를 만드는 법에 대해서 알아보자. // 클래스 이름의 첫 글자를 대문자로 지정하는 것이 개발자들의 약속이다. class 클래스 이름{ .. CH8. 예외처리- 예외 처리 고급 08-2 예외 처리 고급 1. 예외 객체 프로그래밍 언어에서 예외 객체를 통해 예외가 발생한 정보를 확인할 수 있다. try catch 구문에서 catch의 괄호 안에 입력하는 식별자가 예외 객체이다. 예외 객체의 속성을 알아보자. 속성 이름 설명 name 예외 이름 message 예외 메시지 try 구문에서 예외를 발생시키고 catch 구문에서 exception 예외 객체의 name과 message 속성을 통해 예외에 대한 정보를 출력했다. 2. 예외 강제 발생 상황에 따라서 throw 키워드를 통해 예외를 강제로 발생시켜야 하는 경우도 있다. // 단순하게 예외를 발생시키는 경우 throw 문자열 // 조금 더 자세하게 예외를 발생시키는 경우 throw new Error(문자열) 예외를 강제적으로 발.. CH8. 예외 처리- 구문 오류와 예외 08-1 구문 오류와 예외 1. 오류의 종류 괄호 개수를 잘못 입력하는 등의 오류로 코드가 실행조차 되지 않는 오류를 구문 오류라고 한다. 프로그래밍 언어의 오류에는 크게 두 가지 종류가 있다. 프로그램 실행 전에 발생하는 오류 (구문 오류) 프로그램 실행 중에 발생하는 오류 (예외 or 런타임 오류) 2. 구문 오류 구문 오류는 괄호의 짝을 맞추지 않았다든지 문자열을 열었는데 닫지 않았을 때 발생하는 오류이다. 구문 오류는 웹 브라우저가 코드를 분석조차 못하므로 실행되지 않는다. 두 번째 줄에서 'Uncaught SyntaxError'가 발생하였다. 만약 프로그램이 실행된다면 첫 번째 줄은 출력되었겠지만 구문 오류로 프로그램이 처음부터 실행되지 않는 것을 알 수 있다. 3. 예외 예외 또는 런타임 오류.. CH7. 문서 객체 모델- 이벤트 활용 07-2 이벤트 활용 1. 이벤트 모델 이벤트를 연결하는 방법을 이벤트 모델이라고 한다. 1) 표준 이벤트 모델 document.body.addEventListener('click',()=>{ }) ㄴ addEventListener() 메소드를 사용하여 이벤트를 연결하는 방법을 표준 이벤트 모델이라고 한다. 2) 고전 이벤트 모델 document.body.onclick = (event) => { } ㄴ 문서 객체가 갖고 있는 on~ 으로 시작하는 속성에 함수를 할당해서 이벤트를 연결하는 방법을 고전 이벤트 모델이라 고 한다. 3) 인라인 이벤트 모델 ㄴ HTML의 요소의 on~ 속성에 자바스크립트 코드를 넣어 이벤트를 연결하는 방법을 인라인 이벤트 모델이라고 한다. 2. 키보드 이벤트 1) 키보드 이벤트.. CH7. 문서 객체 모델- 문서 객체 조작하기 07-1 문서 객체 조작하기 1. 문서 객체 html, head, body, title, h1, div, span 등을 HTML 언어에서는 요소라고 부르지만 자바스크립트에서는 문서 객체라고 부른다. 또한 문서 객체를 조합해서 만든 전체적인 형태를 문서 객체 모델이라고 부른다. 2. DOMContentLoaded 이벤트 document.addEventListener('DOMContentLoaded', ( ) => { }) ㄴ 문서 객체를 조작할 때는 DOMContentLoaded 이벤트를 사용한다. ㄴ함수 h1은 text를 매개변수로 받아 태그와 함께 출력된다. 에서 h1 함수를 사용하여 '1번째 script 태그' 를 에 추가하였다. 그러나 출력 결과에는 반영이 되어 있지 않다. 그 이유는 HTML 코드.. CH6. 객체- 객체와 배열 고급 06-3 객체와 배열 고급 1. 속성 존재 여부 확인 const wishlist={ name: 'macbook' price: 1500000 } // 방법 1 if (wishlist.name !== undefined){ console.log('name 속성이 있습니다') } else{ console.log('name 속성이 없습니다') //방법 2 if (wishlist.name){ console.log('name 속성이 있습니다') } else{ console.log('name 속성이 없습니다') //방법3 object.name || console.log('name 속성이 있습니다') ㄴ 빈 문자열은 false로 취급되므로 방법 2와 방법 3에서는 빈 문자열이 아니라는 가정하에 사용하는 것이 안전하다. .. CH6. 객체- 객체의 속성과 메소드 사용하기 1. 객체 자료형 속성과 메소드를 가질 수 있다면 객체이다. 배열과 함수는 객체라고 할 수 있다. >const a=[] undefined >a.sample=10 10 >a.sample 10 >function b () { } undefined >b.sample=10 10 >b.sample 10 ㄴ 배열인 a와 함수인 b에 sample이라는 키와 10이라는 값을 가진 속성을 추가해주었고 a.sample b.sample로 접근할 수 있었다. 따라서 배열과 함수는 객체라고 할 수 있다. > typeof(a) "object" > Array.isArray(a) true > typeof(b) "function" ㄴ 배열의 자료형을 typeof로 확인해보면 array가 아닌 object가 출력된다. 따라서 배열임을 확.. 이전 1 2 3 4 다음
