참조문서 : https://developer.mozilla.org/en-US/docs/web/api 1. 문서 객체 모델(Document Object Model) 문서객체모델(DOM)은 HTML문서의 구조를 나타내는 표기법이며 브라우저가 HTML문서를 조작하는 핵심이다. DOM은 트리 구조로 표현하며 노드로 구성된다. root 노드를 document라고 부른다. DOM 트리의 모든 노드는 Node 클래스의 인스턴스이다. Node 객체에는 트리구조를 나타내는 parentNode와 childNodes 속성, 자신에 대한 속성인 nodeName과 nodeType이 있다. 2. get 메소드 DOM에는 원하는 HTML 요소를 빨리 찾을 수 있는 메소드들이 있다. DOM 메소드들이 반환하는 컬렉션은 JS배열같은 ..

함수는 1급 객체(대입, 파라미터, 반환, 연산 등 제약 없음)이고 람다 언어(익명 함수나 클로저 등을 정의하기 위한 표현식)이다. 모듈화의 근간이다. 함수 객체는 Function.prototype에 연결되고, Function은 Object.prototype에 연결된다. 1. 함수 생성 함수는 함수 리터럴로 생성할 수 있다. 함수리터럴은 function 이라는 필수 예약어, 선택사항인 함수명, 매개변수의 집합(일반 변수는 undefined으로 초기화하지만, 매개변수는 넘겨진 인수로 초기화된다), 코드집합으로 구성된다. 함수문장 VS 함수 표현식 함수문장은 hoisting의 대상이 된다. 함수가 위치한 곳에 관계없이 유효범위의 가장 상위로 이동된다. 그렇기때문에 함수 호출이 함수를 정의하는 문장보다 앞에 ..

JS를 이용한 HTML include HTML에서 보통 머릿말, 꼬리말, 메뉴바 등이 흔하게 중복된다.(서버사이드언어나 동적언어를 사용하지 않는다면 메뉴가 바뀔때마다 전부다 수동으로 바꾸어 주어야한다.) 이러한 문제를 해결하는 방법에는 여러가지가 있겠지만 AJAX를 이용해서 해결해보자 1. 사용법 에 를 넣어준다. 에 를 넣고 를 호출해준다. 여기서는 navbar를 관리하고 있다. 2. includeHTML.js 코드 function includeHTML() { var z, i, elmnt, file, xhttp; z = document.getElementsByTagName("*"); for (i = 0; i < z.length; i++) { elmnt = z[i]; file = elmnt.getAttr..

자바스크립트(JavaScript)를 들어가며 1. 자바스크립트란? 약칭 js라고 하며 객체 기반의 스크립트 프로그래밍 언어이다. 주로 웹브라우저(스크립트엔진-인터프리터가 내장되어 있다)에서 사용한다. CSS가 디자인을 담당한다면 js는 클라이언트 단에서 웹페이지가 동적으로 랜더링하는 것을 담당해준다. 최근에는 node.js로 서버사이드부분에도 상당히 유명해졌다. 뿐만 아니라 앵귤러, 리액트, 리액트 네이티브는 웹과 앱개발에서 매우 상승세타고있다.. 주변에서 하도 리액트리액트거려서 리액트공부해야하나 싶을정도다ㅋㅋㅋ 결국 할거지만 2. 자바와는 관계가 있나요? 자바스크립트는 자바와 이름이 비슷해서 착각을 할 수 있다. 자바와 문법, 구문이 유사한 점도 있지만, 이는 C언어를 조상으로 물려받았기 때문이며, 두..

참조문서 : http://ejs.co/#docs 1. ejs 란? ejs는 Embedded JavaScript Template의 약자로 nodejs 진영에서 많이 사용하는 템플릿엔진이다. 문법이 단순하다. 2. 기본 문법 주석 : JS 코드 : 변수 출력(html escape 처리: >를 $gt로 변환) : 태그내부 공백 제거 : html escape안하고 변수 출력 : ejs 분할 3. nodejs와 연동(= 데이터 넘겨주기) 3-1. express 없이 연동하기 const ejs = require("ejs"); ejs.render(경로, 데이터, 옵션); 3-2. express 에서 연동하기 app.js 에서 app.set('view engine', 'ejs'); 처리하는 라우터에서 아래와 같은 로직..

목록 싱글톤 패턴 (Singletpm Pattern) 모듈 패턴 (Module Pattern) 옵저버 패턴 (Observer Pattern) 프로토타입 패턴 (Prototype Pattern) JavaScript 에서 Java 와 같이 클래스의 개념을 적용하기 위해 필요한 개념입니다. 인터페이스 역할을 할 Component 객체를 생성하고 공통변수와 공통함수를 작성합니다. Component 객체를 상속받는 Circle 객체를 생성하고, Circle 생성자에 Component가 아닌 Circle 을 집어넣어서 부모 생성자를 참조하지 않도록 하고, Circle 생성자 내부에 부모생성자를 이용하는 코드를 작성해줍니다. Circle 의 프로토타입에 Component 객체를 참조하도록 작성합니다. Circle 에..

목록 싱글톤 패턴 (Singletpm Pattern) 모듈 패턴 (Module Pattern) 옵저버 패턴 (Observer Pattern) 프로토타입 패턴 (Prototype Pattern) 상대 클래스나 객체에 의존하지 않으면서 데이터 변경을 통보하고자 할 때 사용합니다. Subject, Observer 를 선언합니다 - Subject : 변경과 감지를 통보하여 Observer들을 관리하는 역할 - Observer : 변경과 감지를 통보받는 역할 작성코드 var Subject = function() { var observers = []; return { subscribeObserver: function(observer) { observers.push(observer); }, unsubscribeObs..

목록 싱글톤 패턴 (Singletpm Pattern) 모듈 패턴 (Module Pattern) 옵저버 패턴 (Observer Pattern) 프로토타입 패턴 (Prototype Pattern) 특정 구성요소를 다른 구성요소와 독립적으로 유지하는 패턴을 말합니다. Module 모듈을 생성합니다 getTitle : 내부의 title 변수를 불러올 수 있습니다. 모듈을 이용하는 코드에서는 내부의 title 변수와 printTitle 함수에 접근할 수 없고 정해진 함수인 getTitle를 통해서만 접근할 수 있습니다. 작성코드 var Module = function(){ var title = 'Module 패턴'; var printTitle = function (){ console.log('제목 : ' + ti..

Wrapper 1. 레퍼(wrapper)란? --> jQuery의 시작점jQuery(엘리먼트 오브젝트 | 'CSS스타일 선택자')붉은색으로 표시한 부분이 레퍼, 인자로 전달된 요소들에 jQuery의 기능성을 부가해서 반환 2. 레퍼의 안전한 사용$(엘리먼트) 와 jQuery(엘리먼트)는 같은 의미이지만 $를 사용하는 다른 라이브러리(다른 라이브러리도 $를 쓴다.)들과의 충돌 때문에 다음과 같은 방법을 사용한다.(1) 첫번째 방법: $대신 고유명사 jQuery를 쓴다. (2) 두번째 방법 3. 제어 대상을 지정하는 방법- jQuery( selector, [context] )([context]는 옵션이다.)- jQuery( element )예제 1. jQuery( selector, [context] ) te..

Selector 문서 구조에서 원하는 HTML 노드를 선택하기 위해 Selector를 사용한다. 1. 기본 선택자(Basic)$('h2')웹 페이지에서 태그를 모두 선택 $('.group')웹 페이지에서 class 속성이 group인 것을 모두 선택 $('#main')웹 페이지에서 id 속성이 "main"인 것을 선택 $('p, div, #nav')웹 페이지에서 , , id 속성이 nav인 노드를 모두 선택 $('*')웹 페이지에서 모든 노드를 선택 2. 계층 선택자(Hierarchy)$('div#container li')id 속성이 #container인 태그의 자손 태그중 태그를 모두 선택 $('div > p') 태그의 자식 태그 중 (자손태그는 포함하지 않음) 태그를 선택 $('#first + li'..