쵸코쿠키의 연습장

웹 페이지에서 사용자 입력으로 작업 할 때 모든 입력을 확인하는 것이 중요합니다. 이는 사용자가 입력하는 것이 예상되는 데이터 유형인지 확인할 수 있도록 하기 위한 것입니다. 서버 측 유효성 검사 만 수행하는 경우 서버 측과 클라이언트 측 유효성 검사를 모두 수행하는 것이 중요합니다. 그러면 클라이언트 측에서 수행 할 수 있는 작업을 위해 서버에서 불필요한 작업을 수행하게 됩니다. 그러나 클라이언트 측에서만 유효성 검사를 수행하는 경우 Javascript를 끄면 이 유효성 검사를 무시할 수 있습니다. 그렇기 때문에 서버 측 및 클라이언트 측 유효성 검사를 모두 수행하는 것이 중요합니다. 그러나 문제는 이러한 언어가 다르고 기능이 다르기 때문에 Javascript에는 사용자 입력을 완전히 검증하는 데 필요..

최근에는 iframe 내의 코드에서 JavaScript로 작업 해야 하는 프로젝트가 있습니다. 직면한 문제는 iframe 내부의 웹 사이트가 JavaScript를 로드하는 페이지보다 로드하는 데 시간이 훨씬 오래 걸린다는 것입니다. 일반적으로 jQuery로 작업 할 때 코드 또는 init 함수를 document ready 함수로 감싸서 웹 사이트가 로드 될 때만 코드가 실행되도록 합니다. $( document ).ready(function() { console.log( "Webpage is ready!" ); }); 그러나 iframe 사이트가 로드되지 않았으므로 iframe 내부에서 선택기를 찾을 수 없기 때문에 jQuery가 실패한다는 것을 의미 하므로이 상황에서는 이 방법을 사용할 수 없습니다. 따..

기본적으로 jQuery slideDown은 분명히 요소를 아래로 밀어 내용을 표시하고 slideUp은 요소를 위로 밀어 내용을 숨깁니다. slideUp을 사용하여 내용을 표시하고 slideDown을 사용하여 내용을 숨겨서 이러한 동작을 취소하려면 어떻게해야 할까요? Query UI 슬라이드 함수를 사용하여 메소드의 방향을 직접 변경할 수 있지만 jQuery 라이브러리를 사용하여 jQuery UI 라이브러리를 로드하여 애플리케이션에 가중치를 더해야합니다. 예를 들어 아래와 비슷한 코드를 사용할 수 있습니다. $('button').click(function () { $(this).hide('slide', { direction: "down" }, 1000); }); 다른 옵션은 애니메이션 기능을 사용하여 슬라..

이 튜토리얼에서는 등록 또는 로그인 form에 비밀번호 표시 버튼을 만드는 방법을 간략하게 살펴 보겠습니다. 등록 양식을 작성할 때 이 form을 가능한 작게 작성하는 것이 가장 좋습니다. form 필드 중 하나는 비밀번호 용입니다. 비밀번호 필드를 표시 할 때 비밀번호 확인 필드를 표시하고 일치하는지 확인하는 일반적인 경향이 있습니다. 이는 사용자가 오타에서 필드에 잘못된 비밀번호를 입력하지 않을 가능성을 높이기 위한 것입니다. 사용자에게 암호를 확인하도록 요청하는 대신 일반적인 또 다른 추세는 암호 표시/숨기기 버튼이 있는 것입니다. 암호 필드의 문제는 암호 필드가 화면에 표시되는 텍스트를 숨겨서 암호를 텍스트 상자에 입력하여 다른 사람이 입력 할 때 암호를 볼 수 없는 이유입니다. 비밀번호로 오타를..

배열 또는 객체와 같은 다른 데이터 세트를 반복 할 수있는 jQuery each() 함수의 사용법을 살펴 보겠습니다. jQuery each()은 jQuery에서 가장 많이 사용되는 함수 중 하나이므로 수행 할 수 있는 작업을 이해하는 것이 중요하다고 생각합니다. jQuery 각 함수는 데이터를 반복하는 데 사용되는 가장 쉬운 방법은 다른 언어의 foreach 루프와 유사하다는 것입니다. 예를 들어 페이지의 모든 링크에 target = "_blank"를 추가하려는 경우 모든 링크를 선택하고 추가 할 각 링크를 반복합니다. 예를 들어 동일한 선택기에서 여러 DOM 객체를 반복하는 데 사용할 수 있습니다. $('a').each(function(i){ $(this).attr('target', '_blank');..

jQuery에서 HTML 요소의 모든 내용을 가져와야 할 때마다 편리한 함수 .html ()을 사용할 수 있습니다. Headers Paragraph of text html () 함수를 사용하는 방법에 대한 데모는 위의 데모를 참조해도 좋습니다. 이것은 컨텐츠 변수를 .content div의 컨텐츠로 채웁니다. 최근 프로젝트에서 겪었던 문제는 요소의 HTML 내용을 가져와야하지만 .html()에 포함되지 않은 부모 element에도 필요하다는 것입니다. .html () 함수를 실행하면 element의 내용만 가져오고, element 자체는 반환하지 않습니다. 그런 다음 다른 함수 .wrap()을 발견하여 선택한 HTML element 주위에 다른 HTML 요소를 래핑 할 수 있습니다. Headers Par..

최근 프로젝트에서 HTML 선택 드롭 다운을 채울 많은 AJAX 요청을 수정해야했습니다. 이 게시물에서는 AJAX 요청의 반환을 처리하고 드롭 다운을 채울 방법을 간략하게 보여줍니다. 먼저 ID 속성을 사용하여 페이지에 HTML 드롭 다운을 만듭니다. 다음으로 jQuery에서 urlPath에 대한 AJAX POST를 생성하여 JSON 객체에 필요한 데이터를 반환합니다. 이 AJAX 요청이 리턴되면 응답을 구문 분석하고 작성할 helpers.buildDropdown 함수에서 이를 사용합니다. $.ajax({ type: "POST", url: urlPath, success: function(data) { helpers.buildDropdown( jQuery.parseJSON(data), $('#dropdow..

이 튜토리얼에서는 삭제와 같은 것을 위해 form에 확인 모달 상자를 추가하는 방법입니다. 대부분의 튜토리얼은 한 가지 목적으로 설계된 양식 으로이 작업을 수행하는 방법과 양식에 채워진 엔티티를 삭제하는 방법에 대한 예만 보여줍니다. 즉, 삭제를 위해 제출 버튼이 하나만 있음을 의미합니다 . form에 두 개의 제출 단추가있는 대화 상자를 추가하는 방법을 보여줍니다. 즉, 하나의 제출 단추를 사용하여 엔티티를 편집하고 다른 제출 단추를 사용하여 form을 삭제하는 편집 양식에서 이 예제를 사용할 수 있습니다. HTML Form And Modal Box 먼저 HTML 양식을 만들어 시작하겠습니다. 중요한 부분은 제출 버튼과 JavaScript이므로 이 예제를 매우 기본적입니다. 아래는 모달 상자 내용이 아..

웹 사이트 속도를 높이는 일반적인 방법은 지연 로딩이라는 기술을 사용하는 것입니다. 즉, 처음에 페이지에 필요한 모든 것을 로드하는 대신 필요할 때만 리소스를 로드합니다. 예를 들어 이미지를 느리게 로드 할 수 있으므로 페이지를 올바르게 보는 데 필요한 이미지로만 페이지를 시작할 수 있으며, 보이지 않는 다른 이미지는 바로로드 할 필요가 없습니다. 사용자가 페이지를 아래로 스크롤하면 이미지를 볼 수 있는지 찾고 필요할 때 이미지를 느리게 로드 할 수 있습니다. JavaScript 또는 CSS 파일과 같은 다른 리소스를 사용하여 동일한 작업을 수행 할 수 있으며 스크립트를 언제 사용해야하는지 스크립트에 로드 할 수 있습니다. 과거에 사용한 예는 버튼의 클릭 이벤트에 Disqus 주석을 로드하는 것입니다. ..

최근에 포함하는 div의 배경색을 변경하는 데 유용한 리소스를 찾았습니다. 이것은 이미지에서 가장 지배적 인 색상을 검색하고 요소 배경을 포함하는 색상을이 색상으로 변경하는 jQuery 플러그인입니다. 단 몇 줄의 Javascript로 멋진 쇼케이스 페이지를 만들 수 있습니다. 이 플러그인을 jQuery Adaptive Background Plugin이라고합니다. 이 jQuery 플러그인을 사용하려면 다음과 같이 div를 감싸는 많은 이미지가 있는 페이지가 있어야합니다. 플러그인이 실행되면 data-adaptive-background 속성을 가진 이미지를 검색하고 이 이미지에서 지배적인 색상을 찾습니다. 다음을 사용하도록 Javascript를 설정하려면 먼저 Github 프로젝트 페이지에서 플러그인을 다..

이 튜토리얼은 이제 구식입니다. Javascript 복사 및 붙여 넣기에서 자세한 정보를 찾을 수있는 기본 브라우저 복사 및 붙여 넣기 기능을 사용하는 것이 좋습니다. 최근 프로젝트에서는 사용자의 클립보드에 텍스트를 복사하는 단추를 만들어야 했습니다. 버튼 클릭 이벤트에서 이것을 만들려고 할 때 Javascript 또는 jQuery로 하고 싶었습니다. 이 문제에 대한 조사를 실시한 결과, 보안 때문에 클립보드에 JavaScript를 복사할 수 없다는 것을 알게 되었습니다. 이는 jQuery가 텍스트를 클립보드에 복사할 수 없다는 것을 의미하기도 했습니다. 그래서 다른 방법을 찾아야 했습니다. 한참 검색해보니 지투브에서 호스팅되는 jQuery 플러그인이 ZeroClipboard입니다. Adobe 플래시와 ..

jQuery를 사용하여 요소의 크기를 변경하는 경우 크기를 변경하는 데 사용할 수 있는 두 가지 방법이 있습니다. 먼저 첫 번째 매개 변수를 높이 또는 너비로 전달하고, 두 번째 매개 변수를 값이 되는 .css() 방법을 사용할 수 있습니다. $('.element').css('height', new_height_value); $('.element').css('width', new_width_value); 다른 옵션은 .height() 메서드와 .width() 메서드를 사용하는 것입니다. $('.element').height(new_height_value); $('.element').width(new_width_value); 이 기사에서는 이 두 가지 방법의 차이를 살펴보겠습니다. height() meth..

대부분의 웹 사이트에서 보안이 가장 큰 문제이므로 웹 사이트를 최대한 안전하게 만드는 것이 중요합니다. 그러나 개발자가 코드를 사용하여 수행할 수 있는 모든 예방 조치에 비해 사용자가 강력한 암호를 가지고 있지 않다는 것입니다. 사용자가 자신의 비밀번호를 입력할 수 있는 시스템을 구축하는 경우, 비밀번호가 얼마나 안전한지 알려주는 것이 좋습니다. 이 튜토리얼에서는 사용자 암호를 확인하고 보안 수준을 알려주는 작은 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 지원 불행히도 모든 브라우저가 이 기능을 지원하는 것은 아니므로, 사용하기 전에 방문자 브라우저가 이 기능을 지원하는지 확인해야합니다. 사용하는 브라우저가 지원한다면 사용할 수 있고, 브라우저..