함디의 블로그

01. querySelector - 지정된 선택자와 일치하는 Document의 첫 번째 element를 반환. - 만약 일치하는 요소가 없다면 null을 반환. 02. querySelectorAll - 지정된 셀렉터 그룹에 일치하는 Document의 element list를 나타냄. 즉 NodeList를 반환. - 지정된 셀렉터가 없는 경우 비어있는 NodeList로 반환됨. 1. 단일 선택자 실행예제 1) click effect를 줄 요소에 id가 들어감 (clickEffect) 2) 따라서 한 개의 id 값에 이벤트를 줄 것이라면 querySelector를 사용하여 실행하면 된다. 2. 선택자 여러 요소를 줄 때의 실행예제 1) html에 선택자 여러개 주기 a. 만약 여러 요소에 click effe..

01. 이벤트 - 이벤트란 모든 행위를 말하는 것으로 프로그램에서는 미리 사용자의 행위를 예측하여 미리 사용할 수 있도록 이벤트 를 많이 준비해 놓고 있습니다. - 예를 들어 사용자가 마우스를 클릭합니다. 그러면 사용자가 클릭했다는 것을 알려줍니다. 클릭했을때 어떤 동작을 하기 위해서 click 이벤트가 준비되어 있습니다. - 이게 없다면 우리는 사용자가 마우스를 클릭했는지 부터 알아내고 그 다음 작업을 할 수 있을 것입니다. 이것이 일 종의 이벤트입니다. 02. 이벤트 핸들러 - 이벤트와 우리가 준비한 프로그램을 연결해 주는 역할을 합니다. - 우리가 해야할 일은 이벤트가 일어났을 때 수행할 작업을 준비하고 이벤트 핸들러에게 그 일을 하도록 연결해 주면 됩니다. 03. 이벤트 핸들러에 연결하는 방법 1..

01. Ajax의 개념 Ajax는 Javascript의 라이브러리중 하나이며 Asynchronous Javascript And Xml(비동기식 자바스크립트와 xml)의 약자 입니다. 브라우저가 가지고있는 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로 고치지 않고도 페이지의 일부만 을 위한 데이터를 로드하는 기법이고, Ajax를 한마디로 정의하자면 JavaScript를 사용한 비동기 통신, 클라이언트와 서버 간에 XML 데이터를 주고받는 기술이라고 할 수 있습니다. 02. 비동기(async)방식이란? 비동기 방식은 웹페이지를 리로드하지 않고 데이터를 불러오는 방식입니다. 이 방식의 장점은 페이지 리로드의 경우 전체 리소스를 다시 불러와야하는데 이미지, 스크립트, 기타 코드 등을 모두 재요청..

자바스크립트는 프로토타입 기반 언어이자 객체지향언어의 일종입니다. 쉽게 이야기해서 프로토타입이 자바스크립트의 모든 객체들의 부모가 될 수 있습니다. 자바, 파이썬과 같은 객체지향의 언어와 같은경우 클래스라는 것이 존재합니다. 자바스크립트기 객체지향언어지만, 클래스라는 개념이 없이 프로토타입이라는 것을 사용합니다. 그러다 보니 상속기능이 따로 없이 객체를 원형으로 하여 복제의 과정을 통해서 객체의 동작 방식을 다시 사용할 수 있습니다. prototype 객체 Javascript의 모든 객체는 자신의 prototype으로 부터 constructor 프로퍼티를 상속합니다. 인스턴스가 생성되는 순간 prototype의 constructor 생성자 메서드를 호출합니다. 모든 Javascript 함수는 Functi..

1. 일반함수 function 함수명() { //자바스크립트 코드문 } function addFnc(x, y) { return x+y; } - 파싱하는 단계에서 함수 변수인 addFnc가 정의되고 함수를 호출하면 런타임에 x, y가 정의됩니다. - 자바스크립트를 처음 읽을 때만 해석됩니다. - 호출문이 다른 함수보다 앞에 있더라도 호출이 가능합니다. 2. 익명함수 var addFnc function(x, y) { return x+y; } addFnc(x, y); - 이름이 없기 때문에, 접근할때 비로소 해석되고, 실행될때 함수 몸체가 해석됩니다. - 실행코드 블록을 갖는 함수를 정의해 addFnc라는 변수에 할당하고 있습니다. 이렇게 정의된 함수는 이름이 없다. 이름 대신에 변수로 호출을 할 수 있습니다..

* BOM (Browser Object Model) - 브라우저와 관련된 집합입니다. - 웹서비스 개발과 밀접한 관련이 있습니다. - DOM이 BOM 중 하나로 볼 수 있습니다. - BOM의 최상위 객체는 Window라는 객체입니다. - Window 객체의 하위 객체로 볼 수 있습니다. * DOM (Document Object Model) - '문서 객체 모델' 이렇게 해석할 수 있습니다. - 문서 객체란 , 같은 html문서의 태그들을 자바스크립트가 이용할 수 있는 객체로 만든것을 의미합니다. - 여기서 Model은 객체를 인식하는 방식으로도 볼 수 있습니다. * DOM구조 트리이미지 PS : 트리와 노드에 대해 이해를하면 습득을 하기 편리합니다. * 자바스크립트에서 문서객체를 생성한다는 의미??? -..