본문 바로가기

WEB

[JS] JS Tutorial

반응형

[주요 정리]

- event

onmouseover
onclick

 

- text

txt.slice(, )

txt.replace(, )

toUpperCase()

toLowerCase()

 

- array

fruits.pop()

fruits.push()

fruits.splice(, )

fruits.sort()

indexOf()

 

- date

const d = new Date();
year = d.getFullYear();

month = d.getMonth();

d.setFullYear(2020); //year를 2020으로 바꿈

 

-Math

Math.max(, )

 

- getElementById / getElementsByTagName / getElementsByClassName

document.getElementById("demo").innerHTML

document.getElementsByTagName("p")[0].innerHTML="Hello";

document.getElementsByClassName("class1")[0].innerHTML="Hello";

document.getElementById("image").src = "pic_mountain.jpg";

document.getElementById("demo").style.color = "red";

//Use the eventListener to assign an onclick event to the <button> element

document.getElementById("demo").addEventListener("click", myFunction);

 

 

 

 

 

 

 

 

 

 

1. Introduction

1) getElementById()

document.getElementById("demo").innerHTML = "Hello JavaScript";

--> demo를 id로 가진 HTML 요소를 찾아 컨텐츠를 Hello JavaScript로 바꾼다.

document.getElementById("demo").style.fontSize = "35px";

--> demo를 id로 가진 HTML 요소를 찾아 글자크기를 35px로 바꾼다.

document.getElementById("demo").style.display = "none";

--> demo를 id로 가진 HTML 요소를 찾아 숨긴다.

document.getElementById("demo").style.display = "block";

-->  demo를 id로 가진 HTML 요소를 찾아 보이게 한다.

 

2) 자바스크립트 function

"호출"될 때 실행할 수 있는 JavaScript 코드 블록. 사용자가 버튼을 클릭할 때와 같이 "이벤트"가 발생할 때 함수를 호출할 수 있다.

 

3) HTML 페이지 내의 JS

<head>, <body> 어디든 사용 가능.

 

4) 외부 JS

js 파일을 따로 만들고, 아래와 같은 코드를 HTML에 포함.

<script src="myScript.js"></script>

 

 

 

 

 

2. JSP API

1) JSP API

두 개의 패키지로 구성.

javax.servlet.jsp

javax.servlet.jsp.tagext

 

2) javax.servlet.jsp package

두 개의 인터페이스와 클래스가 있습니다

two interfaces : JspPage / HttpJspPage

classes : JspWriter / PageContext / JspFactory / JspEngineInfo / JspException / JspError

 

3) JspPage interface

JSP specification에 따라 생성된 모든 서블릿 클래스는 JspPage 인터페이스를 구현해야 한다.

JspPage interface는 서블릿 인터페이스를 확장. 두가지 life cycle methods 제공.

 

<Methods of JspPage interface>

(1) public void jspInit() : JSP의 수명 주기 동안 JSP 페이지가 요청될 때 한 번만 호출. 초기화를 수행. 서블릿 인터페이스의 init() 방법과 동일.

(2) public void jspDestroy() : JSP 수명 주기 동안 JSP 페이지가 삭제되기 전에 한 번만 호출. 일부 정리 작업을 수행.

 

4) HttpJspPage interface

HttpJspPage 인터페이스는 JSP의 수명 주기 방법 하나를 제공. JspPage 인터페이스를 확장.

<Method of HttpJspPage interface>

public void _jspService() : JSP 페이지에 대한 요청이 컨테이너에 올 때마다 호출. 요청을 처리하는 데 사용. 밑줄 _은 이 메서드를 재정의할 수 없음을 나타낸다.

 

 

3. Creating JSP in Eclipse IDE with Tomcat server

1) Create the dynamic web project

File Menu -> New -> dynamic web project -> write your project name e.g. first -> Finish

2) Create the JSP file in eclipse IDE

the project by clicking the + icon -> right click on WebContent -> New -> jsp -> write your jsp file name e.g. index -> next -> Finish

3) Start the server and deploy the project

Right click on your project -> Run As -> Run on Server -> choose tomcat server -> next -> addAll -> finish

 

 

 

4. JSP scripting elements

scripting elements는 jsp 내부에 Java 코드를 삽입할 수 있는 기능을 제공. 스크립팅 요소에는 세 가지 유형. scriptlet tag / expression tag / declaration tag.

1) JSP scriptlet tag : JSP에서 Java 소스 코드를 실행하는 데 사용

<% java source code %>

2) JSP expression tag : 태그 내에 배치된 코드는 응답의 출력 스트림에 기록. 데이터를 쓰기 위해 writeout.print()가 필요하지 않다. 주로 변수나 방법의 값을 인쇄하는 데 사용.

<%= statement %>

3) JSP declaration tag : 필드 및 메서드를 선언하는 데 사용. 태그 내부에 작성된 코드는 자동 생성된 서블릿의 service() method 외부에 배치. 각각의 요청에 따라 메모리를 얻지 못한다.

<%! field or method declaration %>

(1) Difference between JSP Scriptlet tag and Declaration tag

 

 

 

 

 

 

 

5. JSP Implicit Objects

9개의 jsp 암묵적 개체가 있다. 이러한 개체는 모든 jsp 페이지에서 사용할 수 있는 웹 컨테이너에 의해 생성된다.

사용 가능한 암시적 개체는 Out, Request, Config, Session, Application 등.

 

1) JSP out implicit object

버퍼에 데이터를 쓰기 위해 JSP는 명명된 암시적 객체를 제공. object of JspWriter.

서블릿의 경우 PrintWriter out=response.getWriter();를 해줘야 하지만, JSP는 그냥 out.print("~~")하고 바로 써주면 된다.

2) JSP request implicit object

HttpServletRequesti, 즉 웹 컨테이너에 의해 각 jsp 요청에 대해 생성된 암시적 개체.

매개 변수, 헤더 정보, 원격 주소, 서버 이름, 서버 포트, 콘텐츠 유형, 문자 인코딩 등과 같은 요청 정보를 얻는 데 사용.

jsp request scope에서 속성을 설정, 가져오기 및 제거하는 데도 사용.

String name = request.getparameter("uname");

 

3) JSP response implicit object

HttpServletResponse 유형의 암시적 객체. HttpServletResponse 인스턴스는 각 jsp 요청에 대한 웹 컨테이너에 의해 생성.

다른 리소스에 대한 리디렉션 응답, 오류 전송 등과 같은 응답을 추가하거나 조작하는 데 사용.

 

4) JSP config implicit object

ServletConfig 유형의 암시적 개체. 특정 JSP 페이지에 대한 초기화 매개 변수를 가져올 수 있다. 각 jsp 페이지에 대한 웹 컨테이너에 의해 생성. 일반적으로 web.xml 파일에서 초기화 매개 변수를 가져오는 데 사용.

 

 

5) JSP Application implicit object

서블릿 컨텍스트 유형의 암시적 객체.

ServletContext의 instance는 응용 프로그램 또는 프로젝트가 서버에 배포될 때 웹 컨테이너에 의해 한 번만 생성.

Application을 사용하여 구성 파일(web.xml)에서 초기화 매개 변수를 가져올 수 있다. 응용 프로그램 범위에서 특성을 가져오거나 설정 또는 제거하는 데도 사용.

 

 

6) JSP Session

HttpSession 유형의 암시적 개체. Java 개발자는 이 개체를 사용하여 속성을 설정, 가져오기 또는 제거하거나 세션 정보를 가져올 수 있다.

 

 

7) pageContext implicit object

PageContext 클래스의 암시적 개체. 다음 범위 중 하나에서 속성을 설정, 가져오기 또는 제거할 수 있다. page / request / session / application. 페이지 범위는 기본 범위.

 

 

8) page implicit object

Object 클래스의 암시적 개체. 자동 생성된 서블릿 클래스의 참조에 할당.

Object page=this;

page를 사용하려면 서블릿 형식으로 캐스팅해야 한다. <% (HttpServlet)page.log("message"); %> 이렇게.

Object 유형이기 때문에 이 개체를 jsp에서 직접 사용할 수 있기 때문에 덜 사용. <% this.log("message"); %>이렇게.

 

 

9) exception implicit object

java.lang.Throwable class의 암시적 객체. 예외를 인쇄할 수 있다. 그러나 오류 페이지에서만 사용할 수 있다.

 

 

 

 

728x90
반응형

'WEB' 카테고리의 다른 글

[STS4] Dynamic Web Project가 없을 때  (0) 2021.08.05
[WEB] 웹 개발을 위한 SQL 기본 정리  (0) 2021.07.25
[CSS] CSS 적용 우선순위  (0) 2021.07.13
[HTML] a태그 - 하이퍼링크 밑줄 없애기  (0) 2021.07.13
[WEB] CSS 총정리  (0) 2021.07.11