2021/01/28 - [Web_Front-end/JavaScript] - [JavaScript_Ajax] 2021.01.28. DAY_66 Ajax통신 _ JavaScript만으로 수행해보기 [JavaScript_Ajax] 2021.01.28. DAY_66 Ajax통신 _ JavaScript만으로 수행해보기 ◎ Ajax 통신이란? 새로운언어가 아닌, JavaScriptg확장 기술이다 JavaScript안에 Ajax을 위한 객체가 존재한다 JavaScript에서 server에 data를 요구하는 기술 전체가아닌, 일부분만 갱신하는 방법을 사용할 jjiny-bbany.tistory.com JQuery로 Ajax 통신하기 : defualt가 비동기 방식이다 JQuery로 Ajax통신을하는 기본적인 형식 $...

◎ Ajax 통신이란? 새로운언어가 아닌, JavaScriptg확장 기술이다 JavaScript안에 Ajax을 위한 객체가 존재한다 JavaScript에서 server에 data를 요구하는 기술 전체가아닌, 일부분만 갱신하는 방법을 사용할 때 쓴다 JQuery가 Ajax통신을 할 수 있게하는 함수를 제공한다 ○ server가 data를 인식하는 방식 3가지 data를 글자로 인식 : CSV방식 (Comma Separate Value) _ ','로 data를 구분하는 방식 XML방식 _ data ''로 data를 구분하는 방식 JSON 방식 _ {구분명: data} JavaScript 객체 '{... : ...}' 로 만들어준다 let request = new XNLHttpRequest(); //Ajax통..

◎ 스크롤 이벤트 document가 window보다 큰 경우에 적용하는 스크롤 이벤트 window의 height과 document의 height이 다르다는 것을 알기위한 코드 작성 스크롤을 내려보면, window의 높이는 일정하게 정해져있지만, document의 높이는 스크롤을 내릴수록 커진다는 것을 알 수 있다 h1태그의 내용은 무시하고 p태그의 글만 본다(test용) ○ 무한 스크롤 화면의 끝(-200)에 도달했을 때, 동적으로 노드를 추가해보기 ○ 무한 스크롤로 상품의 이미지와 정보를 계속 출력하기 (20개의 상품목록) 20개의 상품정보를 객체화하여, 배열에 담고 마지막 상품에서 스크롤을 내리면, 첫번째상품부터 다시 무한으로 출력하는 코드 작성하기 1. 상품의 정보를 배열에 담는다 ( DB에서 가져..

◎ 태그의 기본이벤트를 제거하는 함수 preventDefault() ◎ 이벤트 전달을 제거하는 stopPropagation() ※ 자식노드에 이벤트를 추가하면, 부모노드에도 같은 이벤트가 적용될 때가 있다 부모노드로 이벤트가 전파되는 것을 막는 함수를 사용하면 된다 a태그를 클릭하는 이벤트에 stopPropagation() 함수를 추가하면 아래와같이 a태그에만 이벤트가 전달된다 $("a").click(function(event) { $(this).css("backgroundColor", "blue"); event.stopPropagation();//이벤트전달을 막는 함수 event.preventDefault();//기본이벤트를 제거하는 함수 })

아래와같이 연속적으로 발생하는 애니메이션을 다뤄보자 위와같은 코드를 실행하면, 마우스를 올린 횟수만큼 큐가 쌓여 큐의 끝까지 애니메이션을 실행한다 따라서, 마우스를 올린 횟수에 상관없이 지금 이미지에서 마우스가 벗어나면 애니메이션이 종료되게 만들어본다 이미지들을 감싸는 부모태그 div를 만들고, 부모태그를 벗어나면, 큐를 삭제해보자

◎ dblclick(function(){ }) 더블클릭을 하는 이벤트 : dblclick dblclick(function() { 이벤트 내용 }) ◎ on 이벤트 함수 이벤트를 처리하는 방법은 여러가지이다 보통 이벤트이름이 같은 이름을가진 내장함수로 존재한다 1. 이벤트이름을 가진 함수를 바로 호출한다 $(이벤트적용대상).이벤트함수(function(){ }) 2. on함수를 사용하여, 이벤트를 매개변수에서 호출한다 2-1 $(이벤트적용할 곳).on("이벤트이름", function() {}); 이때는 이벤트를 적용하는 곳에 이벤트가 적용된다 2-2 $(이벤트적용할 곳).on("이벤트이름", "자식노드", function() {}); 이때는 이벤트를 적용하는곳의 자식노드에 이벤트가 적용된다 ※ 더블클릭하면,..

※ 태그를 생성하고, 속성을 부여, css스타일을 적용, 일정시간후에 나타내기 id가 result인 div에 h1태그를 추가하는 코드작성 text() 함수에 매개변수를 넣어 값을 입력한다 h1태그는 data-test속성에 test값을 가진다 (정의) css스타일을 적용한다 1초후에 h1태그가 div태그에 나타난다 ※ method_chaining을 사용하여, 태그에 값,속성,스타일을 적용한 후 나타내기 위와 같은 내용을 method_chaining(함수를 "."을사용해서 연결하여 사용) 을 사용하여 코드작성 ※ method_chaining을 사용하고, 결과를 뿌릴 태그에 appendTo()를 사용하여 적용 append()와 appendTo()는 차이가 있다 _ 위치 차이 append() $("A").app..

※ css() 함수를 사용해서, 속성부여해보기 1. 이미지태그에 접근해서 css함수를 사용하여, 위치를 변경해보기 id가 man인 이미지태그가 있다 id로 이미지태그에 접근하여, 속성을 부여한다 css함수에 매개변수가 2개인 경우와 1개인 경우는 다르다 css("속성명", "속성값") : 속성을 부여한다 css("속성명") : 속성값을 가져온다(읽어들인다) 2. 태그에 접근해서, css함수를 사용하여 바운스볼 만들기 이미지태그 대신, div태그를 사용하였다 id가 ball인 div태그에 접근하여, 공모양으로 속성을 부여한다 위치를 이동시키기 위해 position 속성도 absolute로 부여한다 setInterval함수를 사용해서, 입력한 시간마다 반복하여 공의위치가 바뀌게 할 수있다 결과적으로 화면의 ..

※ animate() 애니메이션 효과를 사용할 수 있는 함수 사용 1. 이미지 위에 마우스가 올라가면 이미지의 크기를 2배로 크게 보이도록 해보기 마우스가 나가면 원래의 크기로 돌아가도록 애니메이션을 설정한다 사용이벤트 : mouseover, mouseleave mouseover : 특정 위치에 마우스가 올라가면, 이벤트실행 mouseleave : 특정 위치에 올렸던 마우스가 나가면, 이벤트실행 문제점 발생 : 마우스를 한번 들어가고 나간 이미지 태그에 이벤트가 발생하고, 바로 다음 이미지태그에 마우스가 들어가고 나가면 두가지 이벤트가 같이 발생한다 즉, 이벤트가 누적된다 (Queue) 따라서, 이벤트를 따로 처리하거나, 연속적인 이벤트를 중지시킬 필요가 있다 ※ Queue란? JQuery의 효과 함수는..

html()함수 사용 매개변수가 존재할때, 존재하지 않을 때 차이가 있다 ※ 매개변수 유무에 따른 차이점 연습 유관순 이순신 홍길동 김유신 ※ 배열에 태그에 존재하는 값넣기 html() 또는 text() 함수를 사용해서, name_list 배열에 h1태그의 이름들을 넣어보는 연습 유관순 이순신 홍길동 김유신 ※ html, text 함수의 차이점 1 유관순 이순신 홍길동 김유신 ※ html, text 함수의 차이점 2 유관순 이순신 홍길동 김유신 ※ html, text 함수의 차이점 3 유관순 이순신 홍길동 김유신