logo angularJS

Aprendiendo AngularJS (X). 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
software image
Clasificación
1star1star1star1star1star
no rating based on 0 votes
Nombre del software
AngularJS
Sistema Operativo
web
Precio
EUR free
Página web

Deja una respuesta

Tu dirección de correo electrónico no será publicada.

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.