쵸코쿠키의 연습장

대부분의 웹 사이트에서 보안이 가장 큰 문제이므로 웹 사이트를 최대한 안전하게 만드는 것이 중요합니다. 그러나 개발자가 코드를 사용하여 수행할 수 있는 모든 예방 조치에 비해 사용자가 강력한 암호를 가지고 있지 않다는 것입니다. 사용자가 자신의 비밀번호를 입력할 수 있는 시스템을 구축하는 경우, 비밀번호가 얼마나 안전한지 알려주는 것이 좋습니다. 이 튜토리얼에서는 사용자 암호를 확인하고 보안 수준을 알려주는 작은 JQuery 스니펫을 만들 것입니다. The HTML Form 먼저 암호를 변경할 수 있는 간단한 양식을 작성하여 이 튜토리얼을 시작하겠습니다. 여기에 암호 확인 상자가 포함된 암호 입력 상자가 포함됩니다. 사용자가 암호를 잘못 입력하지 않았는지 확인합니다. 암호를 만들 때 문자를 잘못 입력했기..

웹 사이트 성공을 위해 페이지 로딩 속도가 매우 중요하므로 가능한 한 웹 사이트의 모든 영역을 가속화해야합니다. 현재 대부분의 웹 사이트에서 제공하는 기능 중 하나는 소셜 미디어 버튼으로, 방문자가 좋아하는 소셜 네트워크에서 기사를 쉽게 공유 할 수 있습니다. 또한 방문자가 각 소셜 네트워크에서 페이지가 몇 번 공유되었는지 확인할 수 있습니다. 이러한 소셜 네트워크 버튼의 문제점은 AJAX를 통해 버튼을 표시하는 데 필요한 모든 정보를 얻기 위해 많은 HTTP 요청을 해야 한다는 것입니다. 버튼의 이미지와 페이지가 공유 된 횟수를 가져옵니다. Facebook, Twitter 및 Google Plus에는 주요 소셜 네트워크가 3 개 이상있는 것이 일반적이지만 Pinterest, LinkedIn 및 기타 여..

웹 사이트의 로딩 속도를 높이고, 이미지를 압축하고, 웹 호스트를 개선하고, 웹 사이트 코드를보다 효율적으로 만들기 위해 할 수 있는 일이 많이 있습니다. 그러나 이 디자인과 관련하여 한 가지 선택은 각 페이지가 처음로드 될 때 만드는 HTTP 요청의 양을 줄이는 것입니다. 각 페이지에서 HTTP 요청의 양을 조사 할 때 Disqus에서 많은 양의 HTTP 호출이 발생하는 것을 알았습니다. 이것은 모든 웹 사이트에 배치 할 수 있는 주석 시스템이며, 페이지에 몇 줄의 Javascript를 포함시키기만 하면 어떤 사이트에도 쉽게 추가 할 수 있습니다. 사이트에서 Wordpress를 실행중인 경우 Wordpress 플러그인 만 다운로드하면 되므로 사이트에 포함하기가 훨씬 쉽습니다. Disqus는 함께 제공되..

Windows 8이 새로운 디자인의 첫 번째 그림을 발표 한 이후 메트로 스타일에 열광했습니다. 사람들은 좋아하고, 현대적이며, 깨끗하고, 단순하며, 모바일 장치, 특히 태블릿 장치에서 사용하기가 정말 쉽습니다. 2013년에는이 메트로 스타일을 디자인에 적용하는 더 많은 웹 사이트를보기 시작하는 추세가 될 것입니다. 그러나 웹 사이트의 경우 이것은 좋은 생각입니다.이 스타일링은 다른 웹 사이트 디자인에서 작동합니다. 이 자습서에서는 메트로 스타일 대시 보드를 만들고이를 위해 gridster라는 매우 유용한 jQuery 플러그인을 사용합니다. Gridster Gridster를 사용하면 드래그 앤 드롭 다중 열 그리드를 만들 수 있습니다. 그리드의 모든 레이아웃은 플러그인에 의해 처리되며 각 상자가 얼마나 ..

Wordpress 관리 영역에서 코딩 할 때 Javascript가 필요한 일부 기능을 코딩하는 경우가 있습니다. Wordpress에는 jQuery라는 내장 Javascript 라이브러리가 제공됩니다. Javascript 프레임 워크로 Javascript로 거의 모든 작업을 매우 쉽게 수행 할 수 있습니다. 관리 영역에서 작업 할 때 jQuery는 이미 모든 페이지에 포함되어 있으며 고유 한 Javascript 파일에서 사용할 수 있습니다. 그러나 jQuery로 작업 할 때 일부 사람들이 겪는 일반적인 문제가 있으며 이는 $ 기호를 사용하는 것입니다. 대부분의 사람들은 스크립트 태그를 사용하여 파일을 로드하고 $ (document) .ready () 함수를 사용하여 jQuery 코드를 사용하여 jQuery..

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..