html5
-
[Javascript] 1. 소개(Introduction) - 자바스크립트 강좌Web/JavaScript 2015. 6. 13. 14:21
1. JavaScript Can Change HTML Content HTML 메서드인 document.getElementById() 를 이용하여 HTML Content를 바꿔보도록 하겠습니다! 다음 예제는 HTML 요소(id="demo")를 찾기위한 메소드를 사용하고 "Hello JavaScript"로 요소 내용을 변경하는 예제입니다. 아래와 같이 HTML을 작성합니다. 12345678910111213141516 What Can JavaScript Do? JavaScript can change HTML content. Click Me! Colored by Color Scriptercs 그러고선 웹에서 실행합니다! 위와 같이 뜨면 버튼을 클릭하여 결과를 확인합니다. 이전 문구가 'Hello JavaScri..
-
[jQuery] 27. noConflict Method - jQuery 강좌 jQuery / CSEWeb/jQuery 2015. 6. 13. 11:31
jQuery - The noConflict() Method jQuery를 사용하는 와중에, 웹 페이지에 다른 프레임 워크를 사용하길 원한다면? 1. jQuery and Other JavaScript Frameworks 이미 알고 있듯이, jQuery는 $ 마크를 사용하여 jQuery의 단축으로 사용합니다. 다른 많은 자바스크립트 프레임 워크가 있습니다: AngularJS, Backbone, Ember, Knockout 등등 만약 다른 자바스크립트 프레임워크에서도 달러 마크를 사용한다면?? 다른 두 개의 프레임워크가 같은 단축어를 사용한다면, 둘 중 하나는 작동을 멈추게 됩니다. jQuery 팀은 이러한 점을 염두에 두었습니다. 바로 noConflict() 메소드입니다. 2. The jQuery noCon..
-
[jQuery] 26. AJAX get / post - jQuery 강좌 jQuery / CSEWeb/jQuery 2015. 6. 13. 11:30
jQuery - AJAX get() and post() Methods 1. HTTP Request: GET vs. POST 클라이언트와 서버사이의 요청-요구를 위한 일반적인 두 메소드는 GET 과 POST 입니다. - GET : 명시된 자원으로부터 요구된 데이터 - POST : 처리되어진 명시된 자원을 제출한 데이터 GET은 일반적으로 서버로부터 몇몇 데이터를 그냥 가져오는데 사용합니다. * GET 메소드는 캐시된 데이터로 남습니다. POST 또한 서버로부터 몇몇 데이터를 가져오는데 사용됩니다. 그러나, POST 메소드는 절대로 데이터를 캐시하지 않습니다. 그리고 요청과 함께 데이터가 전송되어지기도 합니다. 2. jQuery $.get() Method $.get() 메소드는 HTTP GET 요청인 서버로..
-
[jQuery] 25. AJAX load - jQuery 강좌 jQuery / CSEWeb/jQuery 2015. 6. 13. 11:29
jQuery - AJAX load() Method 1. jQuery load() Method load() 메소드는 간단하면서도 강력한 AJAX 메소드 입니다. load() 메소드는 서버로 부터 데이터를 로드하고, 선택된 요소에 반환된 값을 넣습니다. 문법:$(selector).load(URL,data,callback); 필수적인 URL 파라미터는 로드를 원하는 URL을 명시합니다. 선택적인 data 파라미터는 요구와 함께 보내지는 키 / 값 쌍의 일련의 질의 문자열을 명시합니다. 선택적인 callback 파라미터는 load() 메소드가 끝나고 난 뒤 실행될 함수의 이름입니다. 아래 "demo_test.txt"라는 텍스트 예제 파일이 있습니다. jQuery and AJAX is FUN!!! This is ..
-
[jQuery] 24. AJAX - jQuery 강좌 jQuery / CSEWeb/jQuery 2015. 6. 13. 11:29
jQuery - AJAX Introduction AJAX는 서버와의 데이터 교환의 미학이고, 전체 페이지의 리로드 없이 웹 페이지의 일부분을 수정가능 합니다. 1. What is AJAX? AJAX = Asynchronous JavaScript and XML AJAX는 백그라운드에서 데이터를 로딩하는 것이고, 전체 페이지 리로드 없이 웹페이지에 표시하는 것입니다. AJAX를 이용한 어플리케이션의 예: Gmail, Google Maps, Youtube, and Facebook tabs. 2. What About jQuery and AJAX? jQuery는 AJAX 기능성을 위한 몇 가지 메소드를 제공합니다. HTTP Get 이나 HTTP Post를 사용하여 외부 서버로 부터 text, HTML, XML 이..
-
[jQuery] 23. Filtering - jQuery 강좌 jQuery / CSEWeb/jQuery 2015. 6. 13. 11:28
jQuery Traversing - Filtering 1. Narrow Down The Search For Elements Filtering 메소드의 가장 기본적인 3 가지는 first(), last(), eq() 입니다. 2. jQuery first() Method first() 메소드는 선택된 요소의 첫번째 요소를 반환합니다. 12345678910111213141516171819202122232425262728293031$(document).ready(function(){ $("div p").first().css("background-color", "yellow");}); Welcome to My Homepage This is the first paragraph in body. This is the ..
-
[jQuery] 22. Siblings - jQuery 강좌 jQuery / CSEWeb/jQuery 2015. 6. 13. 11:27
jQuery Traversing - Siblings 형제(Siblings)는 같은 부모를 공유합니다. 1. Traversing Sideways in The DOM Tree DOM 트리에서 옆으로 항해하는 여러가지 메소드가 있습니다: - siblings() - next() - nextAll() - nextUntil() - prev() - prevAll() - prevUntil() 2. jQuery siblings() Method siblings() 메소드는 선택된 요소의 모든 형제 요소를 반환합니다. 아래 예제는 의 모든 형제 요소를 반환합니다. 1234567891011121314151617181920212223242526272829303132.siblings * { display: block; borde..
-
[jQuery] 21. Descendants - jQuery 강좌 jQuery / CSEWeb/jQuery 2015. 6. 13. 11:27
jQuery Traversing - Descendants 1. Traversing Down the DOM Tree DOM 트리에서 내려가기 위한 2 가지 유용한 jQuery 메소드가 있습니다: - children() - find() 2. jQuery children() Method children() 메소드는 선택된 요소의 모든 직후 자식들을 반환합니다. 이 메소드는 DOM 트리의 단일 레벨 아래만 항해합니다. 123456789101112131415161718192021222324252627282930313233.descendants * { display: block; border: 2px solid lightgrey; color: lightgrey; padding: 5px; margin: 15px;}$..