Följ Black Week på SweClockers
Permalänk

Var lärde ni er Javascript?

Ja... Kom med sidorna bara! jag tycker att HTML/css sitter hyfsat bra och att det kommer bli bättre om några månader/år och allt jag saknar är javascript.

För övrigt varför jag skriver det här kanske vore bra att veta. Jag vill att varje gång man klickar på en bild så ska en viss text visas och klickar man på bilden igen så försvinner texten,och som standard (när sidan först laddar) så ska texten var gömd.

Vore sjukt tacksam för att få en kod som gör det och en bra sida där man lär sig javascript så både jag och ni slipper se mina trådar om kod-förfrågningar i framtiden

Permalänk
Medlem

Uh, varenda guide tar väl upp hur man kan gömma visa objekt? Om inte annat står det där säkert i din skolbok.

Permalänk
Permalänk
Skrivet av Semjonov:

Uh, varenda guide tar väl upp hur man kan gömma visa objekt? Om inte annat står det där säkert i din skolbok.

Uh, tydligen inte https://buckysroom.org/videos.php?cat=10&video=16947

I have no skolbok, jag försöker lära mig på min fritid

Permalänk
Medlem

Är ju en helt lysande uppgift för att lära sig skriva sina första rader JS på!.
Finns flera bra sidor att lära sig skriva JS varav en av dem är: http://www.codecademy.com/
Tar du dig genom den så lär du ha kunskapen att göra det du vill göra.
använder du Jquery så är det inte mkt mer än 3-4 rader kod.

Om du är för lat för att faktiskt gå genom codeacadamy så tycker jag att du skall testa googla dig fram till en lösning.
Ett förslag att googla på är: "Display text below image on click js" eller liknande så kommer du antagligen hitta minst 20 förslag på lösningar!

Lycka till

Permalänk
Skrivet av anderjo4:

Är ju en helt lysande uppgift för att lära sig skriva sina första rader JS på!.
Finns flera bra sidor att lära sig skriva JS varav en av dem är: http://www.codecademy.com/
Tar du dig genom den så lär du ha kunskapen att göra det du vill göra.
använder du Jquery så är det inte mkt mer än 3-4 rader kod.

Om du är för lat för att faktiskt gå genom codeacadamy så tycker jag att du skall testa googla dig fram till en lösning.
Ett förslag att googla på är: "Display text below image on click js" eller liknande så kommer du antagligen hitta minst 20 förslag på lösningar!

Lycka till

Kör nog på jquery när jag har hyfsat grepp om javascript.

Jag är inte så lat så jag går igenom codeacademy då.. Många verkar tipsa om den sidan så jag antar att den är bra :l jag gick ju igenom buckysroom (aka thenewboston) och jag är inte den som lär mig på en gång och jag verkar inte lära mig det jag vill lära mig där så därför söker jag efter något bättre som passar mig

Permalänk
Medlem

Bra start

Hejsan.

Skoj att du vill fördjupa dig i JavaScript.

Min rekommendation är att du börjar på länken nedan:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Getti...

Ta även en titt på:
https://developer.mozilla.org/en-US/docs/Web/JavaScript

Det är visserligen på engelska men det är bra guider och tutorials för att lära
dig grunderna.

Jag använder också referenser jag hittar på denna Mozilla Developer websiten varje dag.

Lycka till.

Länk lades till.
Visa signatur

Fractal Design Arc Svart | MSI Z68A-GD55 G3 REV B3 | Intel® Core i7 2600K, 3.4GHz, 8MB | Corsair 16GB (4x4096MB) CL9 1600Mhz VENGEANCE LP | MSI GeForce GTX 670 | Phanteks PH-TC14PE CPU Cooler (vit) | Corsair Power Supply 650W TX M, Modular, ATX, PS/2 | SSD (okänd tillverkare) + 2 äldre SATA2 diskar på 750 Gb, 350 gb. | OS: Microsoft Windows 10 home.

Permalänk
Medlem

Kan inte annat än hålla med föregående; Mozilla har kalasbra referensmaterial och guider och Codeacademy har jag hört mycket gott om.

Har även ramlat över en gratis e-bok (creative commons) som verkar riktigt vettig. Kan inte uttala mig så mycket om den, men tror absolut att den kan vara värt att spana in: http://eloquentjavascript.net.

Visa signatur

Stationärt: i7 3770k, Gigabyte GTX 780 WF, 4x8GB XMS3, MSI Z77A-GD65, Samsung 830 + 840, FD Newton 650W, FD Define R2
Bärbart: MacBook Pro 13" Tidigt 2011, Core i5, 8GB DDR3, OCZ Vertex 3 LT 240GB
Hemmaserver: HP Microserver N54L, 4GB ECC, Debian

Permalänk
Medlem
Skrivet av TheFork:

Har även ramlat över en gratis e-bok (creative commons) som verkar riktigt vettig. Kan inte uttala mig så mycket om den, men tror absolut att den kan vara värt att spana in: http://eloquentjavascript.net.

Den ser ut att vara vettig, så verkar värd att läsa tillsammans med materialet på länkarna jag tipsade om.

Visa signatur

Fractal Design Arc Svart | MSI Z68A-GD55 G3 REV B3 | Intel® Core i7 2600K, 3.4GHz, 8MB | Corsair 16GB (4x4096MB) CL9 1600Mhz VENGEANCE LP | MSI GeForce GTX 670 | Phanteks PH-TC14PE CPU Cooler (vit) | Corsair Power Supply 650W TX M, Modular, ATX, PS/2 | SSD (okänd tillverkare) + 2 äldre SATA2 diskar på 750 Gb, 350 gb. | OS: Microsoft Windows 10 home.

Permalänk
Medlem
Skrivet av Darkboot:

Jag vill att varje gång man klickar på en bild så ska en viss text visas och klickar man på bilden igen så försvinner texten,och som standard (när sidan först laddar) så ska texten var gömd.

Vore sjukt tacksam för att få en kod som gör det och en bra sida där man lär sig javascript så både jag och ni slipper se mina trådar om kod-förfrågningar i framtiden

Gjorde en liten kod till dig Bara att kopiera och klistra in på din sida för användning.
Var inte rädd för att fråga om det är nått du inte förstår.

<body> <img src="bild.jpeg" id="Bilden"> <span id="Texten"> <script> window.onload = function() { var bildenVar = document.getElementById("Bilden"); var textenVar = document.getElementById("Texten"); var toggle = 0; bildenVar.addEventListener('click', function() { if (toggle == 0) { textenVar.innerHTML = "Hejsan!"; toggle = 1; } else if (toggle == 1) { textenVar.innerHTML = null; toggle = 0; } }); }; </script> </body>

Permalänk
Skrivet av Scriptis:

Gjorde en liten kod till dig Bara att kopiera och klistra in på din sida för användning.
Var inte rädd för att fråga om det är nått du inte förstår.

<body> <img src="bild.jpeg" id="Bilden"> <span id="Texten"> <script> window.onload = function() { var bildenVar = document.getElementById("Bilden"); var textenVar = document.getElementById("Texten"); var toggle = 0; bildenVar.addEventListener('click', function() { if (toggle == 0) { textenVar.innerHTML = "Hejsan!"; toggle = 1; } else if (toggle == 1) { textenVar.innerHTML = null; toggle = 0; } }); }; </script> </body>

Det där var verkligen ingen bra kod.
En toggle som sätts till 0 och 1?
Två '==' och inte tre '===' ?
Du ändrar med innerHTML!? Så texten sätts med javascript? Det är inte smidigare att ha texten i html och gömma/visa noden?

Permalänk
Medlem
Skrivet av Yxskaftet:

Det där var verkligen ingen bra kod.
En toggle som sätts till 0 och 1?
Två '==' och inte tre '===' ?
Du ändrar med innerHTML!? Så texten sätts med javascript? Det är inte smidigare att ha texten i html och gömma/visa noden?

Det finns hundra olika sätt att utföra olika saker på. Föredrar du ett annat sätt så är du säkerligen mer än välkommen att dela med dig till OP, det skulle vara långt bättre istället för att tycka illa om någon annans kod och inte bidra med något själv.

Det här är mitt sätt att göra det på och jag är nöjd med det.

Permalänk
Skrivet av Scriptis:

Det finns hundra olika sätt att utföra olika saker på. Föredrar du ett annat sätt så är du säkerligen mer än välkommen att dela med dig till OP, det skulle vara långt bättre istället för att tycka illa om någon annans kod och inte bidra med något själv.

Det här är mitt sätt att göra det på och jag är nöjd med det.

Jag skulle göra något sånt här:

<img id="trigger" src="https://www.google.se/images/srpr/logo11w.png" alt="Click me" /> <p id="target">Some random text</p> <script> (function() { document.getElementById('trigger').onclick = function() { var target = document.getElementById('target'); target.style.display = target.style.display === 'none' ? 'block' : 'none'; } })(); </script>

Att jag kommer med kommentarer på din kod kan väl inte vara något annat än bra för trådskaparen? Eller vad skulle vara negativt menar du?

Permalänk
Medlem
Skrivet av Yxskaftet:

Att jag kommer med kommentarer på din kod kan väl inte vara något annat än bra för trådskaparen? Eller vad skulle vara negativt menar du?

"Det där var verkligen ingen bra kod." - Det är din åsikt, det har inget med ämnet här att göra. Det var det negativa.

Jag tycker din kod du postade är dålig, men det är också min åsikt.

Det är upp till OP vilken kod han föredrar och känner sig bekvämast med.

Permalänk
Skrivet av Scriptis:

"Det där var verkligen ingen bra kod." - Det är din åsikt, det har inget med ämnet här att göra. Det var det negativa.

Jag tycker din kod du postade är dålig, men det är också min åsikt.

Det är upp till OP vilken kod han föredrar och känner sig bekvämast med.

Min åsikt är att koden du postade är dålig, ja.
Trådskaparen ber om en kodsnutt, du postar en som är dålig och jag förklarar varför den är dålig. Hur kan det inte ha med ämnet att göra?
Du är hjärtligt välkommen att tycka att min kod är dålig.
Förklara gärna varför du tycker den är dålig, annars skulle jag vilja påstå att det är ditt inlägg som inte har något med ämnet att göra.

Permalänk
Medlem
Skrivet av Yxskaftet:

Trådskaparen ber om en kodsnutt

Som också var allt han bad om, inte att den skulle se ut / fungera på något speciellt sätt.

Skrivet av Yxskaftet:

du postar en som är dålig

Som du tycker är dålig.

Våra scripts uppfyller samma önskemål men är lösta på olika sätt, ingen av dem är "bra" eller "dålig". Det är varje persons egna preferens vilket script man föredrar i det här fallet.

Där sätter jag punkt på denna diskussion då det inte finns något mer vettigt att tillägga.

Permalänk
Skrivet av Scriptis:

Som du tycker är dålig.

Tycker och tycker. Kod går ju att jämföra och göra beräkningar på.
Eftersom trådskaparen vill lära sig JavaScript så kan jag i utbildningssyfte förklara det största felet med din kod.

Låt oss säga att detta är texten trådskaparen vill dölja:

<p> Lorem ipsum dolor sit amet, consectetur <strong>adipisicing</strong> elit. Atque delectus non possimus, debitis aliquam recusandae dolorem quod, labore. Rem odio aliquid optio qui neque quae dolor, deleniti enim in aspernatur. Consectetur adipisicing elit. Laboriosam "excepturi" hic labore, quasi quidem atque sapiente enim non accusantium quam consequatur incidunt exercitationem aliquid amet. Earum excepturi omnis non' nam. <a href="someurl.com">Linktext</a> </p>

Hur löser du det?

Permalänk
Medlem
Skrivet av Darkboot:

Ja... Kom med sidorna bara! jag tycker att HTML/css sitter hyfsat bra och att det kommer bli bättre om några månader/år och allt jag saknar är javascript.

För övrigt varför jag skriver det här kanske vore bra att veta. Jag vill att varje gång man klickar på en bild så ska en viss text visas och klickar man på bilden igen så försvinner texten,och som standard (när sidan först laddar) så ska texten var gömd.

Vore sjukt tacksam för att få en kod som gör det och en bra sida där man lär sig javascript så både jag och ni slipper se mina trådar om kod-förfrågningar i framtiden

Jag stötte på en sida CodeCombat där man spelar ett spel genom att skriva Javascript kod. Har inte själv provat - men det ser onekligen intressant ut!

Visa signatur

~. Citera så jag hittar tillbaka .~

Permalänk
Hedersmedlem
Skrivet av Scriptis:

Som också var allt han bad om, inte att den skulle se ut / fungera på något speciellt sätt.

Som du tycker är dålig.

Våra scripts uppfyller samma önskemål men är lösta på olika sätt, ingen av dem är "bra" eller "dålig". Det är varje persons egna preferens vilket script man föredrar i det här fallet.

Där sätter jag punkt på denna diskussion då det inte finns något mer vettigt att tillägga.

Jag måste nog säga att Yxskaftet har en poäng. Det går absolut att jämföra kod och säga ifall en kod har fördelar över en annan eller om en kod är ineffektiv, skadlig, osäker osv. Det är inte en smaksak alls.

Ta det inte personligt ifall din kod kritiseras. Du har möjlighet att lära dig från det.

För övrigt började jag lära mig Javascript på codeacademy. Dock tycker jag de inte riktigt visar hur javascript skulle användas på en hemsida utan de snarare lär en syntaxen lite. Där jag verkligen kände att jag började lära mig det var när jag började pyssla med funktionalitet till min egen hemsida. Jag testade att se om jag kunde få en en Google Maps karta. Jag skickade GPS-koordinater från min Adafruit Ultimate GPS och visade på Google Maps. Fick även tid, höjd, hastighet och lite sånt smått och gott att uppdateras med 1 hz. Rätt skoj

Permalänk
Medlem
Skrivet av Yxskaftet:

Låt oss säga att detta är texten trådskaparen vill dölja:

<p> Lorem ipsum dolor sit amet, consectetur <strong>adipisicing</strong> elit. Atque delectus non possimus, debitis aliquam recusandae dolorem quod, labore. Rem odio aliquid optio qui neque quae dolor, deleniti enim in aspernatur. Consectetur adipisicing elit. Laboriosam "excepturi" hic labore, quasi quidem atque sapiente enim non accusantium quam consequatur incidunt exercitationem aliquid amet. Earum excepturi omnis non' nam. <a href="someurl.com">Linktext</a> </p>

Hur löser du det?

"Formaterar" texten och lägger in den i en variabel (som vi kan kalla "textVar"), och byter ut:

textenVar.innerHTML = "Hejsan!";
till:
textenVar.innerHTML = textVar;

Permalänk
Medlem
Skrivet av Scriptis:

"Formaterar" texten och lägger in den i en variabel (som vi kan kalla "textVar"), och byter ut:

textenVar.innerHTML = "Hejsan!";
till:
textenVar.innerHTML = textVar;

Det är nog smidigare att som ovan ändra CSS:en. Istället för att någonstans hela tiden lagra texten!

Förövrigt går det att lösa med bara CSS - vilket enligt mig blir en snyggare lösning!

Visa signatur

~. Citera så jag hittar tillbaka .~

Permalänk
Medlem
Skrivet av Shimonu:

Jag måste nog säga att Yxskaftet har en poäng. Det går absolut att jämföra kod och säga ifall en kod har fördelar över en annan eller om en kod är ineffektiv, skadlig, osäker osv. Det är inte en smaksak alls.

Han har en poäng gällande hur man väljer att skriva ut text på skärmen. Det har sina fördelar att använda CSS style via JavaScript om det är mycket text med udda tecken som man ska gömma / ta fram, eftersom det kan ta lite extra tid att formatera texten till en JavaScript variabel.
(Sen har det säkert andra fördelar som jag inte har tänkt på just nu).

Däremot är det helt en smaksak hur man väljer att utforma själva JS koden. Jag valde t.ex. en IF-sats med en variabel som skiftar mellan värdet 1 och 0 för att ta fram / gömma texten. Det är ett sätt som jag är van och bekväm med att programmera på även i andra språk.

Om man gör lite större projekt i JavaScript så det börjar bli viktigt att optimera prestandan, då håller jag med om att koden ska vara så smart / liten som möjligt, oavsett om man tycker koden blir ful / svår att förstå. Då skulle jag även rekommendera att använda UglifyJS.

Skrivet av Shimonu:

Ta det inte personligt ifall din kod kritiseras. Du har möjlighet att lära dig från det.

Man får kritisera min kod hur mycket man vill Det jag nog blev mest lite rutten på var att Yxskaftet sa det på ett ganska otrevligt sett, vilket gjorde att jag upplevde honom som lite stötig. Men om det inte var hans mening så ber jag om ursäkt att jag missuppfattade honom

Permalänk
99:e percentilen
Skrivet av Scriptis:

"Formaterar" texten och lägger in den i en variabel (som vi kan kalla "textVar"), och byter ut:

textenVar.innerHTML = "Hejsan!";
till:
textenVar.innerHTML = textVar;

Det är just därför Yxskaftet klagar på din kod: Den går emot webbdesignens gyllene regel och grundläggande princip: att separera innehåll (HTML), presentation/utseende (CSS) och beteende (JavaScript). Istället för att skapa och ändra innehåll med JS ska det ligga i HTML-koden, vars utseende sedan modifieras genom att man ändrar dess style med JS.

Kan väl passa på att nämna att Yxskaftets kod, trots att det inte är något fel på den per se, också är dålig i detta fall, då den är närapå omöjlig att förstå för någon (TS) som aldrig skrivit JS innan.

Visa signatur

Skrivet med hjälp av Better SweClockers

Permalänk
Medlem
Skrivet av KeVVa:

Det är nog smidigare att som ovan ändra CSS:en. Istället för att någonstans hela tiden lagra texten!

Det kan nog ha sina fördelar också på mitt sätt

Man skulle kunna göra en separat JS fil där man lagrar alla variabler med all text. Man inkluderar JS filen i HTML filen, och så skriver man bara ut dem i alla tomma HTML element via JavaScript Då slipper man ha en massa text överallt som tar plats i HTML elementen när man designar webbsidan. Vad tycks om det?

Grejen är att jag har ingen stor erfarenhet av att gömma / ta bort text, men dem få gånger jag gjort det så har jag använt innerHTML, och det har funkat bra i mina situationer.

Skrivet av KeVVa:

Förövrigt går det att lösa med bara CSS - vilket enligt mig blir en snyggare lösning!

Jo det kanske är det bästa.

Permalänk
99:e percentilen
Skrivet av Scriptis:

Det kan nog ha sina fördelar också på mitt sätt

Man skulle kunna göra en separat JS fil där man lagrar alla variabler med all text. Man inkluderar JS filen i HTML filen, och så skriver man bara ut dem i alla tomma HTML element via JavaScript Då slipper man ha en massa text överallt som tar plats i HTML elementen när man designar webbsidan. Vad tycks om det?

Då gör du raka motsatsen till hur det är tänkt. Innehållet ska ligga i HTML-koden, inte i JS-koden.

Det är självklart inte så att det är förbjudet med textsträngar i JavaScript-koden – ofta vill man ju till exempel skapa strängar dynamiskt för att sedan visa dem – men statiskt innehåll ska ligga i HTML-koden.

Visa signatur

Skrivet med hjälp av Better SweClockers

Permalänk
Medlem
Skrivet av Alling:

Det är just därför Yxskaftet klagar på din kod: Den går emot webbdesignens gyllene regel och grundläggande princip: att separera innehåll (HTML), presentation/utseende (CSS) och beteende (JavaScript). Istället för att skapa och ändra innehåll med JS ska det ligga i HTML-koden, vars utseende sedan modifieras genom att man ändrar dess style med JS.

Jag sk*ter i webbdesignens gyllene regler
Jag är den typen som gillar att göra på mina egna sätt, även om andra kan tycka att det är fult

Men det beror på hur seriöst projektet är. Var med och hjälpte till att uppgradera en hemsida förut åt ett företag, då var det strikt med att följa dem gyllene reglerna. Och det förstår man, för om alla som är inblandade i projektet gör olika så blir det bara en enda stor röra.

Skrivet av Alling:

Kan väl passa på att nämna att Yxskaftets kod, trots att det inte är något fel på den per se, också är dålig i detta fall, då den är närapå omöjlig att förstå för någon (TS) som aldrig skrivit JS innan.

Glömde nämna det förut. Den är absolut inte nybörjar-vänlig. I det fallet är min kod lättare att förstå (vilket var en av poängen till hänsyn för OP också).

Permalänk
Skrivet av Scriptis:

Det kan nog ha sina fördelar också på mitt sätt

Man skulle kunna göra en separat JS fil där man lagrar alla variabler med all text. Man inkluderar JS filen i HTML filen, och så skriver man bara ut dem i alla tomma HTML element via JavaScript Då slipper man ha en massa text överallt som tar plats i HTML elementen när man designar webbsidan. Vad tycks om det?

Det är aldrig någonsin en bra lösning att ha sin html-markup i JavaScript.
Några anledningar förutom de självklara:
Tänk om användaren har JS avaktiverat, då blir sidan tom?
Hur ska sökmotorerna få tag på texten?

För övrigt var det inte min mening att verka stötig, ber om ursäkt om det uppfattades så.

Permalänk
Skrivet av Alling:

Kan väl passa på att nämna att Yxskaftets kod, trots att det inte är något fel på den per se, också är dålig i detta fall, då den är närapå omöjlig att förstå för någon (TS) som aldrig skrivit JS innan.

Är inte med på varför den skulle vara omöjlig att förstå? För att if-satsen är på en rad?

(function() { document.getElementById('trigger').onclick = function() { var target = document.getElementById('target'); if(target.style.display === 'none') { target.style.display = 'block'; } else { target.style.display = 'none'; } } })();

Permalänk
Medlem
Skrivet av Scriptis:

Jag sk*ter i webbdesignens gyllene regler
Jag är den typen som gillar att göra på mina egna sätt, även om andra kan tycka att det är fult

Men det beror på hur seriöst projektet är. Var med och hjälpte till att uppgradera en hemsida förut åt ett företag, då var det strikt med att följa dem gyllene reglerna. Och det förstår man, för om alla som är inblandade i projektet gör olika så blir det bara en enda stor röra.

Glömde nämna det förut. Den är absolut inte nybörjar-vänlig. I det fallet är min kod lättare att förstå (vilket var en av poängen till hänsyn för OP också).

Du störde dig tydligen på saklig kritik som du fick på din kod och hur du utformade den.

Som andra påpekade så finns det utrymme för dig att ta lärdom och få lite nya perspektiv.
Istället så envisas du och ska till varje pris ha sista ordet och på köpet vara lite dryg i dina svar.
Kan aldrig vara ett vettigt sätt att resonera.

Förstår att din manlighet fick en törn, men sådan får man ta.

Jag tar varje tillfälle att lära mig något nytt, jag kanske inte gillar alla gånger få kritik om min kod, men man får ta det med en nypa
salt och se var man kan förbättra sig eller lära något nytt.

Att du sedan som du säger "Sk*iter" i gyllene regler och annat visar bara på hur ditt resonemang går, och att du inte är mogen för att ta in något nytt och lära.

Och någon med ett stängt synsätt och envisas med att lära ut felaktig metodik och praxis till nybörjare ska definitivt hålla det för sig själv tills man öppnat ögonen en aning och ser hur saker och ting går till ute i verkligheten.

Vill du trots allt bidra med dina visdomar så gör det med rätt tänk och den praxis som man bör lära ut.
Och får man kritik kan man vara lite ödmjuk.

Tack för mig.

Visa signatur

Fractal Design Arc Svart | MSI Z68A-GD55 G3 REV B3 | Intel® Core i7 2600K, 3.4GHz, 8MB | Corsair 16GB (4x4096MB) CL9 1600Mhz VENGEANCE LP | MSI GeForce GTX 670 | Phanteks PH-TC14PE CPU Cooler (vit) | Corsair Power Supply 650W TX M, Modular, ATX, PS/2 | SSD (okänd tillverkare) + 2 äldre SATA2 diskar på 750 Gb, 350 gb. | OS: Microsoft Windows 10 home.

Permalänk
Medlem

Gick en 7.5 hp högskolekurs i det, och då jag tidigare har hållt på med vanlig programmering så var det relativt lätt att lära sig. Vi gick igenom saker som databashantering, DOM och mycket annat, och det hela slutade med att jag gjorde ett Breakout spel med lite musik etc som spelade i bakgrunden. Kan inte säga att det var speciellt svårt, då det har influenser från C och Python.
Kursen fick mig att nå nånstans mellan 2 och 3 tusen rader av dom gylldene 10k, men jag fann det roligt nog för att avsluta dom 10 tusen raderna så fort jag har tid över

Kan verkligen rekommendera BTH's kurs i JavaScript på distans.