스크립트 & 소스코드 공유

<style>
#video-box {min-width:1200px; position:relative;}
#video-box .main-banner {display:none; width:100%; height:750px;  overflow:hidden;position:relative; background-color:#000;}
#video-box .main-banner.open{display:block;}
#video-box .main-banner video {position:absolute;width:100%;top:50%; left:50%;transform:translate(-50%,-50%);border:0;}
#video-box .dot-box {position:absolute; width:100%; bottom:0; text-align:center;}
#video-box .dot-box a{display:inline-block; margin:0.5em; width:20px;height:20px; border-radius:50%; background-color:#06F;text-indent:-9999px;}
#video-box .dot-box a.open{background-color:yellowgreen;}
@media screen and (max-width:1400px) { #video-box .main-banner {height:550px;} }
</style>
<div id="video-box">
<div class="main-banner open">
<video autoplay muted>
<source src="https://www.bodyfriend.co.kr/video/1.mp4" type="video/mp4">
</video>
</div>
<div class="main-banner">
<video muted>
<source src="https://www.bodyfriend.co.kr/video/main02.mp4" type="video/mp4">
</video>
</div>
<div class="main-banner">
<video muted>
<source src="https://www.bodyfriend.co.kr/video/main03.mp4" type="video/mp4">
</video>
</div>
<div class="dot-box"></div>
</div>
<script>
$(function() {
var len = $('.main-banner').length
$('.main-banner').each(function(index, element) {
$(this).addClass('v' + index);
var video = $(this).find('video')[0];
video.onended = function(e) {
$('.main-banner').removeClass('open');
$('.main-banner.v'+((index+1) % len)).addClass('open');
$('.main-banner.v'+((index+1) % len)).find('video')[0].play();
$('#video-box a.dot').removeClass('open');
$('#video-box a.dot.v'+((index+1) % len)).addClass('open');
};
$('#video-box .dot-box').append('<a href="#" class="dot v'+index+'" data-idx="'+index+'">'+(index+1)+'번째 비디오</a>');
});
$('#video-box a.dot').click(function(e) {
var idx = $(this).data('idx');
$('.main-banner.open').find('video')[0].pause();
$('.main-banner').removeClass('open');
$('.main-banner.v'+(idx % len)).addClass('open');
$('.main-banner.v'+(idx % len)).find('video')[0].play();
$('#video-box a.dot').removeClass('open');
$('#video-box a.dot.v'+(idx % len)).addClass('open');
});
$('#video-box a.dot.v0').addClass('open');
});
</script>

//form요소를 찾아서 그의  submit 이벤트를 가로챈다.
  $('form').submit(function (event) {
    //ajax를 사용하여 폼을 전송시키고자 한다(페이지의 새로고침을 막는다)
    event.preventDefault();
    //필요하다면, 유효성 검사 코드를 이부분에 추가하도록 한다.
    // .....
    //이는 ajax 가 사용되었음을 서버측에 알리는 용도이다.
    $('input[name='usingAJAX']', this).val('true');
    //폼에대한 참조를 저장한다.
    var $this = $(this);
    //폼요소의 url을 가로챈다.
    var url = $this.attr('action');
    //전송시킬 폼 데이터를 준비한다.
    var dataToSend = $this.serialize();
    // 서버측처리이후에 실행되어야 할 콜백함수
    var collback = function (dataReseived) {
      //폼을 숨긴다(폼에대한 참조를 $this에 저장해 놓았기에 가능)
      $this.hide();
      //서버로부터 다음과 같은  HTML 조각을 반환 맏을 것이기에 DOM에 이 HTML 조각이 추가된다.
      //<div id='result'>Your favorite food is pizza!
      // Thanks for telling us!</div>
      $('body').append(dataReseived);
    };
    //수신되는 데이터의 형식(이번예제에서는 html 코드가 수신될 것이라 기대한다)
    var tyhpeOfDataToReceive = 'html';
    //폼을 전송한 후 데이터의 수신을 기다린다.
    $.get(url, dataToSend, collback, tyhpeOfDataToReceive);
  });//.submit() 을 닫는다.

join()

//배열의 모든 원소를 문자열로 변환후 구분자로 이어 붙여서 반환.(구분자 기본값으로는 콤마(,)가 사용됨)
var arr = new Array(1, 2, 3);
var str = arr.join();
str : "1,2,3"

String.split()

//Array.join() 함수와 반대되는 기능을 한다. 구분자를 입력받아 해당 구분자로 문자열을 자른뒤 배열로 반환한다
var str = "1,2,3";
var arr = str.split(",");
arr : ["1", "2", "3"]

reverse()

//배열 안의 원소들의 순서를 뒤집는다. 주의할 점은 뒤집은 결과를 반환하는 방식이 아닌 함수 내부에서 변환이 진행 된다는 점이다
var arr = new Array(1, 2, 3);
arr.reverse();
arr : [3, 2, 1]

sort()

//배열 안의 원소들을 정렬하여 반환한다. reverse() 함수와 마찬가지로 배열 내에서 직접 수행된다.
//별도의 전달 인자 없이 호출할 경우 배열 안의 원소들을 알파벳 순으로 정렬한다.
//배열 안의 원소가 문자열이 아닐 경우 임시로 문자열 변환 작업이 수행된다.
var arr = new Array("banana", "cherry", "apple");
arr.sort();
arr : ["apple", "banana", "cherry"]

concat()

//기본의 배열원소 뒤에 전달 인자들을 추가한 배열을 반환한다. 허나 중복하여 중첩된 배열은, 원소로써 분리되어 나오지 않음을 주의 하자.
var arr = new Array(1, 2, 3);
arr.concat(4, 5) // arr : [1, 2, 3, 4, 5]
arr.concat([4, 5]) // arr : [1, 2, 3, 4, 5]
arr.concat([4, 5], [6, 7]) // arr : [1, 2, 3, 4, 5, 6, 7]
arr.concat([4, [5, [6, 7]]) // arr : [1, 2, 3, 4, 5, 6, 7]]

slice()

//배열의 일부, 혹은 부분배열을 반환한다. 전달인자가 음수일 경우 배열의 마지막 원소에서 상대적인 위치로 배열 원소들을 지정한다.
var arr = new Array(1, 2, 3, 4, 5);
arr.slice(0, 3); // arr : [1, 2, 3]
arr.slice(3); // arr : [4, 5]
arr.slice(1, -1); // arr : [2, 3, 4]
arr.slice(-3, -2); // arr : [3]

splice()

//배열에 원소를 삽입하거나 원소를 제거하려고 할때 사용하는 함수이다. 하지만 본 함수는 slice(), concat() 과는 달리 변경 결과를 반환하는 방식이 아닌 배열 내부에서 수행된다.
// 삭제
var arr = new Array(1, 2, 3, 4, 5, 6, 7, 8);
arr.splice(4); // [5, 6, 7, 8] 반환, arr : [1, 2 ,3 ,4]
arr.splice(1, 2); // [2, 3] 반환, arr : [1, 4]
arr.splice(1, 1); // [4] 반환, arr : [1]

// 삽입
var arr = new Array(1, 2, 3, 4, 5);
a.splice(2, 0, 'a', 'b'); // []반환, arr : [1, 2, 'a', 'b', 3, 4, 5]
a.splice(2, 2, [1, 2], 3); // ['a', 'b']반환, arr : [1, 2, [1, 2], 3, 4, 5]

push(), pop()

//배열을 스택처럼 조작할 수 있다. push() 는 원소의 삽입 pop() 은 원소의 제거를 수행하며, 두 함수 모두 배열의 끝에서 연산을 수행한다. 
//배열 자체에서 연산이 수행되며 pop() 함수의 경우 제거한 원소를 반환하는 특징이 있다.
var arr = new Array()
arr.push(1, 2); // arr : [1, 2]
arr.pop(); // arr : [1], 2 반환
arr.push([4, 5]); // arr : [1, [4, 5]]
arr.pop(); // arr : [1], [4, 5] 반환
arr.pop(); // arr : [], 1반환

unshift(), shift()

//push(), pop() 과는 다르게 배열의 끝이 아닌 맨 앞에서 연산이 이루어진다. unshift() 의 경우 새로운 배열의 길이를, shift() 는 제거한 배열원소를 반환한다.
var arr = new Array();
arr.unshift(1); // arr : [1], 1 반환
arr.unshift(22); // arr : [22, 1], 2 반환
arr.shift(); // arr : [1], 22 반환
arr.unshift(3, [4, 5]); // arr : [3, [4, 5], 1], 3 반환
arr.shift(); // arr : [[4, 5], 1], 3 반환
arr.shift(); // arr : [1], [4, 5] 반환
arr.shift(); // arr : [], 1 반환

因为手机网页中图片大多数使用百分比显示

所以USEMAP的坐标错位

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://mattstow.com/experiment/responsive-image-maps/jquery.rwdImageMaps.min.js"></script>
<script>
(function($){
$(document).ready(function(e) {
$('img[usemap]').rwdImageMaps();
});
})(jQuery);
</script>

아래는 Javascript 나 PHP에서 자주 사용되는 정규표현식이다.
물론, 예시일 뿐 정규표현식을 예시에 의존하여 사용하다 보면 정작 급하게 필요할 때 낭패보는 경우가 있으니 어렵더라도기본적인 정규식은 알아두고 사용할 것을 권한다.

★ 숫자만 가능 : [ 0 ~ 9 ] 주의 : 띄어쓰기 불가능
/^[0-9]+$/

★ 이메일 형식만 가능 : [ [email protected] ]
/^([\w-]+(?:.[\w-]+))@((?:[\w-]+.)\w[\w-]{0,66}).([a-z]{2,6}(?:.[a-z]{2})?)$/

★ 한글만 가능 : [ 가나다라 ... ] 주의 : ㄱㄴㄷ... 형식으로는 입력 불가능 , 띄어쓰기 불가능
/^[가-힣]+$/

★ 한글,띄어쓰기만 가능 : [ 가나다라 ... ] 주의 : ㄱㄴㄷ... 형식으로는 입력 불가능 , 띄어쓰기 가능
/^[가-힣\s]+$/

★ 영문만 가능 :
/^[a-zA-Z]+$/

★ 영문,띄어쓰기만 가능
/^[a-zA-Z\s]+$/

★ 전화번호 형태 : 전화번호 형태 000-0000-0000 만 받는다. ]
/^[0-9]{2,3}-[0-9]{3,4}-[0-9]{4}$/

★ 도메인 형태, http:// https:// 포함안해도 되고 해도 되고
/^(((http(s?))\:\/\/)?)([0-9a-zA-Z-]+.)+[a-zA-Z]{2,6}(\:[0-9]+)?(\/\S*)?$/

★ 도메인 형태, http:// https:// 꼭 포함
/^((http(s?))\:\/\/)([0-9a-zA-Z-]+.)+[a-zA-Z]{2,6}(\:[0-9]+)?(\/\S*)?$/

★ 도메인 형태, http:// https:// 포함하면 안됨
/^^((http(s?))\:\/\/)+[a-zA-Z]{2,6}(\:[0-9]+)?(\/\S*)?$/

★ 한글과 영문만 가능
/^[가-힣a-zA-Z]+$/;

★ 숫자,알파벳만 가능
/^[a-zA-Z0-9]+$/;

★ 주민번호, -까지 포함된 문자열로 검색
/^(?:[0-9]{2}(?:0[1-9]|1[0-2])(?:0[1-9]|[1,2][0-9]|3[0,1]))-[1-4][0-9]{6}$/

Jquery 에서는 $.test() 메서드로,
PHP 에서는 preg_match() 함수로 사용하면 되겠다.