일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | |
7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 |
- bootstrap
- 루프
- 클래스
- 싱글턴
- 박싱
- 싱글톤
- 컬렉션
- Jenkins
- suvlet
- 제네릭
- Short
- 스프링
- wrapper
- unboxing
- 자동형변환
- Scanner
- 콜렉션
- 메소드
- 무한
- 빌드
- dependency
- maven
- 내장객체
- 언박싱
- boxing
- 인텔리제이
- https://start.spring.io
- Java
- start.spring.io
- 제너릭
- Today
- Total
목록K-DigitalTraining 강의 (333)
Developer Gonie
1. 일단, 요소가 form 요소 내부에 존재해야 DOM으로 접근할 수 있다. 2. document.myform.
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/CC9sP/btrHwk27v0f/IBF1rPkYdkDeR4k6mFXlp1/img.png)
* 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 방식일 경우 생략해도 된다. 응답으로 받은 ..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/cNzfQg/btrHqnAtUm8/jm8YfaIkNztGbLkb2ecNPk/img.png)
* Shorthand Method 에는 이거 말고도 여러가지가 존재하나 여기서는 딱 2가지만 다뤄보았음. 바로 앞 게시글에서 얘기했듯이 Shorthand Method 보다는 Low-Level Interface에 위치한 ajax() 메소드를 사용하는걸 추천. jQuery의 Ajax가 제공하는 Shorthand Method인 .get() 메소드 예시 * 이 예시에서는 xml을 요청해 보았음 과일의 특성 조사 3000 레몬에 포함되어 있는 쿠엔산은 피로회복에 좋다. 비타민C도 풍부하다. 2000 비타민C가 매우 풍부하다. 다이에트와 미용에도 매우 좋다. 5000 블루베리에 포함된 anthocyanin(안토시아닌)은 눈피로에 효과가 있다. 5000 체리는 맛이 단 성분이 많고 피로회복에 잘 듣는다. 5000 메..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/cj7dyx/btrHqo7ayjH/JvH7TWg8lNA3Eh4CaGzq61/img.png)
Ajax(Asynchronous JavaScript And XML)란? 단어 그대로 해석하면 비동기 자바스크립트와 XML 이다. 그러나, 약어 그대로의 의미보다는 비동기 통신을 통틀어 Ajax라고 부른다. Ajax는 디자인 골격이 만들어져 있는 상태에서 데이터만 요청하여 받아올 때 사용하는 통신이다. 응답으로 받은 데이터를 이용하면 브라우저에서 보여지는 일부분을 수정할 수가 있다.(주 사용목적) 단어만 보면 xml만 요청 가능할 것 같지만 실제로는 json도 요청 가능하다. Ajax가 필요한 이유는 다음과 같다. Ajax 기술을 사용하지 않는 사이트가 특유의 깜빡거림 현상이 생기는 이유는 매번 페이지를 싹 지우고 처음부터 다시 모든 것을 그려내기 때문이다. Ajax를 사용하면 페이지의 일부를 수정하기 위..
XML 파일형식 - XML은 아래와 같이 임의대로 태그 이름을 지어서 만들게 된다. - 데이터를 붙여줄 때, 특정 태그의 자식으로 넣을 수 도 있지만, 속성으로 추가해도 된다. - 다만 읽어들일 때 편하게 각 뭉태기는 같은 형태를 가져야 한다. 3000 레몬에 포함되어 있는 쿠엔산은 피로회복에 좋다. 비타민C도 풍부하다. 2000 비타민C가 매우 풍부하다. 다이에트와 미용에도 매우 좋다. 5000 블루베리에 포함된 anthocyanin(안토시아닌)은 눈피로에 효과가 있다. JSON 파일형식 - [ {}, {}, {}, {}, ,,] 형태로 뭉태기가 나열되며, { } 안에는 데이터가 나열된다. - XML과 마찬가지로 읽어들일 때 편하게 각 뭉태기는 같은 형태를 가지도록 작성해야 한다. [ { "id": "..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bXe98s/btrHpfbrU6j/dThhPtHg7N0zf7WJNjs93K/img.png)
* 좌우 이동은 첫번째 이미지의 왼쪽 공백 만을 이용해서 작성 가능했음 * 상하 이동은 아마도 첫번째 이미지의 위쪽 공백을 이용하지 않을까? 1) .animate({ }, 시간) 인자로 준 시간동안 부드럽게 { } 의 부분이 적용되며, 좌우,상하로 이미지를 부드럽게 움직일 수 있음. 사용예시 « »
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/cDz2cC/btrHwlgCx7E/EA4aCL7QoOYEQxyKyWklMK/img.png)
* 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
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/c8bPBV/btrHsDbuHak/NUZG4pOoQNYoStT3RoRt3K/img.png)
* 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 또 만나요
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/UBBsi/btrHo6TmnHs/5f1uiMiCRHkDznOLGpPzF0/img.png)
바로 접었다 폈다하는 예제 * 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..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/L0Q90/btrHo66UuHa/sKskCkt0yK3wKNerTOGpqk/img.png)
1) .live() 특정 요소에 이벤트 핸들러를 붙여준다.(append()로 같은 요소가 추가되면 다른 요소에서도 이벤트 핸들러가 작동한다.) 2) .die() 이벤트 핸들러를 해제한다.(live() 로 설정한 것에 대해서만 가능. bind()로 붙여준건 unbind()를 이용해야 한다.) 사용예시
* bind()를 사용하여 이벤트 핸들러를 붙일시, append()로 추가된 요소에는 이벤트 핸들러가 붙지 않으므로 새로 추가된 요소에도 이벤트 핸들러가 붙게 하고 싶다면 live(), die()를 대신해서 사용해라 https://ldgeao99-developer.tistory.com/488 1) .bind() 특정 요소에 이벤트 핸들러를 붙여준다.(단, append()로 추가된 다른 요소에는 이벤트 핸들러가 위임되지 않음) 2) .unbind() 이벤트 핸들러를 해제한다.(bind()로 설정한 것만 가능. live()로 붙여준건 die()로 해제시켜야 함) 두가지 이상의 이벤트에 대해 동일한 작업이 수행되게 하고 싶을 때 $('img').bind('click mouseover', function(){ ..