logo angularJS

Aprendiendo AngularJS (XIX). Eventos (II)

En la entrada anterior hemos visto cómo funcionaban los eventos e incluso hemos realizado algunos ejercicios que necesitaban de los mismos. En esta entrada aprenderás a controlar la posición sobre la que circula el ratón. De esa manera puedes realizar juegos y crear muchas funcionalidades para tus aplicaciones.

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
<a href="http://myfpschool.com/wp-content/uploads/2016/08/mapamundo.jpeg"><img ng-mousemove="Localiza($event)" src="http://myfpschool.com/wp-content/uploads/2016/08/mapamundo.jpeg" alt="mapamundo" width="326" height="155" class="alignnone size-full wp-image-4277" /></a>

<h1 >Hemisferio Norte y Sur</h1>

<p>Coordenadas en la foto: {{x + ', ' + y}}</p>

</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.Localiza = function(loc) {
$scope.x = loc.clientX;
$scope.y = loc.clientY;
}
});
</script>

<p>Dependiendo de la posición del ratón te diremos si está en el hemisferio norte o sur</p>

</body>
</html>

Ejercicio 9.1.
Como ejercicio te proponemos que copies y ejecutes el código anterior en una nueva página web.
Comprueba que funciona.
Ejercicio 9.2.
Al ejercicio le falta algo. No detalla si el ratón está posicionado en el Hemisferio Norte o en el Hemisferio Sur. Completa el ejercicio con esta nueva funcionalidad.
Ejercicio 9.3.
Mejora el ejercicio anterior para que nuestra web reconozca si el ratón está al Este o al Oeste de España.
Resumen
Clasificación
5
Nombre del software
AngularJS
Sistema Operativo
web
Precio
EUR free
Página web

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>