[JSP] 서블릿(Servlet)

1. 서블릿(Servlet) - JAVA 코드로 HTML을 작성할 수 있도록 해주는 JAVA 프로그램 - 사용자가 서버에게 요청을 보낼 때 정적인 요청은 상관이 없지만 동적인 요청은 서버에서 못하기 때문에 웹 컨테이너에서 동적인 요청을 정적인 것으로 정제해서 응답해준다. - 그 안에는 서블릿 클래스라는 게 있고 그 클래스가 들어온 동적인 요청을 정적으로 HTML틀에 데이터까지 위치시켜서 그대로 보내준다. - 요청이 GET 방식이면 doGet메소드를 실행시키고 POST 방식이면 doPost를 실행시킨다. - 이 와 같이 서블릿에서 직접 HTML 틀까지 만들어서 응답으로 보내준다. - 이렇게 하나하나 쓰기 불편함으로 JSP를 쓰는 것이다. out.print(""); out.print(""); out.prin..

[JavaScript] jQuery

1. jQuery - 요소들을 선택하는 강력한 방법을 제공하고, 선택된 요소들을 효율적으로 제어할 수 있게 해주는 자바 스크립트 라이브러리 - 자바에서 JVM 느낌 - 예전에는 스크립트가 자바스크립트 외에도 다양하게 많았기 때문에 브라우저마다 코드가 달랐다. - 그때 나온 게 jQuery인데 여기에 코드를 쓰면 jQuery가 각 브라우저에 맞게 알아서 변환시켜준다. - 지금은 자바스크립트가 표준이 되었기 때문에 안 쓰는 추세이지만 여러 개의 태그 객체를 가져와서 for문을 돌려 하나하나 스타일을 줄 때와 같은 불편함을 해결해 주는 데는 jQuery만큼 좋은 게 없다. - jQuery를 사용하면 순수 JavaScript에 비해 속도가 느려진다. - 하지만 간결한 문법으로 인해 개발 속도 증가와 처리비용 감..

[JavaScript] DOM(문서 객체 모델), document 객체

1. DOM(Document Object Model) - 문서 객체 모델(DOM : Document Object Model) - XML이나 HTML 문서에 접근하기 위한 인터페이스, 문서 내의 모든 요소를 정의하고 각각의 요소에 접근하는 방법을 제공 - 자바 스크립트에서 HTML을 접근하기 위해서는 DOM을 사용 2. document 객체 - 웹 페이지 그 자체를 의미 - 웹 페이지에 존재하는 HTML 요소에 접근하고자 할 때에는 반드시 document 객체부터 시작 3. document 메소드 HTML 요소 선택용 - getElementById("아이디명") : 해당 아이디를 가진 요소를 선택해서 객체로 가져오는 함수 - getElementsByTagName("태그명") : 해당 태그인 요소들을 선택해..

[JavaScript] form 태그 접근, location 객체, history 객체

1. form 태그 접근 - name으로 객체를 찾을 때(간단히) -> id명으로도 역시나 찾을 수 있다.(document.getElementById()) let frm = document.joinForm; let inputTag = frm.in1; intputTag.value; --> 입력값 - Form 태그 안에 입력값에 대해서 유효성 검사 목적으로 접근 2. location 객체 - 현재 브라우저에 표시된 HTML 문서의 주소를 얻거나, 브라우저의 새 문서를 불러올 때 사용 가능 - location 객체의 프로퍼티와 함수를 이용하면 현재 문서의 URL 주소를 다양하게 해석하여 처리할 수 있음 location.href - 현재 페이지 URL 정보가 담겨있는 프로퍼티 - 대입을 통해 새로운 문자열을 넣..

[JavaScript] window 객체

1. window 객체 - 웹 브라우저의 창(window)을 나타내는 객체로, 대부분의 웹 브라우저에서 지원 - 자바스크립트의 모든 객체, 전역함수, 전역변수들을 자동으로 window객체의 프로퍼티가 되고 window 객체의 메소드는 전역함수, window 객체의 프로퍼티는 전역변수가 됨 --> windows는 생략 가능 2. window.onload - on : ~할 때, onload(어떤 문서가 로딩될 때) window.onload = function() { 문서가 로딩된 이후에 호출할 문장 } - 스크립트 언어는 위에서 아래로 해석되기 때문에 DOM에서 HTML 요소를 추출할 때 body보다 위에 있다면 해석 순서에서 문제가 생길 수 있음 - 이 경우 자바 스클비트 문서를 밑으로 옮겨야 하는데, h..

[JavaScript] 객체와 상속, 프로토타입

1. 객체 - 추상적인 개념이 실체화 된 것 - 프로퍼티(자바에서 필드)들로 이루어진 하나의 집합 2. 객체 선언 리터널을 이용한 객체 생성 - 장점 : 객체를 빠르고 간단하게 만들 수 있음 - 단점 : 비슷한 형태의 객체가 또 필요하다면 오히려 불편함(틀이 따로 없기 때문에) const 객체명 = { 프로퍼티1명:프로퍼티1값, 프로퍼티1명:프로퍼티1값, ..., 메소드명: function() { }, ... } - 객체 안에 있는 메소드 안에서 프로퍼티를 쓰기 위해서는 명시적으로 this를 써줘야 한다. 왜냐하면 프로퍼티는 변수가 아니기 때문에 this를 안 쓰면 프로퍼티와 이름이 같은 위에 선언된 변수를 쓰게 된다. 그렇기에 this를 명시적으로 적어줘야 한다. 생성자를 이용한 객체 생성 - 자바 스..

[JavaScript] 자바스크립트를 이용한 태그 객체 및 onclick

1. 태그 객체 - document.getElementById("아이디명") 을 이용해서 아이디명을 가진 태그를 객체로 가져오는 것이다. - 이것을 이용해 태그 안에 있는 내용을 바꾸거나 스타일을 바꿀수 있다. - input 태그에서 사용자가 입력한 내용을 받기 위해서는 input태그객체.value를 사용하면 된다. 내용 바꾸기 : 태그객체.innerHTML = "바꿀문자열"; 배경색 바꾸기 : 태그객체.style.background = "값"; --> 다른 CSS도 가능 input 태그에서 사용자가 작성한 값 : input태그객체.value 2. onclick - 태그 혹은 태그에서 버튼 타입을 사용 할 때 onclick을 사용하면 버튼을 눌렀을 때 일어나는 행동들을 정해준다. onclick = "함수..

[JavaScript] 함수(function)

1. 함수(function) - 자바 스크립트에서는 함수도 하나의 값 - 따라서 함수를 변수에 대입할 수 있음 - 다른 함수 내에 중첩되어 정의할 수 있음 함수 선언 방법 function 함수명(매개변수1, 매개변수2, ...) { 실행할 문장; return 리턴값; } 1 2 3 4 5 6 7 function f() { for (let i = 0; i

[JavaScript] 배열(Array), 빠른 for문

1. 배열(Array) - 배열 요소의 타입이 고정되어 있지 않으므로, 같은 배열에 있는 배열 요소끼리의 타입이 서로 달라도 됨 - 배열 요소의 인덱스가 연속적이지 않아도 되기 때문에 특정 배열의 방이 비어있을 수 있음, 비어있다면 그 방에는 undefined가 있음 - 자바 스크립트에서 배열은 Array 타입의 객체로 다뤄짐 2. 배열의 선언 및 길이 배열의 선언 let 배열명 = [값1, 값2, ...]; let 배열명 = new Array(값1, 값2, ...); let 배열명 = Array(값1, 값2, ...); 배열의 길이 배열명.length - console.dir() : 객체가 어떤 식으로 구성되어 있는지 보여주는 명령어 3. 배열의 요소 추가 및 삭제 배열의 요소 추가 배열명[인덱스] =..

[JavaScript] 대화상자(dialog), 제어문(조건문, 반복문), 간단한 예제

- window. 은 생략 가능 1. alert() - 사용자에게 간단한 메세지를 보여주고, 그에 대한 사용자에 확인을 기다림 - 확인을 누르면 undefined를 반환 2. confirm() - 사용자에게 간단한 메세지를 보여주고, 확인을 누르면 true, 취소를 누르면 false를 return함 - while(true)라 무한반복이기에 확인을 눌러 true를 반환시켜줘야만 탈출 할 수 있다. - 그래야 페이지를 볼 수 있다. 3. prompt() - 사용자에게 간단한 메세지를 보여주고, 사용자가 입력한 문자열 값을 return함 4. 제어문(조건문, 반복문) 조건문 - if if문 조건식 자리에 boolean 타입이 아닌 변수 하나만 쓰는 경우 해당 변수의 값이 존재한다면 true, 아니라면 fals..