Verwandte Themen

Frage
von 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, Informatik, Programmiersprache, Softwareentwicklung, Webentwickler, Webentwicklung, Anwendungsentwickler, Assembly, React Native
5 Antworten
Frage
von Gojosatoru383
23.12.2023, 05:43
Frage wurde 1 Mal erneut gestellt
Mit Bildern
Mit Links
Was sagt ihr zu dem anfangsprojekt?

Mein Ziel ist es mit html und CSS eine stabile Test Seite zu erstellen (Später kommt Js dazu) um dann eine richtige Seite zu bauen

html:

<!DOCTYPE html>

<html lang="de">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>

<link rel="stylesheet" href="style.css">

<!-- Load an icon library -->

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="navbar">

<a class="active" href="#"><i class="fa fa-fw fa-home"></i> Home</a>

<a href="#"><i class="fa fa-fw fa-search"></i> Search</a>

<a href="#"><i class="fa fa-fw fa-envelope"></i> Contact</a>

<a href="#"><i class="fa fa-fw fa-user"></i> Login</a>

</div>

</head>

<body>

<Header>

</Header>

<div class="input">

<main>

<form action="" method="post">

<h2>Anmeldung</h2>

<h3>Login</h3>

<input type="email" name="Email" placeholder="Email hier eingeben" required="@" id=""> <br>

<input type="text" name="Benutzer" placeholder="Benutzer hier eingeben" required="A-z" > <br>

<input type="password" name="passwort" placeholder="password hier eingeben " id=""> <br>

<input type="submit" value="Anmelden">

<input type="reset" value="reset">

</form>

</div>

<hr>

<a href="#">Impressum</a>

<a href="#">kontakt</a>

<a href="#">Über uns</a>

</main>

<footer>

</footer>

</body>

</html>

css:

body {

font-family: Arial, Helvetica, sans-serif;

color: white;

}

body{

background-color: white;

}

.input {

display: flex;

margin: 150px;

margin-top: 3000px;

flex-direction: column;

justify-content: center;

align-items: center;

box-shadow: 1px 1px 3px 3px black;

border-radius: 30px;

height: 30px;

width: 100px;

padding: 100px;

}

h3{

color: black ;

}

)

a{

font-family: Arial, Helvetica, sans-serif;

display: flex;

justify-content: center;

align-items: center;

}

a:hover{

color: green;

text-decoration-line: none;

}

input{

padding: 5px;

border-radius: 10px;

}

input[type="submit"] {

font-size: 1.0em; padding: 1px 6px;

font-family: Roboto, sans-serif;

font-weight: 100;

color: teal;

border: 1px solid silver;

background-image: linear-gradient(to top, gainsboro 0%, white 90%);

border-radius: 20px;

}

input[type="reset"] {

font-size: 1.0em; padding: 1px 6px;

font-family: Roboto, sans-serif;

font-weight: 100;

color: teal;

border: 1px solid silver;

background-image: linear-gradient(to top, gainsboro 0%, white 90%);

border-radius: 20px;

}

#main {margin: 0 auto; width: 25%;}

.input {margin: 0 auto; width: 25%;}

input:hover {

color: blue;

}

/* Style the navigation bar */

.navbar {

width: 100%;

background-color: #555;

overflow: auto;

}

/* Navbar links */

.navbar a {

float: left;

text-align: center;

padding: 12px;

color: white;

text-decoration: none;

font-size: 17px;

}

/* Navbar links on mouse-over */

.navbar a:hover {

background-color: #000;

}

/* Current/active navbar link */

.active {

background-color: #04AA6D;

}

/* Add responsiveness - will automatically display the navbar vertically instead of horizontally on screens less than 500 pixels */

@media screen and (max-width: 500px) {

.navbar a {

float: none;

display: block;

}

}

Bild zu Frage
Homepage, HTML, Webseite, CSS, JavaScript, HTML5, Code, Programmiersprache, Webdesign, Webentwicklung, Frontend
2 Antworten
Frage
von Emily54998
19.12.2023, 21:57
Welche seriöse Website, ist das beste und einfachste für Anfänger, viel Geld online regelmässig verdienen zu können?

Hallo zusammen, ich bin Emily, aus der Schweiz und möchte gerne auf einer guten und seriösen Website selbständig und regelmässig Online viel Geld verdienen und damit leben können. Das Problem ist einfach, dass ich so viel recherchiert habe und trotzdem noch unsicher bin, welche Website nun Betrug ist, oder welches wirklich was bringt, ohne was dazu zu bezahlen. Habe bisher nie Online von Zuhause aus gearbeitet. Da ich seit mehrere Monaten sehr mit Depressionen zu kämpfen habe und mein alten Job beim Verkauf im Geschäft, welches ich viel Kundenkontakt hatte aufgeben musste, dachte ich mir, das es sicher eine Möglichkeit gäbe, auch von Zuhause online seriös viel Geld verdienen könnte, ohne persönlichen Kundenkontakt. Wegeb meiner Krankheit, fällt es mir zwar schwer momentan Kundenkontakt zu haben, aber per Telefon fällt es mir viel leichter. Ich möchte trotz meiner Depression nicht so einfach aufgeben, denn es war so oder so immer mein Traum, mal online Geld verdienen von Zuhause aus und meine Familie mehr um mich haben kann. Bei meinen vorherigen Job, machte ich viel Überstunden und hatte kaum Zeit für meine Familie und sah sie sehr selten. Habt ihr schon Erfahrungen gemacht, bei einer seriösen Website als Anfänger viel Geld verdient. Wenn ja, was wären das für Website und wie seid ihr vorgegangen?

Selbständigkeit, Webseite, online geld verdienen, Homeoffice, Jobsuche, Produkttester, Influencer
1 Antwort
Frage
von MrOsmo
19.12.2023, 14:45
Mit Links
Fetch JavaScript Hilfe?

Hallo,

bei mir klappt Folgendes nicht:

Wenn ich bei "Registration Form" alle inputs ausfülle, dann kommt ein sogenanntes "Kärtchen" mit deinem Avatar raus. Jedes "Kärtchen" enthält einen button "Log out", und wenn man auf den button drückt, dann sollte das "Kärtchen" nur aus HTML gelöscht werden (aber nicht aus Backend Server- Api) und der "logged" sollte im Backend Server auf false gesetzt werde.

Wie kann man das machen? Ich habe schon davor mit fetch gearbeitet, aber so ein Problem kommt bei mir zum ersten Mal (Bin ja noch komplett ein Noob in JavaScript).

HTML-Code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Registration | Form</title>
  <link rel="stylesheet" href="./CSS/settings.css">
  <link rel="stylesheet" href="./CSS/style.css">
  <link rel="stylesheet" href="./CSS/javascriptStyles.css">
  
  <script defer src="./JavaScript/script.js"></script>
</head>
<body>
  <div class="container">
    <div class="container-two">
    <div class="registration-form">
      <h2 id="heading">● Registration Form ●</h2>
      <div class="forms">
        <input id="emailInput" type="text" placeholder="example@gmail.com">
        <input id="userInput" type="text" placeholder="Username">
        <input id="pictureInput" type="text" placeholder="Picture">
        <button id="createButton">Create Account</button>
      </div>
      <p id="signInText">Already have an account? <a href="../PageTwo/index.html" id="aText">Sign in</a></p>
    </div>
    </div>
  </div>


  <div id="registerList">
  </div>
</body>
</html>

JavaScript-Code:

const registerList = document.getElementById("registerList")


const forms = document.getElementById("forms")
const email = document.getElementById("emailInput")
const user = document.getElementById("userInput")
const picture = document.getElementById("pictureInput")


const createButton = document.getElementById("createButton")


const url = "https://crudcrud.com/api/dac4c32dac5c4861a46ad8aee63df14c/todos"



const dataRender = (posts) => {
if (posts === undefined) {
  console.log("Loading...");
}
  else{
    let dataList = posts.map((post) => {
    return `
    <div class="register-container">
    <div class="inner-container">
      <img id="registerPicture" src="${post.picture}" alt="${post.user}"> 
      <h2 id="registerUser">${post.user}</h2>
      <h5 id="registerEmail">${post.email}</h5>
      <button onclick=logOutButton("${post._id}") id="registerButton">Log out</button>
    </div>
  </div>
  `
  })
  registerList.innerHTML = dataList.join("")
}
}


//GET METHOD
fetch (url)
.then(response => response.json())
.then (data => dataRender(data))


//POST METHOD
createButton.addEventListener("click", () => {
  fetch(url, {
    method: "POST",
    headers: {
      "Content-Type": "application/json"
    },
    body: JSON.stringify({
      user: user.value,
      email: email.value,
      registered: true,
      logged: true
    })
  })
  .then(response => response.json())
  .then(data => {
    const dataArray = []
    dataArray.push(data)
    dataRender(dataArray)
    
    email.value = ""
    user.value = ""
    picture.value = ""


    console.log(`User ${user.value} registered successful!`)
  })
})


//PUT METHOD
const logOutButton = (id) => {
  const data = {
    user: user.value,
    email: email.value,
    registered: true,
    logged: false
  }
  fetch(`${url}/${id}`, {
    method: "PUT",
    headers: {
      "Content-Type": "application/json"
    },
    body: JSON.stringify(data)
  })
  .then(response => response.json())
  .then(data => { 
    
  })


}

Bitte helft mir! Ich weiss wirklich nicht wie das geht und möchte jetzt auch nicht den ganzen Tag dazu verschwenden! Denn ich habe noch andere Hausaufgaben.. Dankeschön im Voraus!

LG

MrOsmo

HTML, Webseite, JavaScript, HTML5, Code, Programmiersprache, Webdesign, Webentwicklung, Frontend, Visual Studio Code
1 Antwort
Frage
von einem Inkognito-Nutzer
19.12.2023, 11:09
Mit Bildern
Mit Links
Wie kann man mit CSS etwas "ausblenden"?

Ich habe mir ein Kontextmenü gebaut, dass auch Untermenüs hat:

https://jsbin.com/vaxayibeme/1/edit?html,css,output

Die Untermenüs sollen zur Benutzerfreundlichkeit mit einer Fade-Animation ein- und ausgeblendet werden, dass wenn man ein paar Millisekunden außerhalb war mit der Maus wieder rein gehen kann, um es offen zu halten.

Wenn man mit der Maus in diesem Bereich ist:

öffnen sich allerdings gleich die beiden Untermenüs Darüber/Darunter. Das ist vor allem am Handy problematisch, weil man dort nur mit Klicks steuert. So kann es leicht vorkommen, dass man versehentlich etwas einfügt, wenn man nur das Menü wegdrücken wollte (oder den Typ ändert und damit potentiell Daten löscht).

Die Einträge, die nicht aktiv sind, habe ich mit opacity: 0 ausgeblendet (weil man das mit transition animieren kann, um diesen Fade-Effekt zu bekommen). Das hat aber natürlich den Nachteil, dass es nur "unsichtbar" ist aber immer noch klickbar.

Vorher hatte ich es mit display: none versteckt, dass es auch wirklich weg ist allerdings kann man das nicht animieren, was es weniger benutzerfreundlich macht.

Hat jemand eine Idee, wie man die Untermenüs mit CSS ausblenden könnte? (muss nicht unbedingt der Fade-Effekt sein, nur irgendwie dass sie nicht mehr aus Versehen geöffnet werden können also dass man mit der Maus in dem Bereich aus Bild 2 sein kann ohne dass es geöffnet wird).

Code für alle die nicht auf JS Bin gehen wollen füge ich gleich an (ist sonst zu lang).

Bild zu Frage
HTML, Webseite, CSS, HTML5, Webdesign, Webentwicklung
1 Antwort
Frage
von MrOsmo
15.12.2023, 08:38
JavaScript Server API Hilfe?

Hallo,

meine Aufgabe:

wenn ich zum Beispiel bei login: babyshark2 schreibe und bei password: 123, und dann auf "send" drücke, dann werden ja diese Daten und zusätzlich noch isLogin: false auf Backend Server geschickt. Wenn ich aber beim zweiten Mal nochmal diese inputs mit den gleichen Daten ausfülle (babyshark2, 12) und dann aber auf "login" drücke, dann sollte das Programm zwischen alle Loginnamen genau diesen Loginname (babyshark2) finden, und falls das Passwort auch richtig ist, dann sollte das isLogin: auf true gesetzt werden. Aber ich verstehe gar nicht wie ich das weitermachen soll. Bitte helft mir!

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CRUD</title>
  <link rel="stylesheet" href="./style.css">
  <script defer src="./script.js"></script>
</head>
<body>
  <form class="form">
    <input id="loginInput" type="text" placeholder="Login">    
    <input id="passwordInput" type="password" placeholder="Password">    
    <button id="sendButton">Send</button>
    <button id="loginButton">Login</button>
    <p class="p">If you want to delete an Item press the button "Delete" twice to confirm it!</p>


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

JAVASCRIPT IST IN DEN KOMMENTAREN; DA ES HIER NICHT PASST!

MfG

MrOsmo

Software, HTML, IT, Webseite, programmieren, JavaScript, HTML5, Code, Informatik, Programmiersprache, Webentwicklung, Frontend
2 Antworten
Frage
von 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 Fragen zum Thema Webseite
Mehr meistgelesene Fragen zu Webseite