Primeras dos clases

maddes · May 5, 2016 · d9b8c88 · d9b8c88
1 parent d64b7a6
commit d9b8c88
Show file tree

Hide file tree

Showing 5 changed files with 175 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -1 +1,28 @@
-# js-tutorial
+# js-tutorial
+
+- variables
+  - como definir
+  - tipo de datos
+  - como usarlas (básico)
+  - orden de ejecución
+- operadores
+  - numericos
+  - string
+- comparadores
+  - numericos
+  - booleanos
+- control
+  - if/else
+  - for
+    - peligro: bucles infinitos
+    - anidamiento
+    - ~while~
+- arrays
+  - forEach
+  - búsqueda
+  - conteo
+- funciones
+  - como definirlas 1: declaración
+  - como definirlas 2: asignación (son un tipo de dato)
+  - orden de ejecución 1 y 2 (function hoisting)
+  - callback
diff --git a/clase-1.html b/clase-1.html
@@ -0,0 +1,32 @@
+<html>
+<head>
+	<title>Clase 1</title>
+</head>
+<body>
+
+	<div style="white-space: pre-line">
+		Hola!
+
+		Bueno, Un archivo Javascript es una secuencia de comandos que se ejecutan ordenadamente.
+
+		Por ejemplo, el siguiente script:
+
+		<pre>
+			document.write('Primera línea')
+			document.write('Segunda línea')
+		</pre>
+
+		Dará como resultado lo siguiente:
+
+		<script>
+			document.write('Hola ')
+			document.write('que tal')
+		</script>
+
+		Intenta por ejemplo modificar este archivo y cambiar el orden de las líneas o agregar otras :)
+
+		(Como viste, document.write imprime en el documeto lo que le des como argumento, es decir: entre los paréntesis)
+
+		<a href="clase-2.html">Siguiente</a>.
+	</div>
+</body>
diff --git a/clase-2.html b/clase-2.html
@@ -0,0 +1,90 @@
+<html>
+<head>
+	<title>Clase 2</title>
+</head>
+<body>
+
+	<p>Variables!</p>
+
+	<hr/>
+
+	<p>Las variables son cajas donde podés poner cosas y darles un nombre.</p>
+	<p>Por ejemplo, puedo crear una variable que se llame 'edad' y ponerle mi edad:</p>
+
+	<pre>
+		var edad = 18
+	</pre>
+
+	<p>Importante: el 'var' se usa para crear una nueva variable.</p>
+	<p>El código puede que ande si no lo ponés, pero es de giles, no te lo olvides.</p>
+
+	<hr/>
+
+	<p>En las variables podés poner de todo, por ejemplo:</p>
+
+	<pre>
+		var edad = 18
+		var nombre = 'Daniel'
+		var lista = ['lechuga', 'tomate', 'queso']
+		var posta = true
+		var mentira = false
+		var auto = {
+			marca:  'Renault',
+			modelo: 'Kangoo',
+			serie:  'Sportway',
+			fabricacion: 2014,
+			color:  'gris'
+		}
+		var cuatro = 2 + 2
+		var imagen = 'http://servidor.com/ruta/a/la/imagen.png'
+		var ok = 'se entiende'
+	</pre>
+
+	<p>Más adelante veremos que se le pueden poner cosas incluso más complicadas que lo que le pusimos al auto.</p>
+
+	<hr/>
+
+	<p>Genial! le pusimos cosas, ¿ahora cómo las usamos?</p>
+	<p>Bueno, podemos usarlas de varias formas, por ejemplo, para calcular cosas:</p>
+
+	<pre>
+		var plata = prompt('Cantidad de plata en tu billetera')
+		var dolares = plata/10
+		document.write('Tu plata en dólares vale: us$' + dolares)
+	</pre>
+
+	<script>
+		function codigo() {
+			var plata = prompt('Cantidad de plata en tu billetera')
+			var dolares = plata/10
+			document.getElementById('resultado').innerText = 'Tu plata en dólares vale: us$' + dolares
+		}
+	</script>
+
+	<button onclick="codigo()">Hacé click acá para ejecutar ese código acá debajo</button>
+
+	<p id="resultado"></p>
+
+	<hr/>
+
+	<p>Como ves, se pueden usar para guardar resultados:</p>
+
+	<pre>
+		var plata = prompt('Cantidad de plata en tu billetera')
+	</pre>
+
+	<p>Para hacer cálculos (dividir su valor por 10):</p>
+
+	<pre>
+		var dolares = plata/10
+	</pre>
+
+	<p>Para darselo de argumento a funciones que hagan algo con eso, como esta que lo muestra en pantalla:</p>
+
+	<pre>
+		document.write('Tu plata en dólares vale: us$' + dolares)
+	</pre>
+
+	<a href="clase-1.html">Anterior</a>.
+	<a href="clase-3.html">Siguiente</a>.
+</body>
diff --git a/clase-3.html b/clase-3.html
@@ -0,0 +1,10 @@
+<html>
+<head>
+	<title>Clase 3</title>
+</head>
+<body>
+
+	<p>Todavía no la hice :)</p>
+
+	<a href="clase-2.html">Anterior</a>.
+</body>
diff --git a/index.html b/index.html
@@ -0,0 +1,15 @@
+<html>
+<head>
+	<title>Tutorial re macabro de Javascript</title>
+</head>
+<body>
+
+	<div style="white-space: pre-line">
+		Hola!
+
+		Para empezar haz click <a href="clase-1.html">aquí</a>.
+
+
+		&lt; Acá irá el índice &gt;
+	</div>
+</body>