02/10 JavaScript, Babel

왜 배열로 할까요??

동적 처리가 가능 하기 때문에

동적처리가 가능하면 몸값이 올라간다^^

어제했던 인기 25 리스트에 동영상 연결하기

JSP

jsp에서 제공하는 include를 사용하기

네이버같은 컨셉으로 실습을 해보자/

네이버에서 연합뉴스 날씨 환율 계속 바뀌는것처럼.

<% %>

: 스크립틀릿

JSP에서 여기는 자바땅이다.

setInterval() 사용법

웹페이지의 특정 부분을 주기적으로 업데이트해줘야 하거나, 어떤 API로 부터 변경된 데이터를 주기적으로 받아와야 하는 경우가 있는데요. 이럴 때는 자바스크립트의 setInterval() 함수를 사용할 수 있습니다.

setInterval() 함수는 어떤 코드를 일정한 시간 간격을 두고 반복해서 실행하고 싶을 때 사용합니다. 함수 API는 setTimeout() 함수와 대동소이한데요. 첫번째 인자로 실행할 코드를 담고 있는 함수를 받고, 두번째 인자로 반복 주기를 밀리초(ms) 단위로 받습니다.

아래의 코드는 JSP입니다^^

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script	src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script>
	const autoReload = () => {
		console.log('autoReload 호출');
		$.ajax({
          type: "GET",
          url: "newsList.jsp",
          success: function (data) {
            $("#d_news").html(data);
            
          },
        });
	}
</script>
</head>
<body>
	<script type="text/javascript">
		$(document).ready(() => {//문서가 열리자마자 실행되는
			start = () => {
				setInterval(autoReload, 2000);
			}
			start();
		})
	</script>
	<div id="d_news">뉴스 준비중...</div>
<%
	System.out.print("<font color = 'red' size=18></font>");
%>
</body>
</html>
<!-- 
 html(단방향, 변수선언이나 제어문 지원 안됨,이벤트 처리 불가)은 순차적으로 실행
 자바스크립트의 코드의 위치에 따라서 document.querySelector(id or class or elementname)
 항상 선언이 먼저이다.
 자바스크립트 위치
 1)head안에 올 수 있다.-전변선언, 함수선언할때(호출할때 실행됨)
 	만일 이것을 지연하고 싶을때-defer-미룬다-html, DOM Tree그린다.
 2)boby안에 올 수 있다.-호출하지 않아도 실행됨
 단, 함수로 선언된 부분은 제외
 
 

 -->

HTML DOM Tree 를 그릴때 querySelector를 사용할 수 있다.

화면의 역할은 듣기이다. 사용자가 입력하는것을 듣는다.

ID와 비번을 적고 누른다->Request

http프로토콜을 서버 지원 안한다.

Servelt

자바스크립트로 화면을 그릴 수 있다???없다???

document.write("<font color = 'red' size=18></font>")

쓸수는 있는데 굳이...

html

(단방향, 변수선언이나 제어문 지원 안됨,이벤트 처리 불가)은 순차적으로 실행된다.
자바스크립트의 코드의 위치에 따라서 document.querySelector(id or class or elementname)
항상 선언이 먼저이다.
자바스크립트 위치
1)head안에 올 수 있다.-전변선언, 함수선언할때(호출할때 실행됨)
만일 이것을 지연하고 싶을때-defer-미룬다-html, DOM Tree그린다.
2)boby안에 올 수 있다.-호출하지 않아도 실행됨
단, 함수로 선언된 부분은 제외

write는 어디다가 쓰는건가요? ->브라우저

자바는 브라우저에 쓸 수 없다.

자바에서는 왜 안될까?

System.out.println("<b>굵은 글씨</b>")--->안됨

JSP

out.print();

이거는 된다. 여기서의 out은 브라우저에 써준다.

톰캣 서버에서 브라우저에 돌아가게 해준다.

text/html

->mime type이다.

확장자에 속지 마세요!!

mime타입이 뭔지 따져보는것이 중요하다.

JSP라고 쓰고 html이라고 읽을수도 있고

JSP라고 쓰고 Json이라고 읽어야될때가 있다.

image/png

image/jpg

text/html

text/css

text/ module

text/babel

Gson은

Gson은 Java에서 Json을 파싱하고, 생성하기 위해 사용되는

구글에서 개발한 오픈소스입니다.

Java Object를 Json 문자열로 변환할 수 있고, Json 문자열을 Java Object로 변환할 수 있습니다.

ajax

//ajax함수는 jquery.min.js가 제공하는 api이다.
//ajax함수는 결국 XMLHttpRequest();
//ajax.open("GET",url,true)
//ajax.send() --> 값을 보내기

url로 간다.

JSON은 2000년대 초에 널리 사용된 방식인 플래시나 자바 애플릿 등의 브라우저 플러그인을 사용하지 않는 무상태, 실시간 서버 대 브라우저 통신 프로토콜의 요구에 의거하여 성장하였다.[4]

시작이 좋아