Essayez d'appeler JavaScript en Java
introduction
Cette fois, je vais m'entraîner à utiliser JavaScript dans une application Java. Il existe deux façons de pratiquer JavaScript dans JSP et de s'exercer à des fichiers Java.
Environnement de développement
eclipse tomcat java
Exécuter JS avec le fichier JSP
IndexServlet.java index.jsp main.js Sera créé.
C'est une telle hiérarchie.
servlet.IndexServlet.java
package servlet;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* Servlet implementation class IndexServlet
*/
@WebServlet("/IndexServlet")
public class IndexServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public IndexServlet() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
response.getWriter().append("Served at: ").append(request.getContextPath());
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}
Le servlet est OK sans toucher. (Parce que le but est d'exécuter JS avec JSP)
index.jsp
<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>index</title>
</head>
<style>
.box1 {
width: 200px;
height: 200px;
background-color: #ccffcc;
}
.box2 {
width: 200px;
height: 200px;
background-color: #ddd;
}
</style>
<body>
<h1>Confirmation d'exécution JS dans JSP</h1>
<div class="box1">box1</div>
<div class="box2">box2</div>
<form action="IndexServlet" method="post">
Identifiant d'utilisateur:<input type="text" name="user_id" id="user_id">
mot de passe:<input type="password" name="pass" id="pass">
<input type="submit" value="S'identifier" id="btn">
</form>
<input type="button" value="Voir le mot de passe" id="passshow">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="main.js"></script>
</body>
</html>
・ Une boîte qui change de couleur lorsqu'on clique dessus ・ Boîte qui change de couleur avec le survol de la souris ・ Validation du formulaire de connexion Nous mettrons en œuvre les trois.
main.js
/* ---------Traitement en cas de clic---------*/
$('.box1').on('click', (e) => {
$(e.target).css({'background-color': 'skyblue' });
});
/* ------Que se passe-t-il lorsque vous passez la souris----------*/
const onMouseenter = (e) => {
$(e.target).css({
'background-color': '#ff9999',
});
};
const onMouseleave = (e) => {
$(e.target).css({
'background-color': '#dddddd',
});
};
$('.box2')
.on('mouseenter', onMouseenter)
.on('mouseleave', onMouseleave);
/*--------Rendre le mot de passe visible--------------*/
$('#passshow').on('click', () => {
$('#pass').attr('type', 'text');
});
/*----------Définir la validation lors de la connexion(S'il est vide, jouez)----------- */
$('#btn').on('click', (e) => {
const id = $('#user_id').val();
const pass = $('#pass').val();
if(!id){
e.preventDefault();
console.log(id);
alert('L'ID est vide');
}
if(!pass){
e.preventDefault();
console.log(pass);
alert('Le mot de passe est vide');
}
})
Nous avons pu implémenter JS comme décrit ci-dessus. (J'ai pu l'implémenter exactement comme il l'était en HTML.)
Exécutez JS sur un fichier Java
Ensuite, je présenterai l'une des méthodes pour exécuter JS dans un fichier Java. Toutes les explications sont dans le code, alors jetez un œil. .. ..
Le code ci-dessous décrit la page suivante du manuel Oracle's Java Documentation Guide. https://docs.oracle.com/javase/jp/8/docs/technotes/guides/scripting/prog_guide/api.html
test.java
import java.io.File;
import javax.script.Invocable;
import javax.script.ScriptEngine;
import javax.script.ScriptEngineManager;
public class test {
public static void main(String[] args) throws Exception{
//Créer une instance de ScripteEnginManager
ScriptEngineManager factory = new ScriptEngineManager();
//Spécifiez le moteur de script JS avec la méthode getEngineByName de l'instance ScripteEngineManager
ScriptEngine engine = factory.getEngineByName("JavaScript");
//Utilisation du moteur JS---------------------------------
//Affichage sur la console ・ Évaluer le script comme instruction JS
engine.eval("print('Hello World')");
//Classe java pour la lecture de fichiers de caractères.io.Vous pouvez exécuter chaque fichier JS en utilisant FileReader
//Lorsque le même package est dans la même hiérarchie
File file1 = new File("src/test.js");
engine.eval(new java.io.FileReader(file1));
//Lorsque dans le dossier des ressources au même niveau que src
File file2 = new File("resources/test.js");
engine.eval(new java.io.FileReader(file2));
//put (nom de la clé,Vous pouvez enregistrer le code source dans le nom de la clé avec (code source)
engine.put("file", file1);
//Obtenir le chemin absolu avec getAbsolutePath ・ Évaluer le script comme instruction JS
engine.eval("print(file.getAbsolutePath())");
//Des fonctions, etc. peuvent être affectées à des variables
String script1 = "function helle(name) { print('Hello' + name);}";
//Appel par nom de variable(Stocké dans le moteur)-Évaluer le script comme une instruction JS
engine.eval(script1);
//Fonctions d'appel et méthodes stockées dans le moteur. → Vous pouvez exécuter des fonctions, etc. * Invocable signifie que vous pouvez appeler
Invocable inv1 = (Invocable) engine;
//Cette fois, c'est une fonction, alors invokeFunction("Nom de la fonction à appeler", "argument")Peut être exécuté avec
inv1.invokeFunction("helle", "Taro");
//"obj"Créez un objet appelé"obj"Définissez également la méthode de l'objet
String script2 = "var obj = new Object(); "
+ "obj.goodbye = function(name){print('Goodbye' + name + 'M.');}";
//Enregistrer dans le moteur ・ Évaluer le script comme instruction JS
engine.eval(script2);
//Rendre le moteur appelable
Invocable inv2 = (Invocable) engine;
//Obtenez l'objet qui a la méthode que vous souhaitez appeler (rendez-le réalisable)
Object obj1 = engine.get("obj");
//Cette fois, c'est une méthode, alors invokeMethod(Nom de l'objet, "Nom de la méthode", "argument")Courir
inv2.invokeMethod(obj1, "goodbye", "Jiro");
//Les fonctions de script peuvent être gérées comme des méthodes de l'interface exécutable ・ Peut être utilisée globalement
//Génération de fonctions sans arguments
String script3 = "function run() { print('java.lang.Appelez l'interface Runnable'); }";
//Rendre le script évaluable et appelable en tant qu'instruction JS
engine.eval(script3);
Invocable inv3 = (Invocable) engine;
//Obtenez Runnable (interface) et implémentez la fonction de script (inv3) comme méthode r1
Runnable r1 = inv3.getInterface(Runnable.class);
//Créer en passant la méthode r1 à l'objet Thread (où l'interface Runnable est implémentée)
Thread th1 = new Thread(r1);
//Lancer l'exécution
th1.start();
//Génération de méthode sans argument
String script4 = "var obj = new Object();"
+ "obj.run = function() {print('Appel de la méthode Runnable');}";
//Évalué comme un script
engine.eval(script4);
//Autoriser obj à être traité comme un objet
Object obj2 = engine.get("obj");
//Rendez-le appelable
Invocable inv4 = (Invocable) engine;
//Obtenez Runnable (interface) et implémentez la fonction de script (inv4) comme méthode r2
Runnable r2 = inv4.getInterface(obj2, Runnable.class);
//Créé en passant la méthode r1 à l'objet Thread (où l'interface Runnable est implémentée)
Thread th2 = new Thread(r2);
th2.start();
}
}
finalement
Si vous pouvez combiner Java et JS comme introduit cette fois, il semble que vous puissiez créer des pages plus dynamiques.
Recommended Posts