Referencia HTML Unicode (UTF-8)

El Consorcio Unicode
El Consorcio Unicode desarrolla el Estándar Unicode. Su objetivo es reemplazar los juegos de
caracteres existentes con su Formato de Transformación Unicode (UTF) estándar.

El estándar Unicode se ha convertido en un éxito y se implementa en HTML, XML, Java,

JavaScript, correo electrónico, ASP, PHP, etc. El estándar Unicode también es compatible con
muchos sistemas operativos y todos los navegadores modernos.

El Consorcio Unicode coopera con las principales organizaciones de desarrollo de normas,

como ISO, W3C y ECMA.
Los juegos de caracteres Unicode
Unicode puede ser implementado por diferentes conjuntos de caracteres. Las codificaciones más
comúnmente utilizadas son UTF-8 y UTF-16:

Character-set Description
UTF-8 Un personaje en UTF8 puede tener de 1 a 4 bytes de longitud. UTF-8 puede representar
cualquier carácter en el estándar Unicode. UTF-8 es retro compatible con ASCII. UTF-8 es la
codificación preferida para correo electrónico y páginas web
UTF-16 El formato de transformación Unicode de 16 bits es una codificación de
caracteres de longitud variable para Unicode, capaz de codificar todo el repertorio Unicode.
UTF-16 se utiliza en los principales sistemas operativos y entornos, como Microsoft Windows,
Java y .NET.
Consejo: Los primeros 128 caracteres de Unicode (que corresponden uno a uno con ASCII) se
codifican utilizando un solo octeto con el mismo valor binario que ASCII, lo que hace que el
texto ASCII válido también sea válido como Unicode con codificación UTF-8.
¡HTML 5 es compatible con UTF-8 y UTF-16!
El estándar HTML5: Unicode UTF-8
Debido a que los juegos de caracteres en ISO-8859 tenían un tamaño limitado y no eran
compatibles en entornos multilingües, el Consorcio Unicode desarrolló el Estándar Unicode.
El estándar Unicode cubre (casi) todos los caracteres, signos de puntuación y símbolos del
mundo.
Unicode permite procesar, almacenar y transportar texto independientemente de la plataforma y
el idioma.
La codificación de caracteres predeterminada en HTML-5 es UTF-8.
Si una página web HTML5 usa un conjunto de caracteres diferente a UTF-8, debe especificarse
en la etiqueta <meta> como:
Ejemplo
<meta charset="ISO-8859-1">

La diferencia entre Unicode y UTF-8

Unicode es un conjunto de caracteres. UTF-8 es la codificación.

Unicode es una lista de caracteres con números decimales únicos

(puntos de código). A = 65, B = 66, C = 67,....

Esta lista de números decimales representa la cadena "hola": 104 101

108 108 111

La codificación es la forma en que estos números se traducen en

números binarios para ser almacenados en una computadora:

La codificación UTF-8 almacenará "hello" así (binario): 01101000

01100101 01101100 01101100 01101111

La codificación traduce los números a binarios. Los juegos

de caracteres traducen caracteres a números.

Códigos de caracteres HTML5 UTF-8

A continuación se muestra una lista de algunos de los códigos de
caracteres UTF-8 compatibles con HTML5:

Mucho como el álgebra

En este ejemplo, price1, price2 y total son variables:
En la programación, al igual que en álgebra, utilizamos variables (como
price1) para mantener los valores.

En la programación, al igual que en álgebra, utilizamos variables en

expresiones (total = precio1 + precio2).

Del ejemplo anterior, puedes calcular el total para ser 11.

Las variables de JavaScript son contenedores para almacenar valores de

datos.

Identificadores de JavaScript
Todas las variables JavaScript deben identificarse con nombres
únicos .

Estos nombres únicos se llaman identificadores .

Los identificadores pueden ser nombres cortos (como xey) o nombres

más descriptivos (edad, suma, totalVolumen).

Las reglas generales para construir nombres para variables

(identificadores únicos) son:

 Los nombres pueden contener letras, dígitos, guiones bajos y

signos de dólar.
 Los nombres deben comenzar con una letra
 Los nombres también pueden comenzar con $ y _ (pero no lo
usaremos en este tutorial)
 Los nombres son sensibles a las mayúsculas y minúsculas (yy son
variables diferentes)
  Las palabras reservadas (como palabras clave de JavaScript) no se
pueden usar como nombres

Los identificadores de JavaScript distinguen entre mayúsculas y

minúsculas.

El operador de asignación
En JavaScript, el signo igual (=) es un operador de "asignación", no un
operador "igual a".

Esto es diferente de álgebra. Lo siguiente no tiene sentido en álgebra:

x = x + 5

En JavaScript, sin embargo, tiene perfecto sentido: asigna el valor de x

+ 5 a x.

(Calcula el valor de x + 5 y coloca el resultado en x. El valor de x se

incrementa en 5)

Tipos de datos de JavaScript

Las variables de JavaScript pueden contener números como 100 y
valores de texto como "John Doe".

En la programación, los valores de texto se llaman cadenas de texto.

JavaScript puede manejar muchos tipos de datos, pero por ahora, solo
piense en números y cadenas.

Las cadenas están escritas dentro de comillas dobles o simples. Los

números se escriben sin comillas.

Si coloca un número entre comillas, se tratará como una cadena de

texto.
Declarando (Creando) Variables de
JavaScript
Crear una variable en JavaScript se llama "declarar" una variable.

Usted declara una variable de JavaScript con la palabra clave var :

var carName;

Después de la declaración, la variable no tiene valor. (Técnicamente

tiene el valor de indefinido)

Para asignar un valor a la variable, use el signo igual:

carName = "Volvo";

También puede asignar un valor a la variable cuando la declare:

var carName = "Volvo";

En el siguiente ejemplo, creamos una variable llamada carName y le

asignamos el valor "Volvo".

Luego "enviamos" el valor dentro de un párrafo HTML con id = "demo":

Una declaración, muchas variables
Puede declarar muchas variables en una declaración.

Comience la instrucción con var y separe las variables por comas :

Una declaración puede abarcar múltiples líneas:

var person = "John Doe",

carName = "Volvo",
price = 200;

Valor = indefinido
En los programas de computadora, las variables a menudo se declaran
sin un valor. El valor puede ser algo que debe calcularse, o algo que se
proporcionará más tarde, como la entrada del usuario.

Una variable declarada sin un valor tendrá el valor indefinido .

La variable carName tendrá el valor indefinido después de la ejecución
de esta declaración:

Re-declarando variables de JavaScript

Si vuelve a declarar una variable de JavaScript, no perderá su valor.

La variable carName todavía tendrá el valor "Volvo" después de la

ejecución de estas declaraciones:

var carName = "Volvo";

var carName;

Aritmética de JavaScript
Al igual que con el álgebra, puede hacer aritmética con variables de
JavaScript, usando operadores como = y +:

También puede agregar cadenas, pero las cadenas se concatenarán:

Ejemplo
var x = "John" + " " + "Doe";

También prueba esto:

Si coloca un número entre comillas, el resto de los números se tratarán

como cadenas y se concatenarán.

Ahora prueba esto:

var x = 2 + 3 + "5";

Operadores de Asignación de JavaScript

perator Example Same As

= x=y x=y

+= x += y x=x+y

-= x -= y x=x-y

*= x *= y x=x*y

/= x /= y x=x/y

%= x %= y x=x%y

<<= x <<= y x = x << y

>>= x >>= y x = x >> y

>>>= x >>>= y x = x >>> y

&= x &= y x=x&y

^= x ^= y x=x^y
 |= x |= y x=x|y

**= x **= y x = x ** y

El operador ** = es una parte experimental de la propuesta de

ECMAScript 2016 (ES7). No es estable en todos los navegadores. No lo
uses.

El operador de asignación + = agrega un valor a una variable.

El operador - = asignación resta un valor de una variable.

El * = operador de asignación multiplica una variable.

La asignación / = divide una variable.

El operador de asignación% = asigna un resto a una variable.

Tipos de datos de JavaScript

❮ AnteriorSiguiente ❯

¿Tiene algún sentido agregar "Volvo" a dieciséis? ¿Producirá un error o

producirá un resultado?

JavaScript tratará el ejemplo anterior como:

var x = "16" + "Volvo";

Al agregar un número y una cadena, JavaScript tratará el número como
una cadena.

Puede usar comillas dentro de una cadena, siempre que no coincidan

con las comillas que rodean la cadena:

Objetos de JavaScript
Los objetos de JavaScript están escritos con llaves.

Las propiedades del objeto se escriben como pares nombre: valor,

separados por comas.

Ejemplo
var person = {firstName:"John", lastName:"Doe", age:50,
eyeColor:"blue"};
El tipo de operador
Puede usar el operador typeof JavaScript para encontrar el tipo de una
variable JavaScript.

El operador typeof devuelve el tipo de una variable o una expresión:

Nulo
En JavaScript, null es "nada". Se supone que es algo que no existe.

Desafortunadamente, en JavaScript, el tipo de datos de null es un

objeto.

Puede considerarlo un error en JavaScript que typeof null es un

objeto. Debería ser nulo.

Puede vaciar un objeto estableciéndolo en nulo:

También puede vaciar un objeto configurándolo como indefinido:

Datos primitivos
Un valor de datos primitivo es un único valor de datos simple sin
propiedades y métodos adicionales.

El operador typeof puede devolver uno de estos tipos primitivos:

 cuerda
 número
 booleano
 indefinido

Ejemplo
typeof "John" // Returns "string"
typeof 3.14 // Returns "number"
typeof true // Returns "boolean"
typeof false // Returns "boolean"
typeof x // Returns "undefined" (if x has no
value)
Funciones de JavaScript
Una función de JavaScript es un bloque de código diseñado para
realizar una tarea en particular.

Una función de JavaScript se ejecuta cuando "algo" la invoca (la

llama).

Ejemplo
function myFunction(p1, p2) {
return p1 * p2; // The function returns the
product of p1 and p2

Sintaxis de la función de JavaScript

Una función de JavaScript se define con la palabra clave function ,
seguida de un nombre , seguido de paréntesis () .

Los nombres de funciones pueden contener letras, dígitos, subrayados y

signos de dólar (las mismas reglas que las variables).

Los paréntesis pueden incluir nombres de parámetros separados por

comas:
( parámetro1, parámetro2, ... )

El código que se ejecutará, por la función, se coloca entre llaves: {}

function name(parameter1, parameter2, parameter3) {
code to be executed
}

Los parámetros de función se enumeran dentro de los paréntesis () en

la definición de la función.

Los argumentos de función son los valores recibidos por la función

cuando se invoca.

Dentro de la función, los argumentos (los parámetros) se comportan

como variables locales.

Una función es muy similar a un procedimiento o una subrutina, en otros

lenguajes de programación.

Función de retorno
Cuando JavaScript alcanza una declaración de devolución , la función
dejará de ejecutarse.

Si la función se invocó desde una declaración, JavaScript "devolverá"

para ejecutar el código después de la declaración de invocación.

Las funciones a menudo calculan un valor de retorno . El valor de

retorno es "devuelto" a la "persona que llama":

Ejemplo
Calcule el producto de dos números y devuelva el resultado:

var x = myFunction(4, 3); // Function is called, return value

will end up in x

function myFunction(a, b) {
return a * b; // Function returns the product of
a and b
}

El resultado en x será:

12
¿Por qué funciones?
Puede reutilizar el código: defina el código una vez y úselo muchas
veces.

Puede usar el mismo código muchas veces con diferentes argumentos

para producir resultados diferentes.

Ejemplo
Convierta Fahrenheit en Celsius:

function toCelsius(fahrenheit) {
return (5/9) * (fahrenheit-32);
}
document.getElementById("demo").innerHTML = toCelsius(77);
El operador () invoca la función
Usando el ejemplo de arriba, toCelsius se refiere al objeto función, y
toCelsius () se refiere al resultado de la función.

Acceder a una función sin () devolverá la definición de la función en

lugar del resultado de la función:

Ejemplo
function toCelsius(fahrenheit) {
return (5/9) * (fahrenheit-32);
}
document.getElementById("demo").innerHTML = toCelsius;

Funciones utilizadas como valores

variables
Las funciones se pueden usar del mismo modo que las variables, en
todos los tipos de fórmulas, asignaciones y cálculos.

Ejemplo
En lugar de usar una variable para almacenar el valor de retorno de una
función:

var x = toCelsius(77);
var text = "The temperature is " + x + " Celsius";

Puede usar la función directamente, como un valor variable:

var text = "The temperature is " + toCelsius(77) + " Celsius";
Inténtalo tú mismo "

Objetos de JavaScript
Ya ha aprendido que las variables de JavaScript son contenedores para
valores de datos.

Este código asigna un valor simple (Fiat) a una variable llamada

automóvil:

var car = "Fiat";

Los objetos también son variables. Pero los objetos pueden contener
muchos valores.

Este código asigna muchos valores (Fiat, 500, blanco) a

una variable llamada automóvil:

var car = {type:"Fiat", model:"500", color:"white"};

Los objetos de JavaScript son contenedores para valores con
nombre llamados propiedades o métodos.

Definición de objeto
Usted define (y crea) un objeto JavaScript con un literal de objeto:

Ejemplo
var person = {firstName:"John", lastName:"Doe", age:50,
eyeColor:"blue"};

Acceso a las propiedades del objeto

Puede acceder a las propiedades del objeto de dos maneras:

objectName.propertyName

objectName["propertyName"]

Ejemplo 1
person.lastName;
Accediendo a métodos de objetos
Accedes a un método de objeto con la siguiente sintaxis:

objectName.methodName()

Ejemplo
name = person.fullName();
Inténtalo tú mismo "
Si accede a un método sin () , devolverá la definición de la función :

¡No declare cadenas, números y

booleanos como objetos!
Cuando se declara una variable de JavaScript con la palabra clave
"nuevo", la variable se crea como un objeto:

var x = new String(); // Declares x as a String object

var y = new Number(); // Declares y as a Number object
var z = new Boolean(); // Declares z as a Boolean object

Evite objetos de cadena, número y booleano. Ellos complican tu código y

ralentizan la velocidad de ejecución.

Eventos HTML
Un evento HTML puede ser algo que hace el navegador, o algo que hace
un usuario.

Aquí hay algunos ejemplos de eventos HTML:

 Una página web HTML ha terminado de cargarse

 Se cambió un campo de entrada HTML
 Se hizo clic en un botón HTML

A menudo, cuando suceden los eventos, es posible que desee hacer

algo.

JavaScript le permite ejecutar código cuando se detectan eventos.

HTML permite que los atributos del manejador de eventos, con código
JavaScript , se agreguen a los elementos HTML.

Con comillas simples:

<element event='some JavaScript'>

Con comillas dobles:

<element event="some JavaScript">

En el siguiente ejemplo, se agrega un atributo onclick (con código) a un

elemento de botón:

Ejemplo
<button onclick="document.getElementById('demo').innerHTML =
Date()">The time is?</button>

En el ejemplo anterior, el código JavaScript cambia el contenido del

elemento con id = "demo".

En el siguiente ejemplo, el código cambia el contenido de su propio

elemento (usando this .innerHTML):

Ejemplo
<button onclick="this.innerHTML = Date()">The time is?</button>

El código de JavaScript a menudo tiene varias líneas de longitud. Es más

común ver funciones de llamada de atributos de evento:

Reaccionando a eventos
Un JavaScript se puede ejecutar cuando ocurre un evento, como cuando
un usuario hace clic en un elemento HTML.

Para ejecutar código cuando un usuario hace clic en un elemento,

agregue código JavaScript a un atributo de evento HTML:

onclick=JavaScript

Ejemplos de eventos HTML:

 Cuando un usuario hace clic con el mouse

 Cuando una página web se ha cargado
 Cuando una imagen ha sido cargada
 Cuando el mouse se mueve sobre un elemento
 Cuando se cambia un campo de entrada
 Cuando se envía un formulario HTML
 Cuando un usuario acaricia una tecla

En este ejemplo, el contenido del elemento <h1> se cambia cuando un

usuario hace clic en él:
Ejemplo
<!DOCTYPE html>
<html>
<body>

<h1 onclick="this.innerHTML = 'Ooops!'">Click on this text!</h1>

</body>
</html>

En este ejemplo, se llama a una función desde el controlador de

eventos:

Ejemplo
<!DOCTYPE html>
<html>
<body>

<h1 onclick="changeText(this)">Click on this text!</h1>

<script>
function changeText(id) {
id.innerHTML = "Ooops!";
}
</script>

</body>
</html>

Atributos de eventos HTML

Para asignar eventos a elementos HTML, puede usar atributos de
eventos.

Ejemplo
Asignar un evento onclick a un elemento de botón:

<button onclick="displayDate()">Try it</button>

En el ejemplo anterior, se ejecutará una función

llamada displayDate cuando se haga clic en el botón.
Asigna eventos usando el HTML DOM
El HTML DOM le permite asignar eventos a elementos HTML usando
JavaScript:

Ejemplo
Asignar un evento onclick a un elemento de botón:

<script>
document.getElementById("myBtn").onclick = displayDate;
</script>
Inténtalo tú mismo "

Los eventos onload y onunload

Los eventos onload y onunload se activan cuando el usuario ingresa o
sale de la página.

El evento de carga se puede usar para verificar el tipo de navegador y la

versión del navegador del visitante, y cargar la versión correcta de la
página web en función de la información.

Los eventos onload y onunload se pueden usar para tratar con cookies.

Ejemplo
<body onload="checkCookies()">

El evento onchange
El evento onchange a menudo se usa en combinación con la validación
de campos de entrada.

A continuación se muestra un ejemplo de cómo usar el cambio. Se

llamará a la función upperCase () cuando un usuario cambie el contenido
de un campo de entrada.

Ejemplo
<input type="text" id="fname" onchange="upperCase()">
Inténtalo tú mismo "

Los eventos onmouseover y onmouseout

Los eventos onmouseover y onmouseout se pueden usar para activar
una función cuando el usuario pasa el mouse sobre o fuera de un
elemento HTML:

Los eventos onmousedown, onmouseup y

onclick
Los eventos onmousedown, onmouseup y onclick son todos elementos
de un clic del mouse. Primero, cuando se hace clic en el botón del
mouse, se desencadena el evento onmousedown; luego, cuando se
suelta el botón del mouse, se activa el evento onmouseup, finalmente,
cuando se completa el clic del mouse, se activa el evento onclick.
Nodos DOM
De acuerdo con el estándar W3C HTML DOM, todo en un documento
HTML es un nodo:

 El documento completo es un nodo de documento

 Cada elemento HTML es un nodo de elemento
 El texto dentro de los elementos HTML son nodos de texto
 Cada atributo HTML es un nodo de atributo (obsoleto)
 Todos los comentarios son nodos de comentarios

Con el HTML DOM, se puede acceder a todos los nodos en el árbol de

nodos mediante JavaScript.

Se pueden crear nuevos nodos y todos los nodos se pueden modificar o

eliminar.

Relaciones de nodo
Los nodos en el árbol de nodos tienen una relación jerárquica entre
ellos.

Los términos padre, hijo y hermano se usan para describir las

relaciones.

 En un árbol de nodos, el nodo superior se llama raíz (o nodo raíz)

 Cada nodo tiene exactamente un padre, excepto la raíz (que no
tiene padre)
 Un nodo puede tener varios hijos
  Los hermanos (hermanos o hermanas) son nodos con el mismo
padre

<html>

<head>
<title>DOM Tutorial</title>
</head>

<body>
<h1>DOM Lesson one</h1>
<p>Hello world!</p>
</body>

</html>

Desde el HTML anterior puedes leer:

 <html> es el nodo raíz

 <html> no tiene padres
 <html> es el padre de <head> y <body>
 <head> es el primer hijo de <html>
 <body> es el último hijo de <html>

y:

 <head> tiene un hijo: <title>

 <title> tiene un hijo (un nodo de texto): "DOM Tutorial"
 <cuerpo> tiene dos hijos: <h1> y <p>
 <h1> tiene un hijo: "DOM Lesson one"
 <p> tiene un hijo: "¡Hola mundo!"
 <h1> y <p> son hermanos

Navegando entre nodos

Puede usar las siguientes propiedades de nodo para navegar entre nodos
con JavaScript:

 parentNode
 childNodes [ nodenumber ]
 primer hijo
 último niño
 proximo hermano
 anteriorSibling

 Nodos secundarios y valores de nodo

 Un error común en el procesamiento DOM es esperar que un nodo
elemento contenga texto.

 Ejemplo:
 <title id="demo">DOM Tutorial</title>

El elemento nodo <título> (en el ejemplo anterior) no contiene texto.

Contiene un nodo de texto con el valor "DOM Tutorial".

El valor del nodo de texto se puede acceder mediante

la propiedad innerHTML del nodo :

var myTitle = document.getElementById("demo").innerHTML;

Acceder a la propiedad innerHTML es lo mismo que acceder

al nodeValue del primer hijo:

var myTitle =
document.getElementById("demo").firstChild.nodeValue;

El acceso al primer hijo también se puede hacer así:

var myTitle =
document.getElementById("demo").childNodes[0].nodeValue;

Todos los (3) siguientes ejemplos recuperan el texto de un elemento

<h1> y lo copian en un elemento <p>:

Ejemplo
<html>
<body>

<h1 id="id01">My First Page</h1>

<p id="id02"></p>

<script>
document.getElementById("id02").innerHTML =
document.getElementById("id01").innerHTML;
</script>

</body>
</html>

InnerHTML
En este tutorial utilizamos la propiedad innerHTML para recuperar el
contenido de un elemento HTML.

Sin embargo, aprender los otros métodos anteriores es útil para

entender la estructura del árbol y la navegación del DOM.

Nodos raíz DOM

Hay dos propiedades especiales que permiten el acceso al documento
completo:

 document.body - El cuerpo del documento

 document.documentElement - El documento completo

Ejemplo
<html>
<body>
<p>Hello World!</p>
<div>
<p>The DOM is very useful!</p>
<p>This example demonstrates
the <b>document.body</b> property.</p>
</div>

<script>
alert(document.body.innerHTML);
</script>

</body>
</html>
Inténtalo tú mismo "

Ejemplo
<html>
<body>

<p>Hello World!</p>
<div>
<p>The DOM is very useful!</p>
<p>This example demonstrates
the <b>document.documentElement</b> property.</p>
</div>

<script>
alert(document.documentElement.innerHTML);
</script>

</body>
</html>

La propiedad nodeName
La propiedad nodeName especifica el nombre de un nodo.

 nodeName es de solo lectura

 nodeName de un nodo de elemento es el mismo que el nombre de
etiqueta
 nodeName de un nodo de atributo es el nombre del atributo
 nodeName de un nodo de texto siempre es #text
 nodeName del nodo del documento siempre es #document

Ejemplo
<h1 id="id01">My First Page</h1>
<p id="id02"></p>
<script>
document.getElementById("id02").innerHTML =
document.getElementById("id01").nodeName;
</script>

Nota: nodeName siempre contiene el nombre de la etiqueta en

mayúsculas de un elemento HTML.

La propiedad nodeValue
La propiedad nodeValue especifica el valor de un nodo.

 nodeValue para nodos de elemento no está definido

 nodeValue para los nodos de texto es el texto mismo
 nodeValue para los nodos de atributo es el valor del atributo

La propiedad nodeType
La propiedad nodeType es de solo lectura. Devuelve el tipo de un nodo.

Ejemplo
<h1 id="id01">My First Page</h1>
<p id="id02"></p>

<script>
document.getElementById("id02").innerHTML =
document.getElementById("id01").nodeType;
</script>

Las propiedades nodeType más importantes son:

Node Type Example

ELEMENT_NODE 1 <h1 class="heading">W3Schools</h1>

ATTRIBUTE_NODE 2 class = "heading" (deprecated)

TEXT_NODE 3 W3Schools

COMMENT_NODE 8 <!-- This is a comment -->

DOCUMENT_NODE 9 The HTML document itself (the parent o

DOCUMENT_TYPE_NODE 10 <!Doctype html>