Gå til innhold

Objekter i javascript


Anbefalte innlegg

Jeg har følgende htm dokument:

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

 

<html>

<head>

<script type="text/javascript" src="Test.js"></script>

<title>Untitled</title>

</head>

<body>

<script language="JavaScript">

<!--//

new tttt ("Hallo i luken");

//-->

</script>

 

 

<a onClick='alert(tttt.tekst);'>Trykk meg</a>

</body>

</html>

 

 

Filen Test.js er som følger:

 

function tttt(tekst){

this.tekst = tekst;

}

 

 

Slik jeg ser det så har jeg opprettet ett objekt som heter tttt. Den har en variabel 'tekst'. Er det ikke slik at objektet 'tttt' blir tatt vare på? Når jeg trykker 'Trykk meg' i html dokumentet så får jeg bare opp meldingen 'undefined'.

Er det noen som kan hjelpe meg med dette? Hvordan får jeg tatt vare på et objekt? :(

Lenke til kommentar
Videoannonse
Annonse
Gjest Slettet+142

henger meg på, jeg.

 

er det mulig å legge inn funksjoner innenfor et objekt. hvis noen skjønner.

liksom å kunne gjøre noe lignende dette:

function startKlasse( navn ){
this.nick = navn;
}

var klasse = new startKlasse("Mariyo");

// og så på et eller annet vis legge til en funksjon som kan endre klasse.nick-variabelen, med navn endreNick()

klasse.endreNick("Jeg heter ikke Mariyo");

alert(klasse.nick); // output skal bli "Jeg heter ikke Mariyo"

 

er dette en løsning?

klasse.endreNick = function(navn){
this.nick = navn;
}

 

edit: litt omstokking av ord her :cry:

Endret av Slettet+142
Lenke til kommentar

Du må lage en prototype :p

 

// JavaScript Pet class

function Pet(name) {
   this._name = name;
}

Pet.prototype._name;

Pet.prototype.getName = function() {
   return this._name;
}


var p = new Pet("Max");
alert(p.getName());

 

Besvarer dette spørsmålet ditt? Jeg er ikke guru på OOiJ, men jeg tror ikke _'en er nødvendig. Dette er sakset direkte fra linken jeg gav i forrige post.

Endret av Kagee
Lenke til kommentar
Gjest Slettet+142

hmm. jeg fikk svaret mitt ja, men om jeg skjønte koden? - Nei.

jeg tror jeg skal vente litt med å sette meg inn i OOJ. Til jeg virkelig trenger det eller noe slikt, men takk for svar :)

Lenke til kommentar
var myTTTT = new tttt("Hello i luken")

<a onClick='alert(myTTTT.tekst);'>Trykk meg</a>

 

Fungerer sikkert bedre. Men uansett skal man vel ikke bruke variabler i classer direkte? Er det ikke riktigere å bruke myTTTT.getTekst?

 

Basic 101 Javascript OO:

http://www.xml.com/pub/a/2006/06/07/object...javascript.html

 

Pass på at du bruker eksemplene for JS, ikke C#

8477320[/snapback]

 

Dette virker bra, men det dukker opp en ny problemstilling.

 

Viser på nytt 'nesten' samme htm dokument:

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

 

<html>

<head>

<script type="text/javascript" src="Test.js"></script>

<title>Untitled</title>

</head>

<body>

<script language="JavaScript">

<!--//

myTTTT = new tttt ("Hallo i luken");

//-->

</script>

 

<p>Dette er ikke morsomt</p>

<a onClick='document.write(myTTTT.tekst);'>Trykk meg</a>

</body>

</html>

 

 

Samme Test.js:

 

function tttt(tekst){

this.tekst = tekst;

}

 

 

Det som skjer når jeg trykker 'Trykk meg' er at dokumentet tømmes helt, dvs. at også <p>Dette er ikke morsomt</p> blir borte, før siden fylles med det som står i document.write(). Det virker som den leser inn siden på nytt.

Dette vil også si at den 'nye' siden ikke husker noe av objektet som er skapt.

Dette blir et problem for meg når jeg skal lage et menyobjekt som skal åpnes/lukkes. Har noen noe forslag på hvordan jeg løser dette. :hmm:

Lenke til kommentar
Gjest Slettet+142

document.write('') ved event laster vel siden på nytt mener jeg. det jeg heller tror er at du bør lage et objekt som du kan bruke. feks noe som dette:

 

<p>Dette er ikke morsomt</p>
<a onClick='document.getElementById("kontainer").innerHTML = myTTTT.tekst;'>Trykk meg</a>
<span id="kontainer"><!-- her vil myTTTT.tekst dukke opp når du trykker på "Trykk Meg" --></span>

Lenke til kommentar
document.write('') ved event laster vel siden på nytt mener jeg. det jeg heller tror er at du bør lage et objekt som du kan bruke. feks noe som dette:

 

<p>Dette er ikke morsomt</p>
<a onClick='document.getElementById("kontainer").innerHTML = myTTTT.tekst;'>Trykk meg</a>
<span id="kontainer"><!-- her vil myTTTT.tekst dukke opp når du trykker på "Trykk Meg" --></span>

8485963[/snapback]

 

Jeg har sett litt på DOM, men det er en ting jeg ikke finner ut av. Det virker som jeg får tilgang til objektene kun når jeg bruker en event hendelse. Er det mulig å få tilgang uten å bruke denne metoden?

 

Jeg har følgende htm side:

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

 

<html>

<head>

<title>nu_innhold</title>

</head>

<body>

 

<script language="JavaScript" src="javascript/meny.js"></script>

<script language="JavaScript" src="javascript/tre.js"></script>

<br><br>

 

<script language="JavaScript">

<!--//

var Meny = new tre (Meny_tre);

//-->

</script>

 

<span id="kontainer"></span>

</body>

</html>

 

Jeg har ingen event hendelse her og i funksjonen 'tre' får jeg ikke tilgang til 'kontainer'. Jeg har forsøkt med windows.document.kontainer, pluss alle andre varianter, men til ingen nytte.

 

Jeg har også forsøkt å overføre med en onLoad hendelse, som

 

onLoad="var x = document.getElementById('kontainer');"

 

men variabelen 'x' dør når onLoad er utført.

 

Noen som vet?

Lenke til kommentar
Gjest Slettet+142

<span id="kontainer"></span>
<script type="text/javascript" language="javascript">var x = document.getElementById('kontainer');</script>

 

du bør evt. sjekke om du får noen errors i javascripten din.. har du FF, skaff deg FireBug-addon'en og sjekk ;)

Endret av Slettet+142
Lenke til kommentar
Jeg har også forsøkt å overføre med en onLoad hendelse, som

 

onLoad="var x = document.getElementById('kontainer');"

 

men variabelen 'x' dør når onLoad er utført.

 

Noen som vet?

8507582[/snapback]

Prøv å flytte

<span id="kontainer"></span>

før javascriptet kjøres.

 

Legger også med en lite demo på hvordan du kan lage klasser med støtte for events.

 

test.html

Klikk for å se/fjerne innholdet nedenfor
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>nu_innhold</title>
<link rel="stylesheet" type="text/css" href="test.css"></link>
<script language="JavaScript" src="test.js"></script>
</head>
<body>

Demo av link med alertboks:<br><br>

<div id="container"></div>

<script language="JavaScript">
// Lag linker med popup.
var link1 = new LinkAlert("http://www.google.com/", "Google", "LinkAlert");
var link2 = new LinkAlert("http://www.altavista.com/", "Altavista", "LinkAlert");
var link3 = new LinkAlert("http://www.hardware.no/", "Hardware.no", "LinkAlert");

// Lag linker.
var parent = document.getElementById("container");
link1.Build(parent);
link2.Build(parent);
link3.Build(parent);
</script>

</body>
</html>

test.js

Klikk for å se/fjerne innholdet nedenfor
//
// LinkAlert class
//
function LinkAlert(url, text, css_class)
{
  this.url = url;
  this.text = text;
  this.css_class = css_class;
}

LinkAlert.prototype.Build = function(parent_element)
{
  this.element = document.createElement('a');
  this.element.object = this;
  this.element.href = this.url;
  this.element.className = this.css_class;
  this.element.onclick = OnClick;

  this.element.appendChild( document.createTextNode(this.text) );

  parent_element.appendChild(this.element);
}

LinkAlert.prototype.OnClick = function(event)
{
  if(event.button == 0 || event.button == 1)
  {
     alert("Clicked button with url = " + this.url);
  }
  else if(event.button == 2)
  {
  }

  // Disable propagation of event.
  event.cancelBubble = true;
  if(event.stopPropagation) event.stopPropagation();
}


//
// Event handling
//
function OnClick(event)
{
  if(!event)
     var event = window.event;

  if(!this.object)
     alert("OnClick: Invalid object");
  else
     this.object.OnClick(event);
}

test.css

Klikk for å se/fjerne innholdet nedenfor
.LinkAlert
{
margin: 1em;
padding: 1em;
color: white;
background-color: #444;
}

a.LinkAlert:link
{
text-decoration: none;
}

a.LinkAlert:visited
{
text-decoration: none;
}

a.LinkAlert:active
{
text-decoration: none;
}

a.LinkAlert:hover
{
text-decoration: underline;
}

Endret av hishadow
Lenke til kommentar
Jeg har også forsøkt å overføre med en onLoad hendelse, som

 

onLoad="var x = document.getElementById('kontainer');"

 

men variabelen 'x' dør når onLoad er utført.

 

Noen som vet?

8507582[/snapback]

 

Variablen dør fordi du begrenser levetiden dens til onLoad-hendelsen ved å bruke "var". Prøv bare x = document.getElementById('kontainer'); - så "overlever" den.

 

Prøv å flytte
<span id="kontainer"></span>

før javascriptet kjøres.

 

Legger også med en lite demo på hvordan du kan lage klasser med støtte for events.

8510227[/snapback]

Putt lange(mange) codetagger inn i SKJUL-tagger, så blir det ikke så langt å bla :D

Lenke til kommentar
  • 4 uker senere...

Jeg har laget en liten simulasjon ved bruk av JavaScript, droppet prosjektet fordi jeg begynte å lære meg Java--ble litt for treigt etterhvert med JavaScript... :ermm:

 

MEN UANSETT, i dette scriptet bruker jeg nesten bare (det JavaScript kaller) objekter til behandling av data. F eks et vektor-objekt som har alle egenskapene til en vektor: størrelse og retning, og funksjoner for å legge til, trekke fra, multiplisere, og dele med andre vektorer... Kan jo se litt på det hvis du er interessert i hvordan hvertfall jeg bruker objekter i praksis.

 

Klikk for å se/fjerne innholdet nedenfor

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>
Phys X
</title>
<style type="text/css">
* {
font-family: Verdana, sans-serif;
font-size: 10px;
color: #000;
}
body {
margin: 20px;
}
div#arena_div {
border: 1px solid #000;
position: relative;
}
img.object {
position: absolute;
}
</style>
<script type="text/javascript">
// skrevet av LostOblivion
function run()
{
for (obj_index = 0; obj_index < obj.length; obj_index++)
{
 sum_forces = new Vector;
 
 // gravitation
 if (switchboard.gravitation)
 {
 	sum_grav_forces = new Vector;
 	
 	for (subobj_index = 0; subobj_index < obj.length; subobj_index++)
 	{
   if (obj_index == subobj_index)
   	continue;
   grav_force = new Vector;
   distance = obj[obj_index].get_distance(obj[subobj_index]);
   grav_force.angle = obj[obj_index].get_angle(obj[subobj_index]);
   // formula gravitational force: gamma * m1 * m2 / r^2
   grav_force.mag = world.gamma * obj[obj_index].mass * obj[subobj_index].mass / Math.pow(distance, 2);
   sum_grav_forces.add(grav_force);
 	}
 	sum_forces.add(sum_grav_forces);
 }
 
 // if any forces, affect object
 if (sum_forces.mag > 0)
 {
 	// use gathered forces and change object velocity
 	acceleration = new Vector;
 	acceleration.angle = sum_forces.angle;
 	acceleration.mag = sum_forces.mag / obj[obj_index].mass;
 	obj[obj_index].velocity.add(acceleration);
 }
 
 // convert the velocity to xy speeds and add to the xy positions
 obj_xspeed = obj[obj_index].velocity.mag * Math.sin(obj[obj_index].velocity.angle);
 obj_yspeed = obj[obj_index].velocity.mag * Math.cos(obj[obj_index].velocity.angle) * -1;
 obj[obj_index].pos.x += obj_xspeed;
 obj[obj_index].pos.y += obj_yspeed;
 
 // detect & handle arena collision
 if (switchboard.arena_collision)
 	arena_collision(obj[obj_index]);
 
 // detect & handle object collision
 if (switchboard.object_collision)
 	for (subobj_index = obj_index + 1; subobj_index < obj.length; subobj_index++)
   object_collision(obj[obj_index], obj[subobj_index]);
 
 obj[obj_index].move();
}

// go thru to next loop if switchboard.running is on
if (switchboard.running)
 setTimeout("run()", 1);
}

// collision functions

// detect & handle collision between object and arena
function arena_collision(obj)
{
if (obj.pos.x - obj.radius < (-arena.width / 2) * world.meters_per_pixel)
{
 obj.pos.x = (-arena.width / 2) * world.meters_per_pixel + obj.radius;
 obj.velocity.angle = 2 * Math.PI - obj.velocity.angle;
}
else if (obj.pos.x + obj.radius > (arena.width / 2) * world.meters_per_pixel)
{
 obj.pos.x = (arena.width / 2) * world.meters_per_pixel - obj.radius;
 obj.velocity.angle = -obj.velocity.angle;
}
if (obj.pos.y - obj.radius < (-arena.height / 2) * world.meters_per_pixel)
{
 obj.pos.y = (-arena.height / 2) * world.meters_per_pixel + obj.radius;
 obj.velocity.angle = -Math.PI - obj.velocity.angle;
}
else if (obj.pos.y + obj.radius > (arena.height / 2) * world.meters_per_pixel)
{
 obj.pos.y = (arena.height / 2) * world.meters_per_pixel - obj.radius;
 obj.velocity.angle = Math.PI - obj.velocity.angle;
}
}

// detect & handle collision between objects
function object_collision(obj, subobj)
{
distance = obj.get_distance(subobj);
if (distance - obj.radius - subobj.radius < 0)
{
 // get angle to b from a
 obj_angle = obj.get_angle(subobj);
 // get angle to a from b
 subobj_angle = subobj.get_angle(obj);
 
 // decompose speeds on collision plane (collision plane: line from center obj to center subobj where x is along plane and y is normal to plane)
 obj_plane_xspeed = obj.velocity.mag * Math.cos(obj.velocity.angle - obj_angle);
 obj_plane_yspeed = obj.velocity.mag * Math.sin(obj.velocity.angle - obj_angle);
 subobj_plane_xspeed = subobj.velocity.mag * Math.cos(subobj.velocity.angle - obj_angle);
 subobj_plane_yspeed = subobj.velocity.mag * Math.sin(subobj.velocity.angle - obj_angle);
 
 // calculate new speeds in x-direction
 obj_plane_new_xspeed = (obj_plane_xspeed * (obj.mass - subobj.mass) + 2 * subobj.mass * subobj_plane_xspeed) / (obj.mass + subobj.mass);
 obj_plane_new_yspeed = obj_plane_yspeed; // leave unchanged in y-direction
 subobj_plane_new_xspeed = (subobj_plane_xspeed * (subobj.mass - obj.mass) + 2 * obj.mass * obj_plane_xspeed) / (obj.mass + subobj.mass);
 subobj_plane_new_yspeed = subobj_plane_yspeed; // leave unchanged in y-direction
 
 // get new polar speed
 obj.velocity.mag = Math.sqrt(Math.pow(obj_plane_new_xspeed, 2) + Math.pow(obj_plane_new_yspeed, 2));
 subobj.velocity.mag = Math.sqrt(Math.pow(subobj_plane_new_xspeed, 2) + Math.pow(subobj_plane_new_yspeed, 2));
 
 // get new polar angle (first part is angle from plane, then second part adds the angle arena-plane)
 obj.velocity.angle = Math.atan2(obj_plane_new_yspeed, obj_plane_new_xspeed) + obj_angle;
 subobj.velocity.angle = Math.atan2(subobj_plane_new_yspeed, subobj_plane_new_xspeed) + obj_angle;
 
 // move object out of collision zone
 obj.pos.x = subobj.pos.x + ((obj.radius + subobj.radius) * Math.sin(subobj_angle));
 obj.pos.y = subobj.pos.y + ((obj.radius + subobj.radius) * Math.cos(subobj_angle) * -1);
}
}

// general functions

// converting radians to degrees
function rad2deg(rad)
{
return rad * 180 / Math.PI;
}

// converting degrees to radians
function deg2rad(deg)
{
return deg * Math.PI / 180;
}

// rounding numbers with n decimal points
function my_round(num, n)
{
return Math.round(num * Math.pow(10, n)) / Math.pow(10, n);
}

// start/stop simulation
function set_running()
{
if (switchboard.running)
{
 document.cpanel.switch_running.value = "Start";
 switchboard.running = false;
}
else
{
 document.cpanel.switch_running.value = "Stop";
 switchboard.running = true;
 run();
}
}

// object constructors

// position
function Position(xpos, ypos)
{
this.x = xpos ? xpos : 0;
this.y = ypos ? ypos : 0;
}

// vector
function Vector(angle, mag)
{
this.angle = angle ? angle : 0;
this.mag = mag ? mag : 0;

// add other vector
this.add = function(other)
{
 a_mag_x = Math.sin(this.angle) * this.mag;
 a_mag_y = Math.cos(this.angle) * this.mag;
 b_mag_x = Math.sin(other.angle) * other.mag;
 b_mag_y = Math.cos(other.angle) * other.mag;
 c_mag_x = a_mag_x + b_mag_x;
 c_mag_y = a_mag_y + b_mag_y;
 this.angle = Math.atan2(c_mag_x, c_mag_y);
 this.mag = Math.sqrt(Math.pow(c_mag_x, 2) + Math.pow(c_mag_y, 2));
}
}

// sphere
function Sphere(name, xpos, ypos, radius, mass, angle, speed, img)
{
this.name = name;
this.pos = new Position(xpos, ypos);
this.radius = radius;
this.mass = mass;
this.velocity = new Vector(angle, speed);
this.img = img;

// make sphere appear on arena
this.make = function()
{
 // create nodes on arena
 this.handle = document.createElement("img");
 this.handle.setAttribute("id", "obj_" + this.name);
 this.handle.setAttribute("src", this.img);
 this.handle.setAttribute("className", "object");
 this.handle.setAttribute("class", "object");
 this.handle.setAttribute("alt", "O");
 arena.handle.appendChild(this.handle);
 
 // move the object
 this.move();
 // and resize
 this.resize();
}

// move sphere on arena
this.move = function()
{
 xpos = this.pos.x / world.meters_per_pixel;
 ypos = this.pos.y / world.meters_per_pixel;
 radius = this.radius / world.meters_per_pixel;
 this.handle.style.left = Math.floor(arena.width / 2 + xpos - radius) + "px"
 this.handle.style.top = Math.floor(arena.height / 2 + ypos - radius) + "px";
}

// resize object
this.resize = function()
{
 radius = this.radius / world.meters_per_pixel;
 this.handle.style.width = Math.floor(radius * 2) + "px";
 this.handle.style.height = Math.floor(radius * 2) + "px";
}

// get distance to other sphere
this.get_distance = function(other)
{
 distance_x = other.pos.x - this.pos.x;
 distance_y = this.pos.y - other.pos.y;
 return Math.sqrt(Math.pow(distance_x, 2) + Math.pow(distance_y, 2));
}

// get angle to other sphere
this.get_angle = function(other)
{
 distance_x = other.pos.x - this.pos.x;
 distance_y = this.pos.y - other.pos.y;
 return Math.atan2(distance_x, distance_y);
}

// finally create object
this.make();
// and add to obj
obj.push(this);
}

// on window load
window.onload = function()
{
// switchboard
switchboard = new Object;
switchboard.running = false;
switchboard.gravitation = true;
switchboard.arena_collision = true;
switchboard.object_collision = true;

// measurement & environment variables
obj = new Array;
world = new Object;
world.meters_per_pixel = 0.4 * Math.pow(10, 7);
world.gamma = 6.67 * Math.pow(10, -11);
arena = new Object;
arena.width = 1000;
arena.height = 600;
arena.handle = document.getElementById("arena_div");

arena.handle.style.width = arena.width + "px";
arena.handle.style.height = arena.height + "px";

// make some objects
new Sphere(
 "Cassini",
 -6 * Math.pow(10, 8),
 3 * Math.pow(10, 8),
 1.5 * Math.pow(10, 7),
 3000,
 deg2rad(0),
 0,
 "images/red.png"
);
new Sphere(
 "Jupiter",
 -19 * Math.pow(10, 8),
 0 * Math.pow(10, 8),
 7.14 * Math.pow(10, 7),
 1.9 * Math.pow(10, 31),
 deg2rad(70),
 650000,
 "images/blue.png"
);
}
</script>
</head>

<body>
<div id="arena_div">
</div>
<div id="cpanel">
<form name="cpanel">
<input name="switch_running" type="button" value="Start" onclick="set_running();" />
<input type="button" value="Reset" onclick="window.location.reload(false);" />
</form>
</div>
</body>

</html>

 

Har litt dårlig tid, men håper det hjelper deg... :dontgetit:

Lenke til kommentar

Takk takk. Fått mye fin respons her, og forslag til løsninger. Har fått til min meny, men ser at jeg må sette meg grundigere inn i programmeringen. Har tenkt å lære meg javascript, php og mysql, og kanske java etterhvert. Ser på forslag til bøker fra tidligere tråder, men hvis dere har noen gode forslag som ikke er nevnt så lytter jeg.

 

Igjen takk :)

Lenke til kommentar
Takk takk. Fått mye fin respons her, og forslag til løsninger. Har fått til min meny, men ser at jeg må sette meg grundigere inn i programmeringen. Har tenkt å lære meg javascript, php og mysql, og kanske java etterhvert. Ser på forslag til bøker fra tidligere tråder, men hvis dere har noen gode forslag som ikke er nevnt så lytter jeg.

 

Igjen takk  :)

8730710[/snapback]

 

Jeg vil anbefale deg å se litt på prototype.js, som er et "rammeverk" som blant annet gjør DOM-navigering/manipulering mye enklere.

 

http://www.prototypejs.org/

 

Hilsen Werner

Lenke til kommentar

Dette bør du heller spørre om i Java-forumet, men du kan vel enten legge det inn i en side som en java-applet (alt fra menyer til spill til servershell-logins) eller det kan brukes på serversiden, ikke ulikt PHP. Men Java-folkene kan gi deg bedre svar.

Endret av Kagee
Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
  • Hvem er aktive   0 medlemmer

    • Ingen innloggede medlemmer aktive
×
×
  • Opprett ny...