Bases de Javascript

Logotipo de Javascript

En este artículo hablaremos de lo esencial para entender javascript, y comenzar a utilizarlo en nuestros proyectos web. Llegaremos a hacer un primer código, en el que más allá de explicar su sintaxis, nos servirá para realizar algunas acciones que nos serán muy útiles para comenzar a programar. Poco a poco, más adelante, hablaremos detenidamente de todo lo demás, de si punto y coma, mayúsculas y minúsculas, etc. Así que si es tu primer lenguaje de programación (además de HTML y CSS), no te preocupes.

Si por el otro lado, ya conoces algún otro lenguaje, quizá valdría la pena dar una ligera revisión a estos primeros artículos, simplemente para entender las diferencias que pueda haber con otros que conozcas. Si por ejemplo, ya usas Java y piensas que Javascript es igual, seguramente lo encontrarás demasiado “libre”, sin tener que usar una sintaxis escrita. O para no ir más lejos, no es un lenguaje orientado a objetos, por lo que se deben resolver situaciones de manera distinta.

En fin, comencemos con lo primordial

¿Para qué me sirve Javascript?

Algo que personalmente encuentro diferente al programar un sitio web con respecto a programar algo diferente como, por ejemplo, una aplicación web, es que se necesitan de diferentes lenguajes para trabajar. Un solo proyecto puede llevar fácilmente cuatro o cinco sintaxis diferentes. Por un lado html, css, javascript, pero si también estamos haciendo la parte del lado del servidor, también tendremos que escribir en php, mysql o algo semejante. Para traer la información añadiríamos xml o json, y si nos sentimos más cómodos con algunas bibliotecas, le sumaríamos jquery o algo parecido. Seguramente con el tiempo una situación así te resultará cosa de todos los días, pero por el momento resulta abrumador. Vámonos a lo indispensable.

Aunque queramos simplificarlo, lo mínimo que se necesita para hacer un proyecto web serían tres partes: html, css y javascript. Cada una tiene su propio uso. Imaginemos que hacer un sitio web es como construir una casa o un edificio. En un primer momento tenemos que construir la “obra negra”, establecer cuántas habitaciones y dónde van a estar, en qué lugar van a estar las escaleras y las puertas. Terminada esta parte tenemos algo sólido pero bastante feo. Esa es la labor del HTML, definir las regiones principales del documento, el texto, las imágenes. Pero con esto solo tenemos un sitio en blanco y negro.

Para embellecer la construcción, ponerle colores a las paredes, mármol al piso, necesitamos css. Pero aunque nos pasemos horas y horas trabajando con él, el proyecto no queda terminado. A la casa le faltaría la electricidad, la fontanería. No tendría seguridad en las puertas. Esta es la parte de javascript, dar funcionalidad al sitio: usar botones para interactuar con el usuario, validar formularios.




Un lenguaje del lado del cliente

Ya comprendiendo la razón de javascript, también se debe comprender sus alcances, ya que como mencionaba anteriormente, un proyecto web puede llevar más cosas. De manera general, hay dos áreas generales cuando se habla de la web. Por un lado está el usuario, quien desde su navegador se mueve por diferentes sitios de internet. Por el otro están los servidores, donde se aloja la información. Dentro de esta división, los lenguajes que hemos mencionados son procesados del lado del cliente, del browser. Otras tecnologías, como .NET, Php o MySQL viven en el servidor.

¿Por qué es importante recordar esto? Porque nos ayudará a darle a cada cosa su lugar. Ya entendiendo que Javascript funciona en el browser, puede realizar algunas de las siguientes acciones:

  • Reconocer a los elementos de html, así como sus propiedades y modificarlas
  • Modificar las propiedades css de los elementos.
  • Crear más elementos de html o xml
  • Modificar las propiedades de las ventanas del navegador, como sus dimensiones y posiciones.
  • Acceder a recursos del navegador, como almacenar datos que solamente vivan dentro de este, saber la fecha de la computadora, la versión del navegador, etc.

Ahora, acciones que no puede realizar porque no ocurren en el navegador sino en el servidor son:

  • Almacenar información que se pueda compartir con múltiples usuarios. En otras palabras, conexión a una base de datos en el servidor.
  • Acceso a acciones en el servidor, como enviar un correo o saber la fecha del servidor, crear documentos en este, etc. Para simplificarlo, no puede manejar lo que ocurre en el servidor.

El empezar hablando de los límites de algo puede resultar frustrante, como cuando antes de que tus papás te prestaran el auto ya te estaban diciendo lo que no se debía hacer. Pero repito, solamente es para entender a donde llega una cosa y empieza la otra. Como una especie de spoiler, puedo adelantar que la frontera entre el servidor y el navegador es muy pequeña, y que el indicar que javascript NO puede realizar ciertas acciones, no significa que NO pueda acceder a estas cosas. Pero bueno, en algún momento llegaremos a eso. Primero, empecemos a programar.

Etiqueta <script>

De la misma manera que css, la sintaxis de javascript es diferente a la de html, así que para poder utilizarla debemos ponerla en una región del documento que especifique ser diferente al lenguaje de etiquetas. Si vamos a poner javascript dentro del documento, debe ir dentro de la etiqueta <script>

<script>
</script>

En cuanto a dónde debe de ir la etiqueta <script>, hay dos propuestas. Están los que recomiendan que se ponga al final del documento, o al menos antes de cerrar <body>, ya que con eso nos aseguramos que toda la información ha sido cargada. Del otro lado están los que ponen la etiqueta <script> dentro de <head>, al igual que los estilos y otros elementos que no son visibles. En mi opinión, habrá momentos para ponerlos de una u otra forma. Para este caso, vamos a ponerla dentro de body.

Algo en lo que difiere javascript con respecto a css es que no es el único lenguaje que ocupa <script>, sino que un inquilino más. Por ello, para indicar que la sintaxis que se va a utilizar es javascript, se le añade el atributo type.

<script type=”text/javascript”>
</script>

Antes de continuar, te recuerdo que estos artículos tienen que ver con mi propia experiencia como diseñador, desarrollador e instructor. También con mis propias manías. Seguramente habrán razones más que importantes para realizar las cosas de una manera u otra, y a lo mejor algún día tendré una discusión acalorada con colegas, tipo si Han Solo disparó primero o no, para definir cierta característica o no al programar. En el caso anterior, aunque puede ocuparse la etiqueta <script> para usar otro lenguaje (como livescript o tcl), es algo que nunca he necesitado hacer y que analizando muchos sitios, tampoco he visto. E la mayoría de las ocasiones se usará para javascript. De todas formas, el atributo type no es obligatorio. Es muy probable que en ejemplos posteriores lo vaya olvidando.

¡Alerta! ¡Todo va bien!

Ya para empezar a hacer algo, dentro de <script> escribe el siguiente código

alert("Javascript funcionando");

Viendo nuestro documento en el navegador, saldrá una ventana en la que nos mostrará el mensaje escrito entre los paréntesis.

Ventana de alerta




Código final del ejercicio

<!doctype html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Javascript Básico</title>
</head>
<body>
<script type="text/javascript">
alert("Javascript funcionando");
</script>
</body>
</html>

Be the first to comment

Leave a Reply

Your email address will not be published.


*