Javascript 썸네일형 리스트형 ajax 사용해보자. jQuery는 고맙게도 ajax를 쉽게 사용할 수 있다. 크로스브라우징을 내가 작업할 필요가 없으니 편하다. 기본 문법은 다음과 같다.$.ajax({name:value, name:value, ... }) 문법은 jQuery답게 간단하고 확장성있어 보인다. 예제를 살펴보자.demo_ajax_load.txt파일의 내용을 가져와서 div에 넣는 소스이다. 통신이 성공할 경우에만 동작한다. Let AJAX change this textChange Content 다음 스크립트를 사용하면 비동기방식으로 사용할 수있다. 그리고 에러처리는 다음과 같다. 다음 페이지에 가면 몇가지 유형이 더 나와있다. ajax와 관련된 기능은 다 있어보이니 참고하자.http://www.w3schools.com/jquery/ajax_aj.. 더보기 jQuery 기초 jquery 소개 jQuery는 다음 제시하는 것의 전반적인 지식을 가지고 있어야 익힐 수 있다.HTMLCSSJavaScript jQuery는 자바 스크립트를 쉽게 사용할 목적으로 개발됬다. 좀 더 적은 코드로, 좀 더 많은 일을 하기위한 라이브러리이다. 자바 스크립트에서 복잡한 일들을 많이 단순화했다. jQuery는 다음과 같은 기능이 포함되어 있다.HTML/DOM 조작CSS 조작HTML 이벤트효과 및 애니메이션유틸리티 jQuery 설치 jQuery는 다운로드하거나 구글CDN이나 마이크로소프트CDN에서 가져다 사용할 수 있다. 1. 다운로드는 아래 사이트에서 할 수 있다.http://jquery.com/download/ 2. 구글 CDN 활용 가장 최신 버젼을 사용하고 싶으면 1.8.0 대신에 1을 쓰.. 더보기 스크립트로 form 관리 form전송이 필요할 경우가 많은데, 그럴때마다 하단에 display:none으로 추가하거나 아주 작게 하여 안보이게 작업하였다. 하지만 스크립트로 관리하면 그런걸 매번 추가해줄 필요가 없다. 스크립트로 관리를 해보자. // from 생성this.frm = document.createElement("form");this.frm.action = actionUrl;this.frm.method = "post";this.frm.target = "_self"; this.frm.setAttribute("style", "display:none;"); 타겟은 없어도 된다. // 데이터 삽입var tag = document.createElement("input");tag.setAttribute("type", "hidde.. 더보기 문서 객체와 객체지향을 이용한 움직임 구현 글자들이 네모난 공간에서 계속 움직인다. 이전에 테트리스를 만들어보던 때가 생각난다. 내가 만든게 아니므로 링크를 걸어두자.http://book.naver.com/bookdb/book_detail.nhn?bid=6776987 더보기 문서 객체를 이용한 움직임 구현 책에 있는 소스를 그대로 적용하기는 그래서 약간 수정해보았다. 수정이라기보다 쪼개보았다. 재활용 가능하게... @ O * 문제점: 첫번째 원은 괜찮으나, 원을 도는 객체에 다시 원을 돌리면 정확한 위치로 돌지 않는다. 아마도 두 회전간 싱크가 맞지않아서 그런듯하다. 배열로해서 처리하면 깔끔하게 처리가 가능하겠으나 계속 추가하면 끝이 없으므로 여기까지... ㅋ 더보기 문서 객체를 배열로 가져오기 문서의 객체를 배열로 가져올 수 있다. Header Headerh1 태그안의 내용이 바뀌는 것을 볼 수 있을 것이다. 그리고 문서 객체 배열에서는 for in 반복문을 사용하면 안된다. 그러면 문서 객체 이외의 속성에도 접근하기 때문이다. Header Header실행하면 브라우저에 따라 출력되는 종류와 갯수에 차이가 있을 것이다. 더보기 IE에서 innerHTML로 내용을 바꿀 수 없는 태그들 col, colgroup, frameset, head, html, style, table, tbody, tfoot, thead, title, tr 태그의 innerHTML 속성을 바꿀 수 없다.생각보다 많구나~ 더보기 BOM(Brower Object Model: 브라우저 객체 모델) 브라우저 객체 모델은 웹 브라우저와 관련된 객체의 집합을 의미합니다.window 객체 │ ├─→ location 객체 │ ├─→ navigator 객체 │ ├─→ history 객체 │ ├─→ screen 객체 │ └─→ document 객체 간단하게 DOM(Document Object Model: 문서 객체 모델)이라 통합해 부르기도 합니다. 더보기 Array 객체의 요소 제거 반복문을 이용하여 특정값을 삭제할 때는 주의할 부분이 있다. 이걸 출력하면 결과로 52,103,32,129가 나온다. 이상하지 않은가? 두개의 값이 남아있다. 이건 remove특성 때문이다. 내부적으로 삭제를 하기 때문에 예를 들어 273이 삭제되면 그다음은 103이 두번째로 땡겨진다. 그럼 다음 루프에서는 103을 넘어 32를 검사하게 되는 것이다. 이런 것을 방지하려면 거꾸로 검사를 해주어야 한다. 뒤에서 부터 검사를 하기때문에 배열 요소가 줄어드는 것에 영향을 받지 않는다. 더보기 Array 객체 정렬 Array 객체는 기본적으로 정렬 메서드가 있다. Click the button to sort the array. Try it W3schools에 있는 예제이다. 문자열을 정렬한다. 알파벳순으로 오름차순 정렬을 한다. 숫자의 경우에는 두가지 내림차순도 정렬이 가능하다. 오름차순 정렬 Click the button to sort the array. Try it 내림차순 정렬 Click the button to sort the array. Try it 정렬을 하는데 왜 함수를 사용했는지 궁금하다. 문자열에 이같은 함수를 사용하면 정렬이 꼬인다. 문자열의 경우에는 sort()를 하고 reverse()를 하면 내림차순 정렬이 되겠다. 포인트는 메서드를 실행하면 내부적으로 정렬이 된다는 것이다. 리턴값이 아니다... 더보기 이전 1 2 3 4 5 다음