도도의 IT이야기

우리는 저번에 콜백과 프로미스에 대해서 배웠다. 그리고 나는 강조했다. 콜백과 프로미스는 비동기적 AJAX request에서 많이 사용되는 것이라고. 이제 드디어 AJAX가 도데체 뭔지 배워보자. 일단 AJAX는 자바스크립트의 코어 기능 중 하나로 몇가지 중요한 일을 한다. 1. 페이지가 로딩된 후에도, 서버에서 데이터를 읽을 수 있다 2. 읽은 데이터로 HTML데이터를 새로고침하지 않고 바꿀 수 있다. 3. 백그라운드에서 서버로 데이터를 보낼 수 있다. 즉, AJAX의 주목적은 페이지의 작은 부분을 새로고침하지 않고 가져올 수 있다는 점에 있다. 이제 AJAX의 기능을 사용할 수 있는 방법에 대해서 알아보자. 1. XMLhttprequest XMLhttprequest는 전통적인 AJAX request의..

콜백을 대체할 수 있는 프로미스를 대해서 알아보거다. 하지만 그전에 콜백에 대해서 한번 복습해보자. 콜백은 다른 함수(higher-order function)의 파라미터로 전달되는 함수로써 그 higher-order이 원할때 호출될 수 있다. function add(a,b,print){ let sum = a+b; print(sum); } function result(res){ console.log(res);//3 } add(1,2,result) 이런 식으로 우리는 result 함수를 add의 인자로 보내 사용할 수 있다. 물론 위의 함수를 이런식으로도 쓸수있다. function add(a,b){ return a+b; } function result(res){ console.log(res);//3 } le..

지금까지 우리는 CSS에 어떻게 애니메이션을 더했죠? .original{ height:0px; transition: 2s ease; } .original.someAnim{ height:100px; } 우리는 우선 .original이라는 class에 element의 initial height를 지정해주고 javascript를 이용해 click/focus등등 event가 일어나면 .someAnim이라는 class를 더해줘서 animation이 일어나게 했습니다. 하지만 jQuery에서는 위와 같은 일을 굉장히 쉽게 할 수 있습니다. 기본적인 ANIMATION $('.original').animate({"height":"100px"}); 위 코드는 jQuery가 select된 element가 height 0 ..

우리는 지금까지 이벤트를 이런형식을 달아왔습니다 button[0].addEventListener('click',myFunc); 이렇게 jquery object를 unwrap을 하고 Vanilla js의 메소드를 사용할 수 있었습니다. 하지만 여기에 한가지 문제가 있습니다. vanilla js addeventlistener는 IE8이나 다른 인터넷 버전 호완이 안좋다는 거죠. 그래서 우리는 jQuery의 이벤트 바인딩 메소드를 사용할 수 있습니다. .on()은 addEventListner랑 같은 방식으로 사용될수 있습니다. button.on('click',myFunc); 이런 식으로 말이죠 이제 클릭하면 콜백함수인 myFunc이 실행될것입니다. .on의 엄청난 장점이 하나 있습니다. 이런 JS코드를 봅시다..

지금까지 여러 jQuery method들을 알아봤는데요. 이번엔 CSS를 바꾸는 방법대해서 알아보겠습니다. 당연히 CSS를 바꾸는 방법은 .css 메소드를 사용하겠죠. 하지만 좀더 자세히 알아봅시다. 일단 HTML코드를 만듭시다. blah 이런 코드가 있다고 해봅시다. 여기서 먼저 div element의 color속성을 알고 싶다! 하면 이렇게 합시다. $('div').css('color');//return red 이렇게 선택한 element의 css attribute을 인자로 보내면 value를 리턴합니다 그럼 선택한 css attribute을 바꾸려면? 쉽습니다. 그저 두개의 인자를 보내면되죠. $('div').css('color','black'); 이렇게 색을 바꿀 수 있습니다. 근데 바꾸고 싶은 ..

.empty()는 innerHTML을 지움. .remove()는 어떠한 element를 아예 없앰. hi I am dodo $('p').empty()//결과 $('p').remove()//결과: 없어짐 이제 element의 attribute을 제거하거나 바꾸는 방법을 알아보자 이러한 html이 있다고 해보자 .removeAttr()은 받은 인자로 받은 attribute을 완전히 지운다. $('div').removeAttr('class')//결과: .attr 은 attribute의 값을 바꾸거나 return한다. $('div').attr('class','anotherBanner'); //결과: $('div').attr('class');// anotherBanner을 리턴함

우선 이러한 HTML코드가 있다고 해봅시다 someThing1 som any thing 보이는 대로 ul 태그들이 div.wrapper에 wrap되있습니다. wrapper는 안에있는 element들의 width를 900px로 줄이고 화면 중간에 합니다. 우리 한번 이 wrapper을 없애 봅시다. $('ul').unwrap(); 쉽죠? unwrap은 자신의 직속 parent를 없애버리는 역활을 합니다. wrapper를 없앴기 때문에 이제 더이상 width 가 900px이 아닐겁니다. 이제 없앤것을 다시 돌려보죠 let value = "" $('ul').wrap(value); 이런식으로 더하는게 맞을까요? 약간 틑립니다만 그전에 이코드를 설명하죠. wrap의 인자에 closing tag를 더해줄 필요가 없..

js에서는 어떠한 element를 더할때 parent.appendChild(childElement)를 사용한다 jQuery에도 비슷한 것들을 사용하여 html에 element들을 더할 수 있다. 우선 html을 만들어보자 나는 처음이다 이러한 html이 있다고 해보자. 1. append() 우리는 ul의 마지막에 또다른 li element를 추가하고 싶다고 하면 이런 방법을 사용할 수 있다. let newLi = "나는 마지막!" $('ul').append(newLi); append는 ul 안의 마지막에 newLi를 더할 것이다. 결과는 나는 처음이다 나는 마지막! 이러할 것이다. 2. prepend(); append()와 비슷하지만 prepend()는 마지막이 아닌 처음에 더한다. 그러니까 prepen..

저번 포스팅에 select된 element에서 출발하여 다양한 jquery DOM을 접근할 수 있는 방법을 알아봤습니다. $('#child1').parent().css({border:"2px solid"}) 이제 이 방법을 이용하여 jQuery chain에 대해 알아봅시다. $('#child1').css({style:"somevalue"}) 이렇게 child1의 스타일을 바꿨습니다. 이제 child1의 parent의 스타일 바꾸고 싶다면? $('parent1').css({style:"something"});//이렇게 할 필요 없음 $('child1').css({style:"something"}).parent().css({style:"somethingElse"});//이렇게 하면 됨 이렇게 chain을 이..

우리는 DOM을 사용하므로서 HTML의 element들을 하나의 커다란 tree로본다 맨위에 HTML tag가 있고 그 밑에는 head, body body밑에는 수많은 tag들이 있다. 즉 document(HTML)을 커다란 object로 보는것이다. 그래서 document에서 selector를 사용해 안에있는 속성들을 가지고 올 수 있다. $('.wrapper1'); 우리는 document안에 있는 wrapper1을 선택했다. 만약 wrapper1의 next sibling을 선택하고 싶다면? $('.wrapper1').next(); 이렇게 다음 sibling wrapper2를 선택가능하다. $('.wrapper1').prev();//prev sibling $('.wrapper1').parent();//..