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

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

	

		
년월일시분
			
년월일시분
			

	
 

	

		

			

				년
				월
				일
				시
				분
			
			

				년
				월
				일
				시
				분
			
			

		
	
 

제어할 태그 선택하기

자바스크립트로 할 수 있는 중요한 일 사용자와 상호작용해서 HTML, CSS를 동적으로 변경해 보다 사용자와 대화하는 듯한 느낌의 애플리케이션을 만드는 핵심적 원리

프로그램, 프로그래밍, 프로그래머

컴퓨터 언어 (HTML, CSS)

컴퓨터 프로그래밍 언어(JavaScript)

프로그램 이란, 순서.

그 순서를 만드는 행위가 '프로그래밍'

그 순서를 만드는 사람이 '프로그래머'

HTML은 웹 페이지를 묘사, 자바스크립트는 사용자와 상호작용하기 위해 개발된 언어

반복적으로, 조건에 따라 다른 기능을 실행

조건문 예고

비교 연산자와 Boolean 데이터타입

조건문

조건문의 활용

리팩토리(refactoring)

중복을 끝까지 찾아서 없애라!

반복문 예고

배열, 반복적인 작업 처리를 위한 반복문

배열(Array)

배열은 데이터 중 연관 된 데이터를 잘 정리정돈 해 담아 놓는 수납상자, array

반복문(Loop)

반복해야 할 2줄의 코드가 1억개라면 copy&paste가 불가능합니다. 만약 했더라고 오류가 발생한다면 다시 수정해야 하는 어려움이 발생, 이때 반복문을 사용합니다.

배열과 반복문

스크립트에 신경 쓸 필요 없이 데이터 자체에 집중하는 효과를 얻을 수 있습니다.

배열은 연관된 데이터를 정렬, 순서대로 자동화된 처리하는 것이 반복문

배열과 반복문의 활용

WEB

 

    
HTML
    
CSS
    
JavaScript
 

WEB

 

    
HTML
    
CSS
    
JavaScript
 

출처 : 생활코딩 강의

수업의 목적

자바스크립트는 야간모드와 주간모드를 버튼을 통해 만들 수 있습니다. 즉 사용자와 상호작용 한다는 의미

1. 자바스크립트는 사용자와 상호작용하는 언어

2. 웹 브라우저는 한번 출력하면 바뀔 수 없지만 바디 태그 내 디자인을 바꿀 수 있습니다.

자바스크립트는 HTML을 제어하는 언어(동적으로 만들어주는 특성을 가짐)

HTML과 JavaScript의 만남 (script 태그)

HTML은 정적 JavaScript는 동적

<h1>JavaScript</h1>

<script>

  document.write(1+1); // 2

</script>

<h1>html</h1>

1+1 <!-- 1+1의 문자열을 출력 -->

HTML과 JavaScript의 만남 (이벤트)

웹 브라우저에서 일어나는 일(사건)을 이벤트라고 합니다.

웹 브라우저에서 일어나는 이벤트의 예

<input type="button" value="hi" onclick="alert('hi')">

<input type="text" onchange="alert('changed')">

<input type="text" onkeydown="alert('key down!')">

HTML과 JavaScript의 만남(콘솔)

콘솔을 통해 웹 페이지를 대상으로 자바스크립트가 실행됩니다.

데이터 타입 – 문자열과 숫자

데이터 타입은 자료형

‘hello world’.indexOf(‘o’) //4

‘hello world’.toUpperCase() // HELLO WORLD

변수와 대입 연산자

좌항과 우항을 결합해 우항의 결과를 만든다

name의 개수가 1억 개일 경우 변경하기 쉽지 않습니다. 변수를 지정해 값을 쉽게 변경할 수 있습니다.

웹 브라우저 제어

자바스크립트를 이용해 제어하고자 하는 태그를 선택하는 방법

CSS기초(style 속성·태그, 선택자)

<h1 style=”backgroudcolor:red;color:blue”>JavaScript</h1>

<div>JavaScript</div> <span style=”font-weight:bold;”>JavaScirpt</span> 전체를 쓰는지 안 쓰는지의 차이

반은 클래스 학생들을 그룹핑, id는 학번의 개념 중복될 수 없습니다.

<h1><a href="index.html">WEB</a></h1>

  <h2 style="background-color:coral;color:powderblue;">JavaScript</h2>

  <p>

    <span id="first" class="js">JavaScript</span> (/ˈdʒɑːvəˌskrɪpt/[6]), often abbreviated as JS, is a high-level, dynamic, weakly typed, prototype-based, multi-paradigm, and interpreted programming language. Alongside <span>HTML</span> and <span>CSS</span>, <span class="js">JavaScript</span> is one of the three core technologies of World Wide Web content production. It is used to make webpages interactive and provide online programs, including video games. The majority of websites employ it, and all modern web browsers support it without the need for plug-ins by means of a built-in <span class="js">JavaScript</span> engine. Each of the many <span class="js">JavaScript</span> engines represent a different implementation of <span class="js">JavaScript</span>, all based on the ECMAScript specification, with some engines not supporting the spec fully, and with many engines supporting additional features beyond ECMA.

</p>

출처 : 생활코딩 강의

HTML CSS JavaScript(웹 페이지를 제어하는 역할)

HTML에서 JavaScript로드하기

Inline 방식은 태그에 직접 자바스크립트를 직접 기술하는 방식입니다.

장점은 연관된 스크립트가 분명하게 드러난다는 점입니다. 하지만 정보와 제어가 같이 있기 때문에 정보로서 가치가 떨어집니다.

<input type="button" onclick="alert('Hello world')" value="Hello world" />

<script>태그 이용

<input type="button" id="hw" value="Hello world" />

<script type="text/javascript">

    var hw = document.getElementById('hw');

    hw.addEventListener('click', function(){

        alert('Hello world');

    })

</script>

html코드 안에 자바스크립트가 존재하지 않습니다. 또한, 자바스크립트 유지보수하기에 바람직합니다.

외부 파일로 분리

정보와 제어의 결합도를 낯추며 유지보수의 편의성이 높아집니다.

<script src="./script2.js"></script>

script2.js  파일 내 코드

var hw = document.getElementById('hw');

hw.addEventListener('click', function(){

    alert('Hello world');

})

Script파일의 위치

head 태그에 위치시킬 수 있지만 이 경우는 오류가 발생할 수 있습니다.

Id가 hw의 존재를 해석하기 전의 상태에서 조회를 하고 있기 때문에 null의 상태가 됩니다. 존재하지 않는 객체를 호출한 상태이기 때문에 오류가 발생합니다.

window.onload = function(){

    var hw = document.getElementById('hw');

    hw.addEventListener('click', function(){

        alert('Hello world');

    })

} //윈도우 객체 onload를 호출하도록 약속, 태그가 화면이 등장한 이후 스크립트 //코드가 실행되기 때문에 오류를 없앨 수 있습니다.

script 파일은 head 태그 보다 페이지의 하단에 위치시키는 것이 더 좋은 방법입니다.

Object Model

객체화란 무엇인가?

테두리와 같은 역할을 합니다.

각각의 태그마다 객체를 만들어 준비를 해놓은 상태, 태그에 해당하는 객체를 찾아 메소드를 호출하거나 프로퍼티를 가져오는 것

객체화 = 객체 제어 방법

var imgs = document.getElementsByTagName(‘img’);

imgs[0].style.width=’300px’;

JavaScript Core, BOM DOM(윈도우 객체의 프로퍼티)

window : 전역객체

JavaScript Core : JavaScript 언어 자체에 정의되어 있는 객체들

BOM(Browser Object Model) : 웹페이지의 내용을 제외한 브라우저의 각종 요소들을 객체화시킨 것

DOM(Document Object Model) : 웹페이지의 내용을 제어

출처 : 생활코딩 강의

전역객체

모든 객체는 전역객체의 프로퍼티입니다. window라는 전역객체의 프로퍼티입니다.

function func(){                         var o = {'func':function(){

    alert('Hello?');                                alert('Hello?');

}                                            }}

func();                                     o.func();

window.func();                          window.o.func();

func();와 window.func();는 모두 실행 가능합니다. 모든 전역변수와 함수는 사실 window 객체의 프로퍼티다. 객체를 명시하지 않으면 암시적으로 window의 프로퍼티로 간주됩니다.

this

객체지향에 대한 시야를 높이기 위한 수업입니다.

This는 함수 내에서 함수의 호출 맥락을 의미합니다. 의미가 고정에 되어 있지 않고 가변적일 때 맥락을 사용합니다. 함수와 객체의 관계가 느슨한 자바스크립트에서 this는 둘을 연결시키는 연결점의 역할을 합니다. 함수내의  this 값은 window를 의미합니다.

메소드와 this

var o = {

    func : function(){ //func 프로퍼티는 함수이기에 메소드입니다.

        if(o === this){

            document.write("o === this");

        }

    }

}

o.func();

객체 안에서 메소드를 호출하면 메소드가 소속되어있는 객체를 this로 접근할 수 있습니다.

func라는 함수가 객체에 소속되어 있지 않은 경우 this는 window라는 전역객체를 가리킵니다.

o.func() 호출 시 this는 o가 됩니다.

생성자와 this

생성자로 사용 될 때는 this값은 생성될 객체를 가리킵니다.

함수로 호출하면 함수 안의 this는 window를 가리킵니다.

var funcThis = null;

function Func(){

    funcThis = this;

}

var o1 = Func();

if(funcThis === window){

    document.write('window <br />'); //window

}

var o2 = new Func();

if(funcThis === o2){

    document.write('o2 <br />'); //o2

}

생성자는 빈 객체를 만듭니다. 그리고 이 객체내에서 this는 만들어진 객체를 가르킵니다. 이것은 매우 중요한 사실이다. 생성자가 실행되기 전까지는 객체는 변수에도 할당될 수 없기 때문에 this가 아니면 객체에 대한 어떠한 작업을 할 수 없기 때문입니다.

객체로서의 함수

apply, call

마지막의 인자가 함수의 본문에 해당

Sum()이라는 함수 객체를 만든 것, 문법적으로 작성해 자바스크립트가 함수 객체를 만들어줍니다.

이를 함수 리터럴(Literal)이라고 합니다. 문법적으로 리터럴이라고 부릅니다.

함수가 가질 수 있는 프로퍼티 중 ecma에서 정의한 것이 apply, call입니다.

var o = {}

var p = {}

function func(){

    switch(this){

        case o:

            document.write('o<br />');

            break;

        case p:

            document.write('p<br />');

            break;

        case window:

            document.write('window<br />');

            break;         

    }

}

func(); //window

func.apply(o); //o

func.apply(p); //p 객체p를 의미

ecma의 표준 메소드인 apply()

객체의 포함되어 있는 것이 메소드, 다른 곳에 가지 못하고 고정되어 있습니다.

자바스크립트는 유연하다.

언어에서 함수는 일반적인 객체지향의 메소드보다 위상이 높다. 어떻게 호출하느냐에 따라 함수는 어떠한 객체에 종속되는 존재이기도 합니다. This는 어떤 맥락에서 어떤 의미를 갖는가를 알아야합니다. this는 소속되어 있는 객체를 의미합니다.

 출처 : 생활코딩 강의

생성자와 new

객체지향의 기본 형태 : 변수 + 메소드, 디렉토리의 연관된 파일을 구분하는 것을 객체입니다.

객체는 독립성을 갖게 됩니다. 여러 완제품의 부품으로 사용이 가능하다는 의미입니다.

객체지향프로그래밍의 도달하고자 목표는 좋은 부품의 로직을 만드는 것!

var person = {}

person.name = 'egoing';

person.introduce = function(){

    return 'My name is '+this.name;

}

document.write(person.introduce());

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

객체를 만드는 과정에 분산되어 있습니다. 객체를 정의 할 때 값을 셋팅하도록 코드를 바꿔보겠습니다.

var person = {

    'name' : 'egoing',

    'introduce' : function(){

        return 'My name is '+this.name;

    }

}

document.write(person.introduce());

생성자

생성자(constructor)는 객체를 만드는 역할을 하는 함수입니다. 자바스크립트에서 함수는 재사용 가능한 로직의 묶음이 아니라 객체를 만드는 창조자라고 할 수 있습니다.

function Person(){}

var p = new Person();

p.name = 'egoing';

p.introduce = function(){

    return 'My name is '+this.name;

}

document.write(p.introduce());

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

function Person(name){

    this.name = name;

    this.introduce = function(){

        return 'My name is '+this.name;

    }  

}

var p1 = new Person('egoing');

document.write(p1.introduce()+"<br />");

var p2 = new Person('leezche');

document.write(p2.introduce());

생성자의 특징

일반적인 객체지향 언어에서 생성자는 클래스의 소속입니다. 하지만 자바스크립트에서 객체를 맏는 주체는 함수입니다. 함수에 new를 붙이는 것을 통해서 객체를 만들 수 있다는 점은 자바스크립트에서 함수의 위상을 암시하는 단서이면서 자바스크립트가 추구하는 자유로움을 보여줍니다.

출처 : 생활코딩 강의

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

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

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

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

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

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

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

추상화

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

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

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

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

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

부품화

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

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

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

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

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

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

은닉화, 캡슐화

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

인터페이스

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

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

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

출처 : 생활코딩 강의

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

출처 : 생활코딩 강의