Java Script - Was macht der Befehl 'event'?

Hallo,

habe mir gerade ein Programm gebaut, dass mir die Koordinaten des Mauszeigers ausgibt. Da ich nicht wusste wie man auf diese zugreift habe ich im Internet danach gegoogelt und bin auf folgendes Ergebnis gekommen:

'use strict'


var leinwand = document.getElementById('playground');
    leinwand.style.backgroundColor = 'lightgrey';
var ctx = leinwand.getContext('2d');





    leinwand.addEventListener('mousemove', writeCoords, false);
      function writeCoords(event)
      {
          
          document.getElementById('coords').innerText = 'x: ' +event.clientX  + ' y: '+ event.clientY;
          
      }

Jetzt weiß ich jedoch nicht, was mit ''event' gemacht wird. Könnt ihr mir das bitte erklären? Was macht der Befehl 'event'? und warum muss ich den bei der Funktion "writeCoords" in die Klammer packen?

2 Antworten

Vom Fragesteller als hilfreich ausgezeichnet

Lezurex

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, programmieren, JavaScript

24.08.2021, 17:27

Das ist die Event-Variable, wo sozusagen alle Informationen von diesem Event (also Ereignis) gespeichert sind. Du musst dies dort angeben, da JavaScript diese Informationen dann da rein speichert. Somit kannst du dann innerhalb der Funktion darauf zugreifen.

(Dies ist nur eine stark simplifizierte Erklärung, um es für Anfänger möglichst verständlich zu halten)

Woher ich das weiß:Berufserfahrung – Informatiker Applikationsentwicklung

BeamerBen

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, programmieren

24.08.2021, 17:31

`event` ist einfach eine normale Variable, kein Befehl.

Event zeigt auf ein Objekt welches das Event Interface implementiert https://developer.mozilla.org/en-US/docs/Web/API/Event

Mehr über Events kannst du hier lesen, sie sind elementarer Bestandteil von JavaScript. https://developer.mozilla.org/en-US/docs/Web/Events

Du kannst auch einfach testweise das event Objekt in die Console ausgeben, z.B. mit console.info(event)

Woher ich das weiß:Berufserfahrung – Software Entwickler / Devops

Hallo,

kann mir bitte jemand genau erklären, was in der for-Schleife in der Funktion "drawNumbers" passiert?

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var radius = canvas.height / 2;
ctx.translate(radius, radius);
radius = radius * 0.90

drawNumbers(ctx,radius);

function drawNumbers(ctx, radius) {
  var ang;
  var num;
  ctx.font = radius*0.15 + "px arial";
  ctx.textBaseline="middle";
  ctx.textAlign="center";
  for(num = 1; num < 13; num++){
    ang = num * Math.PI / 6;
    ctx.rotate(ang);
    ctx.translate(0, -radius*0.85);
    ctx.rotate(-ang);
    ctx.fillText(num.toString(),0,0);
    ctx.rotate(ang);
    ctx.translate(0, radius*0.85);
    ctx.rotate(-ang);
  }

...zur Frage

JS - Wie kann ich die Höhe eines Rechtecks mit einem Schieberegler / Slider (range) im Canvas vergrößern und verkleinern?

Hallo,

meine Code sieht gerade so aus. Es funktioniert aber nicht. Was müsste ich hier ändern?

<hmtl>
  <head>
    <title>hi guys</title>
  </head>
  <body>
    Schieberegler:
    <br>
    <canvas id="canvas" height='400' width='600'></canvas>
  </body>
  <br>
  <input id='slider' type='range' max="100" min="0">
  <p id='outpRadius'> 50 </p>
  <input type='color'>
  <hr>
  <script>
    'use strict';

    window.onload = function() {
      var slider = document.getElementById('slider')
      var output = document.getElementById('outpRadius');
      slider.addEventListener('input', aendereRadius, false)

      function aendereRadius() {
        output.innerHTML = slider.value;
        console.log(output.innerHTML);
      }

      var canvas = document.getElementById('canvas');
      canvas.style.backgroundColor = 'yellow';
      var ctx = canvas.getContext('2d');
      ctx.fillRect(50,50,50,output.innerHTML);
    }
  </script>
</html>

...zur Frage

Css Elemente nebeneinander und nicht untereinander?

Wie kann ich diese Elemente so positionieren, dass sie nebeneinander und nicht untereinander sind?

HTML:

  <div>
    <div v-for="recipe in recipes" :key="recipe.id">
      <div class="recipe">
        <img class="recipe-img" :src="recipe.img" alt="" />
        <div class="recipe-description">
          <h3 class="recipe-title">{{ recipe.title }}</h3>
          <h4 class="recipe-time">
            <i class="far fa-clock"></i> {{ recipe.time }} Minutes
          </h4>
          <h4 class="level">
            <i class="far fa-check-circle"></i> {{ recipe.level }} to make
          </h4>
        </div>
      </div>
    </div>
  </div>

CSS:

.recipe-img {
  width: 300px;
  height: 300px;
  object-fit: cover;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}


.recipe {
  margin: 30px;
}


.recipe-description {
  text-align: center;
  margin-top: 10px;
  border: 1px solid #444;
  border-top: none;
  padding: 10px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  background-color: #444;
  color: white;
  width: 300px;
}


.recipe-title,
.recipe-time,
.recipe-level {
  margin: 5px;
}

...zur Frage

Panorama Bild wie bei Google Maps?

Hi,

Ich habe folgenden Code:

HTML:

<div id="panorama-container">
  <img src="https://media04.meinbezirk.at/article/2016/10/31/6/9445226_XXL.jpg" id="panorama-image" />


  <a href="#" id="fullscreen-button">Vollbildschirm</a>
</div>

CSS:

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  max-width: 100%;
  overflow: hidden;
}


#panorama-container {
  width: 100%;
  height: 100%;
}


#panorama-image {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  max-width: auto;
  overflow-y: hidden;
}


#fullscreen-button {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 16px;
  color: #fff;
  text-decoration: none;
}

JS:

var panoramaContainer = document.getElementById("panorama-container");
var panoramaImage = document.getElementById("panorama-image");
var fullscreenButton = document.getElementById("fullscreen-button");
var position = 0;
var initialX = null;


fullscreenButton.addEventListener("click", function() {
  if (panoramaContainer.requestFullscreen) {
    panoramaContainer.requestFullscreen();
  } else if (panoramaContainer.webkitRequestFullscreen) {
    panoramaContainer.webkitRequestFullscreen();
  } else if (panoramaContainer.mozRequestFullScreen) {
    panoramaContainer.mozRequestFullScreen();
  } else if (panoramaContainer.msRequestFullscreen) {
    panoramaContainer.msRequestFullscreen();
  }
});


document.addEventListener("touchstart", function(event) {
  initialX = event.touches[0].clientX;
});


document.addEventListener("touchmove", function(event) {
  if (initialX === null) {
    return;
  }


  var currentX = event.touches[0].clientX;
  var diffX = currentX - initialX;
  initialX = currentX;


  movePanorama(diffX); /* Change this value to adjust the speed of the movement */


  event.preventDefault();
});


document.addEventListener("touchend", function() {
  initialX = null;
});


function movePanorama(amount) {
  position += amount;
  panoramaImage.style.left =        position + "px";


 
  
}

Nun wird zwar das bild wie bei Google maps angezeigt, also genauer gesagt möchte ich das wenn ich auf meinem Bild nach links wische, dass es sich nach links dreht und rechts genau so. Das Problem ist nur wenn ich zu weit Wische, zeigt er mir ein weißen Screen, aber wie kann man das verhindern.

Vielleicht versteht ihr was ich meine

...zur Frage

Gute Webseiten oder PDF Docs, um PHP, Javascript, CSS und HTML zu lernen?

Video Tutorials beanspruchen viel Zeit. Deshalb bräuchte ich Webseiten oder PDF Docs für die oben genannten Programmier- und Skriptsprachen. Wichtig wäre, dass sie marktorientiert sind, also genau die Dinge zeigen, die man im realen IT Markt anwendet.

...zur Frage

Was sind article und section genau?

Hallo Leute,

leider verstehe ich noch nicht genau das Prinzip von article und section. So wie ich es bisher verstanden habe, wird es benutzt um einen Abschnitt darzustellen. Diese dienen dazu alles übersichtlicher zu machen.

Wann benutzt man den section und wann article, habe ich das überhaupt richtig verstanden ?

...zur Frage

Javascript Fragen?

Hallo,

wir haben heute JS angefangen, aber ich habe ein paar Sachen nicht ganz verstanden.

Wann benutzt man "var" und wann "const" und gerne mit Beispielen bitte
Was sind Interpolation und Concatenation? Und wann benutzt man sie? Hier auch bitte mit Beispielen.

Ich habe schon darüber recherchiert, aber die Antworten sind dort zu komplex und unverständlich. Ich hoffe auf eure verständliche und nützliche Fragen!

Dankesschön im Voraus!

...zur Frage

Java script if Abfrage zur Überprüfung eines leeren Feldes?

Hallo,

im folgenden ist ein Code, der beim Click auf einen Button überprüfen soll, ob das Feld mit dem Namen Mailadresse leer ist. Warum funktioniert Variante 1, aber Variante 2 nicht?

Variante 1

const Buttons=document.getElementById('Buttons'),

Mailadresse=document.getElementsByName('Mailadresse');

Buttons.addEventListener('click',pruefen);

function pruefen () {

if (Mailadresse.value == null) { window.alert ("Bitte alle Pflichtfelder ausfüllen")}

};

Variante 2

const Buttons=document.getElementById('Buttons'),

Mailadresse=document.getElementsByName('Mailadresse');

Buttons.addEventListener('click',pruefen);

function pruefen () {

if (Mailadresse.value == 0) { window.alert ("Bitte alle Pflichtfelder ausfüllen")}

};

Über eine hilfreiche Antwort würde ich mich sehr freuen.

...zur Frage

Wie schafft man es durch Code, alle geöffneten Browserfenster als link in einer textdatei abzuspeichern?

Also ich bin auf der Suche nach einem Lösungsvorschlag oder einen Skript mit dem man es schafft die Links zu den Geöffneten Tabs im Browser alle gleichzeitig zu kopieren und in einer Textdatei abzuspeichern.

Code beinhaltet diesen Arbeitsablauf:

Öffne Browser

Öffne Textprogramm

Kopiere Url's der geöffneten Tabs

Speichere die Kopierten Url's im Geöffneten Textprogramm.

Schließe die Tabs deren Url's bereits kopiert worden sind.

Gebe eine Meldung darüber aus

- Wie viele Url's kopiert und gespeichert worden sind.

Das ist alles.

Und ich möchte Wissen welche Programmier oder Skriptsprache man dafür nutzen soll oder sogar muss.

Würde mich riesig über ein paar Hilfestellungen freuen.

...zur Frage

Wie diese Funktion mit HTML-Code nachbauen?

Guten Abend zusammen ich programmiere eine kleine Seite und mir ist eine Funktion auf ebay aufgefallen; Wenn ihr auf dir Startseite geht dann gibt es etwas unten eine Art: Werbungsvorschläge. Beispielsweise steht da: Handys und Smartphones und direkt dadrunter befinden sich mehrere Bilder von verschiedenen Produkten. Wenn man darauf klickt wird man dementsprechend weitergeleitet. Rechts und links gibt es eine Pfeiltaste, wenn man sie drückt geht es nach links/rechts und es werden weitere Bilder/Produkte angezeigt. Es geht hierbei um die Funktion: Persönliche Empfehlung bei Ebay. Mir ist bereits bewusst, dass ich eine Scriptsprache brauche. Mir geht es jedoch hierbei nur um die Struktur und nicht um die Funktionen. Ich habe mir gedacht, dass ich diesen Code verwenden könnte: <button>←</button> -> Das ist ein Button mit der Pfeiltaste rechts und ich füge einige Bilder hinzu mit dem Code <img> .

Habt ihr vlt. einen Code mit dem es einfacher geht oder würdet ihr es anders machen. Ich bin dankbar für jede Hilfe und jeden Code :)

...zur Frage

Wie kann ich in Google Forms eigenen HTML-Code einfügen?

Ist das möglich? Wenn ja, wie füge ich mein eigenes HTML & JavaScript in Google Forms ein?

Ich möchte es nicht andersherum machen und Google Forms in meiner Website einbetten, sondern direkt in Google Forms und den Share-Link teilen.

...zur Frage

Programmierer: Könnt ihr dieses Code-Rätsel lösen?

Ohne es zu googlen natürlich.

In JavaScript. (Falls ihr kein JS könnt ignoriert die Frage einfach.)

x= ...

...zur Frage

Mit welcher Programmiersprache ein Zeichenprogramm?

Hey, mit welcher Programmiersprache ist es am sinnvollsten ein Zeichen Programm zu programmieren, indem man entweder mit der Maus zeichnen kann? Zu Verfügung stehen mir die Programmiersprachen Java, JavaScript, C, C#, C++, Python. Ich bedanke mich im Voraus für eure Antworten! :)

...zur Frage

JS: Wie programmiere ich einen Start/Stop Knopf, der Stopuhr startet und stoppt?

Hallo Leute,

ich versuche gerade eine Stoppuhr zu programmieren. Jedoch komme ich bei dem Start/Stop Knopf nicht mehr weiter, welcher die Stoppuhr bzw. die bisherige Zeit stoppt. Wie programmiere ich nun mit JS den Knopf so, dass er die Zeit nicht nur startet, sondern auch stoppt

Vielen Dank im Voraus :=)

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen