Angular JS controllers

    Controller는 "ng-controller"라는 directive를 사용하고 javascript 생성자에 의해 만들어진 javascript object이다. 역할은 angular JS aplication에서 데이터를 조작한다. 아래의 예제를 보자.


<div ng-app="" ng-controller="personController">

First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{fullName()}}

</div>

<script>
function personController($scope) {
    $scope.firstName = "John",
    $scope.lastName = "Doe",
    $scope.fullName = function() {
        return $scope.firstName + " " + $scope.lastName;
    }
}
</script>


    위의 예제를 보면 "personController"라는 controller를 선언했다. model은 "firstName"과 "lastName" 둘이 있다. "personController"의 생성자는 아래에 정의되어 있다. 생성자는 controller와 똑같은 이름을 가진다. 생성자의 내부를 보면 $scope에 변수와 함수를 property에 할당하는 것을 볼 수 있다. scope는 application object로 model과 view를 연결하고 controller에게 이벤트를 보내는 역할을 한다. 아래의 또 다른 예제처럼 다른 JS 파일에 구현한 controller를 가져다 사용할 수 있다.


<div ng-app="" ng-controller="namesController">

<ul>
  <li ng-repeat="x in names">
    {{ x.name + ', ' + x.country }}
  </li>
</ul>

</div>

<script src="namesController.js"></script>



namesController.js

function namesController($scope) {
    $scope.names = [
        {name:'Jani',country:'Norway'},
        {name:'Hege',country:'Sweden'},
        {name:'Kai',country:'Denmark'}
    ];
}



출처 : http://www.w3schools.com

'WEB > Javascript' 카테고리의 다른 글

[Angular JS] Controllers  (0) 2014.10.29
[Angular JS] Expressions & Directives  (0) 2014.10.29
[jQuery] AJAX (Asynchronous Javascript And XML)  (0) 2014.10.29
[jQuery] add/remove HTML element  (0) 2014.10.22
[jQuery] get/set HTML content/attribute  (0) 2014.10.22
[jQuery] callback & chaining  (0) 2014.10.22

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에 반영할 수 있도록 구현되어 있어 개발 시, 편리함을 가져다 준다.


<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>






Angular JS Expressions

    Angular JS는 Expressions을 통해 HTML에 값을 넣을 수 있다. Expressions은 중괄호 둘을 겹쳐서 Expression을 둘러 싸는 모양으로 사용된다. 양식은 아래와 같다. 단, "ng-app"이라는 directive가 표시되어 있어야만 사용가능하다. 그 이유는 "ng-app"이라는 directive를 통해 angular의 application의 경계를 확인하고 런타임 환경을 구성하여 angular가 동작하도록 하기 때문이다.


{{expression}}



<!DOCTYPE html>
<html>

<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>

<body>

<div ng-app="">
  <p>My first expression: {{ 5 + 5 }}</p>
</div>

</body>
</html>



Angular JS Directives

    Angular JS는 Directives라고 불리는 새로운 attribute를 사용해 HTML을 확장해서 사용가능하다. angular에서 사용하는 direvctive는 "ng-"라는 접두사가 붙는다. 기본적인 directive 3가지를 먼저 소개한다. "ng-app"은 Angular JS application의 경계를 알려주어 angular가 사용될 수 있는 환경을 구성한다. "ng-init"은 application 데이터를 초기화 해준다. "ng-model"은 HTML controls(input, select, textarea 등)의 값을 application data에 binding 해준다. 사용하는 모습은 아래의 예제와 같다.


<div ng-app="" ng-init="firstName='John'">

<p>Name: <input type="text" ng-model="firstName"></p>
<p>You wrote: {{ firstName }}</p>

</div>


    directive를 하나 더 알아보자면 배열 같은 collection을 순회 하면서 element에 접근할 수 있는 "ng-repeat"가 있다. 사용법은 아래와 같다.


<div ng-app="" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]"
>

<ul>
  <li ng-repeat="x in names">
    {{ x.name + ', ' + x.country }}
  </li>
</ul>

</div>



출처 : http://www.w3schools.com

'WEB > Javascript' 카테고리의 다른 글

[Angular JS] Controllers  (0) 2014.10.29
[Angular JS] Expressions & Directives  (0) 2014.10.29
[jQuery] AJAX (Asynchronous Javascript And XML)  (0) 2014.10.29
[jQuery] add/remove HTML element  (0) 2014.10.22
[jQuery] get/set HTML content/attribute  (0) 2014.10.22
[jQuery] callback & chaining  (0) 2014.10.22

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(statusTxt=="success")
      alert("External content loaded successfully!");
    if(statusTxt=="error")
      alert("Error: "+xhr.status+": "+xhr.statusText);
  });
});



get method


$.get(URL, callback);


    get method의 syntax는 위와 같다. 첫번째 매개변수인 'URL'은 필수 인자이며, 나머지 매개변수인 callback은 선택 인자이기 때문에 추가해도 되고 안해도 된다. 그리고 콜백 함수의 매개 변수는 다음과 같다.


data - get method가 성공하면 결과값을 가지고 있다.

status - get method가 결과 상태를 가지고 있다.


    콜백을 사용한 함수의 예제는 아래와 같다.


$("button").click(function(){
  $.get("demo_test.txt.asp",function(data,status){
      alert("Data: " + data +"\nStatus: " + status);
  });
});



post method


$.post(URL, data, callback);


    post method의 syntax는 위와 같다. 첫번째 매개변수인 'URL'은 필수 인자이며, 나머지 두 매개변수는 선택 인자이기 때문에 추가해도되고 안해도 된다. 그리고 콜백 함수의 매개변수는 다음과 같다.


data - post method 성공하면 결과값을 가지고 있다.

status - post method 결과 상태를 가지고 있다.


    콜백을 사용한 함수의 예제는 아래와 같다.


$("button").click(function(){
  $.post("demo_test_post.asp",
  {
    name:"Donald Duck",
    city:"Duckburg"
  },
  function(data,status){
    alert("Data: " + data + "\nStatus: " + status);
  });
});



ajax method


$.ajax({name:value, name:value, name:value, ... });


    ajax method의 syntax는 위와 같다. ajax method는 앞의 다른 method보다 더욱 상세한 설정을 할 수 있다. 각 매개변수의 name:value 쌍으로 설정이 가능하다. 각 설정은 아래와 같다 자세한 내용을 jQuery 사이트에서 확인가능하다.







ajax(), get(), post(), load()의 차이
    $.ajax() - HTTP를 매우 효과적으로 조작할 수 있는 가장 적절한 것이다. method를 통해 XMLHttpReuqest 객체에 직접 접근이 가능하다. 그리고 에러 핸들링도 제공한다. 가끔 복잡하고 불필요하게 느껴질 수도 있지만 매우 유용하다. 대신, 사용할 때에 return data와 calback을 다루어야만 한다.

    $.get() - ajax()의 축약형으로 세부 설정 사항을 제거했다. 감춰진 설정 값은 기본 값으로 설정되어 있다. data를 callback한다. GET 방식에 대해서만 사용 가능하다.

    $.post() - ajax()의 축약형으로 세부 설정 사항을 제거했다. 감춰진 설정 값은 기본 값으로 설정되어 있다. data를 callback한다. POST 방식에 대해서만 사용 가능하다.

    $.load() - '$.get()'과 비슷하다. 하지만 return data에서 Document에 삽입할 부분을 정의할 수 있다.




출처 : http://www.w3schools.com

'WEB > Javascript' 카테고리의 다른 글

[Angular JS] Controllers  (0) 2014.10.29
[Angular JS] Expressions & Directives  (0) 2014.10.29
[jQuery] AJAX (Asynchronous Javascript And XML)  (0) 2014.10.29
[jQuery] add/remove HTML element  (0) 2014.10.22
[jQuery] get/set HTML content/attribute  (0) 2014.10.22
[jQuery] callback & chaining  (0) 2014.10.22

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 = "<p>Text.</p>";                    // Create element with HTML  
    var txt2 = $("<p></p>").text("Text.");    // Create with jQuery
    var txt3 = document.createElement("p"); // Create with DOM
    txt3.innerHTML = "Text.";
    $("p").append(txt1, txt2, txt3);                // Append the new elements 
}


    after/before는 HTML의 tag 에 element 자체를 추가할 때 사용한다. 사용법은 append(), prepend()와 동일하다.


$("img").after("Some text after");
$("img").before("Some text before");


function afterText() {
    var txt1 = "<b>I </b>";                           // Create element with HTML  
    var txt2 = $("<i></i>").text("love ");        // Create with jQuery
    var txt3 = document.createElement("b");  // Create with DOM
    txt3.innerHTML = "jQuery!";
    $("img").after(txt1, txt2, txt3);                  // Insert new elements after img



Remove element (remove / empty)

    HTML element를 제거하는 방법을 알아보자. remove()는 해당 HTML element와 element의 child element를 모두 제거한다. empty()는 해당 HTML element는 제거하지 않고 child element들만 제거한다. remove에 인자를 넘겨줄 경우, remove될 element 중에서 인자에 해당하는 selector만을 골라서 제거할 수 있다.


$("#div1").remove();

$("#div1").empty();

$("p").remove(".italic");



출처 : http://www.w3schools.com

'WEB > Javascript' 카테고리의 다른 글

[Angular JS] Expressions & Directives  (0) 2014.10.29
[jQuery] AJAX (Asynchronous Javascript And XML)  (0) 2014.10.29
[jQuery] add/remove HTML element  (0) 2014.10.22
[jQuery] get/set HTML content/attribute  (0) 2014.10.22
[jQuery] callback & chaining  (0) 2014.10.22
[jQuery] Effect  (0) 2014.10.22

    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());
});


$("#btn1").click(function(){
  alert("Value: " + $("#test").val());
});



Set content

    앞에선 element의 content를 가져오는 것을 배웠다 이번에 element의 content에 value를 set하는 것을 배운다. 간단하다. 위에서 봤던 text(), html(), val()에 set하려는 value를 인자로 넘겨주면 된다. 실제로 사용하면 아래와 같은 모습으로 사용될 것이다.


$("#btn1").click(function(){
  $("#test1").text("Hello world!");
});


$("#btn2").click(function(){
  $("#test2").html("<b>Hello world!</b>");
});


$("#btn3").click(function(){
  $("#test3").val("Dolly Duck");
});


    element에 content를  set하려는 value를 만들기 위해 실행할 function을 정의하기 위해서 앞의 글에서 배운 callback을 이용한다. 여기서 사용하는 callback 함수는 두 개의  인자를 가진다. 첫번째 인자는 index로 $표시의 seletor로 가져온 element의 index를 나타낸다. 두번째 인자는 originalText로 이전에 가지고 있던 element의 value를 나타낸다. 새롭게 set할 value를 function의 return value로 사용하면 된다. callback을 사용할 때는 아래와 같다.


$("#btn1").click(function(){
  $("#test1").text(function(i,origText){
    return "Old text: " + origText + " New text: Hello world!
    (index: " + i + ")"; 
  });
});

$("#btn2").click(function(){
  $("#test2").html(function(i,origText){
    return "Old html: " + origText + " New html: Hello <b>world!</b>
    (index: " + i + ")"; 
  });
});



Get attribute

    element의 attribute를 사용하기 위해서 attr() method를 사용한다. 인자로는 사용하려는 attribute의 이름을 사용한다. attr()은 해당 이름의 attribute의 value를 반환한다.


$("button").click(function(){
  alert($("#w3s").attr("href"));
});



Set attribute

    element의 attribute를 set하기 위해서도 attr() method를 사용한다. 단지 인자로는 set하려는 attribute의 이름을 첫번째 인자로 사용하고 두번째 인자로 set하려는 attribute의 value를 사용한다.


$("button").click(function(){
  $("#w3s").attr("href","http://www.w3schools.com/jquery");
});


$("button").click(function(){
  $("#w3s").attr({
    "href" : "http://www.w3schools.com/jquery",
    "title" : "W3Schools jQuery Tutorial"
  });
});


    element에 attribute를  set하려는 value를 만들기 위해 실행할 function을 정의하기 위해서 앞의 글에서 배운 callback을 이용한다. content에 set할 때는 인자로 바로 callback 함수를 줬지만 여기선 attribute 이름을 먼저 인자로 넘기고 두번째 인자로 callback 함수를 준다. callback 함수는 두 개의  인자를 가진다. 첫번째 인자는 index로 $표시의 seletor로 가져온 element의 index를 나타낸다. 두번째 인자는 originalText로 기존에 가지고 있던 attribute의 value를 나타낸다. 새롭게 set할 value를 function의 return value로 사용하면 된다. callback을 사용할 때는 아래와 같다.


$("button").click(function(){
  $("#w3s").attr("href", function(i,origValue){
    return origValue + "/jquery"; 
  });
});



출처 : http://www.w3schools.com

'WEB > Javascript' 카테고리의 다른 글

[jQuery] AJAX (Asynchronous Javascript And XML)  (0) 2014.10.29
[jQuery] add/remove HTML element  (0) 2014.10.22
[jQuery] get/set HTML content/attribute  (0) 2014.10.22
[jQuery] callback & chaining  (0) 2014.10.22
[jQuery] Effect  (0) 2014.10.22
[jQuery] install & syntax  (0) 2014.10.22

    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").click(function(){
  $("p").hide("slow",function(){
    alert("The paragraph is now hidden");
  });
});


   

    chaining은 jQuery의 method를 수행하면 주체가 되었던 element가 반환 되기 때문에 다시 같은 element를 찾는 수고를 덜어준다. method뒤에 바로 다음 실행할 method를 써주면 된다. 이를 chaining라고 한다. 단, line이 길어지면 white space와 indentaion으로 readablity를 신경 써주면 더 좋은 코드가 된다.


$("#p1").css("color","red")
  .slideUp(2000)
  .slideDown(2000);



출처 : http://www.w3schools.com

'WEB > Javascript' 카테고리의 다른 글

[jQuery] AJAX (Asynchronous Javascript And XML)  (0) 2014.10.29
[jQuery] add/remove HTML element  (0) 2014.10.22
[jQuery] get/set HTML content/attribute  (0) 2014.10.22
[jQuery] callback & chaining  (0) 2014.10.22
[jQuery] Effect  (0) 2014.10.22
[jQuery] install & syntax  (0) 2014.10.22

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(){
  $("p").toggle();
});



fadein / fadeout / fadeToggle / fadeTo


    먼저 설명했던 hide / show는 element를 나타내고 숨기기만 했지만 fade는 대부분이 알다시피 희미하게 사라지고 나타나는 효과를 가진다. fade에 관한 method를 대표적으로 4가지만 소개한다. fadein / fadeout은 말그대로 희미하게 사라지고 나타나는 효과를 지닌다. fadeToggle은 위에 있는 hide / show 글의 toggle처럼 fadein / fadeout 상태에 따라 번갈아 나타나도록 한다. fadeTo는 투명도를 나타내는 alpha 값을 개발자가 지정한 상태로 바꿀수 있다. 완전히 사라지거나 나타나지 않고 임의의 투명도를 지정하고 싶을 때 사용하기 좋은 method이다.


$("button").click(function(){
  $("#div1").fadeIn();
  $("#div2").fadeIn("slow");
  $("#div3").fadeIn(3000);
});


$("button").click(function(){
  $("#div1").fadeOut();
  $("#div2").fadeOut("slow");
  $("#div3").fadeOut(3000);
});


$("button").click(function(){
  $("#div1").fadeToggle();
  $("#div2").fadeToggle("slow");
  $("#div3").fadeToggle(3000);
});


$("button").click(function(){
  $("#div1").fadeTo("slow",0.15);
  $("#div2").fadeTo("slow",0.4);
  $("#div3").fadeTo("slow",0.7);
});



slideDown / slideUp / slideToggle


    slide method도 hide / show 와 같다고 보면 된다. 효과만 밀어내는듯이 나타나고 사라진다는 부분만 다르다.


$("#flip").click(function(){
  $("#panel").slideDown();
});


$("#flip").click(function(){
  $("#panel").slideUp();
});


$("#flip").click(function(){
  $("#panel").slideToggle();
});



animation


    임의의 animation을 정의하고 수행할 수 있는 method이다. 기본적인 사용 방법은 아래와 같다. 


$(selector).animate({params},speed,callback);


    animation을 사용할 때, 여러개의 animation을 동시에 적용하기 위해서 아래와 같이 사용한다. 값을 줄 때는 절대값 혹은 상대값으로 줄 수 있으며 'fast', 'slow', 'toggle'와 같이 사전 정의된 값도 사용 가능하다.


$("button").click(function(){
  $("div").animate({
    left:'250px',
    opacity:'0.5',
    height:'150px',
    width:'150px'
  });
}); 


$("button").click(function(){
  $("div").animate({
    left:'250px',
    height:'+=150px',
    width:'+=150px'
  });
}); 


$("button").click(function(){
  $("div").animate({
    height:'toggle'
  });
}); 


    animation을 사용할 때, 여러개의 animation을 순차적으로 적용해야할 경우에는 아래와 같이 element에 animation을 순서대로 정의하면 된다. event가 발생 했을 때, 위에부터 적용되어 animation이 실행된다.


$("button").click(function(){
  var div=$("div");
  div.animate({height:'300px',opacity:'0.4'},"slow");
  div.animate({width:'300px',opacity:'0.8'},"slow");
  div.animate({height:'100px',opacity:'0.4'},"slow");
  div.animate({width:'100px',opacity:'0.8'},"slow");
}); 



stop animation


    jQuery에서 수행되는 effect와 animation을 수행이 완료되기 전에 멈추고 싶을 때는 stop라는 method를 사용하면 된다.


$("#stop").click(function(){
  $("#panel").stop();
});



출처 : http://www.w3schools.com

'WEB > Javascript' 카테고리의 다른 글

[jQuery] AJAX (Asynchronous Javascript And XML)  (0) 2014.10.29
[jQuery] add/remove HTML element  (0) 2014.10.22
[jQuery] get/set HTML content/attribute  (0) 2014.10.22
[jQuery] callback & chaining  (0) 2014.10.22
[jQuery] Effect  (0) 2014.10.22
[jQuery] install & syntax  (0) 2014.10.22

jQuery install

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


<head>

    <script src="jquery-1.11.1.min.js"></script>

</head>


    CDN (Content Distribution Network)을 이용하는 방법은 다운로드할 필요없이 URL을 jQuery를 사용하고자하는 파일 안에 <script>를 사용하여 아래와 같이 JS파일을 추가해주면 된다.


google CDN

<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>


microsoft CDN

<head>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.1.min.js"></script>
</head>



jQuery syntax

$(Selector).action();


    jQuery의 기본 문법은 위와 같다. '$'표시를 통해 jQuery를 사용 가능하다. element에 직접 접근하기 위해서는 element를 나타내는 selector를 통해 접근이 가능하다.


    selector는 여러 종류가 있다. HTML 태그로 직접 접근하는 경우는 $("<HTML 태그>")를 적는다. element의 id로 접근할 경우에는 id앞에 '#'를 붙인다. $("#test")로 사용하면 된다. 클래스 이름으로 접근할 경우에는 $(".test")와 같이 '.'을 클래스의 이름 앞에 붙여준다. 정리하면 아래와 같다.



문법 

 설명

 예

 $("*")  

 모든 element

$("*"

 $("<HTML 태그>")

해당 HTML 태그 element 

$("p") 

$("#<id>") 

해당 id를 가진 element 

 $("#test")

$(".<class>")  

해당 class element 

$(".testClass") 

$(this) 

현재 HTML element 

 $(this)



    Selector를 통해 해당 element로 접근했으면 각 element의 event에 action을 정의할 수 있다. $(Selector).event();의 형태로 element의 event로 접근이 가능하다. event에 정의하고 싶은 action은 아래와 같이 정의하면 된다.



$(Selector).event( function() {


        // action goes here.

        action();

});



    일반적으로 사용하는 DOM 이벤트는 아래에 있다. 아래의 이벤트 외에도 많은 이벤트들이 있으므로 자신이 구현을 원하는 적당한 이벤트를 찾아서 사용하면 된다.



Mouse 

 Keyboard

 Form

 Document/window

 click

 keypress

 submit

 load

 dbclick

 keydown

 change

 resize

 mouseenter

 keyup

 focus

scroll 

 mouseleave

 

blur 

unload 


    만약에 page가 로드된 직후에 할일을 정의할 때에는 $(document).ready()를 사용한다. 이를 사용하면 page가 다 load되기 전에 먼저 jQuery 코드가 실행되어 아직 만들어지지 않은 element를 조작하는 일을 예방할 수 있다.


$(document).ready( function() {


        // action goes here.

        action();

});


출처 : http://www.w3schools.com

'WEB > Javascript' 카테고리의 다른 글

[jQuery] AJAX (Asynchronous Javascript And XML)  (0) 2014.10.29
[jQuery] add/remove HTML element  (0) 2014.10.22
[jQuery] get/set HTML content/attribute  (0) 2014.10.22
[jQuery] callback & chaining  (0) 2014.10.22
[jQuery] Effect  (0) 2014.10.22
[jQuery] install & syntax  (0) 2014.10.22

 서블릿은 멀티스레딩에 의해 사용자 요구를 처리하고 가공해서 이에 대한 결과를ㄹ 내보내게 된다. CGI가 클라이언트 프로세스로 처리하는데 반해 서블릿은 클라이언트를 스레드로 처리한다. 그래서 많은 클라이언트의 요구를 효과적으로 처리할 수 있다. 서클릿 객체는 스레드가 여러 개 돌아가면서 처리하기 때문에 서블릿 메소드들은 반드시  멀티스레드를 고려해야 한다.


 JSP와 서블릿은 상호 연계되어 JSP에서 정적인 부분을, 서블릿은 동적인 부분으로 사용되어 효율적인 웹사이트를 구성할 수 있다.


결국, JSP는 View를 담당하고 서블릿은 동적인 처리인 Controller를 담당한다는 결론에 이른다.

'WEB > JSP' 카테고리의 다른 글

[JSP]JSP와 Servlet  (0) 2013.07.08

+ Recent posts