<form method="POST"> <input type="text" name="name" onkeypress="submitOnEnter(event)"/> </form> |
Arxiu de la categoria: Javascript
Escriure i llegir valor en entrada html
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Document</title>
</head>
<body>
<!–<input type=”text” id=”id_name” name=”name” value =”<?echo $_POST[name]; ?>” > –>
<input type=”text” id=”id_name” >
<script>
document.getElementById(“id_name”).value = “urqt”; //escriu valor
</script>
<script >
a= document.getElementById(“id_name”).value //llegeix valor
</script>
<script>
alert(a); //valor llegit
</script>
</body>
</html>
Shift F6
JavaScript Hello world!
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<script type=’text/javascript’ src=’js/functions.js’></script>
<title>Document</title>
</head>
<body>
<p>Before the script…</p>
<script>
alert( ‘Hello, world!’ );
</script>
<script>
hello();
</script>
<p>After the script…</p>
</body>
</html>
Aqui es pot veure el resultat:
JQuery
jQuery és una biblioteca o framework de Javascript, creada inicialment per John Resig, que permet simplificar la manera d’interaccionar amb els documents HTML, manipular l’arbre DOM, gestionar esdeveniments, desenvolupar animacions i afegir interacció amb la tecnologia AJAX en pàgines web.[1] Es va presentar el gener del 2006 a BarCamp NYC.D’acord amb una anàlisi de la Web (realitzat l’any 2017) JQuery és la biblioteca de JavaScript més utilitzada, per un ampli marge. [2][3]
jQuery ofereix una sèrie de funcionalitats basades en Javascript que d’una altra manera requerien molt més codi, és a dir, amb les funcions d’aquesta biblioteca s’aconsegueixen bons resultats en menys temps i espai.
La sintaxi de JQuery està dissenyada per facilitar la navegació per un document, seleccionar elements DOM, crear animacions, manejar esdeveniments i desenvolupar aplicacions AJAX. JQuery també proporciona capacitats perquè els desenvolupadors creuen complements a la part superior de la biblioteca de JavaScript. Això permet als desenvolupadors crear abstraccions per interacció i animació de baix nivell, efectes avançats i ginys temàtics d’alt nivell. L’enfocament modular de la biblioteca jQuery permet la creació de poderoses pàgines web dinàmiques i aplicacions web.
El conjunt de característiques principals de jQuery (seleccions d’elements DOM, recorregut i manipulació) habilitats pel seu motor de selecció (denominat “Sizzla” de v1.3), van crear un nou “estil de programació”, algoritmes de fusió i estructures de dades DOM. Aquest estil va influir en l’arquitectura d’altres marcs de JavaScript com Yahoo! UI Library i Dojo, el que més tard va estimular la creació de les API de selectors estàndard.[4]
Les empreses Microsoft i Nokia van anunciar que incloïen la biblioteca a les seves plataformes. Microsoft l’afegeix al seu IDE Visual Studio i l’utilitzarà juntament amb el framework ASP.NET AJAX i ASP.NET MVC, mentre que Nokia els integrarà a la seva plataforma Web Run-Time.
[5] Microsoft l’afegirà en el seu IDE Visual Studio [6] i la farà servir juntament amb els frameworks ASP.NET AJAX i ASP.NET MVC, mentre que Nokia els integrarà amb la seva plataforma web Run-Time.[7]
Botó basculant
Si fas clic al botó de sota canvia de valor
<script>
function myFunction()
{
c= document.proves_form.idEntrada.value;
if (c==1)
{
document.proves_form.idEntrada.value = 0 ;
}
else if (c==0)
{
document.proves_form.idEntrada.value = 1 ;
}
}
</script>
<form method="POST" action="" name="proves_form">
<input type= "button" id= "idEntrada" value="0" onclick="myFunction()">
</form>
Passar un array de JavaScript a php
array_JS_php.htm
[codesyntax lang=”html4strict”]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Language" content="ca" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>passsar array JS a php</title> <script type="text/javascript"> scriptAr = new Array(); scriptAr[0] = "one"; scriptAr[1] = "two"; scriptAr[2] = "three"; function setValue() { // ho passa a cadena var arv = scriptAr.toString(); test.arv.value = arv ; // ho escriu al formulari de forma oculta per al scrip php } </script> </head> <body> <form action="phpArrayTest.php" method="post" name="test" onsubmit="setValue()"> <p> Aquest exemple crea l'array scriptAr[0] = "one"; scriptAr[1] = "two"; scriptAr[2] = "three". <br /> Quan s'envia el formulari demes de l'acció "phpArrayTest.php" també s'executa la funció JS "setValue()". Mirar codi posant el ratolí <span style="color: #FF0000">aquí</span> i premen lo boto dret .<br /> La funció setValue() passa l'array a un camp ocult del formulari de nom <span style="font-weight: 700">arv</span> . Es a dir el prepara per a que l'acció php ho pugui llegir. </p> <input name="arv" type="hidden" /> <input type="submit" value="enviar formulari"/> </form> <p> Codi de l'acció phpArrayTest.php:</p> </body> </html>
[/codesyntax]
phpArrayTest.php
[codesyntax lang=”php”]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Sin título 1</title> </head> <body> <?php $ss = $_POST['arv']; //echo " valor de ss= ". $ss; // La funcion explode convertira la cadena a arreglo //****************************** $tok = explode(',',$ss); //****************************** // per a visualitzar-la la tornem a possar en una lìnia echo implode(',',$tok); ?> </body> </html>
[/codesyntax]
JavaScript: array php a array JS
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <!-- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> --> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/> <meta http-equiv="Content-Language" content="ca" /> <title>passsar array php a JS</title> <?php $array = array('one', 'two', 'three'); ?> <script type="text/javascript"> var xx=new Array("<?=implode("\",\"", $array); ?>") </script> <script type="text/javascript"> function f0(){ alert(xx[0]);} </script> <script type="text/javascript"> function f1(){ alert(xx[1]);} </script> <script type="text/javascript"> function f2(){ alert(xx[2]);} </script> </head> <?php $array = array('one', 'two', 'three'); ?> <body> Exemple com passar una variable array de php a javascrip<br /> <!--<?php echo $array[1]; ?> --> <input name="B1" type="button" value="XX[0]" onclick="f0()" /> <input name="B2" type="button" value="XX[1]" onclick="f1()" /> <input name="B3" type="button" value="XX[2]" onclick="f2()" /><br /> </body> </html>
JavaScript: exemple onchange sobre entrada
<script type="text/javascript"> function checkEmail(email) { if(email.length > 0) { if (email.indexOf(' ') >= 0) alert("email addresses cannot have spaces in them"); else if (email.indexOf('@') == -1) alert("a valid email address must have an @ in it"); } } //--> // ]]></script> <form action="../cgi-bin/mycgi.pl" method="POST"> name: <input type="text" name="realname" /> email: <input type="text" name="email" onchange="checkEmail(this.value)" /> destination: <input type="text" name="desination" /></form>omplir el camp email deixant un espai o sense posar @ dona error, quan el focus passa un altre punt, com destination, per example &amp;nbsp; Per mira el codi posar el ratolí <span style="color: #ff0000;">aquí</span> i prem lo boto dret.