728x90
반응형
728x90
반응형

자바스크립트에서 Contextpath 가져오는 함수에 대해 알아보려고 합니다.

먼저 ContextPath란 http://127.0.0.1:80/animal/login.jsp라는 url에서 

animal이 ContextPath를 의미합니다.

 

아래 함수를 사용하시면 ContextPath를 값을 가져오실 수 있습니다.

function getContextPath() {
    var hostIndex = location.href.indexOf( location.host ) + location.host.length;
    return location.href.substring( hostIndex, location.href.indexOf('/', hostIndex + 1) );
}

728x90
반응형
728x90
반응형

사용자가 input text에 값을 입력할 때 숫자가 한자리인 경우 0을 자동으로 넣어주는 함수를 공유하고자 합니다.

해당 함수를 사용하는 예로는 월을 입력할 때 1~9월인 경우 숫자 앞에 0을 붙일 수 있고(01월, 02월.. 등), 시간이나 분을 입력할 경우(01시, 02시... 등)에도 함수를 사용할 수 있습니다. 

예제를 통해 바로 알아보겠습니다.

zeroFill함수에서 this는 값을 위함이고, 2는 자릿수 입니다.

예를 들어 01, 02의 값이 아닌 001, 002을 채우고자 한다면 3으로 변경해서 사용해주시면 될 것 같습니다.

 

<input type="text" id="test" maxlength="2" onblur="zeroFill(this, 2);" />

 

<script>

//숫자가 한자리인 경우 0 붙이기
function zeroFill(target, width) {
  var n = target.value;
  var id = target.id;
  n = n + "";
  if(n.length >= width){
   document.getElementById(id).value = n;
  }else{
   document.getElementById(id).value = new Array(width - n.length + 1).join('0') + n;
  }
}

</script>

 


테스트 한번 해보세요.

1) 숫자 2자리

2) 숫자 3자리

728x90
반응형
728x90
반응형

라디오 버튼을 눌러야 체크 되지만 버튼 옆 글자를 선택한다면 클릭 범위가 넓어져 사용자들이 사용하기에 편리하겠죠.

라디오 버튼 옆 글자를 클릭해도 라디오 버튼이 선택되는 방법에 대해 알아보겠습니다.



라벨 사용하기 전


바나나
사과
오렌지


바나나
사과
오렌지

라벨 사용 후 










<label> 태그로 감싸주면 text를 클릭해도 라디오 버튼이 선택될 수 있습니다.

추가로 style 속성으로 커서모양을 바꿔주어 더 보기 좋게 수정하였습니다.

728x90
반응형
728x90
반응형
        



input 태그에서 disabled와 readonly 속성은 모두 입력을 못하게 하는 기능으로 같습니다.


하지만 from 태그에서 sumbit시에 차이점이 있습니다.


readonly의 경우 form 데이터로 전송이 가능하지만


disabled의 경우 from 데이터로 전송이 불가능합니다.


상황에 따라 사용하면 될 것 같습니다!

728x90
반응형
728x90
반응형

값을 입력해서 두 날짜의 차이를 구하는 소스입니다.

조건은 제가 추가한 것이니 계산하는 식만 참고하시면 될 것 같습니다.



728x90
반응형
728x90
반응형

표준 내장 객체의 확장

표준 내장 객체(Standard Buit-in Object)는 자바스크립트가 기본적으로 가지고 있는 객체들을 의미합니다. 내장 객체가 중요한 이유는 프로그래밍을 하는 데 기본적으로 필요한 도구이기 때문입니다. 자바스크립트가 갖는 내장 객체입니다.

Object, Function, Array, String, Boolean, Number, Math, Date, RegExp

자바스크립트가 동작하는 호스트환경이 제공하는 API는 많이 있습니다. 사용자가 직접 정의한 객체는 표준 내장 객체와 대비되는 개념입니다.



var arr = new Array('seoul','new york','ladarkh','pusan', 'Tsukuba');

function getRandomValueFromArray(arr){

    var index = Math.floor(arr.length*Math.random()); //floor는 정수로 변환

    return arr[index]; //랜덤한 인덱스의 값을 리턴합니다.

}

console.log(getRandomValueFromArray(arr));

배열이 갖는 특정한 값을 랜덤하게 획득하는 기능을 모든 객체가 가질 수 있도록 코드를 변경해보겠습니다.

Array.prototype.rand = function(){

    var index = Math.floor(this.length*Math.random()); //배열 객체가 갖는 랜덤 메소드 안에서

    return this[index];                                       //this는 배열을 가리킵니다.

}

var arr = new Array('seoul','new york','ladarkh','pusan', 'Tsukuba');

console.log(arr.rand());

배열에 내장된 메소드인 것처럼 기능을 사용할 수 있습니다.

rand라는 메소드가 배열에 소속되어 있는 것이 분명해집니다. 훨씬 더 코드의 가독성이 높아집니다. rand의 메소드는 인자를 받지 않기 때문에 사용자가 신경 쓸 부분이 덜어집니다.

 

Object

Object는 데이터를 저장하는 그릇, 컨테이너라고 합니다.

Object가 갖는 역할은 객체를 prototype을 이용해 상속할 수 있습니다.

Object의 속성은 모든 객체의 property가 됩니다. 즉 모든 객체들의 부모입니다.

Object API 사용법에 대해 알아보겠습니다.

어떤 형태의 메소드가 있고 사용법에 대해 아는 것이 중요합니다.

Object.keys() // 키 값들을 리턴해주는 메소드

Object.prototype.toString() //

Keys()메소드는 배열 안의 인덱스, 키 값을 리스트로 리턴하는 메소드입니다.

toString() 객체가 담고 있는 값이 무엇인지 보기 좋게 출력해주는 메소드입니다.

new Object(); 객체를 생성하고 생성한 객체의 메소드 형태로 사용하는 것, Array Object를 자식이기에 toString() 메소드를 사용할 수 있습니다.

자바스크립트의 공동적인 최초의 조상이기 때문에 prototype이 있는 메소드는 모든 객체들이 상속받고 있는 공통의 기능입니다. 자바스크립트 애플리케이션 내 모든 객체들이 공통적으로 가져야 하는 기능이 있다면 기능은 object prototype객체 수정을 통해 이러한 기능을 만들 수 있습니다.

 

Object 객체를 확장해 모든 기능을 사용하는 방법에 대해 알아보겠습니다.

기능의 원리보다 어떻게 사용되고 어떤 취지에 기능인가에 살펴보고 기능을 구현하는 것이 좋습니다

 
Object.prototype.contain = function(neddle) { //건초 속 바늘 찾기의 의미를 가진 인자
    for(var name in this){
        if(this[name] === neddle){
            return true;
        }
    }
    return false;
}
var o = {'name':'egoing', 'city':'seoul'}
console.log(o.contain('egoing')); //true
var a = ['egoing','leezche','grapittie'];
console.log(a.contain('egoing')); //false
 

Object 확장의 위험에 대해 알아보겠습니다.

확장을 하는 이유는 모든 객체에 영향을 줄 수 있기 때문입니다. 신중해야 하는 이유는 모든 객체에 영향을 주기 때문입니다.

Console.log(o[name]); 시 함수의 값까지 나오게 됩니다.

o object이기 때문에 contain 메소드가 포함됩니다

for(var name in o){                                           for(var name in a){

    console.log(name);  //name, city, contain            console.log(name);  //0, 1, 2 , contain

}                                                                  }

Object의 어떠한 property나 메소드를 추가하는 것은 신중해야 합니다. 공통의 로직에 최소 단위에 적용해야 합니다. Object와 같이 모든 객체에 기능을 넣으면 모든 객체가 영향을 받기 때문에 편리하지만 위험해집니다.

for(var name in o){

    if(o.hasOwnProperty(name)){ //name에 대한 프로퍼티를 갖고 있다면

        console.log(name); 

    }

}

hasOwnProperty는 인자로 전달된 속성의 이름이 객체의 속성인지 여부를 판단합니다. prototype으로 상속 받은 객체라면 false가 됩니다.


출처 : 생활코딩 강의

728x90
반응형
728x90
반응형

객체지향프로그래밍(OOP : Object Oriented Programming)

핵심 키워드는 객체입니다. 상태와 행위로 구분해 연관된 것들을 그루핑한 것을 객체입니다. 객체는 레고 블록처럼 하나의 완제품 소프트웨어를 만듭니다.

 

사이트 규모가 커지고 인원이 많아지고 오랜 시간 프로젝트가 진행되는 과정에서 어려움이 있습니다. 자연스럽게 복잡한 로직(변수, 메소드)들을 글목록, 본문, 댓글 등의 기능별로 그룹핑하고 싶다는 생각을 갖게 됩니다.

본문과 관련한 변수와 메소드가 응징되어있고, 댓글과 관련한 변수와 메소드가 응집되어있는 것이 객체입니다.


객체를 분류하여 소프트웨어를 쉽게 관리하도록 카테고라이징을 하면 기능이 나타납니다.

댓글의 기능이 다른 웹 사이트에서도 사용할 수 있기 때문에 이것이 바로 코드의 재활용성입니다.

이미 사용한 로직을 다른 곳에 사용하면 문제가 발생하니 여러 가지 로직을 제한하는 기능들이 추가하게 됩니다. 객체지향프로그래밍은 객체를 만드는 것이고 하나의 객체 안에 기능에 따라 모아 연관성 없는 것과 구분지은 것입니다.

 

추상화

설계를 잘하는 것은 어려운 일, 현실에서 관심있는 특성이나 관점을 소프트웨어화해서 프로그래밍 하는 것입니다.

위 그림은 런던의 지도입니다. 지하철을 이용한다면 어느 지도를 선호할까요? 마지막의 지도를 선택할 것입니다. 마지막 지도의 특징은 지하철 타는 사람의 유일한 관심사인 역의 이름과 환승하는 곳, 경유하는 역의 수입니다. 회로도의 영감을 얻어 만들었다고 합니다.

필요로 한 것만 현실에 추출한 것을 추상화(abstract ) 합니다.

현실을 프로그래밍 적으로 잘 만드는 것이 목표입니다.

안타깝게도 좋은 소프트웨어를 만드는 것은 지식의 영역 보다는 지혜의 영역입니다. 지혜는 잘 전달되지 않아 스스로 깨달아야 합니다. 자신의 맥락에 처해있는 문제를 지루하고 긴 시간 끝에 좋은 프로그래머가 나오는 것이라고 생각합니다.” 이고잉님의 말씀에 공감합니다.

 

부품화

입력을 담당하는 키보드, 실제 연산을 담당하는 Cpu와 메모리인 본체, 화면에 보여지는 디스플레이를 부품화 해야합니다.

기능들을 부품화 시킨 덕분에 소비자들은 더 좋은 키보드나 저렴한 모니터를 선택할 수 있게 되었습니다. 또 문제가 생겼을 때 그 문제가 어디에서 발생한 것인지 파악하고 해결하기가 훨씬 쉬워집니다.

어떻게 부품화하고 설계하느냐에 따라 다릅니다.

모니터와 저장장치가 하로 연결되어 있습니다. 시대에 따라 설계하는 방식이 달라지고 있습니다.

자신이 처한 환경에 적합한 설계(추상화)를 하는 것이 목표입니다.

메소드를 사용하는 기본 취지는 연관되어 있는 로직들을 결합해서 메소드라는 완제품을 만드는 것입니다. 그리고 이 메소드들을 부품으로 해서 하나의 완제품인 독립된 프로그램을 만드는 것입니다.

은닉화, 캡슐화

내부의 동작 방법을 단단한 케이스(객체)안에 숨기고 사용자에게는 그 부품의 사용방법(메소드)만을 노출하는 것입니다.

인터페이스

잘 만들어진 부품이라면 부품과 부품을 서로 교환할 수 있어야 합니다.

예를 들어 집에 있는 컴퓨터에 A사의 모니터를 연결하다가 B사의 모니터를 연결 할 수 있습니다. 또 집에 있던 모니터에 A사의 컴퓨터를 연결해서 사용하다가 새로운 컴퓨터를 구입하면서 B사의 컴퓨터를 연결 할 수 있습니다. 모니터와 컴퓨터는 서로가 교환 관계에 있는 것입니다. 이것은 모니터와 컴퓨터를 연결하는 케이블의 규격이 표준화 되어 있기 때문에 가능한 일입니다.

컴퓨터와 모니터를 만드는 업체들은 위와 같은 케이블의 규격을 공유합니다. 모니터 입장에서는 컴퓨터가, 컴퓨터 입장에서는 모니터가 어떤 식으로 만들어졌는지는 신경 쓰지 않습니다. 각각의 부품은 미리 정해진 약속에 따라서 신호를 입, 출력하고, 연결점의 모양을 표준에 맞게 만들면 됩니다. 이러한 연결점을 인터페이스(interface)라고 합니다.


출처 : 생활코딩 강의

728x90
반응형
728x90
반응형

Arguments, 매개변수

함수 안에서 함수의 정보를 담고 있는 객체입니다. 배열과 비슷하지만 배열은 아닙니다.

매개변수와 인자의 차이  function A(arg){ }arg는 매개변수

A(1); -> 1은 인자

function sum(){

    var i, _sum = 0;   

    for(var i = 0; i < arguments.length; i++){ //자바스크립트와 약속된 변수명

        document.write(i+' : '+arguments[i]+'<br />');

        _sum += arguments[i];

    }  

    return _sum;

}

document.write('result : ' + sum(1,2,3,4)); //사용자가 전달한 인자

 

매개변수와 관련된 두가지 수가 있습니다. arguments.length와 함수.length

arguments.length는 함수로 전달된 실제 인자의 수를 의미하고

함수.length는 함수에 정의된 인자의 수를 의미합니다.

 

function zero(){

    console.log(

        'zero.length', zero.length, //0

        'arguments', arguments.length //0

    );

}

function one(arg1){

    console.log(

        'one.length', one.length,

        'arguments', arguments.length

    );

}

function two(arg1, arg2){

    console.log(

        'two.length', two.length,

        'arguments', arguments.length

    );

}

zero(); // zero.length 0 arguments 0

one('val1', 'val2');  // one.length 1 arguments 2

//함수의 이름. Length는 매개변수를 정의한 숫자, arguments 몇 개의 인자를 전달했는가

two('val1');  // two.length 2 arguments 1

 

함수의 호출

function sum(arg1, arg2){

    return arg1+arg2;

}

alert(sum(1,2)); //결과는 3입니다.

alert(sum.apply(null, [1,2])) //결과는 3입니다.

sum.call

o1 = {val1:1, val2:2, val3:3}

o2 = {v1:10, v2:50, v3:100, v4:25}

function sum(){

    var _sum = 0;

    for(name in this){ //this는 호출 시 정해집니다.

        _sum += this[name];

    }

    return _sum;

}

alert(sum.apply(o1)) // 6 o1객체를 apply인자로 주게되면 o1이 함수에서 this가 됩니다.

                       //var this = o1; 이라는 값이 됩니다.

alert(sum.apply(o2)) // 185


출처 : 생활코딩 강의

728x90
반응형
728x90
반응형

+ Recent posts