codestory

Schnellstart mit Javascript

View more Tutorials:

Folge uns auf unserer fanpage, um jedes Mal benachrichtigt zu werden, wenn es neue Artikel gibt. Facebook

1- Das Zweck der Unterricht

Javascript vs ECMAScript
Javascript und ECMAScript sind 2 unterschiedlichen Namen aber sie haben eine enge Verbindung miteinander. Javascript ist tatsachlich eine Sprache,die nach der durch ECMAScript definierten Standards entwickelt wird.  Das ist der Grund, warum die Topics über Javascript und ECMAScript abwechselt gesetzt werden
-
Wenn Sie mit Javascript nur beginnen, sollen Sie nach meiner Empfehlung den folgenden Artikel lesen um diese Beziehung mehr zu verstehen:
Javascript ist eine Programmierungsprache.Javascript wird im HTML eingebettet, damit die Webseite mit dem Benutzer interagieren können.
Das folgende Beispiel ist eine Seite HTML mit einem Tag <img src="light-off.gif">, das eine Lichte in dem Status von aus (off) zeigt. Javascript kann die Wert des Attribut src (<img src="light-on.gif">) ändern um ein altes Foto durch ein anderen Foto ersetzen, das Foto von Licht in Status von an (on)
Das Zweck des Artikel hilft Ihnen bei dem Verstanden, wie Javascript in HTML einzubetten und einige einfachen Beispiele durchzuführen. Alle Beispiele haben nur ein Zweck. Das ist : Sie können mit Javascript vor dem Lernen der mehr detailierten Topics kennenlernen 

2- Javascript in HTML schreiben

Die Kode Javascript kann innerhalb HTML geschrieben werden, konkret wird sie innerhalb des Tag <script></script> geschrieben :
Die Tage <script> können innerhalb der Tags <head> oder innerhalb des Tag <body> gesezt, zuerst sehen Sie ein einfaches Beispiel:
Eine File helloworld.html mit der Inhalt erstellen:
helloworld.html

<!DOCTYPE html>
<html>
   <head>
      <title>Hello Javascript</title>

      <script type = "text/javascript">

         function sayHello()  {
             alert("Hello Everyone!");
         }
      </script>

   </head>
   <body>

      <button onclick="sayHello()">Click me!</button>

   </body>
</html>

 
Die File helloworld.html auf dem Browser laufen und das Ergebnis sehen
Im Beispiel oben erstelle ich die Funktion sayHello() in Tag <script></script> . Wenn der Benutzer auf die Button klickt, wird die Funktion sayHello() aufgeruft werden und  zeigt sie ein dialog mit der Inhalt "Hello Everyone!". Sorgen Sie nicht dafür, dass Sie wissen nicht, was eine Funktion ist. Ignorieren Sie vorläufig.

3- Javascript in einer einzelnen File schreiben

Die Kode Javascript in einer einzelnen File schreiben. dann importiert HTML diese File zu verwenden. Das ist der Weg, damit Sie die Kode Javascript von Ihnen besser managen.Und die File Javascript kann für viel Files HTML geteilt werden.
Die Kode Javascript wird in einer File mit der Extension wie js geschrieben. Die Files HTML werden die obengemeinten File Javascript importieren zu verwenden.
Zunächst ist das das Beispiel mit der Licht (Light), in diesem Beispiel brauchen wir 4 Files:
light.js

function turnLightOn()  {
  var img = document.getElementById("myImage");
  img.src = "light-on.gif";
}

function turnLightOff()  {
  var img = document.getElementById("myImage");
  img.src = "light-off.gif";
}

 
light.html

<!DOCTYPE html>
<html>
   <head>
      <title>Light</title>

      <script type="text/javascript" src="light.js"></script>
      
   </head>
   <body>
      <h2>What Can JavaScript Do?</h2>
      <p>JavaScript can change HTML attribute values.</p>
      <p>In this case JavaScript changes the value of the src (source) attribute of an image.</p>

      <button onclick="turnLightOn()">Turn on the light</button>
      <img id="myImage" src="light-off.gif" style="width:100px">
      <button onclick="turnLightOff()">Turn off the light</button>
   </body>
</html>

 

View more Tutorials:

Vielleicht bist du interessiert

Das sind die Online-Courses außer der Website o7planning, die wir empfehlen. Sie können umsonst sein oder Discount haben.