자바스크립트 (28) 썸네일형 리스트형 자바스크립트와 객체 지향 프로그래밍 (Object Oriented Programming) 👾 객체 지향 프로그래밍 (OOP) 이란? Java, C++, C# 등 현대의 언어들은 대부분 객체지향 프로그래밍을 지원한다. 객체지향 프로그래밍은 실세계에 존재하고 인지하고 있는 객체(Object)를 소프트웨어의 세계에서 표현하기 위해 객체의 핵심적인 개념 또는 기능만을 추출하는 추상화(abstraction)를 통해 모델링하려는 프로그래밍 패러다임을 말한다. 객체지향 프로그래밍은 함수들의 집합 혹은 단순한 컴퓨터의 명령어들의 목록이라는 전통적인 절차지향 프로그래밍과는 다른, 관계성있는 객체들의 집합이라는 관점으로 접근하는 소프트웨어 디자인으로 볼 수 있다. → 단순히 별개의 변수와 함수로 순차적으로 작동하는 것을 넘어, 데이터의 접근과 데이터의 처리 과정에 대한 모형을 만들어 내는 방식으로 데이터와 기.. Section2 Unit2 JavaScript 객체 지향 프로그래밍 - 프로토타입 Section2 Unit2 [JavaScript] 객체 지향 프로그래밍 - 프로토타입 📌 Chapter2. Prototype • 자바스크립트의 객체지향 프로그래밍은 프로토타입을 기반으로 한다. 이번 챕터에서 배운 프로토타입을 더 공부해보며 블로그에 따로 정리를 했다. 프로토타입이라는 개념이 처음에는 이해도 잘 안되고, 쉽지 않았는데 여러번 관련 자료과 코드를 읽다보니 점점 이해가 되는걸 느꼈다. 생각보다 복잡하거나 어려운 개념도 아니라는 것도 알았다. "자바스크립트의 모든 객체는 자신의 부모 역할을 담당하는 객체와 연결되어 있는데, 이 원형객체인 부모객체를 프로토타입 객체라고 한다. 프로토타입으로부터 프로퍼티와 메서드를 상속받으며, 자바스크립트의 모든 객체는 프로토타입 객체를 가지고 있다." 더 자세한 .. Section2 Unit2 JavaScript 객체 지향 프로그래밍 - OOP와 클래스 문법 Section2 Unit2 [JavaScript] 객체 지향 프로그래밍 - OOP와 클래스 문법 📌 Chapter1. 객체 지향 • 자바스크립트는 프로토타입 기반의 언어로, 엄밀히 말하면 객체 지향 언어는 아니지만 객체 지향 패턴으로 작성이 가능하다. 객체지향에 대한 내용은 이번에 수업을 듣고 더 찾아보며 따로 정리를 했다. 아래 글을 참고하면 좋을것 같다. 자바스크립트와 객체 지향 프로그래밍 (Object Oriented Programming) 👾 객체 지향 프로그래밍 (OOP) 이란? Java, C++, C# 등 현대의 언어들은 대부분 객체지향 프로그래밍을 지원한다. 객체지향 프로그래밍은 실세계에 존재하고 인지하고 있는 객체(Object)를 소프트웨 fay-story.com 객체 지향 프로그래밍, 정.. Section2 Unit1 JavaScript 고차 함수 Section2 Unit1 [JavaScript] 고차 함수 📌 Chapter1. 고차 함수 • 자바스크립트에서 함수는 일급 객체로 취급되므로 다른 함수에 전달될 수 있다. 함수는 변수에 할당될 수 있고, 객체 속성으로 저장될 수 있다. • 고차 함수는 함수를 전달인자로 받을 수 있고, 함수를 리턴할 수 있는 함수이다. ↓ 고차함수 개념이 좀 어렵다고 생각이되어 복습하면서 공부한 내용을 정리해보았다. 고차 함수(higher order function)란 무엇일까? 👾 고차함수(higher order function)란? 고차 함수는 ① 함수를 전달인자(argument)로 받을 수 있고, ② 함수를 리턴할 수 있는 함수이다. ✔️ 1. 다른 함수를 인자로 받는 경우 다른 함수(caller)의 전달인 fay.. 디폴트 매개변수와 나머지 매개변수 (with arguments 객체) 디폴트 매개변수(default parameter)와 나머지 매개변수(rest parameter)는 ECMAScript 6부터 추가되었다. 이전 버전의 자바스크립트에서는 함수에서 매개변수의 개수를 동적으로 처리하기 위해 arguments 객체를 사용해야 했지만, ECMAScript 6부터는 나머지 매개변수를 사용해 인수를 배열 형태로 전달하는 것을 권장한다. 👾 디폴트 매개변수(default parameter) 디폴트 매개변수란 함수를 호출할 때 명시된 인수를 전달하지 않았을 경우에 사용하게 될 기본값이다. 자바스크립트에서 함수 호출 시 매개변수에 인수를 전달하지 않으면 그 값은 undefined 이 된다. 매개변수에 값을 전달하지 않아도 그 값이 undefined 가 되지 않게 하려면 함수를 선언할 때 .. 함수의 매개변수(parameter)와 인수(argument 전달인자) 👾 매개변수(parameter) 함수의 매개변수란 함수의 정의에서 전달받은 인수를 함수 내부로 전달하기 위해 사용하는 변수로 전달된 매개변수는 해당 함수의 지역변수가 된다. 💬 자바스크립트에서 함수를 정의할 때는 매개변수의 타입을 따로 명시하지 않는다. 함수를 호출할 때도 인수로 전달된 값에 대해 어떠한 타입 검사도 하지 않는다. 함수를 호출할 때 함수의 정의보다 적은 수의 인수가 전달되더라도, 다른 언어와는 달리 오류를 발생시키지 않고, 전달되지 않은 나머지 매개변수에 자동으로 undefined 값을 설정한다. function greeting(name) { console.log("hello, " + name); } greeting("Anna"); // hello, Anna 👩🏻💻 example fun.. Section1 Unit10 JS/브라우저 DOM - 유효성 검사 Section1 Unit10 [JS/브라우저] DOM - 유효성 검사 ⭐️ 과제. 유효성 검사 회원가입 Form을 만들어보며, 특정 조건에 맞는 값을 입력하도록 구현하는 연습을 했다. See the Pen 회원가입 Form (유효성검사) by sowon (@hello_FAY) on CodePen. Bare Minimum 요구사항을 완료 후 다른 기능도 추가해서 넣어보았다. ✔️ 아이디와 패스워드 뿐만 아니라 전화번호, 이메일 영역도 추가하여 구현 ✔️ addEventListener 사용 (학습자료에는 onkeyup을 사용) ✔️ 하단의 Message는 html이 아닌 js의 textContent로 내용 출력 ✔️ 회원가입 버튼 disabled 조작 ✔️ 약간의 html, css 수정 🌙 오늘의 회고 오늘.. Section1 Unit10 JS/브라우저 DOM Section1 Unit10 [JS/브라우저] DOM 📌 Chapter1. DOM 기초 • DOM(Documnet Object Model)은 HTML 요소를 Object(JavaScript Object)처럼 조작(Manipulation)할 수 있는 Model이다. 즉, JavaScript를 사용해 DOM으로 HTML을 조작할 수 있다. • 브라우저에서 작동되는 자바스크립트 코드에서는, 어디에서나 document 객체를 조회할 수 있다. console.log(document.body); console.dir(document.body); → DOM 구조를 조회할 때는 DOM을 객체의 모습으로 출력하는 console.dir가 유용하다. • Tree 구조의 DOM 📌 Chapter2. DOM 다루기 CRUD(C.. 이전 1 2 3 4 다음
