WEB 9

[Angular JS] Controllers

Angular JS controllers Controller는 "ng-controller"라는 directive를 사용하고 javascript 생성자에 의해 만들어진 javascript object이다. 역할은 angular JS aplication에서 데이터를 조작한다. 아래의 예제를 보자. First Name: Last Name: Full Name: {{fullName()}} function personController($scope) { $scope.firstName = "John", $scope.lastName = "Doe", $scope.fullName = function() { return $scope.firstName + " " + $scope.lastName; } } 위의 예제를 보면 "p..

WEB/Javascript 2014.10.29

[Angular JS] Expressions & Directives

Angular JS intro Angular JS는 javascript 프레임워크로 javascript로 쓰여진 라이브러리이다. 지시자(Directives)를 이용하여 HTML attribute를 확장하고 표현식(Expressions)를 사용해 HTML에 데이터를 binding한다. Angular JS를 사용하기 위해서는 아래와 같은 줄을 추가하여 Angular JS 라이브러리를 추가해주면 된다. Angular JS는 MVW(Model - View - Whatever) 패턴에 특화 되어 view와 controller를 를 분리하여 DOM을 구성하는 HTML과 controller를 구성하는 JS를 이원화했다. 그리고 scope를 통해 model의 변화를 감지하여 DOM에 반영할 수 있도록 구현되어 있어 개..

WEB/Javascript 2014.10.29

[jQuery] AJAX (Asynchronous Javascript And XML)

load method $(selector).load(URL, data, callback); load method의 syntax는 위와 같다. 첫번째 매개변수인 'URL'은 필수 인자이며, 나머지 두 매개변수는 선택 인자이기 때문에 추가해도 되고 안해도 된다. 그리고 콜백 함수의 매개변수는 다음과 같다. responseTxt - load에 성공하면 결과값을 가지고 있다.statusTxt - load의 결과 상태를 가지고 있다.xhr - XMLHttpRequest 객체를 가지고 있다. 콜백을 사용한 함수의 예제는 아래와 같다. $("button").click(function(){ $("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){ if(..

WEB/Javascript 2014.10.29

[jQuery] add/remove HTML element

Add element (append / prepend / after / before) HTML element를 새로 추가하는 방법을 알아보자. append/prepend는 HTML content를 추가할 때 쓴다. HTML element의 끝에 추가하고자 할 때는 append()를 사용한다. 반대로 앞에 추가하고자 할 때는 prepend()를 사용한다. 여러 element들을 추가할 때는 append()와 prepend()의 인자를 여러 개로 주면 된다. $("p").append("Some appended text.");$("p").prepend("Some prepended text."); function appendText() { var txt1 = "Text."; // Create element wi..

WEB/Javascript 2014.10.22

[jQuery] get/set HTML content/attribute

jQuery는 DOM(Document Object Model)을 조작하고 접근하기에 매우 편리한 방법을 제공한다. 이번 글에선 DOM에 접근하고 조작하는 법에 대해서 알아볼 예정이다. Get content element의 text content에만 접근하기 위해서 text()를 사용한다. element의 HTML content 자체에 접근하기 위해서는 html()을 사용한다. 이외에더 form element의 value에 접근하려면 val()을 사용한다. $("#btn1").click(function(){ alert("Text: " + $("#test").text()); }); $("#btn2").click(function(){ alert("HTML: " + $("#test").html()); }); $..

WEB/Javascript 2014.10.22

[jQuery] callback & chaining

javascript는 line 단위로 실행 되기 때문에 가끔 실행된 다음줄이 바로 실행되서 에러 유발하기도 한다. 이럴 때, 한 줄의 실행이 다 완료된 상태에서 다음 줄을 실행되는 것을 보장하기 위해 사용하는 것이 'callback'이다. 일반적으로 'callback'을 사용하기 위한 문법은 아래와 같다. Typical syntax: $(selector).hide(speed,callback); callback을 사용한 예제와 사용하지 않은 예제를 비교해보면 아래와 같다. without Callback$("button").click(function(){ $("p").hide(1000); alert("The paragraph is now hidden"); }); with Callback$("button")...

WEB/Javascript 2014.10.22

[jQuery] Effect

hide/show and toggle 먼저, element를 숨기고 보이게만드는 hide/show가 있다. 이외에도 hide와 show를 번갈아서 사용하기 위한 toggle이라는 method도 있다. 사용법은 아래와 같다. 인자로 속도를 줄 수 있으며 속도의 단위는 milliseconds이다. milliseconds외에도 'fast'/'slow'로도 속도 인자를 줄 수 있다. $("#show").click(function(){ $("p").show(); }); $("button").click(function(){ $("p").show("slow"); }); $("button").click(function(){ $("p").hide(1000); }); $("button").click(function(){ ..

WEB/Javascript 2014.10.22

[jQuery] install & syntax

jQuery install jQuery를 사용하기 위해서 먼저 설치를 해야한다. 설치를 하는 방법은 다운로드를 받아서 js파일을 추가하는 방법과 CDN (Content Distribution Network)을 이용하는 방법이 있다. 먼저, 다운로드를 받아 설치하는 방법은 jQuery.com에서 jQuery 라이브러리를 다운로드한 다음에 jQuery를 사용하고자하는 파일 안에 를 사용하여 아래와 같이 JS파일을 추가해주면 된다. CDN (Content Distribution Network)을 이용하는 방법은 다운로드할 필요없이 URL을 jQuery를 사용하고자하는 파일 안에 를 사용하여 아래와 같이 JS파일을 추가해주면 된다. google CDN microsoft CDN jQuery syntax$(Sele..

WEB/Javascript 2014.10.22

[JSP]JSP와 Servlet

서블릿은 멀티스레딩에 의해 사용자 요구를 처리하고 가공해서 이에 대한 결과를ㄹ 내보내게 된다. CGI가 클라이언트 프로세스로 처리하는데 반해 서블릿은 클라이언트를 스레드로 처리한다. 그래서 많은 클라이언트의 요구를 효과적으로 처리할 수 있다. 서클릿 객체는 스레드가 여러 개 돌아가면서 처리하기 때문에 서블릿 메소드들은 반드시 멀티스레드를 고려해야 한다. JSP와 서블릿은 상호 연계되어 JSP에서 정적인 부분을, 서블릿은 동적인 부분으로 사용되어 효율적인 웹사이트를 구성할 수 있다. 결국, JSP는 View를 담당하고 서블릿은 동적인 처리인 Controller를 담당한다는 결론에 이른다.

WEB/JSP 2013.07.08