for문 사용

function getRandomArray(idxSize, range) {
	/* 랜덤 수를 가진 배열을 반환하는 메서드.
	 * idxSize : 반환받을 배열 사이즈, 
	 * range : 랜덤 수의 범위
	 */
	var indexs = new Array(); // 랜덤 인덱스 배열
	var hasValue = false; //같은 값이 있는지 확인하기 위한 변수
	
	if(idxSize > range) {
		console.error('index size > range');
		return indexs;
	}
	
	while(indexs.length < idxSize) {
		hasValue = false;
		var temp = parseInt(Math.random() * range);
		for(c = 0; c < indexs.length; c++) {
			if(temp == indexs[c]) {
				hasValue = true;
				break;
			}
		}
		if(hasValue == false) {
			indexs.push(temp);
		} 
	}
	return indexs;
}

// 사용방법
var indexs = new Array();
indexs = console.log(getRandomArray(5, 10));
indexs.forEach(function(value) {
	console.log(value);
});


Set 사용

set으로 좀 더 짧은 코드를 작성할 수 있지만 크롬과 오페라, 파이어폭스에서만 지원되며 익스플로러에서는 Set을 지원하지 않는다.

var indexs = new Set();
while(1) {
	indexs.add(parseInt(Math.random() * 10));
	if(indexs.size == 5) {
		console.log(indexs.size);
		break;
	}
}

indexs.forEach(function(value) {
	console.log(value);
});

CSS로 말줄임표 만들기

.ellipsis{width:200px;text-overflow:ellipsis;-o-text-overflow:ellipsis;overflow:hidden;white-space:nowrap; word-wrap:normal !important;}


참고 사이트 링크, 링크(JQuery 플러그인)


'Web > HTML,CSS' 카테고리의 다른 글

[CSS] div 둥근 테두리 만들기  (0) 2013.08.30
[HTML] html RFC 한글 번역  (0) 2013.08.20
[HTML] 한글 번역문 HTML 4.01  (0) 2013.08.20
[CSS] Opacity 투명도 조절하기  (0) 2013.08.09

main page

Javascript를 이용해서 다음 페이지에 파라미터 넘기기 위한 방법이다.

<html>
 <head>
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
  <script>
   function setChildValue(index) {
    window.location.href = "subPage.html?index=" + index;
   }
  </script>
 </head>
 <body>
  <button onclick="setChildValue(123)">Click me</button>
 </body>
</html>

sub page

방법 1

<!DOCTYPE html>
<html>
<head>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function () {
			var val = location.href.substr(
				location.href.lastIndexOf('=') + 1
			);
			console.log('val : ' + val);
		});
	</script>
</head>
<body>

</body>
</html>

방법 2

<!DOCTYPE html>
<html>
<head>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
	<script type="text/javascript">
		function getURLParameter(name) {
			return decodeURI(
			 (RegExp(name + '=' + '(.+?)(&|$)').exec(location.search)||[,null])[1]
			);
		}

		function getURLParameter2(name) {
			 return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search)||[,""])[1].replace(/\+/g, '%20'))||null
		}
		$(document).ready(function () {
			console.log('val : ' + getURLParameter('index'));
			console.log('val : ' + getURLParameter2('index'));
		}
	</script>
</head>
<body>
</body>
</html>

방법 3

<!DOCTYPE html>
<html>
<head>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
	<script type="text/javascript">
		var getParameter = function (param) {
			var returnValue;
			var url = location.href;
			var parameters = (url.slice(url.indexOf('?') + 1, url.length)).split('&');
			for (var i = 0; i < parameters.length; i++) {
				var varName = parameters[i].split('=')[0];
				if (varName.toUpperCase() == param.toUpperCase()) {
					returnValue = parameters[i].split('=')[1];
					return decodeURIComponent(returnValue);
				}
			}
		};
		$(document).ready(function () {
			console.log('val : ' + getParameter('index'));
		}
	</script>
</head>
<body>
</body>
</html>

문제점

다음과 같이 ajax로 다른 페이지에 접급하려할 때 에러가 발생하였다.

source

$.ajax(
 {
  type: "GET",
  contentType: 'text/xml',
  dataType: "xml",
  url: 'url address',
  timeout: 4000,
  async: false,
  success: parseXml,
 });

error message

XMLHttpRequest cannot load http://xx.xx.xx.xx/xxx. Request header field Content-Type is not allowed by Access-Control-Allow-Headers. 

원인은 ajax로 외부 서버에 접속하려 할 경우에 보안상의 문제 때문이라고 한다. 해결방법에는 여러가지가 있다.


해결방안

이것저것 며칠을 찾아보면서 찾은 각종 해결방법은 아래와 같다.

  1. PHP
    header("Access-Control-Allow-Origin: *");
  2. JSP
    <% response.addHeader("Access-Control-Allow-Origin", "*"); %>
  3. ajax
    dataType의 값을 jsonp로 변경한다.
    $.ajax(
     {
      type: "GET",
      contentType: 'text/xml',
      dataType: "jsonp",
      url: 'url address',
      //timeout: 4000,
      async: false,
      success: parseXml,
     });
  4. open source
    homepagegithub
  5. With jQuery and the Google AJAX Feed API
    $.ajax({
      url      : document.location.protocol + '//ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&callback=?&q=' + encodeURIComponent(FEED_URL),
      dataType : 'json',
      success  : function (data) {
        if (data.responseData.feed && data.responseData.feed.entries) {
          $.each(data.responseData.feed.entries, function (i, e) {
            console.log("------------------------");
            console.log("title      : " + e.title);
            console.log("author     : " + e.author);
            console.log("description: " + e.description);
          });
        }
      }
    });


Servlet 디렉토리 구조 생성 방법



1. Tomcat/webapps 디렉토리 밑에 새로운 애플리케이션(폴더)을 생성한다.

2. 새로운 애플리케이션 안에 WEB-INF, WEB-INF/classes, WEB-INF/lib 를 생성한다.

3. classes 안에는 컴파일한 class 파일을 넣는다.

4. lib 에는 각종 라이브러리 파일을 넣는다.

5. src 에는 작성한 코드파일을 넣는다.



 실행환경

 Desktop

 조립식

 CPU

 Intel(R) Core(TM) i7-2600K CPU @ 3.40GHz 3.40GHz

 Memory

 8.00 GB

 OS

 Windows 7 Professional K 64bit

 Java

 1.8.0_05

 MySQL

 Ver 14.14 Distrib 5.6.19, for Win64

 Web Server

 Apache Tomcat 7.0.51


문제점

서블릿에서 DB 연결시 NullPointerException 발생하고 연결 실패.(이 문제 하나로 몇일을 삽질하였다...)

해결방안

서블릿은 JDBC를 Properties에서 가져오지 않는다. 서블릿의 디렉토리 구조안에 라이브러리 파일을 넣어야 하는데, 위치는 'WEB-INF/lib'에 넣어주면 된다.

이클립스에서 생성한 프로젝트에서는 WebContent/WEB-INF/lib 에 넣어준다.





참고 링크

 실행환경

 Notebook

 SAMSUNG NT550p5c-s61r

 CPU

 Intel Core i5-3210M 2.50GHz

 Memory

 8 GB

 OS

 Window 7 ultimate 64bit

 Java

 1.7.0_51

 WebServer

 Apache Tomcat 7.0


문제점

톰캣의 루트 경로를 바꾸는 방법에 대해서 알아보자.


해결방안

1. 먼저 변경할 루트폴더를 만든 후 기본 루트폴더에 있던 파일들(설정)을 모두 복사해 넣는다.

  • 기본 루트 폴더 : C:\Tomcat 7.0\webapps
  • 변경할 루트 폴더 : D:\website


2. 톰캣의 server.xml 파일에서 바꾼 폴더명을 넣어준다.

  • 파일 위치 : C:\Tomcat 7.0\conf
after

before

3. 톰캣을 구동하고 http://localhost:8090을 통해 확인하도록 한다.

(기본 포트는 8080이지만 오라클과 중복되므로 8090으로 변경한 상태이다)


추가 자료



구글 애드센스 첫 수익


드디어 받게된 우편. 주소도 잘못 적고, 인증 안해서 광고도 한동안 막히고 이래 저래해서 블로그 시작한지 약 1년 반만에 첫 수익이다. 참으로 오래 기다리고 기다렸다.

딱히 파워블로그가 되겠다는 마음이 아니라 공부하다가 문제점, 팁, 주위 지인분들께서 궁금해하시던 것들 포스팅해왔다.

...


3월 13일

신한은행에서 수수로 9000원

15~20일 걸리고, 25불 수수료 

문제점


설치를 모두 마쳤는데 에러발생.
  • 500 에러.
  • command 창에서 php -info 했을 때, could not open input file: o

해결방안


php.ini 파일에서 'date.timezone'의 주석을 지우고 'Asia/Seoul'를 넣어준다.

그리고, IIS(인터넷 정보 서비스) 관리자에 들어가서 응용 프로그램 풀에 DefaultAppPool을 클릭하고 오른쪽에 재생을 클릭한다.


Tistory 파비콘 넣기

먼저 파비콘으로 사용할 아이콘파일이 있어야 합니다.


플러그인을 통해 넣기

1. 티스토리 관리창에서 '플러그인 - 플러그인 설정'에서 꾸미기탭에 '블로그 아이콘 표시'를 활성화 한다.


2. '환경설정 - 기본 정보'에서 아이콘을 넣어준다.


HTML을 통해 넣기

1. 아이콘을 업로드하고 주소를 복사한다.


2. skin.html에서 아래 사진에 블록된 곳에 넣어준다. 


문제점

티스토리 블로그안의 링크에 마우스를 올릴 때 생기는 밑줄을 지우는 방법.


해결방안


style.css 파일에서 a:hover 을 찾아서 text-decoration의 값을 none으로 바꾸어 준다.



문제점

블로그에 웹 폰트를 이용하여 나눔고딕 적용하기


해결방안

style.css파일에 원하는 폰트의 주소를 import로 삽입

구글 폰트 주소 확인하기


원하는 코드의 클래스에 font-family 추가


워드프레스 한번에 변경 방법

플러그인에서 wp google fonts를 추가하도록 한다. 반드시 설치하고 활성화 하도록 한다.(안하면 설정에 안보임)


설정 - Google Fonts 에서 아무거나 선택한 뒤에 아래처럼 선택하고 입력한다.

@import url("http://fonts.googleapis.com/earlyaccess/nanumgothic.css" ) ;
body, h1, h2, h3, h4, h5, h6, li, p { font-family:"Nanum Gothic" !important ; }


참고



인증 필요

서버 http://localhost:8080에 사용자 이름과 비밀번호를 입력해야 합니다. 서버 메시지:XDB


오라클 서버랑 포트가 겹치므로 톰캣의 포트를 수정한다. 이때 관리자 모드로 편집기을 실행한 뒤 수정하도록 한다.

파일은 톰캣이 설치된 경로의 conf폴더 안에 server.xml이다.

예) C:\Program Files\Apache Software Foundation\Tomcat 7.0\conf\server.xml




자꾸 잊어버리는 문제점

xml 코드를 입력했는데 줄바꿈이 안될때 코드안에 <, >를 바꿔준다,

< = &lt;

> = &gt;


변환해주어야 작성한대로 출력된다.

메인화면에서 로그인버튼을 image로 두었을 경우, image는 submit을 가지고 있다.

<input type="image" src="../login.png" onClick="login(e);">
// type="submit"과 같다.

이 경우 login() 함수에서 submit을 줄 경우 중복된 결과가 나온다. 

return false; 를 사용하거나 img태그로 사용하는 방법으로 아래와 같다.

<!--  <input type="image"> submit 막는 방법  -->

<input type="image" src="../login.png" onClick="login(e); return false;">
// return false; 를 넣는 방법.

<img src="../login.png" onClick="login(e);">
// 버튼을 이미지태그로 사용하는 방법.


※ CSS3 에서만 사용가능한 코드이다.

-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;

 CSS Border radius

둥근 테두리 만들어주는 사이트


'Web > HTML,CSS' 카테고리의 다른 글

[CSS] 텍스트 말줄임표  (0) 2015.03.11
[HTML] html RFC 한글 번역  (0) 2013.08.20
[HTML] 한글 번역문 HTML 4.01  (0) 2013.08.20
[CSS] Opacity 투명도 조절하기  (0) 2013.08.09

텍스트박스에 기본값 문자열이 나타나고 클릭시에 사라지는 스크립트코드

function checkValue(element) {
	if(element.value =="")
		alert("비밀번호를 입력하세요");
}

function clearText(txt) {
	if (txt.defaultValue==txt.value)
		txt.value = "";
}

사용방법

onFocus="clearText(form.id)" onBlur="checkValue(form.pw)"


설치방법은 홈페이지에 간단하게 나와있어 쉽게 따라할수 있다. 하지만 홈페이지는 모두 영어로 되어있다. 

영어에 자신없는 분들에게 도움이 되고자 설치와 적용방법에 대해서 포스팅 하겠다.(나도 겨우 적용하였다....)

 SyntaxHighlighter 설치방법(홈페이지)



 SyntaxHighlighter 설치 방법 


● 먼저 SyntaxHighlighter 홈페이지에서 최신버전을 다운받는다.


다운로드 링크


● 압축을 풀고나서 사용할 파일은 script폴더에 자신이 사용할 언어의 js파일과 

style폴더 shCore.css적용할 스타일 파일 'HTML/CSS 편집'에 '파일업로드'에 올려준다

 


● 위 사진과 같이 선택한 파일을 아래 사진과 같이 업로드 한다.

 



● 마지막으로 HTML 코드를 추가해주어야 하는데 아래 사진과 같이 head 안에 js파일과 css파일을 포함시켜주고, 

</body> 위에 자바스크립트 코드를 넣어준다.

 

body 추가.txt


head 추가.txt



 





 SyntaxHighlighter 사용 방법 


HTML모드에서 <pre class="brush:사용할 언어"> 내용 </pre> 처럼 작성하면 된다.

/*
 * SyntaxHighlighter
 * 이와 같이 작성할 수 있다.
 */
function foo()
{
    if (counter <= 10)
        return;
    // it works!
}

● 각 언어별 "bursh:" 다음으로 사용할 이름을 마지막으로 마치겠다.

사진참조


먼저 사용자의 웹 브라우저를 확인할 수 있는 코드이다.

 navigator.userAgent


위 코드를 이용해서 브라우저를 확인하고 각 브라우저 별로 처리할 수 있는 코드이다.

var Browser = {
	chk : navigator.userAgent.toLowerCase()
}
 
Browser = {
	ie : Browser.chk.indexOf('msie') != -1,
	ie6 : Browser.chk.indexOf('msie 6') != -1,
	ie7 : Browser.chk.indexOf('msie 7') != -1,
	ie8 : Browser.chk.indexOf('msie 8') != -1,
	ie9 : Browser.chk.indexOf('msie 9') != -1,
	ie10 : Browser.chk.indexOf('msie 10') != -1,
	opera : !!window.opera,
	safari : Browser.chk.indexOf('safari') != -1,
	safari3 : Browser.chk.indexOf('applewebkir/5') != -1,
	mac : Browser.chk.indexOf('mac') != -1,
	chrome : Browser.chk.indexOf('chrome') != -1,
	firefox : Browser.chk.indexOf('firefox') != -1
}
 
if ((Browser.ie9) || (Browser.ie10)) {
	// 브라우저가 IE9, 10일 때 실행할 코드
} else if(Browser.chrome) {
	// chrome
} else if(Browser.firefox) {
	// fierfox
} else {
	// 그 외 실행할 코드
}


 읽기 좋은 자바스크립트 코딩 기법에선 브라우저 탐지를 매우 안좋은 습관이고 반드시 피해야 한다고 한다.

 "기능 추론과 브라우저 탐지는 매우 안 좋은 습관이고 반드시 피해야 합니다. 어떤 상황이든 기능 탐지를 사용하는 것이 가장 좋습니다. … 브라우저 추론은 유지보수에 좋지도 않고 브라우저가 새로 배포될 때마다 업데이트해야 하므로 코드에서 벗어날 수 없게 될지도 모릅니다."


리터럴(literal)이란?

프로그램에 직접 나타나는 데이터 값.


23		// 숫자 23
2.3		// 실수형 2.3
"hello world"	// 문자열
'opid'		// 문자열
true		// boolean 값
false		// boolean 값
/javascript/gi	// 정규표현식 리터럴
null		// 존재하지 않는 값



읽기 좋은 자바스크립트 코딩 기법에서는 기본 리터럴에 대해서 다음과 같이 권장한다.

"문자열은 반드시 작은따옴표가 아닌 큰따옴표를 사용하고 한 줄로 작성합니다. … "


" null 값은 반드시 다음 상황에서만 사용합니다.

  • 객체 값을 나중에 할당할 변수를 초기화할 때
  • 초기화된 변수에 객체 값이 할당되었는지 비교할 때
  • 객체를 인자로 넘겨야 하는 함수를 호출할 때
  • 함수에서 객체를 반환해야 할 때


아래와 같은 함수를 정의한다.

function checkLen(pwd) {
	len = pwd.value.length
	if(len < 4 || len > 8) {
		alert("비밀번호는 4자 이상 8자 이하로 입력하세요.")
		return false;
	}
	else
		return ture;
}


사용방법은 아래와 같다.

onclick="chexkLen(form1.pwd)"


<script language="JavaScript">
var now = new Date();
var then = new Date("august 5,2012");
var gap = now.getTime() - then.getTime();
gap = Math.floor(gap / (1000 * 60 * 60 * 24));
document.write(gap);
</script>


위 코드를 이용해 티스토리 사이드바에 모듈로 추가해 사용할 수도 있다.

alert(); // 경고창등 메세지를 나타낼수 있는 대화 상자

<script language="javascript">
alert("내용");
</script>


confirm(); // 사용자의 확인을 받기 위한 대화 상자

<script language="javascript">
var confirmVal = confirm("내용");
document.write(confirmVal);
</script>


prompt(); // 사용자로부터 내용을 입력받을 수 있는 대화상자

<script language="javascript">
var promptVal = prompt("내용");
document.write(promptVal);
</script>



미리 정의되어 있는 isNaN()를 이용한다.


사진 참조


function isOnlyNum(txt) {
	uPhone = txt.value;
	if(isNaN(uPhone)) {
		alert("'전화번호'" 필드에는 숫자만 입력해 주세요");
		txt.value = "";
		txt.focus();
	}
	else alert("등록되었습니다.");
}


적용 방법은 아래와 같이 적용한다.


onclick="isOnlyNum(myform.phone)"


아래 코드는 doFunction() 메서드를 이벤트핸들러에 추가하는 코드이다.

// 변수.addEventListener("click", 메서드, false); 
var evt = document.getElementById("event_btn");
evt.addEventListener("click", doFunction, false);


문제점 : IE8 이하 버전에서는 addEventListener()를 지원하지 않는다.

해결방안 : 

function addListener(target, type, handler) {
	if (target.addEventListener) {
		target.addEventListener(type, handler, false);
	} else if (target.attachEvent) {
		target.attachEvent("on" + type, handler);    
	} else {
		target["on" + type] = handler;
	}
}

DOM 레벨 0에 따르는 브라우저에서도 on 프로퍼티를 이용해 이벤트 헨들러를 추가할 수 있다.

+ Recent posts