JavaScript (1)

•

SIN SIGLA

Jose ricaurte

4/5/2024

¡Este material tiene más páginas!

Entonces, ¿te gustó este material?

Ayude a animar a otros estudiantes a mejorar el contenido

¿Te gustó este material? ¡Compartir! 🧡

Javascript

1658 Materiales compartidos

Descarga la aplicación para disfrutar aún más

Lea materiales sin conexión, sin usar Internet. Además de muchas otras características!

Vista previa del material en texto

appswebudea@gmail.com
• Lenguaje de programación interpretado 
que se utiliza principalmente para crear 
páginas web dinámicas.• Formas de incluir JavaScript en 
documentos HTML:– En el mismo documento HTML– En un archivo externo– En un elemento HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
alert("Un mensaje de prueba");
</script>
</head>
<body>
<p>Un párrafo de texto.</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="codigo.js"></script>
</head>
<body>
<p>Un párrafo de texto.</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p 
onclick='this.style="background:red;color:white"'>
Un párrafo de texto.
</p>
</body>
</html>
Características básicas del lenguaje• Se distinguen mayúsculas de minúsculas.• No se define el tipo de las variables.• Las sentencias se separan por punto y coma (;).• Se pueden usar comentarios: // , /* */• Declaración de variables: – operador var, define el ámbito de la variable.– nombres sólo formados por letras, números y los 
símbolos $ (dólar) y _ (guión bajo).– El primer carácter no puede ser un número.
Tipos de datos
Algunos operadores
Algunos operadores
Algunos operadores
Algunos operadores
Estructuras de control– Estructura if
if(condicion) { ... }– Estructura if … else
if(condicion) { ... }
else { … }– Estructura for
for(ini;cond;inc) {...}– Estructura for … in
for(index in array) {...}
– break, continue.– Estructura while
while(condición) { ... }– Estructura do … while
do{...}while (condición)– Estructura switch
switch(variable) {
case valor1: ... break;
case valor2: ... break;
...
default: ... }
Funciones– Definidas por el usuario
function name [param , param , …] 
{ 
... 
[return varx;]
}
– Algunas funciones definidas por el lenguaje
 unacadena.toUpperCase()
 unacadena.toLowerCase()
 unacadena.chartAt(posición): devuelve el 
carácter ubicado en la posicón dada.
 unacadena.indexOf(caracter): calcula la posición 
del carácter indicado. Devuelve -1 si no lo 
encuentra. La búsqueda es de izquierda a 
derecha y devuelve siempre la primera 
coincidencia.
 unacadena.lastIndexOf(caracter)
 unacadena.substring(inicio, final): extrae una 
porción de una cadena de texto. Si sólo se 
indica el parámetro inicio, la función devuelve 
la parte de la cadena original correspondiente 
desde esa posición hasta el final
 split(separador): convierte una cadena de texto 
en un array de cadenas de texto. La función 
parte la cadena de texto determinando sus trozos 
a partir del carácter separador. 
 array.length: calcula el número de elementos que 
contiene el arreglo.
 array.join(separador): es la función contraria a 
split(). Une todos los elementos de un array 
para formar una cadena de texto. Para unir los 
elementos se utiliza el carácter separador 
indicado.
 array.pop(): elimina el último elemento del 
array y lo devuelve. El array original se 
modifica y su longitud disminuye en 1 elemento.
 array.push(): añade uno o más elementos al final 
del array.
 array.shift(): elimina el primer elemento del 
array y lo devuelve. El array original se ve 
modificado y su longitud disminuida en 1 
elemento.
 array.unshift(): añade uno o más elementos al 
principio del array.
 array.reverse(): modifica un array colocando sus 
elementos en el orden inverso a su posición 
original.
 toFixed(digitos): devuelve el número original 
con tantos decimales como los indicados por el 
parámetro digitos y realiza los redondeos 
necesarios.
 parseFloat(cadena)
 parseInt(cadena)
 isInteger(valor)
 Math.PI
 Math.pow( base , exponente )
 Math.floor(número)
 Math.ceil(número)
 Math.round(número)
 Math.random( ):devuelve un real entre 
[ 0 , 1 )
 Math.sqrt(número)
DOM(Document Object Model)• La creación del DOM es una de las 
innovaciones que más ha influido en el 
desarrollo de las páginas web dinámicas y de 
las aplicaciones web más complejas.• El DOM provee una representación, 
estructurada lógicamente, de un documento 
y un conjunto de objetos y métodos para 
manipular esa estructura. 
DOM(Document Object Model)
DOM transforma todos los documentos HTML 
en un conjunto de elementos llamados nodos, 
que están interconectados y que representan 
los contenidos de las páginas web y las 
relaciones entre ellos. Por su aspecto, la unión 
de todos los nodos se llama "árbol de nodos".
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8”>
<title>Página sencilla</title>
</head>
<body>
<p>Esta página es <strong>muy 
sencilla</strong>
</p>
</body>
</html>
Se transforma en el siguiente árbol de nodos:
DOM• Una vez construido el árbol, ya es posible manipular de 
forma sencilla la página: acceder al valor de un elemento, 
establecer el valor de un elemento, mover un elemento de la 
página, crear y añadir nuevos elementos, etc.• DOM proporciona dos métodos alternativos para acceder a 
un nodo específico: acceso a través de sus nodos padre y 
acceso directo.• Acceso directo a los nodos
 document.getElementById();
 elemento.innerHTML()
 elemento.attribute = valor
 elemento.setAttribute (attribute,valor)
 elemento.style.propiedad = valor
Eventos• JavaScript define numerosos eventos que permiten una 
interacción completa entre el usuario y las 
páginas/aplicaciones web. • La pulsación de una tecla constituye un evento, así como 
pinchar o mover el ratón, seleccionar un elemento de un 
formulario, redimensionar la ventana del navegador, etc.• JavaScript permite asignar una función a cada uno de los 
eventos. Este tipo de funciones se denominan "event 
handlers" en inglés y suelen traducirse por "manejadores de 
eventos".
document.getElementById(id).evento=function(){code}
Eventos
Eventos
Referencia:• http://www.w3.org/DOM/• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide• http://librosweb.es/javascript/• http://www.w3schools.com/js/js_htmldom.asp