본문 바로가기

언어공부/JavaScript&jQuery

 (51)
크롬 브라우저로 디버깅 하기 크롬 브라우저로 디버깅 하기 크롬에 내장된 개발자 도구를 사용하면 편리하게 디버깅 할 수 있다. 위의 코드에 고의로 오류가 발생하도록 코드를 작성해 디버깅 해보자. 콘솔(Console) 패널을 이용한 디버깅 코드에서 t1 hello 뒷 부분에 큰 따옴표를 삭제해서 실행하면 오류이기 때문에 아무것도 출력되지 않는다. 크롬 브라우저에서 F12키(또는 오른쪽 클릭-검사)를 눌러 개발자 도구를 열고 Console 패널을 활성화 한다. 그러면 오류가 발생한 부분을 알 수 있게 되는데, debugging.html 파일의 8행의 코드를 수정하면 오류를 해결할 수 있다고 알려준다. 소스(Sources)패널을 이용한 디버깅 앞에서의 오류를 다시 이용해서 이번에는 Sources패널을 클릭한다. 그리고 현재 실행한 HTML..
제이쿼리(jQuery) 기초 문법 - 탭 메뉴 만들기 제이쿼리(jQuery) 기초 문법 탭 메뉴 만들기 탭 메뉴를 클릭하면 버튼이 활성화 되어 해당 탭 메뉴 내용이 나타나게 한다. 여기서 addClass() 메소드와 removeClass()메소드를 사용한다. menu1 menu2 menu3 menu4 menu1 This is menu1 content menu2 This is menu2 content menu3 This is menu3 content menu4 This is menu4 content 스크립트 부분을 보면, ul.tab li부분이 클릭되면, ul.tab li와 .tabcontent 중 'on'클래스를 삭제(removeClass('on'))해 현재 활성화 된 부분을 끄고, 클릭된 ul.tab li와 해당 id의 클래스에 'on'클래스를 추가(ad..
제이쿼리(jQuery) 기초 문법 - 플러그인 직접 제작, 자주 묻는 질문 플러그인 제작 제이쿼리(jQuery) 기초 문법 플러그인 제작을 위한 $.fn.extend() 메소드 $.fn.extend()메소드는 개발자가 직접 제작한 함수를 jQuery에 확장 시켜 주는 역할을 한다. 다음은 $.fn.extend() 메소드의 기본형이다. $.fn.extend()메소드는 두 가지 방법으로 사용할 수 있다. 자주 묻는 질문 플러그인 제작 예제 자주 묻는 질문(FAQ)에 사용할 수 있는 플러그인을 만들어보자. 좋아하는 것 관련 Q1. 좋아하는 색깔은? 노랑색, 남색, 보라색 입니다. Q2. 좋아하는 과일은? 딸기, 바나나, 체리, 골드키위, 망고입니다. 흥미있는 것 관련 Q1. 흥미있는 분야는? 코딩 입니다. Q1. 흥미있는 활동은? 산책, 여행 입니다. if문에서 클릭했던 부분의 div가 hidde..
제이쿼리(jQuery) 기초 문법 - jquery-cookie 플러그인 활용 제이쿼리(jQuery) 기초 문법 jquery-cookie 플러그인 활용 jquery-cookie 플러그인을 사용하면 간편하게 쿠키(cookie)를 생성하고 쿠키 만료일을 설정할 수 있다. 쿠키란 '사이트를 방문한 사용자의 소량의 브라우저 정보를 저장할 수 있는 공간'을 말한다. 소량의 데이터를 저장할 수 있는 저장소를 쿠키 조각에 비유한 것이다. 쿠키는 하나의 도메인당 최대 20개를 생성할 수 있고 최대 4KB까지 저장할 수 있다. 쿠키를 사용하면 '오늘 하루 동안 이 창 열지 않기'나 '최근에 본 상품'기능을 구현할 수 있다. jquery-cookie 플러그인 설치 cdnjs(https://cdnjs.com/)사이트에서 'jquery-cookie'를 검색한다. 해당 주소를 카피해서 브라우저 url창에..
제이쿼리(jQuery) 기초 문법 - 제이쿼리 bxSlider 플러그인 활용 제이쿼리(jQuery) 기초 문법 제이쿼리 bxSlider 플러그인 활용 bxSlider 플러그인은 여러 개의 배너에 슬라이드 기능을 간편하게 적용할 수 있는 플러그인이다. 또한 bxSlider 플러그인은 모바일에도 최적화 되어 있어 슬라이드 기능도 동일하게 동작하며 반응형 디자인에도 최적화 되어 있다. bxSlider플러그인 설치 1.bxSlider(http://bxslider.com/)홈페이지에서 [Click here to install] 버튼을 클릭한다. 2. install 페이지에서 [Download jquery.bxslider.zip here]를 클릭하면 플러그인 파일을 내려받을 수 있다. 또는 라이브러리 링크를 복사해서 붙여넣는다.
제이쿼리(jQuery) 기초 문법 - Ajax($.get())로 XML 데이터 바인딩 제이쿼리(jQuery) 기초 문법 Ajax($.get())로 XML 데이터 바인딩 바인딩(binding)은 '묶다'라는 의미이다. 비동기 통신 기술을 이용하여 서버 데이터베이스(DB)에 데이터를 요청하고, 데이터 베이스에 요청한 데이터를 받아와 HTML 문단 태그에 결합하는 것을 바인딩이라 부른다. **XML(eXtensible Markup Language) XML은 확장 가능한 언어이므로 태그명을 사용자가 임의로 작성할 수 있다. 사용자가 임의의 태그명을 만들어 사용할 수 있기 때문에 많은 지식이 없어도 된다. 즉 서버의 데이터를 XML 데이터로 가공하는 것은 많이 어렵진 않은 편이다. XML은 주로 데이터를 배포할 목적으로 사용된다. 내용 XML의 기본형으로 상단에는 버전과 인코딩 방식을 선언하고 사..
제이쿼리(jQuery) 기초 문법 - Ajax($.getJSON())로 JSON 데이터 바인딩 제이쿼리(jQuery) 기초 문법 Ajax($.getJSON())로 JSON 데이터 바인딩 바인딩(binding)은 '묶다'라는 의미이다. 비동기 통신 기술을 이용하여 서버 데이터베이스(DB)에 데이터를 요청하고, 데이터 베이스에 요청한 데이터를 받아와 HTML 문단 태그에 결합하는 것을 바인딩이라 부른다. 서버언어를 사용해 데이터베이스를 요청했다는 가정하에 가상의 회원정보 데이터를 만들어 사용할 수 있는데, mockaroo 사이트를 이용하면 데이터베이스에 데이터를 요청하여 받은 것 처럼 회원 정보 데이터 파일(JSON)을 생성할 수 있다. ** JSON(JavaScript Object Notation) 자바스크립트의 객체 표기법을 JSON(JavaScript Object Notation)이라고 부른다...
제이쿼리(jQuery) 기초 문법 - Ajax 관련 메소드 (2) 제이쿼리(jQuery) 기초 문법 Ajax 관련 메소드 Ajax(Asynchronous JavaScript and XML)는 클라이언트(사용자 컴퓨터)가 비동기 방식으로 자바 스크립트를 이용하여 화면 전환 없이 서버(서비스를 제공하는 컴퓨터)측에 자료(XML, JSON(JavaScript Object Notation), 텍스트, HTML)를 요청할 때 사용한다. Ajax 관련 메소드는 모두 Ajax 기술을 기반으로 제작된 자료 요청 메소드이다. $.ajax() 메소드 $.ajax() 메소드는 사용자가 지정한 URL 경로에 파일의 데이터를 전송하고 입력한 URL 경로 파일로부터 요청한 데이터를 불러온다. 이 때 불러올 수 있는 외부 데이터로는 텍스트, HTML, XML, JSON 형식 등이 있고. 선택한 ..

티스토리툴바