JavaScript – die neusten Beiträge

Verwandte Themen
Thooms
27.01.2024, 17:55

Formular mit Javascript bearbeiten?

Hallo, ich habe ein formular mit einem select und méchte je nach auswahl des benutzers die nächsten zwei Formulareingaben entweder einblenden oder ausblenden. Geht da mit Javascript?

Hier das Formular:

 <form class="form" method="POST" action="./?route=admin/module/create" enctype="multipart/form-data">
    <input type="hidden" name="csrf_token" value="<?php echo csrf_token(); ?>" />
    <input type="hidden" name="parent" value="<?php echo $parent["parent"]; ?>" />
    
    <label for="modules-create-title">Titel:</label><br />
    <input type="text" name="title" id="modules-create-title" value="<?php if(!empty($_POST['title'])) echo e($_POST['title']); ?>" /><br /><br />


    <label>Art des Moduls <br>
        <select name="module" size="1">
            <option value="slideshow">Slideshow</option>
            <option value="image_left_prev">About Vorschau mit Bild</option>
            <option value="reviews">Kundenmeinungen</option>
            <option value="contact_form">Kontaktformular</option>
            <option value="productcards">Angebote</option>
            <option value="content">Textfeld mit Titel</option>
            <option value="landingpage">Landingpage</option>
            <option value="content_right">Textfeld rechts mit Bild</option>
            <option value="content_left">Textfeld links mit Bild</option>
        </select>
    </label><br /><br />


    <label for="modules-create-picture">Hintergrundbild:
        <input name="image" type="file" id="modules-create-picture" size="50" accept="text/*"> 
    </label> <br /><br />


    <label for="editor">Text</label><br />
    <textarea id="editor" name="content" cols="35" rows="20"></textarea> <br /><br />



    <input type="submit" value="Speichern" />
</form>
Webseite, JavaScript, Code, PHP, Webentwicklung
3 Antworten
JulianOnFire
23.01.2024, 14:11

JavaScript: Warum springt die Galerie immer wieder zum ersten Bild zurück?

Hallo,

ich habe auf meiner Seite eine Galerie mit einigen Bildern. Diese kann ich öffnen/schließen und durchklicken.

Leider habe ich das Problem, dass wenn ich mich durch die Galerie durchklicke, er leider, warum auch immer, wieder zurück zum ersten Bild springt, anstatt die Bilder komplett durchzulaufen.

Ich finde den Fehler nicht.

HTML Code:

<div class="gallery-container">
  <div class="gallery" id="gallery">
    <!--Erste Reihe-->
    <img src="1_1.webp" alt="Bild 1_1" onclick="openModal();currentSlide(1)" class="hover-shadow cursor gallery-img" data-index="1">
    <img src="1_2.webp" alt="Bild 1_2" onclick="openModal();currentSlide(2)" class="hover-shadow cursor gallery-img" data-index="2">
    <img src="2.1.webp" alt="Bild 2_1" onclick="openModal();currentSlide(3)" class="hover-shadow cursor gallery-img" data-index="3">

    usw. bis

    <img src="8_2.webp" alt="Bild 8_2" onclick="openModal();currentSlide(23)" class="hover-shadow cursor gallery-img" data-index="23">
    <img src="8_3.webp" alt="Bild 8_3" onclick="openModal();currentSlide(24)" class="hover-shadow cursor gallery-img" data-index="24">
  </div>
  <div id="myModal" class="modal">
    <span class="close cursor" onclick="closeModal()">&times;</span>
    <div class="modal-content">
      <!-- Fügen Sie für jedes Bild in der Galerie eine Modal Slide hinzu -->
      <div class="mySlides">
        <img src="1_1.webp" style="width:100%">
      </div>
      <div class="mySlides">
        <img src="1_2.webp" style="width:100%">

        bis

      <div class="mySlides">
        <img src="8_2.webp" style="width:100%">
      </div>
      <div class="mySlides">
        <img src="8_3.webp" style="width:100%">
      </div>
    </div>

    <!-- Vorwärts/Rückwärts Kontrollen -->
    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
    <a class="next" onclick="plusSlides(1)">&#10095;</a>
  </div>

JavaScript:

function currentSlide(n) {
  showSlidesModal(slideIndex = n);
}

function showSlidesModal(n) {
  var i;
  var slidesModal = document.getElementsByClassName("mySlides");

  if (n > slidesModal.length) {
    slideIndex = 1
  }

  if (n < 1) {
    slideIndex = slidesModal.length
  }

  for (i = 0; i < slidesModal.length; i++) {
    slidesModal[i].style.display = "none";
  }

  slidesModal[slideIndex - 1].style.display = "block";
}

var galleryImages = document.getElementsByClassName("gallery-img");

for (var i = 0; i < galleryImages.length; i++) {
  galleryImages[i].onclick = function(event) {
    openModal();
    currentSlide(parseInt(event.target.getAttribute('data-index')));
  }
}

for (var i = 0; i < galleryImages.length; i++) {
  galleryImages[i].setAttribute('data-index', i + 1);
}

window.onclick = function(event) {
  if (event.target == document.getElementById('myModal')) {
    closeModal();
  }
}

function plusSlides(n, modal = false) {
  var slides;

  if (modal) {
    slides = document.getElementsByClassName("mySlides");
  }
  else {
    slides = document.getElementsByClassName("slide");
  }

  slideIndex += n;

  if (slideIndex > slides.length) {
    slideIndex = 1
  }

  if (slideIndex < 1) {
    slideIndex = slides.length
  }

  for (var i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }

  slides[slideIndex - 1].style.display = "block";

  if (!modal) {
    resetAnimations(slides[slideIndex - 1]);
  }
}

document.querySelector(".modal .prev").onclick = function() {
  plusSlides(-1, true);
};
document.querySelector(".modal .next").onclick = function() {
  plusSlides(1, true);
};

function openModal() {
  document.getElementById('myModal').style.display = "block";
}

function closeModal() {
  document.getElementById('myModal').style.display = "none";
}

showSlides(slideIndex);
HTML, Webseite, JavaScript, Code, Webdesign, Visual Studio Code
1 Antwort
Qweqweqwe59
20.01.2024, 13:01

Welche Programmiersprache als Quereinsteiger für das Berufsleben?

Hallo,

Die Frage hier geht explizit an Programmierer, die idealerweise schon ein Job haben.

ich wollte fragen welche Programmiersprache gut als Quereinsteiger geeignet ist um in das Berufsleben durchzustarten.

Ich beherrsche mittlerweile etwas von Phyton und SQL.

Es gibt ja YouTuber oder Webseiten die dir versprechen in einigen Monaten in deren Kurs schon eine Arbeitsstelle zu finden, natürlich gegen Bezahlung.

Aber ich will es eigenständig schaffen, deshalb meine Frage:

Welche Programmiersprache ist gut geeignet um in kurzer Zeit ein Job auszuüben. Natürlich wird man in diesem kurzem Zeitraum nicht das ganze Know How wissen aber man sollte sich im Job weiterentwickeln. Natürlich weiß ich das ich dann nicht viel Geld bekommen werde.

Und mit welcher Programmiersprache sollte man im welchem Beruf einsteigen (z.B bei SQL kann man Daten Analyst werden.) Also was könnt ihr empfehlen.

Und kennt Ihr auch gute bücher oder YT kanäle?

Und was hattet Ihr schon für Erfahrungen im ersten Job, was war die erste Programmiersprache mit der Ihr euch beworben habt und wie war der Anfang als ihr gelernt hattet und der erste Tag als Programmierer im Job? Habt ihr Tipps an mich?

Zum Schluss noch: Bitte keine Unnötigen Kommentare abgegeben. Ich weiß es ist Zeitaufwendig, aber ich möchte denn Willen durchsetzen. Ich bin auch kein Scriptkiddi, ich will's wirklich erlernen. Ich antworte auch gerne auf eure Kommentare.

PC, Beruf, Lernen, Google, Job, Amazon, SQL, HTML, IT, Webseite, Java, JavaScript, C Sharp, Entwickler, Entwicklung, Programmiersprache, Python, Quereinsteiger, Laptop
3 Antworten
Jacob13579
15.01.2024, 22:14

Programmiersprachen Grundlage?

Huhu,

ich starte höchstwahrscheinlich dieses Jahr einen Ausbildung als Fachinformatiker in Fachrichtung Anwendungsentwicklung. Am Mittwoch erfahre ich es.

Ich habe mir nun schon einen Online-Kurs zu Python gekauft und will mir dann bis zum Ausbildungsstart Programmierkenntnisse aneigen und eventuell auch schon eigene Projekte umsetzen, damit ich auch Praxiserfahrung sammeln kann. Es geht darum, dass ich schon direkt zu Ausbildungsstart ein optimales Verständnis habe und ich dann während der Ausbildung gute Leistung erzielen kann.

Dass ich das tun will, steht jedenfalls nicht zur Diskussion. Ich würde gerne wissen, ob es auch sinnvoll wäre HTML, CSS und JavaScript zu erlernen und Projekte umzusetzen. Kann man das immer auch irgendwie mal gebrauchen? Bis Ausbildungsstart will ich halt auch meine Zeit noch sinnvoll nutzen und bestenfalls schon vorher viel lernen.

Sollte ich die Ausbildung nicht bekommen (was ich bezweifle), starte ich halt das Informatik Bachelorstudium (Angewandte Informatik) nach meiner Ausbildung zum Verwaltungsfachangestellten, in der ich jetzt noch im ersten Lehrjahr bin. Also macht es dennoch Sinn, sich die Fähigkeiten anzueignen, ob ich die Ausbildung nun bekomme oder nicht.

Hat jemand noch weitere Ideen, wo ich mir ein solides Grundwissen aufbauen könnte in der Zeit? Und ja, Projekte umsetzen ist viel wichtiger, als die trockene Theorie. Ich weiß.

Liebe Grüße

programmieren, JavaScript, Python, Softwareentwicklung
2 Antworten
Rexxxxx
15.01.2024, 01:31

Probleme mit verschiedenen Webseiten bei Nutzung von Tor Browser?

Gibt es eigentlich eine Erklärung wieso es mit verschiedensten Webseiten massive Probleme gibt, wenn ich mit Tor im Clearnet unterwegs bin? Hatte da jetzt bereits Beef mit mehreren verschiedenen Anwendungen:

Proton zb. verlangt für die Accountregistrierung plötzlich eine zwingende "2te Mailadresse", beim Surfen mit Firefox oder Chrome wird diese Frage nicht gestellt.

Re-Captchas oder Roboterchecks laden deutlich langsamer und verhalten sich z.t übermäßig penetrant, auch Cloudflare Checks failen regelmäßig.

Manche Webseiten funktionieren garnicht oder anstatt des Contents kommt eine Fehlermeldung, dass die IP-Adresse gesperrt wurde.

Ich hab versucht mich in einem Forum zu registrieren. Direkt nach der Freischaltung ist das Konto wegen angeblichen "Spams" gesperrt.

Neu erstellte Mailaccounts auf Tutanota überleben keine 10 Minuten...

Ich schätze mal, dass irgendwas mit dem Datenverkehr der zwischengeschalteten Proxys?! hier nicht stimmt. Doch was genau könnte das sein was hier durch die Leitungen fließt, was direkt von verschiedenen (nicht allen) Webseiten bzw. Boardadmins erkannt und als agressiven 'Spam' oder zumindest als 'problematisch / verdächtig' registriert wird?

Ich hatte auch hier auf GF schon Warnmeldungen wegen angeblicher Cross Site Angriffe von No-Script.

Bei einigen Seiten ist aber bislang auch alles normal und ohne Probleme....

Sollte ich besser wieder zu einem anderen Browser wechseln? Oder könnten diese "Spam" Vorwürfe im Extremfall zu irgendwelchen Nachteilen oder Problemen führen?

Wer kennt sich aus mit der Thematik oder kann mir möglichst genau erklären was hier abgeht? (oder was ich bei der Verwendung falsch mache)

Internet, Browser, Virus, Spam, Addon, JavaScript, Tor, Darknet, IP-Adresse, Proxy, Registrierung, Traffic, Fehlermeldung, DDoS-Angriff, Tor Browser
2 Antworten
iusearchbtw
24.12.2023, 03:14

Warum gibt es nichts anderes als JavaScript im Browser Frontend?

Es gibt Dart-Flutter, C#-Blazor soweit ich weiß, aber ich nehme an, es ist nur JavaScript unter der Haube.

Ähnlich wie, wenn man React Native Code schreibt, wird es in die native mobile Sprache umgewandelt => Kotlin, Swift etc..

Weil soweit ich weiß, versteht der Browser nichts anderes als HTML, CSS und JavaScript.

Es gibt da nur die V8-Engine / andere JavaScript-Engines.

Aber warum?

Wieso ist es nicht theoretisch möglich, einfach mit einer neuen Sprache die für cross platform entwickelt wurde, einen onclick-Event Listener zu nutzen?

In einer ganz eigenen Engine.

Heißt nicht, das sie JavaScript irgendetwas die nächsten 5 Jahre streitig machen könnte, aber wenn diese Sprache direkt Typisierung unterstützen würde, ohne TypeScript und auch noch für andere Dinge besser geeignet wäre als JavaScript (wurde halt nicht dafür designed, ganz egal ob Electron, Native existiert) wie Desktopanwendungen, Mobil, etc..

PHP nehme ich erst garnicht auf, das macht alleine gar nichts im Frontend, ist eine Backendsprache und alleine sinnlos auf Websites, bis auf bisschen HTML generieren, das auch nur vom Server kommt.

Klar, wenn du ewig lange Weiterleitungen willst, die furchtbar sind und überhaupt nicht interaktive Websites, dich auf Formulare beschränkst, dann kriegst du das auch ohne JavaScript hin, etwas Schreckliches zu programmieren.

Mit WebAssembly kenne ich mich gar nicht aus. Ob da Event Listener, usw. möglich sind. Aber alleine von der Einstiegshürde und Komplexität die ich höre, ist das keine Alternative.

Assembly ist auch keine Alternative zu C++. Dafür gibt es Rust.

Browser, App, HTML, Webseite, JavaScript, HTML5, Assembler, Informatik, Programmiersprache, Softwareentwicklung, Webentwickler, Webentwicklung, Anwendungsentwickler, React Native
5 Antworten
MrOsmo
14.12.2023, 19:47
Mit Links

javascript api probleme?

Hallo,

guckt euch mal meinen Code an.

JAVASCRIPT:

// INPUT
const login = document.getElementById("loginInput");
const password = document.getElementById("passwordInput");
const button = document.getElementById("sendButton");


// FETCH
const url = "https://crudcrud.com/api/4b3acc467d8c47d8a608bb9820171935/todos"



const dataRender = (array) => {
  if (array === undefined) {
    console.log("Loading results...");
  } else {
    let dataList = array.map((item) => {
      return `
      <div class="users">
        <p>${item.login}</p>
        <button onclick="deleteRequest(${item.id})">Delete</button>
        </div>
        `;
    });
    const getHtml = document.getElementById("userTable");
    getHtml.innerHTML = dataList.join("");
  }
};


const fetchData = async () => {
  try {
    const response = await fetch(url);
    const data = await response.json();
    dataRender(data);
  } catch (error) {
    console.error(error);
  }
};



fetchData();


const postRequest = async () => {
  const data = {
    login: login.value,
    password: password.value,
    isLogin: false,
  };


  try {
    const response = await fetch(url, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(data),
    });


    const results = await response.json();
    console.log(results.message);
  } catch (error) {
    console.error(error);
  }


};


button.addEventListener("click", postRequest);


const deleteRequest = async (id) => {
  try {
    const response = await fetch(`${url}/${id}`, {
      method: "DELETE",
      headers: {
        "Content-Type": "application/json",
      }
    })
    const results = await response.json()
    console.log(results.message);
  }
  catch (error) {
    console.error(error);
  }
}

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CRUD</title>
  <script  defer src="./script.js"></script>
</head>
<body>
  <form>
    <input id="loginInput" type="text" placeholder="Login">    
    <input id="passwordInput" type="password" placeholder="Password">    
    <button onclick="" id="sendButton">Send</button>


    <div id="userTable">
      
    </div>
  </form>
</body>
</html>

Mein Ziel:

Wenn ihr auf das button "Send" drückt, dann erscheint ja der value von dem input "login" auf HTML (innerHTML heisst das glaube ich). Und zusammen mit dem value erscheint auch ein anderer Button namens "Delete". Mein Ziel ist es, dass wenn ich auf "Delete" drücke, dann sollte das item aus Backend-Server und aus HTML gelöscht werden. Aber das klappt bei mir die ganze Zeit nicht. Einfacher ist es wenn ihr meinen Code einfügt und selber mal den Code testet, dann werdet ihr verstehen, was ich machen will.

Bitte helft mir! Ich sitze schon wirklich lange dranrum und ohne Erfolg!

Dankeschön im Voraus!

MfG

MrOsmo

Software, App, HTML, IT, Webseite, programmieren, JavaScript, HTML5, Code, Informatik, Programmiersprache, Webentwicklung, Frontend
1 Antwort

Meistgelesene Beiträge zum Thema JavaScript
Mehr meistgelesene Fragen zu JavaScript