Cursos Empresas Blog Live Conf Precios

¿Cómo funciona JavaScript?

Clase 11 de 41 • Curso de HTML y CSS 2019

Resumen

JavaScript es un lenguaje de programación que nos permite realizar actividades complejas en nuestras páginas web: almacenar valores en variables o realizar operaciones.

Para incluir JavaScript en nuestro HTML debemos utilizar la etiqueta script:

<html>
	<head>
		<script src=""script.js"">
		</script>
	</head>
</html>

Jorge Andres Florez Rivera

student•

Este profe se saca las cosas del sombrero. Parece mago. Ni mostró cómo creó el archivo .js

Ray Orlando Hernández Cartaya

student•

Bueno, se supone que antes de ver este Curso ya se debió ver el de Programación Básica XD

Diego Rubio

student•

y si haces los cursos en el orden que corresponde, profe será mago tu eres brujo XD

Pablo Andres

student•

Cómo funciona JavaScript

JavaScript es un lenguaje de programación que nos permite realizar actividades complejas en nuestras páginas web: almacenar valores en variables o realizar operaciones.

DOM: Document Object Model - Modelo de los objetos de un documento HTML JavaScript tiene la capacidad de modificar, crear o eliminar elementos dentro de un documento HTML. Se dice que el DOM es el “arbol” con los elementos del documento HTML.

	
	DOM
		HTML
			head
				links
				metas
			body
				div1
				div2
				…

El código javascript puede incluirse en un documento HTML dentro de un atributo de evento como "onclick" o “onhover”. (HTML Event Attributes list)

	
	<div onmouseover=“alert(‘You are over me! Please don’t do that!')” ></div>

Dentro de la etiqueta <script>:


	...
	</div>
	<script>
		console.log(’This message will appear at the console’)
	</script>
	<div>
	...

O en un tag <script src="script/script.js"></script> para invocar un documento externo con código JS (conviene antes de cerrar la etiqueta body).

Alejo Fonseca

student•

Gracias!

Marcos ismael Caballero reyes

student•

gracias

Javier Andrés Moreno Tocarruncho

student•

Para que funcione en el navegador el código que insertó @rulotico en JavaScript, necesitamos primero enlazar nuestro archivo script.js en el index.html:

<html> <head> <script src="script.js"> </head> </html>

Ivan Sevilla

student•

Es recomendable poner la etiqueta <script> justo antes de cerrar el <body>.

Carlos Gómez Mont

student•

Super aporte, saludos!!

Brayan Potosi Dominguez

student•

CARLOS ALBERTO COMBITA

student•

Alli es donde necesito llegar aprendiendo JS.....

Samuel Quintanilla Garza

student•

A ese alert le falta ;

alert("Hola");

Carlos Jesús Fernández Salazar

student•

Hola @drsamquintanilla actualmente en JavaScript sólo es obligatorio usar ; para finalizar, en unos pocos casos muy específicos, es decir, ya prácticamente no es necesario usar ; Puedes confirmarlo viendo que en el momento 4:07 crea dos nuevas variables aparte de las dos primeras, esta vez sin ; y funciona perfectamente :D

Juan David Avila Caycedo

company_admin•

Existen varios tipos de variables “Cajistas para guardar datos en memoria” en JavaScript, JS para los cuates (amigos).

Globales
El acceso o a estas se puede hacer desde cualquier parte del programa por tanto su alcance el global, de ahí que sea Global,

if (true)
{
	var variableGlobal = "Hola Todos (^-^ )/";
	console.log(variableGlobal);
}
console.log(variableGlobal);

Locales
El acceso a estas se puede hacer desde el mismo nivel o bloque en el cual fue definida

if (true)
{
	let variableLocal = "Hola desde el bloque donde me definieron (^-^ )/";
	console.log(variableLocal);
}
// En la siguiente linea tendremos un error
console.log(variableLocal);
//Uncaught ReferenceError: variableLocal is not defined

Variables Constantes (Locales)
Esta tiene las mismas condiciones que las Locales mas unas restricciones extra, y es que este tipo de variable es inmutable.

Que si, que esto es contradictorio lo sé, pero míralo de esta manera las variables en programación las entienden como las definí en un inicio son una referencia a una ubicación en la memoria donde podemos guardar datos, entonces con esa definición de variables comprendemos mejor porque se les llama variables constantes.

if (true)
{
	const variableConstante = "Hola, no me puedes cambiar (^-^ )/";
	console.log(variableConstante);
	// En la siguiente linea tendremos un error
	variableConstante = "¡Pero te he dicho Tio!, no me puedes cambiar";
	//Uncaught TypeError: Assignment to constant variable.
}
// En la siguiente linea tendremos un error
console.log(variableConstante);
//Uncaught ReferenceError: variableConstante is not defined

Rene Ismael Barrios Rojas

student•

El curso es muy bueno y excelente explicado, pero hasta ahora es básico

Juan Carlos García Esquivel

student•

El código JavaScript se puede incorporar al documento mediante tres técnicas diferentes:

1. Mediante atributos en las etiquetas HTML:

<!DOCTYPE html>
<html lang="es">
	<head>
		 <title>Mi primer documento HTML</title>
 	</head> 
 <body>
	<!--El codigo js esta contenido en el atrubuto onclick de la etiqueta p-->
 	<p onclick="alert('Hizo clic!')">
		Clic Aquí
	</p>
 </body>
</html>

2. Mediante las etiquetas <script></script>:

<!DOCTYPE html>
<html lang="es">
	 <head>
 		<title>Mi primer documento HTML</title>
 	</head>
 <body>
 	<p>HOLA MUNDO!</p>
	<script>
		//El codigo JS esta contenido dentro de las etiquetas 		script
		alert("esta es otra forma de agregar codigo js");
	</script>
 </body>
</html>

3. Por medio de un archivo externo:

<!DOCTYPE html>
<html lang="es">
	 <head>
 		<title>Mi primer documento HTML</title>
 	</head>
 <body>
 	<p>HOLA MUNDO!</p>
	 <script src="micodigo.js"></script> 
	<!--El codigo JS se carga de un archivo externo llamado micodigo.js-->
 </body>
</html>

Joe Domat

student•

Minuto 3:51 ";"

https://platzi.com/clases/1492-html-css/16987-js/?time=231

Rony Porraz Vargas

student•

Esta el dom (document object model) y tambien esta el BOM que es el browser object model

Alexander Valencia

student•

Javascript es el mejor

Oscar Lopez

student•

Para ser un buen front-end toca aprender bien HTML5, CSS3 y JAVASCRIPT, en realidad JavaScript seria toda la lógica que le damos a nuestro website y para saber JavaScript tocaría tener bien claro muchos conceptos de la lógica de programación.

Para enlazar el archivo javascript al html hay varias manera la mas correcta y pór orden es asi ejemplo: <script src=""></script> ejemplo en codigo :

Esto es en el archivo html

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Curse_httm_css</title> <link rel="stylesheet" href="../css/style.css" /> </head> <body> <script src="../javascript/one_js.js"></script> </body> </html>

Esto es en archivo javascript con un alerta (Hello world) alert("hello world")

Johan Avila

student•

Para los compañeros que no entienden del todo lo que hace mejor vean el cuso de programación básica

Johan Avila

student•

Este curso esta bien para los que ya saben un poco sobre esto pero no dejo de pensar que muchos se puede perder, va muy rápido. xd

Juan Esteban Galvis

student•

De pronto si, pero siento que se le olvida explicar lo más básico, por ejemplo un archivo HTML debe terminar con .html , un css con .css y un JavaScript con .js

No se si todos los editores de codigo lo traigan, pero el auto llenado es un plugin llamado "Emmet" super recomendado.

De resto siento que va bien, dime si algo más por ejemplo que no entiendas 👍 animo que es fácil.

Yuriko Barrera

student•

¿Soy la única emocionada? Me encantó la explicación

Mirna Mabel Veras Carvajal

student•

A mí también me encantó.

Christian David Sánchez

student•

Para reforzar los conocimientos de JS, podemos acudir a: https://www.w3schools.com/js/default.asp

Franciree Arellán

student•

JavaScript =! Java

Ian Vassallo

student•

C++ =! C

Manuel Rivera

student•

TeamJS 💛🖤..

Gustavo Corona Meza

student•

JavaScript se declara en el Head o en el body?

Wonder Jhonny Diaz Gonzalez

student•

Hola, Los scripts se pueden colocar en el <body>, o en la sección <head> de una página HTML, o en ambos.Según las necesidades.

Johan Avila

student•

Lo puedes poner donde quieras, pero generalmente se pone antes de cerrar la etiqueta <body>

Jonas Ivan Tsuchida

student•

Me funcionó, pero después de colocar el script me rompe todo el esquema de colores en Atom. Alguna idea?

Cristian Antonio García González

student•

Hola @AkitaT.

Hola @raul-sabinas.

Es un bug que tiene el editor de Atom a la hora de unir mas de un lenguaje en el mismo archivo, por eso no te lo marca con color, mientras si lo hace con otro editor ejemplo VSCode puede marcarte los colores si hay más de un lenguaje en el mismo archivo aunque tiene sus limites, por eso cuando lo cargas en el navegador te funciona ya que aunque el editor no te lo marque con colores el editor lo lee ya que el editor los colores es para el que lo escribe para una guía visual, pero no te preocupes por eso más adelante aprenderás a separar cada archivo por lenguaje y así el editor no tendrá ese bug.