Permalänk
Medlem

Fråga om Javascript

Se följande kod:

var a = getElementById('MyButton'); a.onclick = function () { alert(''Hej'); }

Detta är från en kurs i HTML5 från siten Pluralsight.

Fråga 1:

Är detta ett vanligt sätt att koppla en funktion till en knapp t.ex.?

Fråga 2.

Är detta ren Javascript

Är mer en backend-programmerare som är van vid C# men försöker lära mig mer frontend.

Tycker dock att ju mer jag lär mig om Javascript och JQuery te.x. desto mer förvirrad blir jag.

Är t.ex. JQuery-funktioner numera inbyggda i (vad som räknas som) HTML5?

Visa signatur

Chassi: Fractal Design Define C || Processor: Intel i7-8700K || Grafikkort: ASUS GeForce GTX 1080Ti ROG Strix Gaming || Moderkort: Gigabyte Z370 AORUS ULTRA WIFI || Minne: Corsair Vengeance LPX DDR4 3000MHz 32 Gb || Lagring: Samsung 860 EVO 1TB SSD || PSU: Seasonic Focus+ 850W 85+ GOLD PSU || Skärm:Samsung Odyssey G9 || Windows 10

Permalänk
Medlem

jag skulle säga att det du har skrivit är vanligt Javascript. mitt tips är att du lär dig använda jquery från början. samma kod som du har skrivit skulle bli

$("#MyButton").click(function() {
alert(''Hej');
});

vilket är enklare att förstå och skriva.

Permalänk
Medlem
Skrivet av liandrin:

jag skulle säga att det du har skrivit är vanligt Javascript. mitt tips är att du lär dig använda jquery från början. samma kod som du har skrivit skulle bli

$("#MyButton").click(function() {
alert(''Hej');
});

vilket är enklare att förstå och skriva.

Grejen är den att jag har tittat en del på JQuery men läraren i videon verkade mena att detta var något man skulle göra istället för JQuery vilket gjorde mig förvirrad.

Enligt honom verkade det som om HTML5 (som då skulle inbegripa även CSS3 och Javascript) skulle göra det onödigt att ha externa ramverk som JQuery.

Om det är av intresse kan man titta på videon här. Kräver gratiskonto där man dock inte kan se övningsfiler.

Video om HTML5

Visa signatur

Chassi: Fractal Design Define C || Processor: Intel i7-8700K || Grafikkort: ASUS GeForce GTX 1080Ti ROG Strix Gaming || Moderkort: Gigabyte Z370 AORUS ULTRA WIFI || Minne: Corsair Vengeance LPX DDR4 3000MHz 32 Gb || Lagring: Samsung 860 EVO 1TB SSD || PSU: Seasonic Focus+ 850W 85+ GOLD PSU || Skärm:Samsung Odyssey G9 || Windows 10

Permalänk
Medlem

nu är jag inte så insatt i exakt vilka skillnader som finns i html5 förutom inbyggt stöd för video samt ljuduppspelning. det mest användbara i jquery istället för utan är att det är mycket snabbare att referera till olika element i html koden. CSS är en annan del som brukar särkopplas från den rena html koden är att det blir enklare att läsa koden. det finns alltid en miljon olika sätt att göra saker utan frågan är mest vad man själv tycker är enklast. i övrigt får nog någon mer insatt i ämnet gärna rätta mig men vad jag vet så behövs fortfarande jquery om man vill göra enklare saker. om du vill bygga något mer avancerat skulle jag titta på andra js framworks men för enkla applicationer fungerar jquery bra för mig.

Permalänk
Medlem

Det går att göra det mesta precis lika enkelt utan jQuery, om man inte behöver stödja väldigt gamla webbläsare. Se http://youmightnotneedjquery.com/

Permalänk
Medlem

@Larsp777:

Nej jQuery är inte inbyggt i HTML5.

Det som händer när du skriver var elem = $('#minknapp'); är att JQuery skapar upp ett javascript objekt på en prototyp av en window property (som är skapat av biblioteket).

Till skillnad från document.getElementById('minknapp') händer alltså detta:

//Ett objekt returneras, selector i detta kontext är '#minknapp' jQuery = function( selector, context ) { // The jQuery object is actually just the init constructor 'enhanced' return new jQuery.fn.init( selector, context, rootjQuery ); } //Objektet i sin tur har följande logik på sig jQuery.fn = jQuery.prototype = { constructor: jQuery, init: function( selector, context, rootjQuery ) { var match, elem, ret, doc; // Handle $(""), $(null), $(undefined), $(false) if ( !selector ) { return this; } // Handle $(DOMElement) if ( selector.nodeType ) { this.context = this[0] = selector; this.length = 1; return this; } // Handle HTML strings if ( typeof selector === "string" ) { if ( selector.charAt(0) === "<" && selector.charAt( selector.length - 1 ) === ">" && selector.length >= 3 ) { // Assume that strings that start and end with <> are HTML and skip the regex check match = [ null, selector, null ]; } else { match = rquickExpr.exec( selector ); } // Match html or make sure no context is specified for #id if ( match && (match[1] || !context) ) { // HANDLE: $(html) -> $(array) if ( match[1] ) { context = context instanceof jQuery ? context[0] : context; doc = ( context && context.nodeType ? context.ownerDocument || context : document ); // scripts is true for back-compat selector = jQuery.parseHTML( match[1], doc, true ); if ( rsingleTag.test( match[1] ) && jQuery.isPlainObject( context ) ) { this.attr.call( selector, context, true ); } return jQuery.merge( this, selector ); // HANDLE: $(#id) } else { elem = document.getElementById( match[2] ); // Check parentNode to catch when Blackberry 4.6 returns // nodes that are no longer in the document #6963 if ( elem && elem.parentNode ) { // Handle the case where IE and Opera return items // by name instead of ID if ( elem.id !== match[2] ) { return rootjQuery.find( selector ); } // Otherwise, we inject the element directly into the jQuery object this.length = 1; this[0] = elem; } this.context = document; this.selector = selector; return this; } // HANDLE: $(expr, $(...)) } else if ( !context || context.jquery ) { return ( context || rootjQuery ).find( selector ); // HANDLE: $(expr, context) // (which is just equivalent to: $(context).find(expr) } else { return this.constructor( context ).find( selector ); } // HANDLE: $(function) // Shortcut for document ready } else if ( jQuery.isFunction( selector ) ) { return rootjQuery.ready( selector ); } if ( selector.selector !== undefined ) { this.selector = selector.selector; this.context = selector.context; } return jQuery.makeArray( selector, this ); }, // Start with an empty selector selector: "", // The current version of jQuery being used jquery: "1.8.3", // The default length of a jQuery object is 0 length: 0, // The number of elements contained in the matched element set size: function() { return this.length; }, toArray: function() { return core_slice.call( this ); }, // Get the Nth element in the matched element set OR // Get the whole matched element set as a clean array get: function( num ) { return num == null ? // Return a 'clean' array this.toArray() : // Return just the object ( num < 0 ? this[ this.length + num ] : this[ num ] ); }, // Take an array of elements and push it onto the stack // (returning the new matched element set) pushStack: function( elems, name, selector ) { // Build a new jQuery matched element set var ret = jQuery.merge( this.constructor(), elems ); // Add the old object onto the stack (as a reference) ret.prevObject = this; ret.context = this.context; if ( name === "find" ) { ret.selector = this.selector + ( this.selector ? " " : "" ) + selector; } else if ( name ) { ret.selector = this.selector + "." + name + "(" + selector + ")"; } // Return the newly-formed element set return ret; }, // Execute a callback for every element in the matched set. // (You can seed the arguments with an array of args, but this is // only used internally.) each: function( callback, args ) { return jQuery.each( this, callback, args ); }, ready: function( fn ) { // Add the callback jQuery.ready.promise().done( fn ); return this; }, eq: function( i ) { i = +i; return i === -1 ? this.slice( i ) : this.slice( i, i + 1 ); }, first: function() { return this.eq( 0 ); }, last: function() { return this.eq( -1 ); }, slice: function() { return this.pushStack( core_slice.apply( this, arguments ), "slice", core_slice.call(arguments).join(",") ); }, map: function( callback ) { return this.pushStack( jQuery.map(this, function( elem, i ) { return callback.call( elem, i, elem ); })); }, end: function() { return this.prevObject || this.constructor(null); }, // For internal use only. // Behaves like an Array's method, not like a jQuery method. push: core_push, sort: [].sort, splice: [].splice };

jQuery ÄR javascript, det jQuery gör är att wrappa vanlig javascript för att göra det enklare för gemene man att programmera i det.

Är jQuery lika snabbt som vanlig javascript? Nej.
Kan man göra mer i jQuery med mindre kod? Ja. Men inte bakom scenerna (se exempel ovan).

Innan du börjar använda diverse javascript-bibliotek (finns hur många som helst) skulle jag tipsa om att lära sig grunderna i javascript först. Detta ger en enorm kunskapsbas att stå på när du sedan går på ett javascript-ramverk eller bibliotek.

Permalänk
Medlem
Skrivet av debben:

@Larsp777:

Nej jQuery är inte inbyggt i HTML5.

Nej, det var inte det jag menade. Om jag förstod han i videon så menade han att CSS3 och nya funktioner i Javascript skulle räknas in i begreppet HTML5.

Tack dock för klargörandet. Känns som att Javascript är ganska enkelt språk vid en första anblick men inte när man går mer på djupet.

Visa signatur

Chassi: Fractal Design Define C || Processor: Intel i7-8700K || Grafikkort: ASUS GeForce GTX 1080Ti ROG Strix Gaming || Moderkort: Gigabyte Z370 AORUS ULTRA WIFI || Minne: Corsair Vengeance LPX DDR4 3000MHz 32 Gb || Lagring: Samsung 860 EVO 1TB SSD || PSU: Seasonic Focus+ 850W 85+ GOLD PSU || Skärm:Samsung Odyssey G9 || Windows 10

Permalänk
Medlem
Skrivet av Larsp777:

Nej, det var inte det jag menade. Om jag förstod han i videon så menade han att CSS3 och nya funktioner i Javascript skulle räknas in i begreppet HTML5.

Tack dock för klargörandet. Känns som att Javascript är ganska enkelt språk vid en första anblick men inte när man går mer på djupet.

Inte direkt. ECMAscript är inte en del av HTML5. Däremot finns det vissa API:er som utnyttjar javascript.
Likväl, är dessa API:er en del av HTML5. Men enligt min mening, är inte javascript en del av det (då ECMAscript har en egen standard att gå efter).

Intressant att du tar upp det, inte hört någon påpeka detta innan och det verkar som det finns skilda meningar på nätet.

Kom över denna länk som förklarar det bra: HTML5 APIs

Däremot, om man breddar begreppet ännu mer till t.ex. webbutveckling är javascript en del av det. Trots att du inte nödvändigtvis behöver använda javascript för webbutveckling.

Hoppas det klargjorde lite mer!

//debben

Permalänk
Medlem
Skrivet av Larsp777:

Se följande kod:

var a = getElementById('MyButton'); a.onclick = function () { alert(''Hej'); }

Detta är från en kurs i HTML5 från siten Pluralsight.

Fråga 1:

Är detta ett vanligt sätt att koppla en funktion till en knapp t.ex.?

Fråga 2.

Är detta ren Javascript

Är mer en backend-programmerare som är van vid C# men försöker lära mig mer frontend.

Tycker dock att ju mer jag lär mig om Javascript och JQuery te.x. desto mer förvirrad blir jag.

Är t.ex. JQuery-funktioner numera inbyggda i (vad som räknas som) HTML5?

1. Nej, det är vanligare att man kör:

a.addEventListener('click', callback);

2. Ja, båda är ren JS. Förutom att JS har sina speciella betenden så är en stor del av problem just inkonsistens i hur det är implementerad. T ex klarar vissa äldre IE inte av ovan kod (addEventListener), utan du blir tvungen att använda dig av fallback kod om du vill stödja dessa:

a.attachEvent('onclick', callback);

För att göra det ytterligare lite mer komplicerat skickas event objektet automatiskt in i första koden medan den i den andra hamnar som property på window objektet.

var a = document.getElementById('element'); function callback (event) { event.preventDefault(); // 1. Fungerar inte i attachEvent för event finns inte då per default, 2. även om du skulle referera till window.event så skulle det fortfarande inte fungera då dessa IE versioner pga ovan nämnda olika implementeringar (returnValue istället för preventDefault()). };

Skrivet av liandrin:

jag skulle säga att det du har skrivit är vanligt Javascript. mitt tips är att du lär dig använda jquery från början. samma kod som du har skrivit skulle bli

$("#MyButton").click(function() {
alert(''Hej');
});

vilket är enklare att förstå och skriva.

.click() är föråldrad, $element.on('click', callback); är motsvarigheten.

Skrivet av Larsp777:

Grejen är den att jag har tittat en del på JQuery men läraren i videon verkade mena att detta var något man skulle göra istället för JQuery vilket gjorde mig förvirrad.

Enligt honom verkade det som om HTML5 (som då skulle inbegripa även CSS3 och Javascript) skulle göra det onödigt att ha externa ramverk som JQuery.

Om det är av intresse kan man titta på videon här. Kräver gratiskonto där man dock inte kan se övningsfiler.

Video om HTML5

Skrivet av Larsp777:

Nej, det var inte det jag menade. Om jag förstod han i videon så menade han att CSS3 och nya funktioner i Javascript skulle räknas in i begreppet HTML5.

Tack dock för klargörandet. Känns som att Javascript är ganska enkelt språk vid en första anblick men inte när man går mer på djupet.

Kanske om 10 år. Om du ser någon som helst anledning att skriva fallback för äldre JS implementeringar, finns användning av endast HTML5 inte på kartan alls. HTML5 bidrar dock med en del vanliga nya funktioner, bl a pattern="regex" för validering, men som sagt, inget JS inte kan göra. JS är mkt mer flexibelt, även om HTML5 lägger till mer och mer funktioner kommer du fortfarande att ha problem med varierande stöd.

Skulle även jag rekommendera att lära dig grunderna i JS, oavsett om du vill använda andra bibliotek/ramverk senare.

Permalänk
Medlem

Tack alla!

Har mest programmerat i C# och ASP.NET.

Försöker lära mig mer om webbutveckling men ju mer jag lär mig desto mer komplicerat tycks det bli

Lite svårt att veta var man ska lägga tid. Dock tycks det vara en bra idé att lära sig så mycket Javascript man kan.

Visa signatur

Chassi: Fractal Design Define C || Processor: Intel i7-8700K || Grafikkort: ASUS GeForce GTX 1080Ti ROG Strix Gaming || Moderkort: Gigabyte Z370 AORUS ULTRA WIFI || Minne: Corsair Vengeance LPX DDR4 3000MHz 32 Gb || Lagring: Samsung 860 EVO 1TB SSD || PSU: Seasonic Focus+ 850W 85+ GOLD PSU || Skärm:Samsung Odyssey G9 || Windows 10

Permalänk
Medlem
Skrivet av Larsp777:

Tack alla!

Har mest programmerat i C# och ASP.NET.

Försöker lära mig mer om webbutveckling men ju mer jag lär mig desto mer komplicerat tycks det bli

Lite svårt att veta var man ska lägga tid. Dock tycks det vara en bra idé att lära sig så mycket Javascript man kan.

https://youtu.be/pB0WvcxTbCA
Den håller jag på och betar av. Han går igenom vad man behöver veta inom webbutveckling och antecknar det i en tankekarta. Då kan man följa hans videor på det och arbeta i egen takt.
Den kanske ger dig någon uppfattning om vart du ska lägga din tid.

Skickades från m.sweclockers.com

Permalänk
Medlem
Skrivet av SebbeL:

https://youtu.be/pB0WvcxTbCA
Den håller jag på och betar av. Han går igenom vad man behöver veta inom webbutveckling och antecknar det i en tankekarta. Då kan man följa hans videor på det och arbeta i egen takt.
Den kanske ger dig någon uppfattning om vart du ska lägga din tid.

Skickades från m.sweclockers.com

Låter bra! Tack!

Visa signatur

Chassi: Fractal Design Define C || Processor: Intel i7-8700K || Grafikkort: ASUS GeForce GTX 1080Ti ROG Strix Gaming || Moderkort: Gigabyte Z370 AORUS ULTRA WIFI || Minne: Corsair Vengeance LPX DDR4 3000MHz 32 Gb || Lagring: Samsung 860 EVO 1TB SSD || PSU: Seasonic Focus+ 850W 85+ GOLD PSU || Skärm:Samsung Odyssey G9 || Windows 10

Permalänk
Skrivet av Larsp777:

Är detta ren Javascript

Är läraren riktigt nitisk skulle hen kunna hävda att det inte är "ren" javascript iom att det använder DOM-api:t. Men då är hen verkligen nitisk.

Skrivet av kronwalled:

Skulle även jag rekommendera att lära dig grunderna i JS, oavsett om du vill använda andra bibliotek/ramverk senare.

+1 JS kan vara förvirrande om man inte lär sig hur closures fungerar innan man börjar programmera på allvar.