JavaScript .- Sintaxis

Sintaxis son las reglas que hay que seguir dentro del lenguaje .

Valores Literales o Fijos.

-Los números se pueden escribir con o sin decimales , por ejemplo;

num = 3 ;

num2 = 3.141681 ;

-Al escribir cadenas de texto podemos hacerlo con Comillas dobles "" o simples ' ' por ejemplo

texto = "Soy texto" ;

texto2 = 'Soy texto';

Valores variables 

Estas las utilizamos para guardar algunos valores y que después podemos cambiar

-Para declarar estas Variables utilizamos palabras reservada como var , let o const.

-Después escribimos el nombre que quisiéramos ponerle respetando algunas reglas; 

1) La primer palabra .- debe ser una letra un guion bajo _ o un signo dolar $ , nose permite nombrar a una variable con un numero al inicio.

2) Después de la 1er palabra puede tener numeros , letras , guiones bajos _ , o el signo dólar $

Importante ; no confundir el nombre de la variable con su valor, tranquilo , mediante la practica esto va quedando muy claro poco a poco

-Para darles algún valor utilizamos el signo igual = 

-le damos algún valor cadena texto o numero , que son los que hemos estudiado

-Cerramos nuestra instrucción con punto y coma ;

Ejemplo

Vamos a escribir 6 ejecuciones distintas ,para igualar una palabra y darle un valor texto o uno numérico

let NombredeVarible = 'nuestro texto';

var _NombredeVarible = 'nuestro texto';

const $NombredeVarible = 'nuestro texto';

let _GuardarNumero = 1;

var $GuardarNumero2 = 2;

const GuardarNumero3 = 3;

Entraremos mas a detalle en las diferencias entre let , const y var mas adelante.

Operadores Aritméticos

para hacer cálculos podemos usar de forma básica + - * / , y podemos guardar estos valores en las variables.

Ejemplo

3 + 2

3 - 2

3 * 2

2 / 1

Palabras Reservadas

hay palabras dentro del lenguaje especiales para producir acciones predeterminadas , y utilizar estas palabras mas haya de su función a la hora de programar puede provocar errores o confusión al navegador.  

Ejemplo

let ,var, const , se utilizan para construir variables y a estas variables les otorgamos un nombre.

No podemos llamar a una variable con una palabra reservada.

let var = "Esto no funcionara"

var let = "Esto nos causara errores"

let const = "no podemos nombrar con una palabra reservada"

Esto no se ejecutara de buena forma , y aunque lo iremos viendo mas a fondo adelante , toma en cuenta esto ; hay palabras reservadas a las cuales debemos tener cuidado y solo usar para la función exclusiva que fueron creadas.

Comentarios JavaScript

Un comentario es un texto que escribimos pero que no se ejecutara , esto nos sirve para dejar algunas aclaraciones sobre nuestro cogido.

Estos serán comentarios al escribirse después de // en la misma linea o al escribirse entre /*texto */  

Ejemplo

//Este texto se ejecutara en un cuadro de dialogo

alert("Hola"); 

//Este texto se ejecutara en consola

console.log("Hola");

//Este texto no se visualizara en el navegador

/* Comentario

de mas de 1 linea */

JavaScript distingue entre mayúsculas y minúsculas

Cuando nombramos Variables , objetos , funciones , arrays etc (los últimos aun por ver mas adelante), y necesitamos llamarla o renombrarla , nos vemos en el caso de que hay una distinción entre mayúsculas por ejemplo ,estas variables son totalmente distintas, a pesar de que nosotros las leamos igual.

let Nombrevariable = "Texto"

let nombrevariable = "Esta es una variable distinta"

let nombreVariable = "Esta es una variable distinta"

let nombreVariablE = "Esta es una variable distinta"

Todas son variables distintas, tienen las mismas letras ,pero algunas están en mayúsculas y otras en minúsculas.

Conclusión

Aprendimos la sintaxis básica para empezar a trabajar , el como escribir números , texto , como declarar variables , comentarios y las formas de nombrar variables.

Despedida

Esperemos te haya servido de utilidad este articulo , síguenos en nuestras redes sociales para seguir aprendiendo juntos , compártenos cualquier duda o comentario que te haya surgido , puede ayudarnos a crecer a ambos.

Te dejamos algunas imágenes que puedes guardar como apuntes de estudio

JavaScript.- Declaraciones Javascript

Cuando se corre un programa o una aplicación web , lo que pasa internamente ; son una lista de instrucciones que nuestra maquina debe seguir. A estas instrucciones las llamamos ;

Declaraciones.

JavaScript podría definirse como ; una lista de instrucciones de carácter Interactivo que ejecuta nuestro navegador.

Estas Declaraciones se componen de

Valores, operadores, expresiones, palabras clave y comentarios.

y cada declaración (Instrucción) se separan por punto y coma ;

por ejemplo Código JavaScript;

alert("Primera instruccion");

alert("segunda instruccion");

alert("tercera instruccion");

alert("cuarta instruccion");

Al ejecutar en el navegador , veremos como cada instrucción se ejecuta solo al termino de la instrucción pasada ,  teniendo un orden de arriba hacia abajo.

Y aunque en Internet podremos ver instrucciones sin punto y coma ; , ejecutándose sin problema ,    no deberíamos olvidar ponerlos 

De echo al tener el punto y coma como finalización de la declaración , podríamos poner estas instrucciones seguidas.

alert("Primera instruccion"); alert("segunda instruccion");

alert("tercera instruccion"); alert("cuarta instruccion");

y se ejecutaría normalmente

Espacios en Blanco en JavaScript

JavaScript ignora los espacios en blanco , lo cual nos favorece a la hora de escribir código y ponerlo en una forma mas ordenada.

Como ejemplo escribiremos 2 instrucciones que son equivalentes;

alert("Primera instruccion");

alert  ("segunda instruccion")  ;

Saltos de linea en JavaScript

En caso de tener un código muy largo podríamos cortar y escribirlo abajo , lo que nos favorece en la legibilidad.

Como ejemplo escribiremos 2 instrucciones que son equivalentes;

alert("Primera instruccion");

alert 

("segunda instruccion");

Conclusión

Aprendimos lo básico a la hora de declara variables , su finalización , como separarlas y como podemos acomodar para mayor legibilidad del código sin que afecte su funcionamiento  

Despedida

Esperemos te haya servido de utilidad este articulo , síguenos en nuestras redes sociales para seguir aprendiendo juntos , compártenos cualquier duda o comentario que te haya surgido , puede ayudarnos a crecer a ambos.

Guarda esta imagen como parte de tus notas

JavaScript .- Visualización o salida de datos

En JavaScript tenemos diferentes forma de mostrar datos 

-document.write() , (Solo debe usarse para pruebas)

-windows.alert() , (En un cuadro de alerta)

-console.log() , (Se utiliza para depurar)

-innerHTML  , (Insertando texto en una elemento HTML)

Hagamos un pequeño ejemplo de todos.

document.write()

Este es un método muy utilizado en pruebas o practicas de aprendizaje, lo único que hay que hacer , es escribir entre paréntesis lo que queremos mostrar.

-En el HTML solo necesitamos una estructura básica y el enlace a nuestro archivo JavaScript 

Código HTML

<html lang="en">

<head>

    <title></title>

</head>

<body>

    <script src="apuntes.js"></script>

</body>

</html>

Código JavaScript

document.write("texto a mostrar")

y en pantalla se mostrara así.

El detalle con este método , es que cuando llamemos este método en un documento ya cargado, hara que se elimine el código HTML.

window.alert()

Utilizara un cuadro de alerta para mostrarnos el texto que le pasemos , pero vayamos al ejemplo;

-En el HTML utilizaremos el código que ya tenemos (Estructura básica con enlace al archivo JavaScript)

Código JavaScript

podemos omitir la palabra window ,ya que esta pertenece a un alcance global

alert("Texto a mostrar")

Se mostrara en consola de la siguiente forma

Console.log()

mostraremos texto en la consola de nuestro navegador

Se utiliza en la practica y generalmente en la depuración (La depuración se vera mas adelante).

Probaremos el método solo modificando el JavaScript 

Código JavaScript

console.log("Texto a mostrar")

así se vera en la consola 

 te dejaremos un articulo sencillo del uso de la consola.

innerHTML

Tocaremos algunas cosas que aun no hemos explicado a detalle , pero trata de seguirnos.

necesitamos acceder a un elemento HTML desde JavaScript , lo aremos con el siguiente método.

document.getElementById(id)

id es igual al identificador que le hemos puesto a nuestra etiqueta HTML

y enseguida de innerHTML  el texto que queremos agregar , pero vamos al código.

Código HTML

Estructura básica , enlace JavaScript y escribiremos un párrafo con identificador. 

<html lang="en">

<head>

    <title></title>

</head>

<body>

<p id="SobreEscribir">Este parrafo deberia Visualizarse</p>

<script src="apuntes.js"></script>

</body>

</html>

Código JavaScript

document.getElementById("SobreEscribir").innerHTML ="Texto nuevo"

Se vera en pantalla lo siguiente.

Observamos que hemos formateado el texto HTML ,para incluir el que tenemos en JavaScript.

Tenemos algunos articulo mas detallados de esta forma de visualizar datos , ya que es la mas utilizada y un poquito mas compleja cuando vas iniciando, pero ntp entraremos mas detalle y uso conforme vayamos avanzando.

Conclusión 

Para mostrar datos (Texto , numeros ,etc) al iniciar a practicar este lenguaje se utilizan mucho

-document.write() (Solo debe usarse para pruebas)

-windows.alert() (En un cuadro de alerta)

-console.log (Se utiliza para depurar)

ya que facilitan el entendimiento , pero al ir avanzando terminaremos utilizando

-innerHTML (Insertando texto en una elemento HTML)

-console.log (Se utiliza para depurar)

-En este articulo solamente tocamos el tema de mostrar texto , poco a poco iremos demostrando como se muestran números u otro tipo de datos , no desesperes

Despedida

Esperemos te haya servido de utilidad este articulo , síguenos en nuestras redes sociales para seguir aprendiendo juntos , compártenos cualquier duda o comentario que te haya surgido , puede ayudarnos a crecer a ambos.

Guarda esta imagen como nota de estudio.

 

JavaScript .- Introducción

Requerimientos

-Conocimientos Básicos de HTML (La estructura de la web)

-Conocimientos Básicos de CSS (El diseño de la web)

-Navegador (Actualizado de preferencia)

-Editor de texto (de preferencia , se puede usar la consola del navegador también)

-Importante no confundir Java con JavaScript , si JavaScript el lenguaje que esta dominando la web es lo que quieres iniciar a aprender , sigue leyendo.

 ¿Cuál es el trabajo de JavaScript ?

HTML nos brinda una estructura de trabajo , CSS el diseño , y JavaScript es el encargado de darle interactividad a nuestro proyecto.

Ejemplos JavaScript

-Si no entiendes algunas cosas , no te vuelvas loco , solamente queremos mostrarte parte del poder y función de JavaScript , tan solo por el momento copia y pega el código.

-Podemos cambiar el texto escrito en HTML de forma dinámica (Copia y pega este código en tu editor)

<html>

<body>

<p id="cambiaTexto">Cambiaremos este texto</p>

<button onclick='document.getElementById("cambiaTexto").innerHTML = "texto Nuevo"'>

Haz click

</button>

</body>

</html>

Así se mostrara en el navegador

Daremos clic y el texto se cambiara como le hemos indicado

 

Podemos cambiar también los estilos CSS de forma dinámica (Copia y pega este código en tu editor)

<html>

<body>

<p id="cambiarTamaño">Cambiaremos su tamaño</p>

<button onclick="document.getElementById('cambiarTamaño').style.fontSize='35px'">

Haz clic

</button>

</body>

</html>

Así se mostrara en el navegador

Daremos clic y el texto cambiara de tamaño

Podemos ocultar elementos.(Copia y pega este código en tu editor)

<html>

<body>

<p id="ocultarTexto">Este texto se ocultara</p>

<button onclick="document.getElementById('ocultarTexto').style.display='none'">

Haz clic

</button>

</body>

</html> 

Así se mostrara en el navegador

Daremos clic y el texto se ocultara

La forma correcta de incluir JavaScript 

-Se recomienda incluir código JavaScript en un archivo externo , así como lo hacemos con el CSS , así tendremos HTML , CSS y JavaScript por separado , los que nos dará un código mas ordenado y legible.

se agrega de la siguiente forma .

<script src="NombredelArchivo.js"></script>

tenemos un archivo completo en el siguiente link

Agregar tu primer archivo JavaScript  , da clic aquí.

Este tan solo fue un articulo rápido para que continúes con tu aprendizaje en el diseño web, sigue pendiente al siguiente articulo para irte adentrándote de forma practica a la programación de JavaScript

JavaScript.- Elementos del DOM acceder por querySelector()

 Los elementos del DOM (Etiquetas HTML por lo general) ,se pueden seleccionar dentro de JavaScript

para realizar algunas acciones, en esta ocasión lo aremos con

querySelector()

quien nos permite seleccionar ya sea por "ID" , "Clase" o "Etiqueta"

En nuestro ejemplo escribiremos un HTML básico 3 parrafos (uno ID, otro con clase y uno sin selector.).

<!-- Seleccionar elemento en el DOM-->

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Apuntes Navarrete</title>

</head>

<body>

    <!-- Elemento que vamos a seleccionar -->

    <P>Este es una etiqueta parrafo</P>

    <P class="soyClase">Este es un parrafo con una clase</P>  

    <P id="soyId">Este es un parrafo con un ID</P> 

    <!-- Elemento que vamos a seleccionar -->

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

</body>

</html>

<!-- #Apuntesnavarrete -->

y en nuestro archivo JavaScript con las siguiente lineas seleccionamos cada párrafo

document.querySelector("P") //Entre comillas la etiqueta

//Cuando es una clase utilizamos el . como en CSS

document.querySelector(".soyClase") //Entre comillas la clase

//Cuando es un ID utilizamos el # como en CSS

document.querySelector("#soyId")//Entre comillas el identificador

ya estan seleccionados , pero.. esto no nos reflejara nada , ya que aun no hacemos nada con estas partes del DOM

Guardaremos cada parrafo en una variable "Let" y después la mostraremos en consola (Console.log)

y nuestro código JavaScript quedaría así.

let etiqueta = document.querySelector("P")

let esID = document.querySelector(".soyClase")

let esclass = document.querySelector("#soyId")

console.log(etiqueta)

console.log(esclass)

console.log(esID)

y Así se vera en consola.

  Nos muestra los párrafos , inclusive con sus etiquetas e identificador.

Y si los mostramos con un alert() ?

let etiqueta = document.querySelector("P")

let esID = document.querySelector(".soyClase")

let esclass = document.querySelector("#soyId")

alert(etiqueta)

alert(esclass)

alert(esID)

Nos muestra cada elemento del Dom en un object , ¿porque muestra este texto?.. lo veremos mas adelante , lo que nos interesa ahora es la manipulación del elemento

Podemos mostrar el texto que trae nuestros elementos  con .innerHTML

-Nuestro JavaScript quedaría así

let etiqueta = document.querySelector("P")

let esID = document.querySelector(".soyClase")

let esclass = document.querySelector("#soyId")

alert(etiqueta.innerHTML)

alert(esclass.innerHTML)

alert(esID.innerHTML)

En consola ahora se vería así

Hemos logrado proyectar en un alert() el texto que tiene cada párrafo , Muy bien ahí.

Recuerda un detalle muy importante, querySelector() solo va a mostrar un elemento , sin importar cuantas etiquetas , selectores o ID haya , solo mostrara al primero de estos.

para manipular varios elementos de esta forma tendríamos que usar querySelectorAll().

Recuerda estudiar las distintas formas de manipular elementos del DOM y el que distingue cada una de ellas.

Déjanos tus comentarios , dudas o cualquier cosa que quieras compartirnos

Javascript .- Elementos del DOM acceder por getElementsByTagName

  Los elementos del DOM (Etiquetas HTML por lo general) ,se pueden seleccionar dentro de JavaScript

para realizar algunas acciones, en esta ocasión lo aremos por su clase.

getElementsByTagName()

En nuestro ejemplo escribiremos un HTML básico y un parrafo

<!-- Seleccionar elemento en el DOM-->

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Apuntes Navarrete</title>

</head>

<body>

    <!-- Elemento que vamos a seleccionar -->

    <P>Esto es un parrafo</P> 

    <!-- Elemento que vamos a seleccionar -->

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

</body>

</html>

<!-- #Apuntesnavarrete -->

y en nuestro archivo JavaScript , con la siguiente linea seleccionamos a la etiqueta "P"

document.getElementsByTagName("P")

ya esta seleccionado , pero.. esto no nos reflejara nada , ya que aun no hacemos nada con esa parte del DOM

Guardaremos el elemento en una variable "Let" y después la mostraremos en consola (Console.log)

y nuestro código JavaScript quedaría así.

//entre comillas escribimos la etiqueta

let NombredeVariable = document.getElementsByTagName("P")

console.log(NombredeVariable)

y Así se vera en consola.

  Nos muestra una Colección HTML que incluye nuestro párrafo , PEROOO , a diferencia de nuestro articulo pasado con getElementsById , este nos muestra encapsulado en una colección  tipo array nuestro párrafo (aunque solo tengamos 1 )

¿Que hacemos para seleccionarlo y poder manipularlo?

Pues lo que aremos será seleccionar el índice de este párrafo , al ser único llevara el índice 0 , pues es el primer párrafo que escribimos en nuestro documento HTML.

let NombredeVariable = document.getElementsByTagName("P")[0]

Y si lo mostramos ahora en consola? 

Código JavaScript completo

let NombredeVariable = document.getElementsByTagName("P")[0]

console.log(NombredeVariable)

Nos muestra ahora el párrafo en la consola 

y si lo mostramos en un alert , que pasara? 

//Entre comillas el nombre de la clase

let NombredeVariable = document.getElementsByClassName("soyunParrafo")[0] 

alert(NombredeVariable)

Nos muestra el elemento del Dom en un objeto , ¿Por qué se muestra así?.. eso lo veremos mas adelante a profundidad para no confundirte ahora, lo que nos interesa ahora es la manipulación del elemento

Podemos mostrar el texto que trae nuestro elemento ? claro con la propiedad .innerHTML

-Nuestro JavaScript quedaría así

//Entre comillas el nombre etiqueta y su indice

let NombredeVariable = document.getElementsByTagName("P")[0]

//Mostramos el texto dentro de la etiqueta

alert(NombredeVariable.innerHTML)

En consola ahora se vería así

Hemos logrado proyectar en un alert() el texto que tiene nuestro párrafo , Muy bien ahí.

Vamos a subir la complejidad

Utilizaremos el escucha de eventos addEventlistener()

 ahora al dar clic en el elemento podremos mostrar un mensaje , tranquilo si no comprendes aun del todo , ya tienes lo básico que viniste aprender aquí.

Trata de seguirnos  

En nuestro archivo JavaScript agregaremos el escucha de evento que actuara al dar click y mostrara una función , el código quedara así.  

JavaScript

//Entre comillas el nombre de la etiqueta

//y entre corchetes su Indice

let NombredeVariable = document.getElementsByTagName("P")[0]

//El parrafo escuchara el evento click 

// y despues ejecutara una funcion

NombredeVariable.addEventListener("click",function(){

    //la cual en esta ocasión es un alert

alert("has echo click")

})

En nuestra pagina web damos clic sobre el texto del párrafo "Esto es un parrafo" y nos mostrara lo siguiente.

Podríamos seguir implementando eventos,  pero primero queremos tocar esta duda;

¿Qué pasa cuando tenemos varias etiquetas del mismo tipo?

¿Que hacemos cuando tenemos esto?

HTML

<!-- Seleccionar elemento en el DOM-->

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Apuntes Navarrete</title>

</head>

<body>

    <!-- Elemento que vamos a seleccionar -->

    <P>Primer parrafo</P> 

    <P>segundo parrafo</P> 

    <P>tercer parrafo</P> 

    <!-- Elemento que vamos a seleccionar -->

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

</body>

</html>

<!-- #Apuntesnavarrete -->

Primero vamos a ejecutar el JavaScript normal donde seleccionaremos toda la colección y la mostraremos en consola.

//entre comillas escribimos la etiqueta

let NombredeVariable = document.getElementsByTagName("P")

console.log(NombredeVariable)

nos muestra de nuevo el mismo código HTMLCollection con un array que contiene todos nuestros párrafos.

pero y si ahora llamamos a todos los párrafos por sus índices? ,esta vez agregaremos los índices hasta llamar a la variable 

Javascript

//entre comillas escribimos la etiqueta

let NombredeVariable = document.getElementsByTagName("P")

//Imprimimos el primer parrafo - indice 0

console.log(NombredeVariable[0])

//Imprimimos el segundo parrafo - indice 1

console.log(NombredeVariable[1])

//Imprimimos el tercer parrafo - indice 2

console.log(NombredeVariable[2])

y nos mostrara en consola los párrafos

Podríamos seguir implementando y probando cosas , pero eso es todo por el momento de este articulo básico de " Seleccionar elementos del DOM por su "Clase"

Recuerda estudiar también las demás formas de seleccionar eventos del DOM (ID, class,etiqueta y varios a la vez)

Recuerda también estudiar mas sobre el evento Escucha addEventListener

el cual puede escuchar clic , doble clic , pasar por encima el mouse y muchas otras.

También las distintas formas de recorrer coleciones , arrays y objetos.

no olvides dejarnos tus comentarios , tus dudas o sugerencias para otros articulos.