Debemos saber algo de
JavaScript antes de comenzar, primero si no
conocemos que es
HTML se nos va a
complicar, segundo tenemos que tener paciencia e ir de a poco en poco y
tercera prueba aunque esto sea para todo probar es la única forma de aprender
y que se nos queden los conocimientos bueno empecemos.
JavaScript se usa en conjunto con
HTML por eso
anteriormente había definido que debíamos por lo menos disponer de
conocimientos muy básicos (tenéis un enlace a explicaciones que he subido con
antigüedad con respecto a
HTML que sin
duda te ayudaran). Ahora si comencemos el
CODIGO Siii:
Bueno primero coloquemos la estructura básica que por lo general posee todo
documento
HTML.
<html>
<head>
<title>Empezando con JavaScript</title>
<head>
<body>
</body>
</html>
Ahora para empezar introduciremos el elemento necesario para que el navegador
interprete el código que es script que al igual que en
HTML se usaría
las etiquetas <script> para empezar el código de JavaScript
</script> para finalizar el código. Se puede ubicar en cualquier parte
del código pero por estética lo ubicaremos en la cabeza de la página es decir
dentro de <head></head> digamos que es el estándar que usan muchos programadores pero si lo ubicamos en otro lugar del documento el resultado es
el mismo de echo se recomienda ponerlo al final para que cargue todo el contenido sin embargo yo opto por hacer arreglos y siempre ponerlo en esa sección de la página.
Vendría quedando algo así el código.
<html>
<head>
<title>Empezando con JavaScript</title>
<script>
//aquí escribiremos todos los códigos en JavaScript que veremos a continuación
</script>
</head>
<body>
</body>
</html>
Nota: use // Porque de esta
forma el código no se ve afectado es decir lo que escriba en esas líneas
no se refleja en la página web a esto se le llaman comentarios nos sirve para
que en caso de que tengamos un código muy grande podernos guiar porque os
podéis imaginar un código de 300 líneas nos perderíamos por completo pero si
lo comentamos podemos encontrar esa línea de código mucho más rápido se puede
usar la nomenclatura anterior o esta que tiene esta estructura.
/* Este // Este es un comentario de una línea
es un
comentario
de
múltiples
líneas */
Mostremos algo en pantalla para saber que vamos bien
<html>
<head>
<title>Empezando con JavaScript</title>
<script>
alert("Hola desde JavaScript!!! ");
//aquí escribiremos todos los códigos en JavaScript que veremos a continuación
</script>
</head>
<body>
</body>
</html>
Nota: Debemos recordar que cada cambio que
realicemos y queramos ver los resultados en el navegador primero guardamos el
archivo y luego recargamos el navegador es imprescindible que hagamos
esto.
Al iniciar el ejemplo anterior en el navegador veremos una pantalla que se
dispara diciéndonos Hola desde JavaScript como se ve en la siguiente imagen
Al concepto anterior se le llaman acciones o funciones que se ejecutan
en JavaScript también existen los objetos que se le agregan propiedades a
través de la famosa sintaxis de punto expliquemos lo anterior.
alert("aquí va el mensaje");
alert es una función predefinida que nos muestra un mensaje como pudimos
observar en la imagen anterior entre los paréntesis le introduciremos los
parámetros los cuales por asi decirlo van a darle un comportamiento a esta
acción.
Algo que debemos tener en cuenta para todo JavaScript es lo siguiente
todo texto se escribirá entre comillas que pueden ser comillas simples '' o
dobles "" el resultado es el mismo debemos conocer además que si abrimos unas
comillas debemos cerrarlas para indicar que hay contendrá texto.
Con el ejemplo anterior he demostrado dos cosas la primera he hecho que
nuestra página muestre un contenido que anteriormente desde HTML era imposible
y segundo a que vendría enfocado más o menos este lenguaje de
programación es un lenguaje orientado a objetos conoceremos por objeto a algo
es decir una cosa que posee propiedades y tienen un determinado comportamiento
así lo definiría yo pero captemos lo que hablo mejor con otro ejemplo.
Anteriormente había mostrado una alerta que me mostraba un mensaje ahora
hagamos otro ejemplo e usemos la sintaxis de punto veréis que sencillo.
document.write("Hola Mundo");
Esto lo colocaremos dentro de nuestras etiquetas script quedaría así
<html>
<head>
<title>Empezando con JavaScript</title>
<script>
document.write("Hola Mundo");
</script>
</head>
<body>
</body>
</html>
Veamos que hice anteriormente traeré el código de nuevo.
document.write("Hola Mundo");
Desglosemos por partes veamos document es un objeto que hace referencia al
documento de la página, para acceder a las propiedades e instrucciones de este
objeto y de todos objeto en JavaScript en general usaremos un punto por
eso el tan repetitivo sintaxis de punto (.) y ahí definiremos su
comportamiento, podemos ver que he agregado entre paréntesis y muy
importante las comillas cuando usamos texto, he agregado el texto así de
simple puede parecer complicado pero leeré el código he dicho que en
la página quiero escribir el texto Hola Mundo.
document:significa documento en inglés.
write:significa escribir en inglés.
Así mostramos nuestro primer Hola Mundo desde JavaScript, puede que no veáis
diferencia entre escribirlo en
HTML y la verdad
que a nivel visual no posee diferencias pero es cuando llega JavaScript un
poco más avanzado a darles uso a estos conceptos que parecen tan básicos.
Si habéis sido observadores podéis haber notado un punto y coma al final (;)
que no he mencionado será que no tiene funcionalidad.
Pues no que lo pongamos o no, no hará diferencia en nuestro código, ¿pero por
qué lo pongo y miles de programadores y códigos de JavaScript lo tienen el
punto y coma al final? significa que una instrucción ha finalizado en algunos
lenguajes como PHP es obligatorio en otros como JavaScript no lo es pero si es
una buena práctica de programadores además si queremos entrar de lleno
en el mundo de la programación es bueno que nos vayamos acostumbrando.
JavaScript es case sensitive es decir es sensible a las mayúsculas y
minúsculas no podemos poner por ejemplo Document que no lo entenderá por
lo que los objetos, variables, instrucciones o funciones deben de ir como
están predefinidas por este lenguaje.
Lo he dejado para el final ya que su funcionamiento puede llegar a trocarnos.
Hay otra forma de interpretar un código JavaScript y es llamándolo desde un
archivo externo para eso crearemos un archivo de tipo texto en el mismo
directorio que tenemos nuestro documento HTML con un nombre cualquiera que
deseemos (recomiendo que no tenga espacios) pero eso si debe cambiar la
extensión a js (extensión que hace referencia a los archivos de tipo
JavaScript) y ahí escribiremos todo el contenido de JavaScript:
Veamos como llamo a ese archivo desde mi página HTML.
<html>
<head>
<title>Empezando con JavaScript</title>
<script src="el nombre del archivo.js"></script>
</head>
<body></body>
</html>
El elemento script tiene una propiedad src que nos
permite enlazar un archivo JavaScript externo definiendo su ubicación y
extensión (js).
Después en el archivo con extensión js podemos escribir código JavaScript
directamente o sea escribimos lo que normalmente escribiríamos entre las
etiquetas script del documento HTML sin especificar en este nuevo documento js
este elemento listo tendremos la llamada desde un archivo externo de
JavaScript pueden probar cualquier instrucción alert() document.write() o
cualquier otra si conocemos .
Creo que hasta aquí ha llegado la explicación de cómo empezar con
JavaScript hay mucho recorrido todavía por andar es un lenguaje que ofrece
muchas posibilidades en conjunto con HTML, CSS, PHP y HTML5 que deberíamos
tener en cuenta iré subiendo contenido por lo que podéis encontrar mucha
información en mi blog que sin duda te ayudaran a tener los conocimientos
tanto básicos como complejos de este lenguaje y muchos más para el desarrollo
web Chao.
Comentarios
Publicar un comentario