Filter API란?

 

 

 Filter API 특징

 

 

 

 출처

 

 

+ 강의 교재

Web Application에서 DB 연동_MyBatis

 

 MyBatis Architecture

1) MyBatis 비 Web 환경 (Standalone 환경)

[Project] 마우스 우클릭 → [Build Path] → [Configure Build Path...] → [Java Build Path] → [Libraries] → [Add External JARs...]  ojdbc6_g.jar & mybatis.jar 추가

 

2) MyBatis Web 환경 

jar file 2개 설정
[Project] → [WebContent] → [WEB-INF] → [lib] → ojdbc6_g.jar & mybatis.jar 복사

DB 연동에 필요한 4가지 정보를 저장한 파일 : jdbc.propertis 
xml file 2개
* 환경설정 : Configuration.xml
* SQL 설정 : XXXMapper.xml
Configuration.xml file을 읽는 Class → MySqlSessionFactory.java

 

 출처

 

 

+ 강의 교재

'AI Bootcamp > Servlet JSP' 카테고리의 다른 글

[Servlet JSP] Session Tracking  (0) 2022.02.10
[Servlet JSP] Filter API  (0) 2022.02.10
[Servlet JSP] Web Application에서 DB 연동_JDBC  (0) 2022.02.09
[Servlet JSP] Scope & Scope Life Cycle  (0) 2022.02.08
[Servlet JSP] Servlet 정의  (0) 2022.02.08

Web Application에서 DB 연동_JDBC

 JDBC Architecture

1) JDBC 비 Web 환경 (Standalone 환경)

[Project] 마우스 우클릭 → [Build Path] → [Configure Build Path...] → [Java Build Path] → [Libraries] → [Add External JARs...] → ojdbc6_g.jar 추가

 

2) JDBC Web 환경 

[Project] → [WebContent] → [WEB-INF] → [lib] → ojdbc6_g.jar 복사

 출처

 

 

+ 강의 교재

'AI Bootcamp > Servlet JSP' 카테고리의 다른 글

[Servlet JSP] Filter API  (0) 2022.02.10
[Servlet JSP] Web Application에서 DB 연동_MyBatis  (0) 2022.02.09
[Servlet JSP] Scope & Scope Life Cycle  (0) 2022.02.08
[Servlet JSP] Servlet 정의  (0) 2022.02.08
[Servlet JSP] 500 Error  (0) 2022.02.08

Scope

 

저장 기능 + Life Cycle
Scope 종류 4가지

 

 Scope

 

  1. Context/Application Scope - javax.servlet.ServletContextContext/Application scope begins when a webapp is started and ends when it is shutdown or reloaded. Parameters/attributes within the application scope will be available to all requests and sessions. The Context/Application object is available in a JSP page as an implicit object called application.
    In a servlet, you can the object by calling getServletContext(). or by explicitly calling getServletConfig().getServletContext().
     
  2. Request Scope - javax.servlet.http.HttpServletRequestRequest scope begins when an HTTP request is received by a servlet and end when the servlet has delivered the HTTP response. With respect to the servlet life cycle, the request scope begins on entry to a servlet’s service() method and ends on the exit from that method. Request object is available in a JSP page as an implicit object called request.
    A request object attribute can be set in a servlet and passed to a JSP within the same request.
  3. Session Scope -javax.servlet.http.HttpSessionA session scope starts when a client (e.g. browser window) establishes connection with a webapp and continues till the point where the client, again read browser window, closes. Hence, session scope may span across multiple requests from the same client. In a servlet, you can get Session object by calling request.getSession() and in a JSP session.
     
  4. JSP page Scope - javax.servlet.jsp.PageContextThe page scope restricts the scpoe and lifetime of attributes to the same page where it was created. It is available in a JSP page as an implicit object called pageScope .
     
1. 컨텍스트/애플리케이션 범위 - javax.servlet.ServletContext
컨텍스트/애플리케이션 범위는 웹앱이 시작될 때 시작되고 종료되거나 다시 로드될 때 끝난다. 
애플리케이션 범위 내의 매개변수/속성은 모든 요청 및 세션에서 사용할 수 있다. 
컨텍스트/응용 프로그램 개체는 JSP 페이지에서 application 이라는 암시적 개체로 사용할 수 있다 . 
서블릿에서 getServletContext()를 호출하여 객체를 만들 수 있다 . 
또는 명시적으로 getServletConfig().getServletContext() 를 호출한다. 

2. 요청 범위 - javax.servlet.http.HttpServletRequest
요청 범위는 서블릿이 HTTP 요청을 수신할 때 시작되고 서블릿이 HTTP 응답을 전달했을 때 끝난다.
서블릿 수명 주기와 관련하여 요청 범위는 서블릿의 service() 메서드에 들어갈 때 시작하여 해당 메서드에서 나갈 때 끝난다. 요청 객체는 JSP 페이지에서 요청 이라는 암시적 객체로 사용할 수 있다 .
요청 객체 속성은 서블릿에서 설정되고 동일한 요청 내에서 JSP로 전달될 수 있다.

3. 세션 범위 -javax.servlet.http.HttpSession
세션 범위는 클라이언트(예: 브라우저 창)가 웹앱과 연결을 설정할 때 시작되어 클라이언트가 다시 브라우저 창을 읽는 지점까지 계속된다. 따라서 세션 범위는 동일한 클라이언트의 여러 요청에 걸쳐 있을 수 있다. 서블릿에서 request.getSession() 을 호출 하고 JSP 세션 에서 Session 객체를 가져올 수 있다 .

4. JSP 페이지 범위 - javax.servlet.jsp.PageContext
페이지 범위는 속성의 scpo 및 수명을 생성된 동일한 페이지로 제한한다.
JSP 페이지에서 pageScope 라는 암시적 객체로 사용할 수 있다 .

① Application Scope : ServletContext → getServletContext( );

② Session Scope : HttpSession → requestgetSession( );

③ Request Scope : HttpServletRequest → doGet(request,  );

④ Page Scope : (x) 자주 사용 안함 

 

 Scope Life Cycle

 

 

1) Servlet Context 생명주기는 web application과 동일

2) Http Session 생명주기는 Web Browser와 동일

3) HttpServletRequest 생명주기는 요청 후 응답까지

 

 

 출처

 

* Servlet 범위 : http://www.umsl.edu/~siegelj/CS4010/Servlets/scope.html

* Servlet Life Cycle : https://velog.io/@woo00oo/%EC%84%9C%EB%B8%94%EB%A6%BF

 

+ 강의 교재

Servlet이란?

DataBase (데이터 베이스)는 많은 사람들이 공유해서 사용할 목적으로 통합 관리되는 정보(Data)의 집합을 의미

 

 Servlet 특징

 

 

 

 출처

 

 

+ 강의 교재

정보: 서블릿 [FirstServlet]을(를) 가용하지 않은 상태로 표시합니다. 2월 08, 2022 11:25:03 오전 org.apache.catalina.core.StandardWrapperValve invoke 심각: 서블릿 [FirstServlet]을(를) 위해 할당하던 중 예외 발생 java.lang.ClassNotFoundException: com.servlet.FirstServlet at org.apache.catalina.loader.WebappClassLoaderBase.loadClass(WebappClassLoaderBase.java:1415) at org.apache.catalina.loader.WebappClassLoaderBase.loadClass(WebappClassLoaderBase.java:1223) at org.apache.catalina.core.DefaultInstanceManager.loadClass(DefaultInstanceManager.java:533) at org.apache.catalina.core.DefaultInstanceManager.loadClassMaybePrivileged(DefaultInstanceManager.java:514) at org.apache.catalina.core.DefaultInstanceManager.newInstance(DefaultInstanceManager.java:149) at org.apache.catalina.core.StandardWrapper.loadServlet(StandardWrapper.java:1071) at org.apache.catalina.core.StandardWrapper.allocate(StandardWrapper.java:789) at org.apache.catalina.core.StandardWrapperValve.invoke(StandardWrapperValve.java:128) at org.apache.catalina.core.StandardContextValve.invoke(StandardContextValve.java:97) at org.apache.catalina.authenticator.AuthenticatorBase.invoke(AuthenticatorBase.java:542) at org.apache.catalina.core.StandardHostValve.invoke(StandardHostValve.java:135) at org.apache.catalina.valves.ErrorReportValve.invoke(ErrorReportValve.java:81) at org.apache.catalina.valves.AbstractAccessLogValve.invoke(AbstractAccessLogValve.java:698) at org.apache.catalina.core.StandardEngineValve.invoke(StandardEngineValve.java:78) at org.apache.catalina.connector.CoyoteAdapter.service(CoyoteAdapter.java:366) at org.apache.coyote.http11.Http11Processor.service(Http11Processor.java:639) at org.apache.coyote.AbstractProcessorLight.process(AbstractProcessorLight.java:65) at org.apache.coyote.AbstractProtocol$ConnectionHandler.process(AbstractProtocol.java:847) at org.apache.tomcat.util.net.NioEndpoint$SocketProcessor.doRun(NioEndpoint.java:1680) at org.apache.tomcat.util.net.SocketProcessorBase.run(SocketProcessorBase.java:49) at org.apache.tomcat.util.threads.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1191) at org.apache.tomcat.util.threads.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:659) at org.apache.tomcat.util.threads.TaskThread$WrappingRunnable.run(TaskThread.java:61) at java.lang.Thread.run(Thread.java:748)

0-0. Windows Key → 시스템 환경 변수 편집 검색 후 실행 

0-1. [시스템 속성] → [고급] → [환경 변수] 선택

0-2. [환경 변수] → [시스템 변수] → [새로 만들기] → CATALINA_HOME 생성 및 경로 입력

1. [환경 변수] → [시스템 변수] → [새로 만들기]
2. [시스템 변수 편집] → 변수 이름 : CATALINA_HOME / 변수 값 : C:\특정 경로\apache-tomcat-8.5.75
3. [시스템 변수 편집] →확인 버튼 마우스로  클릭
4. [환경 변수] → 확인 버튼 마우스로 클릭

0-3. [시스템 속성] → [고급] → 확인 버튼 마우스로 클릭

========================================================================

1. [Eclipse] → [Project] → [Clean...]

2. [Eclipse] → [Project] → [Properties] → [Java Build Path] → [Order and Export] → [JRE System Library] Check

3. [Eclipse] → [Project] → [Build Automatically] Check

 

* 참고 링크 : 

https://maternalgrandfather.tistory.com/entry/%EC%9E%90%EB%B0%94-javalangClassNotFoundException-%EC%98%A4%EB%A5%98-%EC%97%84%EC%B2%AD-%EA%B0%84%EB%8B%A8%ED%95%9C-%ED%95%B4%EA%B2%B0%EB%B2%95

 

(자바) java.lang.ClassNotFoundException 오류 엄청 간단한 해결법

자바에서 java.lang.ClassNotFoundException 오류 해결하는 방법입니다. 자바 프로그래밍할 때, java.lang.ClassNotFoundException 라는 오류가 뜨곤 합니다. 잘못한 게 없는 것 같은데 말이죠. Error: Could not..

maternalgrandfather.tistory.com

 

servlet 공부하다가 에러가 발생하여 결과 확인을 못하고 있다.

http://archive.apache.org/dist/tomcat/tomcat-connectors/native/

 

Index of /dist/tomcat/tomcat-connectors/native

 

archive.apache.org

 

1. tcnative-1.dll 파일을 복사하면 된다고 하여 해보니 다음 에러 발생

심각: APR 기반의 Apache Tomcat Native 라이브러리가 호환되지 않는 버전 [1.1.20]이(가) 설치되어 있습니다. Tomcat은 버전 [1.2.14]을(를) 요구합니다.

2. 버전을 맞춰서 다시 실행해보니 아래와 같이 에러 발생

Can't load IA 32-bit .dll on a AMD 64-bit platform

 

3. tcnative-1.dll 1.2.14 version 64비트 파일로 다시 복사 후 실행 결과 아래와 같은 에러 발생

경고: APR 기반 Apache Tomcat Native 라이브러리를 로드하지 못했습니다. 보고된 오류는 [C:\Program Files\Eclipse Adoptium\jdk-8.0.312.7-hotspot\bin\tcnative-1.dll: Can't load IA 32-bit .dll on a AMD 64-bit platform]입니다. java.lang.UnsatisfiedLinkError: C:\Program Files\Eclipse Adoptium\jdk-8.0.312.7-hotspot\bin\tcnative-1.dll: Can't load IA 32-bit .dll on a AMD 64-bit platform
2월 07, 2022 1:05:36 오후 org.apache.catalina.core.ApplicationContext log 정보: 서블릿 [WorldServlet]을(를) 가용하지 않은 상태로 표시합니다. 2월 07, 2022 1:05:36 오후 org.apache.catalina.core.StandardWrapperValve invoke 심각: 서블릿 [WorldServlet]을(를) 위해 할당하던 중 예외 발생 java.lang.ClassNotFoundException: com.servlet.WorldServlet at org.apache.catalina.loader.WebappClassLoaderBase.loadClass(WebappClassLoaderBase.java:1415) at org.apache.catalina.loader.WebappClassLoaderBase.loadClass(WebappClassLoaderBase.java:1223) at org.apache.catalina.core.DefaultInstanceManager.loadClass(DefaultInstanceManager.java:533) at org.apache.catalina.core.DefaultInstanceManager.loadClassMaybePrivileged(DefaultInstanceManager.java:514) at org.apache.catalina.core.DefaultInstanceManager.newInstance(DefaultInstanceManager.java:149) at org.apache.catalina.core.StandardWrapper.loadServlet(StandardWrapper.java:1071) at org.apache.catalina.core.StandardWrapper.allocate(StandardWrapper.java:789) at org.apache.catalina.core.StandardWrapperValve.invoke(StandardWrapperValve.java:128) at org.apache.catalina.core.StandardContextValve.invoke(StandardContextValve.java:97) at org.apache.catalina.authenticator.AuthenticatorBase.invoke(AuthenticatorBase.java:542) at org.apache.catalina.core.StandardHostValve.invoke(StandardHostValve.java:135) at org.apache.catalina.valves.ErrorReportValve.invoke(ErrorReportValve.java:81) at org.apache.catalina.valves.AbstractAccessLogValve.invoke(AbstractAccessLogValve.java:698) at org.apache.catalina.core.StandardEngineValve.invoke(StandardEngineValve.java:78) at org.apache.catalina.connector.CoyoteAdapter.service(CoyoteAdapter.java:366) at org.apache.coyote.http11.Http11Processor.service(Http11Processor.java:639) at org.apache.coyote.AbstractProcessorLight.process(AbstractProcessorLight.java:65) at org.apache.coyote.AbstractProtocol$ConnectionHandler.process(AbstractProtocol.java:847) at org.apache.tomcat.util.net.NioEndpoint$SocketProcessor.doRun(NioEndpoint.java:1680) at org.apache.tomcat.util.net.SocketProcessorBase.run(SocketProcessorBase.java:49) at org.apache.tomcat.util.threads.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1191) at org.apache.tomcat.util.threads.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:659) at org.apache.tomcat.util.threads.TaskThread$WrappingRunnable.run(TaskThread.java:61) at java.lang.Thread.run(Thread.java:748)

 

4. tcnative-1.dll 파일 버전을 1.2.30으로 복사하니 console에서 에러는 안뜬다.

 

정보: APR 기반의 Apache Tomcat Native 라이브러리의 예전 버전 [1.2.14](이)가 설치되어 있습니다. Tomcat은 최소 버전으로서 [1.2.30]을(를) 추천합니다.

 

5. 실행 결과는 동일하게 404 에러가 뜸

설정 다시 확인해봐야 될 듯

==================================================================

마지막 설정

6. [Eclipse] → [Window] → [Preferences] 

7. [Pregerences] → [Java] → [Compiler] → [Errors/Warnings] → [Deprecated and restricted API] → [Forbidden reference (access rules)] : Error - Warning으로 변경 → [Apply and Close]

 

404 에러 잡느라고 하루종일 걸렸다.

* 참고 링크 : https://jellypudding.tistory.com/entry/%EC%9D%B4%ED%81%B4%EB%A6%BD%EC%8A%A4%EC%97%90%EC%84%9C-servletapijar-%EC%9D%B8%EC%8B%9D%EB%AA%BB%ED%95%A0%EB%95%8C-%ED%95%B4%EA%B2%B0%EB%B0%A9%EB%B2%95

JavaScript Variable

 

 Const 상수

* const는 재할당 불가능

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">

	// 상수
	const n = 100;
	n = 200; // 변경 불가
    // Uncaught 
    // TypeError: Assignment to constant variable.
	
	
</script>
</head>
<body>

</body>
</html>

 

 Data 자동 형변환

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
	<script type="text/javascript">
		// 1. 문자열과 산술연산자 연산
			console.log("10" + 3); // 연결
			console.log("10" - 3);
			console.log("10" * 3);
			console.log("10" / 3);
			
		// 2. true/false가 아닌 임의의 값도 논리값으로 처리 가능하다.
		// false로 처리되는 값 : 0, "", NaN, null, undefined
		// true로 처리되는 값 : 위 5가지를 제외한 나머지 값은 true로 처리된다.
		if(""){
			console.log("true");
		}else{
			console.log("false"); //0, "" 빈문자열, undefined, NaN false로 찍힌다.
		}
	
	</script>

</head>
<body>

</body>
</html>

 

 

See the Pen JavaScriptVariable by DevYJShin (@devyjshin) on CodePen.

 

 

 

 

 typeof 연산자

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">

	var name ="홍길동";
	var age =20;
	var height= 179.9;
	var weight =69.5;
	var isMarried = true;
	var phone=["010","011"];
	var email=["naver@naver.com","naver@gmail.com"];
	var address = null;  // null은  값이 정해져 있지 않는 경우
	
	var pets={ 
			"cat":"야오옹",
			"dog":"멍머엉"
	};
	var f = function(){};
	var f2 = null;
	var f3;
	
	console.log(typeof name);		// "string"
	console.log(typeof age);		// "number"
	console.log(typeof height);		// "number"
	console.log(typeof weight);		// "number"
	console.log(typeof isMarried);		// "boolean"
	console.log(typeof phone);		// "object"
	console.log(typeof email);		// "object"
	console.log(typeof address);		// "object"
	console.log(typeof pets);		// "object"
	console.log(typeof cat);		// "object"
	console.log(typeof dog);		// "object"
	console.log(typeof f);			// "function"
	console.log(typeof f2);			// "object"
	console.log(typeof f3);			// "undefined"



</script>
</head>
<body>

</body>
</html>

 var

 

javascript ES5버전까지의 변수 선언 방식

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	// var 키워드
	
	// 변수 선언
	var num;
	console.log("var:", num); //undefined
	
	// 변수 초기화
	num = 10;
	console.log("var:", num); //10
	
	num = "홍길동";
	console.log("var:", num); //홍길동
	
</script>
</head>
<body>

</body>
</html>

 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	// var 키워드
	
	// 변수 선언
	// 변수 초기화
	// 1. var는 변수명 중복이 가능하다.
	var num = 10;
	var num = 10;
	console.log("var:", num); //undefined
	
	// 2. 함수 scope
	
	if(true){
		var m = 20;
		console.log("블럭안:", m);
	}
	console.log("블럭밖:", m);

	function fun() {
		var x = 10;
		console.log("fun:", x);
	}
	fun();
	// console.log(x); //에러 , 함수 블록 불러서
		
	console.log("///////////////////")
	// 3. 호이스팅
	console.log(n); // undefined
	var n = 10;
	console.log(n); // 10
	
	
	
	
</script>
</head>
<body>

</body>
</html>

 

 

 let

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	// let 키워드 (ES6)
	
	// 변수 선언
	let num;
	console.log("let:", num); //undefined
	
	// 변수 초기화
	num = 10;
	console.log("let:", num); //10
	
	num = "홍길동";
	console.log("let:", num); //홍길동

</script>
</head>
<body>

</body>
</html>

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	// let 키워드 (ES6)
	
	// 변수 선언
	// 변수 초기화
	// 1. let은 변수명 중복이 안된다.
/* 	let num = 10;
	let num = 20; // 에러 이유?
	console.log("let:", num);  *///undefined
	//Uncaught SyntaxError: Identifier 'num' has already been declared
	
	// 2. 블럭 scope
	
	if(true){
		let m = 20;
		console.log("블럭안:", m);
	}
	/* console.log("블럭밖:", m); 에러이유? 블럭 안에서 선언된 것은 안에서만 사용 가능*/
	// Uncaught ReferenceError: m is not defined
    // at let2.html:23
	
    function fun() {
		let x = 10;
		console.log("fun:", x);
	}
	fun();
	// console.log(x); // 에러이유? 블럭 안에서 선언된 것은 안에서만 사용 가능

 	console.log("///////////////////")			
	// 3. 호이스팅 불가 
	/* console.log(n); */ // 에러이유? hosting을 수행하지만 초기화 되기 전을 참조
	let n = 10;
	console.log(n);

</script>
</head>
<body>

</body>
</html>

 

 

 

 

 

See the Pen JavaScriptDataType by DevYJShin (@devyjshin) on CodePen.

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<script type="text/javascript">

	// 1. 기본형
	console.log("수치(정수):", 20);
	console.log("수치(실수):", 3.14);
	
	console.log("문자(하나의문자):", 'A', "A");
	console.log("수치(문자열):", 'ABC', "ABC");
	
	console.log("논리데이터:", true, false);
	console.log("undefined(초기화 되지 않은 상태):", undefined);
	console.log("null(값이 없음):", null);
	console.log("NaN(Not a Number):", NaN);
	
	// 2. 참조형
	console.log("객체:(객체배열)", [10,20,30], ["a", "b"], [10, "a"]);
	console.log("객체:(JSON객체)", {"name":"홍길동", "age":20});
	
	// ES6
	// 클래스
	class Person{
		// 생성자
		constructor(name, age)
		{
			this.name = name;
			this.age = age;
		}
	}
	
	var p = new Person("홍길동", 20);
	
	console.log("클래스:", p.name, p.age)
	console.log("함수(익명함수):", function(){});
	
</script>

</head>
<body>

</body>
</html>

'AI Bootcamp > JavaScript' 카테고리의 다른 글

[JavaScript] Variable  (0) 2022.01.29
[JavaScript] script 작성 위치 정리 2  (0) 2022.01.29
[JavaScript] script 작성 위치 정리  (0) 2022.01.29

 

 

See the Pen JavaScriptBasic2 by DevYJShin (@devyjshin) on CodePen.

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<script type="text/javascript">
	window.onload=function(){
		console.log("head 태그 안에서 p태그: ", document.getElementById("userid")); // 접근하는 방법
	};
</script>

</head>
<body>
	<script type="text/javascript">
		// 자바 스크립트 코드 작성 
		// 인터 프리터 - 순차적 실행 
		// DOM 생성 후 접근 가능
		console.log("body 태그 안에서 p태그 위: ", document.getElementById("userid")); // 접근하는 방법
	</script>

	<p id="userid">홍길동</p>


	<script type="text/javascript">
		// 자바 스크립트 코드 작성
		console.log("body 태그 안에서 p태그 밑: ", document.getElementById("userid")); // 접근하는 방법
	</script>
</body>
</html>

 

window.onload = 함수 
→ 실행 시점은 HTML DOM TREE가 모두 실행된 후에 실행된다.
HTML DOM TREE가 모두 실행 : body 안의 모든 태그가 실행

See the Pen JavaScript_Basic by DevYJShin (@devyjshin) on CodePen.

 

 

 

script 작성은 <head></head>에서 작성하는 것을 많이 사용한다.

 

<html>
<head>

	<script></script>	<!-- 1. 가장 많이 사용 -->
    
    <script src = "scripttest.js"></script> <!-- 2. 외부에서 가져올 경우 -->
</head>
<body>


	<script></script>   <!-- 3.  body 안에서 scipt 작성할 경우 하단 </body> 전에 작성  
    					페이지 로딩을 더 빠르게 하기 위해 어중간한 위치면 
                        		Java Script 때문에 페이지 열리는 속도가 느려짐 -->
</body>
</html>

DOM(Document Object Model) ?

DOM(Document Object Model)은 문서 객체 모델로 XML, HTML 문서의 각 항목을 계층으로 표현하여 생성, 변형, 삭제할 수 있도록 돕는 인터페이스이다. W3C의 표준이다.

 

 DOM TREE

 

<html>
	<head>
    	<title>Hello</title>
    </head>
    <body>
    	<p>aaa</p>
        <p>bbb</p>
        <span id="x">ccc</span>
        <span id="y">ddd</span>
        <a href="https://www.naver.com">네이버</a>
    </body>
</html>

 출처

 

DOM 정의 -  https://ko.wikipedia.org/wiki/%EB%AC%B8%EC%84%9C_%EA%B0%9D%EC%B2%B4_%EB%AA%A8%EB%8D%B8

https://post.naver.com/viewer/postView.nhn?volumeNo=25195764 

 

+ 강의 교재

'AI Bootcamp > HTML' 카테고리의 다른 글

[HTML] Eclipse에서 HTML 시작  (0) 2022.01.25
[HTML] Eclipse Apache Tomcat 연동  (0) 2022.01.24

+ Recent posts