안녕하세요. 상품화 제품을 개발해본적 있는 진쓰입니다.

자바스크립트 5장 함수의 개요 및 내장함수 블로그 포스팅 시작하겠습니다.


목 차

1. 함수 개념

2. 함수 구조

3. 함수의 호출, 리턴

4. 내장함수 - alert

5. 내장함수 -  prompt

6. 내장함수 - confirm




1.  함수의 개념

-함수란, 목적을 가진 루틴을 구성하는 부분. 호출을 통해서 실행되며, 반환값을 가진다.



2. 함수의 구조

   function  함수의 이름(매개변수, 매개변수…){


                    함수 수행문…


      }


크게 함수의 이름, 매개변수, 함수 수행문 으로 구성됩니다.

또한 예약어 function이 붙습니다.

매개변수는 필요에 따라 넣어도 안넣어도 됩니다.


 


3. 함수의 호출과 리턴


함수 호출

: 함수의 이름을 프로그램에 삽입합니다.


리턴(RETURN)

: 반환되는 값을 의미한다.


<html>

    <head>
        <title> 5장 예제 </title>
        <script language="javascript">
            function Max(x,y){      // 사용자로 부터 입력받은 x와 y를 비교해서 큰값을 반환하게 됩니다.
                 if (x>y)
                   return x;
                 else if( y>x)
                   return y;     
              }
        </script>
    </head>


    <body>
        <script language="javascript">
          var x,y,res;
               x = prompt("값을 입력하세요~");
               y = prompt("값을 하나 더 입력하세요~");
               x= parseInt(x);  //사용자로부터 값을 받을수있는 내장함수 입니다.
               y= parseInt(y);

               res = Max(x,y);   //Max라는 함수를 호출하였습니다. 사용자로부터 입력받은 x와 y를 Max 함수 파라메터로 넘기게 됩니다.
               document.write(res);

        </script>   
    </body>

</html>

 


3과 10을 입력하였을때 결과화면은 10이 출력됨을 확인하실 수 있습니다.


문제


- 두 개의 정수값과 연산자를 입력받아 계산하는 프로그램을 작성하시오.


<html>

<head>

<title> 5장 예제 </title>

<script language="javascript">

function calc(a,b,p){        

switch (p){

  case '+' :

return (a+b);

  case '-' :

return (a-b);

  case '*' :

return (a*b);

  case '/' : 

return (a/b);

}   

 }


</script>

</head>


<body>

<script language="javascript">

var a,b,p, res;

  a = prompt("값을 입력하세요.~");

  b = prompt("값을 하나더 입력하세요.~");

  p = prompt("연산자를 입력하세요.~");

  a=parseInt(a);     //웹을 통해서 입력받는 prompt 내장함수는 전부 문자로 받기 때문에 parseInt로 숫자로 바꿔줘야합니다.

  b=parseInt(b);

  res = calc(a,b,p);

  document.write(res);

</script>

</body>

</html>

 

처음입력에 3

두번째입력에 8

세번째 입력에 + 

를 넣으면 11이 출력됨을 확인하실 수 있습니다.




4. 내장함수 alert

-단순히 메시지를 나타내고자 할 때 사용된다.

-사용법
: alert(“문자열”)

<HTML>

<HEAD><TITLE>Java Script Program</TITLE>

<SCRIPT LANGUAGE="JavaScript">

 

function OK()

{

  alert(" 예 배고파요. ");

}


function no()

{

  alert("아니오 배불러용.");

}


</SCRIPT>

</HEAD>

<BODY>

배고프십니까

<FORM>

<INPUT TYPE="button" VALUE="예" onClick="OK()">    //예를 누르면 OK() 함수가 호출된다.

<INPUT TYPE="button" VALUE="아니오" onClick="no()">//아니오를 누르면 no()함수가 호출된다.

</FORM>

</BODY>

</HTML>

 



5. 내장함수 prompt


내장함수 prompt

-사용자의 입력을 받아 자바스크립트로 인식시킬때 사용하는 내장함수이다.


-prompt(“문자열”)

 


<HTML>

<HEAD>


<SCRIPT LANGUAGE="JAVASCRIPT" >

<!--

    var su;

    su=prompt("값을 입력 하세요");    //유저로부터 문자열을 입력받습니다.

    document.write("입력된 값은  " + su + "입니다.")

//-->

</SCRIPT>


</head>

<BODY>


</BODY>

<HTML>

 

.



6. 내장함수 confirm

- 확인과 취소 버튼을 가지는 메시지 상자입니다.




- 확인을 선택하면 true 반환 합니다.

- 취소를 선택하면 false 반환 합니다.


<HTML>

<HEAD>

<SCRIPT LANGUAGE="JAVASCRIPT"> 


  var res;


  res = confirm("계속하겠습니까?");


  if (res == true) 

    document.write("진행을 선택했습니다.");

  else

    document.write("취소 되었습니다.");

</SCRIPT>

</HEAD>


<BODY>

</BODY>

</HTML>

 





감사합니다. 일요일 마무리 잘하세용. :)


'웹 (WEB) > 자바스크립트' 카테고리의 다른 글

자바스크립트 Date 객체 (7장)  (0) 2017.06.13
자바스크립트 객체, 배열 (6장)  (2) 2017.06.12
자바스크립트 제어문2 반복문(for, while) (4장)  (0) 2017.06.09
자바스크립트 제어문(1), if, switch (3장)  (0) 2017.06.09
자바스크립트 연산자(2장)  (0) 2017.06.09

안녕하세요 2년차 개발자 진쓰입니다.

전략패턴, Strategy pattern 에 대해서 포스팅 시작하겠습니다.


- 의도

다양한 알고리즘이 있을 때, 이들을 각각의 클래스로 캡슐화하여 만들고, 알고리즘 대체가 가능하도록 하고자 할 때 사용합니다.


- 활용

알고리즘 행위가 조금씩 다를 뿐, 개념적으로 관련된 많은 클래스들이 존재할 때 활용합니다.


알고리즘 변형이 빈번하게 필요한 경우 활용합니다.



예제상황과 코드로 배워보도록 하겠습니다.


- 예제상황



많은 데이터를 검색하려고 한다.

검색을 할 때, 상황에 따라 다양한 정렬알고리즘을

바꿔가면서 적용하려고 한다.

 




- 코드리뷰


코드구성


 Sort.java

전략을 바꿀 수 있는 매개체 인터페이스입니다.

 import java.util.List;

public interface Sort {
    public void sort(List <Object> al);
}



 MergeSort.java

Merge sort 전략 클래스입니다.

 

import java.util.List;
public class MergeSort implements Sort {
    @Override
    public void sort(List<Object> al) {
       System.out.println("Merge Sort!!!");
    }
}


 QuickSort.java

Quick sort 전략 클래스입니다.

 import java.util.List;

public class QuickSort implements Sort {
    @Override
    public void sort(List<Object> al) {
       System.out.println("Quick Sort!!!");       
    }
}



 SortEngine.java

Sort sorter는 현재 전략을 가르키는 객체변수이다.

Main에서 SortEngine을 생성하고 상황에 따라 전략을 set한다.

 


import java.util.ArrayList;
import java.util.List;
public class SortEngine {
    private Sort sorter;    
    public SortEngine(Sort ss){
       sorter = ss;
    }
    public void setSorter(Sort ss){
       this.sorter = ss;
    }
    
    public List<Object> search(){
       //sort할, array 값을 구성.
       List list = new ArrayList<Object>();      
       
       sorter.sort(list);
       return list;
    }  
}


.



 Main.java

1. Quick sort 전략을 생성하여, SortEngine에 넣고 search() 호출합니다.

2. Merge sort 전략을 생성하고, SortEngin에 넣고 search() 호출합니다.


전략을 바꿔가며(알고리즘을 바꿔가며) serach를 수행중이다.

 


public class Main {
    public static void main(String[] args) {
       
       //엔진생성
       SortEngine se;
       //퀵소트 Strategy 생성
       Sort st = new QuickSort();       
       //엔진생성 + 퀵소스 Strategy 설정.
       se = new SortEngine(st);       
       //엔진이 퀵소트를 실행
       se.search();     
       
       //머지소트 Strategy 생성
       st = new MergeSort();
       
       //엔진에 머지소트 Strategy 설정
       se.setSorter(st);       
       //엔진 머지소트 실행
       se.search();
       
    }
}




결과화면







- UML


> UML 설명


전략(알고리즘)을 나타내는 Sort 인터페이스가 있고, QuickSort와 MergeSort각각의 전략이 있다.

SortEngine은 Sort를 has a 관계로 가지고있다.

SortEngine의 전략(알고리즘)은 Main에서 setSorter()를 통해서 바뀌게되고

변경된 전략으로 search()를 수행한다.



- 정 리

전략 패턴을 사용하면?


> 관련 알고리즘 집합을 형성할 수 있습니다.


> 알고리즘의 선택 혹은 대체가 가능합니다.


> 알고리즘 객체 수가 증가 합니다.



고생하셨습니다 좋은 하루되세요 :)


'소프트웨어공학 > 디자인패턴 - JAVA' 카테고리의 다른 글

프록시 패턴 (Proxy pattern)  (0) 2020.05.31
추상 팩토리 패턴 (Abstract factory pattern)  (0) 2020.05.09
어댑터 패턴 Adapter Pattern  (0) 2017.06.10
상태패턴 State Pattern  (0) 2017.06.10
팩토리 메소드 Factory method  (0) 2017.06.10

안녕하세요. 살빼고싶은 개발자 진쓰입니다. 어댑터 패턴에 대해서 포스팅 시작하겠습니다.



- 의도

이미 제공되는 기능이 형태가 달라, 필요로하는 형태로 변경하고자 할 때 사용합니다.



- 활용

기존의 클래스를 사용해야 하나 인터페이스가 수정되어야 하는경우 사용합니다.  (인터페이스 수정은 지양해야됩니다.)


기존 라이브러리 모양을 달리하여 재사용하고자 할 경우 사용합니다. (라이브러리를 직접 수정할수는 없죠.)



역시 예제상황과 코드리뷰로 배워보도록 하겠습니다.



- 예제 상황

-LED Framework를 제공되어졌다. 

LED를 끄고 RGB 색상으로 켜고 하는 메소드들을 제공받았다.(Framework)

하지만, 우리하드웨어는 켜있는 상태에서 다른 색상을 켜면 색이 섞이는 현상이 생겨서, 무조건 한번 끄고 색상을 켜는 기능을 추가로 하고싶다.


Framework자체를 수정해버리면, 하드웨어가 바뀌면 또다시 Framework를 되돌려야 하는 부담감이 있다. 




- 코드리뷰


소스코드 구성




 ILedFramework.java

개발자가 제공받을 LedFramework.java 의 api를 추출하여 인터페이스를 생성했습니다. 

 public interface ILedFramework {

    //기존메소드, 기존의기능에서 수정할 메소드 구현, 완전 새로운 메소드 구현
    public void ledOff();
    public void ledOn(String color);    
    public void ledBlink(String color1);
}



 LedFramework.java

개발자가 받은 API입니다. 문제가 있죠?(색이 섞이는 현상코드로 구현되어있음)

 //adatee

public class LedFramework {
    public int state = 0;
    public String curColor;
    
    public void ledOn(String color){
       if(state==0){
           System.out.println("LED "+color+" ON");
           curColor=color;
           state=1;
       }
       else{
           if(curColor.equals(color)){
               System.out.println("LED "+color+" ON");
               state=1;
               return;
           }
           //색이 섞인 경우발생.
           
           if(color.equals("RED")){
               curColor=curColor+" RED";
               System.out.println("LED "+curColor+" ON");        
           }
           else if(color.equals("BLUE")){
               curColor=curColor+" BLUE";
               System.out.println("LED "+curColor+" ON");
           }
           else if(color.equals("GREEN")){
               curColor=curColor+" GREEN";
               System.out.println("LED "+curColor+" ON");    
           }   
           
       }
    }
    public void ledOff(){
       System.out.println("Led Off");   
       state = 0;
       curColor="";
    }
    
}



 LedFrameworkAdpater.java

1. LedframeWork는 implements 하였습니다. 

2. LedFramework(색이 섞이는 문제가 있는부분) 를 has a 관계로 가지고있습니다. 

3. ledOn을 보시면 기존의 ledOn을 호출하기전 ledOff를 먼저 호출하도록 수정하였습니다. 

4. ledBlink라는 새로운 기능을 추가하기도 했습니다.


 public class LedFrameworkAdpater implements ILedFramework{

    //1. 확장하려는 클래스를 멤버변수로 선언.
    public LedFramework led;
    //2. 생성자에서 생성.
    public LedFrameworkAdpater(){
       led = new LedFramework();
    }
    
    //3. 기존메소드, 기존의기능에서 수정할 메소드 구현, 완전 새로운 메소드 구현
    @Override
    public void ledOff() {
       led.ledOff();
    }
    @Override
    public void ledOn(String color) {
       ledOff();
       led.ledOn(color);
    }
    @Override
    public void ledBlink(String color1) {
       for(int i=0;i<10;i++){
           ledOff();
           led.ledOn(color1);
       }
    }
    
    
}



 Main.java

led프레임워크를 그대로 사용하는 경우와, 어댑터 패턴을 적용한 객체를 생성해서 사용하는 예제를 볼 수 있다. 

 public class Main {

    public static void main(String[] args) {
       // TODO Auto-generated method stub
       LedFramework led = new LedFramework();
       led.ledOn("RED");
       led.ledOff();
       led.ledOn("RED");
       led.ledOn("BLUE");
       led.ledOn("GREEN");
       led.ledOff();
       led.ledOn("GREEN");
       
       System.out.println("LED프레임워크 -> 어댑터 패턴 적용\n\n\n\n");
    
       ILedFramework newLed = new LedFrameworkAdpater();
       newLed.ledOff();
       newLed.ledOn("RED");
       newLed.ledOn("BLUE");
       newLed.ledOn("GREEN");
       newLed.ledBlink("GREEN");
    }
}



결과화면


Adpater패턴 적용 전 


 Red를 켜고 Blue를 켜버리면, Red와 Blue가 섞이게 된다.

 Adpater패턴 적용 후


색이 안섞이는것을 볼 수있다.

 

 


.


- UML

> UML 설명

ILedFramework 인터페이스로, 기존에 제공받은 LedFrameWork api와 더불어 유저가 추가하고싶은 ledBlink()메소드도 선언하였습니다.



LedFrameworkAdpater.java 는 ILedFramework를 implements하였으며 프레임워크(LedFramework)를 has a 관계로 가지고있습니다.

ledOn은 기존의 기능에 새로 추가된 내용을 덧 붙혔으며, ledBlink는 기존 LedFramework가 없는 기능입니다.


어댑터 패턴의 장점을 보실 수 있습니다.(플랫폼에 알맞게 수정, 확장)




- 정리

지금 포스팅된 어댑터 패턴은 Object Adapter 패턴입니다. 일반적으로 많이 사용됩니다.


오브젝트 어댑터 패턴을 사용하면, Adaptee 클래스의 하위 클래스에 대해서도 소스코드 변경없이, 이를 활용하여 새로운 기능 추가가 편리해집니다.




정독해주셔서 감사합니다.

항상 정성을 다해서 포스팅 하도록 하겠습니다 :)

'소프트웨어공학 > 디자인패턴 - JAVA' 카테고리의 다른 글

추상 팩토리 패턴 (Abstract factory pattern)  (0) 2020.05.09
전략 패턴 Strategy pattern  (0) 2017.06.10
상태패턴 State Pattern  (0) 2017.06.10
팩토리 메소드 Factory method  (0) 2017.06.10
싱글톤 패턴 Singleton pattern  (0) 2017.06.09

+ Recent posts

티스토리툴바