javascript
-
[AngularJS] 6. 모듈(Module) - AngularJS 강좌Web/AngularJS 2016. 4. 1. 14:18
모듈(Module) 모듈은 대체로 관련된 기능을 하나로 묶어 다른 코드와 결합도를 줄이고 재사용성을 높이기 위해 사용합니다. 최근에 자바스크립트에서는 코드의 복잡도를 낮추기 위해 많은 자바스크립트 라이브러리를 모듈화할 필요성이 생겼고, 모듈을 이용한 개발이 거의 필수가 되었습니다. jQuery 와 같은 많은 라이브러리는 모듈 패턴을 이용해 모듈로 구현되었고 많은 웹 앱 또한 모듈 패턴을 이용해 개발되었습니다. AJS에서도 이러한 모듈을 만들 수 있는 기능을 제공하고 별도의 모듈 패턴을 구현할 필요가 없는 API를 제공합니다. 다음은 모듈 선언 코드입니다. 12angular.module("모듈이름", ["사용할 모듈", ...]) Colored by Color Scriptercs angular.module..
-
[AngularJS] 5. MVC - 모델, 뷰, 컨트롤러 - AngularJS 강좌Web/AngularJS 2016. 4. 1. 12:51
MVC - Model, View, Controller AngularJS는 자바스크립트 MVC 프레임워크 중 하나입니다. 아래는 기본적인 MVC 패턴에 대한 설명입니다. - Model 도메인에 해당하는 정보를 나타내는 오브젝트. 대체로 애플리케이션의 데이터와 행위를 포함하고 있음. - View 모델의 정보를 UI에서 보여주는 역할. 하나의 모델을 다양한 뷰에서 사용할 수도 있고, 여러 모델을 하나의 뷰에서 사용할 수 있음 - Controller 애플리케이션에서 사용자의 입력을 받아 모델에 변경된 상태를 반영. 이는 모델을 변하게 하여 결국 뷰를 갱신. 컨트롤러는 직접 뷰를 변경하는 것이 아니라 로직을 통해 모델을 변경하고 그 결과가 뷰로 뿌려지는 것. MVC 패턴을 이용하면 애플리케이션 개발과 유지보수에 ..
-
[AngularJS] 13.5 API - AngularJS 강좌Web/AngularJS 2015. 11. 20. 13:11
AngularJS API 1. AngularJS Global API AngularJS Global API는 아래와 같은 일을 수행하기 위한 global 자바스크립트 함수의 집합입니다: - 객체 비교 - 객체 열거 - 데이터 변환 Global API 함수는 angular 객체를 사용하여 접근됩니다. APIDescriptionangular.lowercase()Converts a string to lowercaseangular.uppercase()Converts a string to uppercaseangular.isString()Returns true if the reference is a stringangular.isNumber()Returns true if the reference is a number ..
-
[WebPage] 실전 웹 프로젝트 구축 !!(실전 예제) - 웹 페이지 제작 강좌Web/WebPage 2015. 7. 7. 14:32
마지막 장으로 지금까지 배워온 기술들을 토대로 실전 프로젝트를 진행해보도록 하겠습니다. 먼저 실전 예제를 통해 몸을 풀어봅시다. 클라이언트 페이지를 생성할 것입니다. 1. 먼저 Aptana Studio에서 프로젝트를 생성합니다. 프로젝트 명은 ClientExample 로 지정합니다. 2. BootStrap 모듈을 프로젝트에 끌어다 놓습니다. 3. 프로젝트 오른쪽 클릭하여 html 파일을 생성합니다. (example.html) 4. 생성된 html 파일에 아래와 같이 기본 틀 코드를 입력합니다. 1234567891011 Client Example Colored by Color Scriptercs 5. 다음으로 bootstrap과 jquery를 추가해줘야 합니다. 123456789101112131415161..
-
[WebPage] 4. 웹 프로그래밍의 필수요소, JavaScript와 jQuery - 웹 페이지 제작 강좌Web/WebPage 2015. 7. 7. 11:44
4.1 웹 스크립트 언어, JavaScript 자바스크립트는 웹 프로그래밍을 위해서는 반드시 알아야할 언어입니다. HTML 만으로는 페이지를 표현하는 것 밖에 할 수 없기 때문에, 다양한 기능을 적용한 웹을 위해서 자바스크립트를 사용하기 때문입니다. 문법도 어렵지 않고, 바로바로 실행해 볼 수 있어서 쉬운 편에 속하는 언어입니다. 이 장에서는 자바스크립트의 문법과 활용을 알아보겠습니다. 4.1.1 자바스크립트란? - 자바스크립트(JavaScript)는 HTML, CSS와 함께 브라우저가 서버나 컴파일러 등의 다른 외부 모듈 없이 직접 해석 할 수 있는 객체 기반 스크립트 언어 입니다. 객체기반이라는 말이 어려울 수 있으나 자바스크립트의 모든 것은 객체로 이루어져 있다는 것이고, 지금 어렵다해도 프로그래밍..
-
[javascript] 63. DOM Node List - 자바스크립트 강좌 JS / CSEWeb/JavaScript 2015. 6. 13. 15:42
JavaScript HTML DOM Node List 노드 목록은 노드의 집합입니다. 1. HTML DOM Node List getElementsByTagName() 메소드는 노드 목록을 반환합니다. 노드 목록은 배열 같은 노드 집합입니다. 아래 코드는 문서의 모든 노드를 가져옵니다. 1var x = document.getElementsByTagName("p");cs 2. HTML DOM Node List Length length 속성은 노드 목록의 노드의 수를 정의 합니다: 1234567891011121314151617181920 Hello World! How many paragraphs in this document? This example demonstrates the length property ..
-
[javascript] 62. DOM Node - 자바스크립트 강좌 JS / CSEWeb/JavaScript 2015. 6. 13. 15:41
JavaScript HTML DOM Elements (Nodes) 1. Creating New HTML Elements (Nodes) HTML DOM에 새로운 요소를 추가하기 위해서, 먼저 요소를 생성하고, 존재하는 요소에 덧붙이면 됩니다. 1234567891011121314 This is a paragraph.This is another paragraph. var para = document.createElement("p");var node = document.createTextNode("This is new.");para.appendChild(node); var element = document.getElementById("div1");element.appendChild(para);Colored by..
-
[javascript] 61. DOM Navigation - 자바스크립트 강좌 JS / CSEWeb/JavaScript 2015. 6. 13. 15:41
JavaScript HTML DOM Navigation HTML DOM에서, 노드 관계도를 이용하여 노드 트리를 탐사(naviagte)할 수 있습니다. 1. DOM Nodes W3C HTML DOM 표준에 따르면, 모든 HTML 문서는 노드입니다: - 전체 문서는 문서 노드입니다. - 모든 HTML 요소는 요소 노드입니다. - 텍스트 내부의 HTML 요소는 텍스트 노드입니다. - 모든 HTML 속성은 속성 노드입니다. - 모든 주석은 주석 노드입니다. HTML DOM에서, 노드 트리내의 모든 노드는 자바스크립트에 의해 접근 가능합니다. 새로운 노드는 생성되어지고, 모든 노드는 수정되거나 삭제되어 집니다. 2. Node Relationships 노트 트리의 노드는 각각 계층적 관계를 갖고 있습니다. 부모,..