Untitled

<!DOCTYPE html>
<html>
<head>
<meta name="description" content="[add your bin description]">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>

<script id="jsbin-javascript">
/**
 인수로서의 객체와 함수 기본 2
 이벤트를 이용한 Todo 앱 개선


var todos = [];

function newTodo(event) {
  let $ul = $('#todo-list');
  let $title = $('#title');
  let todosHTML;

  // val:입력타입관계없이 호출
  todos.push($title.val());

  // 입력후 비워준다.
  $title.val('');
  todosHTML = '';

  for(let i=0; i < todos.length; i++) {
    todosHTML = `${todosHTML}<li>${todos[i]}</li>`;
  }

  $ul.html(todosHTML);
}

function app() {
  var $newTodo = $('#new-todo');
//on:addeventListener
  $newTodo.on('click', newTodo);
}

// onload시 제이쿼리가 괄호안에 함수를 호출한다.
$(app);
**/

/**
 인수로서의 객체와 함수 기본 2
 함수 인수 다루기 - 실행의 위임
 언제일어날지 알수없을때,,,

function add(a, b, fn) {
  let result;

  result = a + b;

  fn(result);
}

function finishAdd(sum) {
  console.log(sum);
}

//콜백함수
// 콜백함수의 예 setTimeout(함수명, 2000) 2초뒤 함수호출
add(100, 200, finishAdd);

//위와동일
add(100, 200, function(sum) {
  console.log(sum);
});

add(100, 200, sum => console.log(sum));
**/


/**
 인수로서의 객체와 함수 기본 1
 객체 인수

var todo = {
  items: [],
  status: {
    allCount: 0,
    completeCount: 0
  },

//겟터: 뺄때
  get allCount() {
    return this.status.allCount;
  },

// 셋터: 안에서는 함수지만 밖에선 속성,
  set allCount(count) {
    console.warn('임의로 할 일 개수를 설정할 수 없습니다, addItem 기능을 사용해 주십시오.');
  },

  // 2번째 값이 없으면 옵션 { }안의 값을 default로 갖는다.
  addItem: function(title, options = {}) {
    let newTodo = {
      title: title
    };


    newTodo.date = !!options.date ?  options.date : '2017-06-17';
    newTodo.complete = !!options.complete;

    this.items.push(newTodo);

    this.status.allCount++;

    if (newTodo.complete) {
      this.incrementCompleteTodo();
    }
  },

  completeTodo(index) {
    this.items[index].complete = true;
    this.incrementCompleteTodo();
  },

  incrementCompleteTodo() {
    this.status.completeCount++;
  }
};

todo.addItem('객체와 함수 학습', {
  date: '2017-06-17'
});

todo.addItem('객체 내의 객체 학습');
todo.addItem('객체 인수 다루기', {
  complete: true
});

**/

/**
 인수로서의 객체와 함수 기본 1
 객체 인수

var todo = {
  items: [],
  status: {
    allCount: 0,
    completeCount: 0
  },

  addItem: function(title, options) {
    let newTodo = {
      title: title
    };

    if (options) {
      if (options.date) {
        newTodo.date = options.date;
      } else {
        newTodo.date = '2017-06-17';
      }

      newTodo.complete = options.complete ? options.complete : false;
      // newTodo.complete = !!options.complete;
      // newTodo.complete = option.complete || false;
    }

    this.items.push(newTodo);

    this.status.allCount++;

    if (newTodo.complete) {
      this.status.completeCount++;
    }
  },

  completeTodo(index) {
    this.items[index].complete = true;
    this.status.completeCount++;
  }
};

todo.addItem('객체와 함수 학습', {
  date: '2017-06-17'
});

todo.addItem('객체 내의 객체 학습');
todo.addItem('객체 인수 다루기', {
  complete: true
});

console.log(todo.status);
**/


/**
 인수로서의 객체와 함수 기본 1
 가변 인수 다루기
**/
function add1(a, b) {
  return a + b;
}

//유사배열
function add2() {
  return arguments[0] + arguments[1];
}

//최근추가된 스팩, ...가변인수
function add3(...args) {
  return args[0] + args[1];
}

// 명확하지않은 인수의 오동작을 방지한다
function add21() {
  let result = 0;

  for(let i=0; i < arguments.length; i++) {
    result += arguments[i];
  }

  return result;
}

//위와같음.
function add31(...args) {
  let result = 0;

  for(let i=0; i < args.length; i++) {
    result += args[i];
  }

  return result;
}

//arguments와 동시사용가능
function add32(a, ...args) {
  let result = a;

  for(let i=0; i < args.length; i++) {
    result += args[i];
  }

  return result;
}


/**
 객체의 속성과 메소드

var todo = {
  items: [],
  status: {
    allCount: 0,
    completeCount: 0
  },

  addItem: function(title, date) {
    this.items.push({
      title: title,
      date: date,
      complete: false
    });

    this.status.allCount++;
  },

  //축약형. 함수. 객체안에서만 쓸수있다
  completeTodo(index) {
    this.items[index].complete = true;
    this.status.completeCount++;
  }
};

todo.addItem('객체와 함수 학습', '2017-06-17');
todo.addItem('객체 내의 객체 학습', '2017-06-17');

todo.completeTodo(1);

console.log(todo.status);

**/


/**
 함수 내의 변수
 var 대신 let을써도됨(scope와 연관)
 전역객체: window라는 객체아래생성, window.은 생략가능.

 Let은 가장 가까운 블럭을 찾고, var는 가장가까운 함수를 찾는다..

function add100(a) {
  let x = 100;

  return a+x;
}

var result = add100(400);

console.log(result);
console.log(x);
**/


/**
 함수의 기본 형태 4가지

var result;

function add1(a, b) {
  return a + b;
}

var add2 = function(a, b) {
  return a + b;
}

// => function과 같은기능. 한줄함수(한줄이상도가능하나 한줄이상이면 return써야함)
// => 다음에 나오는것을 값을인식, 자동return
// 최근브라우저는 모두지원 ie10이하는 지원안함. 난해함이없어 다루기쉽다.
var add3 = (a, b) => a + b;


result = add1(10, 20);
result = add2(10, 20);
result = add3(10, 20);

//이름없는함수를 즉시실행할때..
result = (function(a, b) {
  return a + b;
})(10, 20);

//위와동일. arrow함수로 변형
result = ((a, b) => a + b)(10, 20);

**/


/*
push:추가한다.


var todo = {
  items: [],
  status: {
    allCount: 0,
    completeCount:0
  }
};


// 원래동일한말,, 해석하기쉽게 todo.items.length == todo.status.allCount;


todo.items.push ({
  title: 'aaa',
  date: '',
  complete: false
});

todo.status.allCount++;

*/


/* .을이용해 단계별접근. 건너띄고 바로접근안됨
var somthingObject = {
  name: 'something',
  x: {
    x1: {

    }

  }
};

somethingObject.x.x1

*/


/**
 + 객체 속성 추가하기 - 동적 생성
 객체뒤 .을 이용해 객체추가생성, 위아래동일하다,,

var emptyObject = {
   title: '',
   date: '',
   complete:''
}

var emptyObject = {};

emptyObject.title = '객체와 함수 학습';
emptyObject.date = '2017-06-17';
emptyObject.complete = false;

console.log(emptyObject);
  **/


/*

객체: 순서가 없는 값들의 집합, 배열: 순서가 있는 값들의 집합


var emptyObjece = {};

var literalObject = {
  name1: 10,
  name2: 'Value',
  name3: true
};

console.log(emptyObjece);
console.log(literalObject);
**/
</script>


<script id="jsbin-source-javascript" type="text/javascript">/**
 인수로서의 객체와 함수 기본 2
 이벤트를 이용한 Todo 앱 개선


var todos = [];

function newTodo(event) {
  let $ul = $('#todo-list');
  let $title = $('#title');
  let todosHTML;

  // val:입력타입관계없이 호출
  todos.push($title.val());

  // 입력후 비워준다.
  $title.val('');
  todosHTML = '';

  for(let i=0; i < todos.length; i++) {
    todosHTML = `${todosHTML}<li>${todos[i]}</li>`;
  }

  $ul.html(todosHTML);
}

function app() {
  var $newTodo = $('#new-todo');
//on:addeventListener
  $newTodo.on('click', newTodo);
}

// onload시 제이쿼리가 괄호안에 함수를 호출한다.
$(app);
**/

/**
 인수로서의 객체와 함수 기본 2
 함수 인수 다루기 - 실행의 위임
 언제일어날지 알수없을때,,,

function add(a, b, fn) {
  let result;

  result = a + b;

  fn(result);
}

function finishAdd(sum) {
  console.log(sum);
}

//콜백함수
// 콜백함수의 예 setTimeout(함수명, 2000) 2초뒤 함수호출
add(100, 200, finishAdd);

//위와동일
add(100, 200, function(sum) {
  console.log(sum);
});

add(100, 200, sum => console.log(sum));
**/


/**
 인수로서의 객체와 함수 기본 1
 객체 인수

var todo = {
  items: [],
  status: {
    allCount: 0,
    completeCount: 0
  },

//겟터: 뺄때
  get allCount() {
    return this.status.allCount;
  },

// 셋터: 안에서는 함수지만 밖에선 속성,
  set allCount(count) {
    console.warn('임의로 할 일 개수를 설정할 수 없습니다, addItem 기능을 사용해 주십시오.');
  },

  // 2번째 값이 없으면 옵션 { }안의 값을 default로 갖는다.
  addItem: function(title, options = {}) {
    let newTodo = {
      title: title
    };


    newTodo.date = !!options.date ?  options.date : '2017-06-17';
    newTodo.complete = !!options.complete;

    this.items.push(newTodo);

    this.status.allCount++;

    if (newTodo.complete) {
      this.incrementCompleteTodo();
    }
  },

  completeTodo(index) {
    this.items[index].complete = true;
    this.incrementCompleteTodo();
  },

  incrementCompleteTodo() {
    this.status.completeCount++;
  }
};

todo.addItem('객체와 함수 학습', {
  date: '2017-06-17'
});

todo.addItem('객체 내의 객체 학습');
todo.addItem('객체 인수 다루기', {
  complete: true
});

**/

/**
 인수로서의 객체와 함수 기본 1
 객체 인수

var todo = {
  items: [],
  status: {
    allCount: 0,
    completeCount: 0
  },

  addItem: function(title, options) {
    let newTodo = {
      title: title
    };

    if (options) {
      if (options.date) {
        newTodo.date = options.date;
      } else {
        newTodo.date = '2017-06-17';
      }

      newTodo.complete = options.complete ? options.complete : false;
      // newTodo.complete = !!options.complete;
      // newTodo.complete = option.complete || false;
    }

    this.items.push(newTodo);

    this.status.allCount++;

    if (newTodo.complete) {
      this.status.completeCount++;
    }
  },

  completeTodo(index) {
    this.items[index].complete = true;
    this.status.completeCount++;
  }
};

todo.addItem('객체와 함수 학습', {
  date: '2017-06-17'
});

todo.addItem('객체 내의 객체 학습');
todo.addItem('객체 인수 다루기', {
  complete: true
});

console.log(todo.status);
**/


/**
 인수로서의 객체와 함수 기본 1
 가변 인수 다루기
**/
function add1(a, b) {
  return a + b;
}

//유사배열
function add2() {
  return arguments[0] + arguments[1];
}

//최근추가된 스팩, ...가변인수
function add3(...args) {
  return args[0] + args[1];
}

// 명확하지않은 인수의 오동작을 방지한다
function add21() {
  let result = 0;

  for(let i=0; i < arguments.length; i++) {
    result += arguments[i];
  }

  return result;
}

//위와같음.
function add31(...args) {
  let result = 0;

  for(let i=0; i < args.length; i++) {
    result += args[i];
  }

  return result;
}

//arguments와 동시사용가능
function add32(a, ...args) {
  let result = a;

  for(let i=0; i < args.length; i++) {
    result += args[i];
  }

  return result;
}


/**
 객체의 속성과 메소드

var todo = {
  items: [],
  status: {
    allCount: 0,
    completeCount: 0
  },

  addItem: function(title, date) {
    this.items.push({
      title: title,
      date: date,
      complete: false
    });

    this.status.allCount++;
  },

  //축약형. 함수. 객체안에서만 쓸수있다
  completeTodo(index) {
    this.items[index].complete = true;
    this.status.completeCount++;
  }
};

todo.addItem('객체와 함수 학습', '2017-06-17');
todo.addItem('객체 내의 객체 학습', '2017-06-17');

todo.completeTodo(1);

console.log(todo.status);

**/


/**
 함수 내의 변수
 var 대신 let을써도됨(scope와 연관)
 전역객체: window라는 객체아래생성, window.은 생략가능.

 Let은 가장 가까운 블럭을 찾고, var는 가장가까운 함수를 찾는다..

function add100(a) {
  let x = 100;

  return a+x;
}

var result = add100(400);

console.log(result);
console.log(x);
**/


/**
 함수의 기본 형태 4가지

var result;

function add1(a, b) {
  return a + b;
}

var add2 = function(a, b) {
  return a + b;
}

// => function과 같은기능. 한줄함수(한줄이상도가능하나 한줄이상이면 return써야함)
// => 다음에 나오는것을 값을인식, 자동return
// 최근브라우저는 모두지원 ie10이하는 지원안함. 난해함이없어 다루기쉽다.
var add3 = (a, b) => a + b;


result = add1(10, 20);
result = add2(10, 20);
result = add3(10, 20);

//이름없는함수를 즉시실행할때..
result = (function(a, b) {
  return a + b;
})(10, 20);

//위와동일. arrow함수로 변형
result = ((a, b) => a + b)(10, 20);

**/


/*
push:추가한다.


var todo = {
  items: [],
  status: {
    allCount: 0,
    completeCount:0
  }
};


// 원래동일한말,, 해석하기쉽게 todo.items.length == todo.status.allCount;


todo.items.push ({
  title: 'aaa',
  date: '',
  complete: false
});

todo.status.allCount++;

*/


/* .을이용해 단계별접근. 건너띄고 바로접근안됨
var somthingObject = {
  name: 'something',
  x: {
    x1: {

    }

  }
};

somethingObject.x.x1

*/


/**
 + 객체 속성 추가하기 - 동적 생성
 객체뒤 .을 이용해 객체추가생성, 위아래동일하다,,

var emptyObject = {
   title: '',
   date: '',
   complete:''
}

var emptyObject = {};

emptyObject.title = '객체와 함수 학습';
emptyObject.date = '2017-06-17';
emptyObject.complete = false;

console.log(emptyObject);
  **/


/*

객체: 순서가 없는 값들의 집합, 배열: 순서가 있는 값들의 집합


var emptyObjece = {};

var literalObject = {
  name1: 10,
  name2: 'Value',
  name3: true
};

console.log(emptyObjece);
console.log(literalObject);
**/

</script></body>
</html>