JavaScript I

JavaScript i
CFGS asir
Módulo: Lenguajes de Marcas
Índice de contenido
● ¿Que es javascript?
● Usos de javascript
● Cómo utilizar javascript
● Salida de datos con javaScript
○ Alert
○ document.write
○ innerHTML
● Comentarios
● Variables
○ Utilización de Variables
● Operadores
● Operando con los elementos existentes en una web
● Ejercicios Propuestos
¿ Que es JAvascript
● Se trata de uno de los lenguajes de programación más
utilizados para programación web
● Complementa el uso de HTML y CSS.
● Con HTML creamos la estructura del documento
● Con CSS le damos estilo y formato
● Con JAVASCRIPT le damos comportamiento y dinamismo.
Usos de javascript
● Con JavaScript (js) podemos hacer cosas como:
○ Controlar de forma dinámica el contenido HTML de una
página
document.getElementById(‘elemento’).innerHTML=”Hola
mundo” [....]
○ Cambiar los atributos de las etiquetas HTML existentes

en un documento
document.getElementById(‘idimagen’).src=”ruta_nueva_image
n” [...]
Usos de javascript
● Cambiar los estilos asociados a las etiquetas HTML
existentes en un documento.
document.getElementById(“elemento”).innerHTML=”Hola
mundo” [....]
● Validar elementos de formularios html
document.getElementById("elmentoformulario").value;
[....]
como utilizar javascript
● Existen dos formas de incluir código javascript en una
página web
○ Directamente con la etiqueta <script>.....</script> puesta en el body
o en el head
<html>
<html> <head>
<body> <script>
<h1>Mi primer script</h1> alert(‘mi segundo script’);
<script> </script>
alert(‘mi primer script’); </head>
</script> <body>
</body> <h1>Mi segundo script</h1>
</html> </body>
</html>
como utilizar javascript
● Poniendo el código javascript en un fichero externo con
extensión .js y haciendo referencia a el desde nuestra
página web con la etiqueta <script src=’fichero.js’></script>
<html>
fichero.js <head>
<script src=’fichero.js’></script>
</head>
alert (‘hola mundo’); <body>
<h1>Mi segundo script</h1>
<script src=’fichero.js’></script>
</body>
</html>
salida de datos con javascript
● JavaScript permite la salida (escritura) de datos
mediante los siguientes mecanismos:
○ Función alert(‘mensaje de salida’);
■ alert (‘error’);
■ alert (5+6);
○ Función document.write(“texto”)
■ document.write(“hola a todos”)
■ document.write(“<h1>Hola a todos</h1>”);
■ document.write(“<table><tr><td>esto es una
tabla</td></tr></table>”)
La función alert solo permite mostrar mensajes a modo de információn o advertencia en una ventana
emergente.
La función document.write sirve para escribir dentro del body y admite escritura de etiquetas html
salida de datos con javascript
● Función innerHTML
○ Sirve para “incrustar” código HTML en un elemento que existe
previamente dentro del body. Para poder hacer esta operación se hace
uso de la función document.getElementById(‘idelemento’).innerHTML de
<head> JavaScript
<script>
function completar()
{
document.getElementById(‘parrafo’).innerHTML=”<h1>esto es un párrafo</h1>”;
document.getElementById(‘capa’).innerHTML=”<p style=’background-color:red’>esto es una capa</p>”
}
</script>
</head>
<body>
<p id=’parrafo’></p>
<div id=’capa’></capa>
<script>completar();</script>
</body> OJO!! cuando en una cadena de caracteres necesitemos insertar una
comilla tendremos la precaución de que NO SEAN comillas del
mismo tipo con el que hemos iniciado la cadena de caracteres
funciones
● Son fragmentos de código fuente que sirven para organizar
nuestros scripts de javascript y que pueden ser invocadas
tantas veces como se necesiten desde cualquier parte de
una web.
● La sintaxis general de una función es:
function nombre_funcion (parametro1, parametro2,...parametron)

{
//código de la función Los parámetros son valores que
reciben las funciones cuando
return valor Con el comando return la son invocadas. Se podrán usar
} función puede devolver dentro de ellas como variables.
valores a quien la invocó. El
comando return es opcional
comentarios
● Un comentario es un fragmento de texto que carece de
valor a la hora de ejecutar un script de javascript.
● Los comentarios de una sola línea se pueden poner con la
secuencia //
○ alert (‘esto es una sentencia’); // esto es un comentario
● Los comentarios de varias líneas se pueden indicar con la
secuencia /* */
/* esto es un comentario
de varias lineas que se
cerrará justo aquí */
alert (‘esto es una sentencia que está fuera del comentario’)
variables
● Una variable sirve para almacenar valores que
utilizaremos en nuestros scripts
● En javaScript podemos declarar una variable simplemente
asignando un valor
○ x = 10.25;
○ y= ‘esto es “una” variable de cadena y además tiene comillas doble’
○ t=”esto también ‘es una variable’ con comillas simples dentro”
○ z=true
○ vector=[‘ana’,’luis’,’pedro’]
○ texto=”<table><tr><td>tabla</td></tr></table>”
○ codigo=”<h1 style=’color:red’>hola texto</h1>”
ojo!! cuando en una cadena de caracteres haya que
introducir comillas tendremos la precaución de que no
sean del mismo tipo que las que abren dicha cadena de
caracteres.
variables
● Opcionalmente podemos crear variables sin asignarle un
valor, haciendo uso de la sentencia var
var x;
Nótese que las variables
x=10.05; que guardan cadenas de
var y= ‘esto es una variable de cadena’; caractéres hay que
var t; entrecomillarlas.
t=”esto también es una variable de cadena”
var z;
z=true;
var vector;
vector=[“ana”,”pedro”,”luis”];
El carácter decimal en variables numéricas es el .
Las variables de tipo cadena de caractéres van entrecomilladas
Las variables de tipo booleano NO van entrecomilladas
Las variables de tipo Array (vector) separan sus valores con la , simple.
Utilización variables
● Almacenar valores y mostrarlos en alguna función de
salida
<body>
<div id=”resultado”></div>
<script>
var x =10; Con innerHTML podemos insertar código html
en cualquier lugar de un documento html.
alert(x);
document.write(x);
document.getElementById(‘resultado’).innerHTML=’<h1>’+x+’</h1>’
</script>
Para entrelazar código html con variables se usa el operador + que sirve para concatenar cadenas de
caracteres. No se puede usar el valor de la variable directamente en una cadena de caracteres.
<body> Un uso muy provechoso
de las variables es
<table id='tabla'>
para almacenar
<tr> fragmentos de css o
<td>esta tabla tendrá formato al ejecutar el script</td> html que podemos
</tr> utilizar en múltiples
</table> zonas de una web
<script>
var estilo = "background-color:lightgrey;border-collapse:collapse;border-style: 1
px solid red;"
document.getElementById(‘tabla’).style=estilo;
</script>
</body>
● Otra versión más elegante del ejercicio anterior
<head>
<script>
function formato()
{
var estilo="table {background-color:lightgrey;border-collapse:collapse;border: 1px solid red}"
document.write("<style>"+estilo+"</style>");
}
</script>
</head>
<body>
<script>formato();</script>
<table id='tabla'>
<tr>
<td>esta tabla tendrá formato al ejecutar el script</td>
</tr>
</table>
</body>
Operadores
● Operador de asignación =
● Operador de suma y concatenación de cadenas +
● Operador de resta -
● Operador de multiplicación *
● Operador de división /
● Operador resto de la división %
● Incremento unario ++
● Decremento unario --
● Operadores de acumulación += -= /= *=
Operadores
● Operador de asignación =
○ Sirve para establecer valores en las variables
■ x=10
■ y=10.05
■ z=”cadena de caracteres”
● Operador de suma y concatenación +
○ Sirve para sumar valores numéricos
■ x=10+5 // resultado 15
■ y=10.05+20 // resultado 30.05
○ Pero también se usa para concatenar valores de tipo cadena
■ x=”hola” + “ mundo” // x guardará “hola mundo”
■ y=5 + “hola” // y guardará “5hola”
■ z=”<table><tr><td>”+x+”</td></tr></table>” //z guardará la cadena
“<table><tr><td>hola mundo</td></tr></table>”
Operadores
● Operador de resta -
○ Sirve para restar valores numéricos
■ x=10-5 // resultado 5
■ y=10.05-20 // resultado -10.05
● Operador *
○ Sirve para multiplicar
■ x=10*5 //resultado 50
● Operador /
○ Sirve para hacer la división de valores numéricos
■ x=5/2 //resultado 2.5
● Operador %
○ Devuelve el resto de la división entera
■ x=4%2 //resultado 0
■ y=5%2 //resultado 1
Operadores
● Incremento unario ++
○ Sirve para incrementar en uno una variable numérica
■ x=20;
■ x++; //x ahora tendrá el valor 21
● decremento unario --
● Sirve para incrementar en uno una variable numérica
○ x=20;
○ x--; //x ahora tendrá el valor 19
● Operadores de acumulación
○ Sirven para operar sobre un valor ya existente
■ x=10
● x+=10 // es equivalente a x=x+10-> 20
● x-=10 // es equivalente a x=x-10->0
● x/=2 // es equivalente a x=x/2->5
● x*=10 // es equivalente a x=x*10->100
Operando con elementos existentes en una web
● Muchas veces necesitamos recoger los valores o atributos
de elementos que existen en el body de nuestra web para
operar con ellos.
● Desde JavaScript podemos buscar y acceder a elementos
dentro de nuestro body:
○ Mediante el id del elemento document.getElementById(‘idelemento’)
○ Mediante el nombre de una etiqueta
document.getElementsByTagName(‘etiquetaHTML’)
○ Mediante la clase CSS a la que pueda pertenecer
document.getElementsByClassName(‘claseCSS’)
● Por el momento utilizaremos solamente la función
document.getElementById(‘idelemento’)
● El éxito de su funcionamiento se basa en que dentro del body aquellos elementos
con los que queramos trabajar tengan asignado el atributo id.
● Un posible uso es extraer valores de elementos de un formulario html mediante
la propiedad value
<body>
<p id=’parrafo’></p> Asignamos los id a dos elementos input del
<input id=’nombre’ type=”text” /> body
<input id=’apellidos’ type=”text” />
<script> Obtenemos los valores de los cuadros de
cuadro1=document.getElementById(‘nombre’).value; texto mediante la propiedad value y los
cuadro2=document.getElementById(‘apellidos’).value guardamos en dos variables
document.write(cuadro1+’<br>‘+cuadro2);
</script> usamos los valores para la
</body> operación que queramos
● Otro uso es modificar un atributo de una etiqueta html
<body>
<p id=’parrafo’></p> Asignamos los id a la imagen que
<img id=’imagen’ src=”” ></img> inicialmente no tiene asignada la propiedad
<script> src
imagen=document.getElementById(‘nombre’);
imagen.src=’/ruta-de-la-imagen’; Guardamos la imagen completa en una
imagen.height=100; variable y luego tratamos dicha variable
imagen.width=200; como si fuera la imagen cambiándole
</script> propiedades como la ruta el ancho o el alto
</body>
Ejercicios Propuestos
1. Crear una web que llame a un script de javaScript que dibuje una tabla de
una fila y una columna sobre un div llamado resultado.
2. Modificar el ejercicio anterior para que el script contenga una variable
de cadena de caracteres que guarde la cadena necesaria para darle color de
fuente azul y tamaño 12 pto a la tabla del ejercicio anterior, así como un
borde simple de 1px azul. Las filas pares tendrán color de fondo
diferente.
3. Crear una web que tenga dos cuadros de texto y un botón y hacer un script
de javaScript para que cuando hagamos click sobre él se muestre con la
función alert la suma de lo escrito en ambos cuadros de texto. Para
convertir una variable a número puedes utilizar la función
parseInt(variable).
4. Modificar el ejercicio anterior para que en lugar del alert con la función
innerHTML se muestre en una tabla el contenido de cada cuadro de texto y
el resultado de la suma
5.-Crear una web que tenga una imagen insertada. Incluir a dicha web
un script que cambie los valores de ancho y alto de esta imagen para
que tenga un tamaño de 100x100. El tamaño se cambiará cuando ocurra
el evento onmouseenter sobre la imagen. El código se organizará en
una funcion llamada cambiarDimensiones.
6.-Crear una variable con el código css necesario para redondear los
bordes de la imagen anterior del ejercicio anterior y aplicarla en
el evento onmouseout de la imagen. Tendrás que crear otra función.
7.-Crear una web que tenga una imagen y dos cuadros de texto en los
que se puedan poner los valores para el ancho y alto de la imagen.
Incluir también un botón para que cuando lo pulsemos se redimensione
la imagen a los valores introducidos en los cuadros de texto.
8.- Dada una web que tenga cuatro cuadros de texto, dos de ellos
perteneciente a una clase llamada fondo (class=”fondo”) . Se pide
hacer una función en javascript que mediante getElementsByClassName
aplique el siguiente estilo almacenado en una variable llamada css.
La variable la puedes declarar de la siguiente forma:
var css=”border: 1px solid red; font-family:arial;background-color:tomato;color:green”
Examen
Examen

JavaScript I

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

JavaScript I

Cargado por

Copyright:

Formatos disponibles

JavaScript i

○ Cambiar los atributos de las etiquetas HTML existentes

● Validar elementos de formularios html

function nombre_funcion (parametro1, parametro2,...parametron)

var css=”border: 1px solid red; font-family:arial;background-color:tomato;color:green”

También podría gustarte