본문 바로가기

부트캠프교육중301

객체 지향 프로그래밍 #객체지향프로그래밍 ( OOP: object-oriented programming) #자바스크립트는 객체지향언어는 아니지만, 객체지향 패턴으로 작성할수있다. #OOP는 객체로 그룹화된다. 객체내에는 데이터와 기능이 함께 있다 라는 원칙에 따라 메서드와 속성이 존재한다. OOP의 4가지 주요개념을 통해 재사용성을 얻을수 있다. 캡슐화 Encapsulation 추상화 Abstraction 상속 Inheritance 다형성 Polymorphism #캡슐화 Encapsulation -데이터(속성)와 기능(메서드)을 하나의 단위로 묶는것 (느슨한결합) -느슨한결합: 코드 실행 순서에 따라 절차적으로 코드를 작성하는 것이 아니라, 코드가 상징하는 실제 모습과 닮게 코드를 모아 결합하는 것을 의미한다. -코드만 보고.. 2023. 1. 13.
클래스와 인스턴스 1 #객체 지향 프로그래밍 -하나의 모델이 되는 청사진(blueprint)를 만들고, 그 청사진을 바탕으로 한 객체를 만드는 프로그래밍 패턴이다. -청사진은 설계도 -설계도를 바탕으로 각각의 객체가 특정한 자동차 모델로 나오는 것 -현실세계를 기반으로 프로그래밍 모델을 만들때에 유용! #클래스(class) -청사진(ex. Car) -대문자로 시작하며 일반명사로 만든다.(일반적인 함수는 적절한 동사를 포함하고 소문자로 시작.) -> function Car(color){} #인스턴스 객체(instance object)=인스턴스(instance) - 청사진을 바탕으로 한 객체 (ex. 아반테, 미니) -클래스의 설계를 가진 새로운 객체 -각각의 인스턴스는 클래스의 고유한 속성과 메서드를 가지게 된다. -new 키.. 2023. 1. 13.
메서드 호출 # 메서드 호출: 객체 내에 메서드를 호출하는 방법 객체.메서드() 메서드 호출 방식을 이용할때에는 화살표 함수를 쓰지 않는다! #단순객체의 예제 let counter1 = { value: 0, increase: function() { this.value++ // 메서드 호출을 할 경우, this는 counter1을 가리킵니다 }, decrease: function() { this.value-- }, getValue: function() { return this.value } } counter1.increase() counter1.increase() counter1.increase() counter1.decrease() counter1.getValue() // 2 #똑같은 기능을 하는 카운터를 여러개 만.. 2023. 1. 13.
[DOM] 유효성검사 (회원가입창만들기) 회원가입창만들기 1. HTML을 먼저 작성한다. 2. JS에다가 작성한다. 아이디를 먼저 불러온다. let elInputUsername = document.querySelector('#username') 3. HTML에다가 메세지 일단 다 보이게 만든다 아이디는 네글자 이상이어야 합니다 이걸 수정한다. 아이디는 네글자 이상이어야 합니다 사용할수 있는 아이디입니다 일단 메세지 다 보이게 만들고 나중에 JS로 작동하면된다. 4. JS에다가 let elFailureMessage = document.querySelector('.failure-message') let elSuccessMessage = document.querySelector('.success-message') 5. CSS에다가 메세지가 사라지고 .. 2023. 1. 7.

티스토리툴바