|
App inventor 2 en español
Cómo programar los teléfonos móviles con Android
mediante App inventor 2 - Juan Antonio Villalpando
-- Tutorial de iniciación de App Inventor 2 en español --
Volver al índice del tutorial
___________________________
164.- Insertar códigos de JavaScript en App inventor.
 p164_javascript_codigos.aia
- Vamos a ver algunos códigos de JavaScript.
_____________
1.- Botón.
- En este caso sale un Botón y pulsamos sobre él. |
 |
boton.htm |
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"></head><body>
<p>Pulsa el botón:</p>
<input type="button" onclick="alert('Acabas de pulsar el botón.');" value="Pulsar" />
<p>Tutoriales: <a href="http://kio4.com">KIO4.COM</a></p>
</body></html>
|
_____________
2.- Introducir datos.
datos.htm |
<html>
<head><meta charset="utf-8"></head><body>
<p><b>Escribe tu nombre.</b></p>
<script type="text/javascript">
function displayPrompt()
{
var name=prompt("¿Cómo te llamas?","Juan Antonio");
if (name!=null && name!="")
{
alert("Bien " + name + ". Encantado de saludarte.");
}
else
{
alert("¿Por qué no me dices tu nombre?");
}
window.AppInventor.setWebViewString("Nombre = " + name) ;
}
</script>
<input type="button" onclick="displayPrompt()" value="Pulsa este botón." />
</body></html>
|
_____________
3.- Muchos elementos.
elementos.htm |
<!-- This example is from the book _JavaScript: The Definitive Guide_. -->
<!-- Written by David Flanagan. Copyright (c) 1996 O'Reilly & Associates. -->
<!-- This example is provided WITHOUT WARRANTY either expressed or implied.-->
<!-- You may study, use, modify, and distribute it for any purpose. -->
<FORM NAME="everything"> <!-- A one-of-everything HTML form... -->
<TABLE BORDER CELLPADDING=5> <!-- ...in a big HTML table -->
<TR>
<TD>Username:<BR>[1]<INPUT TYPE=text NAME="username" SIZE=15></TD>
<TD>Password:<BR>[2]<INPUT TYPE=password NAME="password" SIZE=15></TD>
<TD ROWSPAN=4>Input Events[3]<BR>
<TEXTAREA NAME="textarea" ROWS=20 COLS=28></TEXTAREA></TD>
<TD ROWSPAN=4 ALIGN=center VALIGN=center>
[9]<INPUT TYPE=button VALUE="Clear" NAME="clearbutton"><BR>
[10]<INPUT TYPE=submit NAME="submitbutton" VALUE="Submit"><BR>
[11]<INPUT TYPE=reset NAME="resetbutton" VALUE="Reset"></TD></TR>
<TR>
<TD COLSPAN=2>Filename: [4]<INPUT TYPE=file NAME="file" SIZE=15></TD></TR>
<TR>
<TD>My Computer Peripherals:<BR>
[5]<INPUT TYPE=checkbox NAME="peripherals" VALUE="modem">28.8K Modem<BR>
[5]<INPUT TYPE=checkbox NAME="peripherals" VALUE="printer">Printer<BR>
[5]<INPUT TYPE=checkbox NAME="peripherals" VALUE="tape">Tape Backup</TD>
<TD>My Web Browser:<BR>
[6]<INPUT TYPE=radio NAME="browser" VALUE="nn">Netscape Navigator<BR>
[6]<INPUT TYPE=radio NAME="browser" VALUE="ie">Internet Explorer<BR>
[6]<INPUT TYPE=radio NAME="browser" VALUE="other">Other</TD></TR>
<TR>
<TD>My Hobbies:[7]<BR>
<SELECT multiple NAME="hobbies" SIZE=4>
<OPTION VALUE="programming">Hacking JavaScript
<OPTION VALUE="surfing">Surfing the Web
<OPTION VALUE="caffeine">Drinking Coffee
<OPTION VALUE="annoying">Annoying my Friends
</SELECT></TD>
<TD align=center valign=center>My Favorite Color:<BR>[8]
<SELECT NAME="color">
<OPTION VALUE="red">Red <OPTION VALUE="green">Green
<OPTION VALUE="blue">Blue <OPTION VALUE="white">White
<OPTION VALUE="violet">Violet <OPTION VALUE="peach">Peach
</SELECT></TD></TR>
</TABLE>
</FORM>
<DIV ALIGN=center> <!-- Another table--the key to the one above -->
<TABLE BORDER=4 BGCOLOR=pink CELLSPACING=1 CELLPADDING=4>
<TR>
<TD ALIGN=center><B>Form Elements</B></TD>
<TD>[1] Text</TD> <TD>[2] Password</TD> <TD>[3] Textarea</TD>
<TD>[4] FileUpload</TD> <TD>[5] Checkbox</TD></TR>
<TR>
<TD>[6] Radio</TD> <TD>[7] Select (list)</TD>
<TD>[8] Select (menu)</TD> <TD>[9] Button</TD>
<TD>[10] Submit</TD> <TD>[11] Reset</TD></TR>
</TABLE>
</DIV>
<SCRIPT LANGUAGE="JavaScript1.1">
// This generic function appends details of an event to the big Textarea
// object in the form above. It will be called from various event handlers.
function report(element, event)
{
var t = element.form.textarea;
var name = element.name;
if ((element.type == "select-one") || (element.type == "select-multiple")){
value = " ";
for(var i = 0; i < element.options.length; i++)
if (element.options[i].selected)
value += element.options[i].value + " ";
}
else if (element.type == "textarea") value = "...";
else value = element.value;
var msg = event + ": " + name + ' (' + value + ')\n';
t.value = t.value + msg;
}
// This function adds a bunch of event handlers to every element in a form.
// It doesn't bother checking to see if the element supports the event handler,
// it just adds them all. Note that the event handlers call report() above.
function addhandlers(f)
{
for(var i = 0; i < f.elements.length; i++) {
var e = f.elements[i];
e.onclick = new Function("report(this, 'Click')");
e.onchange = new Function("report(this, 'Change')");
e.onfocus = new Function("report(this, 'Focus')");
e.onblur = new Function("report(this, 'Blur')");
e.onselect = new Function("report(this, 'Select')");
}
// Special case handlers for the buttons:
f.clearbutton.onclick =
new Function("this.form.textarea.value=''; report(this, 'Click');");
f.submitbutton.onclick =
new Function("report(this, 'Click'); return false");
f.resetbutton.onclick =
new Function("this.form.reset(); report(this, 'Click'); return false");
}
// Activate our form by adding all possible event handlers!
addhandlers(document.everything);
</SCRIPT>
|
_________________
- Diseño.
- Ponemos un VisorWeb, en esta ocasión está Visible.
- Ponemos 3 Botones.
_________________
- Bloques.
- Mientras estamos depurando el programa con App inventor dejamos la dirección que está puesta. Cuando lo vayamos a Generar para obtener el archivo de instalación .apk, previamente cambiamo la dirección del archivo a file:///android_asset/boton.htm
_________________
- Comentarios.
- Ejemplos de JavaScript.
- http://www.quackit.com/javascript/examples/
- http://examples.oreilly.com/9781565922341/
- http://www.jsmadeeasy.com/javascripts/Navigation/dot_menu/dot_menu.htm
- https://developers.google.com/maps/documentation/javascript/examples/streetview-events
- http://www.codeproject.com/Articles/755/JavaScript-For-Beginners
- http://www.javascripting.com/view/speak-js
__________________________________
|
