매일코딩/자바스크립트 개념21 [자바스크립트 객체지향] 3 객체와 프로퍼티 종류 정리 객체의 이해 자바스크립트 객체는 프로퍼티가 키/값 쌍으로 되어 있는 만큼 해시 맵에 빗대어 생각하면 이해하기 쉽다. 객체 프로퍼티에 접근할 때는 점 표기법 또는 각괄호 표기법 중 무엇을 해도 상관없다. 프로퍼티에 값을 할당하면 언제든 객체에 새 프로퍼티를 추가 할 수 있으며 delete 연산자를 사용하면 언제든 프로퍼티를 제거할 수 있다. 프로퍼티의 존재 여부는 프로퍼티 이름과 객체를 in 연산자와 함께 사용하면 알 수 있다. 이때 고유 프로퍼티만 확인하고 싶다면 모든 객체에 대 포함되어 있는 hasOwnProperty()를 사용하면 된다. 모든 객체 프로퍼티는 기본적으로 열거 가능하다. 열거 가능하다는 말은 for-in 반복문이나 Object.keys()를 사용할 때 볼 수 있다는 뜻이다. 프로퍼티는 .. 2017. 6. 22. [자바스크립트 객체지향] 2 자바스크립트 함수가 독특한 이유 함수자바스크립트에서 함수는 객체이다. 다른 객체에는 없는 함수만의 특성을 꼽으라면 call이라는 내부 속성을 들 수 있다. 내부속성은 코드로 접근할 수 없지만 코드의 동작을 정의한다. 선언과 표현식함수에는 두가지 리터럴 형태가 있다. 1.함수 선언 function add(num,num2){ return num1 + num2} 2.함수 표현식 var add = function add(num,num2){ return num1 + num2} *참고위의 두 함수는 비슷하지만 한가지 중요한 차이점이 있다.함수선언은 코드가 실행될 때 컨텍스트 상단에 끌여올려진다. 다시 말해 함수를 호출하는 코드가 함수를 선언한 코드보다 앞에 있어도 에러가 발생하지 않는다는 뜻이다. var result = add(5,5); func.. 2017. 6. 20. [자바스크립트 객체지향] 1 원시타입과 참조타입 정리 원시타입과 참조타입 자바스크립트에서는 원시 타입(primitive type) 참조 타입(reference type)이라는 두 가지 자료형을 제공한다.숫자, 불린값, null과 undefined는 원시 타입이다. 객체, 배열, 함수는 참조 타입이다.원시 타입 데이터는 변수에 할당될 때 메모리 상에 고정된 크기로 저장되고 해당 변수가 원시 데이터 값을 보관한다.참조 타입 데이터는 크기가 정해져 있지 않고 변수에 할당될 때 값이 직접 해당 변수에 저장될 수 없으며, 변수에는 데이터에 대한 참조만 저장된다. 참조는 참조 타입 데이터의 주소이지 해당 데이터의 값이 아니다.원시 타입 변수 복사각 변수 간에 원시 타입 데이터를 복사할 경우 데이터의 값이 복사된다. 다음 예제를 보자.var x = 100; // 원시 .. 2017. 6. 19. [생활코딩 함수] 함수 호출 5 1. 2. 2017. 6. 5. [생활코딩 함수] arguments 4 1. 2. 2017. 6. 2. [생활코딩 함수 ] 클로저 3 1 2 3. 4. 5. 6. 2017. 6. 1. [생활코딩 함수] 값으로서의 함수 2 1. 2 3 4. 2017. 5. 31. [생활코딩 함수] 유효범위 1 2 3 4. 5 6 7. 8 9. 2017. 5. 30. [자바스크립트 기초]제이쿼리 4 폼 요소 선택하기셀렉터설명:buttonbutton 및 type 특성값이 button인 요소들을 리턴:checkboxtype 특성이 checkbox인 input 요소들을 리턴:checked체크박스 및 라디오 버튼들중 체크된 요소들 리턴:disabled비활성화된 모든 요소 리턴:enabled활성화된 모든 요소 리턴:focus현재 포커스를 가진 요소 리턴:file모든 파일 입력 요소들을 리턴한다.:image모든 이미지 요소들을 리턴한다.:input모든 button, input select textarea 요소들을 리턴한다.:password모든 비밀번호 입력 요소들을 가져온다.:radio모든 라디오 입력 요소들을 가져온다.:reset모든 리셋 버튼 요소들을 가져온다.:selected선택된 모든 요소들을 가져온다.. 2017. 3. 5. [자바스크립트 기초]제이쿼리 3 event 객체모든 이벤트 처리 함수는 event 객체를 전달받는다.이 객체는 발생한 이벤트와 관련된 메서드와 속성을 가지고 있다. 예)$(‘li’).on(‘click’,function(e){ eventType = e.type;}); 1.event 객체에 매개변수 이름을 지정한다.2.함수 내에서 event 객체를 참조하기 위해 이 이름을 사용한다.3. 익숙한 마침표 표기법을 이용하여 객체의 속성과 메서드를 사용한다. 속성설명type이벤트의 종류which불려진 버튼이나 키data이벤트가 발생했을 때 함수에 전달된 추가 정보들을 가지고 있는 객체표현식target이벤트가 발생한 dom요소pageX뷰포트의 왼쪽 모서리로부터 마우스까지의 위치pageY뷰포트의 상단으로부터 마우스까지의 위치timeStamp 메소드설.. 2017. 3. 4. [자바스크립트 기초]제이쿼리 2 요소의 콘텐츠 가져오기.html() 메서드와 .text() 메서드는 요소의 콘텐츠를 조회하는 기능과 수정하는 기능을 모두 제공한다. 이 페이지는 요소의 콘텐츠를 조회하는 방법에 초점을 맞춘다. .html()jQuery 객체집합으로부터 정보를 조회할 목적으로 이 메서드를 호출하면, 첫 번째 요소와 그 하위 노드들의 html 코드만을 얻게 된다. 예) $(‘ul’).html(); 메서드는 다음의 코드를 리턴한다. fresh figs pine nuts honey balsamic vinegar 반면, $(‘li’).html() 메서드는 다음 코드를 리턴한다.fresh이 경우 첫 번째 요소의 콘텐츠만 리턴된다.모든 요소값을 조회하려면 .each() 메서드를 사용한다. .text()jQuery 객체집합으로부터 텍스.. 2017. 3. 3. [자바스크립트 기초]제이쿼리 1 #요소의 선택jquery는 dom 쿼리 대신 간편하게 css 스타일의 셀렉터를 이용하여 요소를 선택하는 방법을 제공한다. #작업실행jqury는 dom 트리를 수정하기 위한 기능이나 요소에 애니메이션 효과를 적용하는 기능, 여러 요소에 대해 루프를 수행하는 기능 등을 모두 한줄의 코드로 작업할 수 있는 메서드를 제공한다. #이벤트 처리jquery는 구 버전의 브라우저를 특별히 고려하지 않고도 손쉽게 선택된 요소에 이벤트 리스너를 등록할 수 있는 메서드를 제공한다. jquery 란 무엇인가? jquery는 웹페이지에 포함시킬 수 있는 자바스크립트 파일이다. css 형식의 셀렉터를 이용하여 요소를 찾을 수 있으며, 그런 후에는 jqeury 메서드들을 이용하여 해당 요소에 원하는 작업을 수행할 수 있다. 1.c.. 2017. 3. 2. [자바스크립트 기초 ]이벤트의 종류와 개념 2 이벤트의 흐름HTML 요소는 다른 요소의 내부에 중첩된다. 그래서 링크에 마우스를 가져가거나 클릭하면 그 부모 요소에도 마우스를 가져가거나 클릭한 셈이 된다.이벤트 버블링이벤트가 사용자의 동작에 직접적으로 영향을 받은 특정 노드로부터 시작하여 가장 무관한 요소를 향해 바깥으로 전파되어 나가는 방식이다. 대부분의 브라우저가 기본적으로 지원하는 방식이다. => => => => 이벤트 캡쳐링이벤트가 가장 바깥쪽의 노드로부터 시작해서 안쪽으로 전파되어 들어오는 방식이다. => => => => 현재의 모든 브라우저들은 기본적으로 이벤트 캡쳐링 대신 이벤트 버블링을 사용한다. 리스너를 사용하는 경우 addEventListener () 메서드의 마지막 매개변수에 설정하는 값에 따라 발생한 이벤트의 전파 방향을 선택할.. 2017. 3. 1. [자바스크립트 기초] 함수 이벤트 DOM을 이용한 초미니 프로젝트 1 그동안 정리했던 자바스크립트 내용으로 아주 작고 작은 프로젝트를 만들어 보자!이 시점에서 계속 이론만 배우면 지루하다.작은 프로젝트로 흥미를 돋우기 위해서 배웠던 내용을 응용해서 만들 수 있는 과제(?)를 기획해 보았다.아래코드를 보기 전에 한번 생각 해보세요~ 테이블 칸에 있는 사진에 마우스를 올리면 해당 사진이 확대되어 나타난다. [사진에 마우스를 올려보세요]123456789 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273 table{width:500px;height:500px;} td{border:sol.. 2017. 2. 28. [자바스크립트 기초 ]이벤트의 종류와 개념 1 자바스크립트 이벤트 종류 UI 이벤트 – 사용자가 웹페이지가 아닌 브라우저의 UI와 상호작용할 때 발생이벤트설명load웹 페이지의 로드가 완료되었을 때unload웹 페이지가 언로드 될 때(새로운 페이지를 요청한 경우 )error브라우저가 자바스크립트 오류를 만났거나 요청한 자원이 없는 경우resize브라우저의 창 크기를 조정했을 때scroll사용자가 페이지를 위아래로 스크롤 할 때 키보드 이벤트 – 사용자가 키보드를 이용할 때 발생한다.이벤트설명keydown사용자가 키를 처음 눌렀을 때 keyup키를 땔 때 keypress사용자가 눌렀던 키의 문자가 입력되었을 때 마우스 이벤트 – 사용자가 마우스나 터치화면을 사용할 때 발생이벤트설명click사용자가 동일한 요소 위에서 마우스 버튼을 눌렀다 땔 때dbcl.. 2017. 2. 26. [자바스크립트 기초]DOM 문서객체모델의 이해 2 DOM탐색하기 페이지에 요소 노드가 존재한다면 다음 5가지 속성을 이용하여 다른 요소들을 선택할 수 있다. 이런 과정을 DOM 탐색이라고 한다. parentNode – 이 속성은 부모 노드를 찾는다.previousSibling – 이전 노드를 찾는다.nextSibling - 다음 노드를 찾는다firstChild - 첫 번째 자식 요소를 찾는다.lastChild – 마지막 자식 요소를 찾는다. (요소가 존재 하지 않을 때는 null 이 리턴된다.)(IE를 제외한 대부분의 브라우저들은 요소 사이의 공백 문자를 텍스트로 취급하기 때문에 리턴하는 값은 브라우저에 따라 달라지게 된다.) 이전&다음 이웃 요소.HTML List Buy groceries fresh figspine nutshoneybalsamic vi.. 2017. 2. 25. [자바스크립트 기초]DOM 문서객체모델의 이해1 문서 객체 모델은 브라우저가 HTML 페이지의 모델을 생성하고 이 페이지가 브라우저 창에 보여지는 동안 자바스크립트를 이용하여 웹페이지의 내용에 접근하고 수정하기 위한 방법을 명시하고 있다. HTML 페이지에 대한 모델 구성하기브라우저는 웹 페이지를 로드한 후 , 이 페이지에 대한 모델을 메모리에 생성한다. HTML 페이지에 접근하고 수정하기DOM은 모델 내의 각 객체에 접근하고 내용을 수정하기 위한 속성과 메서드들을 정의하고 있다. 내용을 수정하면 브라우저에서 사용자가 보게 될 내용이 변경된다. DOM은 브라우저가 DOM트리를 이용하여 이 모델을 구성하는 방법을 명시한다.DOM이 객체 모델이라고 불리는 이유는 모델이 객체를 이용하여 구성되기 때문이다. 웹 페이지에 대한 모델로서의 DOM 트리브라우저는 .. 2017. 2. 24. [자바스크립트 기초]함수 메서드 객체 함수와 메서드함수는 특정 작업을 수행하기 위해 필요한 일련의 구문으로 구성된다. 메서드는 함수와 동일하지만 객체 내에 만들어진다는 점이 다르다. 객체실제 세계를 모델화하기 위해 객체를 사용한다.객체는 속성과 메서드로 구성된다. 내장객체브라우저는 인터랙티브한 웹 페이지를 개발하기 위한 도구의 역할을 수행하는 다양한 종류의 객체들을 제공한다. 함수란 무엇인가?함수란 어떤 특정 작업을 수행하기 위해 필요한 일련의 구문들을 그룹화하기 위한 개념이다. 만일 스크립트의 다른 부분에서 동일한 작업을 반복적으로 수행해야 한다면 함수를 재사용할 수 있다. 기본적인 함수var msg = '안녕하세요'; //함수 생성function updateMessage() { var el = document.getElementById(.. 2017. 2. 23. [자바스크립트 기초] 자바스크립트의 기본 명령어 구문: 스크립트는 컴퓨터가 단계별로 수행할 수 있는 일련의 명령이다.이 중 각각의 명령이나 단계를 구문이라고 한다.구문은 세미콜론으로 끝나야 한다. //구문var today = new Date();var hourNow = today.getHours();var greeting; // { } 코드블록의 시작과 끝을 알려준다. 구문은 코드 블록 내에 작성한다. if (hourNow > 18) { greeting = 'Good evening!';} else if (hourNow > 12) { greeting = 'Good afternoon!';} else if (hourNow > 0) { greeting = 'Good morning!';} else { greeting = 'Welcome!';}document.w.. 2017. 2. 18. [자바스크립트 기초] 스크립트 왕기초 개념 2 자바스크립트 언어는 html과 css와 함께 사용된다. 콘텐츠 계층.html 파일페이지의 구조를 만들고 의미를 부여한다. {css}콘텐츠가 보여지는 방법을 서술한다.(배경, 테두리, 글꼴, 색상 등) javascript()페이지의 동작을 변경하며 역동성을 부여한다. * 기본적인 자바스크립트 코드 작성하기 지금은 몇시? 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687 인사 지금은 몇시? var today =new Date(); var hourNow=today.g.. 2017. 2. 17. [자바스크립트 기초] 스크립트 왕기초 개념 1 기초중의 기초 !! 컴퓨터는 데이터를 이용하여 세상을 표현하기 위한 모델을 만든다! 호텔, 자동차 같은 객체는 개발자가 데이터만 잘 만들고 전달해 주면 컴퓨터는 우리가 원하는 명령을 실행해서 작업을 수행할 수 있다. 객체와 속성컴퓨터에서 실제 세계에 존재하는 물리적인 물체는 다양한 종류(type)의 객체(object)로 표현된다. 개발자라면 그 객체들을 인스턴스라고 표현할 것이다.객체는 다음과 같은 정보를 가진다. 속성, 이벤트, 매서드 이 세 가지가 결합하여 객체를 표현하는 모델을 구성한다. 속성(특징): 자동차를 예를 들면 자동차의 속도, 색상, 크기 등이 속성이다. 속성은 이름과 값, 즉 name과 value로 구성된다. 예) 자동차의 속성이름 : 값제조사: 현대속도: 60km색상: 검정 실제 세계.. 2017. 2. 16. 이전 1 다음
