Consulta sobre sintáxis

[freesoftwarrior]

Buenas noches:
Revisando páginas por aquí y por allá, encontré varios casos en que, para invocar una función, ponen antes javascript:, por ejemplo

<input type="button" value="Grabar" onClick="javascript:grabarContenido();">

mientras que en otras páginas veo algo más simple

<input type="button" value="Grabar" onClick="grabarContenido();">

Revisando información en la red encontré varias páginas que mencionaban que era mejor poner javascript: para "forzar" el uso del motor java del browser; en otros casos (y a mi me ha pasado), si no se pone javascript: como que la función o instrucción no se ejecuta bien o simplemente no se ejecuta.

Ahora bien, muchas de estas páginas son de hace algunos años, y por eso mi consulta. ¿Que es lo correcto o apropiado en estos casos?.

Hace poco aprendí que ya no es ni necesario ni correcto poner <script languaje="JavaScript" y que ahora sólo basta con el type="text/javascript"

Mil gracias por el apoyo y orientación
Un saludo desde Lima, Perú

[Panino5001]

En esto:

Código PHP:

  <input type="button" value="Grabar" onClick="javascript:grabarContenido();"> 
   

Hay mal 2 cosas:
1-el onclick debe escribirse con minúscula (la camelización es un mal vicio que viene del Dreamweaver de Macromedia y que no ha corregido Adobe)
2-el pseudoprotocolo "javascript:" es innecesario y redundante. Debería ser así:

Código PHP:

  <input type="button" value="Grabar" onclick="grabarContenido();"> 
   

El el pseudoprotocolo "javascript:" sólo debería usarse para bookmarklets Un buen ejemplo de este uso es el botón "pint it" de la red social Pinterest, que te ofrece un enlace como este para que arrastres a la barra de marcadores y lo tengas disponible para poder compartir imágenes o videos de cualquier sitio que visites:

Código PHP:

  <a href="javascript:void((function(){var e=document.createElement('script');e.setAttribute('type','text/javascript');e.setAttribute('charset','UTF-8');e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r='+Math.random()*99999999);document.body.appendChild(e)})());">arrastrar a barra de marcadores</a> 
   

Otro uso no tan útil de este pseudoprotocolo es para generar contenido al vuelo en iframes, como puede verse en estos ejemplos:
http://js1k.com/2010-xmas/

[JairLizcano]

Personalmente optaría por:

Código:

<input type = 'submit' value = 'Grabar' onclick = 'return grabarContenido();'>

El return lo indico con la idea de validar un determinado caso, y si este se cumple, el evento (en este caso click) sigue la línea, y si no, retorno false para cortar la línea del evento.

[Panino5001]

Iniciado por JairLizcano

Personalmente optaría por:

Código:

<input type = 'submit' value = 'Grabar' onclick = 'return grabarContenido();'>

El return lo indico con la idea de validar un determinado caso, y si este se cumple, el evento (en este caso click) sigue la línea, y si no, retorno false para cortar la línea del evento.

Así no detendrías el submit. Es buena idea la del return pero aplicado al evento onsubmit del tag form
Y las comillas de valores de atributos deben ser comillas dobles.

[JairLizcano]

Iniciado por Panino5001

Así no detendrías el submit. Es buena idea la del return pero aplicado al evento onsubmit del tag form
Y las comillas de valores de atributos deben ser comillas dobles.

Claro, evidentemente es mejor asociarlo al evento onsubmit, pero no asegures que no se detendría el submit si lo asocio al evento onclick.

Las comillas dobles no se requiere bajo la especificación de HTML 5, y sinceramente nunca he leído algo que sea diferente a la regla general de las comillas dobles y paran en una recomendación. Las utilizo con frecuencia para "socializar" sintaxis con PHP, que allí sí tienen un sentido más técnico.

Buena suerte.

[Panino5001]

Claro, evidentemente es mejor asociarlo al evento onsubmit, pero no asegures que no se detendría el submit si lo asocio al evento onclick.

Es cierto, si hacés bien la función podés detenerlo

Las comillas dobles no se requiere bajo la especificación de HTML 5, y sinceramente nunca he leído algo que sea diferente a la regla general de las comillas dobles y paran en una recomendación.

Eso no es del todo cierto. Cualquier especificación xhtml (o xml) te dirá que los valores de atributos van entre comillas dobles obligatoriamente. En cuanto a html5 no es que la norma diga que es posible. El problema es que no existe una norma clara, como en varias cosas de la especificación. Otras cosas que permite ese vacío de reglas es no cerrar tags únicos (es lo mismo <img> que <img /> o <br> que <br />) o barbaridades como esta:

Código PHP:

  <ul>
<li>uno
<li>dos
</ul> 
   

Pese a que muchas cosas maravillosas se engloban bajo el rótulo html5, como por ejemplo el elemento canvas, que en realidad ya existía mucho antes de html5 y algunos experimentamos con él antes de que se hablara de html5, html5, como estandar, está muy verde y muy mal concebido en muchos aspectos, como por ejemplo la mezcla de la presentación con el comportamiento, o la posibilidad de cear contenido desde la capa de presentación.

[freesoftwarrior]

Muchas gracias a ambos por sus respuestas. Recién me reintegro al mundo de los vivos, pues como es mi costumbre a las 6am me levanto y hago algunas labores de la casa (abrir los cerrojos, poner agua e hervir, ver el desayuno, etc. jejeje)

Tengo algunas dudas y/o consultas.

Papino5001 ¿por que dices que NO debe escribirse onClick de esa forma y si onclick?. Reconozco que hay instrucciones como getElementById que deben escribirse tal cual esta pero en los eventos no sabía que hubiera tal consideración. Esto no lo hago yo con Dreamweaver (yo uso Home Site desde hace años) y es más bien un hábito (o vicio por lo que leo ahora en tu respuesta) el poner en mayúscula algunas letras (onMouseOver, onClick, onKeyUp) y nunca tuve problemas. La razón, lo admito, es más que nada estética.

JairLizcano yo siempre imagine que el return se colocaba DESPÚES del nombre de la función o, por lo general, dentro de la misma. ¿Que diferencia hay en ubicarla al inicio?

Entonces, en conclusión, el uso de "pseudoprotocolo" javascript: no es necesario utilizarlo para invocar a una función EXCEPTO si lo que se invoca es una serie de instrucciones aisladas, ¿entendí bien?

Yo estoy haciendo esta consulta porque estoy en medio del desarrollo de un sistema en ASP y soy, lo confieso, maniático de la perfección y estética en el código (todo lo tabulo, las instrucciones VBScript las escribo For Next, If Then End If, Select Case, etc.) y el nombre de las variables siempre empiezan por var (varElementoDeCorte, varContador, varModuloSostenido, etc.) y es por eso que lo he trasladado al tema de la consulta, y es más, en los tag HTML TODO tiene un orden, primero el type, luego el id, nombre, value, evento (de ser aplicable) y algunos elementos complementarios como readonly, disabled, autocomplete, etc.

Mil mil mil gracias por tas respuestas indicadas. Me dan mucho que pensar, y cuando pueda tener un poco más claro el porque es mejor, recomendable u obligatorio (según sea el caso) usar onclick (o cualquier nombre de evento) en vez de onClick, procederé a formatear todo el código del sistema (menuda tarea jejejeje)

Un saludo cordial y generoso desde el Perú

[Panino5001]

Aquí, en este documento (en progreso, como todo en html 5, pero verás lo mismo en los documentos finales de xhtml), verás cómo deben escribirse los atributos, pese a que si son escritos de otra manera funcionen: http://www.w3.org/TR/html5/elements....bal-attributes

Cuando usás return nombrefuncion(), lo que esperás es que la función devuelva un resultado.

En efecto, el uso del pseudoprotocolo javascript no tiene sentido salvo que se trate de bookmarklets (y repito que Pinterest lo usa de manera especialmente inteligente).
Además, notá que únicamente tiene sentido como valor de un atributo href o src.

[JairLizcano]

Cualquier especificación xhtml (o xml) te dirá que los valores de atributos van entre comillas dobles obligatoriamente.

Me gustaría que validaras (http://validator.w3.org/) este sitio como XHTML 1.0 Strict:

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns = 'http://www.w3.org/1999/xhtml'>
	<head>
		<meta http-equiv = 'Content-Type' content = 'text/html; charset=ISO-8859-1'/>
		<title>
			Título del sitio
		</title>
	</head>
	<body>
		<div id = 'container' class = 'Container'>
			<p>
				Párrafo.
			</p>
		</div>
	</body>
</html> 

Es una regla general, pero... ninguna especificación lo indica como obligatorio.

Buena suerte.

[emprear]

http://www.w3.org/TR/html4/intro/sgmltut.html#h-3.2.2

By default, SGML requires that all attribute values be delimited using either double quotation marks (ASCII decimal 34) or single quotation marks (ASCII decimal 39). Single quote marks can be included within the attribute value when the value is delimited by double quote marks, and vice versa

Si bien HTML 5 ya no se ajusta a SGML, guarda compatibilidad con lo previo, siendo validos

' "" '

tanto como

" '' "

Saludos

[jhonnyfernando]

Buena noche freesoftwarrior.

Revisando páginas por aquí y por allá, encontré varios casos en que, para invocar una función, ponen antes javascript:

El hecho de poner la palabra javascript: antes de ejecutar una función es porque existen otros lenguajes "a la par" con Javascript como TCL, VBScript, livescript, ecmascript y otros más para web del lado del cliente.

Si en varios de estos lenguajes se declaraba una función con el mismo nombre, la invocábamos predeciendo el lenguaje.

Te dejo un ejemplo que implementa una función llamada saludar en VBScript y en Javascript y como se ejecutan.

...A ya que probamos con VBScript debes probarlo en Internet Explorer para que te funcione.

Código HTML:

<html>
	<head>
		<title>Diferencias</title>
	</head>

	<body>
		<a href="#" onClick="javascript:saludar();return false;">Saludo con Javascript</a>
		<script type="text/javascript" language="javascript">
			function saludar(){
				alert("Saludo desde Javascript");
			}
		</script>
		<br><br>
		<a href="#" onClick="vbscript:saludar()">Saludo con VBScript</a>
		<script type="text/VBScript" language="vbscript">
			sub saludar()
				msgbox "Saludo desde VBScript", vbInformation, "Saludo"
			end sub
		</script>
	</body>
</html> 

Pruebalo y nos cuentas!!

[Panino5001]

Iniciado por JairLizcano

Me gustaría que validaras (http://validator.w3.org/) este sitio como XHTML 1.0 Strict:

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns = 'http://www.w3.org/1999/xhtml'>
	<head>
		<meta http-equiv = 'Content-Type' content = 'text/html; charset=ISO-8859-1'/>
		<title>
			Título del sitio
		</title>
	</head>
	<body>
		<div id = 'container' class = 'Container'>
			<p>
				Párrafo.
			</p>
		</div>
	</body>
</html> 

Es una regla general, pero... ninguna especificación lo indica como obligatorio.

Buena suerte.

Cierto para xhtml! Mirá vos, toda la vida asumí como cierto lo leído tantas veces: que para xhtml se aplicaba la misma obligatoriedad sintáctica que para xml bien formado: http://www.w3.org/TR/REC-xml/
Me has enseñado algo