Dolphins의 HelloWorld

Event 브라우저에서는 많은 이벤트가 발생한다. 화면의 크기를 마우스로 조절할 때, 스크롤을 할 때, 마우스로 이동하거나 무언가를 선택할 떄도 이벤트가 발생한다. HTML엘리먼트별로 어떤 이벤트가 일어났을 때 특정행위를 하고싶다면 대상 엘리먼트를 찾고 자바스크립트로 구현하면 된다. 이벤트 등록 이벤트를 등록하기 위해 표준적으로 addEventListener함수를 사용한다. 여기서 addEventListener함수의 두번째 인자는 함수이다. 이 함수는 나중에 이벤트가 발생할 때 실행되는 함수로 이벤트핸들러 또는 이벤트리스너라고 한다. 실습을 통해 addEventListener가 작동하는 모습을 확인해보자. 이렇게 html코드를 작성한 후 querySelector을 통해 속성을 찾아 이벤트를 발생시키는 함..

DOM(Document Object Model) 브라우저에서는 HTML코드를 DOM이라는 객체형태의 모델로 저장한다. 이렇게 저장된 정보를 DOM Tree라고 한다. 결국 HTML element는 Tree 형태로 저장된다. 복잡한 DOM Tree를 탐색하기 위해 JavaScript로 탐색 알고리즘을 구현하면 너무 힘들다. 그래서 브라우저에서는 DOM이라는 개념을 통해서, 다양한 DOM API를 제공한다. 브라우저는 DOM Tree를 찾고 조작하는 걸 쉽게 도와주는 여러가지 메서드를 제공한다. getElementById() ID 정보를 통해서 찾을 수 있다. 한번 아마존 사이트에 들어가서 이 메소드를 이용해서 찾아보자. 위의 사진에서 보면 메뉴에서 Cart위에 숫자를 나타내는 부분의 id가 "nav-car..

브라우저 개발을 하다보면, window라는 객체가 있다. window에는 많은 메서드들이 존재하며, 아래처럼 사용할 수 있다. setTimeout은 인자로 함수를 받고 있으며, 보통 나중에 실행되는 함수를 콜백함수라고 부른다. 자바스크립트는 함수를 인자로 받을 수 있는 특징을 가진다. 또한 함수를 반환할 수도 있다. setTimeout의 실행은 비동기(asynchoronous)로 실행되어 동기적인 다른 실행이 끝나야 실행이 된다. 실제 코드와 결과값을 통해 알아보자. 결과에서 볼 수 있는것과 같이 다른 실행이 모두 끝난 후 function이 실행되는 것을 볼 수 있다. 이것은 setTimeout의 두번째 인자로 몇초의 시간을 주는가와는 무관하다. 출처 : edwithhttps://www.edwith.or..

함수 함수는 여러개의 인자를 받아서, 그 결과를 출력한다. 자바스크립트에서 특이한 점은 만약 파라미터의 갯수와 인자의 갯수가 일치하지 않아도 오류가 나지 않는다는 점이다. 예시를 통해 살펴보자. 첫번째 경우에 인자를 넣어주지 않음에도 결과가 나오는것을 볼 수 있다. 결과값을 보면 기본적으로 firstname이 undefined라고 돼있는것을 볼 수 있는데 고로 선언되어 있고 할당돼있지 않은 변수는 undefined라고 나온다 라는것을 알 수 있다. 세번째 경우에서 필요로 하는 인자보다 인자가 많이 들어갔음에도 불구하고 에러가 나지 않는 모습을 볼 수 있다. 함수 - 함수표현식 함수는 아래에 있는 printName과 같이 표현할 수도 있다. 그러나 이렇게 표현하면 함수선언문과 달리 선언과 호출순서에 따라서..

자바스크립트의 비교, 반복 문자열은 다른 언어의 것과 다른것이 없기 때문에 간단히 예제만 보고 넘어가겠다. if문 switch문 for문 이러한 문법들에 대해 헷갈리거나 궁금한 사항이 생긴다면 MDN사이트를 참조하도록 하자 https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#switch%EB%AC%B8 문자열처리 기본적으로 자바스크립트의 문자와 문자열은 같은 타입으로 모두 문자열이다. 문자열을 처리할 수 있는 몇가지 메소드가 있다. 구분자를 중심으로 분할해주는 split 메소드 , 특정문자를 대체해주는 replace 메소드 공백을 제거해주는 trim메소드를 활용한 예시를 살펴보고 마무리하겠다. ..

자바스크립트의 버전 - 자바스크립트 버전은 ECMAScript(줄여서 ES)의 버전에 따라 결정되고, 이를 자바스크립트 실행 엔진이 반영한다. - 2018년을 중심으로 ES6을 지원하는 브라우저가 많아서 몇 년간 ES6 문법이 표준으로 쓰이고 있다. - ES6은 ES5문법을 포함하고 있어 하위호환성 문제가 없으나 feature별로 지원하지 않는 브라우저가 있을 수는 있다. 변수 변수는 var, let, const로 선언할 수 있다. 어떤것을 사용하는가에 의해서 scope, 즉 변수의 유효범위가 달라진다. ES6 이전까지는 var를 사용하여 변수를 선언할 수 있다. 크롬의 개발자 도구에서 console에 들어가 테스트를 한번 해보자. a에 변수가 잘 할당되는 것을 볼 수 있고 var로 선언했을 때 재할당이..

WAS는 웹 브라우저로부터 Servlet요청을 받으면 - 요청할 때 가지고 있는 정보를 HttpServletRequest객체를 생성하여 저장한다. - 웹 브라우저에게 응답을 보낼 때 사용하기 위하여 HttpServletResponse 객체를 생성한다. - 생성된 HttpServletRequest, HttpServletResponse 객체를 서블릿에게 전달한다. HttpServletRequest - http프로토콜의 request정보를 서블릿에게 전달하기 위한 목적으로 사용 - 헤더정보, 파라미터, 쿠키, URI, URL 등의 정보를 읽어 들이는 메소드를 가지고있다. - Body의 Stream을 읽어들이는 메소드를 가지고있다. HttpServletResponse - WAS는 어떤 클라리언트가 요청을 보냈는..

서블릿의 라이프사이클을 이해하기 위한 간단한 실습을 해보자. LifecycleServlet이라는 이름을 가진 서블릿을 생성할 것이고 HttpServlet의 3가지 메소드를 오버라이딩 할 것이다. - init() - service(request, response) - destroy() 메소드가 호출이 되면 콘솔에 print가 되도록 다음과 같이 코드를 작성해보고 실행해보겠다. package examples; import java.io.IOException; import javax.servlet.ServletConfig; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.h..

http://dolphins-it.tistory.com/117 이 링크에서와 같은 방식으로 servlet을 만들것이다. 차이점이 있다면 위와 같이 version을 3.0 미만으로 설정하고 web.xml을 생성하는 것이다. 3.0spec 이상에서는 어노테이션이 생성이 됐고 그 어노테이션에 작성해준 URL 로 Request를 받아 서블릿이 실행이 됐다 하지만 3.0spec 미만에서는 어노테이션이 없으며 대신 web.xml에 다음과 같은 소스가 있다. 이 소스를 보면 servlet-mapping 안에 있는 url-pattern에 있는 URL을 통해 request를 받는다. 그러면 바로 위에있는 servlet-name과 같은 것을 안에서 찾는다 만약 servlet안에 같은 이름을 가진것이 있다면 servlet-..

버전에 따른 Servlet 작성 방법 - Servlet 3.0 spec 이상에서 사용하는 방법 - web.xml 파일을 사용하지 않는다. - 자바 어노테이션(annotation)을 사용 실습 Dynamic WebProject 를 생성하는 버튼을 클릭한 후 기본적으로 선택되는 버전인 3.1을 선택한다. 그 후 Next를 눌렀을 때 다음과 같은 항목을 볼 수 있는데 서블릿이 컴파일되면 이 컴파일된 클래스 파일은 이 디렉토리에 들어온다. 위 화면은 Next를 누르면 나오는 마지막 화면이다. Context root가 의미하는 것은 우리가 설정하기로 한 URL인 http:// localhost:8080/exam31/ten 에서 URL을 요청할 때 exam31이라는 URL이 들어가게하는 것이다. 밑에는 체크박스가 ..