METODOS IMPRESCINDIBLES DE JAVASCRIPT
Javascript es el lenguaje de script más usado por miles de desarrolladores web en todo el mundo su ejecución se realiza en el lado del cliente es más para practicar con el no es necesario tener acceso a internet, pero existen unas funciones muy utiles que todo desarrollador de Javascript debe dominar.
1) document.getElementById()
Este es uno de los metodos más importantes que existen su finalidad es tomar referencia de una Entidad HTML. Una vez referenciada es posible acceder a sus propiedades entre ellas tenemos value, name, id, etc. E inclusive es posible modificar el aspecto y el comportamiento del objeto referenciado agregando y modificando sus funciones.
Su sintaxis es :
document.getElementById('idobjeto');
El 'idobjeto' debe ser unico por cada entidad HTML.
La propiedad "id" no solamente está disponible en la etiqueta "input" sino tambien en
links,botones,combos,div y demás entidades HTML.
Ejemplo:
<html>
<body>
<input name="prueba" id="idprueba" value="Hola Mundo"/>
</body>
<script>
function mostrarmensaje(){
var obj=document.getElementById("idprueba");
alert(obj.value);
}
mostrarmensaje();
</script>
</html>
Si el objeto no existe document.getElementById devuelve null. Otro metodo tambien importante es :
getElementsTagName("tagname") que regresa un array con el "tagname" dado como argumento.
Ejemplo:
var inputs=document.getElementsTagName("input");
alert(inputs.length);
Retorna todas los objetos "input" de la pagina HTML.
2) Diferencia entre Display vs Visibility
Display y Visibility son 2 funciones usadas para ocultar o mostrar entidades HTML pero existen pequeñas diferencias. Al usar 'display:none' el espacio usado por el objeto oculto se mantiene en cambio con 'visibility:hidden' ese espacio es llenado por el siguiente objeto.En el caso de una tabla para volver a mostrar una fila se utiliza la propiedad display con 'table-row'.
Copia este codigo en un documento HTML para probar su funcionalidad.
<html>
<body>
<input name="text1" id="idtext1" value="text1"/>
<input name="text2" id="idtext2" value="text2"/>
<input type="button" onClick="probarxdisplaynone()" value="Probar display:none" title="Click para ocultar el campo de texto mediante display:none" id="btdisplay"/>
<input type="button" onClick="probarxvisibility()" value="Probar Visibility:visible" id="btvisibility"/>
<hr>
<table style="border:1px solid" id="tbl">
<tr><td>1.1</td><td>1.2</td><td>1.3</td></tr>
<tr id="tblfil2"><td>2.1</td><td>2.2</td><td>2.3</td></tr>
<tr><td>3.1</td><td>3.2</td><td>3.3</td></tr>
<tr><td>4.1</td><td id="tblcelll">4.2</td><td>4.3</td></tr>
<tr><td>5.1</td><td>5.2</td><td>5.3</td></tr>
</table>
<input type="button" value="Oculta 2da fila con display" id="btntabla" onClick="probarxdisplaytabla()">
<input type="button" value="Oculta 2da fila con visibility" id="btntablav" onClick="probarxvisibletabla()">
<input type="button" value="Oculta celda 4.2 con visibility" id="btnceldav" onClick="probarxvisiblecelda()">
<script>
function probarxvisiblecelda(){
var tblfil=document.getElementById("tblcelll");
var btvisibility=document.getElementById("btnceldav");
if(tblfil.style.visibility=='' || tblfil.style.visibility!='hidden'){
tblfil.style.visibility='hidden';
btvisibility.value='Mostrar celda 4.2 con visibility';
}else{
tblfil.style.visibility='visible';
btvisibility.value='Oculta celda 4.2 con visibility';
}
}
function probarxvisibletabla(){
var tblfil=document.getElementById("tblfil2");
var btvisibility=document.getElementById("btntablav");
if(tblfil.style.visibility=='' || tblfil.style.visibility!='hidden'){
tblfil.style.visibility='hidden';
btvisibility.value='Oculta 2da fila con visibility';
}else{
tblfil.style.visibility='visible';
btvisibility.value='Mostrar 2da fila con visibility';
}
}
function probarxdisplaytabla(){
var tblfil=document.getElementById("tblfil2");
// tblfil.style.display='none';
var btdisplay=document.getElementById("btntabla");
if(tblfil.style.display=='' || tblfil.style.display!='none'){
tblfil.style.display='none';
btdisplay.value='Mostrar 2da fila con display';
}else{
tblfil.style.display='table-row';
btdisplay.value='Oculta 2da fila con display';
}
}
function probarxdisplaynone(){
var obj=document.getElementById("idtext1");
var btdisplay=document.getElementById("btdisplay");
if(obj.style.display=='' || obj.style.display!='none'){
obj.style.display='none';
btdisplay.value='Mostrar usando display inline';
}else{
obj.style.display='inline';
btdisplay.value='Probar display:none';
}
}
function probarxvisibility(){
var obj=document.getElementById("idtext2");
var btvisibility=document.getElementById("btvisibility");
if(obj.style.visibility=='' || obj.style.visibility!='hidden'){
obj.style.visibility='hidden';
btvisibility.value='Mostrar Usando Visibility:visible';
}else{
obj.style.visibility='visible';
btvisibility.value='Probar Visibility:visible';
}
}
</script>
</body>
</html>
Javascript es el lenguaje de script más usado por miles de desarrolladores web en todo el mundo su ejecución se realiza en el lado del cliente es más para practicar con el no es necesario tener acceso a internet, pero existen unas funciones muy utiles que todo desarrollador de Javascript debe dominar.
1) document.getElementById()
Este es uno de los metodos más importantes que existen su finalidad es tomar referencia de una Entidad HTML. Una vez referenciada es posible acceder a sus propiedades entre ellas tenemos value, name, id, etc. E inclusive es posible modificar el aspecto y el comportamiento del objeto referenciado agregando y modificando sus funciones.
Su sintaxis es :
document.getElementById('idobjeto');
El 'idobjeto' debe ser unico por cada entidad HTML.
La propiedad "id" no solamente está disponible en la etiqueta "input" sino tambien en
links,botones,combos,div y demás entidades HTML.
Ejemplo:
<html>
<body>
<input name="prueba" id="idprueba" value="Hola Mundo"/>
</body>
<script>
function mostrarmensaje(){
var obj=document.getElementById("idprueba");
alert(obj.value);
}
mostrarmensaje();
</script>
</html>
Si el objeto no existe document.getElementById devuelve null. Otro metodo tambien importante es :
getElementsTagName("tagname") que regresa un array con el "tagname" dado como argumento.
Ejemplo:
var inputs=document.getElementsTagName("input");
alert(inputs.length);
Retorna todas los objetos "input" de la pagina HTML.
2) Diferencia entre Display vs Visibility
Display y Visibility son 2 funciones usadas para ocultar o mostrar entidades HTML pero existen pequeñas diferencias. Al usar 'display:none' el espacio usado por el objeto oculto se mantiene en cambio con 'visibility:hidden' ese espacio es llenado por el siguiente objeto.En el caso de una tabla para volver a mostrar una fila se utiliza la propiedad display con 'table-row'.
Copia este codigo en un documento HTML para probar su funcionalidad.
<html>
<body>
<input name="text1" id="idtext1" value="text1"/>
<input name="text2" id="idtext2" value="text2"/>
<input type="button" onClick="probarxdisplaynone()" value="Probar display:none" title="Click para ocultar el campo de texto mediante display:none" id="btdisplay"/>
<input type="button" onClick="probarxvisibility()" value="Probar Visibility:visible" id="btvisibility"/>
<hr>
<table style="border:1px solid" id="tbl">
<tr><td>1.1</td><td>1.2</td><td>1.3</td></tr>
<tr id="tblfil2"><td>2.1</td><td>2.2</td><td>2.3</td></tr>
<tr><td>3.1</td><td>3.2</td><td>3.3</td></tr>
<tr><td>4.1</td><td id="tblcelll">4.2</td><td>4.3</td></tr>
<tr><td>5.1</td><td>5.2</td><td>5.3</td></tr>
</table>
<input type="button" value="Oculta 2da fila con display" id="btntabla" onClick="probarxdisplaytabla()">
<input type="button" value="Oculta 2da fila con visibility" id="btntablav" onClick="probarxvisibletabla()">
<input type="button" value="Oculta celda 4.2 con visibility" id="btnceldav" onClick="probarxvisiblecelda()">
<script>
function probarxvisiblecelda(){
var tblfil=document.getElementById("tblcelll");
var btvisibility=document.getElementById("btnceldav");
if(tblfil.style.visibility=='' || tblfil.style.visibility!='hidden'){
tblfil.style.visibility='hidden';
btvisibility.value='Mostrar celda 4.2 con visibility';
}else{
tblfil.style.visibility='visible';
btvisibility.value='Oculta celda 4.2 con visibility';
}
}
function probarxvisibletabla(){
var tblfil=document.getElementById("tblfil2");
var btvisibility=document.getElementById("btntablav");
if(tblfil.style.visibility=='' || tblfil.style.visibility!='hidden'){
tblfil.style.visibility='hidden';
btvisibility.value='Oculta 2da fila con visibility';
}else{
tblfil.style.visibility='visible';
btvisibility.value='Mostrar 2da fila con visibility';
}
}
function probarxdisplaytabla(){
var tblfil=document.getElementById("tblfil2");
// tblfil.style.display='none';
var btdisplay=document.getElementById("btntabla");
if(tblfil.style.display=='' || tblfil.style.display!='none'){
tblfil.style.display='none';
btdisplay.value='Mostrar 2da fila con display';
}else{
tblfil.style.display='table-row';
btdisplay.value='Oculta 2da fila con display';
}
}
function probarxdisplaynone(){
var obj=document.getElementById("idtext1");
var btdisplay=document.getElementById("btdisplay");
if(obj.style.display=='' || obj.style.display!='none'){
obj.style.display='none';
btdisplay.value='Mostrar usando display inline';
}else{
obj.style.display='inline';
btdisplay.value='Probar display:none';
}
}
function probarxvisibility(){
var obj=document.getElementById("idtext2");
var btvisibility=document.getElementById("btvisibility");
if(obj.style.visibility=='' || obj.style.visibility!='hidden'){
obj.style.visibility='hidden';
btvisibility.value='Mostrar Usando Visibility:visible';
}else{
obj.style.visibility='visible';
btvisibility.value='Probar Visibility:visible';
}
}
</script>
</body>
</html>
0 comentarios:
Publicar un comentario