Tjena!

Jag håller på att lära mig OOP i Javascript. Har meckat en del med prototype, men jag kan inte riktigt få det att funka.
Tänke om det var någon här som var kung på Prototype som kan hjälpa mig lite.

Så här ser koden ut just nu:

function sysInit()
{
// Create & Assign objects
this.objDOMWindow = window;
this.objDOMDocument = this.objDOMWindow.document;

// Properties

// Methods
this.objSYSContent = getIFrame;

// Get content blocks
}

function getIFrame(aID){
this.objELMIFrame = this.objDOMDocument.getElementById(aID);
return (this.objELMIFrame.contentWindow || this.objELMIFrame.contentDocument);
}
getIFrame.prototype = new sysInit;

window.onload = function () {
system = new sysInit;
alert(system.objSYSContent('sys_content_wrapper'));
};


I övan kod så alertar den den iFramens window som har ID:t sys_content_wrapper.
Det jag egentligen vill är att skapa ett content objekt istället. Jag vill fördefinera detta redan i sysObjObject funktionen.

Jag vill definera ett objekt typ så här i sysInit():
this.objSYSContentIframeElm = något...
this.objSYSContentIframeWindow = något...

I alla object som skapas utifrån superobjektet system så vill jag kunna referera till this.objSYSContentIFrameElm och då få tillbaka det elementet, ifall att det inte ändrat i hierkin. Jag skulle kunna använda mig av ovan kod(längst upp), men jag vill ha dessa dela fixat redan från början, då blir det lättare att lägga till en iFrame och sen bara skapa ett objekt för den. Sen så blir det tydligare kod utan att
behöva inkludera ID:t för vara egenskap jag vill få från objektet.

Som ni kanske märker så är det rätt rörigt, håller på att lära mig det här så ni får ursäkta ifall det är helt obegripligt.

Hoppas någon här kan hjälpa mig med detta.

Mvh
Adde

Jag skulle gärna hjälpa dig... om jag förstod vad du ville göra...

Ett exempel på otydlighet:
Du skriver: "Jag vill fördefinera detta redan i sysObjObject funktionen."
Var finns den funktionen?

Tjena!

Hehe, jo jag kanske råka skriva fel, när jag skrev sysObjObject så var det sysInit som det skulle vara.
Det är inte så lätt att förklara detta. När jag har laddat klart sidan så vill jag att det skapas
ett super objekt. För detta objekt vill jag definera
olika element samt DOM object Window, Document osv...
Alla methoder och funktioner som skapas för super objektet ska vara tillgänglig för alla
objekt som skapas under super objektet oberoende på hur många objekt det finns. Alltså att den ärver
objektets metoder och egenskaper, om jag inte längre ner i kedjan av object och subobjekt bestämmer
mig för att ändra en egenskap.

Det som försvårar saker och ting, vilket jag också märk så finns det inte så många sidor som har bra
exempel på det, är att jag kör onload när jag laddat klart sidan för att sedan skapa objekt och egenskaper för dessa.
Dvs jag vill bygga systemet med DOM och prototype via javascript, alltså inte ren Javascript, vilket alla tutorials för prototype verkar
illustrera.

Ifall jag först har ett superobjekt och sedan bestämmer mig för att köra en funktion som inte är knutet till superobjektet
via dess funktion, så vill jag istället att den går via prototype kedjan genom alla subobjekt som hör till superobjektet...
eh förstod du vad jag menade?


Kolla här:

function superobject()
{
this.minmetod = minmetod;
}

window.onload = function(){
super = new superobject();
};

i detta fall så skapas en minmetod metod för super objektet.

Om jag nu gör så här:

function superobject()
{
this.name = 'achmeed'
this.minmetod = minmetod;
}

function sub()
{
alert(this.name);
}

window.onload = function(){
super = new superobject();
sub.prototype = new superobject();
ulla = new sub();
};


ifall detta skulle funka som jag vill, så vill jag att alert(this.name); eller alert(ulla.name); blir "achmeed".
Men det har jag inte fixat. Om jag sen längre ner i någon annan funktion/metod skapar ett nytt subobject så vill jag automatiskt
att detta ska ärva super ojektets namn.

Hmm hoppas det förklarar lite mer...

/Adde

När jag skapar en HTML-sida med

function superobject()
{
 this.name = 'achmeed'
 //this.minmetod = minmetod;
}

function sub()
{
 alert(this.name);
}

window.onload = function(){
   super = new superobject();
   sub.prototype = new superobject();
   ulla = new sub();
};

Tja

Alltså det blir lite annorlunda när jag använder mig av onload i samband med andra events.
Det är också klurigt att ärva egenskaper utan att gå via metoder som är kopplade till super objektet.

Ifall jag har en metod i superobjektet och sen en till metod i den funktionen säger inte att jag direkt ärver
superobjektets egenskaper....

Rätt svårt att förklara...

Snälla ifall du vet någon bra länk till en sida som kan demonstrera ärvda classer via DOM istället för Javascript
så skulle jag vara väldigt tacksam!

/Adrian

"DOM i stället för Javascript"? DOM är till skillnad från JavaScript/ECMAScript inget programmeringsspråk. Det är en modell för vilka metoder som skall finnas för att komma åt olika noder i XML- och HTML-dokument. Modellen kan implementeras i olika språk. Mest känd är implementationen i JavaScript, men den kan även implementeras i t.ex. Java, C++, C#, Python, PHP, ...

Jo det vet jag också.

Det jag menade var mer att jag vill använda mig av en kombination av DOM och OOP Javascript. När det gäller OOP i Javascript så är det rätt meckigt att skapa objekt och köra events via prototype, eller har du något bra exempel? Iallafall events biten för att ärva klasser. Dom flesta tutorials jag har sett visar inte onload modeller med mera som faktiskt resulterar i en fungerande webbapplikation via OOP Javascript. Ett exempel på dessa tutorials är att dom kör tex:


function ulla(){någon subobject egenskap}

//och sedan sätter prototype utanför funktionen, som tex:

ulla.prototype = new names();

//om jag sedan kör window.onload=new names('yurgen');

Så har redan names(); körts redan där jag deklarerar ulla.prototype.
Inte så bra, då får jag errors för dom objekten som skapas för vissa element
i names redan innan sidan har laddas klart. Detta vill jag inte! Dessa exempel är vanliga
och funkar inte i en webbapplikations värld. Rätta mig om jag har fel.

Frågan är enkel hur använder jag prototype för onload event = super objekt och sedan ärva via alla sub objekt?

Bara för att klargöra... Vad menar du när du skriver "subobjekt"?


En sak jag undrar är om du har förstått hur prototype fungerar. Jag misstänker att du tror att <b>F.prototype = new G();</b> i JS betyder exakt samma sak som <b>class F extends G</b> i "normal" OO. Så är inte fallet...

Om vi har koden

function F(n)
{
    this.n = n;
}

F.prototype = obj;

var new_obj = new F(3);

Nej jag håller på att lära mig. Tack för exemplet.

Kan du visa ett fungerande exempel på onload event med window objekt och tex 3 div element, dessa ska vara childobjekt till ett eget definerat superobjekt(det som är längst upp i kedjan) via prototype. Kolla på detta som jag gjort, kanske du kan hjälpa mig.
Nedan funkar inte som jag vill, det jag vill är att i xml_http_request.prototype.send kunna komma åt mwas egenskaper och metoder?
Är detta möjligt...?


function sysInit()
{
// Create & Assign objects
this.objDOMWindow = window;
this.objDOMDocument = this.objDOMWindow.document;
this.objContentElm = this.objDOMDocument.getElementById('sys_content_wrapper');
this.objToolboxElm = this.objDOMDocument.getElementById('sys_toolbox');
this.objToolboxElmStyle = this.objToolboxElm.style;

this.objContentWindow = (objContentElm.contentWindow || objContentElm.contentDocument);

this.objContentDocument = this.objContentWindow.document;
this.objContainers = new Array();

// Properties
this.objToolboxElmStyle.visibility = 'visible';
this.objContentWindow.activeContainer = null;

// Methods

this.contentLoad = contentLoad;
}


function contentLoad(activate)
{
this.objSYSBlocks = this.objContentDocument.getElementsByTagName('span');
for (var x=0; x<this.objSYSBlocks.length; x++)
{
if (this.objSYSBlocks[x].id == 'wbablock'){
if (activate){
this.activateBlocks(x);
}
else
{
this.deActivateBlocks(x);
}
}
}
}


window.onload = function () {
mwas = new sysInit;
mwas.contentLoad(true);

// DET HÄR VILL JAG GÖRA
mwas.testRequest = new xml_http_request();
mwas.send();

// JAG VILL OCKSÅ ATT mwas objektet ska ärvas
// ner i xml_http_request.prototype.send
}



sysinit.prototype.xml_http_request() {
this.req=getRequest();
var lock=this;
this.req.onreadystatechange = function() {lock.processedRequest}
//addEventListener/attachEvent still doesn't work

function getRequest() {
try {
if(window.XMLHttpRequest) {
try {
return new XMLHttpRequest();
} catch(e) {
return false;
}
// branch for IE/Windows ActiveX version
} else if(window.ActiveXObject) {
try {
return new ActiveXObject('Msxml2.XMLHTTP');
} catch(e) {
try{
return new ActiveXObject('Microsoft.XMLHTTP');
} catch(e) {
return false;
}
}
}
} catch(e){
return false;
}
}
}



xml_http_request.prototype.send=function(type){
switch(type) {
case 'publishpage':
this.contentLoad(false);
this.req.open('POST', '../system/includes/publishpage.php', true);
this.req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
this.req.send('html=' + escape(this.objContentDocument.documentElement.innerHTML));
break;
case 'save':

break;
}
}


xml_http_request.prototype.processedRequest=function(){
if (this.req.readyState == 4) {
if(this.req.status == 200) {
if (this.req.responseText == 1) {
alert(1);
}
} else {
// alert(this.req.statusText);
}
}
}

Det var inget litet exempel du ville börja med... :-o

Hehe, nä det har blivit rätt mycket.

Här är en förenklad skum variant, som funkar:


function init()
{
this.name = 'test';
this.request = request;
this.send = request.prototype.send;
}

function request()
{
// this.req = new XMLHttpRequest();
}

request.prototype.send = function () {
alert(this.name);
}


window.onload = function (){
var mwas = new init();
request.prototype = new init();

var apa = new request();
apa.send(); // alerts 'test'
}

Hur sjukt det än ser ut så alertar den 'test'...
Det blir inga fel i Firefox, vilket är den enda som detta ska funka i. Skrev inte det förut...sorry.
Hursomhelst, kan det vara så att när jag kör request.prototype = new init(); att något blir fel där?
Finns det något annat sätt att skriva det på?

Jag kan förstå att alert('test') körs. Vad tycker du själv borde hända i stället?

Undrar bara ifall man kan skippa det här:

this.request = request;
this.send = request.prototype.send;

och bara ha kvar:

request.prototype = new init;

Känns inte som det görs rätt.

Här är ett kodexempel:

// Konstruktor
// Om argumentet name ges, används det för medlemmen name,
// annars används defaultvärdet från prototypen.
function request(name)
{
	if(name)
		this.name = name;
}

// Prototypen innehåller ett defaultvärde på name samt en funktion/metod send()
// Observera syntaxen för att konstruera generella objekt.
request.prototype = {
	name : 'Gorilla',
	send : function () { alert(this.name); }
}

// Vid laddning skapas dels ett requestobjekt med angivet värde på name,
// dels ett dito med defaultvärdet på name.
window.onload = function (){
	var apa = new request('Chimpans');
	apa.send(); // alerts 'test'
	
	var bepa = new request();
	bepa.send();
}

Ok den var snygg!

Men ifall jag har ett objekt ovan Request hur kommer jag åt dess egenskaper och metoder inne i Send? Jag vill nämligen
komma åt egenskaper i topobjektet.
Typ:


function super(name)
{
if(name)
this.name = name;
}


function request(name)
{
if(name)
this.name = name;
}


request.prototype = {
name : 'Gorilla',
send : function () { alert(this.name); }
}

window.onload = function (){
var superapa = new super('ulla');

// Det här funkar inte...
request.prototype = super;

var apa = new request('Chimpans');
apa.send(); // alerts 'test'

var bepa = new request();
bepa.send();
}



/Adde

Vilket objekts egenskaper är det du menar att du vill komma åt? Vilket är "topobjektet"?

I det här fallet så skulle det vara superapa och dess name.

Ett sätt är att lägga objektet superapa i den globala namnrymden:
<code>
var superapa = new super('ulla');

window.onload = function (){
</code>

Ett annat är att använda prototype:
<code>
request.prototype = new super;
request.prototype.name = 'Gorilla';
request.prototype.send = function () { alert(this.name); }
</code>
Detta ersätter då
<code>
request.prototype = {
name : 'Gorilla',
send : function () { alert(this.name); }
}
</code>

Edit: Oops... Dubbelpost.

Hmm ingen av dom där skulle funka i min kod. Den första skulle anropa sysInit innan onload, vilket skulle resultera i att jag får error på element som inte har renderats än.

Den andra funkar inte heller av samma orsak. Den tredje skulle funka men ifall jag har ett objekt över request objektet som är högre upp i
hierkin, hur kan jag i xmlhttprequest.prototype.send tex komma åt sysInit's egenskaper?

Kolla här, om du pallar, detta är lite data jag jobbar med just nu:


function sysInit() {
// Create & Assign elements/objects
this.objDOMWindow = window;
this.objDOMDocument = this.objDOMWindow.document;
this.objDivElm = this.objDOMDocument.getElementById('a1');

// Känns som det är här det blir fel....HUR SKA JAG GÖRA för att ärva sysInit instansen?
// Var ska jag lägga den?
xmlhttprequest.prototype = this;
}

function xmlhttprequest()
{
if(!window.XMLHttpRequest) {
try {
var lock = this;
this.req = new XMLHttpRequest();
this.req.onreadystatechange = function(){lock.xmlhttpprocess};
} catch(e) {
this.req = null;
return false;
}
}
}

xmlhttprequest.prototype.send = function (){
alert(this.objDivElm.innerHTML); // vill alerta div element text, vill ärva från sysInit
alert(this.req); // vill alerta 'object xmlhttprequest'
}

xmlhttprequest.prototype.xmlhttpprocess = function ()
{
alert(this.objDivElm.innerHTML); // vill alerta div element text, vill ärva från sysInit
alert(this.req); // vill alerta 'object xmlhttprequest'
}

window.onload = function () {
mwas = new sysInit;
xmlhttp = new xmlhttprequest();
xmlhttp.send();
}

Så här?

window.onload = function () {
	xmlhttprequest.prototype = new sysInit;
	xmlhttp = new xmlhttprequest();
	xmlhttp.send();
}

Tjena!

Tack för alla tidigare svar! :)

Testade det du skrev, men det funkar inte. Ifall jag tex försöker alerta this.t som är en egenskap som defineras i
sysInit så är den undefined. :(

Har du någon lösning på det?

Hehe ye!

Jag lyckades! Otroligt...men jag vet inte om den är så smart uppbyggd.

Nu ärver jag från mwas classen, jag får this.objDOMWindow och this.req i både processer och send.
Så här gjorde jag. Kanske du vet ett bättre sätt.


function sysInit() {
// Create & Assign elements/objects
this.objDOMWindow = window;
}

function xmlrequest () {
if(window.XMLHttpRequest) {
try {
this.req = new XMLHttpRequest();
var lock = this;
this.req.onreadystatechange = function(){lock.processer()}
} catch(e) {
return false;
}
}
}

sysInit.prototype.processer = function (){
alert(this.req);
alert(this.objDOMWindow);
}

sysInit.prototype.send = function (){
alert(this.req);
alert(this.objDOMWindow);
}

window.onload = function () {
mwas = new sysInit;
xmlrequest.prototype = new sysInit;
mwasreq = new xmlrequest();
mwasreq.send();
}


Om inte så vill jag tacka dig för att du stod ut med mina knasiga frågor. :)

Använder du mwas någonstans? Annars borde du kunna skippa raden
<b> mwas = new sysInit; </b>

Jo jag använder den.

Men möjligtvis så tar jag bort den sen. Tack för tipset!