Javascript, CSS en HTML

Pagina: 1
Acties:
  • 1.488 views

Onderwerpen


Acties:
  • 0 Henk 'm!

  • Toppertje
  • Registratie: December 2009
  • Laatst online: 12-09 12:20

Toppertje

www.davideografie.nl

Topicstarter
Hallo,

Omdat mijn vorige topic gesloten werd vanwege te weinig kennis van mijn kant heb ik me dit keer wat beter ingelezen en gekeken of mijn probleem nogsteeds aanwezig was, dit was het geval dus doe ik nog een poging.

Eerst wat uitleg: Sinds een tijdje ben ik aan het proberen om wat widgets voor mijn mobiele telefoon te maken, hierbij kan er gekozen worden om html, css, en javascript te combineren, om het mezelf makkelijk te maken begin ik (naar mijn idee) simpel door het eerst zonder opmaak (css) te realiseren. Echter treed er een probleem op: er verschijnt gewoon niks op het scherm.

de verwijzing vanuit html naar javascript, doe ik op deze manier:
JavaScript:
1
2
3
<head>
        <script type="text/javascript" src="./js/main.js"></script>
</head>


Nu staat er in mijn javascript eigenlijk een heel simpel stukje code:
JavaScript:
1
2
3
4
5
6
7
8
function klok(){
tijd = new Date();
uren = tijd.getHours();
min = tijd.getMinutes();
sec = tijd.getSeconds();
        
document.write(uren +":"+ min +":"+ sec);
}


Zet ik dit stukje code gewoon in het html gedeelte werkt het gewoon. Doe ik het op bovenstaande manier, werkt het niet... en ik vraag me dus af wat ik fout doe.

Acties:
  • 0 Henk 'm!

  • Joostje123
  • Registratie: September 2010
  • Laatst online: 22:16
Als je javascript werkt
Maar je verwijzing niet wat zal er dan fout zijn?

Acties:
  • 0 Henk 'm!

  • Toppertje
  • Registratie: December 2009
  • Laatst online: 12-09 12:20

Toppertje

www.davideografie.nl

Topicstarter
Joostje123 schreef op maandag 03 oktober 2011 @ 21:08:
Als je javascript werkt
Maar je verwijzing niet wat zal er dan fout zijn?
De verwijzing ;).

Net een stukje code aan de body toegevoegd:
JavaScript:
1
2
3
<body>
        <script language="JavaScript">document.write(klok())</script>   
</body>


Nu wordt de klok getoond alleen komt er: undefined achter te staan...

Acties:
  • 0 Henk 'm!

  • d33n
  • Registratie: April 2000
  • Laatst online: 04-09 07:58
Misschien doet hij document.write te vroeg?

code:
1
2
3
window.onload = function() {
klok();
}

Acties:
  • 0 Henk 'm!

  • crisp
  • Registratie: Februari 2000
  • Laatst online: 00:53

crisp

Devver

Pixelated

Toppertje schreef op maandag 03 oktober 2011 @ 21:15:
[...]


De verwijzing ;).

Net een stukje code aan de body toegevoegd:
code:
1
2
3
<body>
        <script language="JavaScript">document.write(klok())</script>   
</body>


Nu wordt de klok getoond alleen komt er: undefined achter te staan...
Dat klopt; je functie geeft immers niets terug ('undefined' dus) en dat 'write' je vervolgens. Je kan volstaan met enkel de functiecall aangezien de functie zelf al document.write doet:

HTML:
1
2
3
<script>
    klok(); // functie schrijft hier de klok
</script>
d33n schreef op maandag 03 oktober 2011 @ 21:18:
Misschien doet hij document.write te vroeg?

code:
1
2
3
window.onload = function() {
klok();
}
document.write moet altijd inline, anders overschrijf je de hele huidige pagina.

Aan de andere kant zijn er echter wel veel betere methoden om dynamische content in je pagina te plaatsen mbv javascript, middels DOM-manipulatie. document.write zie ik eigenlijk alleen nog maar bij 3rd-party widgets en banners gebruikt worden :P

Intentionally left blank


Acties:
  • 0 Henk 'm!

  • Joostje123
  • Registratie: September 2010
  • Laatst online: 22:16
Toppertje schreef op maandag 03 oktober 2011 @ 21:03:
de verwijzing vanuit html naar javascript, doe ik op deze manier:
code:
1
2
3
<head>
        <script type="text/javascript" src="./js/main.js"></script>
</head>
Weet je wat je eens moet doen.
De broncode van je code kijken in Firefox ctrl + u.
Klik eens op die link om je javascript te includen.
Je zal een foutmelding krijgen dat je bestand niet word gevonden.

Voor een level naar beneden om een file te linken moet je 2 punten gebruiken. Dus dit:

code:
1
2
3
<head>
        <script type="text/javascript" src="../js/main.js"></script>
</head>


Waarschijnlijk zal het dan wel werken.

Acties:
  • 0 Henk 'm!

  • Toppertje
  • Registratie: December 2009
  • Laatst online: 12-09 12:20

Toppertje

www.davideografie.nl

Topicstarter
Joostje123 schreef op maandag 03 oktober 2011 @ 21:38:
Voor een level naar beneden om een file te linken moet je 2 punten gebruiken. Dus dit:
code:
1
2
3
<head>
        <script type="text/javascript" src="../js/main.js"></script>
</head>


Waarschijnlijk zal het dan wel werken.
Hm, dan gebeurt er helemaal niks meer, toch maar 1 puntje dan.
crisp schreef op maandag 03 oktober 2011 @ 21:30:

HTML:
1
2
3
<script>
    klok(); // functie schrijft hier de klok
</script>


document.write moet altijd inline, anders overschrijf je de hele huidige pagina.

Aan de andere kant zijn er echter wel veel betere methoden om dynamische content in je pagina te plaatsen mbv javascript, middels DOM-manipulatie. document.write zie ik eigenlijk alleen nog maar bij 3rd-party widgets en banners gebruikt worden :P
Thanks, hij werkt nu!

DOM-manipulatie... daar heb ik iets over gelezen, volgens mij ging dat ongeveer zo:
JavaScript:
1
document.getElementById('divElementId')


Ik snapte alleen niet precies hoe dit werkte, maar volgens mij als volgt:
dat stukje code hoort bij het javascript in, en in html kun je dan in de body een div aanmaken met een bepaald id, als deze met elkaar corresponderen wordt het getoond op het scherm, zit ik dan goed?

[ Voor 17% gewijzigd door Toppertje op 04-10-2011 22:16 ]


Acties:
  • 0 Henk 'm!

  • crisp
  • Registratie: Februari 2000
  • Laatst online: 00:53

crisp

Devver

Pixelated

Toppertje schreef op maandag 03 oktober 2011 @ 21:48:
[...]

Ik snapte alleen niet precies hoe dit werkte, maar volgens mij als volgt:
dat stukje code hoort bij het javascript in, en in html kun je dan in de body een div aanmaken met een bepaald id, als deze met elkaar corresponderen wordt het getoond op het scherm, zit ik dan goed?
Bijna; simpel voorbeeldje:

HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div id="myDiv"></div>
<script>
function klok()
{
    var tijd = new Date();
    var uren = tijd.getHours();
    var min = tijd.getMinutes();
    var sec = tijd.getSeconds();

    document.getElementById('myDiv').innerHTML = uren + ":" + min + ":" + sec;
}

klok();
</script>


en innerHTML is nog maar 1 van de vele manieren (wel de simpelste) om te werken met dynamische HTML.

Wil je dit nog dynamischer maken doe dan dit in plaats van de enkele functieaanroep:
JavaScript:
1
setInterval(klok, 1000);

en ga vooral veel tutorials lezen en dingen uitproberen ;)

[ Voor 9% gewijzigd door crisp op 03-10-2011 21:58 ]

Intentionally left blank


Acties:
  • 0 Henk 'm!

  • Tharulerz
  • Registratie: April 2009
  • Laatst online: 10-04 05:16
Grappig om te zien hoe crisp toch even Javascript 101 uitlegt aan iemand :)

Acties:
  • 0 Henk 'm!

  • Toppertje
  • Registratie: December 2009
  • Laatst online: 12-09 12:20

Toppertje

www.davideografie.nl

Topicstarter
@crisp, thanks!

die interval had ik inderdaad ook gelezen, enige nadeel: de klok komt 'pas' na 1 seconde in beeld.

Edit: Hoe kan ik op die manier nu het gedeelte wat tussen de <script></script> staat in een ander document (main.js) neerzetten?

[ Voor 35% gewijzigd door Toppertje op 03-10-2011 22:14 ]


Acties:
  • 0 Henk 'm!

  • TERW_DAN
  • Registratie: Juni 2001
  • Niet online

TERW_DAN

Met een hamer past alles.

[quote]Toppertje schreef op maandag 03 oktober 2011 @ 22:10:
@crisp, thanks!

die interval had ik inderdaad ook gelezen, enige nadeel: de klok komt 'pas' na 1 seconde in beeld.
[quote]
Dan kun je uiteraard de functie die je klok instelt gelijk aanroepen zodra de pagina geladen wordt. De interval zorgt er enkel voor dat hij na iedere 1000ms wordt aangeroepen.
Edit: Hoe kan ik op die manier nu het gedeelte wat tussen de <script></script> staat in een ander document (main.js) neerzetten?
Dat kun je er gewoon in kopiëren en plakken. Zolang het script maar op de pagina staat als je het aanroept.

Acties:
  • 0 Henk 'm!

  • Toppertje
  • Registratie: December 2009
  • Laatst online: 12-09 12:20

Toppertje

www.davideografie.nl

Topicstarter
Inmiddels heb ik weer wat tutorials achter de kiezen en heb ik ook wat aan de opmaak gedaan, toch krijg ik het aanroepen van de klok niet goed, hij begint steeds na 1 seconde.

Javascript:
JavaScript:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var maandNaam = new Array("Jan", "Feb", "Mar", "Apr", "Mei", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dec");
var dagNaam = new Array("Zo", "Ma", "Di", "Wo", "Do", "Vr", "Za");

function klok(){    
    tijd = new Date();
    
    document.getElementById('uur').innerHTML = TweeDigits(tijd.getHours());
    document.getElementById('min').innerHTML = TweeDigits(tijd.getMinutes());
    
    document.getElementById('datum').innerHTML = (dagNaam[tijd.getDay()])+", "
        +tijd.getDate()+" "+(maandNaam[tijd.getMonth()]);
}

function TweeDigits(digit){
    return digit<10 ? "0"+digit : digit;
}

setInterval(klok, 1000);


Iemand enig idee hoe ik dit goed kan krijgen?

Edit: De klok met datum ziet er nu als volgt uit:
Afbeeldingslocatie: http://img26.imageshack.us/img26/1614/naamloosoz.png

[ Voor 6% gewijzigd door Toppertje op 04-10-2011 22:07 ]


Acties:
  • 0 Henk 'm!

  • Tharulerz
  • Registratie: April 2009
  • Laatst online: 10-04 05:16
Toppertje schreef op dinsdag 04 oktober 2011 @ 21:50:
Inmiddels heb ik weer wat tutorials achter de kiezen en heb ik ook wat aan de opmaak gedaan, toch krijg ik het aanroepen van de klok niet goed, hij begint steeds na 1 seconde.
Nogal logisch, je vraagt dat ook gewoon.

JavaScript:
1
setInterval(klok, 1000);


Ik vrees dat de simpelste oplossing gewoon dit wordt:
JavaScript:
1
2
klok();
setInterval(klok, 1000);



P.S.: Gebruik [code=javascript] in plaats van [code].

Acties:
  • 0 Henk 'm!

  • Toppertje
  • Registratie: December 2009
  • Laatst online: 12-09 12:20

Toppertje

www.davideografie.nl

Topicstarter
Tharulerz schreef op dinsdag 04 oktober 2011 @ 22:07:
Ik vrees dat de simpelste oplossing gewoon dit wordt:
JavaScript:
1
2
klok();
setInterval(klok, 1000);


P.S.: Gebruik [code=javascript] in plaats van [code].
Hm, nu verschijnt er niks meer in beeld..

Acties:
  • 0 Henk 'm!

  • crisp
  • Registratie: Februari 2000
  • Laatst online: 00:53

crisp

Devver

Pixelated

Check je javascript console; misschien heb je wel gewoon een foutje in je code gemaakt :)

Intentionally left blank


Acties:
  • 0 Henk 'm!

  • NMe
  • Registratie: Februari 2004
  • Laatst online: 09-09 13:58

NMe

Quia Ego Sic Dico.

Toppertje, let je even op dat je zelf ook moeite blijft doen? :) Die laatste opmerking van crisp is sowieso altijd het eerste dat je moet doen als je javascripts ineens niets meer doen terwijl je niets veranderd hebt. ;)

Overigens, iets anders: <script language="javascript"> is uit de tijd, tegenwoordig zou je <script type="text/javascript"> moeten gebruiken.

'E's fighting in there!' he stuttered, grabbing the captain's arm.
'All by himself?' said the captain.
'No, with everyone!' shouted Nobby, hopping from one foot to the other.


Acties:
  • 0 Henk 'm!

  • crisp
  • Registratie: Februari 2000
  • Laatst online: 00:53

crisp

Devver

Pixelated

NMe: gewoon <script> is prima hoor in HTML5 ;)

Intentionally left blank


Acties:
  • 0 Henk 'm!

  • NMe
  • Registratie: Februari 2004
  • Laatst online: 09-09 13:58

NMe

Quia Ego Sic Dico.

True, maar ik geef uit persoonlijke voorkeur toch liever een type op, ook omdat ik niet weet wat oudere browsers zonder doen. :P

'E's fighting in there!' he stuttered, grabbing the captain's arm.
'All by himself?' said the captain.
'No, with everyone!' shouted Nobby, hopping from one foot to the other.


Acties:
  • 0 Henk 'm!

  • Toppertje
  • Registratie: December 2009
  • Laatst online: 12-09 12:20

Toppertje

www.davideografie.nl

Topicstarter
NMe schreef op woensdag 05 oktober 2011 @ 11:36:
True, maar ik geef uit persoonlijke voorkeur toch liever een type op, ook omdat ik niet weet wat oudere browsers zonder doen. :P
Ik gebruik het alleen niet voor een website o.i.d. maar voor het creëren van een widget (het programma heet Eclipse helios).

De klok wordt trouwens nu wel gelijk getoond, in html heb ik gewoon de functie klok(); een keer aangeroepen, en hij blijft nu gewoon netjes elke minuut updaten.

[ Voor 72% gewijzigd door Toppertje op 05-10-2011 22:17 ]


Acties:
  • 0 Henk 'm!

  • Toppertje
  • Registratie: December 2009
  • Laatst online: 12-09 12:20

Toppertje

www.davideografie.nl

Topicstarter
De klok is inmiddels qua lay-out af. Nu wil ik alleen nog wat extra functionaliteit toepassen, namelijk het volgende: Als je op de klok tikt moet deze van (standaard) wit naar zwart gaan, klik je weer moet de kleur weer wit worden, enz.

Vooraf heb ik al wat lopen zoeken op het net en kwam op jQuery uit.

In Index.HTML heb ik alle onderdelen onder 1 div gezet zodat alles dus zwart wordt als je op de klok klikt.
In javascript heb ik een extra functie aangemaakt die er als volgt uit ziet:
JavaScript:
1
2
3
4
5
6
7
function ChangeColor(){
    $(document).ready(function(){
        $("button").click(function(){
            $("#main").fadeTo(000,0.4);
          });
        });
}


Nu mijn probleem, ik heb geen "Button" (regel 3) maar ik heb de klok waar ik op wil klikken. Hoe kan ik dat doen?

Voor de rest is de code natuurlijk nog niet compleet, want hij gaat dan alleen wat wit naar zwart, en niet terug, maar dat komt daarna wel ;).

Acties:
  • 0 Henk 'm!

  • NMe
  • Registratie: Februari 2004
  • Laatst online: 09-09 13:58

NMe

Quia Ego Sic Dico.

Door je klok een id te geven en dat te gebruiken in plaats van "button"?

'E's fighting in there!' he stuttered, grabbing the captain's arm.
'All by himself?' said the captain.
'No, with everyone!' shouted Nobby, hopping from one foot to the other.


Acties:
  • 0 Henk 'm!

  • Toppertje
  • Registratie: December 2009
  • Laatst online: 12-09 12:20

Toppertje

www.davideografie.nl

Topicstarter
NMe schreef op woensdag 19 oktober 2011 @ 22:34:
Door je klok een id te geven en dat te gebruiken in plaats van "button"?
Ik heb alle Div'jes van de klok al onder 1 div staan, de body ziet er als volgt uit:
HTML:
1
2
3
4
5
6
7
8
9
<body>
        <div id="main">
            <div id="our"></div>
            <div id="center"></div>
            <div id="min"></div>
            <div id="date"></div>
        </div>
        <script>clock();</script>
    </body>


Als ik de functie ChangeColor() nu zo neerzet werkt het helaas niet:
JavaScript:
1
2
3
4
5
6
7
function ChangeColor(){
    $(document).ready(function(){
        $("#main").click(function(){
            $("#main").fadeTo(000,0.4);
          });
        });
}

Acties:
  • 0 Henk 'm!

  • NMe
  • Registratie: Februari 2004
  • Laatst online: 09-09 13:58

NMe

Quia Ego Sic Dico.

Ik ben niet goed in jQuery (nooit gebruikt), maar gebruikt dat niet bind() voor het toevoegen van een event handler in plaats van click()? Of kan het allebei?

'E's fighting in there!' he stuttered, grabbing the captain's arm.
'All by himself?' said the captain.
'No, with everyone!' shouted Nobby, hopping from one foot to the other.


Acties:
  • 0 Henk 'm!

  • Toppertje
  • Registratie: December 2009
  • Laatst online: 12-09 12:20

Toppertje

www.davideografie.nl

Topicstarter
NMe schreef op woensdag 19 oktober 2011 @ 22:44:
Ik ben niet goed in jQuery (nooit gebruikt), maar gebruikt dat niet bind() voor het toevoegen van een event handler in plaats van click()? Of kan het allebei?
In tutorials die ik tegen ben gekomen werd click() gebruikt, voorbeeld: Klik hier.

Acties:
  • 0 Henk 'm!

  • Raynman
  • Registratie: Augustus 2004
  • Laatst online: 00:29
Ik denk dat bind algemener is dan click (edit: jup, zie link hieronder), maar click moet idd werken.

Wordt die functie ook ergens aangeroepen?

In feite is
JavaScript:
1
2
3
         function(){
            $("#main").fadeTo(000,0.4);
          }); 
al je changeColor-functie. Regel 1 en 7 moeten eigenlijk weg (en nu niet alleen op delete rammen maar ook proberen te snappen waarom :) )

Vergelijk ook met die tutorial (w3schools is trouwens niet echt een fantastische bron en jQuey heeft zijn eigen documentatie).

[ Voor 3% gewijzigd door Raynman op 19-10-2011 22:53 ]


Acties:
  • 0 Henk 'm!

  • Toppertje
  • Registratie: December 2009
  • Laatst online: 12-09 12:20

Toppertje

www.davideografie.nl

Topicstarter
Raynman schreef op woensdag 19 oktober 2011 @ 22:52:
Ik denk dat bind algemener is dan click (edit: jup, zie link hieronder), maar click moet idd werken.

Wordt die functie ook ergens aangeroepen?

In feite is
JavaScript:
1
2
3
         function(){
            $("#main").fadeTo(000,0.4);
          }); 
al je changeColor-functie. Regel 1 en 7 moeten eigenlijk weg (en nu niet alleen op delete rammen maar ook proberen te snappen waarom :) )

Vergelijk ook met die tutorial (w3schools is trouwens niet echt een fantastische bron en jQuey heeft zijn eigen documentatie).
Nee, die moet nog aangeroepen worden, ik weet alleen niet hoe ik van een div een soort van button maak zodat je die functie kan aanroepen.

Ik snap inderdaad niet waarom dat gedeelte wat jij post in feite de ChangeColor functie is, en waarom alleen regel 1 en 7 weg moeten, zou je dat uit willen leggen?

Acties:
  • 0 Henk 'm!

  • NMe
  • Registratie: Februari 2004
  • Laatst online: 09-09 13:58

NMe

Quia Ego Sic Dico.

Omdat een event handler niet aangeroepen wordt op het moment dat je hem definieert maar op het moment dat je ergens op klikt. Het heeft nogal weinig zin om het definiëren van een event handler uit te stellen totdat je ergens op geklikt hebt want dan doet 'ie niet veel voor de eerste klik. ;)

'E's fighting in there!' he stuttered, grabbing the captain's arm.
'All by himself?' said the captain.
'No, with everyone!' shouted Nobby, hopping from one foot to the other.


Acties:
  • 0 Henk 'm!

  • Manuel
  • Registratie: Maart 2008
  • Laatst online: 07:59
Als wij de documentatie van jQuery er eens bijpakken, om specifiek te zijn de functie fadeTo, dan zien we dit staan: .fadeTo( duration, opacity [, easing] [, callback] ) & .fadeTo( duration, opacity [, callback] )

In andere woorden wat jij nu gebruikt is:
JavaScript:
1
$("#main").fadeTo(000, 0.4);

De duur van deze animatie is dus gelijk aan 0, dan kun je net zo goed: $("#main").css("background-color", "#000"); gebruiken, dan is het meteen zwart. Wat jij echter wilt is iets als dit:
JavaScript:
1
2
3
4
5
$("#main").click(function() {
    // Niet met selectors gaan klooien als het niet hoeft.
    $(this).toggleClass("zwart");
    // Dit voegt de class 'zwart' toe aan #main die standaard een witte achtergrond heeft.
});


Indien je fancy pancy effecten hierbij wilt wil ik je toch echt aanraden om even in de documentatie van jQuery te kijken. Hint: jQuery animate.

[ Voor 0% gewijzigd door Manuel op 20-10-2011 17:01 . Reden: *typos* ]


Acties:
  • 0 Henk 'm!

  • Toppertje
  • Registratie: December 2009
  • Laatst online: 12-09 12:20

Toppertje

www.davideografie.nl

Topicstarter
Alleen de cijfers en letters moeten van wit naar zwart en niet de achtergrond ;).
Dus dan kom je er met classes niet toch?

In dat geval moet je toch iets in css gaan aanpassen met behulp van jQuery, zoiets denk ik:
JavaScript:
1
2
3
$("#main").click(function() {
    $(this).css('color', 'Black');
    });


Dit heb ik hier vandaan.

Net geprobeerd bij het javascript in te voeren maar het werkt helaas niet.

Acties:
  • 0 Henk 'm!

  • Manuel
  • Registratie: Maart 2008
  • Laatst online: 07:59
Toppertje schreef op donderdag 20 oktober 2011 @ 19:48:
Alleen de cijfers en letters moeten van wit naar zwart en niet de achtergrond ;).
Dus dan kom je er met classes niet toch?
Sorry dat ik het moet vragen, maar heb je überhaupt wel de documentatie van jQuery doorgenomen en ook van toggleClass? Daarin wordt meerdere keren herhaalt dat het CSS-classes betreft en niets anders. In andere woorden krijg je zoiets in CSS:

Cascading Stylesheet:
1
2
.zwart { color: #000; /* of color: black; */ }
.wit { color: #FFF; /* of color: white; */ }

Acties:
  • 0 Henk 'm!

  • Toppertje
  • Registratie: December 2009
  • Laatst online: 12-09 12:20

Toppertje

www.davideografie.nl

Topicstarter
Uiteraard heb ik dat gedaan, net even een testje gemaakt wat prima werkt:
HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
  <style>
    #main { color:white; width:200px; font-size:14px; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
    <div id="main">Klik hier en de tekst wordt zwart.</div>
<script>
    $("#main").click(function () {
        $(this).css("color","black");
    });
</script>

</body>
</html>


Alleen als ik het 'style' gedeelte in mijn main.css zet, en het 'script' gedeelte (zonder de div) in javascript werkt het niet. Of moet ik regel 7 ook in mijn programma verwerken?

Acties:
  • 0 Henk 'm!

  • Raynman
  • Registratie: Augustus 2004
  • Laatst online: 00:29
Welke regel 7 en welk programma?

Maar inmiddels heb je ook de $(document).ready-aanroep achterwege gelaten. In je testje met inline js gaat dat blijkbaar wel goed omdat het script pas na de main-div gelezen wordt.

Acties:
  • 0 Henk 'm!

  • F.West98
  • Registratie: Juni 2009
  • Laatst online: 02:23

F.West98

Alweer 16 jaar hier

Toppertje schreef op donderdag 20 oktober 2011 @ 21:26:
Uiteraard heb ik dat gedaan, net even een testje gemaakt wat prima werkt:
HTML:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
  <style>
    #main { color:white; width:200px; font-size:14px; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
    <div id="main">Klik hier en de tekst wordt zwart.</div>
<script>
    $("#main").click(function () {
        $(this).css("color","black");
    });
</script>

</body>
</html>


Alleen als ik het 'style' gedeelte in mijn main.css zet, en het 'script' gedeelte (zonder de div) in javascript werkt het niet. Of moet ik regel 7 ook in mijn programma verwerken?
Dat komt omdat hij het zo doet: hij leest van boven naar beneden. Dus als er een js-verwijzing staat naar -locatie-, dan gaat ie dat eerst lezen. Komt hij iets tegen wat hij niet kent? Laat maar en hij stopt daarmee.
Laat de browser eerst kennismaken met datgene wat je noemt in de js, door eerst de div te doen, of de js bij document ready... (later lezen)

En ja, browser is dom, en weet niet meer dat ie over iets heeft gelezen als ie het dan TOCH nog tegenkomt, hij leest dan niet terug...

2x Dell UP2716D | R9 7950X | 128GB RAM | 980 Pro 2TB x2 | RTX2070 Super
.oisyn: Windows is net zo slecht in commandline als Linux in GUI


Acties:
  • 0 Henk 'm!

  • Toppertje
  • Registratie: December 2009
  • Laatst online: 12-09 12:20

Toppertje

www.davideografie.nl

Topicstarter
Raynman schreef op donderdag 20 oktober 2011 @ 21:54:
Welke regel 7 en welk programma?

Maar inmiddels heb je ook de $(document).ready-aanroep achterwege gelaten. In je testje met inline js gaat dat blijkbaar wel goed omdat het script pas na de main-div gelezen wordt.
Deze regel:
HTML:
1
<script src="http://code.jquery.com/jquery-latest.js"></script>


De code in mijn eigen programma (in main.js) staat er nu zo:
JavaScript:
1
2
3
4
5
$(document).ready(function(){
    $("#main").click(function () {
        $(this).css("color","black");
        });
    });

Acties:
  • 0 Henk 'm!

  • Creepy
  • Registratie: Juni 2001
  • Laatst online: 12-09 10:03

Creepy

Tactical Espionage Splatterer

(jarig!)
Hoe denk je jquery te kunnen gebruiken zonder dat je jquery opneemt in je code? Dat kan dus niet. Los daarvan: "werkt niet" is nogal vaag. Geef dan op z'n minst aan welke foutmelding je krijgt, en vergeet dan ook niet te melden wat je zelf al hebt geprobeerd hebt ;)

Je komt nu een paar keer niet verder dan "dit is mijn code en hij doet het niet" zonder extra informatie. Als je Devschuur® Beleid en Het algemeen beleid #quickstart bekijkt dan zie je hopelijk dat dat niet de bedoeling is hier ;) Met een beetje logisch nadenken en je wat meer verdiepen in de materie waar je mee bezig bent, moet je er echt zelf wel uit kunnen komen. Dit topic gaat dan ook dicht.

"I had a problem, I solved it with regular expressions. Now I have two problems". That's shows a lack of appreciation for regular expressions: "I know have _star_ problems" --Kevlin Henney

Pagina: 1

Dit topic is gesloten.