본문 바로가기

Java Script20

자바스크립트 작성 방식 : inline / internal / External Inline JavaScript 인라인 자바스크립트 태그 내에 직접 자바스크립트 명령어를 작성하는 방법을 인라인 자바스크립트라고 한다. 이벤트 핸들러 속성을 지정해서 자바스크립트를 실행하도록 하는 고전적인 방식으로 onclick이 인라인 자바스크립트 방식이다. 허나 HTML 문서와 분리하는 것을 권장하기 때문에 onclick을 사용하는 inline JavaScript 방식은 자주 사용하지 않는다. ㅇ 해당 h1 태그 클릭 시 알림창에 ok!가 텍스트가 보이게 하는 것 인라인 방식 자바스크립트 내부 자바스크립트 Internal JavaScript 내부 자바스크립트 HTML 문서 내 별도의 영역에 자바스크립트를 작성하는 방식 태그 내에 작성, 외부 자바스크립트 2019. 5. 31.
jQuery 예제, To Do List & 학생 점수 입력 테이블 To Do List 만들기 정보를 입력 받아서 List 형태로 추가하기 아주 간단한 제이쿼리 구현 기능 input으로 값을 입력 받고, 해당 값을 에 추가 Please enter your to do! ADD To Do List ㅇ 사용자 화면 학생 점수 입력 받아 출력하는 테이블 만들기 하나가 아닌 여러개의 input으로 값을 입력 받아서 테이블에 정보를 추가하는 기능 받아온 여러개의 정보를 태그로 한줄 한줄 테이블에 append 하는 기능 이름 국어 영어 수학 등록 시험 점수 이름국어영어수학 ㅇ 사용자 화면 2019. 5. 14.
동일 예제 JavaScript VS jQuery 비교! 학생의 성적을 가지고, 총점과 평균을 구해서 테이블로 보여주는 코드 구현 자바스크립트와 제이쿼리를 사용하여 동일한 예제를 구현 하는 두개의 차이점을 명확하게 알 수 있다. 제이쿼리의 경우 자바스크립트의 비해 조금 더 쉽게, 짧은 코드로 구현이 가능하게 해준다. 아래와 같은 배열을 활용하여 테이블을 만드는 예제 var arr = []; arr.push({name:"박자바",kor:100,eng:100,math:95}); arr.push({name:"김파이",kor:80,eng:75,math:100}); arr.push({name:"홍코드",kor:95,eng:90,math:87}); 자바스크립트 코드 출력 이름 총점 평균 제이쿼리 코드 출력 이름 총점 평균 2019. 5. 14.
jQuery 예제, 버튼 이벤트로 정보 숨기고 보이기(토글) 사용자가 버튼을 클릭하는 경우 페이지를 동적으로 변경하는 경우가 많다. 그런 경우에 토클을 사용하면 보여지고 보여지지 않고가 순차적으로 처리된다. 좋아요 기능 같은 것을 구현할 때 하트를 클릭하면 색이 변하고, 채워진 하트를 클릭하면 다시 빈 하트가 되게 하는 것 등이 토클로 가능하다. 코드 : 토클 기능 코드 - 참고로 토글의 경우 제이쿼리 버전에 따라 제대로 실행이 안되는 경우가 있으니 참고! Open & Close HTML5 Tutorial With HTML you can create your own Website. This tutorial teaches you everything about HTML. HTML is easy to learn - You will enjoy it. Open & Clos.. 2019. 5. 14.
jQuery 예제, 체크박스 모두 선택 설문을 받거나 회원 가입을 하는 경우 사용자의 정보를 알기 위해서 체크박스를 사용하는 경우가 있다 이런 경우에 사용자 입장에서 모든 것을 선택하고 모든 선택을 해제해야 하는 경우가 있는데 이런 것을 제이쿼리로 구현이 가능하다. 간단하게 구현 가능한 기능. 코드 : 체크박스 모두 선택 취미 모두 책읽기 영화보기 노래듣기 요리하기 게임하기 결과 : 사용자 HTML ㅇ 모두라는 체크박스를 클릭하면 전체 선택이 되고, 전체 해제가 되는 기능 2019. 5. 14.
제이쿼리로 이미지 슬라이더 구현 이미지가 넘어가도록 동작하는 것, 플래시를 이용해서 많이 했지만, 무거워서 잘 사용하지 않고 자바스크립트를 활용해서 보통 쓴다. 자바스크립트를 사용해서 플래시나 실버라이트의 시각적 효과를 구현하려면 다음 세가지 사항을 CSS로 미리 지정해야 한다. 캔버스의 width 스타일 속성과 height 스타일 속성은 반드시 지정 캔버스의 position 스타일 속성은 Relative로 지정 캔버스의 overflow 스타일 속성은 hidden으로 지정 구성요소의 position 스타일 속성은 Absolute로 지정 이미지 슬라이더 코드 Trip Photo 오사카 휴식을 위해 떠나고 싶은 곳, 탐색 유럽 유럽의 분위기는 파리! 휴양지 휴식을 위해 떠나고 싶은 곳, 탐색 세부 휴식을 위해 떠나고 싶은 곳, 탐색 오키나.. 2019. 5. 14.
jQuery 애니메이션 큐 (이벤트 누적 제어) 제이쿼리를 통해 애니메이션을 주다보면 이벤트 발생되는 것에 따라 애니메이션이 누적되어 사용자는 다른 작업을 하고 싶은데 누적된 애니메이션을 확인하고 있어야하는 상황이 발생하기도 한다. 이러한 것을 알기 위해서는 애니메이션 큐에 대해서 알고 있어야 한다. 참고로 큐는 순차적으로 이벤트가 누적되어 누적된 순서대로 처리가 되는 자료구조이다. [Java/Java Basic] - 자료구조, Stack 스택과 큐 Queue 자료구조, Stack 스택과 큐 Queue 프로그램 개발할 때 가장 많이 사용하는 자료 구조인 스택과 큐 스택은 상자를 쌓아 올리는 형태의 구조이고, 큐는 일상 생활에서 많이 사용하는 방식의 자료 구조 '선착순' 정보처리기사 필기에도 자주 기출문제.. developsd.tistory.com 애니.. 2019. 5. 14.
jQuery 이벤트 메소드 제이쿼리를 사용하면 이벤트에 대한 제어를 많이 하게 된다. 사용자가 마우스를 올리거나, 타이핑을 하는 경우에 DB의 정보를 가져오거나, 특정 노드를 추가하거나, CSS를 변경하는 등 이러한 것이 제이쿼리를 통해 가능하기 때문에 이벤트를 어떻게 발생시키고, 삭제 하는지 제어하는 방법에 익숙해 지는 것이 좋다. 이벤트 연결 제거 unbind( ) / one( ) one( ) : 딱 한번만 연결하게 하는 것 unbind( ) 메서드 사용 방법 $(선택자).unbind( ) $(선택자).unbind( eventName ) $(선택자).unbind( eventName, function ) hover( ) mouseenter 이벤트와 mouseleave 이벤트를 동시에 연결 제이쿼리가 아닌 css로도 처리 가능하여.. 2019. 5. 14.
jQuery, 특정 태그 선택 후 값 처리 선택자 기본적으로 자바스크립트, 제이쿼리를 하다보면 가장 많이 사용하게 되는 것이 특정 태그를 선택하여 값을 가져오거나 값을 넣는 것을 많이 하게 된다. 특정 태그를 선택할 수 있어야, 해당 태그의 CSS를 변경하거나 특정 노드를 더 추가하는 것도 가능하다. 고정된 HTML을 변경시키면서 사용자가 편리하게 사용할 수 있도록 하는 것이 자바스크립트와 제이쿼리를 많이 사용하는 이유중 하나이기 때문에 가장 잘 알고 있어야 하는 것 중 하나가 선택자를 잘 다루는 것! 전체선택자 : * $(function( ) { $( ' * ' ).css('color','red'); }); 태그선택자 : '태그명' $( ' h1' ).css('color','red'); 클래스선택자 : '.클래스명' $( ' .c' ).css(.. 2019. 5. 14.
반응형

티스토리툴바