레이블이 웹인 게시물을 표시합니다. 모든 게시물 표시
레이블이 웹인 게시물을 표시합니다. 모든 게시물 표시

22. 8. 4.

Jquery 한화면 단위 Mouse Wheel 이동 (응용)

JQuery 한화면 단위 Mouse Wheel 이동를 토대로 응용해서 복합적으로...
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Jquery MouseWheel 응용</title>
<style>
/*부드러운 스크롤 이동 
html { scroll-behavior: smooth;}
*/
body{ margin:0; padding:0;}
header{ position:absolute; width:100%; height:100px; border-bottom:1px solid #000; display:flex; justify-content: center; align-items: center; float:left;}
section{ width:100%; height:100vh; display:flex; justify-content: center; align-items: center; float:left;}
footer{ width:100%; height:300px; border-top:1px solid #000;  display:flex; justify-content: center; align-items: center; float:left;}

section:nth-child(odd){ background-color:#f1f1f1;}

.main1{ display:inline-block; height:1400px;}

.main4{ display:inline-block; height:800px;}
.main4 h2{ width:100%;}
#main4_sub{ width:100%; overflow:hidden; display:inline-block;}

#main4_sub[data-box='0'] .main4-box{ margin-left:0;}
#main4_sub[data-box='1'] .main4-box{ margin-left:-600px;}
#main4_sub[data-box='2'] .main4-box{ margin-left:-1200px;}
#main4_sub[data-box='3'] .main4-box{ margin-left:-1800px;}
#main4_sub[data-box='4'] .main4-box{ margin-left:-2400px;}
/*
#main4_sub[data-box='5'] .main4-box{ margin-left:-3000px;}
#main4_sub[data-box='6'] .main4-box{ margin-left:-3600px;}
*/

.main4-box{ display:flex; width:4200px; transition-duration:0.3s;}
.main4-box > div{ width:600px; display:flex; justify-content: center; align-items: center; height:600px; }
.main4-box > div:nth-child(odd){ background-color:#fff1f1;}
.main4-box > div:nth-child(even){ background-color:#f1fff1;}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>
// 스크롤 중복입력 방지용 flag
var scrollworker = false;
// 스크롤 구간 배열
var scrollTops = [];
// 기본 이동시간 0.8초
var basicinterval = 800;
// 페이지 로드 후 동작
$(function(){
	// scrollTops 구간목록을 배열로 구성 
	$("section").each(function(index, element) {
		if($(this).offset().top!=undefined){
			scrollTops.push($(this).offset().top)
		}
    });
	// scrollTops 내임차순 정렬
	scrollTops.sort(function(a, b)  {  return a - b;});
	// 마지막 scrollTops 을 넘겨줄 위치를 구하기 위해
	scrollTops.push(scrollTops[scrollTops.length -1] + window.outerHeight);
	// header, section, footer 에서 마우스 휠을 넣었을 경우
	$("header, section, footer").on("mousewheel", function (e) {
		// 기존 이벤트 취소
		e.preventDefault();
		// 중복 입력 방지
		if(scrollworker==false){
			// 중복 입력 방지 on
			scrollworker = true;
			// 동작하고 있는 엘리먼트
			const elm = $(this);
			// 휠이벤트가 undefined 가 아니라면
			if(event.wheelDelta!=undefined){
				var delta = 0;
				if (!event) event = window.event;
				if (event.wheelDelta) {
					 delta = event.wheelDelta / 120;
					 if (window.opera) delta = -delta;
				} 
				else if (event.detail)
					 delta = -event.detail / 3;
				
				// 지금의 스크롤탑 위치
				const nst = $(window).scrollTop();
				// 어디로 움직일 것인가
				var moveTop;
				
				
				if($(elm).hasClass("main1")){ // main1 스크롤 이동 패스
					// 연속 입력위해 scrollworker 지정
					scrollworker = false;
					if(delta < 0){ // 아래로
						moveTop = "+=50";
					}else if(delta>0){ // 휠위로
						moveTop = "-=50";
					}
					// main1에선 기본 스크롤
					$("html,body").stop().animate({
	            		scrollTop: moveTop + 'px'
		        	    }, {
    	    	        duration: 5,easing: "swing", complete: function () {
							scrollworker = false;
						}
					});
					return;

				}else if($(elm).hasClass("main4")){ // main4 일 경우 조건 수행후 이어 동작시키기
					// 조건을 수행시키기 위해 boxno 을 지정
					var boxno = Number($("#main4_sub").attr("data-box")); 
					// 조건을 만족하는지에 대한 상태 flag
					var movestat = false;
					if(delta < 0){ // 아래로
						boxno++;
						// 조건값이 main4-box 의 수를 넘어가게 되면
						if(boxno > $(".main4-box").length + 3){
							boxno--;
							// 지금의 scrollTop 위치보다큰 값중 첫번째 값 추출
							moveTop = scrollTops.filter(x=> x > nst)[0];
							// 값이 없으면 마지막값으로 지정
							if(moveTop == undefined) moveTop = scrollTops[scrollTops.length-1];
							// 조건상태 만족처리
							movestat = true;
						}
					}else if(delta>0){ // 휠위로
						boxno--;
						// 조건값이 최소라면
						if(boxno < 0){
							// 지금의 scrollTop 위치보다 작은 값 추출
							var nstminArr = scrollTops.filter(x => x < nst);
							// 역순정렬
							nstminArr.sort(function(a, b)  {  return b - a;});
							// 역순정렬한 첫번째값 추출
							moveTop = nstminArr[0];
							// 첫번째값이 undefined 면 움직일 위치 0으로 지정
							if(moveTop == undefined) moveTop = 0;
							movestat = true;
						}
					}
					// 변경된 조건으로 스타일 적용
					$("#main4_sub").attr("data-box",boxno);
					
					// 조건에 따라 scrollTop을 지정하기 위해 변수지정
					var intervals = basicinterval;
					// 조건에 만족하지 않으면 움직임이 없도록 고정시킴
					if(!movestat) { intervals=0; moveTop=$(".main4").offset().top;}
					// scrollTop 이동
					$("html,body").stop().animate({
						scrollTop: moveTop + 'px'
						}, {
						duration: intervals,easing: "swing", complete: function () {
							scrollworker = false;
						}
					});
				}else{ // 그외일경우 일반적 진행
					if(delta < 0){ // 아래로
						// 지금의 scrollTop 위치보다큰 값중 첫번째 값 추출
						moveTop = scrollTops.filter(x=> x > nst)[0];
						// 값이 없으면 마지막값으로 지정
						if(moveTop == undefined) moveTop = scrollTops[scrollTops.length-1];
					}else if(delta>0){ // 휠위로
						// 지금의 scrollTop 위치보다 작은 값 추출
						var nstminArr = scrollTops.filter(x => x < nst);
						// 역순정렬
						nstminArr.sort(function(a, b)  {  return b - a;});
						// 역순정렬한 첫번째값 추출
						moveTop = nstminArr[0];
						// 첫번째값이 undefined 면 움직일 위치 0으로 지정
						if(moveTop == undefined) moveTop = 0;
					}
					// scrollTop 이동
					$("html,body").stop().animate({
	            		scrollTop: moveTop + 'px'
		        	    }, {
    	    	        duration: basicinterval,easing: "swing", complete: function () {
							scrollworker = false;
						}
					});
				}
			}
		}
	});
});
$(window).resize(function(){ 
	scrollTops = [];
	$("section").each(function(index, element) {
		if($(this).offset().top!=undefined){
			scrollTops.push($(this).offset().top)
		}
    });
	scrollTops.sort(function(a, b)  {  return a - b;});
	scrollTops.push(scrollTops[scrollTops.length -1] + window.outerHeight);
});
</script>

</head>
<body>
<header>
	<h1>Header</h1>
</header>
<section class="main0">
	<h2>Main 0</h2>
</section>
<section class="main1">
	<h2>Main 1</h2>
</section>
<section class="main2">
	<h2>Main 2</h2>
</section>
<section class="main3">
	<h2>Main 3</h2>
</section>
<section class="main4">
	<div>
        <h2>Main 4</h2>
        <div id="main4_sub" data-box="0">
            <div class="main4-box">
                <div class="main4-box-1">4-1</div>
                <div class="main4-box-2">4-2</div>
                <div class="main4-box-3">4-3</div>
                <div class="main4-box-4">4-4</div>
                <div class="main4-box-5">4-5</div>
                <div class="main4-box-6">4-6</div>
                <div class="main4-box-7">4-7</div>
            </div>
        </div>
    </div>
</section>
<footer>
	<h1>Footer</h1>
</footer>

</body>
</html>

22. 1. 19.

Javascript 동적 드래그 앤 드롭 레이어 생성

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>드래그 앤 드롭 동적 생성</title>
<style>
html, body {margin:0; padding:0; }
#content { position:relative; width:100%; height:70vh; background-color:#f1f1f1; display:inline-block; overflow:scroll; }
.formdiv { width: 300px; height: 300px; display: inline-block; border: 1px solid #000; background-color: #000; position: absolute; cursor:move; left:0; top:0; }
</style>
<script>
    // 시작위치
    var startX = 0;
    var startY = 0;
    // 클릭위치
    var clickX = 0;
    var clickY = 0;
    // 맨앞으로
    var zIndex = 0;

    function DragStartFunction(ev,el) {
        if (el.style.left != undefined) {
            startX = el.style.left;
            startX = Number(startX.replace("px", ""));
        }
        if (el.style.top != undefined) {
            startY = el.style.top;
            startY = Number(startY.replace("px", ""));
        }
        clickX = ev.clientX - startX;
        clickY = ev.clientY - startY;
    }
    function DragEndFunction(ev) {
        var moveX = ev.clientX - clickX;
        var moveY = ev.clientY - clickY;
        ev.target.style.left = moveX + "px";
        ev.target.style.top = moveY + "px";
        zIndex++;
        ev.target.style.zIndex = zIndex;
    }

    window.onload = function () {
        document.getElementById("btn").onclick = function () {
            var newDiv = document.createElement("div");
            newDiv.className = "formdiv";
            newDiv.setAttribute("draggable", true);
            newDiv.setAttribute("ondragstart", "DragStartFunction(event,this)");
            newDiv.setAttribute("ondragend", "DragEndFunction(event)");
            // 구분을 위해 랜덤색상
            newDiv.setAttribute("style", "background-color:#" + Math.round(Math.random() * 0xffffff).toString(16));
            document.getElementById("content").appendChild(newDiv);
        }
    }
</script>
</head>
<body>
    <a id="btn">ADD</a>
    <div id="content"></div>
</body>
</html>

22. 1. 13.

웹페이지 페이지 이동(?) 갱신( Javascript History Api )

페이지 이동시 부드럽게 이동하기 위한 방법(=한페이지에서 변화를...)
Javascript 파일(/main.js)
// 뒤로가기시 페이지 새로고침
window.onpopstate = function(event) {
	var np = document.location
	BodyClassLoad(np);
}
// 페이지 시작시 a태그의 href 조정(타 도메인일경우 그대로 두고 같은 도메인일 경우 function 으로 처리되도록..)
window.onload = function(){
	var abtn = document.querySelectorAll("a");
	for(var i = 0; i < abtn.length; i++){
		const loc = abtn[i].getAttribute("href");
		if(loc.indexOf("://") == -1){
			MoveHrefClick(abtn[i],loc);
		}else{
			if(loc.indexOf("://"+window.location.origin) > -1){
				MoveHrefClick(abtn[i],loc);
			}
		}
	}
}
// body class 조정 및 section 의 내용 교체
function BodyClassLoad(url){
	var nc = "";
	var mhref = "";
	if(url.origin != undefined){
		nc = url.href.substring(url.origin.length,url.origin.length+url.href.length);
	}else{
		nc = url;
	}
	mhref = nc;
	if(nc.substring(0,1)=="/"){
		nc = nc.substring(1,nc.length);
	}
	if(nc.substring(nc.length-1,nc.length)=="/"){
		nc = nc.substring(0,nc.length - 1);
	}
	nc = nc.replace("/"," ");
	document.querySelector("body").className = "BodyTag "+ nc;
	var xhr = new XMLHttpRequest(); 
	var loadurl = mhref;
	if(loadurl.indexOf("?") == -1){
		loadurl += "/main.php";
		loadurl = loadurl .replace("//","/");
	}else{
        // PHP 페이지를 불러오도록 상황에 따라 변경
		loadurl = loadurl .replace("?","main.php?");
	}
	xhr.open('GET', loadurl, true); 
	xhr.send(); 
	xhr.onload = function(){ 
		if (xhr.status == 200) {
			document.querySelector("section").innerHTML = xhr.response;
		} else { 
		// 실패 
		} 
	}
}
// a태그 href 비활성화 및 history 에 이전주소로 기록
function MoveHrefClick(el,href){
	el.removeAttribute("href");
	el.onclick = function(){
		history.pushState({page: 1}, document.title, href);
		BodyClassLoad(href)
		
	}
}

PHP 페이지(/index.php, /A/index.php) : 복붙을 위해...
<?php
    $relative_path = preg_replace("`\/[^/]*\.php$`i", "/", $_SERVER['PHP_SELF']);
    $pathNode = explode( '/', $relative_path );
    $bodyClass = "BodyTag";
    for( $i = 0;$i < sizeof($pathNode); $i++){
        if($pathNode[$i] != ""){
            $bodyClass .= " ".$pathNode[$i];
        }
    }
    $path1 = "Order";
	$path2 = "";
	$path3 = "";
    if($bodyClass != "BodyTag"){
        if(sizeof($pathNode)>1){
            $path1 = $pathNode[1];
        }
        if(sizeof($pathNode)>2){
            $path2 = $pathNode[2];
        }
		if(sizeof($pathNode)>3){
            $path3 = $pathNode[3];
        }
    }else{
		$bodyClass .= " ".$path1;
	}
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="/main.js" defer></script>
</head>
<body class="<?php echo $bodyClass; ?>">
<header><?php include $_SERVER["DOCUMENT_ROOT"]."/header.html"; ?></header>
<section><?php include $_SERVER["DOCUMENT_ROOT"].$relative_path."main.php"; ?></section>
<footer><?php include $_SERVER["DOCUMENT_ROOT"]."/footer.html"; ?></footer>
</body>
</html>

페이지구성(/header.html)
<a href="/">Home</a>
<a href="/A/">A</a>

PHP 구성(/main.php)
<h2>Home</h2>

PHP 구성(/A/main.php)
<h2>A</h2>

21. 7. 26.

제이쿼리(Jquery) 탭메뉴(Tab Menu)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Tab 메뉴</title>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script>
        $(function () {
            $(".tabbtn").on("click", function () {
                var index = $(this).index();
                $(this).addClass("active").siblings().removeClass("active");
                $(".tablist").removeClass("active").eq(index).addClass("active");
            });
        });
    </script>
    <style>
        .tabnav{ width:100%; display:inline-block; float:left;}
        .tabnav > .tabbtn{ display:inline-block; float:left; margin-left:-1px; border-radius:0.5em 0.5em 0 0; border:1px solid #ddd; padding:0.5em 1em; cursor:pointer;}
        .tabnav > .active{ font-weight:900; background-color:#0094ff; color:#fff; cursor:auto;}
        .tab{ margin:0; margin-top:-1px; padding:0; width:100%; display:inline-block; float:left;}
        .tab > .tablist{ display:none; list-style:none; margin:0; padding:0; border:1px solid #ddd;}
        .tab > .active{ padding:0.5em; display:block; min-height:300px;}
    </style>
</head>
<body>
    <nav class="tabnav">
        <a class="tabbtn active">Tab1</a>
        <a class="tabbtn">Tab2</a>
        <a class="tabbtn">Tab3</a>
    </nav>
    <ul class="tab">
        <li class="tablist active">
            Tab1 Content
        </li>
        <li class="tablist">
            Tab2 Content
        </li>
        <li class="tablist">
            Tab3 Content
        </li>
    </ul>
</body>
</html>

Javascript 버전
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Tab 메뉴</title>
    <script>
        window.onload = function () {
            var btns = document.querySelectorAll(".tabbtn");
            for (var i = 0; i < btns.length; i++) {
                btns[i].setAttribute("onclick", "btnClick(" + i + ");");
            }
        }
        function btnClick(index) {
            var tabbtn = document.getElementsByClassName("tabbtn");
            var tablist = document.getElementsByClassName("tablist");
            for (var i = 0; i < tabbtn.length; i++) {
                if (index == i) {
                    tabbtn[i].className = "tabbtn active";
                    tablist[i].className = "tablist active";
                } else {
                    tabbtn[i].className = "tabbtn";
                    tablist[i].className = "tablist";
                }
            }
        }
    </script>
    <style>
        .tabnav{ width:100%; display:inline-block; float:left;}
        .tabnav > .tabbtn{ display:inline-block; float:left; margin-left:-1px; border-radius:0.5em 0.5em 0 0; border:1px solid #ddd; padding:0.5em 1em; cursor:pointer;}
        .tabnav > .active{ font-weight:900; background-color:#0094ff; color:#fff; cursor:auto;}
        .tab{ margin:0; margin-top:-1px; padding:0; width:100%; display:inline-block; float:left;}
        .tab > .tablist{ display:none; list-style:none; margin:0; padding:0; border:1px solid #ddd;}
        .tab > .active{ padding:0.5em; display:block; min-height:300px;}
    </style>
</head>
<body>
    <nav class="tabnav">
        <a class="tabbtn active">Tab1</a>
        <a class="tabbtn">Tab2</a>
        <a class="tabbtn">Tab3</a>
    </nav>
    <ul class="tab">
        <li class="tablist active">
            Tab1 Content
        </li>
        <li class="tablist">
            Tab2 Content
        </li>
        <li class="tablist">
            Tab3 Content
        </li>
    </ul>
</body>
</html>

20. 9. 9.

Jquery Layer Popup(Drag & Drop)

은근히 쓰게되는 제이쿼리 레이어팝업...
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <title>레이어 팝업</title>
    <style>
        /* Layer 팝업 css */
        .LayerPopupTbl {position: absolute;border: 1px solid #2d2d2d;display: table;background-color: #ffffff;border-collapse: collapse;}
        .LayerPopupTbl > thead > tr > td {width: 100%;padding-top: 3px;padding-bottom: 3px;background-color: #00CCFF;text-align: right;}
        .LayerPopupTbl > tbody > tr > td {background-color: #FFF;display: table-cell;}
        .LayerPopupTbl > tbody > tr > td img {margin:-1px;float:left;}
        .LayerPopupTbl > tfoot > tr > td {background-color: #c9c9c9;padding: 3px;}
    </style>
    <script>
        /* Popup */
        var PopupmoveX = 0;
        var PopupmoveY = 0;
        var topPopup = 0;
        var leftPopup = 0;
        function zIndexReload(ele) {
            $(ele).css("z-index", 1000).siblings().css("z-index", 999);
        }
        function Popupdrag(ev) {
            if ($(ev.target).offset() != undefined) {
                topPopup = ev.clientY - $(ev.target).offset().top;
                leftPopup = ev.clientX - $(ev.target).offset().left;
            }
            PopupmoveX = ev.clientX;
            PopupmoveY = ev.clientY;
        }
        function Popupdrop(ev) {
            PopupmoveX = ev.clientX;
            PopupmoveY = ev.clientY;
            $(ev.target).css("top", (PopupmoveY - topPopup)).css("left", (PopupmoveX - leftPopup));
        }
        function setCookie(name, value, expiredays) {
            var todayDate = new Date();
            todayDate.setDate(todayDate.getDate() + expiredays);
            //todayDate.getDate()- localtime의 달의 날짜를 반환(1~31).  setDate의경우 달의 날짜를 설정
            document.cookie = name + '=' + escape(value) + '; path=/; expires=' + todayDate.toGMTString() + ';';
        }
        function getCookie(name) {
            var nameOfCookie = name + '=';
            var x = 0;
            while (x <= document.cookie.length) {
                var y = (x + nameOfCookie.length);
                if (document.cookie.substring(x, y) == nameOfCookie) {
                    if ((endOfCookie = document.cookie.indexOf(';', y)) == -1)
                        endOfCookie = document.cookie.length;
                    return unescape(document.cookie.substring(y, endOfCookie));
                }
                x = document.cookie.indexOf(' ', x) + 1;
                if (x == 0)
                    break;
            }
            return '';
        }
        // 오늘 하루 이창을 열지 않음
        function PopupClose(elem) {
            var elemName = $(elem).parents("table:first").attr("id");
            setCookie(elemName, 'done', 1);  // 오른쪽 숫자는 쿠키를 유지할 기간을 설정합니다
            $(elem).parents("table:first").remove();
        }

        $(function () {
            /* 목록만큼 돌린다 */
            for (var i in popupArray) {
                var mypopupName = popupArray[i].name;
                var mypopupTop = popupArray[i].top;
                var mypopupLeft = popupArray[i].left;
                var mypopuphtml = popupArray[i].html;
                /* 오늘 하루 이창 열지 않음을 누른상태가 아니라면 보여준다. */
                if (getCookie(mypopupName) != "done") {
                    var popuptbl = document.createElement("table");
                    popuptbl.setAttribute("class", "LayerPopupTbl");
                    popuptbl.setAttribute("id", mypopupName);
                    popuptbl.setAttribute("draggable", true);
                    popuptbl.setAttribute("ondragstart", "Popupdrag(event)");
                    popuptbl.setAttribute("ondragend", "Popupdrop(event)");
                    popuptbl.setAttribute("onmouseover", "zIndexReload(this)");
                    popuptbl.style.top = mypopupTop;
                    popuptbl.style.left = mypopupLeft;
                    var formhtml = [];
                    formhtml.push("<thead><tr><td><a onclick=\"$(this).parents('table:first').remove();\">[닫기]</a></td></tr></thead>");
                    formhtml.push("<tbody><tr><td>" + mypopuphtml + "</td></tr></tbody>");
                    formhtml.push("<tfoot><tr><td><label><input type=\"checkbox\" onClick=\"PopupClose(this);\" /> 오늘 하루 이창을 열지 않음</label></td></tr></tfoot>");
                    popuptbl.innerHTML = formhtml.join("");
                    document.body.appendChild(popuptbl);
                }
            }
        });

        /* 팝업목록 name=팝업이름(id), top:팝업위치, left: 팝업위치, html : 팝업내용 - 만질경우 이부분만 고쳐서 사용하려고 구성...  */
        var popupArray = [
            /* 팝업1 */
            { "name": "POPUP_ex_1", "top": "8px", "left": "20px", "html": "<a href='http://www.naver.com'><img alt='' src='https://ssl.pstatic.net/static/kin/09renewal/banner_roulette.png'/></a>" },
            /* 팝업2 */
            { "name": "POPUP_ex_2", "top": "8px", "left": "300px", "html": "<div style=\"background-color:yellow\"><h4 style=\"margin:0;padding:0;line-height:1.6;\">공지사항</h4><p style=\"margin:0;padding:0;line-height:1.6;\">안녕하세요</p></div>" },
            /* 팝업3 */
            { "name": "POPUP_ex_3", "top": "176px", "left": "20px", "html": "<img alt='' src='https://ssl.pstatic.net/static/kin/09renewal/bingo_banner.png'>" },
        ]
    </script>
</head>
<body>
</body>
</html>

20. 8. 10.

Javascript 링크이동없이 URL 바꾸기

참고 : https://developer.mozilla.org/ko/docs/Web/API/History/pushState
p.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <style>
        a {
            background-color: #000;
            color: #fff;
            margin: 2px;
            cursor: pointer;
        }
    </style>
    <script>
        window.onload = function () {
            document.getElementById("btn1").addEventListener("click", function () {
                var page = 1;
                var state = { 'page_id': page, 'user_id': "" }
                var title = ''
                var url = 'page.html?page=' + page;
                history.pushState(state, title, url);
                // Javascript
                httpRequest = new XMLHttpRequest();
                if (!httpRequest) {
                    alert('XMLHTTP Fail');
                    return false;
                }
                httpRequest.onreadystatechange = function () {
                    if (this.readyState === XMLHttpRequest.DONE) {
                        if (this.status === 200) {
                            document.getElementById("view").innerHTML = this.responseText;
                        } else {
                            alert('Error');
                        }
                    }
                };
                httpRequest.open('GET', url);
                httpRequest.send();
            });

            document.getElementById("btn2").addEventListener("click", function () {
                var page = 2;
                var state = { 'page_id': page, 'user_id': "" }
                var title = ''
                var url = 'page.html?page=' + page;
                history.pushState(state, title, url);
                // JQuery
                $.ajax({
                    type: "GET",
                    url: url,
                    success: function (res) {
                        $("#view").html(res);
                    }
                });          
            });
        }
    </script>
</head>
<body>
    <a id="btn1">Page 1</a>
    <a id="btn2">Page 2</a>
    <div id="view"></div>
</body>
</html>

page.html
Page 입니다

20. 6. 9.

Javascript & JQuery Rainbow Text Effect

Rainbow Text Animation
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <title>JQuery Rainbow Animation</title>
    <style>
        .RainbowText{ text-align:center;}
        .RainbowText > span{ font-size:30px; font-weight:900; animation-duration:1s; animation-iteration-count:infinite;}
    </style>
<script>
    // 색상목록
    var rainbowArr = ["red", "orange", "yellow", "green", "blue", "indigo", "violet"];
    // 클래스명
    var className = "RainbowText";
    $(function () {
        var html = [];
        html.push("<style>");
        // rainbowArr에 넣은 수만큼 클래스를 만든다.
        for (var i = 0; i < rainbowArr.length; i++) {
            // 클래스 선언
            html.push(".rainbow" + i + "{color:" + rainbowArr[i] + ";animation-name:rainbow" + i + "Ani;}");
            // 애니메이션 키프레임 선언
            html.push("@keyframes rainbow" + i + "Ani{");
            for (var j = i; j < i + rainbowArr.length + 1; j++) {
                // 0% ~ 100% 가 등록한 배열순서대로 색상이 되도록 처리
                html.push(((100 / rainbowArr.length) * (j - i)) + "%{color:" + rainbowArr[((j) % rainbowArr.length)] + "}");
            }
            html.push("}");
        }
        html.push("</style>");
        // body 에 추가
        $("body").append(html.join("\n"))
        // 선언한 클래스에 html 을 치환
        $("." + className).each(function () {
            var str = $(this).text();
            var html = [];
            // text 수 만큼
            for (var i = 0; i < str.length; i++) {
                // span 으로 잘개쪼개고 클래스명을 지정
                html.push("<span class=\"rainbow" + (i % rainbowArr.length) + "\">" + str.substring(i, i + 1) + "</span>");
            }
            // 클래스의 html태그를 변경
            $(this).html(html.join(""));
        });
    });
</script>
</head>
<body>
    <div class="RainbowText">Rainbow</div>
    <div class="RainbowText">■■■■■■■</div>
</body>
</html>

19. 12. 13.

Javascript & JQuery 퀵 메뉴

간단하게 만들어본 제이쿼리 퀵메뉴
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
    <style>
        .quick { position:absolute; width: 150px; top:0; right:0; display: inline-block; transition-duration: 1s; margin-top:10em; margin-right:1em; }
        /* 스크롤바 박스 */
        .quick > div { background-color: #f1f1f1; border: 2px solid #ddd; border-radius: 0.5em;}
    </style>
    <script>
        // 스크롤을 만들기위해 body 를 키움 없애도 뎀
        $(function () { $("html,body").css("height", "10000px");});
        // 따라다니게 하기 위한 처리
        $(window).scroll(function (e) {
            $(".quick").css("top", $(this).scrollTop()+"px");
        });
    </script>
</head>
<body>
    <div class="quick">
        <div>
            <ul>
                <li><a>menu 1</a></li>
                <li><a>menu 2</a></li>
                <li><a>menu 3</a></li>
                <li><a>menu 4</a></li>
                <li><a>menu 5</a></li>
            </ul>
        </div>
    </div>
</body>
</html>


자바스크립트(Javascript)로 변경해 봄
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
        .quick { position:absolute; width: 150px; top:0; right:0; display: inline-block; transition-duration: 1s; margin-top:10em; margin-right:1em; }
        /* 스크롤바 박스 */
        .quick > div { background-color: #f1f1f1; border: 2px solid #ddd; border-radius: 0.5em;}
    </style>
    <script>
        // 창크기 키워 스크롤 나오게 하기
        window.onload = function () {
            document.getElementsByTagName("body")[0].style.height = "10000px";
        }
        window.addEventListener('scroll', function (e) {
            document.querySelector(".quick").style.top = window.scrollY + "px"
        })
    </script>
</head>
<body>
    <div class="quick">
        <div>
            <ul>
                <li><a>menu 1</a></li>
                <li><a>menu 2</a></li>
                <li><a>menu 3</a></li>
                <li><a>menu 4</a></li>
                <li><a>menu 5</a></li>
            </ul>
        </div>
    </div>
</body>
</html>

19. 5. 16.

Javascript 페이지 스크롤상 위치 상단표시

간혹 블러그에 보이길래 그냥 만들어봄
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style type="text/css">
        #scrollBars{ position:fixed; height:8px; background-color:red; width:0; left:0; top:0; transition-duration:0.3s;}
    </style>
    <script type="text/javascript">
        var barId = "scrollBars";
        window.onload = function () {
            // bar 개체생성
            var barElm = document.createElement("div");
            barElm.setAttribute("id", barId);
            // body 에 추가
            document.body.appendChild(barElm);
            // 문서의폭
            var bMax = document.body.clientWidth;
            // 문서의 높이
            var bH = document.body.clientHeight;
            // 화면의 높이
            var wH = window.innerHeight;
            // 초기 세팅
            document.getElementById(barId).setAttribute("style", "width:" + Math.floor(window.scrollY / (bH - wH) * 100) + "%");
            // 스크롤 이벤트 등록
            document.addEventListener("scroll", function (e) {
                // 스크롤이 이동할때마다 처리
                document.getElementById(barId).setAttribute("style", "width:" + Math.floor(window.scrollY / (bH - wH) * 100) + "%");
            }, true);
        }
    </script>
</head>
<body>
    <div style="width:100%; height:5000px;">이건그냥 스크롤용으로 만든 태그</div>
</body>
</html>

19. 4. 24.

Javascript 한화면 단위 Mouse Wheel 이동

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>MouseWheel</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <style type="text/css">
        html,body{ margin:0; padding:0; width:100%; height:100%;}
        .box{ width:100%; height:100%; position:relative; color:#ffffff; font-size:24pt;}
    </style>
    <script type="text/javascript">
        // 적용할 클래스명
        var className = "box";
        // 지금의 스크롤 위치를 담을 변수
        var currentScroll = 0;
        // 에니메이션 효과를 주기위한 function 명 선언
        var tim;
        window.onload = function () {
            /* Div Class 명 */
            // box클래스 추출
            var elm = document.getElementsByClassName(className);
            // box클래스 개수만큼 실행
            for (var i = 0; i < elm.length; i++) {
                // box 에 각각 마우스 휠 감지
                // 휠감지
                elm[i].addEventListener("mousewheel", MouseWheelHandler, false);
                // firefox 용 휠처리
                elm[i].addEventListener("DOMMouseScroll", MouseWheelHandler, true);
            }
        }
        function MouseWheelHandler(e) {
            // 스크롤 취소시킴(이걸 안할경우 도중에 명령을 받아 화면이 덜덜 거릴수 있음)
            e.preventDefault();
            // 휠값처리
            var delta = 0;
            if (!event) event = window.event;
            if (event.wheelDelta) {
                delta = event.wheelDelta / 120;
                if (window.opera) delta = -delta;
            }
            else if (event.detail)
                delta = -event.detail / 3;

            // 여러개일경우 다른 selector 을 확인하기위한 상위 dom 으로 이동
            var p = e.target.parentElement;
            // 몇번째 dom 인지 저장
            var index = Array.prototype.indexOf.call(p.children, e.target);
            // 같은 위치의 돔목록 을 저장
            var elmArr = e.target.parentElement.children;
            // 지금의 스크롤 위치 저장
            currentScroll = document.documentElement.scrollTop || document.body.scrollTop;
            // 다음위치의 좌표(기본이므로 현재의 Y 좌표 저장)
            var NextTarget = currentScroll;
            // 마우스휠 위로
            if (delta > 0) {
                // 맨처음 지점 제외
                if (index > 0) {
                    // 이전 dom 의 index 번호
                    var no = (index - 1);
                    // 좌표위치 저장
                    NextTarget = elmArr[no].offsetTop;
                }
            }
            // 마우스휠 아래로
            else if (delta < 0)
            {
                // 맨마지막 지점 제외
                if (index < elmArr.length - 1) {
                    // 다음 dom 의 index 번호
                    var no = (index + 1);
                    // 좌표위치 저장
                    NextTarget = elmArr[no].offsetTop;
                }
            }
            // 애니메이션
            // 필요없으면 바로 window.scrollTo(0, NextTarget);
            // 에니메이션 초기화
            clearInterval(tim);
            // 애니메이션 실행
            tim = setInterval(tran, 1);
            // 애니메이션 function
            function tran() {
                // 이동속도 숫자가 작아질수록 느려짐
                var speed = 5;
                // 현재 스크롤과 이동후 스크롤이 같으면 정지시킨다 
                if (currentScroll == NextTarget) {
                    clearInterval(tran);
                } else {
                    // 스크롤을 위로 올릴 경우
                    if (currentScroll - speed > NextTarget)
                    {
                        currentScroll -= speed;
                    }
                    // 스크롤을 내일 경우
                    else if (currentScroll + speed < NextTarget)
                    {
                        currentScroll += speed;
                    }
                    // 스크롤이 속도로 지정된 변수보다 작을 경우 강제적으로 맞춰준다
                    else
                    {
                        currentScroll = NextTarget;
                    }
                    // 스크롤위치 변경
                    window.scrollTo(0, currentScroll);
                }
            }

        }
    </script>
</head>
<body>
    <div class="box" style="background-color:red;">1</div>
    <div class="box" style="background-color:orange;">2</div>
    <div class="box" style="background-color:yellow;">3</div>
    <div class="box" style="background-color:green;">4</div>
    <div class="box" style="background-color:blue;">5</div>
    <div class="box" style="background-color:indigo;">6</div>
    <div class="box" style="background-color:violet;">7</div>
</body>
</html>

JQuery 한화면 단위 Mouse Wheel 이동 를 참고해서 그냥 Javascript 로...

17. 1. 5.

Classic ASP 인스타그램(Instagram) API 로그인

login.asp 파일
<script type="text/javascript">
function instagramlogin(){
 var openUrl = "https://api.instagram.com/oauth/authorize/";
 var client_id = "97e52e1da4064299b2a1ba87db3c4167";
 var return_url = "http://www.mysite.com/login/instagram.asp";
 var DataVal = "";
 DataVal += "client_id="+escape(client_id).replace(/\+/gi, '%2B');;
 DataVal += "&redirect_uri="+escape(return_url).replace(/\+/gi, '%2B');
 DataVal += "&response_type=code";
 var instagramLogin = window.open(openUrl+"?"+DataVal,"instagramLogin","width=450,height=300,scrollbars=no");
 instagramLogin.focus();
}
</script>

<a onclick="instagramlogin();">인스타그램(Instagram) 로그인</a>

instagram.asp 파일
<!-- #include file = "aspJSON1.17.asp"--><%

 return_code = request.QueryString("code")

 returnURL = server.URLEncode("http://www.mysite.com/login/instagram.asp")
 client_id = "97e52e1da4064299b2a1ba87db3c4167"
 client_secret = "db0bcf2b60124ff5a1234298f80a8ca8"

 Set httpObj = Server.CreateObject("WinHttp.WinHttpRequest.5.1")
 httpObj.open "POST" , "https://api.instagram.com/oauth/access_token", False
 httpObj.SetRequestHeader "Content-Type", "application/x-www-form-urlencoded"
 httpObj.Send "grant_type=authorization_code&client_id=" & client_id & "&client_secret=" & client_secret & "&redirect_uri=" & returnURL & "&code=" & return_code
 httpObj.WaitForResponse

 If httpObj.Status = "200" Then
  JsonText = httpObj.ResponseText
 Else
  JsonText = null
 End If 

 Set oJSON = New aspJSON
 oJSON.loadJSON(JsonText)

 If oJSON.data("error") = "" then
  UsrId = oJSON.data("user").item("id")
  UserNn = oJSON.data("user").item("username")

  response.write(UsrId & " 님 안녕하세요")
 End If
%>

참고
aspJSON1.17.asp 파일
<%
'Februari 2014 - Version 1.17 by Gerrit van Kuipers
Class aspJSON
 Public data
 Private p_JSONstring
 private aj_in_string, aj_in_escape, aj_i_tmp, aj_char_tmp, aj_s_tmp, aj_line_tmp, aj_line, aj_lines, aj_currentlevel, aj_currentkey, aj_currentvalue, aj_newlabel, aj_XmlHttp, aj_RegExp, aj_colonfound

 Private Sub Class_Initialize()
  Set data = Collection()

     Set aj_RegExp = new regexp
     aj_RegExp.Pattern = "\s{0,}(\S{1}[\s,\S]*\S{1})\s{0,}"
     aj_RegExp.Global = False
     aj_RegExp.IgnoreCase = True
     aj_RegExp.Multiline = True
 End Sub

 Private Sub Class_Terminate()
  Set data = Nothing
     Set aj_RegExp = Nothing
 End Sub

 Public Sub loadJSON(inputsource)
  inputsource = aj_MultilineTrim(inputsource)
  If Len(inputsource) = 0 Then Err.Raise 1, "loadJSON Error", "No data to load."
  
  select case Left(inputsource, 1)
   case "{", "["
   case else
    Set aj_XmlHttp = Server.CreateObject("Msxml2.ServerXMLHTTP")
    aj_XmlHttp.open "GET", inputsource, False
    aj_XmlHttp.setRequestHeader "Content-Type", "text/json"
    aj_XmlHttp.setRequestHeader "CharSet", "UTF-8"
    aj_XmlHttp.Send
    inputsource = aj_XmlHttp.responseText
    set aj_XmlHttp = Nothing
  end select

  p_JSONstring = CleanUpJSONstring(inputsource)
  aj_lines = Split(p_JSONstring, Chr(13) & Chr(10))

  Dim level(99)
  aj_currentlevel = 1
  Set level(aj_currentlevel) = data
  For Each aj_line In aj_lines
   aj_currentkey = ""
   aj_currentvalue = ""
   If Instr(aj_line, ":") > 0 Then
    aj_in_string = False
    aj_in_escape = False
    aj_colonfound = False
    For aj_i_tmp = 1 To Len(aj_line)
     If aj_in_escape Then
      aj_in_escape = False
     Else
      Select Case Mid(aj_line, aj_i_tmp, 1)
       Case """"
        aj_in_string = Not aj_in_string
       Case ":"
        If Not aj_in_escape And Not aj_in_string Then
         aj_currentkey = Left(aj_line, aj_i_tmp - 1)
         aj_currentvalue = Mid(aj_line, aj_i_tmp + 1)
         aj_colonfound = True
         Exit For
        End If
       Case "\"
        aj_in_escape = True
      End Select
     End If
    Next
    if aj_colonfound then
     aj_currentkey = aj_Strip(aj_JSONDecode(aj_currentkey), """")
     If Not level(aj_currentlevel).exists(aj_currentkey) Then level(aj_currentlevel).Add aj_currentkey, ""
    end if
   End If
   If right(aj_line,1) = "{" Or right(aj_line,1) = "[" Then
    If Len(aj_currentkey) = 0 Then aj_currentkey = level(aj_currentlevel).Count
    Set level(aj_currentlevel).Item(aj_currentkey) = Collection()
    Set level(aj_currentlevel + 1) = level(aj_currentlevel).Item(aj_currentkey)
    aj_currentlevel = aj_currentlevel + 1
    aj_currentkey = ""
   ElseIf right(aj_line,1) = "}" Or right(aj_line,1) = "]" or right(aj_line,2) = "}," Or right(aj_line,2) = "]," Then
    aj_currentlevel = aj_currentlevel - 1
   ElseIf Len(Trim(aj_line)) > 0 Then
    if Len(aj_currentvalue) = 0 Then aj_currentvalue = aj_line
    aj_currentvalue = getJSONValue(aj_currentvalue)

    If Len(aj_currentkey) = 0 Then aj_currentkey = level(aj_currentlevel).Count
    level(aj_currentlevel).Item(aj_currentkey) = aj_currentvalue
   End If
  Next
 End Sub

 Public Function Collection()
  set Collection = Server.CreateObject("Scripting.Dictionary")
 End Function

 Public Function AddToCollection(dictobj)
  if TypeName(dictobj) <> "Dictionary" then Err.Raise 1, "AddToCollection Error", "Not a collection."
  aj_newlabel = dictobj.Count
  dictobj.Add aj_newlabel, Collection()
  set AddToCollection = dictobj.item(aj_newlabel)
 end function

 Private Function CleanUpJSONstring(aj_originalstring)
  aj_originalstring = Replace(aj_originalstring, Chr(13) & Chr(10), "")
  aj_originalstring = Mid(aj_originalstring, 2, Len(aj_originalstring) - 2)
  aj_in_string = False : aj_in_escape = False : aj_s_tmp = ""
  For aj_i_tmp = 1 To Len(aj_originalstring)
   aj_char_tmp = Mid(aj_originalstring, aj_i_tmp, 1)
   If aj_in_escape Then
    aj_in_escape = False
    aj_s_tmp = aj_s_tmp & aj_char_tmp
   Else
    Select Case aj_char_tmp
     Case "\" : aj_s_tmp = aj_s_tmp & aj_char_tmp : aj_in_escape = True
     Case """" : aj_s_tmp = aj_s_tmp & aj_char_tmp : aj_in_string = Not aj_in_string
     Case "{", "["
      aj_s_tmp = aj_s_tmp & aj_char_tmp & aj_InlineIf(aj_in_string, "", Chr(13) & Chr(10))
     Case "}", "]"
      aj_s_tmp = aj_s_tmp & aj_InlineIf(aj_in_string, "", Chr(13) & Chr(10)) & aj_char_tmp
     Case "," : aj_s_tmp = aj_s_tmp & aj_char_tmp & aj_InlineIf(aj_in_string, "", Chr(13) & Chr(10))
     Case Else : aj_s_tmp = aj_s_tmp & aj_char_tmp
    End Select
   End If
  Next

  CleanUpJSONstring = ""
  aj_s_tmp = split(aj_s_tmp, Chr(13) & Chr(10))
  For Each aj_line_tmp In aj_s_tmp
   aj_line_tmp = replace(replace(aj_line_tmp, chr(10), ""), chr(13), "")
   CleanUpJSONstring = CleanUpJSONstring & aj_Trim(aj_line_tmp) & Chr(13) & Chr(10)
  Next
 End Function

 Private Function getJSONValue(ByVal val)
  val = Trim(val)
  If Left(val,1) = ":"  Then val = Mid(val, 2)
  If Right(val,1) = "," Then val = Left(val, Len(val) - 1)
  val = Trim(val)

  Select Case val
   Case "true"  : getJSONValue = True
   Case "false" : getJSONValue = False
   Case "null" : getJSONValue = Null
   Case Else
    If (Instr(val, """") = 0) Then
     If IsNumeric(val) Then
      getJSONValue = CDbl(val)
     Else
      getJSONValue = val
     End If
    Else
     If Left(val,1) = """" Then val = Mid(val, 2)
     If Right(val,1) = """" Then val = Left(val, Len(val) - 1)
     getJSONValue = aj_JSONDecode(Trim(val))
    End If
  End Select
 End Function

 Private JSONoutput_level
 Public Function JSONoutput()
  dim wrap_dicttype, aj_label
  JSONoutput_level = 1
  wrap_dicttype = "[]"
  For Each aj_label In data
    If Not aj_IsInt(aj_label) Then wrap_dicttype = "{}"
  Next
  JSONoutput = Left(wrap_dicttype, 1) & Chr(13) & Chr(10) & GetDict(data) & Right(wrap_dicttype, 1)
 End Function

 Private Function GetDict(objDict)
  dim aj_item, aj_keyvals, aj_label, aj_dicttype
  For Each aj_item In objDict
   Select Case TypeName(objDict.Item(aj_item))
    Case "Dictionary"
     GetDict = GetDict & Space(JSONoutput_level * 4)
     
     aj_dicttype = "[]"
     For Each aj_label In objDict.Item(aj_item).Keys
       If Not aj_IsInt(aj_label) Then aj_dicttype = "{}"
     Next
     If aj_IsInt(aj_item) Then
      GetDict = GetDict & (Left(aj_dicttype,1) & Chr(13) & Chr(10))
     Else
      GetDict = GetDict & ("""" & aj_JSONEncode(aj_item) & """" & ": " & Left(aj_dicttype,1) & Chr(13) & Chr(10))
     End If
     JSONoutput_level = JSONoutput_level + 1
     
     aj_keyvals = objDict.Keys
     GetDict = GetDict & (GetSubDict(objDict.Item(aj_item)) & Space(JSONoutput_level * 4) & Right(aj_dicttype,1) & aj_InlineIf(aj_item = aj_keyvals(objDict.Count - 1),"" , ",") & Chr(13) & Chr(10))
    Case Else
     aj_keyvals =  objDict.Keys
     GetDict = GetDict & (Space(JSONoutput_level * 4) & aj_InlineIf(aj_IsInt(aj_item), "", """" & aj_JSONEncode(aj_item) & """: ") & WriteValue(objDict.Item(aj_item)) & aj_InlineIf(aj_item = aj_keyvals(objDict.Count - 1),"" , ",") & Chr(13) & Chr(10))
   End Select
  Next
 End Function

 Private Function aj_IsInt(val)
  aj_IsInt = (TypeName(val) = "Integer" Or TypeName(val) = "Long")
 End Function

 Private Function GetSubDict(objSubDict)
  GetSubDict = GetDict(objSubDict)
  JSONoutput_level= JSONoutput_level -1
 End Function

 Private Function WriteValue(ByVal val)
  Select Case TypeName(val)
   Case "Double", "Integer", "Long": WriteValue = val
   Case "Null"      : WriteValue = "null"
   Case "Boolean"     : WriteValue = aj_InlineIf(val, "true", "false")
   Case Else      : WriteValue = """" & aj_JSONEncode(val) & """"
  End Select
 End Function

 Private Function aj_JSONEncode(ByVal val)
  val = Replace(val, "\", "\\")
  val = Replace(val, """", "\""")
  'val = Replace(val, "/", "\/")
  val = Replace(val, Chr(8), "\b")
  val = Replace(val, Chr(12), "\f")
  val = Replace(val, Chr(10), "\n")
  val = Replace(val, Chr(13), "\r")
  val = Replace(val, Chr(9), "\t")
  aj_JSONEncode = Trim(val)
 End Function

 Private Function aj_JSONDecode(ByVal val)
  val = Replace(val, "\""", """")
  val = Replace(val, "\\", "\")
  val = Replace(val, "\/", "/")
  val = Replace(val, "\b", Chr(8))
  val = Replace(val, "\f", Chr(12))
  val = Replace(val, "\n", Chr(10))
  val = Replace(val, "\r", Chr(13))
  val = Replace(val, "\t", Chr(9))
  aj_JSONDecode = Trim(val)
 End Function

 Private Function aj_InlineIf(condition, returntrue, returnfalse)
  If condition Then aj_InlineIf = returntrue Else aj_InlineIf = returnfalse
 End Function

 Private Function aj_Strip(ByVal val, stripper)
  If Left(val, 1) = stripper Then val = Mid(val, 2)
  If Right(val, 1) = stripper Then val = Left(val, Len(val) - 1)
  aj_Strip = val
 End Function

 Private Function aj_MultilineTrim(TextData)
  aj_MultilineTrim = aj_RegExp.Replace(TextData, "$1")
 End Function

 private function aj_Trim(val)
  aj_Trim = Trim(val)
  Do While Left(aj_Trim, 1) = Chr(9) : aj_Trim = Mid(aj_Trim, 2) : Loop
  Do While Right(aj_Trim, 1) = Chr(9) : aj_Trim = Left(aj_Trim, Len(aj_Trim) - 1) : Loop
  aj_Trim = Trim(aj_Trim)
 end function
End Class
%>

16. 10. 24.

VB로 MS-SQL 연동

insert,update,delete
Imports System.Data
Imports System.Data.SqlClient
Partial Class _Default
    Inherits System.Web.UI.Page
    Protected Sub Page_Load(sender As Object, e As System.EventArgs) Handles MyBase.Load
        Dim connectionString As String
        Dim sqlConn As New SqlConnection
        Dim sqlComm As New SqlCommand
        connectionString = "server = 127.0.0.1,1433; uid = sa; pwd = password; database = member;"
        sqlConn = New SqlConnection(connectionString)
        sqlComm = New SqlCommand()
        sqlComm.Connection = sqlConn
        sqlComm.CommandText = "insert into tbl_member (code,id,addr) values (@param1,@param2,param3)"
        'sqlComm.CommandText = "update tbl_member set addr=@param3 where code=@param1 and id=param2"
        'sqlComm.CommandText = "delete tbl_member where code=@param1 and id=param2"
        sqlComm.Parameters.AddWithValue("@param1", "1")
        sqlComm.Parameters.AddWithValue("@param2", "abc")
        sqlComm.Parameters.AddWithValue("@param3", "서울")
        Try
            sqlConn.Open()
            sqlComm.ExecuteNonQuery()
            sqlConn.Close()
        Catch ex As Exception
            Response.Write(ex)
        End Try
    End Sub
End Class


select
Imports System.Data
Imports System.Data.SqlClient
Partial Class _Default
    Inherits System.Web.UI.Page
    Protected Sub Page_Load(sender As Object, e As System.EventArgs) Handles MyBase.Load
        Dim connectionString As String
        Dim sqlConn As New SqlConnection
        Dim sqlComm As New SqlCommand
        Dim dt As DataTable
        dt = New DataTable("MEMBER")
        dt.Columns.Add("code", GetType(Integer))
        dt.Columns.Add("id", GetType(String))
        dt.Columns.Add("addr", GetType(String))
        connectionString = "server = 127.0.0.1,1433; uid = sa; pwd = password; database = member;"
        sqlConn = New SqlConnection(connectionString)
        sqlComm = New SqlCommand()
        sqlComm.Connection = sqlConn
        sqlComm.CommandText = "select top 10 code,id,addr from tbl_member where m_id=@param1 order by m_id asc"
        sqlComm.Parameters.AddWithValue("@param1", "master")
        Try
            sqlConn.Open()
            Dim rs As SqlDataReader = sqlComm.ExecuteReader()
            If rs.HasRows Then
                Do While rs.Read()
                    dt.Rows.Add(rs(0), rs(1), rs(2))
                Loop
            End If
            rs.Close()
            sqlConn.Close()
        Catch ex As Exception
            Response.Write(ex)
        End Try
        Response.Write("<table border=""1""><thead><tr><th>CODE</th><th>ID</th><th>ADDR</th></tr></thead><tbody>")
        For i As Integer = 0 To dt.Rows.Count - 1
            Response.Write(String.Format("<tr><td>{0}</td><td>{1}</td><td>{2}</td></tr>", dt.Rows(i).Item("code"), dt.Rows(i).Item("id"), dt.Rows(i).Item("addr")))
        Next
        Response.Write("</tbody></table>")
    End Sub
End Class

PHP에서 ODBC 이용 MS-SQL 연동

<?php
 $ListArr = array();
 $conn = odbc_connect('dbserver', 'ID', 'PASSWORD');
 if($conn){
  $sql = "select top 10".PHP_EOL.
    "m_code,m_id,convert(char(10),m_regdate,120) as m_regdate".PHP_EOL.
    "from tbl_member".PHP_EOL.
    "order by m_code desc".PHP_EOL;
  $rs = odbc_exec($conn, $sql);
  while (odbc_fetch_row($rs)){
   array_push($ListArr,
    array(
     odbc_result($rs,"m_code"),
     iconv('euc-kr','utf-8',odbc_result($rs,"m_id")),
     odbc_result($rs,"m_regdate")
    )
   );
  }
  odbc_close($conn);
 }
?>
<table border="1">
<thead><tr><th>CODE</th><th>ID</th><th>DATE</th></tr></thead>
<tbody>
<?php
 if(count($ListArr)>0){
  foreach($ListArr as $arr1){
   echo "<tr><td>".$arr1[0]."</td><td>".$arr1[1]."</td><td>".$arr1[2]."</td></tr>";
  }
 }else{
  echo "<tr><td colspan=\"3\" align=\"center\">No Exist</td></tr>";
 }
?>
</tbody>
</table>

JQuery 한화면 단위 Mouse Wheel 이동

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>MouseWheel</title>
    <style type="text/css">
        html,body{ margin:0; padding:0; width:100%; height:100%;}
        .box{ width:100%; height:100%; position:relative; color:#ffffff; font-size:24pt;}
    </style>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        window.onload = function () {
            var elm = ".box";
            $(elm).each(function (index) {
                // 개별적으로 Wheel 이벤트 적용
                $(this).on("mousewheel DOMMouseScroll", function (e) {
                    e.preventDefault();
                    var delta = 0;
                    if (!event) event = window.event;
                    if (event.wheelDelta) {
                        delta = event.wheelDelta / 120;
                        if (window.opera) delta = -delta;
                    } 
                    else if (event.detail)
                        delta = -event.detail / 3;
                    var moveTop = $(window).scrollTop();
                    var elmSelecter = $(elm).eq(index);
                    // 마우스휠을 위에서 아래로
                    if (delta < 0) {
                        if ($(elmSelecter).next() != undefined) {
                            try{
                                moveTop = $(elmSelecter).next().offset().top;
                            }catch(e){}
                        }
                    // 마우스휠을 아래에서 위로
                    } else {
                        if ($(elmSelecter).prev() != undefined) {
                            try{
                                moveTop = $(elmSelecter).prev().offset().top;
                            }catch(e){}
                        }
                    }
                    
                    // 화면 이동 0.8초(800)
                    $("html,body").stop().animate({
                        scrollTop: moveTop + 'px'
                    }, {
                        duration: 800, complete: function () {
                        }
                    });
                });
            });
        }
    </script>
</head>
<body>
    <div class="box" style="background-color:red;">1</div>
    <div class="box" style="background-color:orange;">2</div>
    <div class="box" style="background-color:yellow;">3</div>
    <div class="box" style="background-color:green;">4</div>
    <div class="box" style="background-color:blue;">5</div>
    <div class="box" style="background-color:indigo;">6</div>
    <div class="box" style="background-color:violet;">7</div>
</body>
</html>
ie 일 경우 ie 6 이하의 브라우저에서 안됨 이때에는 head에
<meta http-equiv="X-UA-Compatible" content="IE=edge">
를 넣어줘야한다

추가 (좌우)
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>MouseWheel</title>
    <style type="text/css">
        html,body{ margin:0; padding:0; width:100%; height:100%;}
        .boxwrap{ display: table; table-layout: fixed; width: 700%; height: 100%; table-layout: fixed;}
        .box{ display: table-cell;position:relative; color:#ffffff; font-size:24pt;}
    </style>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        window.onload = function () {
            var elm = ".box";
            $(elm).each(function (index) {
                // 개별적으로 Wheel 이벤트 적용
                $(this).on("mousewheel DOMMouseScroll", function (e) {
                    e.preventDefault();
                    var delta = 0;
                    if (!event) event = window.event;
                    if (event.wheelDelta) {
                        delta = event.wheelDelta / 120;
                        if (window.opera) delta = -delta;
                    } 
                    else if (event.detail)
                        delta = -event.detail / 3;
                    var moveTop = $(window).scrollLeft();
                    var elmSelecter = $(elm).eq(index);
                    // 마우스휠을 위에서 아래로
                    if (delta < 0) {
                        if ($(elmSelecter).next() != undefined) {
                            try{
                                moveTop = $(elmSelecter).next().offset().left;
                            }catch(e){}
                        }
                    // 마우스휠을 아래에서 위로
                    } else {
                        if ($(elmSelecter).prev() != undefined) {
                            try{
                                moveTop = $(elmSelecter).prev().offset().left;
                            }catch(e){}
                        }
                    }
                    
                    // 화면 이동 0.8초(800)
                    $("html,body").stop().animate({
                        scrollLeft: moveTop + 'px'
                    }, {
                        duration: 800, complete: function () {
                        }
                    });
                });
            });
        }
    </script>
</head>
<body>
    <div class="boxwrap">
    <div class="box" style="background-color:red;">1</div>
    <div class="box" style="background-color:orange;">2</div>
    <div class="box" style="background-color:yellow;">3</div>
    <div class="box" style="background-color:green;">4</div>
    <div class="box" style="background-color:blue;">5</div>
    <div class="box" style="background-color:indigo;">6</div>
    <div class="box" style="background-color:violet;">7</div>
    </div>
</body>
</html>
좀 복잡한 방법 : Jquery 한화면 단위 Mouse Wheel 이동 (응용)

VB.NET Email 전송

    Function eMailCDOSend(MailTitle As String, MailTag As String, Sender As String, Receiver As String, addFile As String) As Boolean
        ' MailTitle : 제목
         ' MailTag : html내용
         ' Sender : 보내는 사람
         ' Receiver : 받는사람

        Dim eMailObject, eMailConfig
        Dim SchemaPath

        eMailObject = Server.CreateObject("CDO.Message")
        eMailConfig = Server.CreateObject("CDO.Configuration")
        SchemaPath = "http://schemas.microsoft.com/cdo/configuration/"
        Try
            With eMailConfig.Fields
                .Item(SchemaPath & "sendusing") = 2  'CDOSendUsingPort
                .Item(SchemaPath & "smtpserver") = "127.0.0.1"  'CDOSendUsingPort [ServerIP]
                .Item(SchemaPath & "smtpserverport") = "325"     'Port
                .Update
            End With
            eMailObject.Configuration = eMailConfig

            eMailConfig = Nothing
            If addFile <> "" Then
                eMailObject.To = Receiver
                eMailObject.From = Sender
                eMailObject.Subject = MailTitle
                eMailObject.HTMLBody = MailTag
                eMailObject.BodyPart.Charset = "ks_c_5601-1987"
                eMailObject.HTMLBodyPart.Charset = "ks_c_5601-1987"
                eMailObject.HTMLBodyPart.ContentTransferEncoding = "quoted-printable"
                eMailObject.AddAttachment(addFile)
                eMailObject.fields.update
                eMailObject.Send
            Else
                With eMailObject
                    .From = Sender
                    .To = Receiver
                    .Subject = MailTitle
                    .HTMLBody = MailTag
                    .BodyPart.Charset = "ks_c_5601-1987"
                    .HTMLBodyPart.Charset = "ks_c_5601-1987"
                    .HTMLBodyPart.ContentTransferEncoding = "quoted-printable"
                    .Send
                End With
           End If
            eMailObject = Nothing
        Catch ex As Exception
            Return False
        End Try
        Return True
    End Function

16. 7. 28.

C#으로 MS-SQL 연동

insert,update,delete
using System;
using System.Data.SqlClient;

namespace MsSql
{
    class Program
    {
        
        static void Main(string[] args)
        {
            // Sql 연결정보(서버:127.0.0.1, 포트:3535, 아이디:sa, 비밀번호 : password, db : member)
            string connectionString = "server = 127.0.0.1,3535; uid = sa; pwd = password; database = member;";
            // Sql 새연결정보 생성
            SqlConnection sqlConn = new SqlConnection(connectionString);
            SqlCommand sqlComm = new SqlCommand();
            sqlComm.Connection = sqlConn;
            sqlComm.CommandText = "insert into tbl_member (id,name,addr) values (@param1,@param2,@param3)";
            //sqlComm.CommandText = "update tbl_member set addr=@param3 where id=@param1 and name=@param2";
            //sqlComm.CommandText = "delete tbl_member where id=@param1 and name=@param2 and addr=@param3";
            sqlComm.Parameters.AddWithValue("@param1", "abc");
            sqlComm.Parameters.AddWithValue("@param2", "홍길동");
            sqlComm.Parameters.AddWithValue("@param3", "서울");
            sqlConn.Open();
            sqlComm.ExecuteNonQuery();
            sqlConn.Close();
        }
    }
}


select
using System;
using System.Data.SqlClient;

namespace MsSql
{
    class Program
    {
        
        static void Main(string[] args)
        {
            // Sql 연결정보(서버:127.0.0.1, 포트:3535, 아이디:sa, 비밀번호 : password, db : member)
            string connectionString = "server = 127.0.0.1,3535; uid = sa; pwd = password; database = member;";
            // Sql 새연결정보 생성
            SqlConnection sqlConn = new SqlConnection(connectionString);
            SqlCommand sqlComm = new SqlCommand();
            sqlComm.Connection = sqlConn;
            sqlComm.CommandText = "select top 10 id,addr from tbl_member where name=@param1 order by id asc";
            sqlComm.Parameters.AddWithValue("@param1", "김준");
            sqlConn.Open();
            using (SqlDataReader SqlRs = sqlComm.ExecuteReader())
            {
                Console.WriteLine("ID \t \t | Address");
                while (SqlRs.Read())
                {
                    Console.WriteLine(string.Format("{0} \t \t | {1}", SqlRs[0].ToString(),SqlRs[1].ToString()));
                }
            }
            sqlConn.Close();
        }
    }
}

16. 7. 20.

C#.NET 파일업로드

upload.html 파일
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>파일업로드</title>
</head>
<body>
 <form name="form1" method="post" action="Upload.aspx" enctype="multipart/form-data">
  <input type="file" name="file1" multiple/>
  <input type="submit" value="업로드"/>
 </form>
</body>
</html>


Upload.aspx 파일
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Upload.aspx.cs" Inherits="Upload" %>


Upload.aspx.cs 파일
using System;
using System.Drawing;
using System.Drawing.Drawing2D;
using System.Drawing.Imaging;
using System.IO;
using System.Web;

public partial class Upload : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        HttpFileCollection uploadedFiles = Request.Files;

        int maxFile = 10;

        if (uploadedFiles.Count > maxFile)
        {
            Response.Write("한번에 올릴 수 있는 파일수는 " + maxFile.ToString() + "개입니다.");
            return;
        }

        for (int i = 0; i < uploadedFiles.Count; i++)
        {
            HttpPostedFile userPostedFile = uploadedFiles[i];

            if (userPostedFile.ContentLength > 0 && !String.IsNullOrEmpty(userPostedFile.FileName))
            {
                string result = UploadFileSave(userPostedFile, i);
                if (result != "")
                {
                    // 업로드 성공
                    Response.Write(result + " ");
                }
                else
                {
                    // 업로드 실패
                }
            }
        }
    }

    private string UploadFileSave(HttpPostedFile SaveFile, int no)
    {
        // 저장폴더
        string wPath = Server.MapPath("/file") + "\\";
        string thumPath = Server.MapPath("/file/thum") + "\\";
        DirectoryInfo di = new DirectoryInfo(wPath);
        // 폴더가 없을 경우 생성
        if (di.Exists == false)
            di.Create();
        di = new DirectoryInfo(thumPath);
        // 폴더가 없을 경우 생성
        if (di.Exists == false)
            di.Create();
        // 확장자
        string fileType = SaveFile.FileName.Substring(SaveFile.FileName.LastIndexOf(".") + 1);
        // 변경할 파일 이름
        string saveFileName = DateTime.Now.ToString("yyyyMMddhhmmss") + '_' + no + "." + fileType;
        try
        {
            // 이미지 확장자 일 경우
            if (("jpg|jpeg|bmp|gif|png").IndexOf(fileType.ToLower()) > -1)
            {
                Bitmap img = new Bitmap(SaveFile.InputStream);
                RotateFlipType rft = RotateFlipType.RotateNoneFlipNone;
                PropertyItem[] properties = img.PropertyItems;
                foreach (PropertyItem p in properties)
                {
                    // 이미지가 똑바로 되어있지 않은 경우
                    if (p.Id == 274)
                    {
                        Int16 orientation = BitConverter.ToInt16(p.Value, 0);
                        switch (orientation)
                        {
                            case 1:
                                rft = RotateFlipType.RotateNoneFlipNone;
                                break;
                            case 3:
                                rft = RotateFlipType.Rotate180FlipNone;
                                break;
                            case 4:
                                rft = RotateFlipType.Rotate90FlipNone;
                                break;
                            case 8:
                                rft = RotateFlipType.Rotate270FlipNone;
                                break;
                        }
                    }
                }
                // 이미지가 부분은 이미지가 누워있을 경우 세워준다
                if (rft != RotateFlipType.RotateNoneFlipNone)
                {
                    img.RotateFlip(rft);
                }
                // 저장
                img.Save(wPath + "\\" + saveFileName);

                // 썸네일 작업
                // 썸네일 폭
                int thumW = 100;
                // 썸네일 높이
                int thumH = 100;
                // 썸네일 좌표 X
                int thumX = 0;
                // 썸네일 좌표 Y
                int thumY = 0;
                // 썸네일 이미지 그리기전 사이즈 지정
                Bitmap thumimg = new Bitmap(thumW, thumH);
                if (img.Width >= thumW && img.Height >= thumH)
                {
                    if (img.Width >= img.Height)
                    {
                        thumW = (thumH * img.Width) / img.Height;
                        thumX = (thumW - thumH) / 2;
                        thumY = 0;
                    }
                    else
                    {
                        thumH = (thumW * img.Height) / img.Width;
                        thumY = (thumH - thumW) / 2;
                        thumX = 0;
                    }
                }
                else if (img.Width >= img.Height && img.Height < thumH)
                {
                    thumW = img.Width;
                    thumH = img.Height;
                    thumX = (img.Width - thumW) / 2;
                    thumY = (img.Height - thumH) / 2 * -1;
                }
                else if (img.Width < img.Height && img.Height >= thumH)
                {
                    thumW = img.Width;
                    thumH = img.Height;
                    thumX = (img.Width - thumW) / 2 * -1;
                    thumY = (img.Height - thumH) / 2;
                }
                else
                {
                    thumW = img.Width;
                    thumH = img.Height;
                    thumX = (img.Width - thumW) / 2 * -1;
                    thumY = (img.Height - thumH) / 2 * -1;
                }
                Graphics gp = Graphics.FromImage(thumimg);
                gp.InterpolationMode = InterpolationMode.HighQualityBicubic;
                gp.DrawImage(img, new Rectangle(-thumX, -thumY, thumW, thumH));
                // 썸네일 저장
                thumimg.Save(wPath + "\\thum\\" + saveFileName);
            }
            else 
            {
                // 이미지가 아닐경우
                // 저장하기
                SaveFile.SaveAs(wPath + "\\" + saveFileName);
            }
        }
        catch
        {
            return "";
        }
        return saveFileName;
    }
}

14. 1. 10.

안드로이드 Classic ASP PUSH 서버

push.asp 파일
<%
 ' 안드로이드 ASP 푸시 요청
 PushServerURL = "https://android.googleapis.com/gcm/send"

'  브라우저APIkey
 ApplicationAPIKey = "AIzaSyBi0pn1ckaJhRL9kK3mbwsHzk7x0fdE_Z8"

 ' regId(받을사람이 지급받은 registration_ids - 여러명일 경우 배열로 받아처리하면 될 듯 최대 1000)
 RegId = "APA91bFNkzpbgBJnWkDgyGmU0XsF8ZLMAEhVaAtcbf9po8_i1GoA4JNt4HiUc6xScBMEOoJMIHHybZECIns9e2EF4AGalfOgZqwmQIEUG1UpVk08nTapx0iY17vOELD_9wIQTUdRwUsR"

 ' 알림명
 tickerText = "알림테스트"
 ' 알림 제목
 contentTitle = "테스트 제목"
 ' 알림 내용
 message = "헬로~~~ 테스트입니다.~~~"

 postJSONData = "" & _
    "{" & _
    "  ""registration_ids"" : [ """ & RegId & """ ]" & _
    ", ""data"": {" & _
    "                 ""tickerText"" : """ & tickerText & """" & _
    "               , ""contentTitle"" : """ & contentTitle & """" & _
    "               , ""message"" : """ & message & """" & _
    "            }" & _
    "}"

 Set httpObj = Server.CreateObject("WinHttp.WinHttpRequest.5.1")
 httpObj.open "POST" , PushServerURL, False
 httpObj.SetRequestHeader "Content-Type", "application/json"
 httpObj.SetRequestHeader "Authorization", "key=" & ApplicationAPIKey
 httpObj.Send postJSONData
 httpObj.WaitForResponse

 If httpObj.Status = "200" Then
  response.Write("전송성공 : " & httpObj.ResponseText)
 Else
  response.Write("전송실패 : " & httpObj.ResponseText)
 End If

%>


참고:
html
<form method="post" action="push.asp">
    tickerText :
    <input type="text" name="tickerText" value="알림테스트" /><br>
    contentTitle :
    <input type="text" name="contentTitle" value="테스트 제목" /><br>
    message :
    <textarea name="message">헬로~~~ 테스트입니다.~~~</textarea><br>
    RegId :
    <input type="text" name="RegId" value="APA91bFNkzpbgBJnWkDgyGmU0XsF8ZLMAEhVaAtcbf9po8_i1GoA4JNt4HiUc6xScBMEOoJMIHHybZECIns9e2EF4AGalfOgZqwmQIEUG1UpVk08nTapx0iY17vOELD_9wIQTUdRwUsR" /><br>
    <input type="text" name="RegId" value="APA91bFNkzpbgBJnWkDgyGmU0XsF8ZLMAEhVaAtcbf9pp8_i1GoA4JNt4HiUc6xScBMEOoJMIHHybZECIns9e2EF4AGalfOgZqwmQIEUG1UpVk08nTapx0iY17vOELD_9wIQTUdRwUsR" /><br>
    <input type="text" name="RegId" value="APA91bFNkzpbgBJnWkDgyGmU0XsF8ZLMAEhVaAtcbf9pd8_i1GoA4JNt4HiUc6xScBMEOoJMIHHybZECIns9e2EF4AGalfOgZqwmQIEUG1UpVk08nTapx0iY17vOELD_9wIQTUdRwUsR" /><br>
    <input type="submit" value="전송요청" />
</form>
asp
<%
 tickerText = request.Form("tickerText")
 contentTitle = request.Form("contentTitle")
 message = request.Form("message")
 RegId_Count = request.Form("RegId").Count
 RegId = ""
 For i = 1 To RegId_Count
  if i<>1 then RegId = RegId & ","
  RegId = RegId & """" & request.Form("RegId")(i) & """"
 Next


 postJSONData = "" & _
    "{" & _
    "  ""registration_ids"" : [ " & RegId & " ]" & _
    ", ""data"": {" & _
    "                 ""tickerText"" : """ & tickerText & """" & _
    "               , ""contentTitle"" : """ & contentTitle & """" & _
    "               , ""message"" : """ & message & """" & _
    "            }" & _
    "}"

%>

13. 8. 10.

안드로이드 C#.NET PUSH 서버

push.aspx 파일
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="push.aspx.cs" Inherits="mobile_push" %>

<!DOCTYPE html>
<html>
<head>
    <title>푸쉬 전송 TEST</title>
</head>
<body>
<asp:Literal ID="SendResult" runat="server" />
</body>
</html>


push.aspx.cs 파일
using System;
using System.Net.Security;
using System.Net;
using System.Text;
using System.IO;
using System.Security.Cryptography.X509Certificates;

public partial class mobile_push : System.Web.UI.Page
{

    protected void Page_Load(object sender, EventArgs e)
    {


        // 브라우저APIkey
        string BrowserAPIKey = Request.QueryString["ApiKey"];
        // BrowserAPIKey  = "AIzaSyBi0pn1ckaJhRL9kK3mbwsHzk7x0fdE_Z8";

        // regId(받을사람이 지급받은 registration_ids - 여러명일 경우 배열로 받아처리하면 될 듯 최대 1000)
        string RegId = Request.QueryString["RegId"];
        // RegId = "APA91bFNkzpbgBJnWkDgyGmU0XsF8ZLMAEhVaAtcbf9po8_i1GoA4JNt4HiUc6xScBMEOoJMIHHybZECIns9e2EF4AGalfOgZqwmQIEUG1UpVk08nTapx0iY17vOELD_9wIQTUdRwUsR";

        // 알림명
        string tickerText = Request.QueryString["Ticker"];
        // tickerText = "알림테스트";

        // 알림 제목
        string contentTitle = Request.QueryString["Title"];
        // contentTitle = "알림제목";

        // 알림 내용
        string message = Request.QueryString["Msg"];
        // message = "안녕하세요~~~푸쉬입니다.";

        string postData = "";
        postData += "{";
        postData += "  \"registration_ids\": [ \"" + RegId + "\" ]";
        postData += ", \"data\": {";
        postData += "                 \"tickerText\":\"" + tickerText + "\"";
        postData += "               , \"contentTitle\":\"" + contentTitle + "\"";
        postData += "               , \"message\": \"" + message + "\"";
        postData += "            }";
        postData += "}";

        string response = SendGCMNotification(BrowserAPIKey, postData);

        SendResult.Text = response;

    }



    private string SendGCMNotification(string apiKey, string postData, string postDataContentType = "application/json")
    {
        ServicePointManager.ServerCertificateValidationCallback += new RemoteCertificateValidationCallback(ValidateServerCertificate);
        //  MESSAGE CONTENT
        byte[] byteArray = Encoding.UTF8.GetBytes(postData);
        //  CREATE REQUEST
        HttpWebRequest Request = (HttpWebRequest)WebRequest.Create("https://android.googleapis.com/gcm/send");
        Request.Method = "POST";
        Request.KeepAlive = false;
        Request.ContentType = postDataContentType;
        Request.Headers.Add(string.Format("Authorization: key={0}", apiKey));
        Request.ContentLength = byteArray.Length;

        Stream dataStream = Request.GetRequestStream();
        dataStream.Write(byteArray, 0, byteArray.Length);
        dataStream.Close();

        //  SEND MESSAGE
        try
        {
            WebResponse Response = Request.GetResponse();
            HttpStatusCode ResponseCode = ((HttpWebResponse)Response).StatusCode;
            if (ResponseCode.Equals(HttpStatusCode.Unauthorized) || ResponseCode.Equals(HttpStatusCode.Forbidden))
            {
                var text = "Unauthorized - need new token";
                Console.Write(text);
            }
            else if (!ResponseCode.Equals(HttpStatusCode.OK))
            {
                var text = "Response from web service isn't OK";
                Console.Write(text);
            }

            StreamReader Reader = new StreamReader(Response.GetResponseStream());
            string responseLine = Reader.ReadToEnd();
            Reader.Close();

            return responseLine;
        }
        catch (Exception e)
        {

        }
        return "Error";

    }

    public static bool ValidateServerCertificate(object sender,X509Certificate certificate,X509Chain chain,SslPolicyErrors sslPolicyErrors)
    {
        return true;
    }
}

13. 7. 19.

Javascript 브라우저 기본정보 체크

 window.onload = function(){
  var html="";
  html += "width : " + "<strong>" + screen.availWidth + "</strong>";
  html += "height : " + "<strong>" + screen.availHeight + "</strong>";
  html += "platform : " + "<strong>" + navigator.platform + "</strong>";
  html += "app_name : " + "<strong>" + navigator.appName + "</strong>";
  html += "app_version : " + "<strong>" + navigator.appVersion + "</strong>";
  document.write(html);
 }