두 줄 이상의 말줄임이 필요한 경우 CSS만으로는 처리가 불가능합니다. 따라서 자바스크립트에서 처리를 해줘야 합니다.

HTML

<div class="box box--fixed one-line">
  1. Forcing one line regardless
</div>
<div class="box box--fixed two-lines">
  2. Forcing two lines of text regardless of overflow
</div>
<div class="box box--fixed overflow">
  3. Trying to ellipsis any overflowed content. The quick brown fox jumped over the lazy dogs. The quick brown fox jumped over the lazy dogs.
</div>
<div class="box box--fixed overflow">
4. 이건 테스트다. 글씨가 어떻게 나올지는 나도 모르겠다. 더이상 쓸 말이 없다. 복사 붙여넣기 복사 붙여넣기 복사 붙여넣기 복사 붙여넣기 복사 붙여넣기 복사 붙여넣기 복사 붙여넣기 복사 붙여넣기 복사 붙여넣기 복사 붙여넣기 복사 붙여넣기 복사 붙여넣기 복사 붙여넣기 복사 붙여넣기 복사 붙여넣기 복사 붙여넣기 복사 붙여넣기 복사 붙여넣기 복사 붙여넣기 복사 붙여넣기 복사 붙여넣기
</div>
<div class="box box--responsive">
5. This is a responsive box that will update it's ellipsis when the screen resizes. The quick brown fox jumped over the lazy dogs. The quick brown fox jumped over the lazy dogs. This is a responsive box that will update it's ellipsis when the screen resizes.
  The quick brown fox jumped over the lazy dogs. The quick brown fox jumped over the lazy dogs. This is a responsive box that will update it's ellipsis when the screen resizes. The quick brown fox jumped over the lazy dogs. The quick brown fox jumped
  over the lazy dogs. This is a responsive box that will update it's ellipsis when the screen resizes. The quick brown fox jumped over the lazy dogs. The quick brown fox jumped over the lazy dogs.
</div>

CSS

  body {
   padding: 1%;
 }
 
 .box {
   height: 4.5em;
   background: #eee;
   border: 1px solid #ccc;
   padding: 0.5em 1em;
   margin-right: 30px;
   margin-bottom: 30px;
   overflow: hidden;
   float: left;
 }
 
 .box--fixed {
   width: 140px;
 }
 
 .box--responsive {
   width: 30%;
 }
 /* necessary plugin styles */
 
 .ellip {
   display: block;
   height: 100%;
 }
 
 .ellip-line {
   display: inline-block;
   text-overflow: ellipsis;
   white-space: nowrap;
   word-wrap: normal;
 }
 
 .ellip,
 .ellip-line {
   position: relative;
   overflow: hidden;
   max-width: 100%;
 }
 @media screen and (max-width: 400px) {
   .box--responsive {
     height: 50px;
   }
 }
 
 @media screen and (min-width: 401px) and (max-width: 500px) {
   .box--responsive {
     height: 100px;
   }
 }
 
 @media screen and (min-width: 801px) {
   .box--responsive {
     height: 140px;
   }
 }
 

JS

/*!
   * text-overflow: ellipsis;
 */
(function(factory) {
  'use strict';
  if (typeof define === 'function' && define.amd) {
    define(['jquery'], factory);
  } else {
    factory(jQuery);
  }
}(function($) {
  'use strict';
  var namespace = 'ellipsis',
    span = '<span style="white-space: nowrap;">',
    defaults = {
      lines: 'auto',
      ellipClass: 'ellip',
      responsive: false
    };
  /**
   * Ellipsis()
   * --------------------------------------------------------------------------
   * @param {Node} el
   * @param {Object} opts
   */
  function Ellipsis(el, opts) {
    var base = this,
      currLine = 0,
      lines = [],
      setStartEllipAt,
      startEllipAt,
      resizeTimer,
      currOffset,
      lineHeight,
      contHeight,
      words;
    base.$cont = $(el);
    base.opts = $.extend({}, defaults, opts);
    function create() {
      base.text = base.$cont.text();
      base.opts.ellipLineClass = base.opts.ellipClass + '-line';
      base.$el = $('<span class="' + base.opts.ellipClass + '" />');
      base.$el.text(base.text);
      base.$cont.empty().append(base.$el);
      init();
    }
    /**
     * init()
     */
    function init() {
      if (typeof base.opts.lines === 'number' && base.opts.lines < 2) {
        base.$el.addClass(base.opts.ellipLineClass);
        return;
      }
      contHeight = base.$cont.height();
      if (base.opts.lines === 'auto' && base.$el.prop('scrollHeight') <= contHeight) {
        return;
      }
      if (!setStartEllipAt) {
        return;
      }
      words = $.trim(base.text).split(/\s+/);
      base.$el.html(span + words.join('</span> ' + span) + '</span>');
      base.$el.find('span').each(setStartEllipAt);
      if (startEllipAt != null) {
        updateText(startEllipAt);
      }
    }
    function updateText(nth) {
      words[nth] = '<span class="' + base.opts.ellipLineClass + '">' + words[nth];
      words.push('</span>');
      base.$el.html(words.join(' '));
    }
    if (base.opts.lines === 'auto') {
      var setStartEllipByHeight = function(i, word) {
        var $word = $(word),
          top = $word.position().top;
        lineHeight = lineHeight || $word.height();
        if (top === currOffset) {
          lines[currLine].push($word);
        } else {
          currOffset = top;
          currLine += 1;
          lines[currLine] = [$word];
        }
        if (top + lineHeight > contHeight) {
          startEllipAt = i - lines[currLine - 1].length;
          return false;
        }
      };
      setStartEllipAt = setStartEllipByHeight;
    }
    if (typeof base.opts.lines === 'number' && base.opts.lines > 1) {
      var setStartEllipByLine = function(i, word) {
        var $word = $(word),
          top = $word.position().top;
        if (top !== currOffset) {
          currOffset = top;
          currLine += 1;
        }
        if (currLine === base.opts.lines) {
          startEllipAt = i;
          return false;
        }
      };
      setStartEllipAt = setStartEllipByLine;
    }
    if (base.opts.responsive) {
      var resize = function() {
        lines = [];
        currLine = 0;
        currOffset = null;
        startEllipAt = null;
        base.$el.html(base.text);
        clearTimeout(resizeTimer);
        resizeTimer = setTimeout(init, 100);
      }
      $(window).on('resize.' + namespace, resize);
    }
    create();
  }
  $.fn[namespace] = function(opts) {
    return this.each(function() {
      try {
        $(this).data(namespace, (new Ellipsis(this, opts)));
      } catch (err) {
        if (window.console) {
          console.error(namespace + ': ' + err);
        }
      }
    });
  };
}));
$('.overflow').ellipsis();
$('.one-line').ellipsis({
  lines: 1
});
$('.two-lines').ellipsis({
  lines: 2
});
$('.box--responsive').ellipsis({
  responsive: true
});

결과


See the Pen 정적, 반응형 말줄임 by jinhwan (@jinhwan) on CodePen.


시간을 구하는 Date 객체가 있지만 Date()를 사용하면 사용자의 컴퓨터 시간을 참조하여 보여줍니다. 만약 사용자가 시간을 하루 전으로 돌리면 현재시간이 아닌 하루 전의 시간이 보여지게 됩니다. 자바스크립트는 클라이언트 사이드 언어이기 때문에 자바스크립트 자체로만으로는 서버 시간을 표시 할 수가 없기 때문에 서버의 시간을 가져올 중간 매개체인 XMLHttpRequest를 사용합니다. XMLHttpRequest 개체는 클라이언트와 서버 중간에서 요청과 결과를 전달하는 역할을 합니다.

let xmlHttp;

if (window.XMLHttpRequest) {
    xmlHttp = new XMLHttpRequest(); // IE 7.0 이상, 크롬, 파이어폭스 등
}
else if (window.ActiveXObject) {
    xmlHttp = new ActiveXObject('Msxml2.XMLHTTP');
}
else {
    return ;
}

xmlHttp.open('HEAD', window.location.href.toString(), false);
xmlHttp.setRequestHeader("Content-Type", "text/html");
xmlHttp.send('');

//서버의 Date 값 response new Date()객체에 넣기 전엔 시간표준이 GMT로 표시
let serverDate = xmlHttp.getResponseHeader("Date");
let currentDateClass = new Date(serverDate);


str = '123456789';
str.replace(/(\d)(?=(?:\d{3})+(?!\d))/g, '$1,'); // 123,456,789



let temp = ['a','b','c','d','e']
let select = temp.splice(2,3) // 3번째 배열부터 3개의 값을 축출
 
console.log(temp, selete) // temp = ['a','b'] , select = ['c','d','e']


논리연산자가 가지고 있는 특성으로 아래와 같이 조건문을 실행할 수 있다.

||

true || alert('1234')
false || alert('1234') 

위와같이 논리합 연산자의 좌변이 true이면 우변은 실행되지 않음 (true가 나온시점에서 우변들이 뭐가 나오든 어차피 true이기 떄문)

이러한 특성을 아래와 같이 이용할 수 있음

(조건 표현식) || (좌변 조건이 false일때 실행할 문장)

&&

true && alert('1234')
false && alert('1234') 

논리곱 연산자는 좌변이 참이여야만 다음 우변이 실행됨 ( 좌변이 false면 우변들이 뭐가 나오든 어차피 false)

이러한 특성을 아래와 같이 이용할 수 있음

(조건 표현식) && (좌변 조건이 true일때 실행할 문장)


위와같은 특성으로 조건식을 걸때 조금이나마 조건문을 처리하는 시간을 줄일 수 있다.


(조건표현문) ? 참 : 거짓;   // 예시 test ('abc' == 'abc') ? 1 : 2; // test = 1


배열 정렬(오름차순 및 내림차순)

//정렬할 배열
var test = [3, 9, 1, 8];

//배열 정렬
test.sort();

//결과값
[1, 3, 8, 9]
 
test.reverse();
 
//결과값
[9, 8, 3, 1]

객체정렬(오름차순)

//정렬할 객체 배열 var test = { id: "test", name: "test", children: [ { name: "3번", seq: 3 }, { name: "7번", seq: 7 }, { name: "1번", seq: 1 }, { name: "4번", seq: 4 } ] }; //현재 객체 배열을 정렬 test.children.sort(function (a, b) { return a.seq < b.seq ? -1 : a.seq > b.seq ? 1 : 0; });

// 더 간단한 방법

test.children.sort(function (a, b) {

return a.seq < b.seq ? -1 : 1;

});

//결과값 { id: "test", name: "test", children: [ { name: "1번", seq: 1 }, { name: "3번", seq: 3 }, { name: "4번", seq: 4 }, { name: "7번", seq: 7 } ] }

.sort() method 안에 함수를 파라미터로 넣어 1, -1, 0을 리턴하여 순서를 정하는 방식이다.

seq를 기준으로 내림차순으로 정렬하고 싶은 경우 부등호의 위치를 변경하거나 -1과 1의 자리를 변경하면 된다.



function sortNumber(a,b){//콜백함수

    // 위의 예제와 비교해서 a와 b의 순서를 바꾸면 정렬순서가 반대가 된다.

    return b-a;

}

var numbers = [20, 10, 9,8,7,6,5,4,3,2,1];

alert(numbers.sort(sortNumber)); // array, [20,10,9,8,7,6,5,4,3,2,1]



numbers는 객체이다. (배열객체)

sort(sortNumber()); -->sortNumber가 콜백함수이다. 


이것이 콜백이다.(콜백이 가능한 이유: 자바스크립트에서는 함수가 값이기 때문이다.)

(여기서 sort는 함수가 아닌 메소드라고 한다.), 배열이나 sort는 자바스크립가 기본적으로 가지고 있는 기능이기에 내장객체, 내장메소드, 빌트인 객체, 빌트인 메소드라 한다. 

우리가 만드는 객체, 메소드, 함수는 사용자 정의 객체, 사용자 정의 함수라 한다.


2. 비동기 처리

cf.) 글작성->이메일 발송-> 작성완료: 순차적작성을 동기식 처리라고 한다. 

글작성하고 이메일 발송 부분은 예약하고 작성완료(to do)를 하면 순식간에 일이 처리된다. 내부적으로는 예약 부분을 백그라운드에서 비동기적으로 처리

웹페이지에 표시되지않은 데이터를 화면에 표시할 수 있는 이유는 내부적으로 화면에 표시된 정보를 서버에 요청해서 화면에 표시한 것이다.(웹페이지 리로드 없이 작업한 것임)

클릭시 웹페이지가 변경되지 않고 서버와 웹브라우저가 조용히 통신하는 기법을 Ajax라고 한다.

콜백은 비동기처리에서도 유용하게 사용된다. 시간이 오래걸리는 작업이 있을 때 이 작업이 완료된 후에 처리해야 할 일을 콜백으로 지정하면 해당 작업이 끝났을 때 미리 등록한 작업을 실행하도록 할 수 있다. 

다음 코드는 일반적인 환경에서는 작동하지 않고 서버 환경에서만 동작한다. 동영상을 참고한다.




자바스크립트 콜백

http://yubylab.tistory.com/49

+ Recent posts