본문 바로가기

전체 글

 (94)
객체지향의 오해와 진실 -앨리스의 키,위치,음료 = 정적프로퍼티 but, 시간의 흐름에 따라 프로퍼티의 값은 변함 (동적) -행동: 다른 객체로 하여금 간접적으로 객체의 상태를 변경하는 것을 가능하게함 -객체는 자신의 상태 변경 협력과정(메세지)에서 다른 객체의 상태도 변경 객체가 외부에 노출하는 것은 행동뿐 외부에서 객체에 접근할 수 있는 유일한 방법 역시 행동 *상태는 외부에 노출x ex) drinkBeverage() -상태를 잘 정의된 행동 뒤로 캡슐화하는 것은 객체의 자율성을 높이고 협력을 유연하게 만든다. -프로퍼티 타입은 객체나 단순한 값 중 하나가 될 수 있다고 설명 객체는 가변상태, 객체는 상태를 가지며 상태는 변경가능 -상태를 중심으로 객체를 바라보지마라 행동이 상태를 결정한다. 객체의 행동을 먼저 결정하고 그..
JQuery .attr() .prop()의 차이 .attr()는 HTML의 속성을 취급 속성은 HTML 요소에 대한 추가 정보를 전달 여기서 id, type, value는 속성 attr은 setAttribute, getAttribute에 대응되는 메소드 ex) opentutorials .prop()는 JavaScript 프로퍼티를 취급 ex) opentutorials 제이쿼리로 엘리먼트 제어했을때 좋은점 -코드간결 -프로퍼티의 이름으로 어떤 것을 사용하건 올바른 것으로 교정해준다
JS 이벤트 전파 중단하는 방법 1. event.preventDefault( ) : 이벤트를 취소할 수 있는 경우, 이벤트의 전파를 막지않고 그 이벤트를 취소 2. event.stopPropagation( ) : 이벤트가 상위로 전파되지 않도록 중단(현재 이벤트 이후의 전파 중단시킴) HTML 상에서 사용자 이벤트는 상위로 전파된다 ex) ul>li>a 일때 a 클릭하면 클릭이벤트가 li, ul에도 전달됨 이걸 막는게 event.stopPropagation( ) 3. event.stopImmediatePropagation( ) : 현재 이벤트가 상위뿐 아니라 현재 레벨에 걸린 다른 이벤트도 동작하지 않도록 중단 4.return false :return false를 붙히면 기존에 있던 기능들이 사라짐. a태그를 클릭했을때 다른페이지로 넘..
iframe 효과적으로 다른 HTML 페이지를 현재 페이지에 포함시키는 중첩된 브라우저로 iframe 요소를 이용하면 해당 웹 페이지 안에 어떠한 제한 없이 다른 페이지를 불러와서 삽입 할 수 있다. 문법 예시 Google Maps Embed API 사용
HTML html5 특징 HTML의 새로운 버전으로 Client Side Technology 기술의 중심이 되는 마크업 언어 html5 특징 1. 멀티미디어 지원 - 플러그인 없이 Audio / Videp 재생 지원 2. 그래픽지원 - 2차원 그래픽(2D) . SVG 태그를 이용한 2차원(2D) 벡터 그래픽 지원 . 자바스크립트 캔버스(CANVAS)를 사용한 2차원 래스터 그래픽 지원 - 3차원 그래픽(3D) . CSS3를 사용한 3차원 그래픽 구현 . 자바스크립트 WebGL을 사용한 3차원 구현 3. 통신 - 실시간 서버와의 양방향 통신 지원 4. 장치접근 - HTML5가 구동되는 클라이언트 장치 접근이 가능해짐(GPS / Camera 등) 5. 오프라인 저장 - HTML5가 구동되는 클라이언트에 데이터 저장소 제공 가능 6...
JS 정규표현식 정규표현식: 문자열을 처리하는 방법 특정한 조건의 문자를 검색하거나 치환하는 과정을간편하게 처리 할 수 있도록 하는 수단 정규표현식에서 패턴을 만드는 두가지 방법 1. 정규표현식 리터럴 let pattern = /'a'/ a는 찾고자하는 문자 2. 정규표현식 객체 생성자 let pattern = new RegExp('a'); a는 찾고자하는 문자 ->두 방법 모두 찾고자하는 정보를 pattern이라는 변수에 저장 정규표현식을 통해서 할 수 있는 3가지 1. 패턴에 맞는 정보 추출 Ex) 문자열에서 URL 추출해내 RegExp.exec() let pattern = /'a'/; - console.log(pattern.exec('abcdef')); // ["a"] ->문자열 a를 값으로 하는 배열을 리턴 - ..
JS 비동기처리 callback 함수 자바스크립트는 기본적으로 동기적 setTimeout 은 비동기적 callback도 동기적, 비동기적 두가지의 경우가 있다. 동기적 callback ex) console.log('1'); setTimeout(() => console.log('2'), 1000); console.log('3); function printImmediately(print){ print(); } printImmediately(function(){ console.log('hello'); } ) 비동기적 callback ex) function printWithDelay(print, timeout){ setTimeout(print, timeout); } printWithDelay( ()=> console.log('동기적 callback..
JS class class 생성자 함수 함수가 특정기능을 하는 로직을 묶을 때 사용하는 문법이라면, 연관있는 변수와 함수를 하나로 묶을 때 사용하는 문법 -> 객체 단위로 코드를 그룹화 할 수 있으며 코드를 재사용하기 위해서 * class 사용방법 Class Person { //constructor constructor(name, age){ //fields this.name = name; this.age = age; } //method speak(){ console.log(`${this.name} : hello!`); } } +fields: 이름, 나이같은 속성 method: 행동 * class 사용해서 object 만들기 const soyeong = new Person('soyeong', 27); console.log..

티스토리툴바