값으로서의 함수와 콜백(함수의 용도)

자바스크립트에서도 함수는 객체입니다. 즉, 함수 자체가 값이 될 수 있습니다.

var a = function(){ } a라는 변수에 함수가 담길 수 있습니다.

객체의 속성 값으로 담겨진 함수를 메소드(method)라고 부릅니다.

함수는 인자로 전달될 수 있고 리턴값(반환값)으로도 사용 가능합니다.

함수는 배열의 값으로 사용할 수 있습니다.

var process = [

    function(input){ return input + 10;},   //input[0] = 11

    function(input){ return input * input;}, //input[1] = 121

    function(input){ return input / 2;}    //input[2] = 60.5

];

var input = 1;

for(var i = 0; i < process.length; i++){

    input = process[i](input);

}

alert(input);

콜백

function sortNumber(a,b){

    // 위의 예제와 비교해서 a와 b의 순서를 바꾸면 정렬순서가 반대가 됩니다.

    return b-a;

}

var numbers = [20, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1];

alert(numbers.sort(sortNumber)); // array, [20,10,9,8,7,6,5,4,3,2,1]

콜백함수란 ? sort 기본적인 동작 방법을 변경할 수 있습니다. 즉 값으로서 함수를 사용할 수 있기 때문에 오리지널 함수의 동작방법을 값을 전달하는 것을 통해 완전히 바꿀 수 있는 것입니다.

콜백이 가능한 이유는 자바스크립트에서 함수가 값이기 때문에 콜백이 가능합니다.

비동기 처리

콜백은 비동기처리에서도 유용하게 사용됩니다. 시간이 오래 걸리는 작업이 있을 때 이 작업이 완료된 후에 처리해야 할 일을 콜백으로 지정하면 해당 작업이 끝났을 때 미리 등록한 작업을 실행하도록 할 수 있습니다. 다음 코드는 일반적인 환경에서는 작동하지 않고 서버 환경에서만 동작합니다.

대표적인 예로 AJAX(Asynchronous Javascript And XML) : 자바스크립트를 이용해 html코드를 이용해 화면에 출력

클릭 시 웹 페이지가 변경되지 않고 서버와 웹 브라우저가 내부적으로 조용히 통신하는 기법

Ajax는 웹이 단순히 문서에서 벗어나 이런 동작을 할 수 있는 애플리케이션으로 발전하게 한 단서입니다.

클로저

클로저(closure)는 내부함수가 외부함수의 맥락(context)에 접근할 수 있는 것입니다. 클로저는 자바스크립트를 이용한 고난이도의 테크닉을 구사하는데 필수적인 개념으로 활용됩니다.

function outter(){

    function inner(){

        var title = 'coding everybody';

        alert(title);

    }

    inner(); //'coding everybody' 출력

}

outter(); //'coding everybody' 출력

내부함수에서 외부함수의 지역변수에 접근 가능한 것이 클로저입니다.

function outter(){

    var title = 'coding everybody'; 

    return function(){       

        alert(title);

    }

}

var inner = outter();

inner(); //'coding everybody' 출력

외부함수의 지역변수에 접근 할 수 있는데 외부함수의 실행이 끝나서 외부함수가 소멸된 이후에도 내부함수가 외부함수의 변수에 접근 할 수 있습니다. 이러한 메커니즘을 클로저라고 합니다. 결과는 경고창으로 coding everybody를 출력할 것입니다.

private variable

객체 안의 함수가 있는 상태, 첫 번째 매개변수는 title, 매개변수는 함수 안에서 지역변수로 사용

get_title 메소드를 호출하면 title을 리턴합니다.

set_title 메소드는 _title이 title값을 변경합니다.

function factory_movie(title){

    return {

        get_title : function (){

            return title;

        },

        set_title : function(_title){

            title = _title

        }

    }

}

ghost = factory_movie('Ghost in the shell');

matrix = factory_movie('Matrix');

alert(ghost.get_title()); //'Ghost in the shell'

alert(matrix.get_title());//'Matrix'

ghost.set_title('공각기동대');

alert(ghost.get_title()); //'공각기동대'

alert(matrix.get_title()); //'Matrix'

ghost와 matrix는 private 변수에 객체를 담았습니다

private변수가 필요한 이유는 소프트웨어의 규모가 커질수록 많은 데이터가 존재하게 됩니다.

그 데이터를 누구나 수정 가능하다면 소프트웨어가 쉽게 망가질 수 있기 때문입니다.

출처 : 생활코딩 강의

자바스크립트 유효범위: 전역변수와 지역변수

유효범위(Scope)는 변수의 수명을 의미합니다.

var vscope = 'global';

function fscope(){

    alert(vscope); //global을 출력

}

fscope();

fscope함수는 함수 바깥에 선언된 vscope에 접근할 수 있습니다.

var vscope = 'global';                                        var vscope = 'global';

function fscope(){                                                        function fscope(){

    var vscope = 'local';                                       vscope = 'local';

    alert('함수안 '+vscope); //local을 출력                alert('함수안 '+vscope); //local을 출력

}                                                                  }

fscope();                                                         fscope();

alert('함수밖 '+vscope); //global을 출력                alert('함수밖 '+vscope); //local을 출력

var vscope = 'global';

function fscope(){

var vscope = 'local' //지역변수에 해당

 vscope = ‘local’ //역시 지역변수에 해당

}

fscope();

alert(vscope); //global을 출력

이미 var으로 vscope의 지역변수가 생성되었습니다.

전역변수는 사용하지 않는 것이 좋습니다. 여러가지 이유로 그 값이 변경될 수 있기 때문입니다.함수 안에서 전역변수를 사용하고 있는데, 누군가에 의해서 전역변수의 값이 달라졌다면 어떻게 될까요? 함수의 동작도 달라지게 됩니다. 이는 버그의 원인이 됩니다. 또한 함수를 다른 애플리케이션에 이식하는데도 어려움을 초래합니다. 변수를 선언할 때는 꼭 var을 붙이는 것을 습관화해야 합니다. 전역변수를 사용해야 하는 경우라면 그것을 사용하는 이유를 명확히 알고 사용해야합니다.

전역변수를 사용하는 법

MYAPP = {}                                         (function(){

MYAPP.calculator = {                                       var MYAPP = {}

    'left' : null,                                                MYAPP.calculator = {

    'right' : null                                               'left' : null,

}                                                                  'right' : null

MYAPP.coordinate = {                                       }

    'left' : null,                                                MYAPP.coordinate = {

    'right' : null                                                          'left' : null,

}                                                                             'right' : null

MYAPP.calculator.left = 10;                                            }

MYAPP.calculator.right = 20;                               MYAPP.calculator.left = 10;

function sum(){                                                MYAPP.calculator.right = 20;

    return MYAPP.calculator.left + MYAPP.calculator.right;     

function sum(){

}                                                                   return MYAPP.calculator.left + MYAPP.calculator.right;

document.write(sum());                                   }

                                                                document.write(sum());

                                                        }())

오른쪽 코드처럼 함수로 감싸주어 바로 호출할 수 있습니다. = 익명함수

Var MYAPP은 function()내에 있기 때문에 지역변수입니다.

이러한 코드는 자바스크립트에서 로직을 모듈화하는 일반적인 방법입니다.

자바스크립트 유효범위의 대상(함수)

for(var i = 0; i < 1; i++){                         for(int i = 0; i < 10; i++){

 var name = 'coding everybody';               String name = "egoing"; //name은 지역변수

}                                                       }

alert(name);                                         System.out.println(name); //에러가 납니다.

*함수의 중괄호 안에 선언된 변수만이 함수 안의 지역변수이므로 for, if 중괄호에 선언된 함수는 지역변수로의 의미를 가지 않습니다.

자바스크립트 정적 유효 범위

var i = 5; //전역 변수

function a(){

    var i = 10; //지역 변수

    b();

}

function b(){

    document.write(i); //b함수 내에 i라는 변수가 존재하지 않기 때문에 전역 변수를 찾게 된다.

}                         //사용될 때가 아니라 정의될 때의 전역 변수가 사용됩니다. 이를 정적

//유효범위 또는 렉시컬이라고 부릅니다.

a(); //실행 결과는 5

출처 : 생활코딩 강의

JavaScript

JavaScript는 웹페이지를 동적으로, 프로그래밍적으로 제어하기 위해서 고안된 언어입니다. 그렇기 때문에 오늘날 가장 중요한 플랫폼이라고 할 수 있는 웹브라우저에서 유일하게 사용할 수 있는 프로그래밍 언어입니다. 최근에 HTML5의 적용이 가속화되면서 지금까지 모바일 환경에서 네이티브 앱(안드로이드, IOS)으로 구현해왔던 기능이 웹에서도 대부분 구현할 수 있게 되고 있습니다. 웹이 크로스플랫폼이라는 점, 검색 가능하다는 점, 네이티브 디바이스를 제어할 수 있는 하드브리드 시스템(phonegap 등)이 존재한다는 점에서 웹의 중요함은 더욱 확대될 것입니다. 자연스럽게 웹에서 구동되는 유일한 언어인 JavaScript의 중요함도 점점 커질 것으로 예상됩니다.

자바스크립트의 문자 표현 방식

alert(“coding everybody”); 또는 alert(‘coding everybody’);

alert(“coding everybody’); -> 문법에러

typleof는 값의 데이터형을 알려주는 기능입니다.

typeof 1 = “number”

typeof “1” = “string”

문자에 대한 명령들

alert(“coding\neverybody”); : \n은 줄바꿈의 의미를 갖습니다.

alert(“coding”+”everybody”); : 문자와 문자를 더할 때 +를 이용합니다.

alert("coding everybody".length); : 문 자의 길이를 구할 때는 문자 뒤에 .length를 붙입니다.

변수

JavaScript에서 변수는 var로 시작합니다. (문자나 숫자 같은) 값을 담는 컨테이너로 값을 유지할 필요가 있을 때 사용합니다. 여기에 담겨진 값은 다른 값으로 바꿀 수 있습니다. 변수는 마치 (사람이 쓰는 언어인) 자연어에서 대명사와 비슷한 역할을 합니다.

var a = 1; alert(a+1);  //2

var a = 2; alert(a+1);  //3

var first = "coding";

alert(first+" everybody");

변수는 코드의 재활용성을 높여줍니다.

alert(100+10);

alert((100+10)/10);

alert(((100+10)/10)-10);

alert((((100+10)/10)-10)*10);

그런데 계산해야 할 값을 100이 아니라 1000으로 바꿔야 한다면 위의 코드를 모두 수정해야 합니다. 변수를 적용 사용한 코드입니다.

a = 100;

a = a + 10;

alert(a);

a = a / 10;

alert(a);

a = a - 10;

alert(a);

a = a * 10;     

alert(a);

출처 : 생활코딩 강의

언어를 배우다보면 Java, JavaScript, JSP등 헷갈릴텐데요.

특히 JavaScript와 JSP는 같은 의미로 생각하시는 분들이 많을 것 같아요.

(저도 그렇게 생각했답니다.....)

JSP는 서버에서 자원들(코드)을 사용하는 것이고 JavaScript는 클라이언트에서 자원들(코드)을 사용합니다.

기존의 Java언어를 사용하는 것에는 동일하지만

JSP는 웹 서버에서 실행되는 .JSP파일이라면 ,

JavaScipt는 <script>태그를 사용하여 표현하죠. 사용자의 웹 화면인 .HTML파일 입니다.

다시 말해 서버에서 실행되어 결과를 사용자에게 보여주는 방식이 JSP이고 

자바스크립트는 클라이언트(사용자)의 웹 브라우저 화면에 실행되어지는 방식입니다.

JSP는 서버 언어!

JavaScript는 클라이언트 언어!

라고 생각하면 편할 것 같네요!

개발 환경 구축

JSP를 실행 하기위해 필요한 개발 환경입니다.

1. JDK설치 

자바를 개발하기 위한 필수 도구로 자바 실행 및 디버깅을 위해 사용됩니다.

http://www.oracle.com/

오라클 홈페이지에 접속 후 네모 박스를 클릭해줍니다.

자바SE는 가장 널리 쓰이는 API입니다.

둘 중 아무거나 선택하여 JDK다운로드 페이지로 이동합니다.

Accept License Agreement를 체크 하고 자신의 운영체제에 맞는 버전을

선택하여 다운로드 합니다.

다운로드를 완료하고 next버튼을 누르면 설치가 완료됩니다.

2. 웹 컨테이너 

JSP와 서블릿을 실행시켜주기 위한 컨테이너로 톰캣을 설치해보겠습니다.

http://tomcat.apache.org/

톰캣 버전은 최신 버전보다 한 단계 낮은 버전을 사용합니다.

왜나하면 이전버전에는 이미 안정성이 검증되었기에 전버전을 많이 사용한다고 합니다. 

아래 사진과 같이 tomcat 8.0을 누르고 자신의 운영체제에 맞는 파일을 다운로드하여 설치합니다.

3. 코드를 작성하기 위한 개발 도구 - 이클립스

다운로드 버튼을 클릭합니다.

이클립스는 무료로 배포 중이나 DONATE버튼 도 있네요 

이클립스에 감사하신 분들은 기부를 해주셔도 좋을 것 같네요 ㅎㅎ

다운로드를 완료하고 실행하면 인스톨러가 뜨네요.

프로그래밍을 하기 위해 

Eclipse IDE for Java Developers 또는

Eclipse IDE for java EE Developers 둘 중 하나를 선택하여 설치합니다.

원하는 폴더 위치를 정해주면 설치 끝!

JSP(Java Server Pages)

 : HTML내에 자바 코드를 삽입하여 웹 서버에서 동적으로 웹 브라우저를 관리하는 언어입니다.

즉 웹 사이트를 보다 쉽게 구축할 수 있도록 만들어주는 스크립트 언어입니다.

JSP는 자바언어를 기반으로 하는 스크립트 언어로 자바 기능을 그대로 사용할 수 있다는 장점이 있습니다.

또한 자바 기반이기에 플랫폼에 독립적입니다. ( 운영체제가 상관없습니다.)

HTML 코드 속에 들어가는 자바 소스코드로 <% 자바코드 %> 또는 <%= 자바코드 =%> 형태로 사용합니다.

JSP(Java Server Page) 특징

-웹 프로그래머는 소스코드를 수정할 경우 디자인 작업에 신경쓰지 않아도 되기 떄문에 작업 효율이 올라갑니다.

-HTTP와 같은 프로토콜에 따라 클라이언트의 요청을 처리하고 응답합니다.

-대규모 애플리케이션을 구현할 때 사용되는 스프링 프레임워크와 연동이 가능합니다.

MVC2 구조를 제가 한 프로젝트에 접목시켜보았습니다.