본문 바로가기
코리아 IT아카데미/grid·flex·mySql·jsp

15일차 | jquery, http/서버 개념, postman으로 확인

by Sharon kim 2021. 12. 3.

클릭하면 클릭한 글자가 사라짐 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>j_01</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>

        /*
            jquery는 자바스크립트 라이브러리다.
            jquert는 자바스크립트 프로그래밍을 크게 단순화해준다.

            HTML/DOM 조작
            CSS 조작
            HTML 이벤트 메소드
            효과 및 애니메이션
            ajax(아작스) - 비동기 통신 
        */

        $(document).ready(function () {

            //문서가 준비가 완료되면 작동 시킨다.
            $("p").click(function () {

                $(this).hide();
            });

        });
    </script>
</head>

<body>
    <p>클릭해주세요 ~!!!</p>
    <p>선택1</p>
    <p>선택2</p>
</body>

</html>

클릭하면 아래 2줄 숨겨짐

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>j_02</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>

        $(document).ready(function () {

            $("button").click(function () {

                $("#test").hide();
                $(".child1").hide();

            });

        });

    </script>
</head>

<body>
    <h2>여기는 헤딩영역 입니다.</h2>
    <p>클릭해주세요 ~!!!</p>
    <p id="test">아이디가 추가된 구문</p>
    <p class="child1">선택2</p>

    <button>Click me</button>
</body>

</html>

click하면 list 1,2 coffee 숨겨짐

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>j_03</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>

        $(document).ready(function () {

            $("button").click(
                function () {
                    // $("ul > li:nth-child(1)").hide();
                    // $("ul li:first").hide();
                    $("ul li:second").hide();
                    $("ul li:three").hide();
                    $("ul li:four").hide();
                    $("ul li:five").hide();
                    $("ul li:six").hide();
                })
        });

    </script>
</head>

<body>
    <p>LIist 1 : </p>
    <ul>
        <li>coffee</li>
        <li>milk</li>
        <li>tea</li>
    </ul>
    <p>List 2 : </p>
    <ul>
        <li>coffee</li>
        <li>milk</li>
        <li>tea</li>
    </ul>

    <button>Click me</button>
</body>

</html>

클릭하면 2,4,6번째 줄 색 변함

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>j_04</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>

        $(document).ready(function () {

            $("tr:even").css("background-color", "pink");

            //버튼이 눌러졌을 때 
            //색상을 변경
            $("button").click(
                function () {
                    $("tr:odd").css("background-color", "skyblue");
                })
        });

    </script>
</head>

<body>
    <h1>welcome to My Web page</h1>
    <table border="1">
        <tr>
            <th>Company</th>
            <th>Country</th>
        </tr>
        <tr>
            <td>삼성</td>
            <td>대한민국</td>
        </tr>
        <tr>
            <td>엘지</td>
            <td>대한민국</td>
        </tr>
        <tr>
            <td>메타</td>
            <td>미국</td>
        </tr>
        <tr>
            <td>스파게티</td>
            <td>이태리</td>
        </tr>
        <tr>
            <td>햄버거</td>
            <td>미국</td>
        </tr>
    </table>
    <p></p>
    <button>Click</button>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>j_05</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>

        /*
            이벤트 
            DOM에서 몇 가지 만들어 주는 이벤트
            click 
            dblclick 
            mouseenter
            mouseleave
        */

        $(document).ready(function () {

            // $("#p1").mouseenter(function () {
            //     alert("마우스가 들어 왔네요!!");
            // });

            // $("#p1").mouseleave(function () {
            //     alert("마우스가 나갔네요!!");
            // });

            //더블 클릭하면 안보이게 하라
            // $("#p1").dblclick(function () {
            //     $(this).hide();
            // });

            //hover 이벤트가 왔을 때 p태그의 색상을 변경
            $("#p1").hover(function () {
                $("#p1").css({
                    "color": "red",
                    "font-size": "30px"
                });
            });
        });


    </script>
</head>

<body>

    <span id="p1">여기에 마우스를 가지고 오세요!!</span>

</body>

</html>

 

마우스 커서 있으면 연그레이 나오면 진그레이

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>j_06</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>

        $(document).ready(function () {

            $("input").focus(function () {
                $(this).css("background-color", "#eee");
            });

            $("input").blur(function () {
                $(this).css("background-color", "#999");
            });
        });

    </script>
</head>

<body>

    Name : <input type="text" name="fullName"><br>
    Email : <input type="text" name="email">

</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>j_07</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>

        $(document).ready(function () {
            
            //기존 방법 
            $("p").click(function () {
                $(this).hide();
            });
            // on을 써서 클릭
            //한번에 하나의 이벤트만 쓰는 것이 아니라 
            //이벤트 핸들러를 만들어 내기 위해서

            $("p").on("dblclick", function () {
                $(this).hide();
            });
        });

    </script>
</head>

<body>

    <p>클릭하게 되면 사라집니다.</p>
    <p>클릭 미 1 </p>
    <p>클릭 미 2 </p>

</body>

</html>

클릭 : 노랑, 마우스 글에 위치 : 그레이, 마우스 글에서 나오면 : 파랑

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>j_08</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>

        $(document).ready(function () {

            //화살표 함수와 같은 맥락
            $("p").on({
                mouseenter: function () {
                    $(this).css({ "background-color": "lightgray" });
                },
                mouseleave: function () {
                    $(this).css({ "background-color": "lightblue" });
                },
                click: function () {
                    $(this).css({ "background-color": "lightyellow" });
                }
            });
        });

    </script>
</head>

<body>

    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit.
        Veniam laboriosam voluptatem rem? Praesentium fugit minima
        totam magnam reiciendis, laboriosam illum laudantium atque
        ad nostrum veniam optio dolore iure, vero deleniti.
        Lorem ipsum dolor sit amet consectetur, adipisicing elit.
        Veniam laboriosam voluptatem rem? Praesentium fugit minima
        totam magnam reiciendis, laboriosam illum laudantium atque
        ad nostrum veniam optio dolore iure, vero deleniti.
        Lorem ipsum dolor sit amet consectetur, adipisicing elit.
        Veniam laboriosam voluptatem rem? Praesentium fugit minima
        totam magnam reiciendis, laboriosam illum laudantium atque
        ad nostrum veniam optio dolore iure, vero deleniti.</p>

</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>j_09</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>

        $(document).ready(function () {

            // $("#hide").click(function () {
            //     $("p").hide(100);
            // });
            // $("#show").click(function () {
            //     $("p").show(100);
            // });

            $("#toggle").click(function () {
                $("p").toggle(200);
            });
        });

    </script>
</head>

<body>

    <p>여기에 문구가 보였다가 안보이게 만듦</p>

    <!-- <button id="hide">Hide</button>
    <button id="show">Show</button> -->
    <button id="toggle">toggle</button>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>j_10</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>

        $(document).ready(function () {

            $("button").click(function () {
                // $("#div1").fadeIn();
                // $("#div2").fadeIn("slow");
                // $("#div3").fadeIn(3000);

                // $("#div1").fadeOut();
                // $("#div2").fadeOut("slow");
                // $("#div3").fadeOut(3000);

                // $("#div1").fadeToggle();
                // $("#div2").fadeToggle("slow");
                // $("#div3").fadeToggle(3000);

                $("#div1").fadeTo("slow", 0.15);
                $("#div2").fadeTo("slow", 0.4);
                $("#div3").fadeTo("slow", 0.7);
            });
        });

    </script>
</head>

<body>

    <button>Click to fade in boxes</button>
    <p></p> <!-- fadeIn 일때 display:none -->
    <div id="div1" style="width: 80px; height: 80px; background-color: red;"></div><br>
    <!-- fadeIn 일때 display:none -->
    <div id="div2" style="width: 80px; height: 80px; background-color: green; "></div><br>
    <!--  fadeIn 일때 display:none -->
    <div id="div3" style="width: 80px; height: 80px; background-color: blue; "></div>

</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>j_11</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>

        $(document).ready(function () {

            // $("#flip").click(function () {
            //     $("#panel").slideDown("slow");
            // });

            // $("#flip2").click(function () {
            //     $("#panel2").slideDown("slow");
            // })
            // //슬라이드 업 구현
            // $("#flip").click(function () {
            //     $("#panel").slideUp("slow");
            // });

            // $("#flip2").click(function () {
            //     $("#panel2").slideUp("slow");
            // });

            //슬라이드 토글 구현
            $("#flip").click(function () {
                $("#panel").slideToggle("slow");
            });
            $("#flip2").click(function () {
                $("#panel2").slideToggle("slow");
            });
        });

    </script>
    <style>
        #panel,
        #flip {
            padding: 5px;
            text-align: center;
            background-color: #e5eecc;
            border: solid 1px #c3c3c3;
        }

        #panel {
            padding: 50px;
            display: none;
        }

        #panel2,
        #flip2 {
            padding: 5px;
            text-align: center;
            background-color: darkkhaki;
            border: solid 1px #fff;
        }

        #panel2 {
            padding: 100px;
            display: none;
        }
    </style>
</head>

<body>

    <div id="flip">click to slide down panel</div>
    <div id="panel">Hello world!!</div>

    <div id="flip2">click to slide down panel_2</div>
    <div id="panel2">Hello world!!_2</div>

</body>

</html>

package com.cos.test;

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

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

//서블릿이란 Dynamic Web Page를 만들 때 사용되는 자바 기반의 웹애플리케이션 서비스 was(톰캣)
//클라이언트에서 요청, 응답 -- > GET, POST 
@WebServlet("/test") //주소체계를 만들어 내는 것
public class ApiTest extends HttpServlet {
	private static final long serialVersionUID = 1L;
  
    public ApiTest() {
        super();
    }
    @Override
    public void init() throws ServletException {
    	// TODO Auto-generated method stub
    	super.init();
    }
    @Override
    public void service(ServletRequest req, ServletResponse res) throws ServletException, IOException {
    	// TODO Auto-generated method stub
    	super.service(req, res);
    }
    @Override
    public void destroy() {
    	// TODO Auto-generated method stub
    	super.destroy();
    }

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		String mine = request.getContentType();
		System.out.println(mine);
		
		String food = request.getParameter("food");
		System.out.println(food);
		
		//DB에 접속해서 결과를 찾아서 리턴
		//객체
		
		response.setContentType("Text/html; charset=utf-8");
		PrintWriter out = response.getWriter();
		out.println("<html>");
		out.println("<body>");
		out.println("<h1>"+ food +"</h1>");
		out.println("</body>");
		out.println("</html>");
		out.flush();
		
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		
		String food = request.getParameter("food");
		String recipe = request.getParameter("recipe");
		
		System.out.println(food);
		System.out.println(recipe);
		
		//
		//DB에 인설트하고 끝
		int result = 1; // 1
		if(result == 1) {
			//성공 응답
		}else {
			//실패 응답
		}
		                                              //aplication/json
		                                              //text/plain -> mine 타입 
		response.setContentType("text/html; charset=utf-8");
		PrintWriter out = response.getWriter();
		out.println("<html>");
		out.println("<body>");
		out.println("<h1> 포스트 방식입니다. </h1>");
		out.println("</body>");
		out.println("</html>");
		out.flush();
		
	}

}

 

'코리아 IT아카데미 > grid·flex·mySql·jsp' 카테고리의 다른 글

18일차 | jsp3  (0) 2021.12.09
16일차 | jsp1  (0) 2021.12.06
14일차 | json 파일 만들기, 프로그램 설치, 다이나믹 웹 프로젝트 만들기  (0) 2021.12.02
13일차 | Javascript, mySQL  (0) 2021.12.01
12일차 | JavaScript, SQL  (0) 2021.11.30

관련글

티스토리툴바