[JAVA] [Introduction à JSP + Servlet] Une petite animation ♬

Cette fois, j'ai essayé de réaliser "Je veux animer avec JSP + Servlet". Dans l'état actuel des choses, python est plus facile lorsqu'il est exécuté localement, et la conclusion est que vous pouvez utiliser js en premier lieu, mais j'ai beaucoup joué, je vais donc l'enregistrer. La référence cette fois est la suivante. 【référence】 ①js_arrays@JS [email protected] ② element.style.position - Réglage de la position d'affichage @JavaScriptist ③ Collection d'échantillons @JS prête à l'emploi qui change d'images dans un certain laps de temps ④ Afficher le fichier image dans JSP

Ce que j'ai fait

・ Afficher l'image spécifiée ·animation

・ Afficher l'image spécifiée

La dernière fois, j'ai déjà pu afficher l'image, donc cette fois j'ai rendu possible le collage de l'image spécifiée par la saisie à l'écran. Pour le moment, je me réfère à la référence ④. Si vous entrez 12.png dans la zone de texte où vous entrez quelque chose et appuyez sur le bouton d'envoi, Ce qui suit est sorti.

[Référence] Si vous obtenez une erreur de port de serveur utilisé, voir ci-dessous. Double-cliquez sur la poste locale Tomcat8 (Java8) et modifiez le numéro de port en conséquence (augmentez de 10) ⑤ Que faire si Tomcat ne peut pas être démarré car le port est en cours d'utilisation

·code

Le JSP est le suivant

`.jsp`


<body>
	<br/>
        <p>Depuis Servlet"foo"Afficher la chaîne de caractères correspondante avec</p>
	<%= request.getAttribute("foo") %><br/>
        <p>Vers le servlet"name"Envoyer la chaîne</p>
	<form method="post" action="./helloPicture">
Entrez quelque chose: <input type="text" name="name">
        <button type="submit">Envoyer</button>
    </form>
    <br/>
    <p>Depuis Servlet"userName"Obtenir et afficher une chaîne</p>
    <%= request.getAttribute("userName") %>
    <br/>
    <p>Depuis Servlet"useName"Récupérez la chaîne de caractères et affichez l'image correspondante</p>
    <img src="${pageContext.request.contextPath}/media/<%= request.getAttribute("userName") %>" width="400px" height ="400" name="<%= request.getAttribute("userName") %>">
	<br/>
</body>

Servlet est comme suit

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
	    //Passez une chaîne appropriée à JSP
		request.setAttribute("foo", "1.png,2.png,...15.png ");
	    //S'il n'y a pas de nom d'utilisateur"1.png "À 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 vers JSP
	    dispatcher.forward(request, response);
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
	    //Spécification du code de caractère
	    request.setCharacterEncoding("utf-8");
	    String name = request.getParameter("name");
	    //Passer le contenu de userName au nom
	    request.setAttribute("userName", name);
   	    //Chaîne de nom de sortie vers la console
        System.out.println(name);
        doGet(request, response);
	}

À propos, la disposition de chaque élément est la suivante

·animation

Tout d'abord, l'affichage de l'animation Gif est le même qu'une image normale, donc si vous mettez face_smile11.gif dans la zone de texte ci-dessus et appuyez dessus, ce qui suit sera affiché à la position de l'image ci-dessus. Et à grande échelle? Animation Si l'image ne bouge pas, c'est exactement la même chose que ci-dessus, alors omettez-la ... Comme ça, le plus grand en bas bouge.

code

Il n'y a pas de changement dans Servlet. En d'autres termes, mis à part l'histoire ci-dessus, il fonctionne dans le JSP sans aucune interaction avec le servlet.

Je n'ai pas besoin de 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() {
	//Numéro d'image
	count_++; //*3
	//Vérifiez le nombre d'images
	if (count_ == img_.length) count_ = 0; //*4
	//Sortie d'image
	document.mayuyu.src = "${pageContext.request.contextPath}/media/"+img_[count_]; //*5
	//Sortie de commentaire
	document.getElementById("comment").innerHTML = com_[count_]; //*3
	//Prochain appel du minuteur
	setTimeout("mayuyuTimer()",500); //*6
}
</script>

De plus, j'en ai assez d'écrire img_ = new Array (...) au milieu, donc j'ai trouvé que je pouvais le faire avec le code suivant.

`.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();
...

cette? Ce code semble plus long. Cependant, répéter la même action est mentalement fatigant, il est donc exceptionnel de l'écrire dans le code et de le déplacer.

Si vous l'obtenez à la main, vous vous fatiguerez avec environ 10 pièces, mais dans un sens, vous pouvez en définir autant que vous le souhaitez. Ce qui précède est fixé à 51 allers-retours jusqu'à 26. ** De plus, la structure des répertoires est exactement la même que ci-dessus. ** **

Résumé

・ Afficher l'image désignée ・ Essayez l'animation -Définir un tableau d'animations en utilisant Javascript

・ J'essaierai quelque chose qui bouge un peu plus