[Introduction to JSP + Servlet] A little animation ♬

This time, I tried to realize "I want to animate with JSP + Servlet". As it is, python is easier while running locally, and the conclusion is that you can go with js in the first place, but I played a lot so I will record it. The reference this time is as follows. 【reference】 ①js_arrays@JS [email protected] ② element.style.position --Display position setting @JavaScriptist ③ @JS that switches images in a certain period of time Ready-to-use sample collection ④ Display image file in JSP

What i did

・ Display the specified image ·animation

・ Display the specified image

Last time, I was able to display the image already, so this time I made it possible to paste the image specified by screen input. For the time being, I refer to Reference ④. If you enter 12.png in the text area of the input and press the send button, The following is output.

[Reference] If you get a server port used error, see below. Double-click on the local post Tomcat8 (Java8) and change the port number appropriately (increase by 10) ⑤ What to do if Tomcat cannot be started because "port is in use"

·code

The JSP is as follows

`.jsp`


<body>
	<br/>
        <p>From Servlet"foo"Display the corresponding string with</p>
	<%= request.getAttribute("foo") %><br/>
        <p>To Servlet"name"Send string</p>
	<form method="post" action="./helloPicture">
Enter something: <input type="text" name="name">
        <button type="submit">Send</button>
    </form>
    <br/>
    <p>From Servlet"userName"Get and display a string</p>
    <%= request.getAttribute("userName") %>
    <br/>
    <p>From Servlet"useName"Get the character string and display the corresponding image</p>
    <img src="${pageContext.request.contextPath}/media/<%= request.getAttribute("userName") %>" width="400px" height ="400" name="<%= request.getAttribute("userName") %>">
	<br/>
</body>

Servlet is as follows

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
	    //Pass an appropriate string to JSP
		request.setAttribute("foo", "1.png,2.png,...15.png ");
	    //If there is no userName"1.png "To userName
	    String name = (String) request.getAttribute("userName");
		if (name == null || "".equals(name)) {
	        request.setAttribute("userName", "1.png ");
	    }
	    String view = "/WEB-INF/view/index_simple.jsp";
	    RequestDispatcher dispatcher = request.getRequestDispatcher(view);
	    //Dispatch userName to JSP
	    dispatcher.forward(request, response);
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
	    //Character code specification
	    request.setCharacterEncoding("utf-8");
	    String name = request.getParameter("name");
	    //Pass the contents of userName to name
	    request.setAttribute("userName", name);
   	    //Output name string to console
        System.out.println(name);
        doGet(request, response);
	}

By the way, the arrangement of each element is as follows

·animation

First of all, the display of Gif animation is the same as a normal image, so if you put face_smile11.gif in the above text area and press it, the following will be displayed at the position of the above image. And full-scale? Animation If the picture does not move, it is exactly the same as above, so it is omitted ... Like this, the larger one at the bottom moves.

code

There is no change in Servlet. In other words, apart from the above story, it works in JSP without any interaction with Servlet.

I don't need Servlet

`.jsp`


<body>
...
  	<img src="mayuyu.gif" width="400px" height ="400px" name="mayuyu">
	<div id="comment"></div>
</body>
<script type="text/javascript">
img_ = new Array("1.png ","2.png ","3.png ","4.png ","5.png ","6.png ","7.png ",...); //*1
com_ = new Array("1.png ","2.png ","3.png ","4.png ","5.png ","6.png ","7.png ",...); //*2
count_ = -1; //*2
mayuyuTimer();
function mayuyuTimer() {
	//Image number
	count_++; //*3
	//Check the number of images
	if (count_ == img_.length) count_ = 0; //*4
	//Image output
	document.mayuyu.src = "${pageContext.request.contextPath}/media/"+img_[count_]; //*5
	//Comment output
	document.getElementById("comment").innerHTML = com_[count_]; //*3
	//Next timer call
	setTimeout("mayuyuTimer()",500); //*6
}
</script>

Also, I'm tired of writing img_ = new Array (...) in the middle, so I found that I can do it with the following code.

`.js`


<script>
var fruits, text, fLen, i;
fruits = ["1.png ","2.png "];
fLen = fruits.length;
    
function myFunction() {
  fLen = 26; //fruits.length;
  for (i = 3; i < fLen; i++) {
      fruits.push( i + ".png ");
  }
  for (i = 1; i < fLen; i++) {
      fruits.push( fLen - i + ".png ");
  }
  return fruits;
}
</script>
<script type="text/javascript">
img_ = myFunction();
...

that? This code looks longer. However, repeating the same action is mentally tiring, so writing it in code and moving it is exceptional.

If you get it by hand, you will get tired with about 10 pieces, but in a sense you can set as many as you like. The above is set to 51 round trips up to 26. ** Also, the directory structure is exactly the same as above. ** **

Summary

・ Display the designated image ・ Try animation -Set an array of animation using Javascript

・ I will try something with a little more movement