Visual Studio에서 파일 인코딩 형식 UTF-8을 지정해서 저장 방법

Visual Studio에서 파일 인코딩 형식 UTF-8을 지정해서 저장 방법

1. 파일 > 다른이름으로 *** 저장(A)

2. 팝업 아래 [저장]버튼 옆 드롭다운클릭하여 "인코딩하여 저장(V)" 선택

3. 유니코드(서명있는  UTF-8) - 코드페이지 65001  선택 후 저장

CSS 반응형 웹(Responsive Web) 설명

http://www.nextree.co.kr/p8622/

플렉서블 박스 설명

http://www.nextree.co.kr/p8622/

input button을 스타일시트 적용

<style>
.button {
border:1x solid #ff0080;    /*---테두리 정의---*/
background-Color:#ffe6f2;   /*--백그라운드 정의---*/
font:12px 굴림;      /*--폰트 정의---*/
font-weight:bold;   /*--폰트 굵기---*/
color:#ff0080;    /*--폰트 색깔---*/
width:130;height:30;  /*--버튼 크기---*/
}
</style>

<input type="button" value="확인" class="button">

JSON parser사용 (JSON Text를 JSON Object로 변환)

JSON parser(JSON Text를 JSON Object로 변환)
- JSON.org 제공하는 JSON parser사용
- JSON parser는 JSON text만 받아들이고 다른 스크립트는 거부

예)
var obj = JSON.parse(returnValue.responseText);
// -> { id:"kim", sex:"male" }

- 키와 값을 모두 쌍따옴표(")로 묶어주는 문법을 정확하게 지켜주어야 한다.
{ "id":"kim", "sex":"male" }

- JSON.parse() 사용하기 위해서는 json2.js가 필요
- json2.js는   JSON의 편리한 사용을 위해 만든 JSON API의 새버전
- API에는 2개의 메서드가 들어있는데 JSON.stringify()와 JSON.parse().
- JSON.stringify()는 JSON.parse()와는 완전히 반대로 JSON 객체를 주면 JSON 텍스트로 변환.

Grunt 설명 및 사용(grunt-uisemin, jsmin)

1. Grunt 란
- Grunt is a task-based command line build tool for JavaScript projects.
- 자바스크립트 용 빌드 툴
- Node설치 필요

1. Grunt 설치
- Command Line Interface(CLI)를 설치 (옵션 -g  global설치)
$ npm install -g grunt-cli
- 프로젝트 폴더의 root경로에서 grunt를 설치 (옵션  --save-dev  package.json 파일과 연동)
$ npm install grunt --save-dev
- package.json 파일 생성
$ npm init
- Gruntfile.js 파일 생성
- package.json과 같은 위치(프로젝트 폴더의 root경로)에 Gruntfile.js 생성. (Grunt가 실행될 때, 이 파일을 보고 어떠한 동작을 할지 결정하는데 쓰인다.)


2. grunt-uisemin란
- js, css 파일 팩키징
- usemin에서 concat, uglify, cssmin, requirejs 플러그인 실치필요
- 설치
$ npm install grunt-usemin --save-dev

2. grunt-uisemin설정
-Gruntfile.js  파일 편집

- html 파일 편집
  <!-- build:css ../../../FrontEnd/home.zeus/all_css.min.css -->
    <link type="text/css" rel="stylesheet" href="/css/jquery-ui-1.12.1.min.css" />
    <link type="text/css" rel="stylesheet" href="/css/a.css" />
  <!-- endbuild -->
  <!-- build:js ../../../FrontEnd/home.zeus/all_script.min.js -->
    <script type="text/javascript" src="/common/js/jquery-3.1.1.min.js"></script>
    <script type="text/javascript" src="/common/js/jquery.signalR-2.2.2.min.js"></script>
    <script type="text/javascript" src="/common/js/socket.io-1.7.3.min.js"></script>
  <!-- endbuild -->

- cmd에서 루트 경로로 이동후 아래 명령어 실행
grunt useminPrepare concat uglify cssmin


3. jsmin란
- javascript를 min파일 형식으로 압축
- http://crockford.com/javascript/jsmin.html 이동하여 "zip file containing an MS-DOS.exe file" 링크로 다운로드

3. jsmin 사용
jsmin < ./common/js/home.default.js > ./common/js/home.default.min.js
jsmin < ./common/js/home.function.js > ./common/js/home.function.min.js

자연스럽고 일관성 있게 자바스크립트 코딩하는 원칙

https://github.com/rwaldron/idiomatic.js/tree/master/translations/ko_KR

marquee tag(글자흐르기) & 줄간격,글씨간격 조절하기

* 위로 흘러가는 글
1) <marquee direction="up" scrollamount="1" height="150" style="line-height:130%;"><font color=red size=3 face=굴림>적고싶은 글</font></marquee>

2) <marquee direction="up" scrollamount="2" height="150" style="color:red; font-size:14pt; font-weight:bold; font-family:바탕; line-height:200%;">적고싶은 글</marquee>

* 아래로 흘러가는 글
1) <marquee direction="down">적고싶은 글</marquee>

2) <marquee direction="down" style="line-height:200%;" scrollamount="1"><font color="olive">적고싶은 글</marquee></font>

* 옆으로 흘러가는 글
<marquee behavior="scrooll" width="800">적고싶은 글</marquee>


<!-- 마퀴 태그를 사용한 문자표현 입니다. div style= 에서 문자의 top,좌우 위치를 정의 합니다. -->
<div style="width: 470; position: absolute; z-index: 1; left: -40; top: 60">
<marquee style="color: #FF9900; font-size: 40; font-family: arial; font-weight: 800" width=470>Welcome to MORAEDLE ~유기농법으로 생산하는 모래들 農場~</marquee>
</div>

* 옆으로 왔다가다 흐르기
<marquee behavior="ALTERNATE" width="200">적고싶은 글</marquee>

* 통통 튀는 글자
<marquee behavior=alternate direction=up height=50><marquee><font color=red size=3 face=굴림><b>통통 튀는 글씨</b></marquee></marquee>

* 글씨가 슬라이드로 올라와서 멈추는 태그
<marquee style="text-align:left;" direction=up scrolldelay=100 scrollamount=1 behavior=slide width=330 height=450><font size=2 color=red>글쓰기</marquee>

* 올라가는 글의 위치를 지정하는 태그
<div id="layer1" style="position:absolute; left:180px; top:420px; width:350px; height:549px; z-index:1;"><MARQUEE DIRECTION=UP SCROLLAMOUNT=1 height=300>글쓰기!!!</marquee></div>

* 글씨가 아래위로 움직이다 올라감
<marquee style="text-align:left;" direction=up behavior=alternate scrollamount=1 height=400> <marquee direction="up" scrollamount="1"><span style="text-align:left;margin-left:10;color:white;filter:shadow(color=ff00ff);height:15px"><font size=3 face=엽서체> 글 쓰기 !!! </marquee></marquee>

*글자가 올라가다 멈추다 올라가는 태그
<marquee style="text-align:left;" direction=up behavior=alternate scrollamount=1 height=400><style="filter:alpha(opacity=100, style=2, finishopacity=0)" WIDTH="300" height=280><br><marquee style="text-align:left;" direction="up" scrollamount="1"><span style=color:#F9FFFF;filter:shadow(color=#9400D3);height:15px><pre> <font size=3 face=굴림체>글쓰기!!!</marquee></marquee>

*마우스를 대면 글이 멈추고 떼면 다시 올라가는 태그
<MARQUEE onmouseover=stop(); onmouseout=start(); scrollAmount=1 direction=up height=280>글쓰기!!!</marquee>

================================
글 정렬 / 줄간격,글씨간격 조절하기
================================

1. 왼 줄 맞워서 왼쪽에서 몇 번째(왼쪽 여백 100)
<P align=left style="margin-left:100;">글</p>

2. 무조건 중앙에(왼쪽여백 150 / 오른쪽 여백 150)
<P align="center" style="margin-right:150; margin-left:150;">글</p>

3. 오른쪽 끝에 맞워서(오른쪽 여백 100)
<P align="right" style="margin-right:100;">글</p>

* 줄간격= 100%~인 경우 (예제는 250%)
<p style="line-height:250%;"><font size="4">태그 사용중 글자 크기를 정할때
4포인트 정도로 했는데..
윗줄과 아랫줄 글자가 겹치거나..
짤립니다^^;
어떻게 해야 하는지 가르쳐 주세요~~~~</font></p>

=====================

줄간격,글씨간격 조절하기

먼저 줄입니다.

<font style="font-size:9pt; line-height:10pt; font-family:굴림;">

위의 글에서 line-height:10pt; 있죠?
저 숫자를 조정해 보세요. 그러면 늘어나기도, 줄어들기도 합니다. l
ine-height:130% 이런것도 가능한건 아시죠..
숫자가 작을수록 좁아지겠지요.

그 다음 글씨 간격.

<font style="font-size:9pt; letter-spacing:-1; font-family:굴림;">
letter-spacing:-1; 이란 부분이 있는데요
저것을 1로 하면 글씨 간격이 1씩 차이나고
-1로 하면 글씨 간격이 1씩 좁아집니다.


원본 :http://zone04.n4.cc/zb41pl3/view.php?id=infor_tema&page=5&sn1=&divpage=1&sn=off&ss=on&sc=on&select_arrange=hit&desc=asc&no=99

자바스크립트(Javascript) 소수점 자리수, 올림, 버림, 반올림, 원단위 절삭

1. 소수점 올림, 버림, 반올림

Math.ceil() : 소수점 올림, 정수형 반환
Math.floor() : 소수점 버림, 정수형 반환
Math.round() : 소수점 반올림, 정수형 반환

var n = 123.456;
alert(Math.ceil(n)); // 124
alert(Math.round(n)); // 123

n = 123.567;
alert(Math.ceil(n)); // 124
alert(Math.floor(n)); // 123
alert(Math.round(n)); // 124


2. 소수점 자리수 표기

toFixed() : 숫자를 문자열로 변환하면서 지정된 소수점 이하 숫자를 반올림하여 출력한다.
toExponential() : 숫자를 문자열로 변환하면서 소수점 앞의 숫자 하나와 지정된 개수의 소수점 이후 숫자로 구성되는 지수표기법을 사용하여 출력한다.
toPrecision() : 지정된 수의 유효 숫자 개수만큼 숫자로 출력한다. 만약 유효 숫자 갯수가 숫자의 정수부분 전체를 출력할 만큼 충분하지 않으면 지수 표기법으로 출력된다.
위 세 가지 Method는 모두 반올림하여 출력된다.

var n = 123.456;
alert(n.toFixed(0)); // 123
alert(n.toFixed(2)); // 123.46

alert(n.toExponential(1)); // 1.2e+2
alert(n.toExponential(3)); // 1.235e+2

alert(n.toPrecision(2)); // 1.2e+2
alert(n.toPrecision(4)); // 123.5
alert(n.toPrecision(7)); // 123.4560


3. 원단위 절사

원단위의 경우 10, 십원단위의 경우 100, 백원단위의 경우 1000, ... 을 이용하면 원단위 절사가 가능하다.

var n = 2117;
n = Math.floor(n/10) * 10; // 10으로 나누면 211.7, floor 함수로 소수점을 버리면 211, 다시 10을 곱하면 2110
alert(n); // 2110

인풋박스(input) 기본입력 설정 ime-mode

inactive	default 로 영문모드
active	default 로 한글모드
auto	한/영 중 선택된 모드
disable	영문만을 사용할 수 있는 모드

사용법 : 

<input type="text" style="ime-mode:inactive;" />

or

<style type="text/css">
input.han {ime-mode:active;}
</style>
<input type="text" class="han" />

익스플로러에서만 적용됨.

IE에서 event.preventDefault()가 제대로 동작하지 않을때

in IE, you can use
event.returnValue = false;
to achieve the same result.

And in order not to get an error, you can test for the existence of preventDefault:
if(event.preventDefault) event.preventDefault();

You can combine the two with:
event.preventDefault ? event.preventDefault() : (event.returnValue = false);

이 글은 Stoyan Stefanov 의 글 3 ways to define a JavaScript class 을 번역한 것입니다.
(http://www.phpied.com/3-ways-to-define-a-javascript-class/) 

자바스크립트 클래스를 정의하는 3가지 방법 

 

소개

자바스크립트는 문법측면에서 아주 유연한 객체지향 언어이다. 이 글에서 객체를 정의하고 생성하는 3가지 방법을 찾을 수 있다. 이미 자주쓰는 방법이 있다 하더라도 다른사람들이 작성한 다른 방법들을 이해하는데 도움이 될것이다.
먼저 자바스크립트에는 클래스라는 개념이 없다는것을 알고 있어야한다. 함수는 클래스를 흉내내기 위하여 사용될 수 있지만 일반적으로 자바스크립트는 클래스가 없는 언어이다.
자바스크립트에서 모든것은 객체이다. 그리고 상속은 객체가 객체로 부터 상속을 받지, 다른 클래스가 있는 언어들처럼 클래스가 클래스로부터 상속받지 않는다.

1. 함수 이용하기

가장 많은 쓰는 방법중 하나다. 평범한 자바스크립트 함수를 만든 다음 new 키워드로 객체를 생성하면 된다. 함수를 이용하여 생성한 객체의 속성값과 메소드를 정의하기 위해서는 아래 예제와 같이 this 키워드를 사용하면 된다. 

function Apple (type) {
    this.type = type;
    this.color = "red";
    this.getInfo = getAppleInfo;
}
 
// 안좋은 방법! 아래 계속 읽어보세요.
function getAppleInfo() {
    return this.color + ' ' + this.type + ' apple';
}

Apple 생성자함수를 사용하여 객체를 생성하기 위해서는 다음과 같이 속성에 값을 입력하고 메소드를 호출하면 된다.

var apple = new Apple('macintosh');
apple.color = "reddish";
alert(apple.getInfo());

1.1. 내부에 메소드 정의하기

위 예제를 보면 Apple 클래스의 getInfo() 메소드가 별개의 함수인 getAppleInfo() 에 정의되어 있다. 이렇게 해도 되긴 하지만 한가지 단점이 있다 - 이렇게 정의된 많은  함수들은 전역 네임스페이스에 정의되고 만다. 이렇게 되면 사용하는 다른 라이브러리나 동일한 함수이름을 사용해야된다면 함수이름이 충돌될 수 있게 된다.  무분별한 전역 네임스페이스의 사용을 막기 위해, 아래 같이 메소드를 생성자함수안에 정의할 수 있다.

function Apple (type) {
    this.type = type;
    this.color = "red";
    this.getInfo = function() {
        return this.color + ' ' + this.type + ' apple';
    };
}

이렇게 바꾸어도 위에서 같이 객체를 생성하고 속성값과 메소드를 사용하면 된다.

1.2. prototype에 메소드 추가하기

1.1의 단점은 새로운 객체를 생성할때마다 getInfo() 메소드가 매번 재생성된다는것이다. 가끔 그것을 원할수는 있지만, 거의 드물다. 더 좋은방법은 생성자 함수의 프로토타입에 getInfo() 를 추가하는것이다.

function Apple (type) {
    this.type = type;
    this.color = "red";
}
 
Apple.prototype.getInfo = function() {
    return this.color + ' ' + this.type + ' apple';
};

다시 1. 과 1.1. 과 같은 방법으로 새 객체를 사용하면 된다.

2. 객체 리터럴(literal) 사용하기

리터럴(literal) 은 자바스크립트에서 객체와 배열을 정의하는 간단한 방법이다. 빈 객체를 생성하려면 아래 같이 할 수 있다.

var o = {};

아래과 같은 보통의 방법 대신 위와 같이 하면 된다.

var o = new Object();

배열은 다음같이 할 수 있다.

var a = [];

아래같이 하는 대신 위와 같이 하면 된다.

var a = new Array();

보통의 클래스를 생성하기 위한 작업들을 하지 않고 바로 객체를 생성할 수 있다.
이번에는 앞의 예제들과 동일한 기능을 하지만 객체 리터럴을 이용해보면:

var apple = {
    type: "macintosh",
    color: "red",
    getInfo: function () {
        return this.color + ' ' + this.type + ' apple';
    }
};

이 경우, 클래스의 인스턴스를 생성할 필요가 없다, 이미 생성되어 있다. 그러므로 생성된 인스턴스를 바로 사용하면 된다.

apple.color = "reddish";
alert(apple.getInfo());

이런 객체를 싱글튼(singleton) 이라고 부르기도 한다. 자바와 같이 클래스가 있는 언어에서 싱글튼(singleton)같이 싱글튼은 언제나 하나의 클래스 인스턴스만을 가질 수 있다, 동일한 클래스의 객체를 더 생성할 수 없다. 자바스크립트는 모든 객체가 처음부터 싱글튼이기때문에 자바스크립트(클래스가 존재하지 않는다. 기억들 나시죠?)에서 이 개념은 더 이상 의미가 없다.

3. 함수를 이용한 싱글튼

또 싱글튼 얘기? ^^
세번째 방법은 위에 다른 두가지 방법의 조합이다. 우선 싱글튼을 정의하기 위하여 함수를 사용한다. 문법은 아래와 같다.

var apple = new function() {
    this.type = "macintosh";
    this.color = "red";
    this.getInfo = function () {
        return this.color + ' ' + this.type + ' apple';
    };
};

위의 1.1. 과 아주 비슷하지만, 객체를 사용하는 방법은 2. 와 똑같다.

apple.color = "reddish";
alert(apple.getInfo());

new function(){...} 구문은 2가지를 동시에 한다: 함수(익명 생성자 함수)를 정의하고 new 로 작동(invoke)시킨다. 이렇게 써본적이 없으면 다소 복잡해 보일수 있고, 그렇게 많이 쓰이지도 않는다, 그래도 한번만 사용하거나 이름짓기 어려운 생성자함수가 꼭 필요할때 사용할수 있는 방법이다.

요약

자바스크립트에서 객체를 생성하는 3가지(한가지 더) 방법을 정리해보았다. (이 글의 제목에도 불구하고) 자바스크립트에는 클래스같은것은 없다는것을 기억하기 바란다. 새로운 지식을 이용해 코딩을 시작하길 기대하고 있나요? 즐겁게 자바스크립트 코딩하세요.

출처 :http://steadypost.net/post/lecture/id/13/