Curso de Javascript: Introducción a Javascript

Introducción

Javascript es un lenguaje de Scripting, es decir es un lenguaje interpretado, no se compila por lo tanto, se interpreta línea a línea.  El intérprete principal suele estar colocado en el navegador web por lo que se ejecuta en el cliente web.

El navegador web es el responsable de la ejecución y el análisis de la sintaxis del lenguaje por lo que siempre que vayamos a ejecutar el programa que hayamos hecho en Javascript (JS a partir de ahora)  deberemos probarlo con el navegador.

Es un lenguaje puramente orientado a objetos, por lo que prácticamente todas las variables serán objetos y salvo las sentencias de control, casi siempre trabajaremos con los objetos como variables en las sentencias.

Otras caraterísticas del lenguaje es su orientación a Eventos, dichos eventos tienen una serie de comportamientos por defecto en el navegador. Sobre todo reconoceremos aquellas acciones por defecto que puede realizar el usuario, tales como, pulsar un enlace, que nos llevará a otra página web, o bien enviar un formulario con un botón dentro del mismo. Desde JS podremos modificar e incluso anular estos comportamientos por defecto en el navegador.

Desde JS podemos también modificar la página en la que nos encontramos, esto formalmente se denomina, Modificar el DOM, es decir, desde JS podemos cambiar el contenido y el aspecto de la página dinámicamente, por este hecho se puede considerar a JS un lenguaje que permite la creación de interfaces dinámicos para los usuarios o GUI’s en el navegador.

Finalmente podemos utilizar también JS como un cliente web, deseo cual podemos consultar servicios web en búsqueda de información, tales como RSS/ATOM, en búsqueda de noticias.

¿Cómo introducir Código Javascript en HTML?

Lo primero que debemos saber es cómo incluir el código JS en el html. Para ello utilizaremos la etiqueta <script>. Esta etiqueta contendrá el código JS.

Pongamos un ejemplo sobre HTML4 y XHTML1:

<script type="text/javascript">
//Aqui va el código JS
</script>

De esta manera podemos ver cómo incluir código en cualquier parte del HTML.
Aunque también podemos incluir un fichero externo mediante una URL, por ejemplo:

<script type="text/javascript" src="fichero.js"></script>

De esta manera incluimos todo el contenido del fichero.js como si lo hubiéramos escrito dentro del HTML.

En este caso el fichero.js estará localizado en el mismo directorio que el fichero html. Lo que se denomina una URL relativa al HTML, si la ruta cambiara, cambiaría también la URL. También podríamos llamar a ficheros JS localizados en otros servidores incluyendo en el valor asignado al atributo src una ruta URL absoluta, indicando el http://servidor/ruta/nombre_de_fichero.js

En el fichero.js (o cómo queramos llamarlo) simplemente incluirá el código JS, sin necesidad de incluir la etiqueta <script> por lo que seremos libres de empezar a declarar variables y sentencias a placer.

Hola Mundo

Para realizar nuestro primer Hola Mundo en JS pondríamos en dentro del código HTML lo siguiente:
<script type=”text/javascript”>
//Hola mundo
alert(“Hola Mundo!”);
</script>
Esto debería sacar un cuadro de diálogo por pantalla con el mensaje que hemos puesto entre comillas y un botón de aceptar. 

Ejercicios propuestos

  • Ejercicio 1: Crea un HTML que incluya el código del Hola mundo en JS, ejecútalo y comprueba que sale el mensaje por pantalla. 

Referencias:

Licencia Creative Commons

El blog le sirve a alguien !

Hola a todos…
Esto de google analytics va a ser que sirve para algo. Revisando las estadísticas de acceso al blog, me di cuenta que los materiales del Curso de Drupal 7, estaban siendo accedidos desde un moodle. Decidi a investigar el tema, me enteré que el moodle en cuestión pertenece al Centro Universitario de los Valles perteneciente a la Universidad de Guadalajara, México. Así que ni corto ni perezoso me puse en contacto con ellos a ver cómo era que tenían enlazados mis contenidos en su plataforma. 
En menos de 24h me contestaron, es lo que tiene la diferencia de horario. En concreto fue el Mtro. Abraham Vega Tapia, Responsable de la asignatura de Software Aplicado II de la Licenciatura en Sistemas de Información de la citada universidad. A parecer el título de Mtro. corresponde a un Postgrado en México.
Me comentó que el uso que realizaban de los materiales del blog era a nivel académico, por lo que le contesté que estaba encantado que el contenidos de este humilde blog pudieran utilizarse como materiales complementarios de una asignatura de carrera. 
Os dejo aquí un enlace a la presentación de la carrera que tienen en prezi.
Así que un motivo más para continuar con este blog y con la generación de estos materiales. 
Un abrazo y mucho ánimo al maestro y sus alumnos.
David

Novedades

Hoy estreno nuevo tema en blogger. Después de haber metido un tema bastante más espartano, me he decidido por un fondo de tonos azules y un manejo dinámico del contenido del blog.
Como habéis estado viendo he estado introduciendo nuevos cursos y tengo 4 frentes abiertos.

Mi intención cuando estén terminados estos cursos es subir dos nuevos cursos  de desarrollo de apps uno con  iOS7 y otro con Android 4.
Es una gozada poder volver a escribir cosas en el blog y poder aportar estos nuevos materiales y liberarlos con Licencia CC y que así podáis acceder a ellos libremente, gracias a las colaboraciones en Consultec y  con el Cetic en Vitoria.
Ha sido un año complicado pero espero que en estos tiempos revueltos cerrar este año creciendo personal y profesionalmente.

Gracias a todos aquellos que siguen el blog y me dan ánimos para continuar con el. 

Curso de CSS3

Curso de CSS3

Destinatarios

Maquetadores y programadores web con conocimientos en maquetación CSS2 y HTML4.

Objetivos

  • Conocer las nuevas propiedades CSS3
  • Saber poner en marcha los usos sobre botones y textos
  • Saber importar tipos de letra
  • Saber realizar degradados sobre elementos
  • Saber aplicar distintos estilos dependiendo de la resolución de pantalla

Temario

  • Introducción
  • Nuevas propiedades
  • Botones redondeados
  • Varios fondos de imagen
  • Colores con transparencia
  • Nuevos selectores
  • Sombras
  • Degradados
  • Media Queries

Suscríbete al Boletín

Si quieres estar al tanto de las novedades del blog, ya sabes :)
* = campo obligatorio

powered by MailChimp!

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información. ACEPTAR

Aviso de cookies