M06 UF3A1. Teoria - Historial de revisió

Joan: /* T4. onchange, onkeyup... Vols jugar al Pong? */

2021-11-23T11:55:11Z

T4. onchange, onkeyup... Vols jugar al Pong?

Joan: /* Compte amb les majúscules i minúscules */

2021-11-23T11:54:17Z

Compte amb les majúscules i minúscules

Joan: /* T3. Events del ratolí. Exercici de classe: backgroundColor i rodeta del ratolí (wheel) */

2021-11-23T11:53:03Z

T3. Events del ratolí. Exercici de classe: backgroundColor i rodeta del ratolí (wheel)

Joan a 11:46, 23 nov 2021

2021-11-23T11:46:44Z

Joan: /* T2. Continuem amb el DOM */

2021-11-16T16:34:39Z

T2. Continuem amb el DOM

Joan a 16:05, 16 nov 2021

2021-11-16T16:05:17Z

Joan: Es crea la pàgina amb «=T1. Introducció al DOM= Comencem una nova UF (UF3) i en la sessió d'avui hem introduït els conceptes més importants del DOM. Sessió 1: *JS HTML DOM (https://www...».

2021-11-11T19:26:00Z

Es crea la pàgina amb «=T1. Introducció al DOM= Comencem una nova UF (UF3) i en la sessió d'avui hem introduït els conceptes més importants del DOM. Sessió 1: *JS HTML DOM (https://www...».

Pàgina nova

=T1. Introducció al DOM=
Comencem una nova UF (UF3) i en la sessió d'avui hem introduït els conceptes més importants del DOM. Sessió 1:

*JS HTML DOM (https://www.w3schools.com/js/js_htmldom.asp)
*DOM Intro
*DOM Methods
*DOM Document
*DOM Elements
*DOM HTML
*DOM Forms

{{Autor}}, novembre 2021

← Versió més antiga		Revisió del 11:55, 23 nov 2021
Línia 160:		Línia 160:
	Per cert, vols jugar al Pong? Aquest joc utilitza els mètodes del teclat per fer moure la raqueta per la pantalla. Tens disponible tot el codi per estudiar-lo.		Per cert, vols jugar al Pong? Aquest joc utilitza els mètodes del teclat per fer moure la raqueta per la pantalla. Tens disponible tot el codi per estudiar-lo.

		+	=T5. 3 maneres de fer events=
		+	Estudia bé aquest exemple:
		+	<pre>
		+	<!DOCTYPE html>
		+	<html>
		+	<head>
		+	<script>
		+	function myFunction() {
		+	var x = document.getElementById("fname");
		+	x.value = x.value.toUpperCase();
		+	}
		+	</script>
		+	</head>
		+	<body>
		+	<!--
		+	1a manera de fer events:
		+	Enter your name: <input type="text" id="fname" onchange="myFunction()">
		+	-->
		+
		+	Enter your name: <input type="text" id="fname">
		+	<p>When you leave the input field, a function is triggered which transforms the input text to upper case.</p>
		+	<script>
		+	//2a manera de fer events:
		+	//document.getElementById("fname").onkeypress = function(){myFunction()};
		+
		+	document.getElementById("fname").onkeypress = myFunction;
		+
		+	//3a manera de fer events:
		+	//document.getElementById("fname").addEventListener("keypress", myFunction);
		+
		+
		+	</script>
		+	</body>
		+	</html>
		+	</pre>
	{{Autor}}, novembre 2021		{{Autor}}, novembre 2021

@@ Línia 51: / Línia 51: @@
 </script>
 </pre>
 =T3. Events del ratolí. Exercici de classe: backgroundColor i rodeta del ratolí (wheel)=
 '''Exercici preliminar''': Fem que el backgroundColor de la pantalla transiti des de negre fins a blanc:

@@ Línia 123: / Línia 123: @@
 Complement: estudiar el següent codi, que implementa un zoom sobre una imatge:
 *http://blogs.sitepointstatic.com/examples/tech/mouse-wheel/index.html
 {{Autor}}, novembre 2021

@@ Línia 51: / Línia 51: @@
 </script>
 </pre>
 {{Autor}}, novembre 2021

@@ Línia 14: / Línia 14: @@
 *DOM Events
 *DOM Event Listener
 {{Autor}}, novembre 2021

@@ Línia 9: / Línia 9: @@
 *DOM HTML
 *DOM Forms
 {{Autor}}, novembre 2021