프로그래머 도전기 80일차

프로그래머가 될거야!

by Choyee 2023. 12. 5. 22:40

오늘은

오늘은 오전에 수업을 하고

점심을 먹은 후에

오후에는 온전히 프로젝트를 하는 시간을 가졌습니다

팀원들 모두 집중해서 열심히 해주어서 다행이라는 생각이 들었고

메인 페이지를 만들어서 제공한 만큼

프론트엔드 파트에서는 제일 바쁜 사람이 되어서

책임이 점점 무거워지는 것 같다는 생각이 들었습니다

학원 수업

<동기와 비동기>
동기 - 시간을 맞춤(종속)
비동기 - 시간을 맞추지 않음(독립) Ajax기술
Asynchronous Javascript Xml(Json)
페이지 이동없이 데이터처리가 가능
서버의 처리를 기다리지 않고 비동기 요청이 가능하다
a.html -> 회원 폼 -> servlet(contoller). Main.java -> main.jsp
제이쿼리의 함수(라이브러리)
jquery 3.7js 임포트
${document).ready(function(){
    $.ajax({
        페이지 요청 -> 데이터 처리
    });
});

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ajax예제</title>
<script src="../resources/js/jquery-3.7.1.js"></script>  <!-- $표현식 사용 가능해짐 -->
<script>
	// 파일이 실행되면 제목이 파랑색으로 바뀜
	$(document).ready(function(){
		//alert("test");
		$("h3").css("color","blue");
	});
	
	// 전송 버튼을 누르면 message박스에 메시지 출력
	
	function fnProcess(){
		// ajax로 구현
		// JS 객체({key:value})
		// 서블릿에 요청(매핑 주소)
		$.ajax({
			type: "get",       // 전송 방식
			dataType: "text",  // 데이터 유형
			url: "/jwbook2/ajax/ajax1",
			data: {message: "Hello~ Ajax!!"},   // message 속성이 서블릿에 전달됨
			success: function(data){    // 서블릿에서 응답이 오면 데이터 출력됨
				$("#message").text(data).css("margin-top", "10px");
			},
			error: function(){
				alert("에러 발생!!");
			}
		});
	}
</script>
</head>
<body>
	<h3>ajax(에이젝스, 아작스) 테스트</h3>
	<button type="button" onclick="fnProcess()">전송</button>
	<div id="message"></div>
</body>
</html>

package ajaxtest;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet(asyncSupported = true, urlPatterns = { "/ajax/ajax1" })
public class Ajextest1 extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// 한글 인코딩 처리
		request.setCharacterEncoding("utf-8");
		// 컨텐츠 응답
		response.setContentType("text/html; charset=utf-8");
		// 메세지 받기
		String message = request.getParameter("message");  // 데이터 "message"
		PrintWriter out = response.getWriter();
		// 메세지 보내기
		out.print(message);   // 변수 message
	}
}

쇼핑몰 페이지 만들기

메인 페이지에 스크립트 코드를 추가하여 제일 큰 사진이 자동으로 넘어가거나 수동으로 넘길 수 있게

기능을 주었습니다

let mainPic = ["img/main-pic1.jpg", "img/main-pic2.jpg", "img/main-pic3.jpg", "img/main-pic4.jpg", "img/main-pic5.jpg"];
let picIdx = 0;
let mainProdPic = document.querySelector(".main-prod-pic");
let selPic = [".pic1", ".pic2", ".pic3", ".pic4", ".pic5"];

showSlide();


function showSlide() {
    mainProdPic.src = mainPic[picIdx];
    picIdx++;
    if(picIdx == mainPic.length){
        picIdx = 0;
    }
    setTimeout(showSlide, 3000);
}

function nextSlide() {
    mainProdPic.src = mainPic[picIdx];
    picIdx++;
    if(picIdx == mainPic.length){
        picIdx = 0;
    }
}

function beforeSlide() {
    mainProdPic.src = mainPic[picIdx];
    picIdx--;
    if(picIdx == 0){
        picIdx = mainPic.length;
    }
}

function selectPic(i) {
    mainProdPic.src = mainPic[i];
}

2023. 12. 05 (화)

저작자표시 비영리 변경금지

'프로그래머가 될거야!' 카테고리의 다른 글

프로그래머 도전기 82일차 (0)	2023.12.09
프로그래머 도전기 81일차 (1)	2023.12.07
프로그래머 도전기 79일차 (0)	2023.12.04
프로그래머 도전기 78일차 (0)	2023.12.02
프로그래머 도전기 77일차 (0)	2023.12.01