En HTML, los atributos juegan un papel importante porque permiten definir cierta configuración o comportamiento a los elementos HTML, permitiendo obtener diferentes resultados.
Esta publicación es la segunda parte de una serie de publicaciones sobre ¿Cómo puedes crear tu primera página web?, aquí puedes encontrar la primera parte.
En la primera parte vimos como tener las etiquetas(tags) básicas para tu página web, ahora veremos que son los atributos y CSS.
Primera recordemos como es una etiqueta o tagcon la siguiente imagen.
Observando la imagen aprendemos la sintaxis para agregar atributos, es la parte de color rojo, en este caso classes el atributo, seguido de un signo de =y luego entre comillas el valor que queremos asignarle.
Veamos los atributos starty reversedpara una lista ordenada:
Otros atributos no necesitan algún valor, porque su solo presencia es suficiente, uno de ellos es el atributo reversedy open.
Ahora debemos tomar en cuenta que no todos los atributos son aplicables a todas las etiquetas, los atributos reversedy startson atributos específicos para listas ordenadas, es decir, la etiqueta <ol></ol>y no tienen ningún efecto en otros elementos.
Con lo anterior en cuenta podemos discernir que existen atributos Globalesy No globales, los atributos Globalestienen efecto sobre todas las etiquetas, mientras los No Globalessolo a un grupo de etiquetas o a veces solo a una etiqueta en específico.
Entender que atributos son globales es de mucha ayuda, aun así no hay prisa en aprenderlos de memoria, siempre que tengas dudas revisa la lista de atributos globales aquí.
¿Qué es CSS?
Recordemos que…
HTML permite crear el contenido de nuestro página o aplicación de manera organizada. CSS se encarga de la apariencia visual del contenido generado por HTML, con CSS podemos establecer el diseño, colores, tamaño de letra, dimensiones de cada elemento, posiciones y alineados, bordes, sombras y demás características de diseño. Y finalmente Javascript te permite interactuar dinamicamente con la aplicación, claro ejemplo del uso de Javascript son las notificaciones de facebook, el chat de este mismo, cuando damos me gusta, creamos una publicación o escribimos un comentario.
La sintaxis principal de CSS se llama regla. Una regla se comforma de 2 partes, selectory declaración.
Un selectorpermite seleccionar uno o más elementos HTML de nuestra página. CSS es otro lenguaje diferente a HTML, así que el selector de ejemplo no llevan los signos mayory menorque, el selector NO es así <p>.
Cada declaraciónpuede tener uno o más pares de propiedad: valor;, cada par de propiedad: valor;realiza un cambio visual en los elementos seleccionados por el selector.
Los atributos también son muy utiles a la ahora de agregar estilos y diseño de una página web, esto se debe a que la sintaxis del selectortambién hace uso de los atributos para seleccionar uno o más elementos.
Los estilos se pueden agregar usando la etiqueta <style></style>, y esta etiqueta puede existir dentro del <body>o <head>.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Mi primera página web</title>
<!-- Agrgando estilos dentro de HEAD -->
<style>
p { font-size: 12px; color: #555555; }
</style>
</head>
<body>
<!-- Agreando estilos dentro de BODY -->
<style>
p { font-size: 12px; color: #555555; }
</style>
</body>
</html>
Lo más recomendable es poner nuestros estilos en un archivo aparte con extensión .csse importarlo desde nuestro código html dentro del elemento <head>usando la etiqueta <link>.
Con lo que sabemos de CSS veamos un ejemplo de lo que podemos conseguir:
En la primera regla vemos que el selector es html, con esto sabemos que al elemento html se le van a aplicar estilos. También sabemos que dentro de htmlexisten las demas etiquetas que completan nuestra página como elementos hijos.
Una de las propiedades más comunes es font-size, la cual define el tamaño de la letra del texto. El valor de esta propiedad se define con un número y una unidad, en este ejemplo la unidad es pxque quiere decir pixel.
Al elemento htmlse le llama muchas veces rooto raízy en la mayoría de los navegadores web tiene un font-size: 16pxpor defecto. En este caso el valor por defecto lo estamos disminuyendo 2 pixeles.
html {
font-size: 14px;
}
Existen más unidades, rem, em, %, vhy vwque veremos a detalle más adelante.
Después tenemos nuestro selector body, en la declaración se define el tipo de letra o fuente con la propiedad font-familyy las fuentes se establecen entre comillas, las únicas fuentes que pueden no llevar comillas porque son un estándar en los navegadores web son serif, sans-serif, monospace, cursivay fantasy.
Cada nombre de fuente es separada por una coma(,), de esta manera el navegador va tomando de izquierda a derecha el tipo de fuente, si no existe la primera fuente en tu computadora, va por la segunda y así sucesivamente hasta encontrar una existente.
body {
/*
* ESTO ES UN COMENTARIO:
* Fuentes estandar disponibles en el navegador:
* serif, sans-serif, monospace, cursive, fantasy
* Estas no llevan comillas
*/
font-family: "Helvetica", "Verdana", "Arial", sans-serif;
}
Ya mencionamos que CSS significa Hoja de Estilo en cascada, la parte de cascadase refieren a la herenciay la precedenciade las reglas que definimos, en el caso de font-familyagregado al elemento body, esta propiedad la heredan todos los elementos hijos, por lo que todo nuestra página tendrá el mismo tipo de letra.
Otra propiedad es line-height, la cual define el espacio vertical de las líneas de un texto, podemos notar su funcionamiento en el primer y segundo párrafo, line-height: 1y line-height: 2respectivamente.
Para seleccionar el segundo párrafo ocupamos el atributoid, este atributo debe ser único por cada elemento, no se debe repetir, este selector siempre selecciona un solo elemento.
Dentro de la declaración de propiedades tenemos una propiedad llamada margin-topesta propiedad define la separación superior del segundo párrafo con el primero.
Algo interesante es que el valor es 2rem, la unidad remse refiere al tamaño de fuente del elemento raíz(root), nuestro elemento raíz es htmly como tamaño de letra le definimos anteriormente con 14pxpor lo que margin-topseria igual a 28px. Esta unidad de medida remnos permite definir tamaños relativos al tamaño de la fuente raíz.
Luego en las listas ordenadas tenemos las propiedades padding-top, padding-right, padding-bottomy padding-left. Estas propiedades definen el espacio que existe entre los bordes de un elemento y su contenido. Dado que el selector es olnos permite seleccionar todas las listas ordenadas de nuestra página.
Ahora tenemos el selector .contorno, donde se define la propiedad border, el cual nos permite resaltar el borde de un elemento, su sintaxis es el grosor del borde, el tipo y por último el color. Con esta regla podemos definir un borde verde a todos los elementos que tengan dentro del atributoclassel valor contorno.
.contorno {
border: 1px solid green;
}
Otra propiedad de gran ayuda es list-style-positionla cual define la posición de la numeración o viñetas de una lista. Dado que el selector es li, nos permite seleccionar todas los elementos de listas de nuestra página.
li {
list-style-position: inside;
}
Más abajo tenemos un selector utilizando el atributoidde la primera lista. En la declaración de propiedades se define el color de fondo con background-color: lightblue.
Luego tenemos otro selector que usa el atributoclass, pero un valor de classsi puede ser utilizado en más de un elemento, esto quiere decir, que este selector nos permite seleccionar todos los elementos de nuestra página web que dentro del atributo classtenga el valor green.
Es importante mencionar que el atributo classpuede tener más de un valor separado por un espacio en blanco.
<ol class="green contorno"></ol>
Por último tenemos un elemento detailscon el atributo opensin ningún valor, su sola presencia indica que ese elemento esta desplegadoo abiertoy cuando está desplegado su color de fondo cambia a azul claro. La notación para atributos que no son idni classes la de corchetes [nombreAtributo].
Para crear una página web necesitas comprender tres sencillas tecnologías muy fáciles de aprender; HTML, CSS y Javascript.
Juntas permiten crear aplicaciones sofisticadas, ejemplo de ellas son instagram, twitter y facebook, a continuación veamos que son estas tecnologías.
HTML
HTML permite crear el contenido de nuestra página o aplicación de manera organizada y estructurada, sin HTML no podrías ver tus fotos en facebook o reproducir videos en youtube.
CSS
CSS se encarga de la apariencia visual del contenido generado por HTML, con CSS podemos establecer el diseño, colores, tamaño de letra, dimensiones de cada elemento, posiciones y alineados, bordes, sombras y demás características de diseño. Sin CSS sería muy difícil de entender tu muro de facebook, todo estaría muy revuelto.
Javascript
Javascript te permite interactuar dinámicamente con la aplicación, claro ejemplo del uso de Javascript son las notificaciones de facebook, el chat de este mismo, cuando damos me gusta, creamos una publicación o escribimos un comentario.
Desde mi punto de vista lo ideal es aprender primero HTML, luego CSS y JavaScript.
Página web solo usando HTML
El siguiente ejemplo muestra como crear tu primera página web, si lo quieres probar en tu computadora, crea un archivo llamado index.html, después copia y pega el código de este ejemplo. Luego para ver tu página recién generada solo realiza un doble clic sobre index.html desde tu explorador de archivos.
A continuación vamos a explicar cada una de las partes de nuestro código.
DOCTYPE
Lo primero que existe en nuestro código es <!DOCTYPE html>, esto indica al navegador las sintaxis y reglas que formaran a nuestra página web. Antiguamente, se utilizaba una definición de doctype mucho más extensa, algo como lo siguiente.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
Pero actualmente la versión corta es más que suficiente, solo no olvides agregarla, porque de otro modo tu contenido será renderizado como una versión antigua de HTML.
Etiqueta HTML
Luego tenemos la etiqueta <html>, indica el inicio de nuestra página web, todas las demás etiquetas deben estar dentro de esta, el final de la etiqueta se marcacon casi el mismo código, pero con una diagonal después del signo <, así </html>. Además, la etiqueta <html> tiene solo dos etiquetas hijas, <head> y <body>, las cuales explicaremos un poco más abajo.
<html>
<head></head>
<body></body>
</html>
Etiquetas
Pero ¿Qué es una etiqueta?, una etiqueta es la unidad principal con la que se crea el contenido de una página o aplicación web.
Partes de una etiqueta HTML
Casi todas las etiquetas tiene su etiqueta de cierre </nombre-etiqueta>, digo casi todas porque la etiqueta DOCTYPE no tiene cierre. No te preocupes, son pocas las que no se cierran. Además, los nombres de etiquetas no son sensibles a mayúsculas y minúsculas, puedes escribir la etiqueta html así <HtmL></HtmL>
Atributo lang en la etiqueta html
Algo que destacar en la etiqueta es que tiene este atributo lang<html lang="es">, el cual quiere decir language y su valor significa spanish.
El atributo lang ayuda al navegador web a seleccionar texto, revisar la ortografía, traducir tu página y convertir el texto en audio para personas con problemas visuales.
Etiqueta head
La etiqueta <head> puede contener lo que se le llama metadatos y demás información que no es visible para el usuario. Es el lugar donde se definen o importan estilos (archivos CSS), código Javascript, y demás datos para que el navegador web pinte la página web.
También sirve para describir la página web a motores de búsqueda, por ejemplo usando metadatos sobre quien es el autor, el título y una descripción corta sobre la página web. El título que mencionamos es el de la página web, el que aparece en la pestaña de tu navegador web.
Adicional, la etiqueta head sirve para agregar metas de terceros como el open graph data creado por facebook y twitter cards creado por twitter.
En nuestro ejemplo, dentro de la etiqueta <head> podemos ver dos etiquetas <meta> descritos a continuación ( meta viene de meta information).
<head><metacharset="utf-8"><metaname="viewport"content="width=device-width,initial-scale=1"><title>Mi primera página web</title></head>
Codificación de caracteres utf-8
En el meta<meta charset="utf-8"> usa un atributo charset con valor utf-8, esto indica la codificación de caracteres de la página y nos permite tener caracteres raros de otros idiomas que de otra manera no se visualizarían correctamente. Ejemplos concretos serian la ñ y vocales con acentos para el idioma español, caracteres en chinos o koreano.
Actualmente, los navegadores web como firefox, chrome y brave corrigen este problema automáticamente cuando se carga la página web. Pero se recomienda usar este meta en caso de que se cargue la página web en un navegador antiguo o alguno navegador web que no corrija esta codificación de caracteres automáticamente
El meta <meta name="viewport" content="width=device-width,initial-scale=1"> es muy útil cuando nuestra página es visualizada en dispositivos móviles, width=device-width permite tomar todo el ancho de nuestra pantalla móvil como el ancho de la página, initial-scale=1 evita que ciertos dispositivos le apliquen algún tipo de escaldo inicial a nuestra página. Con este meta obtenemos un diseño congruente en los dispositivos móviles. De otra forma veríamos una página con un escaldo muy pequeño debido a que el navegador trata de encajar el contenido como si lo estuviéramos viendo en una pantalla más grande de computadora.
Una nota importante es que las etiquetas <meta> y <!DOCTYPE html> no tienen su correspondiente cierre o final de etiqueta, esto es así porque estas etiquetas realmente no tienen contenido visible del elemento como pasa con la etiqueta <html></html>, <body></body> o el encabezado <h1></h1>.
Etiqueta body y etiquetas dentro de body
La etiqueta <body> contiene toda la información visible que deseas mostrar al usuario. Todo el contenido que puedas ver en una página web o aplicación está dentro de la etiqueta <body>.
Etiquetas de encabezados
Después tenemos a la etiqueta <body>, la cual contiene todo el demás contenido visible de nuestra página, dentro tenemos 6 etiquetas, <h1> a <h6>, la h significa Heading (encabezado), se ocupan para mostrar títulos o encabezados, <h1> es el de mayor relevancia y <h6> es el de menor.
Etiqueta para crear párrafos
Más abajo tenemos nuestro primer párrafo, para crear un párrafo se utiliza la etiqueta <p>, p significa Paragraph (parrafo). Luego tenemos dos listas de elementos ordenados y desordenados.
<p> El desarrollo web o programación web utiliza tres principales tecnologías;<strong>HTML, CSS y Javascript</strong>. Juntas permiten crear aplicaciones sofisticadas, facebook es el ejemplo más conocido, también mercadolibre e instagram.</p>
Etiqueta strong
La etiqueta <strong> permite marcar palabras o frases que son importantes, normalmente son palabras que cuando hablamos les damos un énfasis fuerte, con un tono más alto y a menor velocidad porque queremos ser más claros en la comunicación. Es por eso que los screen readers leen el contenido de esta etiqueta con un tono de voz diferente.
<p> El desarrollo web o programación web utiliza tres principales tecnologías;<strong>HTML, CSS y Javascript</strong>. Juntas permiten crear aplicaciones sofisticadas, facebook es el ejemplo más conocido, también mercadolibre e instagram.</p>
<p>Este medicamente debe almacenarse <strong>fuera del alcance de los niños<strong>.</p>
Los navegadores web marcan el contenido en negritas, pero esta etiqueta no debe usarse con el objetivo visual de remarcar un texto en negritas. Para poner texto en negritas por razones solo de diseño puedes utilizar un <span> en conjunto con alguna regla de estilos (CSS).
Etiqueta em
La etiqueta <em> es parecida a la etiqueta <strong> en el sentido de que se usa para enfatizar partes del texto y que los screen readers los lean en diferente tono de voz. Pero no tiene la misma importancia que un texto marcado con la etiqueta <strong>. Se utiliza para que el texto tenga más énfasis que el texto normal.
<p>Recuarda que <em>tienes</em> que apurarte para que te des un poco mas de tiempo<p>
Etiqueta para crear listas de elementos
Para crear una lista de elementos desordenados utilizamos la etiqueta <ul>, ul (Unorder List). Para crear una lista ordenada usamos <ol>, ol (Order List). Estas dos listas contiene tres etiquetas <li>, li significa List Item (Elemento de Lista).
Como vemos, no es difícil crear contenido para nuestra página, lo único que necesitamos saber son los nombres de las etiquetas y para qué nos sirven, aquí puedes encontrarlas. No tienes que memorizarlas, pero si comprender como se usan, así cada vez que necesites de alguna siempre puedes consultar en el anterior enlace.
En futuras publicaciones profundizaremos como funciona nuestro contenido HTML con CSS (Cascade Style Sheet, Hojas de Estilo en Cascada), para terminar incluyendo también Javascript en una tercera publicacion.
Scheme, Paradigma funcional. Influenciado por Lisp
Self, Paradigma orientado a objetos, basado en prototipos en lugar de clases. Influenciado por Smalltalk
A mediados de los noventa, la compañía Netscape necesitaba un lenguaje para su navegador web. Entonces contrataron a Brendan Eich quien inicialmente quería usar algo como Scheme dentro del navegador.
En esa época, Netscape tenía tratos con Sun microsystems para mostrar Java en el navegador a través de applets. Así que tenían en mente un lenguaje hermano, mucho más simple. Pero poquito despues sintieron que ya no deberían crear este lenguaje, que con Java era suficiente.
Al final gracias a Brendan y otras dos personas de Netscape y Sun Microsystems, se vio la necesidad de un lenguaje que pudiera correr directo en una página web. Y que pudiera ser utilizado por personas que no supieran lo que es un compilador.
Brendan Eich tomó la sintaxis de Java, el modelo funcional de Scheme, y la programación orientado a objetos basada en prototipos de Self.
Aunque la sintaxis la toma de Java, esta sintaxis realmente viene de C/C++ de los cuales Java surgió.
Javascript: scheme, self y Java en uno
JavaScript fue creado a prisas y con mucha presión, en diez días Brendan Eich creó la primera versión, aun así la habilidad de Brendan en tomar los mejores aspectos de los lenguajes de programación Scheme, Self y C/C++ han hecho de JavaScript un lenguaje muy potente y expresivo.
En un inicio se llamó mocha, después LiveScript en su primer lanzamiento oficial en 1995 y tres meses después lo llamaron JavaScript. Este último nombre tiene muy poco que ver con el lenguaje, según se entiende, lo llamaron así por estrategia de mercadotecnia porque Netscape incrustaba Java en el navegador web.
Tiempo después Netscape anuncio una reunión con la organización de estándares Ecma International para dar paso a la estandarización de Javascript. Así la primera edición ECMA-262, fue aceptada por la asamblea general de Ecma en junio de 1997. Realmente el estándar del lenguaje se llama ECMAScript.
¿Dónde se usa Javascript?
Javascript es un lenguaje de programación muy flexible, multiparadigma, dinámico y con un gran potencial, es por eso que lo encontramos actualmente en diferentes áreas, por mencionar algunas:
Navegadores web como Firefox, Google Chrome, Opera, Safari.
Aplicaciones móviles, incrustados en la aplicación nativa mediante WebViews, o con herramientas como Cordova y Ionic
En Node.js para crear servidores http, ftp y cualquier tipo de tecnología de red de una forma escalable, otro ejemplo es ejecutar scripts en tu sistema operativo para automatizar tareas.
Programación de Robots e IoT (Internet de las cosas), por ejemplo Arduino y johnny-five.
¿Cómo se usa Javascript?
Javascript es un lenguaje compilado en el momento (Just-in-time compiled), el motor de JavaScript recorre linea por línea y así va traduciendo el código a lenguaje maquina para que la computadora lo pueda entender. En las primeras versiones de JavaScript se ocupaba un intérprete.
Como ya mencionamos, Javascript no solo se puede ejecutar en el navegador web, sino también del lado del servidor, como lo hace en node.js, a estos lugares donde javascript se puede ejecutar se les llama ambientes huésped. Estos ambientes tienen sus propias funcionalidades y APIs que no son parte del estándar de ECMAScript. Por ejemplo, en el navegador encontramos los objetos window y document, en node.js podemos encontrar los objetos http y fs.
Para aprender cualquier otro lenguaje, todos sabemos que necesitamos saber su gramática, es por eso que vamos a ver la definición de gramática sacada de Wikipedia:
La gramática es el estudio de las reglas y principios que gobiernan el uso de las lenguas y la organización de las palabras dentro de unas oraciones y otro tipo de constituyentes sintácticos.
Solo veremos la gramática básica para poder empezar a crear código. De tal manera que se combinen con ejemplos prácticos y en próximas publicaciones iremos aumentando nuestro entendimiento de la misma forma.
Variables
Uno de los elementos más usados son las variables, las variables son cajitas con etiquetas, y tienen un espacio de memoria para guardar algún tipo de dato.
Las etiquetas de las cajitas deben cumplir ciertas reglas. Su nombre o identificador no puede iniciar con un número, deben iniciar con alguna letra (incluyendo _ y $), y además Javascript es sensible a mayúsculas y minúsculas.
Existen dos maneras de declarar una variable. Una es usando var y la otra usando let.
Es importante describir correctamente el contenido de las variables, porque así le facilitamos la vida a la siguiente persona que necesite leer y modificar nuestro código. Esta siguiente persona muy a menudo eres tú del futuro, y al menos que seas un robot, no podrás recordar cada detalle de tu código.
Del código anterior, presta atención solo a las definiciones de variables, ahí tanto let como var tienen el mismo efecto, definen una variable global que puede ser accedida en cualquier parte de la ejecución.
También podemos ver que no es necesario definir el tipo de dato, y realmente no lo necesitamos, vemos claramente que las variables contienen cadenas de caracteres (string), un string se declaran dentro de unas comillas simples o dobles.
A las variables que no le definimos algún valor, Javascript les asigna el valor undefined.
Además de las variables existe un tipo de cajita que no puede cambiar lo que guarda una vez definido su valor, por eso se llaman constantes.
Al tratar de reasignar un valor a una constante como en la cuarta línea del código, JavaScript mostrara un TypeError, indicando que no se puede reasignar un valor a una constante.
Javascript es un lenguaje débilmente tipeado, o sea, que no es necesario definir el tipo de dato. Pero no quiere decir que no tenga tipos, pues el tipo de dato es definido en tiempo de ejecución por Javascript, recordemos que Javascript es un lenguaje compilado en el momento.
Datos primitivos
Casi todo en JavaScript es un Objeto, la excepción son los datos primitivos, los cuales no son Objetos y no tiene métodos, entonces tenemos siete tipos de datos, objetos y los siete datos primitivos de abajo:
Number, números como; 1, 0, 18500, 89.95124
BigInt, agregado en el 2020, para representar números enteros muy, pero muy grandes.
String, cadena de caracteres como ‘Hola’ y ‘Buenas noches’.
Boolean, solo acepta true o false, es decir, si o no.
null, sirve para indicar que algo es nada, su único valor es null.
undefined, sirva para indicar que algo aún no está definido.
Symbol, nuevo en el lenguaje a partir de EcmaScript 6, año 2015
Objetos
Todo lo demás son objetos, incluso los tipos de datos String, Boolean, Number y Symbol tiene su correspondiente representación en Objeto. Una función es un objeto. Ejemplos de objetos:
Object
Function
Array
Date
RegExp
Error
La verdad que no preocuparme por el tipo de dato me ha facilitado el desarrollo de software. Además los editores de código vienen con muchas herramientas y plug-ins que te ayudan mucho en este aspecto, te ahorras bastante dolor de cabeza al tratar de convertir entre tipos.
Solo nos interesa lo que nuestro objeto puede hacer, no de que tipo es o si es padre o hijo de algo. Cuando realizas una suma entre números en el mundo real, no te importa que tipo es, solo te importa que se puedan sumar, sin importar si es un entero o decimal, o fracción.
Normalmente si nombras tus variables/objetos de manera adecuada y de manera muy entendible, con el contexto de tu función, modulo o componente sabrás que tipo de datos son.
Su valor ya te indica de que tipo es, me parece redundante definir el tipo de algo a lo que yo mismo le asigno el valor.
Comentarios
Aunque los comentarios no los recomiendo porque son un indicador de que nuestro código no es fácil de entender, se pueden usar para casos en los que ya no tenemos de otra.
La sintaxis de los comentarios fue tomada de C++.
// Este es un comentario de mucho valor
/**
* Este es un comentario con mas de una linea
* y esta es la segun linea
* y una tercera linea
*/
Funciones
Las funciones son otro de los elementos más importantes del lenguaje. Si no es que el más importante. Con una función podemos realizar un conjunto de acciones sin volverlo a escribir y nos permitirá obtener un resultado según los argumentos que recibe a la hora de ejecutarla.
Pero no solo eso, nos permite resolver problemas desde el punto de vista de paradigmas de programación como funcional y orientado a objetos. Por poner un ejemplo, nos permite crear patrones de diseño muy útiles como el Singleton o el Patron de diseño Observador.
¿Por qué las funciones son tan flexibles en JavaScript? Porque las funciones son objetos de primera clase en el lenguaje. Es decir, pueden ser tratadas como cualquier otra variable, pueden ser pasadas como parámetros y pueden ser el valor de retorno de otra función.
Un consejo, selecciona bien tus nombres, un nombre de función debe ser un verbo, porque internamente realiza una acción.
Otro consejo procura usar muy pocos argumentos, no más de tres, créeme, no todos tenemos memoria de fotográfica y con muchos argumentos es difícil reusar la función. Porque no sabremos que parámetros recibe y en que orden.
Cuando queremos que el código de una función se ejecute, se dice que necesitamos invocar la función. Para invocar a una función se deben poner un par de paréntesis (), y si tiene parámetros o argumentos, estos se separan con comas.
En el ejemplo vemos como invocamos dos veces la función getNombreCompleto(nombre, apellido) ahorrando tiempo y esfuerzo obteniendo un resultado similar. Esta función recibe dos parámetros, los cuales separamos con una coma.
Ámbito de variables
En Javascript no existe ámbitos de bloques como en C y Java, donde las variables definidas en un bloque utilizando llaves {} solo existen en ese ámbito y no puede ser accedidas desde afuera.
JavaScript tiene ámbito de función, para ilustrar este tipo de ámbito vamos a crear una función donde se definen dos variables. Más adelante en el código, fuera de la función se intenta obtener el valor de la variable jaime, pero esto no es posible y tendremos un ReferenceError.
Hasta junio del 2015 solo existía la forma de var para declarar variables. Actualmente la forma let de declarar variables permite utilizar ámbito de bloque. Por ejemplo en un bloque if, o simplemente dentro de llaves:
Por último veamos como crear un objeto. Un objeto literal es una colección de pares nombre: valor, parecido a los arrays asociativos de PHP. Estos pares de nombre/valor se les llama propiedades, una propiedad es como una variable y puede contener cualquier tipo de valor.
Para crear un objeto no necesitas crear una clase, tú simplemente creas el objeto y lo empiezas a utilizar.
En el ejemplo tenemos un objeto persona, tiene varias propiedades de diferentes tipos, su nombre es un String, su edad es un Number, getNombre y hablar son de tipo Function, las funciones que son miembros de un objeto se les llama métodos.
Para poder entender la relación entre Javascript, scheme, self y java, tenemos que entender un poco de la historia de los lenguajes.
No somos creadores de la historia. Estamos hechos por la historia.
Martin Luther King, Jr.
De Algol a Smalltalk
Los lenguajes de programación más usados en los sesentas, eran:
FORTRAN
LISP (Paradigma funcional)
COBOL
ALGOL
ALGOL (Algorithmic Language) introdujo la utilización de bloques utilizando las palabras reservadas begin y end.
Como clara influencia, actualmente en JavaScript, C, Java, entre otros, se utiliza las llaves {} para definir bloques de código.
En 1967 se lanzó Simula 67, Simula fue el primer lenguaje de programación orientado a objetos, básicamente le agregó clases y objetos a ALGOL.
La programación orientada a objetos fue descubierta en 1966 por los mismos creados de Simula, Ole Johan Dahl y Kristen Nygaard.
Tiempo después se creó Smalltalk, un lenguaje de programación orientado a objetos mucho más sofisticado y moderno, a cargo de este proyecto estaba Alan Kay.
Alan Kay comentó lo siguiente:
Lamento que hace tiempo haya acuñado el término Objetos para la programación porque hizo que las personas se enfocaran en la parte menos importante. La gran idea es “Envío de mensajes“.
Alan Kay
Camino smalltalk
Posteriormente se empezaron a crear otros lenguajes de programación orientados a objetos, todos basados en ideas de Smalltalk y C.
Se crearon Objective C, C++ y Eiffel, de los cuales surgieron otros lenguajes de programación como Java, C# y Ruby.
Influencias sobre lenguajes de programación orientada a objetos
JavaScript surge poquito después de JAVA, en el mismo año. JavaScript tomará influencias de smalltalk, porque Self fue influido por smalltalk.
De Smalltalk a Self
Smalltalk permitió también la creación de Self, creado en Xerox Parc y luego migrado a Sun Microsystems Labs.
En este lenguaje de programación se introdujo la idea de prototipos, eliminando la utilización de clases para crear objetos, este lenguaje utiliza los objetos mismos para permitir que un objeto reutilice las funcionalidades de otro.
Self es un lenguaje rápido y en general se le conoce por su gran rendimiento, self hizo un buen trabajo en sistemas de recolección de basura y también utilizaba una maquinar virtual para administrar su ejecución y memoria.
La maquina virtual Java HotSpot se pudo crear gracias a Self, debido a la influencia de Self tenemos hoy en día el motor de JavaScriptV8, el cual lo utiliza node.js yGoogle Chrome internamente.
Self seguía una de las recomendaciones del libro Design Patterns: Elements of Reusable Object-Oriented Software, mucho antes de que saliera publica esta recomendación:
Mejor composición de objetos a herencia de clases.
Design Patterns: Elements of Reusable Object-Oriented Software
Actualmente Javascript utiliza prototipos para la reutilización de código, se podría decir que usa composición, en lugar de herencia.
De cálculo lambda a Scheme
La programación funcional es el paradigma de programación más viejo, de hecho su descubrimiento fue mucho antes de la programación para computadoras, fue descubierto en 1936 por Alonzo Church, cuando invento el cálculo lambda mientras resolvía el mismo problema matemático que Alan Turing.
El símbolo del cálculo lambda es :
λ
LISP fue el primer lenguaje funcional, creado por John McCarthy.
JavaScript tomó influencias de LISP, porque Scheme fue influido por LISP.
Smalltalk usa el “El Modelo Actor”, el cual dice que los actores se comunican entre ellos a través de mensajes.
Por otro lado tenemos a LISP, el cual tiene un “Modelo despachador de funciones” que actualmente le llamamos lenguaje funcional, estos modelos son idénticos, porque las funciones y métodos lo que hacen es enviar mensajes entre actores.
Un ejemplo de esto es cuando una función llama a otra función o cuando se invoca el método de un objeto, lo que sucede es que existen actores y se comunican entre ellos a través de mensajes.
Entonces podemos decir que la idea principal de la programación orientada a objetos es el envío de mensajes y que no es muy diferente de la programación funcional. Y aquí es importante remarcar lo que dijo Alan Kay Co-creador de SmallTalk:
Lamento que hace tiempo haya acuñado el término Objetos para la programación porque hizo que las personas se enfocaran en la parte menos importante. La gran idea es “Envío de mensajes“.
Alan Kay
Mi ingles es malo así que pueden revisar el texto original aquí.
Tomando estos dos modelos idénticos, se refinaron, y se creó Scheme.
Scheme tiene la bondad de usar Tail recursion y closure para obtener un lenguaje funcional, closure permite tener acceso a las variables de una función externa aun cuando esta ya haya regresado algún valor.
Javascript usa mucho closure en su faceta de lenguaje funcional.
Predecesor de la PC moderna y el desarrollo de componentes web
Por otro lado tenemos a NLS (oN-Line System), fue un sistema de colaboración entre computadoras diseñado por Douglas Engelbart e implementado por la ARC (Augment Research Center) en el Instituto de investigación de Stanford SRI.
Fue el primer sistema en usar enlaces de hipertexto, mouse, monitores de video, Información organizada por relevancia, GUI (Interfaces gráficas de usuario), programa para presentaciones y otros conceptos modernos de computación.
Después cuando Steve Jobs se le ocurrió la idea de crear la computadora personal más sofisticada, la Macintosh (esta idea venía concebida desde NLS), los programadores tenían que usar lenguaje ensamblador para crear programas.
Era muy difícil conseguir programadores que desarrollaran en ensamblador, debido a esta dificultad, Bill Atkinson que ya había creado MacPaint y QuickDraw, se le ocurrió crear una interesante aplicación que le permitiera a personas que no se dedicaran a la programación crear fácilmente programas.
A esta aplicación le agregó un lenguaje de scripting, y se le llamó HyperCard, tenía botones, enlaces y muchas cosas que actualmente se tienen en el desarrollo web, en la web misma y en los navegadores modernos.
Hypercard
Por ejemplo para agregar un botón tú pulsabas Cmd + B y se abría un cuadro de diálogo para crear el botón y tenía las opciones de configuración que se ven en la imagen de abajo, poner icono, algún efecto y hasta agregarle funcionalidad a través de un script.
IDE HyperCard agregar un botón
Una gran ventaja de HyperCard es que si tú creabas un componente como un botón y te lo llevabas a otra tarjeta o página, el botón seguía teniendo toda la configuración, incluyendo el script.
Es claro que esto ultimo es un predecesor de los componentes web actuales. Su lenguaje de script se llamaba HyperTalk y era así:
HyperTalk script parecido a Javascript
Se puede notar el parecido con la funcionalidad mouseup de los navegadores web actuales, de hecho el creador de JavaScript tomo esta influencia para agregar eventos a elementos de un sitio web, como por ejemplo el onmouseup:
Surgimiendo de los navegadores web
Se empezó un proyecto llamado Xanadu, este sistema computacional utilizaba el concepto de hipertexto.
La idea de Xanadu era el fin de concebir un documento global y único que cubra todo lo escrito en el mundo mediante una gran cantidad de ordenadores interconectados que contenga todo el conocimiento existente.
Xanadu fue el predecesor de WWW, tiempo despues Tim Berne’s Lee creó la WWW o World Wide web.
Con la WWW funcionando, vinieron los navegadores web como Mosaic, este se dividió en Netscape y SpyGlass.
Tiempo después SpyGlass fue comprado por Microsoft para poder concebir al navegador más odiado por los desarrolladores web, Internet Explorer.
Surgimiento de Internet Explorer y Netscape
De navegadores web a Javascript
A mediados de los noventa, la compañía Netscape necesitaba un lenguaje para su navegador web, así que contrataron a Brendan Eich quien inicialmente quería usar algo como Scheme dentro del navegador.
Netscape tenía tratos con Sun microsystems para mostrar Java en el navegador a través de applets, así que tenían en mente un lenguaje hermano, mucho más simple. De hecho en un punto ya no sintieron que deberían crear Javascript, pensaban que con Java era suficiente.
Al final gracias a Brendan y otras dos personas de Netscape y Sun Microsystems, se vio la necesidad de un lenguaje que pudiera correr directo en una página web, que pudiera ser utilizado por personas que no supieran lo que es un compilador.
Brendan Eich tomó la sintaxis de Java, el modelo funcional de Scheme, y la programación orientado a objetos basada en prototipos de Self.
Aunque la sintaxis la toma de Java, esta sintaxis realmente viene de C/C++ de los cuales Java surgió.
Javascript: scheme, self y Java en uno
Ahora bien si nos ponemos a pensar, Javascript tiene más que ver con LISP y Scheme en la parte funcional, con Self en la parte orientada a objetos y con C/C++ en su sintaxis.
JavaScript fue creado a prisas y con mucha presión, en diez días Brendan Eich creó la primera versión, aun así la habilidad de Brendan en tomar los mejores aspectos de los lenguajes de programación Scheme, Self y C/C++ han hecho de JavaScript un lenguaje muy potente y expresivo.
En un inicio se llamó mocha, después LiveScript en su primer lanzamiento oficial en 1995 y tres meses después lo llamaron JavaScript, este último nombre tiene muy poco que ver con el lenguaje, según se entiende, lo llamaron así por estrategia de mercadotecnia porque Netscape incrustaba Java en el navegador web.
Netscape anuncio una reunión con la organización de estándares Ecma International para dar paso a la estandarización de Javascript. Así la primera edición ECMA-262, fue aceptada por la asamblea general de Ecma en junio de 1997. Así que realmente el estándar del lenguaje se llama ECMAScript.
Javascript en múltiples plataformas
Javascript es un lenguaje de programación muy flexible, multiparadigma, dinámico y con un gran potencial, es por eso que lo encontramos actualmente en diferentes áreas, por mencionar algunas:
Navegadores web como Firefox, Google Chrome, Opera, Safari.
Aplicaciones móviles, incrustado en la aplicación nativa, un ejemplo es Cordova y Ionic
En Node.js para crear servidores http, ftp y cualquier tipo de tecnología de red de una forma escalable, otro ejemplo es ejecutar scripts en tu sistema operativo para automatizar tareas.
Programación de Robots e IoT (Internet de las cosas), por ejemplo Arduino y johnny-five.
Conclusión
La implementación interna de la programación orientado a objetos y funcional desde el inicio en JavaScript, han hecho que este lenguaje de programación tenga el éxito global de hoy en día. Permitiendo crear un código más eficiente y expresivo
ES_MX 
EN