IT_susu

Asynchronous Javascript And Xml Ajax란?javascript와 JSON을 사용해 비동기 통신 방법으로 웹 애플리케이션을 제작하는 것을 말합니다. 간단히, 서버측 Scripts와 통신하기 위한 XMLHttpRequest객체를 사용하는 것을 말합니다. Ajax가 기존 기술과 다른 점은 요청/응답 과정을 통해 불필요한 부분까지 처리하지 않는다는 점입니다.쉽게 말해 필요한 부분만 별도로 요청하고, 응답받아 처리할 수 있는 거죠.모든 데이터를 업데이트 할 필요가 없으니 불필요한 대역폭 감소가 가능하고, 이는 비용 절감을 가져옵니다. ajax의 또다른 장점은 사용자가 대기하는 시간을 줄일 수 있다는 점이죠.페이지를 새로고침하지 않고도 필요한 데이터만 받아와서 내용을 업데이트 시킬 수 있으..

CSSOM이란?CSS Object Model의 약자로, 자바스크립트에서 CSS를 조작할 수 있게 해주는 API 세트입니다. 요소의 크기(Dimensions) width, height clientWidth, clientHeight ⇲ 너비/높이(width/height) + 패딩(padding) offsetWidth, offsetHeight ⇲ 너비/높이(width/height) + 패딩(padding) + 보더(border) + 스크롤바 scrollWidth, scrollHeight ⇲ 스크롤 가능한 너비/높이 영역

css에서 style 속성은 -으로 연결되지만, javascript에서는 camelCase를 사용합니다. element.styleelement.style 명령을 사용하게 되면 html 요소에 inline 속성으로 style을 적용한다. element.style.cssText = '';복수의 style 속성을 정의할 경우 element.style.cssText = '';로 작성한다. 개행을 하고 싶다면 줄 끝에 \를 넣자. 이 외에 style값을 조작하고 싶다면getAttribute('style'), setAttribute(), removeAttribute() 등이 있다.단, float는 이미 javaScript에 있으므로 cssFloat를 사용하면 된다. 근데 이렇게 가져온 style값은 inline 속..

HTML Element 속성parentNode.children (IE9+) - 자식 '요소'만 가져옴. 읽기 전용 속성. 라이브로 업데이트 됨.firstElementChild - 첫번째 자식 '요소'만 가져옴lastElementChild - 마지막 자식 '요소'만 가져옴nextElementSibling - 다음 형제 '요소'만 가져옴previousElementSibling - 이전 형제 '요소'만 가져옴attributes(이 속성을 통해 반환되는 유사 배열 집합은 라이브 상태, 즉 실시간으로 변경된다) - 해당 요소가 갖고 있는 속성을 알려줌innerHTML - 해당요소 내부 html 코드를 가져옴. HTML 텍스트 코드를 실제 DOM 노드로 변환. 해당 속성은 무겁고 비싼 대가를 치루는 HTML 해석기..

NODEELEMENT의 상위 개념. NODE 속성자식, 형제, 부모, 노드유형, 이름, 값을 알 수 있습니다.childNodes : 직계 자식 노드들을 가져온다.firstChild : 첫번째 자식lastChild : 마지막 자식nextSibling : 다음 형제previousSibling : 이전 형제parentNode : 부모 요소nodeType : 노드의 유형nodeName : 노드의 이름nodeValue : text node의 값. string type으로 반환. NODE 메서드hasChildNodes() - 자식 노드를 포함하고 있는지 여부를 boolean값으로 반환. appendChild() - 마지막 자식으로 추가insertBefore(추가할 노드, 기준노드) - 기준노드 앞에 노드 추가rem..

자바스크립트는 원래 객체지향적인 언어는 아닙니다만, prototype속성을 활용하여 상속을 구현하는 등, 객체지향 비스무리하게 사용가능합니다.es6에서는 class도 등장해서 더더욱 객체지향적인 부분을 강화하였습니다. 객체지향 프로그래밍은 추상화를 사용하여 모델을 만드는 프로그래밍입니다.객체지향 프로그래밍은 전통적인 프로그래밍 방식과 비교하여 서로 협력하는 관계를 형성하는 객체 모음을 가진 소프트웨어 설게로 볼 수 있습니다. oop에서 각 객체는 메시지를 수신하고 데이터를 처리하며 메시지들을 다른 객체로 보낼 수 있습니다.프로그래밍의 유연성과 유지 보수성을 높이기 위한 것이며 대규모 소프트웨어 프로그래밍에서 널리 사용됩니다. 객체 지향 프로그래밍의 특징은 다음 용어로 정리할 수 있습니다. Class - ..

document.querySelectorAll('p').setAttribute('title', '단락태그');

자바스크립트를 써보기도 전에 제이쿼리를 접하고, 제이쿼리 문법이 자바스크립트 문법인 줄 알았던 무지한 과거는 뒤로 한 채,다시 새롭게 자바스크립트를 공부해 봅시다. 제이쿼리 문법이 간결하고 편하긴 하지만...요즘은 옛날처럼 제이쿼리로만 모든 걸 해결하는 시대는 막을 내리고 있으니어떤 플러그인이나 라이브러리가 와도 잘 사용할 수 있도록 바닐라 자바스크립트를 익혀놉시다 :) DOM 선택 메서드DOM은 html, xml, svg 문서를 위한 프로그래밍 인터페이스입니다.문서의 구조화된 표현 양식을 트리 형태로 제공하며, dom은 트리에 대한 접근을 허용하는 메서드를 규정하고, 해당 메서드는 문서의 구조, 양식, 내용을 변경할 수 있습니다.자바스크립트 언어의 한 부분은 아니지만 웹페이지와 스크립트 혹은 프로그래밍..

lecical environment : 선언 당시의 환경에 대한 정보를 담는 객체 클로저= 함수와 그 함수가 선언될 당시의 환경정보 사이의 조합= 함수 내부에서 생성한 데이터와 그 유효범위(스코프)로 인해 발생하는 특수한 현상 / 상태= javascript의 매우 강력한 특성으로 독립적인 변수를 참조하는 함수. ( 클로저에 정의된 함수는 그것이 작성된 환경을 '기억'합니다. )- 함수 안에서 다시 함수를 return하면 최초 선언시의 정보를 유지 클로저 형성 시기모든 함수에는 실행 컨텍스트가 있습니다. 실행 컨텍스트는 해당 함수 내의 변수와 해당 함수의 부모 환경에 대한 참조를 의미하는 환경으로 구성됩니다.상위 환경에 대한 참조는 내부 함수가 작성된 범위 외부 또는 내부에서 호출되는지 여부에 관계없이, ..

* 메모리 관리를 해야 하는 이유브라우저는 가비지 컬렉션을 지원하는 프로그래밍 환경이고, 우리가 개발하는 웹자바스크립트는 브라우저 환경 기반 하에 동작하므로 일반적으로는 메모리 관리를 크게 신경쓰지 않아도 된다. 그러나 웹브라우저에서 사용할 수 있는 메모리는 일반적인 데스크톱 애플리케이션의 가용 메모리에 비해 매우 적기 때문에 (브라우저로 인해 운영체제가 다운 되는 것을 방지) 아예 무시할 수는 없는 문제다. heap(힙) -브라우저가 갖고 있는 메모리 공간 stack(스택) -함수 저장??