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

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

	

		
년월일시분
			
년월일시분
			

	
 

	

		

			

				년
				월
				일
				시
				분
			
			

				년
				월
				일
				시
				분
			
			

		
	
 

자바스크립트 사용 시 유용한 JSON 객체 사용에 대해 알아보겠습니다.

JSON(JavaScript Object Notation)

주로 웹 브라우저에서 웹 서버로 정보를 전송할 때 쓰인다고 합니다.

1. JSON.parse() (String -> JSON)

- parse  메소드는 String객체를 JSON객체로 변환시켜줄 때 사용합니다.

예제를 통해 자세히 알아보겠습니다.

<script>

var text = {"name":"shin", "age":27, "city":"Seoul"};

var obj = JSON.parse(text);

console.log(obj); // {"name":"shin", "age":27, "city":"Seoul"}

console.log(obj.name + ", " + obj.age); // shin, 27

</script>

2. JSON.stringify() (JSON -> String)

- stringify 메소드는 parse메소드와 반대로 JSON객체를 String객체로 변환시켜줄 때 사용합니다.

예제를 통해 자세히 알아보겠습니다.

<script>

var text = '{"name":"shin", "age":27, "city":"Seoul"}';

var obj = JSON.parse(text);

var str = JSON.stringify(obj);

console.log(str); // {"name":"shin","age":27,"city":"Seoul"}

console.log(str.name); // undefined

</script>

자바 1.7버전 사용 중 1.8로 버전을 업데이트를 했습니다.

이클립스 실행 시 

Eclipse java was started but returned exit code=13

이와 같은 오류가 나타나며 이클립스가 실행이 되지 않네요.

1.8로 업데이트를 했지만 1.8자바 정보에 대한 방법이 없기 때문입니다.

해결방법은 2가지가 있습니다.

1. 제어판 자바 삭제 후 업데이트 했던 버전으로 자바를 새로 설치해줍니다.

2. eclipse.ini 파일 수정하기 

2-1) 우선 eclipse.ini 파일의 위치를 찾습니다.

본인이 설치한 이클립스 파일을 들어가면 아래와 같이 eclipse.ini 파일이 있습니다.

2-2) 에디터 프로그램으로 열어 자바 정보를 추가해줍니다.

저는 pc에 설치된 notepad 파일로 eclipse.ini 파일을 수정하였습니다.(notepad 설치 경로 http://notepad-plus-plus.org/ )

아래 사진과 같은 위치에

-vm

C:/Program Files/Java/jdk1.7.0_80/bin/javaw.exe 

를 추가해줍니다.

제 PC에 자바가 설치된 위치로 본인 PC에 자바가 설치한 경로를 수정해서 추가하면 됩니다.

이상입니다.

VPN은 Virtual Private Network의 줄임말입니다. 그대로 해석한다면 가상 사설망입니다. 사설망과 공중망에 대한 설명을 보고나서 가상 사설망이라고 하면 대충 짐작은 갈 것입니다. 공중망을 사용하지만 가상으로 사설망처럼 이용 가능하게 만든다는 뜻입니다. 실제로 사설망이 아니지만 가상으로 사설망 연결할 수 있습니다.

인터넷망을 전용선처럼 사용할 수 있도록 특수 통신체계와 암호화 기법을 제공하는 서비스로 기업 본사와 지사 또는 지사 간에 전용망을 설치한 것과 같은 효과를 거둘 수 있습니다. 대부분은 기업에서 사용하고 있습니다만 기타 이유로 개인이 사용할 경우도 있습니다.

공중망을 경유하여 데이터가 전송되더라도 외부인으로부터 안전하게 보호되도록 주소 및 라우터 체계의 비공개, 데이터 암호화,사용자 인증 및 사용자 액세스 권한 제한 등의 기능을 제공합니다.

사설망 vs 공중망

VPN을 설명하기 위해서는 사설망과 공중망에 대해서 먼저 알아야 합니다. 사설망은 전용회선이라고 생각하시면 됩니다. 특정 조직 내에서만 사용하는 네트워크로 인증된 사람만 사용할 수 있습니다. 따라서 보안에 우수하지만 거리에 따른 설치비용 및 유지보수 비용이 들어갑니다.

공중망은 전화망이나 인터넷처럼 모두에게 공개되어 있는 망을 뜻하며 따라서 보안성이 취약합니다. 현재 알고 계시는 통신사들의 인터넷망이라고 생각하면 됩니다.

VPN(Virtual Private Network)은 방화벽, 침입 탐지 시스템(IDS)과 함께 현재 사용되는 가장 일반적인 보안 솔루션 중 하나입니다.인터넷망을 전용선처럼 사용할 수 있도록 특수 통신체계와 암호화 기법을 제공하는 서비스로 기업 본사와 지사 또는 지사 간에 전용망을 설치한 것과 같은 효과를 낼 수 있습니다.

기존 사설망의 고비용 부담을 해소하기 위해 사용합니다. 기업의 통신망과 인터넷서비스 제공자와 연결만 하면 되기 때문에 별도로 값비싼 장비나 소프트웨어를 구입하고 관리할 필요가 없기 때문에 기존 전용선에 비해 20~80% 이상의 비용 절감효과를 얻을 수 있습니다. 뿐만 아니라 사용자의 이동성 보장과 편리한 네트워크 구성 등이 장점이 있습니다. VPN은 공중망을 통해 데이터를 송신하기 전 데이터를 암호화하고, 수신 측에서 이를 복호화 합니다. 따라서 VPN 구축을 위해서는 데이터를 암호화하는 보안기술이 있어야 합니다.

가상 사설망은 응용프로그램 하단 계층에서 작동하므로 응용프로그램을 수정할 필요가 없기 때문에 투명성을 제공합니다.사용자가 필요에 따라 자체적으로 보안성을 적용한 네트워크를 구축할 수 있습니다. 이는 IPSec이나 TLS/SSL 등의 보안 프로토콜을 네트워크 관리자의 구성이 아닌 사용자의 요구로 적용시킬 수 있습니다.

터널링 = 가상전용선

출처 : http://dany-it.tistory.com/40

게시판이나 입력 폼 등에서 글자수를 제한해야할 때가 있습니다.

ex) 자소서 문항에서 1000자 내외로 입력하세요. 

input 태그에서는 maxlength를 통해 글자수를 제어하면 됩니다.

textarea에서는 maxlength가 없습니다.

하지만, 스크립트를 통해서 제어할 수 있습니다.

Ctril + Shift + R 단축키를 누르면 아래와 같은 화면이 나옵니다.

원하는 파일의 이름을 검색하면 해당하는 파일들이 리스트로 나오게 됩니다.

파일명이 생각나지 않는다면 *를 사용해 찾으면 됩니다. 

*는 모든 파일을 의미하는데 *.js*를 검색하게 된다면

*.js 파일과 *.jsp 파일을 모두 보여주게 됩니다.

1. 버블 정렬(Bubble sort)

매번 연속된 두 개 인덱스를 비교하여, 정한 기준의 값을 뒤로 넘겨 정렬하는 알고리즘

시간복잡도가 높아 실제로 잘 사용되지 않는 정렬

2. 선택 정렬(Selection sort)

주어진 리스트에 최소값을 찾아 맨 앞에 위치한 값과 교체하며 리스트를 반복해 교체하는 알고리즘

정렬되지 않은 배열 인덱스의 맨 앞에서부터 포함한 이후의 배열 값 중 가장 작은 값을 찾아 정렬하는 알고리즘

3. 삽입 정렬(Insertion sort)

자료 배열의 모든 요소를 앞에서부터 차례대로 이미 정렬된 배열 부분과 비교하여, 자신의 위치를 찾아 삽입함으로써 정렬을 완성하는 알고리즘이다.

4. 퀵 정렬(Quick sort)

분할 정복 알고리즘의 종류로 pivot을 선정하여 pivot을 기준으로 좌측과 우측으로 pivot보다 작은 값을 왼쪽, pivot보다 큰 값을 오른쪽으로 재배치를 하고 계속하여 분할하여 정렬하는 알고리즘

*pivot : 리스트 가운데서 고른 하나의 원소

*분할정복 : 커다란 문제를 잘게 나눠서 작은 문제를 극복

5. 머지 정렬(Merge sort)

분할 정복 알고리즘의 종류로 큰 문제를 반으로 쪼개 문제를 해결해 나가는 방식으로 배열의 크기가 1보다 작거나 같을 때까지 반복해 정렬하는 알고리즘

두 개의 배열을 비교하여, 기준에 맞는 값을 다른 배열에 저장해 나가는 방식

머지 정렬 와 퀵 정렬의 차이

병합 정렬은 정확하게 이분할을 하는 반면에 퀵 정렬의 경우에는 정확하게 이분할되지 않는 차이가 있습니다.

출처 : 생활코딩

함수예고(함수=수납상자)

nightDayHandler(){} 함수를 정의함으로써 긴 코드의 길이를 줄일 수 있습니다.

함수

BASIC

코드가 반복되어야 하는 경우 반복문을 처리해 사용하면 되지만 연속적으로 반복해야 하는 경우가 아니라면 반복문을 사용할 수 없게 됩니다. 이때 함수를 사용해 해결할 수 있습니다.

<h1>Function</h1>

 <h2>Basic</h2>

 <ul>

      <script>

        function two(){

          document.write('<li>2-1</li>');

          document.write('<li>2-2</li>');

        }

        document.write('<li>1</li>');

        two();

        document.write('<li>3</li>');

        two();

      </script>

</ul>

Parameter & Argument 함수 입력부분이 파라미터

<h2>Parameter & Argument</h2>

    <script>

      function onePlusOne(){

        document.write(1+1+'<br>');

      }

      onePlusOne();

      function sum(left, right){  //left, right를 매개변수 parameter

        document.write(left+right+'<br>');

      }

      sum(2,3); //5 2,3을 인자 argument라 합니다.

      sum(3,4); // 7

    </script>

Return 함수 출력부분은 리턴

<h2>Return</h2>

    <script>

      function sum2(left, right){

        return left+right;

      }

      document.write(sum2(2,3)+'<br>');

      document.write('<div style="color:red">'+sum2(2,3)+'</div>');

      document.write('<div style="font-size:3rem;">'+sum2(2,3)+'</div>');

    </script>

함수의 활용

함수를 호출할 때 인자로 this를 주면 nightDayHandler(self)함수 내에 포함되어 있는 input태그 자체가 인자로 함수에 전달됩니다. 함수는 self라는 파라미터로 인자로 전달받게 되고 self라는 값은 함수를 호출한 input태그가 됩니다. 따라서 클릭을 함으로 value가 night와 day로 변경이 됩니다. 

WEB
  
  
  

    
HTML
    
CSS
    
JavaScript

WEB
  
  
  

    
HTML
    
CSS
    
JavaScript

객체예고

객체는 변수와 함수를 정리정돈하기 위한 도구

function LinksSetColor(color){ //a태그 전체의 색을 변경

    var alist = document.querySelectorAll('a');

    var i = 0;

    while(i < alist.length){

      alist[i].style.color = color;

      i = i + 1;

    }

  }

  function BodySetColor(color){ //바디태그의 글씨색을 변경

    document.querySelector('body').style.color = color;

  }

  function BodySetBackgroundColor(color){ //바디태그의 배경색을 변경

    document.querySelector('body').style.backgroundColor = color;

  }

  function nightDayHandler(self){

    var target = document.querySelector('body');

    if(self.value === 'night'){

      Body.setBackgroundColor('black');

      Body.setColor('white');

      self.value = 'day';

      Links.setColor('powderblue');

    } else {

      Body.setBackgroundColor('white');

      Body.setColor('black');

      self.value = 'night';

      Links.setColor('blue');

    }

}

객체를 만들지 않았기 때문에 함수는 동작하지 않습니다.

객체(object)

객체의 쓰기와 읽기

<h1>Object</h1>

    <h2>Create</h2>

    <script>

      var coworkers = {

        "programmer":"egoing",

        "designer":"leezche"

      };

      document.write("programmer : "+coworkers.programmer+"<br>");

      document.write("designer : "+coworkers.designer+"<br>");

      coworkers.bookkeeper = "duru";

      document.write("bookkeeper : "+coworkers.bookkeeper+"<br>");

      coworkers["data scientist"] = "taeho";

      document.write("data scientist : "+coworkers["data scientist"]+"<br>");

    </script>

객체와 반복문

<h2>Iterate</h2>

<script>

    for(var key in coworkers) {

      document.write(key+' : '+coworkers[key]+'<br>');

    }

</script>

프로퍼티와 메소드(자바스크립트에서 객체는 함수도 담을 수 있습니다.)

<h2>Property & Method</h2>

    <script>

      coworkers.showAll = function(){

        for(var key in this) {

          document.write(key+' : '+this[key]+'<br>');

        }

      }

      coworkers.showAll();

    </script>

showAll함수 안에서 소속된 객체를 가리키는 약속된 기호를 this 

객체의 소속된 변수에 값으로 함수를 만들 수 있습니다.

객체의 소속된 함수를 메소드, 객체의 소속된 변수를 프로퍼티 

객체 활용

WEB
   
   

     
HTML
     
CSS
     
JavaScript
   
   
JavaScript
  

WEB
   
   

     
HTML
     
CSS
     
JavaScript
   
   
JavaScript
  

파일로 쪼개서 정리 정돈하기

수정하고자 하는 코드를 변경하면 코드가 실행되지만 여러 개의 코드가 있는 경우 각각의 코드를 변경하는 것이 쉬운 작업은 아닙니다.

.js파일로 따로 공통된 코드를 정의하여 <script src=”colors.js”></script> 구현하면 쉽게 처리할 수 있습니다. js파일 내에는 <script>태그가 들어가면 안됩니다.

.js파일에 따로 코드를 분류를 하게 되면 유지보수가 수월해집니다.

코드의 명확성이 높아지고 가독성이 높아지게 됩니다. 여러 개의 파일로 쪼개는 것이 파일을 정리정돈하는 방법입니다.

*웹 페이지에 다운로드된 파일은 컴퓨터에 저장되어 다음 접속 시에는 저장된 파일을 읽어 네트워크를 통하지 않게 합니다. 서버입장에서 비용을 절감하는 효과를 얻습니다. 사용자 입장에서 네트워크 트래픽을 절감하고 빠르게 웹 페이지를 볼 수 있는 효과가 있습니다.

라이브러리와 프레임워크(서로 협력하는 모델)

라이브러리는 재사용하기 쉽도록 정리정돈 되어있는 소프트웨어. (만들어진 것을 쓰는 것)

프레임워크는 만들고자 하는 것이 있을 때 무엇이냐에 따라 게임, 웹, 채팅 등

만들고자 하는 부분에 공통부분을 프레임워크 개성에 따라 다른 부분만 수정할 수 있도록 하는 것.

라이브러리(jQuery)

CDN(Content Delivery Network): 직접 라이브러리를 다운로드 받아 프로젝트 포함시켜 업로드하고 서비스하려면 비용이 듭니다. 많은 라이브러리가 CDN을 통해 자신들의 서버에 파일을 보관해 우리는 그것을 <script src=”.js”>를 통해 가져가는 방식으로 사용료까지 내줌으로 편한 작업입니다.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

var Links = {

   setColor:function(color){

$('a').css('color', color);

   }

 }

UI(User Interface) vs API(Application Programming Interface)

UI : 사용자가 조작 장치를 이용해 웹 애플리케이션을 사용하고 있는 것

 API : 경고창이 실행되는 것은 웹 브라우저를 만드는 사람이 경고창을 미리 만든 것, 조작 장치 alert을 API라고 합니다.

사용자는 UI, 프로그래머는 UI+API를 모두 사용, 자신만의 응용프로그램을 만들 수 있다.

수업을 마치며

Cookie 개인화된 서비스를 제공, offline web application 인터넷이 끊겨도 동작하고자 하는 앱

webRTC 화상통신, webGL 3차원 그래픽, webVR 가상현실

출처 : 생활코딩 강의