Study!: 8월 2013

2013년 8월 26일 월요일

Jqeury Aajax 사용시 데이터 깜빡임

예를들어 리스트를 출력 할 때, 계속 해서 리스트를 새로부르거나 하면 0.1초가량 아주 잠깐 바로 전 리스트값이 보였다가 새로운 리스트가 보이는데,

$(document).ready( function () { 를

$(window).load( function () {

이렇게 바꿔주면된다.

document.ready 화면 출력과 상관없이, dom 정보만 받아왔으면 바로 시작된다.

window.onload 는 모든 화면이 로드 된 뒤에 작동한다.

2013년 8월 25일 일요일

HTML 강제 줄바꿈

overflow 시 줄바꿈

<element style="word-break:break-all">

Canvas 이미지 저장(다운로드하는법)

canvas 다운로드 방법

var data = canvas.toDataURL();

아래의 a 테그의 href 를 data 로 바꿔주면된다. 크롬만 가능(크롬프레임도 됨)

참고

http://html5-demos.appspot.com/static/filesystem/generatingResourceURIs.html

<article>
  <button type="button">create url, put it in below link, and click it</button><br/>
  <a download="test.txt">Download as text.txt</a>
</article>
<footer>
<ul>
  <li><a href="https://developer.mozilla.org/en/Document_Object_Model_(DOM)/window.URL.createObjectURL">window.URL.createObjectURL</a></li>
  <li><a href="http://updates.html5rocks.com/2011/08/Downloading-resources-in-HTML5-a-download">a[download]</a></li>
  <br/>
  <br/>
  <br/>
  <br/>
  <li><a href="it works!" download="nate.txt">download me</a></li>
</ul>
</footer>

var URL = window.webkitURL || window.URL;
var BlobBuilder = window.WebKitBlobBuilder || window.MozBlobBuilder || window.BlobBuilder;

var url;

$("button").click(function() {
  if (url) URL.revokeObjectURL(url);
  var bb = new BlobBuilder();
  bb.append("it workwfwefwefwefwefwefwefwefwefs!");
  var file = bb.getBlob("text/plain");
  url = URL.createObjectURL(file);
  $("a[download]").attr("href", url);

  var evt = document.createEvent('MouseEvents');
  evt.initMouseEvent('click', true, true, window, 1, 0, 0, 0, 0, false, false, false, false, 0, null);
  $("a[download]")[0].dispatchEvent(evt);
});

자바스크립트 대문자 소문자 변환

toLowerCase(); 소문자로 바꿔주는 함수

toUpperCase() ; 대문자로 바꿔주는 함수

자바스크립트 대문자를 소문자로 소문자를 대문자로 바꾸는 함수


var abcd = "AbCd";

abcd = abcd.toLowerCase();
console.log(abcd) // abcd = "abcd"

abcd = abcd.toUpperCase();
console.log(abcd) // abcd = "ABCD"

비쥬얼 스튜디오 인코딩 문제

1. Visual Studio 설치된 위치(보통 C:\Program Files (x86)\Microsoft Visual Studio 10.0\VC\vcprojectitems)에 간다.

2. hfile.h, newc++file.cpp 과 같은 템플릿 파일의 인코딩을 UTF-8로 변경한다

3. 그 뒤로는 항상 UTF-8 파일이 생성된다.

node.js for II7

blueimp jquery upload component server 을 win IIS7 에서 구동.

준비물 및 환경

OS : win7

iisnode : iisnode-full-iis7-v0.1.18-x86.msi

다운로드사이트 : https://github.com/tjanczuk/iisnode/

nodejs : node-v0.6.18.msi

다운로드사이트 : http://www.nodejs.org/

iis 에 iisnode 폴더를 사이트로 등록.
web.config 파일을 만들어준다.
helloworld 파일내에 webconfig 안의 add name 부분을 자신의 서버 파일명으로 바꿔준다 ex) hello.js 를 server.js파일로 바꿔준다.
node.js 소스 파일을 helloworld 폴더에 넣는다.
node.js 파일에서 쓰는 포트와 아이피는 IIS 에서 쓰는 포트와 아이피를 사용해야 하므로, 직접입력하지 않고 process.env.PORT / process.env.IP 이렇게 바꿔준다.
iis 왼쪽 사이트 목록에서 iisnode 사이트를 선택 후 홈 화면의 '기본문서' 에 서버 파일을 등록한다.

해당 사이트로 접속 해보고 404 에러 (500 에러아님) 가 뜨면 정상적으로 서버가 실행된 것.

iis 에 등록하지 않고 node 파일의 실행법

CMD 에서 파일경로/node 파일명 ex) c:/node abc.js

</system.webServer>

</configuration>

node.js IDE Cloud9

https://c9.io/

웹상에서 코딩이 가능한 IDE. 익스플로러는 지원하지 않으며, node.js, PHP, html5, Wordpress, Python/Django , Ruby on Rails, C/C++ 추가로 커스텀을 선택하여 디버깅을 할 수있습니다.

c9 는 node.js 에서 하기 힘들었던 디버깅을 visual studio 처럼 중단점을 찍고, 디버깅모드로 한단계식 실행도 가능합니다. 브라우저 상에서 실행되지만, 다양한 단축키들이 모두 동작됩니다. F5 라던지 ctrl + S 저장 이라던지.. 저장을 하면 바로 웹서버에 저장이 됩니다.

디버깅 중인 화면

node.js 이미지 편집모듈

imagemagick 이라는 모듈이 있다.
설치는 npm install imagemagick

리사이즈 옵션

                    imageMagick.resize({
                         width: opts.width,
                         height: opts.height,
                         srcPath: options.uploadDir + '/' + fileInfo.name,
                         dstPath: options.uploadDir + '/' + "thumb_"+origin_img_name
                    }, finish);

resize 옵션 사용법.

* eps 파일이 input 되면 jpg 로 출력된다

node.js 우분투에 설치

sudo apt-get install g++ curl libssl-dev apache2-utils

sudo apt-get install git-core

git clone git://github.com/ry/node.git

wget http://nodejs.org/dist/v0.8.4/node-v0.8.4.tar.gz

gunzip node-v0.8.4.tar.gz

tar -xf node-v0.8.4.tar

cd node

./configure

make

sudo make install

Node.js 의 설치의 설치 경로는 /usr/local/bin/ 이다.
모듈의 경로는 /ib/node_modules/ 에 위치한다.

Study!