日新又日新: 12월 2016

2016년 12월 14일 수요일

브라우저 종류를 판단해주는 자바스크립트 함수

- 프로젝트를 진행할때 보면 ie7,8이 크로스브라우징이 안되어서 골치 아플때가 많다..

- Detectizr.js를 사용해서 해결해도 되지만 Detectizr.js는 modernizr.js가 있어야 작동되므로..

- 간단히 ie만 체크해야 할땐 아래 함수를 사용해서 해결하면 도움이 된다.

- 사용법은 출처 및 아래 첨부파일 다운

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<script>
function checkBrowser(){ // 외부 라이브러리와 충돌을 막고자 모듈화.
    // 브라우저 및 버전을 구하기 위한 변수들.
    'use strict';
    var agent = navigator.userAgent.toLowerCase(),
        name = navigator.appName,
        browser;
    
    // MS 계열 브라우저를 구분하기 위함.
    if(name === 'Microsoft Internet Explorer' || agent.indexOf('trident') > -1 || agent.indexOf('edge/') > -1) {
        browser = 'ie';
        if(name === 'Microsoft Internet Explorer') { // IE old version (IE 10 or Lower)
            agent = /msie ([0-9]{1,}[\.0-9]{0,})/.exec(agent);
            browser += parseInt(agent[1]);
        } else { // IE 11+
            if(agent.indexOf('trident') > -1) { // IE 11 
                browser += 11;
            } else if(agent.indexOf('edge/') > -1) { // Edge
                browser = 'edge';
            }
        }
    } else if(agent.indexOf('safari') > -1) { // Chrome or Safari
        if(agent.indexOf('opr') > -1) { // Opera
            browser = 'opera';
        } else if(agent.indexOf('chrome') > -1) { // Chrome
            browser = 'chrome';
        } else { // Safari
            browser = 'safari';
        }
    } else if(agent.indexOf('firefox') > -1) { // Firefox
        browser = 'firefox';
    }

    // IE: ie7~ie11, Edge: edge, Chrome: chrome, Firefox: firefox, Safari: safari, Opera: opera
    document.getElementsByTagName('html')[0].className = browser;
    document.getElementById("browser_div").innerHTML = "브라우저 타입 : " + browser;
}
</script>
</head>
<body>
<input type="button" onClick="checkBrowser()" value="확인"/>
<br /><div id="browser_div"></div>
</body>
</html>

[출처] http://micropilot.tistory.com/category/Javascript?page=76

Javascript static function example

Javascript static 함수/변수 선언 예

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Javascript static function demo</title>
<script type="text/javascript">
function Vector2D(x,y) {
     
    this.x = x;
    this.y = y;
     
    // 인스턴스 함수 선언
    this.add =  function(v2d){
        var x = this.x + v2d.x;
        var y = this.y + v2d.y;
        return new Vector2D(x,y);
    }
};
 
// static 변수선언
Vector2D.len = 0;
 
// static 함수 선언
Vector2D.add = function(v1,v2) {
    //alert(this.x); // this.x 를 인식하지 못함
    return new Vector2D(v1.x+v2.x, v1.y+v2.y);
}
 
// 인스턴스 함수 추가선언
Vector2D.prototype.length = function() {
    return Math.sqrt(this.x*this.x + this.y*this.y);
}
 
// 인스턴스 변수 추가선언
Vector2D.prototype.name = 'MyName'; // 이미 생성된 인스턴스에도 포함됨
 
<!-- var v2d = new Vector2D(3,4); -->
var tmp = new Vector2D(1,2);
var resultVec = v2d.add(tmp); // 인스턴스 함수호출
//console.log(resultVec.x);
 
var vec = Vector2D.add(v2d,tmp); // static 함수호출
 
console.log('v2d.length():'+v2d.length()); // 인스턴스 함수호출
console.log('Vector2D.len:'+Vector2D.len); // static 변수사용
 
</script>
</head>
<body>
 
</body>
</html>

2016년 12월 12일 월요일

자바스크립트 eval() 함수를 이용하여 문자열로 표현된 식이나 함수 실행하기

var str = '10 + 20' ;

var ans = eval ( str ); // 문자열을 표현식으로 해석하여 실행하면 위의 산술식이 실행되므로 30을 리턴한다

다음과 같이 함수(익명함수 포함)를 선언하고 즉시 호출하기 위한 코드는 오류를 발생한다. 함수선언은 반드시 마지막 ' } ' 으로 종료되어야 하기 때문이다

function() {
 alert('익명함수 호출실행됨1');
}(); // <-- 함수선언 문법 오류

오류가 발생한 위의 코드를 약간 수정하여 아래의 코드를 실행하면 선언과 동시에 호출할 수 있고 문제 없이 실행된다

괄호 안에 함수를 선언하면 선언문법을 지킬 수 있고, 그 함수를 호출하기 위해 괄호 밖에 함수호출을 위한 괄호를 사용한 것이다

(function() {
 alert('익명함수 호출실행됨1');
})();

다음과 같이 문자열 형식으로 선언된 함수가 있을 때 eval () 함수를 사용해서 실행할 수도 있다

var strFun = "function() { "+
 "alert('익명함수 호출실행됨3'); "+
"}";
eval("("+strFun+")()"); // <-- 함수선언 문법을 지키고 선언과 동시에 실행하기 위해 괄호를 사용한 것이다

[출처] http://micropilot.tistory.com/2752

onSubmit Event example

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Javascript onSubmit example</title>

<script>
function checkForm(form1){
 if(form1.id.value == "") {
  alert("ID required");
  form1.id.focus();
  return false;
 }
 else {
  ans = confirm("정말로 전송하시겠어요?");
  return ans;
 }
}
</script>

</head>
<body>
onSubmit.jsp
<form method="post" onSubmit="return checkForm(this);" action="http://localhost/onSubmit.jsp">
ID: <input type="text" name="id"> 
<input type="submit" value="전 송">
</form>

</body>
</html>

onSubmit.jsp

<%@ page language="java" contentType="text/html; charset=EUC-KR"%>
<html>
<body>
서버에 전송된 ID: 
<%=request.getParameter("id") %>
</body>
</html>

DIV영역 하단부가 상하로 이동하는 예제

And here is my very slick menu!

Toggle

<html>
<head>
 <title>Javascript test</title>
 <script language="javascript">
 
  var active = 1;
  var height = 100;

  function toggle_visible() {
  
   if(active == 0) {
    
    active = 1;
    
    divPlusOne();    
   
   } else if(active == 1){
   
    active = 0; 
     
    divMinusOne();
   
   }
  
  }
  
  function divPlusOne() {
   
   if(height <= 100) {
   
    document.getElementById('testDiv').style.visibility="visible"; 
   
    height = height + 1;
    document.getElementById('testDiv').style.height=height + 'px';  
    
    window.setTimeout('divPlusOne()', 1);
    
   }
  
  }
  
  function divMinusOne() {
   
   if(height >= 20) {
   
    height = height - 1;
    document.getElementById('testDiv').style.height=height + 'px';
    
    window.setTimeout('divMinusOne()', 1);
    
   } else {
   
    document.getElementById('testDiv').style.visibility="hidden";
   
   }
  }
 </script>
</head>
<body>

 <div id="testDiv" style="border: #000000 1px solid; height: 100px;">And here is my very slick menu!</div>
<br />

 <a href="#" onClick="toggle_visible()">Toggle</a><br />
<br />

</body>
</html>

[출처]http://micropilot.tistory.com/category/Javascript?page=75#

팝업 윈도우에서 입력한 값을 부모 윈도우에 설정하기

부모 윈도우(parent.html)

<HTML>
 <HEAD>
  <TITLE> opener Window </TITLE>

 <script>
  function showChild(){
   popup = window.open("child.html", "popWnd", "width=500,height=200,toolbar=no,location=no,directories=no,status=no,menubar=no, scrollbars=no,resizable=yes,copyhistory=no");

   document.getElementById("div01").innerHTML = "팝업 윈도우에서 변경할 문자열";
  }
 </script>

 </HEAD>
 <BODY><CENTER><br><br>

 <div id="div01"> 
 아래의 버튼을 누르면 팝업 윈도우가 보입니다.<br>
 팝업 윈도우의 폼에 임의의 문자열을 입력해 보세요.
 </div>

 <br><br>
 <input type='button' value="팝업 윈도우 보이기" onClick="showChild();">

 </CENTER></BODY>
</HTML>

자식 윈도우(child.html)

<HTML>
 <HEAD>
  <TITLE> Child Window </TITLE>

 <script>
  function passToOpener(){
   opener.document.getElementById("div01").innerHTML=document.childForm.field01.value;
   window.close();
  }
 </script>

 </HEAD>

 <BODY><CENTER>

  <form name="childForm">
   입력:<input type="text" name="field01"><br><br>

   <input type="button" value="위에 입력한 내용을 부모 윈도우로 보내기" onClick="passToOpener()">
  </form>

 </CENTER></BODY>
</HTML>

[출처]http://micropilot.tistory.com/category/Javascript?page=78

innerHTML Example

document.getElementById("xxx").innerHTML="Hello World";
다음 2개의 라인 중 한개를 반복해서 클릭해 보세요.

1. Click (링크를 이용한 경우)

2.innerHTML Test (<div>태그를 이용한 경우)

<SCRIPT>
message = "<font color='red'><center>Hello World<br />";
message += "1<br />2<br />3<br />4<br />5</center></font>"; 

on=1;
function toggle(){
  if(on==1){
    document.getElementById("msg").innerHTML=message;
    on=0;
  }else{
    document.getElementById("msg").innerHTML="";
    on=1;
  }
}
</SCRIPT>

<CENTER><STRONG><FONT size=4>document.getElementById("xxx").innerHTML="Hello World";</FONT></STRONG> 
<P>
<br /> 다음 2개의 라인 중 한개를 반복해서 클릭해 보세요.
<br />
<br />1. <A href="javascript:toggle();">Click</A> (링크를 이용한 경우)<br /><br />
<DIV onclick=toggle();>2.innerHTML Test (<div>태그를 이용한 경우)</DIV><br />
<DIV id=msg> </DIV>
</CENTER>

[출처]http://micropilot.tistory.com/category/Javascript?page=79

자바스크립트를 이용하여 마우스 위치 구하기

<html>
<body>

<form name="Show">
<input type="text" name="MouseX" value="0" size="4"> X<br>
<input type="text" name="MouseY" value="0" size="4"> Y<br>
</form>

<script language="JavaScript1.2">
<!--

// Detect if the browser is IE or not.
// If it is not IE, we assume that the browser is NS.
var IE = document.all?true:false

// If NS -- that is, !IE -- then set up for mouse capture
if (!IE) document.captureEvents(Event.MOUSEMOVE)

// Set-up to use getMouseXY function onMouseMove
document.onmousemove = getMouseXY;

// Temporary variables to hold mouse x-y pos.s
var tempX = 0
var tempY = 0

// Main function to retrieve mouse x-y pos.s

function getMouseXY(e) {
  if (IE) { // grab the x-y pos.s if browser is IE
    tempX = event.clientX + document.body.scrollLeft
    tempY = event.clientY + document.body.scrollTop
  } else {  // grab the x-y pos.s if browser is NS
    tempX = e.pageX
    tempY = e.pageY
  }  
  // catch possible negative values in NS4
  if (tempX < 0){tempX = 0}
  if (tempY < 0){tempY = 0}  
  // show the position values in the form named Show
  // in the text fields named MouseX and MouseY
  document.Show.MouseX.value = tempX
  document.Show.MouseY.value = tempY
  return true
}

//-->
</script>
</body>
</html>

메인 윈도우에서 생성한 팝업 윈도우에서 서버에 요청하고 그 응답을 메인 윈도우에서 받는 예제

main.html 이 브라우저에 로드되면 mainWnd라는 이름을 붙여주고
현재 윈도우에서 생성된 팝업 윈도우(popup.html)가 웹서버에 요청하고 그 응답(response.html)이
mainWnd를 갱신하도록 한다.

main.html (Parent Window)

<HTML>
<HEAD><TITLE> Main.html </TITLE>
<script>
 function openWnd(){
  window.open("popup.html", "pop", "toolbar=no,menubar=no,width=300,height=200,resizable=yes,left=200,top=200");
 }
</script>
</HEAD>
<BODY onLoad="window.name='mainWnd'">
<input type="button" value="Winopen" onClick="openWnd();">
</BODY>
</HTML>

popup.html (Child Window)

<HTML>
<HEAD><TITLE> Popup window </TITLE></HEAD>
<BODY>  
<!--폼을 처리하는 response.html은 target이 mainWnd이므로
폼을 전송하면 그 결과가 mainWnd라는 이름의 브라우저 화면에 나타난다.-->

<form action="response.html" method="post" target="mainWnd" onSubmit="window.close();">
<input type="submit" value="Send">
</form>

</BODY>
</HTML>

response.html

<HTML>
<HEAD><TITLE> response.html</TITLE></HEAD>
<!--이 문서는 mainWnd라는 이름의 브라우저 화면에 나타난다-->
<BODY>
Acton.html
</BODY>
</HTML>

2016년 12월 11일 일요일

자바스크립트 타이머, 스타일시트를 이용하여 지정된 시간 경과후 내용 보여주기

<script language="javascript">

setTimeout("hello()", 4000);

function hello(){
   document.getElementById("answer").style.visibility="visible";
}

</script>

<div id="answer" style="visibility: hidden;">
<span style="color: red;">
</span>
<br />
<h1>
<span style="color: red;">Hello World</span></h1>
</div>

2016년 12월 1일 목요일

HTML TIP

margin과 padding의 차이
http://clason.tistory.com/321