전체 글 (177) 썸네일형 리스트형 Javascript 기초(6) - 상속 및 메서드 1) Javascript 상속 1-1) 객체지향 1-2) Prototype +) 호이스팅 / this 2) Javascript 메서드 및 생성자 함수 2-1) Date() 2-2) indexOf() +) 삼항 연산자 1) Javascript 상속 1-1) 객체지향 // 객체지향 프로그래밍 // 객체지향은 서양의 세계관을 가지고 있는데 // 이는 일종의 이분법적 사고(추상적 / 구체적)라고 볼 수 있다!! // 예를 들어 마우스라는 이미지(유선 마우스, 무선 마우스, 게이밍 마우스 등)를 그리면 // 각각 다르지만 마우스라는 특정 기능, 속성은 모두 다 같을 것이다!! // 추상적인 것(class)을 만든 후 그것을 통해 구체적인 것(instance)을 만든다!! /* class Chair { this.s.. Javascript 기초(5) - 객체 및 메서드 1) Javascript 함수 1-1) 함수 복습 - fibonacci 수열 2) Javascript 객체 2-1) 메서드 및 this 예약어 2-2) setter와 getter 2-3) 생성자 함수 2-4) class 1) Javascript 함수 1-1) 함수 복습 - fibonacci 수열 // 피보나치 수열을 구하는 함수 : 메모이제이션 기법을 사용한 함수 let memo = {}; function fibo(n) { let result; if (n in memo) { // memo는 객체이고, n은 매개변수임 result = memo[n]; } else { if (n == 1 || n == 2) { result = 1; } else { result = fibo(n - 1) + fibo(n - 2).. Javascript 기초(4) - 함수 및 객체 1) Javascript 함수 1-1) 함수 복습 1-2) 함수 표현식 1-3) 화살표 함수(arrow function) 1-4) 콜백 함수(callback function) 1-5) 콜스택 / 콜백 함수 활용 예시 2) Javascript 객체 2-1) 객체 생성 방법 2-2) 점 표기법 / 응용 방법 2-3) in 연산자 / for in 문 2-4) Spread Operator(스프레드 연산자) 2-5) 참조형 데이터 타입 활용 예시 1) Javascript 함수 1-1) 함수 복습 // 복습 // 함수 선언 /* 함수 호이스팅 : 함수 호출 구문이 함수 선언문보다 위에 있어도 코드가 정상 실행됨 (함수 선언문이 최상단으로 끌어올려저서 코드 형태 상에서는 호출 구문이 상단에 있는 것처럼 보여도 내부에.. Javascript 기초(3) - 함수 1) Javascript 함수 1-1) 함수 사용 이유 1-2) 함수 선언 및 호출 1-3) 매개변수 / 인자 1-4) return 1-5) 콜스택 / 힙 1) Javascript 함수 1-1) 함수 사용 이유 /* 함수 중복코드를 피하기 위해서 함수를 사용함!! */ // example : 동일한 결과를 출력하는 코드 간에도 함수를 사용하지 않을 시 아래와 같이 코드 양이 많아지고, 자연스레 코드 효율성 또한 떨어짐!! function showMessage() { console.log("hello world! I am developer."); } showMessage(); showMessage(); showMessage(); showMessage(); showMessage(); console.log(".. Javascript 기초(2) - 기본 문법 및 예시 코드 정리 1) Javascript 기본 문법 1-1) 변수 1-2) 데이터 타입 1-3) 연산자 1-4) prompt - I/O 1-5) 조건문 - if문 1-6) 반복문 - for문 2) 코드 실습 1) Javascript 기본 문법 1-1) 변수 // Javascript 변수 /* 예약어 var - hoisting let const */ var num = 1; let num2 = 2; num2 = 4; // let: 재선언 불가능, 재할당 가능 // 재선언하고 나서 에러 메시지 확인하기 const num3 = 3; // const: 재선언 불가능, 재할당 불가능 // 재선언과 재할당 시 에러 메시지 각각 확인하기 /* 예약어로 변수명을 만들 수 없음!!(ex. const로 변수명을 할 수 없음) */ 1-2).. Javascript 기초 - 프로그래밍 기초 및 Javascript 기초 문법 1) 프로그래밍 기초 1-1) 프로그래밍 언어 구분 1-2) Javascript 특징 2) Javascript 기초 문법 2-1) 변수 2-2) 데이터 타입 2-3) 연산자 2-4) 조건문 - if문 2-5) 반복문 - for문 1) 프로그래밍 기초 1-1) 프로그래밍 언어 구분 객체지향 언어: C++, JAVA 함수형 언어: Python Prototype 언어: Javascript 해당됨 → 객체지향과 함수형을 둘 다 할 수 있기에 효율적이지 못함!! Compile 언어: 코드를 컴퓨터가 이해할 수 있는 형태로 변환시켜줌( compiler = 번역기 ) → C++과 JAVA가 해당되며, 해당 언어는 코드 전체를 한 번에 해석하여 실행함 Interpreter 언어: 코드를 한 줄 한 줄 해석하여 바로 실.. HTML & CSS 실습(3) - 로그인 form, menu, media query 1) 로그인 form 1-1) display: flex; 1-2) form 태그 1-3) 로그인 form 구현 2) menu 2-1) 가상 선택자 2-2) menu 구현 3) media query 4) 코드 실습 1) 로그인 form 1-1) display: flex; display: flex;를 적용할 시 두 가지 축이 있는데, 하나는 중심축(main axis)이고 다른 하나는 반대축(cross axis)이다. 그리고 이 축은 수평 방향이냐 수직 방향이냐에 따라 바뀔 수 있다. flex-direction: row / column / row-reverse / column-reverse ; → 아이템들(자식 element의 영역)의 정렬을 row 방향( inline 속성과 동일하다고 이해하면 됨 )으로 하.. HTML & CSS 실습 및 추가 skill(2) 1) display: flex; 2) 추가 skill 2-1) 속성 선택자 ~ 2-2) !important 2-3) class 여러 개 지정 2-4) input: focus{} 3) tab menu 4) 게시판 5) layer popup 1) display: flex; 이번에는 앞서 자주 사용한 float 속성의 여러 기술적 이슈들을 보완함과 동시에 더 사용이 편리한 display:flex;에 대해 알아보도록 하자. 지금까지는 레이아웃을 구성할 때 주로 position과 float을 이용하여 구성하였다. 혹은 부모, 자식 관계에 있는 element의 경우, 아래와 같이 부모 element에 padding을, 자식 element에 margin을 부여하여 콘텐츠들을 정렬하였다. display: flex; 적.. 이전 1 ··· 18 19 20 21 22 23 다음
