사용자가 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자리

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

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 가상현실

출처 : 생활코딩 강의