쵸코쿠키의 연습장

GMaps.js 사용 방법 GMaps는 Google지도를 사용하여 사용자에게지도를 표시하기가 매우 쉬운 자바 스크립트 플러그인입니다. 지도, 길 찾기, 정보 상자 등에 대한 포인터를 쉽게 추가 할 수있는 여러 옵션이 있습니다. 이 플러그인은 방대한 옵션이 많기 때문에이 튜토리얼에서는 모든 옵션을 다루지는 않습니다. 가장 많이 사용할 옵션 위주로 다루어 봅니다. 이 플러그인에 대한 모든 옵션을 보려면 Github Repository에서 설명서를 볼 수 있습니다. 문서 GMap.js를 사용하려면 Github에서 최신 버전을 다운로드해야합니다. GMap 다운로드 최신 버전이 나오면 헤드 태그 안에 페이지에 Javascript 파일과 jQuery가 포함됩니다. gmap.js를 페이지에 추가하면 GMaps라는 자..

Mousetrap.js는 웹 응용 프로그램의 키보드 단축키를 쉽게 설정할 수있는 자바 스크립트 플러그인입니다. 특정 키 푸시에서 실행할 기능을 정의 할 수 있습니다. 단일 키 또는 키 조합 또는 일련의 키로 기능을 설정할 수 있습니다. Mousetrap.js는 github에서 구할 수 있으며 다운로드 할 수 있습니다. 브라우저 지원 Mousetrap.js는 모든 브라우저에서 사용할 수 있으며 다음에서 사용할 수 있도록 지원됩니다. Internet Explorer 6+ Chrome Safari Firefox Opera 사용법 다른 Javascript 파일과 마찬가지로 페이지에 파일을 포함시키기 만하면 새로운 Mousetrap 개체가 만들어집니다. 페이지에 mousetrap.js 파일을 포함 시키면 키보드 ..

전체 화면 API는 전체 웹 컨텐츠를 페이지에 표시 할 수 있는 쉬운 방법입니다. 키보드에서 F11 키를 누르는 것과 매우 유사하지만 개발자가 선택하여 수행 할 수 있습니다. 이미지를 클릭하면 브라우저를 전체 화면으로 볼 수 있습니다. 이 기능의 가장 좋은 점은 전체 페이지일 필요는 없으며 HTML 요소를 전체 화면으로 만들 수 있다는 것입니다. 즉, 전체 페이지를 항상 전체 화면으로 표시하는 대신 전체 화면 API를 이미지에 할당하고 이미지를 클릭하면 이미지를 전체 화면으로 집중할 수 있습니다. 전체 화면 API 지원 불행히도 모든 브라우저가 이 기능을 지원하는 것은 아니므로, 사용하기 전에 방문자 브라우저가 이 기능을 지원하는지 확인해야합니다. 사용하는 브라우저가 지원한다면 사용할 수 있고, 브라우저..

어떤 종류의 프론트 웹 개발을 수행했다면 웹 사이트를 개발할 때 jQuery가 얻을 수있는 이점을 이해할 수 있습니다. jQuery의 가장 큰 장점 중 하나는 모든 브라우저에서 동일하게 수행되므로 최신 버전의 크롬에서 수행하는 모든 작업은 IE에서 동일하게 작동한다는 것입니다. jQuery로 수행하는 모든 작업이 다른 브라우저에서 작동한다는 것을 알고 있으므로 이는 jQuery 애니메이션 작업시 큰 이점입니다. JSON 또는 XML jQuery로 작업하더라도 다른 브라우저에서 작업하기가 매우 쉽습니다. 최근 jQuery 블로그에서 jQuery 버전 2에서는 IE8 이하를 지원하지 않을 것이라고 발표했습니다. jQuery 2.0 (2013 년 초, 1.9 이후) : 이 버전은 jQuery 1.9와 동일한 ..

자바 스크립트에서 쿠키 작업 쿠키는 방문자 컴퓨터에 저장되는 임시 데이터의 변수입니다. 그들은 일반적으로 로그인 양식에 내 사용자 이름을 기억하는 것과 같은 것들에 사용됩니다. 이는 데이터베이스에 정보를 저장하기 위해 로그인하지 않아도 재 방문자에 대한 정보를 저장하는 유용한 방법입니다. 쿠키는 방문자 컴퓨터에 저장된 파일 일 뿐이므로 보안 정보를 저장하는 데 쿠키를 사용해서는 안됩니다. 이 기사에서는 서버 측과 클라이언트 측 모두에서 쿠키를 설정할 수 있습니다.이 기사에서는 Javascript를 사용하여 클라이언트 측에서 쿠키를 설정하는 프로세스를 살펴 보겠습니다. Raw Javascript Javascript에서 쿠키로 작업하는 것은 Javascript의 최고의 기능이 아니며 쿠키 설정 및 가져 오기..

웹 디자인의 일반적인 추세는 페이지를 아래로 스크롤 할 때 내용을 이동시켜 중요한 내용이 항상 화면에 표시되도록하는 것입니다. 많은 웹 사이트에서 원하는 정보를 사용하여이 작업을 수행 할 수 있으며, 일부는 상단 탐색에 사용하고, 일부는이 기능을 사용하여 소셜 미디어 단추를 표시하고, 일부는 메일 목록 구독 상자를 항상 볼 수 있도록합니다. Hongkiat 웹 사이트 웹 디자인 웹 사이트 Hongkiat은 이 기능을 사용하여 로고, 소셜 미디어 공유 버튼 및 검색 상자를 항상 방문자에게 보여줍니다. 이를 통해 방문자는 페이지의 어느 곳에서나 현재 페이지를 항상 공유 할 수 있습니다. 웹 사이트 로고는 홈페이지로 돌아가는 링크이며 검색 상자를 통해 방문자는 항상 페이지의 어느 곳에서든 주제를 검색 할 수 ..

오늘의 튜토리얼에서는 jQuery 플러그인을 사용하여 셀렉트 박스의 스타일을 div 및 아이템 리스트를 사용하도록 스타일을 변경합니다. 셀렉트 박스를 div 및 아이템 리스트로 변환하는 이유는 원하는 방식으로 스타일을 쉽게 지정할 수 있기 때문입니다. 일반 셀렉트 박스를 사용하면 맨 위에 선택한 옵션의 스타일을 지정할 수 있지만 셀렉트 박스의 드롭 다운 옵션을 쉽게 스타일 지정할 수는 없습니다. 이들이 아이템 리스트인 경우 선택한 항목에 CSS 클래스를 적용하고 스타일을 변경할 수 있습니다. DropKick.js 맞춤 드롭 다운을 만드는 것은 일반적으로 많은 추가 설정 시간이 필요한 지루한 프로세스입니다. 키보드 탐색과 같은 기본 드롭 다운에 편의성이 없는 경우가 종종 있습니다. DropKick은 지루함..

다음은 jQuery 객체에서 첫 번째 요소를 가져오는 간단한 코드입니다. 페이지에서 처음 5개의 단락을 가져오려면 페이지의 모든 단락을 가져와서 시작합니다. var paragraphs = $('p'); 그런 다음 slice () 메서드를 사용하여 첫 번째 엘리멘트 일부 값을 반환합니다. function returnElements( $obj, $value ){ return $obj.slice(0, $value); } var firstFiveParagraphs = returnElements( $('p'), 5 );

jQuery 로드 메소드 사용 방법 jQuery와 PHP를 사용하여 웹 페이지에 RSS 피드를 표시하는 작은 웹 응용 프로그램을 만드는 방법을 배웁니다. 이를 위해 jQuery AJAX 기능을 사용하여 PHP 프록시에서 데이터를 쉽게 가져 와서 웹 페이지에 표시 할 것입니다. jQuery Ajax 로드 메소드 이 튜토리얼에서는 AJAX Get 함수를 사용하여 파일의 내용을 가져 오는 빠른 방법인 jQuery 로드 메소드를 사용합니다. 그러면 로드 메소드가 1분마다 PHP 페이지의 새 데이터로 자동 실행됩니다. 이 메소드는 URL, 데이터 및 콜백 함수의 3 가지 매개 변수를 사용합니다. .load( url [, data] [, complete(responseText, textStatus, XMLHttpR..

다음 jQuery 스니펫을 사용하여 셀렉트 박스에서 선택한 옵션의 값을 가져오겠습니다. 먼저 새 jQuery 함수를 작성합니다. function getSelectedOption(id){ $('#' + id).val(); } 그리고, 셀렉트 박스를 만들어줍니다. Select Red Blue Green Yellow Purple 이제 셀렉트 박스에 대해 선택된 값을 얻기 위해 방금 만든 함수를 호출하기 만하면됩니다. var text = getSelectedOption('selectBox');

웹 사이트에서 어떤 일을 하려고 시도하지 못하게 막으려고 하지만, 막으려고 하는 것은 일반적으로 할 수 있는 표준활동입입니다. 페이지에서 텍스트를 강조 표시하거나 마우스 오른쪽 버튼을 클릭하여 복사하거나 마우스 오른쪽 버튼을 클릭하여 새 탭에서 이미지를 검색하거나 열 수 있습니다. 이러한 작업을 못하게 하기 위해 약간의 Javascript를 넣은 일부 웹 사이트를 보았습니다. Javascript를 해제하여 쉽게 돌아 다닐 수 있기 때문에 멈추는 데 시간을 낭비하는 이유를 잘 모르겠습니다. 단지 방문자는 성가실 뿐입니다. 그런 다음 팝업 상자와 같은 Javascript로 볼 수 있는 다른 성가신 것들에 대해 생각했습니다. 이러한 작업을 수행하는 데 필요한 성가신 일과 기능을 문서화해보았습니다. 웹 사이트에..

jQuery를 사용하면 코드를 거의 사용하지 않고도 웹 사이트와 상호 작용하는 방식을 변경할 수 있습니다. jQuery에는 스크롤 기능을 포함하여 jQuery가 하는 모든 것을 애니메이션 할 수 있는 함수가 있습니다. 애니메이션 스크롤은 페이지의 특정 위치로 작업하는 것보다 방문자에게 더 나은 효과를 줍니다. 내부 링크를 사용하여 페이지의 다른 부분으로 이동하는 많은 웹 사이트가 있습니다. 이는 앵커 태그의 #과 엘리먼트 ID를 사용하여 수행됩니다. Jump to services 위의 작업을 수행하면 페이지를 클릭 할 때 서비스 div로 페이지를 이동시키는 링크가 작성됩니다. 그러나이 위치로 이동하고 페이지 아래로 떨어지면 방문자에게 가장 좋은 방식은 아닙니다. 방문자가 이 위치를 볼 수 있도록 실제로 ..

브라우저에서 이미지를 올바르게 로드 할 수 없는 경우 사용중인 브라우저에 따라 여러 가지 작업을 수행합니다. 물음표 이미지 또는 아무것도 표시되지 않습니다. 이미지를 찾을 수 없으면 브라우저에서 오류가 발생하며 jQuery를 사용하여 이러한 오류를 찾아 사용할 수 있습니다. 이미지에 이벤트 핸들러를 추가하여 오류가 있는지 확인하고 오류를 반환하면 jQuery가 무언가를 수행하도록 할 수 있습니다. 예를 들어 이미지를 찾을 수 없는 경우 이미지를 누락된 이미지 그림으로 변경하거나 jQuery에서 이미지 상자를 숨길 수 있습니다. 다음은 jQuery 상자를 숨기거나 이미지를 다른 것으로 변경하는 작은 스니펫입니다. // Hide the image on error $("img").error(function()..

HTML 양식에서 텍스트 상자를 채우고 Enter 키를 누르면 나머지 정보를 작성하지 않은 경우에도 양식을 제출합니다. Enter 키를 누를 때 Google 검색 창이 제출하는 등 이 기능을 사용하는 많은 웹 사이트가 있습니다. 텍스트 상자가 하나만 작성되어 있지만 입력 할 필드가 두 개 이상인 경우 Enter 키에 양식을 제출하지 않으려는 경우에 효과적입니다. 이 기본 기능을 변경하려면 양식 제출을 중지하기 위해 페이지에 약간의 Javascript를 추가해야합니다. jQuery를 사용하므로 다음 스니펫은 jQuery를 사용하여 enter 키를 해제하는 방법을 보여줍니다. $("form").keypress(function(e) { //Enter key if (e.which == 13) { return f..

이 튜토리얼에서는 jQuery를 사용하여 페이지의 특정 엘리먼트에서 마우스의 거리를 얻는 방법을 배웁니다. 이 코드는 사용자 상호 작용이 많고 사용자 마우스가 요소와 특정 거리에 있을 때 이벤트를 실행하려는 소규모 웹 앱에서 유용 할 수 있습니다. 거리를 픽셀 단위로 표시하는 레이블과 중앙 위치를 차지할 엘리먼트가 있다고 가정합니다. jQuery 코드 먼저 전역 변수와 이 이벤트에 대한 준비 이벤트를 만듭니다. (function() { var mX, mY, distance, $distance = $('#distance span'), $element = $('#element'); $(document).mousemove(function(e) { distance = calculateDistance($eleme..

CDN의 장점? 많은 대형 웹 사이트에서 jQuery와 같은 CDN 서비스를 제공하고 있습니다. Google은 자체 CDN 네트워크에서 가장 큰 자바 스크립트 라이브러리를 제공합니다. 또한 Microsoft는 CDN을 사용하여 웹 사이트에서 jQuery를 구현할 수 있습니다. 이것의 장점은 jQuery를 로드하면 로컬 서버에서 다운로드되기 때문에 대역폭이 줄어들기 때문에 다운로드 속도가 빨라지고 이 스크립트를 사용하는 여러 웹 사이트에서 이 스크립트를 캐시해야 한다는 것입니다. CDN이 동작안하면? CDN을 사용하여 CSS 및 Javascript를 제공하면 페이지 로딩 시간이 단축됩니다. 그러나 이 CDN에 어떤 일이 발생하면 어떻게 됩니까? jQuery가 로드되지 않고 일부 웹 사이트 기능이 더 이상 ..

사람들에게 페이지를 유지시키려면 웹 사이트에서 좋은 사용자 환경을 만드는 것이 매우 중요합니다. 좋은 사용자 환경을 만드는 가장 좋은 방법은 사람들이 쉽게 사용할 수 있도록 하는 것입니다. 사이트를 사용하기 어려운 경우 사람들을 귀찮게하고 계속 움직일 것입니다. 페이지에 많은 정보가 있는 웹 사이트의 경우 페이지를 아래로 스크롤하여 정보를 소비합니다. 페이지 스크롤이 무한한 Google+와 같은 웹 사이트는 페이지 상단으로 돌아가 링크를 클릭하면 매우 성가실 수 있습니다. 페이지를 새로 고치거나 스크롤 막대를 맨 위로 다시 이동할 수 있습니다. 시작 스크롤이 있는 웹 사이트는 상단으로 쉽게 돌아갈 수 있도록 무언가가 필요합니다. 이것은 맨 위로 스크롤하는 버튼으로 수행됩니다. 이 튜토리얼에서는 jQuer..

다음은 컨텐츠를 표시하거나 숨길 수있는 다른 방법입니다. Javascript HTML 엘리먼트의 ID가 전달되는 원시 Javascript를 사용하는 함수입니다. 그런 다음 getElementById 함수를 사용하여 엘리먼트를 가져옵니다. 이제 현재 스타일이 무엇인지 볼 수있는 엘리먼트가 있습니다. none으로 설정되면 block으로 설정하고 block으로 설정하면 none으로 설정합니다. 표시와 숨기기를 전환하려면 ID로 이 함수를 호출합니다. function toggle_div(id) { var e = document.getElementById(id); e.style.display = ((e.style.display!='none') ? 'none' : 'block'); } 자바스크립트 함수 사용법 원시..

웹 페이지에 이미지 갤러리를 표시하는 것은 jQuery 모달 상자와 마찬가지로 매우 복잡 할 수 있습니다. 오늘날 CSS와 jQuery에서 멋진 이미지 갤러리를 만드는 매우 간단한 방법에 대해 알아보겠습니다. 갤러리에는 기본 이미지와 여러 개의 대체 이미지가 있으며, 호버 이벤트시 기본 이미지가 변경됩니다. CSS는 갤러리의 모양을 설정하는 데 사용되며 jQuery는 대체 이미지로 기본 이미지를 변경하는 데 사용됩니다. HTML 코드 메인 이미지를 위한 영역을 생성한 다음 모든 대체 이미지를 오른쪽에 배치 할 공간을 만들어야합니다. 먼저 모든 것을 위해 컨테이너 div를 시작합니다. 이제 메인 이미지 영역을 만들 수 있습니다.이를 위해 다른 div가 필요하고 이미지가 내부에 있습니다. 지금은 CSS를 사..

많은 사이트에서 이것을 보았을 수도 있습니다. AJAX를 사용하여 방문자의 피드백과 함께 웹 사이트 관리자 이메일 주소로 이메일을 보내는 슬라이드 아웃 피드백 양식을 작성하는 방법을 보여 드리겠습니다. 슬라이드 아웃 양식은 방문자에게 피드백을 요청하기에 좋은 곳입니다. 보기에 숨겨져 있기 때문에 사이트 모양과 사람들이 버튼을 클릭하는 것이 실제로 피드백을 주고 싶어하는 마음을 망치지 않습니다. 이 튜토리얼에서는 jQuery와 PHP를 모두 사용합니다. 피드백 버튼의 클릭 이벤트에서 슬라이드 아웃 효과에 jQuery를 사용하고 서버의 PHP 페이지로 전송되어 피드백을 관리자 이메일에 제출합니다. 이 튜토리얼은 피드백에 관한 것이므로 방문자에게 양식으로 메시지를 제공하도록 요청하기 만하면 됩니다. 사람들이 ..