UT2 Desarrollo de apps mediante lenguajes de script
Sintaxis de JS
eugeniaperez.es
ut 2: lenguajes de scripting
eugeniaperez.es
4 Inclusión de código JS
ut 2: lenguajes de scripting
eugeniaperez.es
4 Inclusión de código JS
- Scripts externos (ex1, ex2). Pueden ir en el head o en el body. Normalmente el código es más mantenible si se extrae a un fichero externo.
<html>
<head>
<script type="text/javascript" src="js/ex2.js" ></script>
</head>
<body>
<div>Página con el primer script</div>
</body>
</html>
alert("Testing my first snippet.Hello everybody!!");
ut 2: lenguajes de scripting
eugeniaperez.es
4 Inclusión de código JS
Principalmente el código JS puede ejecutarse:
- Scripts inmediatos (ex3, ex4): se ejecutan nada más cargar la página. Deben ir al final del body para incrementar la velocidad de carga.
<!DOCTYPE html>
<html>
<head>
<title>DW :: Client-side dev :: Primer script</title>
<meta charset="UTF-8">
</head>
<body>
<div>Página con el primer script</div>
<script type="text/javascript" src="js/ex2.js" ></script>
</body>
</html>
ut 2 lenguajes de scripting
eugeniaperez.es
4 Inclusión de código JS
- Scripts diferidos (ex5): se cargan con la página pero no se ejecutan hasta que el usuario lleva a cabo una acción (pulsa un botón, etc). Van dentro del body:
-
Esta opción está desaconsejada pues ensucia innecesariamente el código HTML de la página y complica su mantenimiento.
<p onclick=”alert(‘Testing my first snippet.’)”>Hello 4vientos!</p>
<p onclick=”greet()”>Hello 4vientos!</p>
...
function greet(){
alert(‘Testing my first snippet.’)
}
ut 2: lenguajes de scripting
eugeniaperez.es
4 Inclusión de código JS
Como se ha observado, el código Javascript debe ir entre las etiquetas <script></script>. Además es necesario incluir el atributo type de la etiqueta <script>. Este atributo es un estándar para identificar los diferentes contenidos, denominados tipos MIME (para Javascript text/JavaScript).
<script type="text/javascript">
...
</script>
ut 2: lenguajes de scripting
eugeniaperez.es
4 Etiqueta no script
- Algunos navegadores no disponen de soporte completo de JavaScript
- Otros navegadores permiten bloquearlo parcialmente
- Incluso algunos usuarios bloquean completamente el uso de JavaScript porque creen que así navegan de forma más segura.
En estos casos, se incluye un mensaje de aviso al usuario:
<noscript>
This page requires a JavaScript-enabled browser.
</noscript>
ut 2: lenguajes de scripting
eugeniaperez.es
5 Sintaxis del lenguaje
- No se tienen en cuenta los espacios en blanco.
- Se distinguen las mayúsculas y minúsculas.
- No se define el tipo de las variables: al crear una variable, no es necesario indicar el tipo de dato que almacenará.
- No es necesario terminar cada sentencia con el carácter de punto y coma (;), aunque se recomienda hacerlo.
Aunque sí en los métodos o variables
ut 2: lenguajes de scripting
eugeniaperez.es
5 Sintaxis del lenguaje - Comentarios
Existen dos tipos de comentarios:
- Los comentarios de una sola línea se definen añadiendo dos barras oblicuas (//) al principio de la línea.
- Los de varias se encierran entre los símbolos /* */.
// showing a test message with a comment in a single line
alert("Hello everybody!! ");
/*
Showing another message
With a multiple-line comment
*/
alert("Hello again!!");
ut 2: lenguajes de scripting
eugeniaperez.es
5 Sintaxis del lenguaje - Mostrar texto
La instrucción document.writeln permite a JavaScript mostrar el texto en el documento web. Es posible incluir etiquetas HTML dentro (ex6):
document.writeln("<h1>Probando a incluir texto</h1>");
document.writeln("<p>Desde código Javascript</p>");
ut 2: lenguajes de scripting
eugeniaperez.es
5 Sintaxis del lenguaje - Mostrar texto
Alert (ex7)
Muestra un mensaje por pantalla en una ventana emergente, siendo la aceptación del mismo la única acción posible por parte del usuario.
alert('any message here');
alert('Any message here\nAnother line');
ut 2: lenguajes de scripting
eugeniaperez.es
5 Sintaxis del lenguaje - Mostrar texto
Prompt (ex6)
Muestra un cuadro de texto en el que el usuario puede introducir información.
Es posible recoger el valor introducido desde el código. También es posible establecer un valor por defecto para el resultado (el segundo parámetro) de manera opcional.
var nombre = prompt("Introduzca su nombre");
var bebida = prompt("Bebida favorita","sidra");
ut 2: lenguajes de scripting
eugeniaperez.es
5 Sintaxis del lenguaje - Mostrar texto
Confirm (ex8)
Muestra un mensaje de confirmación para el cual habrá dos posibles acciones.
var confirma = confirm('¿Seguro que desea borrar este elemento');
if (confirma) {
alert('Se ha borrado el elemento');
}
ut 2: lenguajes de scripting
eugeniaperez.es
5 Sintaxis del lenguaje
Constantes
- mediante const
Variables
- mediante var
const PI = 3.14159;
var number1 = 3;
var number2 = 1;
var result = number1 + number2;
En JavaScript no es obligatorio inicializar las variables.
const a = 7;
document.writeln("a es " + a + ".");
ut 2: lenguajes de scripting
eugeniaperez.es
5 Sintaxis del lenguaje
Variables
- case-sensitive
- empezar con una letra, con un $ o bien con _.
var number1 = 3;
var number2 = 1;
var result = number1 + number2;
...tampoco es necesario declarar las variables.
Sí recomendable
ut 2: lenguajes de scripting
eugeniaperez.es
5 Sintaxis del lenguaje
Variables
- Es posible declararlas en una línea:
- Es lo mismo que:
var lastname=”Murakami”, age=50, job=”writer”;
var lastname=”Murakami,
age=50,
job=”writer”;
ut 2: lenguajes de scripting
eugeniaperez.es
5 Sintaxis del lenguaje
Tipos de variables
- Numéricas:
- Cadenas de texto:
- Booleanos:
var result = 16;
var total = 234.65;
var message1 = “Hi, welcome to Cuatrovientos!”;
var message2 = “Hope you guys like Javascript.”;
var finalMessage = message1 + message2;
var hasErrors = false;
ut 2: lenguajes de scripting
eugeniaperez.es
5 Sintaxis del lenguaje
Tipos de variables
- Arrays:
var months = new Array(12);
months[0] = “January”;
var february = months[1];
var months = ["January","February","March","April","May","June",
"July","August","September","October","November","December"]
var months = new Array ("January","February","March","April","May",
"June","July","August","September","October","November","December");
ut 2: lenguajes de scripting
eugeniaperez.es
5 Sintaxis del lenguaje
Operadores
- Asignación:
- Operadores matemáticos "acortados"
var totalPlayers = 11;
var x = 10;
var y = 5;
ut 2: lenguajes de scripting
eugeniaperez.es
5 Sintaxis del lenguaje
Operadores
- Incremento y decremento
- Influye el orden:
var number = 1;
number++; // In this case it’s the same like ++number
alert(number); // print 2
var number1 = 1;
var number2 = number1++;
number1 = 1;
number2 = ++number1;
number2 vale 1
number2 vale 2
ut 2: lenguajes de scripting
eugeniaperez.es
5 Sintaxis del lenguaje
Operadores Lógicos
- Negación
- AND y OR lógicos:
var hasErrors = true;
alert(!hasErrors); // Imprime false
var isTheLast = true;
var hasErrors = false;
var result = isTheLast && hasErrors; // result = false
isTheLast = true;
hasErrors = true;
result = isTheLast && hasErrors; // result = true
And &&
Or ||
ut 2: lenguajes de scripting
eugeniaperez.es
5 Sintaxis del lenguaje
Operadores Matemáticos
ut 2: lenguajes de scripting
eugeniaperez.es
5 Sintaxis del lenguaje
Operador Ternario
Operadores Relacionales
variablename=(condition)?value1:value2
voteable=(age<18)?"Too young":"Old enough";
ut 2: lenguajes de scripting
eugeniaperez.es
5 Sintaxis del lenguaje
Prioridad de operadores
Orden Operador
1 () Paréntesis
2 Multiplicación: *, División: /, Módulo: %
3 Adición/Concatenación: +, Substracción: -
4 ==, <, >,<=, >=, <>, !=, !>, !<
5 NOT
6 AND
7 BETWEEN, IN, LIKE, OR
8 =
ut 2: lenguajes de scripting
eugeniaperez.es
5 Sintaxis del lenguaje
Estructuras de control de flujo
Estructura if
if(condition) {
//code to be executed if condition is true
}
var showMsg = true;
var total = 0;
if(showMsg && total == 0){
alert("Hello all 2º DAM!");
}
//Concatenamos varias condiciones
ut 2: lenguajes de scripting
eugeniaperez.es
5 Sintaxis del lenguaje
Estructuras de control de flujo
Estructura if-else
if (age <12) {
alert ("You're too young");
} else if (age <19) {
alert ("Ups! You're a teenager…");
} else if (age <35) {
alert ("Wow! You're still young");
} else {
alert ("It’s time to take care of yourself a bit more");
}
ut 2: lenguajes de scripting
eugeniaperez.es
5 Sintaxis del lenguaje
Estructuras de control de flujo
Estructura switch
var day2Print = function(){
var x;
var day=new Date().getDay();
switch (day)
{
case 0:
x="Today it's Sunday";
break;
case 1:
x="Today it's Monday";
break;
case 2:
x="Today it's Tuesday";
break;
...
default:
x="Looking forward to the Weekend";
}
ut 2: lenguajes de scripting
eugeniaperez.es
5 Sintaxis del lenguaje
Estructuras de control de flujo
Estructura for .. in
var i = 0;
var msg= "";
var msg2= "";
var cities = ["Pamplona", "Estella", "Tudela","Olite", "Baztán","Burlada","Tafalla"];
for (i in cities){
msg = msg +" "+cities[i];
msg2 = msg2 +" "+i;
}
alert(msg);
alert(msg2);
ut 2: lenguajes de scripting
eugeniaperez.es
5 Sintaxis del lenguaje
Estructuras de control de flujo
Estructura for
Estructura while Estructura do... while
var foo = "I am a programmer. I control your life…";
for(var i = 0; i < 5; i++) {
alert(i+" – "+foo);
}
var result = 0;
var number = 100;
var i = 0;
while(i <= number) {
result += i;
i++;
}
alert(result);
do {
code block to be executed;
} while(condition);
var result = 0;
var number = 100;
var i = 0;
do {
result += i;
i++;
} while (i <= number)
alert(result);
ut 2: lenguajes de scripting
eugeniaperez.es
5 Sintaxis del lenguaje
Funciones de JavaScript: Cadenas de texto
- length
- + : concatenación -> concat()
- toUpperCase / toLowerCase
- charAt(pos)
- indexOf(char) / lastIndexOf(char)
- substring(init, end)
- split(":")
ut 2: lenguajes de scripting
eugeniaperez.es
5 Sintaxis del lenguaje
Funciones de JavaScript: Arrays
- length
- concat()
- join(" ")
- pop() / push(num) - elimina último elemento / añade final
- shift() / unshift() - elimina primer elemento / inserta ppo
- reverse()
var array1 = [1, 2, 3];
var array2 = array.concat(4, 5, 6); // array2 = [1, 2, 3, 4, 5, 6]
var array1 = [1, 2, 3];
array.reverse(); // array = [3, 2, 1]
ut 2: lenguajes de scripting
eugeniaperez.es
5 Sintaxis del lenguaje
Funciones de JavaScript: Numéricas
- NaN
- Infinity
- toFixed(decimales)
- parseInt() / parseFloat()
var num1 = 0;
var num2 = 0;
if (isNaN(num1 / num2)){
alert("No se permite la división entre 0")
} else {
alert("El resultado es "+ num1 / num2)
}
var input = prompt("Enter a value: ");
var inputParsed = parseInt(input); //Si se convierte una cadena da NaN
ut 2: lenguajes de scripting
eugeniaperez.es
Sintaxis de JS I
-
Descarga los apuntes de JS. ->
- Hemos repasado hasta la página 27.
-
Realiza las actividades 1-18.
- Soluciones en el aula
ut 2: lenguajes de scripting
eugeniaperez.es
5 Sintaxis del lenguaje
Definir funciones en JavaScript
- Reutilización de código
- Mejora el mantenimiento de las aplicaciones
var addition = function(a, b){
return a + b;
};
alert(addition(3, 5));
alert(addition(10, 7));
function addition(a, b) {
return a + b;
}
alert(addition(3, 5));
alert(addition(10, 7));
ut 2: lenguajes de scripting
eugeniaperez.es
5 Sintaxis del lenguaje
Definir funciones en JavaScript
<!DOCTYPE html>
<html>
<head>
<script>
function greet()
{
alert("Hello Cuatrovientos!");
}
</script>
</head>
<body>
<button onclick="greet()">Greeting</button>
</body>
</html>
<body>
<button onclick="greet()">Greeting</button>
<script type="text/javascript" src="js/ex2.js">
</script>
</body>
function greet()
{
alert("Hello Cuatrovientos!");
}
js/ex2.js
ut 2: lenguajes de scripting
eugeniaperez.es
5 Sintaxis del lenguaje
Definir funciones en JavaScript
function greet(){
alert('hola, qué tal');
}
var greet2 = function(nombre,edad){
alert ('hola: '+nombre+" con edad "+edad);
};
var calc = function(a, b){
return a + b;
};
var add = function(a, b){
toString(a + b);
};
var toString = function(cad){
alert(cad);
};
<body>
<button onclick="greet2('mikel',25)">Greeting</button>
<button onclick="add(3,8)">Addition</button>
<script type="text/javascript" src="js/ex2.js">
</script>
</body>
ut 2: lenguajes de scripting
eugeniaperez.es
5 Sintaxis del lenguaje
Definir funciones en JavaScript
var operands = function(){
var n1 = parseInt(prompt('Introduce el primer operando'));
var n2 = parseInt(prompt('Introduce el segundo operando'));
var result= n1+n2;
toString(result);
};
function toString(num){
alert("El resultado de la suma es: "+num);
}
<body>
<button onclick="operands()">Addition</button>
<script type="text/javascript" src="js/ex2.js">
</script>
</body>
ut 2: lenguajes de scripting
eugeniaperez.es
5 Sintaxis del lenguaje
Argumentos de funciones en JavaScript
- Número de argumentos pasado e indicado coincidentes
- El orden SÍ importa
- No se debe utilizar un número excesivo de argumentos
- El nombre no tiene que coincidir
var greet2 = function(name,age){
alert ('hola: '+name+" con edad "+age);
};
ut 2: lenguajes de scripting
eugeniaperez.es
5 Sintaxis del lenguaje
Argumentos de funciones en JavaScript
<p>Click the button to call a function with arguments and displays the result</p>
<button onclick="alert(calculateTotalPrice(650))">Let's calculate!</button>
<script>
var calculateTotalPrice = function(price) {
var taxes= 1.16;
var deliveryExpenses = 10;
var total = ( price * taxes) + deliveryExpenses;
return total;
};
</script>
ut 2: lenguajes de scripting
eugeniaperez.es
5 Sintaxis del lenguaje
Ámbito de las variables: global y local
<script>
function createMessage() {
var message= "The pure and simple truth is rarely pure and never simple";
}
createMessage();
alert(message);
</script>
Local: dentro de la función
solo tenemos alcance a la variable
desde su ámbito, o interiores.
ut 2: lenguajes de scripting
eugeniaperez.es
5 Sintaxis del lenguaje
Ámbito de las variables
Variable global, que está definida en cualquier punto del programa.
var message= "The pure and simple truth is rarely pure and never simple";
function createMessage() {
alert(message);
}
ut 2: lenguajes de scripting
eugeniaperez.es
5 Sintaxis del lenguaje
Ámbito de las variables
Por lo tanto, si las variables se declaran dentro de la función son locales, las que no han sido definidas con var se transforman en globales.
function createMessage() {
message = "The pure and simple truth is rarely pure and never simple";
}
createMessage();
alert(message);
ut 2: lenguajes de scripting
eugeniaperez.es
5 Sintaxis del lenguaje
Ámbito de las variables
El ámbito de una variable debe ser el mínimo posible. Si una variable solo es necesaria dentro de una función, no tiene sentido declararla como global.
ut 2: lenguajes de scripting
eugeniaperez.es
Objetos nativos de JS
Se utilizan directamente, sin necesidad de declararlos.
Existen 3:
- Nativos (Object, Number, Boolean, String, etc)
- De navegador (window, document, forms, etc)
- Definidos por el usuario
ut 2: lenguajes de scripting
eugeniaperez.es
Objetos nativos de JS
Date:
- getTime() / getMonth() /getFullYear() / getYear()
- getDate()
- getDay()
- getHours()/getMinutes()/ getSeconds()/ getMilliseconds()
var d = new Date();
var d = new Date(2013, 5, 1); // 1 de Junio de 2013 (00:00:00)
var fecha = new Date(2013, 5, 1, 19, 29, 39); // 1 de Junio de 2013 (19:29:39)
ut 2: lenguajes de scripting
eugeniaperez.es
Objetos nativos de JS
- Nativos: String, Math, Number -> pág. 32
- Navegador: Window, Document, Location, Screen, Navigator, History -> pág. 36
ut 2: lenguajes de scripting
eugeniaperez.es
Sintaxis de JS II
- Repasa por encima los objetos de JS: pág. 31-45
-
Revisa las actividades 19-21 de los apuntes.
- Soluciones subidas al aula
-
Entrega->A. EntregaJS
- 29 Septiembre 23:30
ut 2: lenguajes de scripting
eugeniaperez.es
DOM (Document Object Model)
Permite a los programadores web acceder y manipular las páginas HTML .
Nos proporciona una API para acceder y modificar el contenido, estructura y estilo de los elementos HTML.
DOM se ha convertido en una utilidad disponible para la mayoría de lenguajes de programación (Java, PHP, JavaScript) y cuyas únicas diferencias se encuentran
en la forma de implementarlo.
ut 2: lenguajes de scripting
eugeniaperez.es
Tipos de DOM
Se divide en 3 partes:
- Núcleo del DOM
- XML DOM
- HTML DOM (en el que nos vamos a centrar)
ut 2: lenguajes de scripting
eugeniaperez.es
Tipos de DOM
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.
Moviendo un elemento en
otra posición en el
DOM...
ut 2: lenguajes de scripting
eugeniaperez.es
Tipos de DOM
Nodos:
<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>
ut 2: lenguajes de scripting
eugeniaperez.es
Tipos de DOM
Nodos:
ut 2: lenguajes de scripting
eugeniaperez.es
Tipos de DOM
Nodos:
<p>Esta página es <strong>muy sencilla</strong></p>
Generaría:
ut 2: lenguajes de scripting
eugeniaperez.es
Tipos de DOM
Los tipos de nodos más habituales son:
- Document, nodo raíz del que derivan todos los demás.
- Element, representa cada una de las etiquetas HTML. Se trata del nodo que puede contener atributos y del que pueden derivar otros nodos.
- Attr, atributos de las etiquetas HTML, atributo=valor.
- Text, nodo que contiene el texto.
- DocumentType, indica la representación del DTD de la página. Define la estructura y sintaxis XML.
ut 2: lenguajes de scripting
eugeniaperez.es
Tipos de DOM
Lo interesante del árbol de nodos DOM, es que ofrece una manera cómoda y rápida de acceder a los distintos elementos de una página HTML de una manera programática. DOM proporciona dos métodos alternativos para acceder a un nodo específico:
- acceso a través de sus nodos padre.
- acceso directo.
ut 2: lenguajes de scripting
eugeniaperez.es
Tipos de DOM
getElementsByTagName()
Elementos de la página XHTML cuya etiqueta sea igual que el parámetro que se le pasa a la función.
Nodo a partir del cual se realiza la búsqueda de los elementos. En este caso, como se quieren obtener todos los párrafos de la página, se utiliza el valor document.
var parrafos = document.getElementsByTagName("p");
ut 2: lenguajes de scripting
eugeniaperez.es
Tipos de DOM
La función devuelve un array con todos los nodos que cumplen la condición de que su etiqueta coincide con el parámetro proporcionado. De este modo, se puede obtener el primer párrafo de la página de la siguiente manera:
var primerParrafo = parrafos[0];
for(var i=0; i<parrafos.length; i++) {
var parrafo = parrafos[i];
}
O recorrer todos párrafos de la página:
ut 2: lenguajes de scripting
eugeniaperez.es
Tipos de DOM
getElementsByName()
Busca los elementos cuyo atributo name sea igual al parámetro proporcionado. En el siguiente ejemplo, se obtiene los input con el nombre indicado:
First Name: <input name="fname" type="text" value="Ana"><br />
First Name: <input name="fname" type="text" value="Sara">
<script type="text/javascript">
var inputs = document.getElementsByName("fname");
alert(inputs[0].value);
</script>
ut 2: lenguajes de scripting
Tipos de DOM
getElementById()
Devuelve el elemento HTML cuyo atributo id coincide con el parámetro indicado en la función. Como el atributo id debe ser único para cada elemento de una misma página, la función devuelve únicamente el nodo deseado.
<div id="cabecera">
<a href="/" id="logo">Logo</a>
</div>
<script type="text/javascript">
var cabecera = document.getElementById("cabecera");
alert(cabecera.innerHTML);
var logo = document.getElementById("logo");
alert(logo.innerHTML);
alert(logo.textContent);
</script>
ut 2: lenguajes de scripting
eugeniaperez.es
Tipos de DOM
Ejemplo de uso del DOM
<!DOCTYPE html>
<html><head></head>
<body>
<p>Example that shows how useful can be the DOM!</p>
<div id="main">
<p>This example demonstrates the <b>getElementsByTagName</b> method</p>
<p>Another paragraph...</p>
</div>
<script>
var x=document.getElementById("main");
var parrafos=x.getElementsByTagName("p");
document.write('First paragraph inside "main" is ' + parrafos[0].innerHTML);
</script>
</body>
</html>
ut 2: lenguajes de scripting
eugeniaperez.es
Tipos de DOM
Acceder a nodos hijos
Para recuperar el primer y el último hijo se puede utilizar:
O comprobar el número de nodos hijo:
var doc = document.documentElement;
var obj_head = doc.children[0];
alert(obj_head.innerHTML);
var obj_body = doc.children[1];
alert(obj_body.children[0].innerHTML);
alert(doc.children.length);
ut 2: lenguajes de scripting
eugeniaperez.es
Tipos de DOM
Crear Nodos
Crear y añadir a la página un nuevo elemento HTML:
- Creación de un nodo de tipo Element.
- Creación de un nodo de tipo Text.
- Añadir el nodo Text como nodo hijo del nodo Element.
- Añadir el nodo Element a la página, en forma de nodo hijo del nodo correspondiente al lugar en el que se quiere insertar el elemento.
ut 2: lenguajes de scripting
eugeniaperez.es
Tipos de DOM
Crear Nodos
// Crear nodo de tipo Element
var parrafo = document.createElement(“p”);
// Crear nodo de tipo Text
var contenido = document.createTextNode(“Hola Mundo!”);
// Añadir el nodo Text como hijo del nodo Element
parrafo.appendChild(contenido);
// Añadir el nodo Element como hijo de la pagina
document.body.appendChild(parrafo);
ut 2: lenguajes de scripting
eugeniaperez.es
Tipos de DOM
Eliminar Nodos
En este caso, solamente es necesario utilizar la función removeChild():
var parrafo = document.getElementById(“provisional”);
parrafo.parentNode.removeChild(parrafo);
<p id=”provisional”>...</p>
ut 2: lenguajes de scripting
eugeniaperez.es
Tipos de DOM
Acceso a los atributos de un elemento
var enlace = document.getElementById("enlace");
alert(enlace.href); // muestra http://www...com
<a id="enlace" href="http://www...com">Enlace</a>
alert(enlace.id); // muestra enlace
ut 2: lenguajes de scripting
eugeniaperez.es
Tipos de DOM
Acceso a las propiedades CSS de un elemento
Se debe utilizar el atributo style:
Si es compuesta, se modifica un poco su nombre:
var imagen = document.getElementById("imagen");
alert(imagen.style.margin);
<img id="imagen" style="margin:0; border:0;" src="logo.png" />
var parrafo = document.getElementById("parrafo");
alert(parrafo.style.fontWeight); // muestra “bold”
<p id="parrafo" style="font-weight: bold;">Hola</p>
ut 2: lenguajes de scripting
eugeniaperez.es
Tipos de DOM
Acceso a las propiedades CSS de un elemento
Si es compuesta, se modifica un poco su nombre:
- font-weight se transforma en fontWeight
- line-height se transforma en lineHeight
- border-top-style se transforma en borderTopStyle
- list-style-image se transforma en listStyleImage
ut 2: lenguajes de scripting
eugeniaperez.es
Tipos de DOM
Modificar contenido HTML:
Mediante la propiedad innerHTML:
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML="Hello class!";
</script>
ut 2: lenguajes de scripting
eugeniaperez.es
Tipos de DOM
Modificar atributo HTML:
Para modificar un atributo simplemente accedemos al atributo:
<img id="image" src="white.gif">
<script>
document.getElementById("image").src="black.jpg";
</script>
ut 2: lenguajes de scripting
eugeniaperez.es
Tipos de DOM
Modificar estilo de un elemento HTML:
Para modificar el estilo se utiliza sytle:
<p id="p2">Hello everybody!</p>
<script>
document.getElementById("p2").style.color="blue";
</script>
<p>The paragraph above was changed by a script.</p>
ut 2: lenguajes de scripting
Tipos de DOM
Modificar estilo de un elemento HTML:
Con setAttribute:
//Modifico el valor del id del párrafo
var valorId = p2.getAttribute("id");
p2.setAttribute("id","parrafoTexto");
alert(p2.id);
// Establezco un valor en href del enlace
document.getElementById("enlace").setAttribute("href", "http://www.w3schools.com");
// Recupero el enlace anterior
var x = document.getElementById("enlace");
// Si el elemento tiene atributo target (es donde se abre el vínculo) se
// abra en otra ventana
if (x.hasAttribute("target")) {
x.setAttribute("target", "_blank");
}
Añade el atributo target="_self" al enlace
ut 2: lenguajes de scripting
eugeniaperez.es
Tipos de DOM
Modificar los estilos de un elemento:
Se utiliza className a través del selector CSS:
Por lo que se crea el estilo hidden:
var link= document.getElementById("enlace");
link.className = "hidden";
<style type="text/css">
.hidden { display: none; }
</style>
ut 2: lenguajes de scripting
eugeniaperez.es
Sintaxis de JS II
-
Realiza las actividades 22-29 de los apuntes.
- Soluciones en el aula
- Haz el Test: T3. JavaScript I
...Acordaros de que tenemos una entrega...
A.Entrega JS
UT2.B
By eugenia_perez
UT2.B
- 1,272