JavaScript 6

[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