Felix: Von Java nach JavaScript: HILFE!!

SELF-Forum

Von Java nach JavaScript: HILFE!!

Felix
– Informationen zu den Bewertungsregeln

Hi,

Im Studium habe ich gelernt, Java zu programmieren. Da ich schon lange mit HTML / CSS rumwurschtel wollte ich mich jetzt mal an JavaScript machen. Allerdings habe ich arge Probleme!! Ich verstehe nicht, wie die Objektorientiertheit realisiert ist. Ich vermisse meine schönen Klassen, in denen alles gekapselt ist.

Folgendes brauche ich:

  1. DIVs relativ zur Fenstergröße ausrichten (hierfür gibt es auch schon Quellcode, welcher allerdings eher mäßig ist, glaube ich *grins*)
  2. Bildwechsel bei onMouseOver.

Wie realisiere ich das? Wohl am besten mit Objekten, oder? Gibt's da schon Quellcode. Schön kurz und prägnant?

Hier erstmal meine kreativen Schöpfungen:  :)

//////////////////////////////
//format.css:
//////////////////////////////

body {
 background-color:#004F35;
}

.yellowDiv {
 position:absolute;
 background-color:#CCAE2E;
 top:0px;
 width:100%;
 min-width:100%;
 max-width:100%;
 height:304px;
 min-height:304px;
 max-height:304px;
 border:none;
 z-index:1;
}

.circle {
 position:absolute;
 width:584px;
 height:584px;
 background:url(./images/backCircle2.gif) fixed no-repeat;
 border:none;
 z-index:2;
}

.menuHome {
 position:absolute;
 border:none;
 font-family:Verdana, Arial, Helvetica, sans-serif;
 font-size:14px;
/* font-weight:bold;*/
 color:#CCAE2E;
 z-index:3;
}

/*---  link menuHome  ---*/

a.menu:link {
 color:#CCAE2E;
 text-decoration:none;
}
a.menu:visited {
 color:#CCAE2E;
 text-decoration:none;
}
a.menu:hover {
 color:#F3E8B7;
 text-decoration:underline;
}
a.menu:active {
 color:#F4F0E0;
 text-decoration:none;
}

//////////////////////////////
// index.htm:
//////////////////////////////

<html>
<head>
<title>Felix Manke  · index.htm</title>

<link rel="stylesheet" href="format.css" type="text/css" />

<script type="text/javascript">
<!--

//--- simple Browser-Check
var ns4 = (document.layers);
var ie4 = (document.all && !document.getElementById);
var ie5 = (document.all && document.getElementById);
var ns6 = (!document.all && document.getElementById);

var yellowHeight = 304;
var circleSize   = 584;

function switchImage(id, dest){
 document.getElementById(id).src = dest.src;
}

function getClientWidth(){
 if (window.innerWidth)
  return window.innerWidth;
  else if (document.body && document.body.offsetWidth)
  return document.body.offsetWidth;
}

function getClientHeight(){
 if (window.innerHeight)
  return window.innerHeight;
  else if (document.body && document.body.offsetHeight)
  return document.body.offsetHeight;
}

function init(){

var clWidth    = getClientWidth();
 var clHeight   = getClientHeight();
 var halfWidth  = clWidth  / 2;
 var halfHeight = clHeight / 2;

//--- yellowDiv

var yellowTop = halfHeight - (yellowHeight / 2);

if(ns4)
  document.layers["yellowDiv"].top = yellowTop;
 else if(ie4)
  document.all["yellowDiv"].style.pixelTop = yellowTop;
 else if(ie5 || ns6)
  document.getElementById("yellowDiv").style.top = yellowTop;

//--- circle

var circleLeft = (halfWidth * 0.6667)  - (circleSize / 2);
 var circleTop  = halfHeight - (circleSize / 2);

if(circleLeft < 0)
  circleLeft = 0;

if(ns4){
  document.layers["circle"].left = circleLeft;
  document.layers["circle"].top  = circleTop;
 }
 else if(ie4){
  document.all["circle"].style.pixelLeft = circleLeft;
  document.all["circle"].style.pixelTop  = circleTop;
 }
 else if(ie5 || ns6){
  document.getElementById("circle").style.left = circleLeft;
  document.getElementById("circle").style.top  = circleTop;
 }

//--- menuHome

var menuLeft = circleLeft + circleSize;
 var menuTop  = yellowTop  + yellowHeight + 5 ;

if(ns4){
  document.layers["menuHome"].left = menuLeft;
  document.layers["menuHome"].top  = menuTop;
 }
 else if(ie4){
  document.all["menuHome"].style.pixelLeft = menuLeft;
  document.all["menuHome"].style.pixelTop  = menuTop;
 }
 else if(ie5 || ns6){
  document.getElementById("menuHome").style.left = menuLeft;
  document.getElementById("menuHome").style.top  = menuTop;
 }

}// init

//-->
</script>

</head>

<body onLoad="init()">

<div class="yellowDiv" id="yellowDiv">
 
</div>

<div class="circle" id="circle">
<img src="./images/frame02a.gif" width="584" height="584"/>
</div>

<div class="menuHome" id="menuHome">
<a class="menu" href="index.htm">home</a> ·
<a class="menu" href="sitemap.htm">sitemap</a> ·
<a class="menu" href="contact.htm">contact</a>
</div>

</body>
</html>

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Von Java nach JavaScript: HILFE!!

    Cheatah
    – Informationen zu den Bewertungsregeln

    Hi,

    Im Studium habe ich gelernt, Java zu programmieren. Da ich schon lange mit HTML / CSS rumwurschtel wollte ich mich jetzt mal an JavaScript machen. Allerdings habe ich arge Probleme!!

    wenn Du glaubst, es würde auch nur ein Hauch des Schattens einer Verbindung zwischen Java und JavaScript bestehen, dann glaube ich das gerne :-) Die beiden Sprachen haben nicht mehr miteinander gemein als Gummi und Gummibärchen, oder auch Mozart und Mozartkugeln. Vergiss in dem Zusammenhang einfach Java, es hilft Dir nicht.

    Ich verstehe nicht, wie die Objektorientiertheit realisiert ist.

    Der Verknüpfungsoperator ist der Punkt, das kennst Du aus Java. Darüber hinaus hat ein Objekt nur Unterobjekte, Eigenschaften und Methoden, das war's. Die Objektschachtelung kannst Du gewöhnlich am Monitor erkennen bzw. Dir visuell vorstellen. Die Erstellung eigener Objekte ist etwas, das man zu Beginn der JavaScript-Programmierung nicht wirklich braucht; die existierenden bieten schon genügend Möglichkeiten.

    1. DIVs relativ zur Fenstergröße ausrichten (hierfür gibt es auch schon Quellcode, welcher allerdings eher mäßig ist, glaube ich *grins*)

    Warum willst Du das mit JavaScript machen? HTML- und CSS-Bordmittel reichen. Oder um es anders auszudrücken: JavaScript ist nicht viel mehr als ein Hilfsmittel, um HTML und CSS dynamisch einzusetzen. Was Du nicht (ggf. in Einzelschritten) mittels HTML und CSS herstellen kannst, kriegst Du mit JavaScript auch nicht gebacken.

    1. Bildwechsel bei onMouseOver.

    Also, _dafür_ gibt es nun wirklich genug Scripts.

    Wie realisiere ich das? Wohl am besten mit Objekten, oder?

    Du wirst zwangsläufig Objekte benutzen. Es ist dabei aber nicht mal wichtig, ob Du Dir dessen bewusst bist. Wie gesagt: Wenn Du bei der JavaScript-Programmierung an Java denkst, kommst Du nicht wirklich weit.

    Hier erstmal meine kreativen Schöpfungen:  :)

    Bitte in Zukunft entweder kürzen, oder - besser - einen Link posten, unter dem man das sehen kann. Siehe auch </faq/> zum Setzen von Links.

    Cheatah

    --
    X-Will-Answer-Email: No
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  2. Von Java nach JavaScript: HILFE!!

    Peter Kaufmann Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Hallo Felix,

    Im Studium habe ich gelernt, Java zu programmieren.

    Damit hat man mich auch gequält ...

    Da ich schon lange mit HTML / CSS rumwurschtel wollte ich mich jetzt mal an JavaScript machen. Allerdings habe ich arge Probleme!! Ich verstehe nicht, wie die Objektorientiertheit realisiert ist. Ich vermisse meine schönen Klassen, in denen alles gekapselt ist.

    Klassen gibt es in JavaScript nicht. Das OOP Modell von JavaSCript arbeitet mit Prototypen. Vielleicht hilft dir ein Feature Artikel von Christian Kruse bei Selfhtml weiter: http://aktuell.de.selfhtml.org/artikel/javascript/oomodell/index.htm

    Grüße,

    Peter

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln