Developer Gonie

사용예시 * 기존에 jquery.js 만 import 해서 사용했던 것과 달리 rotator를 위한 js 도 import 해서 사용했다는 것에 주의하자. 아래의 두 예제를 합친 것과 동작의 결과가 비슷한데, 여기서는 rotator() 메소드 하나로 동작한다는게 다름 https://ldgeao99-developer.tistory.com/476 https://ldgeao99-developer.tistory.com/505 을이 을이 자는 모습 똘이 메롱 똘이

* magnify() 이 한 줄의 코드가 없었을 때에는 보여지는 이미지를 클릭하면 a태그의 href로 이동하는 동작이었다. 하지만, magnify() 메소드를 실행 시킴으로써, 마우스를 이미지 위에 올려두면 위의 동작이 아니라 href로 이동하진 않았지만, href로 이동해서 그곳의 이미지를 보는 것 처럼 아래와 같이 확대해서 보여준다. 사용예시 * 기존에 jquery.js 만 import 해서 사용했던 것과 달리 magnify를 위한 js 도 import 해서 사용했다는 것에 주의하자.

회원가입 폼 유효성검사 * 전송 전에 유효성 검사를 해주려면 버튼에 onClick 속성을 추가해 유효성을 검사하는 함수를 호출하고, 그 함수의 리턴값에 따라 form 요소의 action 속성에 명시된 url로 이동할 수 있게 해야한다. onClick="return 함수명()" 이 부분은 javascript 만으로 유효성을 검사 하는 때와 같다. * 참고 : javascript 만으로 회원가입 form 유효성 검사하기 핵심0. 사용자가 입력값으로 공백만 넣은경우 통과 못하게 하기 (.trim()) 아래 예시에서는 모든 요소에 이 부분을 적용하지 않았지만 나중에 모든 요소에 대해 적용하는게 필요할 거같다. ph1 = $('input[name="phone1"]').val(); if( $.trim(ph1).le..

* jQuery.ajax( url [, settings ] ) 형태와 jQuery.ajax( [settings ] ) 형태가 존재하는데 후자의 것을 사용하여 구현할 예정. * 참고 : 생활코딩 https://opentutorials.org/module/904/6851 settings에 들어갈 수 있는 주요 옵션 * data 옵션은 의 자식들 요소에서 입력한 값을 serialize() 해서 보낼 수도 있음 (serialize 하면 get 방식 비슷하게 문자열이 형성됨) * dataType 옵션이 필요한 이유는 요청 url이 timesned.php인데, 이 파일이 응답으로 주는 데이터가 json 타입일 때 필요 * type 옵션의 디폴트는 get 방식이며, get 방식일 경우 생략해도 된다. 응답으로 받은 ..

* Shorthand Method 에는 이거 말고도 여러가지가 존재하나 여기서는 딱 2가지만 다뤄보았음. 바로 앞 게시글에서 얘기했듯이 Shorthand Method 보다는 Low-Level Interface에 위치한 ajax() 메소드를 사용하는걸 추천. jQuery의 Ajax가 제공하는 Shorthand Method인 .get() 메소드 예시 * 이 예시에서는 xml을 요청해 보았음 과일의 특성 조사 3000 레몬에 포함되어 있는 쿠엔산은 피로회복에 좋다. 비타민C도 풍부하다. 2000 비타민C가 매우 풍부하다. 다이에트와 미용에도 매우 좋다. 5000 블루베리에 포함된 anthocyanin(안토시아닌)은 눈피로에 효과가 있다. 5000 체리는 맛이 단 성분이 많고 피로회복에 잘 듣는다. 5000 메..

Ajax(Asynchronous JavaScript And XML)란? 단어 그대로 해석하면 비동기 자바스크립트와 XML 이다. 그러나, 약어 그대로의 의미보다는 비동기 통신을 통틀어 Ajax라고 부른다. Ajax는 디자인 골격이 만들어져 있는 상태에서 데이터만 요청하여 받아올 때 사용하는 통신이다. 응답으로 받은 데이터를 이용하면 브라우저에서 보여지는 일부분을 수정할 수가 있다.(주 사용목적) 단어만 보면 xml만 요청 가능할 것 같지만 실제로는 json도 요청 가능하다. Ajax가 필요한 이유는 다음과 같다. Ajax 기술을 사용하지 않는 사이트가 특유의 깜빡거림 현상이 생기는 이유는 매번 페이지를 싹 지우고 처음부터 다시 모든 것을 그려내기 때문이다. Ajax를 사용하면 페이지의 일부를 수정하기 위..

XML 파일형식 - XML은 아래와 같이 임의대로 태그 이름을 지어서 만들게 된다. - 데이터를 붙여줄 때, 특정 태그의 자식으로 넣을 수 도 있지만, 속성으로 추가해도 된다. - 다만 읽어들일 때 편하게 각 뭉태기는 같은 형태를 가져야 한다. 3000 레몬에 포함되어 있는 쿠엔산은 피로회복에 좋다. 비타민C도 풍부하다. 2000 비타민C가 매우 풍부하다. 다이에트와 미용에도 매우 좋다. 5000 블루베리에 포함된 anthocyanin(안토시아닌)은 눈피로에 효과가 있다. JSON 파일형식 - [ {}, {}, {}, {}, ,,] 형태로 뭉태기가 나열되며, { } 안에는 데이터가 나열된다. - XML과 마찬가지로 읽어들일 때 편하게 각 뭉태기는 같은 형태를 가지도록 작성해야 한다. [ { "id": "..

* 좌우 이동은 첫번째 이미지의 왼쪽 공백 만을 이용해서 작성 가능했음 * 상하 이동은 아마도 첫번째 이미지의 위쪽 공백을 이용하지 않을까? 1) .animate({ }, 시간) 인자로 준 시간동안 부드럽게 { } 의 부분이 적용되며, 좌우,상하로 이미지를 부드럽게 움직일 수 있음. 사용예시 « »

* show(), hide()와 기능이 거의 같은데, 보여지는건 거의 같고 사라질 때의 시각적인 효과가 살짝 다름 1) fadeIn() CSS의 display 속성을 원래대로 변화시켜, 눈에 다시 보이게 됨 2) fadeOut() CSS의 display 속성을 none 으로 변화시켜, 요소는 그대로 존재하지만 눈에 안보이게 됨 사용예시 불투명도를 점점 높여서 보이도록 한다. speed를 fast, normal, slow 또는 0이상의 숫자(밀리세컨드 단위)를 준다. 에니메이션이 끝난 후에 실행할 함수를 지정한다. S U C C E S S ! fadeIn fadeOut fadeToggle

* toggle과 다른 것은 toggle은 하나만 가지고 숨겼다 보여졌다 하는데 이건 기능이 분리되어 있다는 것임 1) show() CSS의 display 속성을 원래대로 변화시켜, 눈에 다시 보이게 됨 2) hide() CSS의 display 속성을 none 으로 변화시켜, 요소는 그대로 존재하지만 눈에 안보이게 됨 사용예시 * show(), hide()에 추가된 fuction은 전부 다 요소가 보여진 다음에 마지막에 실행된다. Show It Hide It 안녕하세요. Show It slow Hide It slow 반갑습니다. Show/Hide 또 만나요

바로 접었다 폈다하는 예제 * toggle() 함수의 인자로 이 속도를 조절할 수 있으니 이에 대한 예시는 맨 아래의 코드를 참고. 접혀지고 펼쳐지는 속도를 조절해본 예제 $('p.b').toggle('slow'); // 느리게 동작 $('p.b').toggle('fast'); // 빠르게 동작(그래도 인자가 아예 없는 상태보단 느림) $('p.b').toggle(5000); // 5초에 걸쳐 펼쳐지고 접혀지는 접혀지고 펼쳐지는 속도를 조절 + 동작을 마친후 호출될 함수 정의 * 뒤에 선언된 function은 펼쳐지거나 접혀지는 동작이 다 끝난 다음에나 실행됨 $('button:last').click(function(){ $('span:last').toggle(3000,function(){ alert(1..