{"id":19410,"date":"2021-07-05T18:37:12","date_gmt":"2021-07-05T16:37:12","guid":{"rendered":"https:\/\/www.software-developer-india.com\/hva-er-vanilla-javascript\/"},"modified":"2021-07-05T18:37:12","modified_gmt":"2021-07-05T16:37:12","slug":"hva-er-vanilla-javascript","status":"publish","type":"post","link":"https:\/\/www.software-developer-india.com\/no\/hva-er-vanilla-javascript\/","title":{"rendered":"Hva er Vanilla JavaScript?"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Hva er Vanilla JavaScript?<\/h2>\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><a href=\"https:\/\/www.software-developer-india.com\/wp-content\/uploads\/2021\/07\/Web-Development.jpg\"><img loading=\"lazy\" decoding=\"async\" width=\"575\" height=\"400\" src=\"https:\/\/www.software-developer-india.com\/wp-content\/uploads\/2021\/07\/Web-Development.jpg\" alt=\"\" class=\"wp-image-19364\" srcset=\"https:\/\/www.software-developer-india.com\/wp-content\/uploads\/2021\/07\/Web-Development.jpg 575w, https:\/\/www.software-developer-india.com\/wp-content\/uploads\/2021\/07\/Web-Development-300x209.jpg 300w\" sizes=\"auto, (max-width: 575px) 100vw, 575px\" \/><\/a><\/figure><\/div>\n\n<p>Da nettsteder f\u00f8rst ble til, var de statiske, og det var greit den gangen. Og med introduksjonen av Vanilla Javascript endret det m\u00e5ten nettsteder begynte \u00e5 se ut og f\u00f8les p\u00e5. Nettsteder ble revolusjonerende, interaktive og dynamiske. <\/p>\n\n<p>Vanilla JS er bare vanlig JS, s\u00e5 det er et tekstbasert programmeringsspr\u00e5k b\u00e5de p\u00e5 serversiden og klientsiden. Rammeverket ble opprettet i 2012 av Eric Wastl, og selv om det ikke var han som laget ordet, populariserte nettstedet hans det. S\u00e5 kort sagt, Vanilla Js er ganske enkelt Javascript uten ytterligere rammeverk eller biblioteker. <\/p>\n\n<p>S\u00e5 kom jQuery, et bibliotek med verkt\u00f8y laget med Javascript, til. jQuery var lett og veldig enkel \u00e5 bruke, da det bidro til \u00e5 skape komplekse funksjoner med minimal koding.<\/p>\n\n<p>Du finner Vanilla JS i<strong> Facebook, Google, YouTube, Yahoo, Wikipedia, Windows Live, Twitter, LinkedIn, eBay, Microsoft, Apple, Pinterest, PayPal, Reddit, Netflix, Stack Overflow<\/strong> og en rekke andre popul\u00e6re nettsteder og plattformer. <\/p>\n\n<p>Dermed er alle Javascript-rammer og biblioteker basert p\u00e5 dens vaniljekjerne. Alle de forskjellige rammene er ofte basert p\u00e5 det ene settet med Javascript-prinsippet eller det andre. Ofte bruker utviklere vanlig Javascript uten \u00e5 bruke ekstra JS-rammer eller biblioteker.<\/p>\n\n<p>Interessant, Vanilla JS-rammeverk minner oss nesten om vaniljeis, fordi rammeverket er umodifisert, og du bruker grunnproduktet som det er, uten \u00e5 legge noe til det. <\/p>\n\n<p>Alt du gj\u00f8r er \u00e5 bruke rammeverket med de mest grunnleggende API-funksjonene til JS-tolk. Naturligvis vil ethvert nettsted som ikke bruker et rammeverk, m\u00e5tte bruke VanillaJs automatisk, og selv om de ikke bruker et rammeverk, bruker de visse funksjoner og algoritmer til VanillaJS. Rammeverket gir deg ogs\u00e5 full frihet til \u00e5 implementere hvilken arkitektur du vil. Du kan ogs\u00e5 integrere dette med din forretningslogikk, DOM-manipuleringslogikk og andre verkt\u00f8y du vil koble til. <\/p>\n\n<p>Hver utvikler skal ha full kunnskap om ren Javascript, og enhver utvikler du ansetter, b\u00f8r ha kunnskap om Vanilla JS, spesielt hvis han hovedsakelig jobber i Javascript-\u00f8kosystemet.<\/p>\n\n<p>Bilde: Sammenlign<\/p>\n\n<h3 class=\"wp-block-heading\"><strong>Her ser du p\u00e5 Vanilla JS med et par andre spr\u00e5k <\/strong><\/h3>\n\n<p><strong>Vanilla JS Vs React: n\u00e5r du kan bruke hva<\/strong><\/p>\n\n<p>Vanilla JS hjelper deg med \u00e5 bygge kraftige applikasjoner p\u00e5 tvers av plattformer og s\u00e5 videre React, det er et av de mest popul\u00e6re JS-bibliotekene, takket v\u00e6re dets fleksibilitet og ytelseskvalitet. React kan bryte ned brukergrensesnittet i mindre, gjenbrukbare komponenter som kan flyttes mot hverandre. Og det er denne funksjonen som fungerer som en vinnerkant i forhold til VanillaJS. For JS blir det veldig vanskelig \u00e5 opprettholde koden hvis applikasjonen er stor. I slike tilfeller m\u00e5 brukergrensesnittet oppdateres regelmessig. <\/p>\n\n<p>Og det er ikke alt. For \u00e5 endre UI-elementet, m\u00e5 du f\u00f8rst finne elementet i DOM, og f\u00f8rst deretter oppdatere det. Dette kan v\u00e6re kjedelig n\u00e5r du bare m\u00e5 endre et enkelt element. React har en virtuell DOM, og hjelper med \u00e5 omg\u00e5 den manuelle oppgaven. S\u00e5 kort fortalt, med Vanilla JS, kan det v\u00e6re vanskelig og m\u00f8ysommelig \u00e5 holde brukergrensesnittet synkronisert. <\/p>\n\n<h3 class=\"wp-block-heading\"><strong>Vanilje JS Vs jQuery<\/strong><\/h3>\n\n<p>Som forklart tidligere, med utviklingen av Vanilla JS, kunne utviklere lage dynamiske nettsteder. Da jQuery kom inn, kom det ogs\u00e5 en rekke verkt\u00f8y ved hjelp av Javascript. jQuery er lett og med sitt brukervennlige JS-bibliotek er det enkelt \u00e5 lage komplekse funksjoner med f\u00e5 kodelinjer. Det forenkler mange ting for utvikleren som \u00e5 h\u00e5ndtere JSON-data fra serveren, legge til animasjonseffekter som skjul, vis osv., Hjelper til med CSS-manipulering, komme med AJAX-foresp\u00f8rsler og mer. <\/p>\n\n<p>Med jQuery kan mange ting v\u00e6re lettere for nybegynnerutvikleren, men det er ingen regel som s\u00e5dan som sier hvor du skal bruke Vanilla JS og hvor du skal bruke jQuery. Imidlertid er iQuery en enorm tidsbesparelse fordi den kommer med flere forh\u00e5ndsskrevne funksjoner som bare n\u00f8dvendige endringer m\u00e5 gj\u00f8res for.<\/p>\n\n<p>Og jQuery krever bare mindre koding, men for Javascript kreves det en lang linje med koding, kanskje til og med spaghettikoder. For JS er det ikke behov for flere plugins, men de trenger ikke \u00e5 legge til flere plugins ogs\u00e5. For jQuery m\u00e5 skriptkoblingen til biblioteket v\u00e6re inkludert i hodetiketten p\u00e5 websiden. <\/p>\n\n<p>Hvis du ser p\u00e5 kompatibilitet med flere nettlesere, vil sannsynligvis nettleserrelaterte feil skje med JS. Men med jQuery er dette ikke et problem, fordi det fungerer med alle slags nettlesere; det vil ikke v\u00e6re noen kompatibilitetsproblemer. <\/p>\n\n<p>Egentlig er det ingen spesiell regel i bruk av Javascript og jQuery. Men utviklere sier at jQuery er bedre for DOM-manipulasjon, sammenlignet med Javascript. Imidlertid er pluss poenget med Vanilla JS mye raskere enn jQuery. Allikevel kan nybegynnerutviklere synes det er vanskelig \u00e5 skrive komplekse funksjoner med Vanilla JS. <\/p>\n\n<p>For JS m\u00e5 all koding gj\u00f8res fra bunnen av, og nybegynnere kan finne det vanskelig og tidkrevende. jQuery har derimot flere forh\u00e5ndsskrevne funksjoner, og n\u00e5r n\u00f8dvendige modifikasjoner skal gj\u00f8res, kan det definitivt v\u00e6re tidsbesparende. <\/p>\n\n<p>N\u00e5r du sammenligner de to, er Vanilla JS mye raskere enn jQuery, og avhengig av operasjonen, kan den til og med v\u00e6re 10 til 25 ganger raskere. <\/p>\n\n<h3 class=\"wp-block-heading\"><strong>Vanilla JS Vs Angular JS<\/strong><\/h3>\n\n<p>Angular JS er et verkt\u00f8y i Javascript MVC, mens Vanilla kommer inn under Javascript UI Libraries. Noen utviklere sier at Vanilla JS er overlegen n\u00e5r du vurderer den opprinnelige belastningen og ytelsen, s\u00e5 hvis du \u00f8nsker \u00e5 utvikle en app med ytelsesfaktoren som prioritet, kan du velge Vanilla JS. <\/p>\n\n<h3 class=\"wp-block-heading\"><strong>Konklusjon<\/strong><\/h3>\n\n<p>Vanilla JS er flott, og lar deg til og med lage dynamiske websider. Men n\u00e5r du leter etter et stort og komplisert program med komplekse funksjoner, og har tusenvis av sider, er det bedre \u00e5 g\u00e5 etter moderne Javascript-rammer. <\/p>\n\n<p>S\u00e5 igjen, vil valget du tar v\u00e6re avhengig av kravet. Hvis du har tenkt \u00e5 bli en frontend eller en full stack webutvikler, er det viktig at du vet om Vanilla JS. Grunnlaget for alle rammer vil alltid v\u00e6re JS, biblioteker og rammer vil komme og g\u00e5, men JS er kommet for \u00e5 bli. <\/p>\n\n<p>Ferdighet med Vanilla JS vil alltid gj\u00f8re det lettere \u00e5 bytte til jQuery, selv om bryteren kanskje ikke er veldig jevn. <\/p>\n\n<p>Interessante lenker:<\/p>\n\n<p><a href=\"https:\/\/stackoverflow.com\/questions\/20435653\/what-is-vanillajs\">Mer informasjon om Vanilla JS<\/a><\/p>\n\n<p><a href=\"http:\/\/vanilla-js.com\/\">Hvorfor Vanilla JS?<\/a><\/p>\n\n<p>Bilder: Canva<\/p>\n\n<hr class=\"wp-block-separator\"\/>\n\n<div class=\"wp-block-image\"><figure class=\"alignleft\"><img decoding=\"async\" src=\"https:\/\/www.software-developer-india.com\/wp-content\/uploads\/2015\/02\/1.jpg\" alt=\"\" class=\"wp-image-229\"\/><\/figure><\/div>\n\n<p>Forfatteren: Sascha Thattil jobber p\u00e5 Software-Developer-India.com som er en del av YUHIRO Group. YUHIRO er en tysk-indisk bedrift som tilbyr programmerere til IT-selskaper, byr\u00e5er og IT-avdelinger.<\/p>\n<div class=\"shariff\"><ul class=\"shariff-buttons theme-default orientation-horizontal buttonsize-medium\"><li class=\"shariff-button twitter shariff-nocustomcolor\" style=\"background-color:#595959\"><a href=\"https:\/\/twitter.com\/share?url=https%3A%2F%2Fwww.software-developer-india.com%2Fno%2Fhva-er-vanilla-javascript%2F&text=Hva%20er%20Vanilla%20JavaScript%3F\" title=\"Share on X\" aria-label=\"Share on X\" role=\"button\" rel=\"noopener nofollow\" class=\"shariff-link\" style=\"; background-color:#000; color:#fff\" target=\"_blank\"><span class=\"shariff-icon\" style=\"\"><svg width=\"32px\" height=\"20px\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 24 24\"><path fill=\"#000\" d=\"M14.258 10.152L23.176 0h-2.113l-7.747 8.813L7.133 0H0l9.352 13.328L0 23.973h2.113l8.176-9.309 6.531 9.309h7.133zm-2.895 3.293l-.949-1.328L2.875 1.56h3.246l6.086 8.523.945 1.328 7.91 11.078h-3.246zm0 0\"\/><\/svg><\/span><span class=\"shariff-text\">share<\/span>&nbsp;<\/a><\/li><li class=\"shariff-button facebook shariff-nocustomcolor\" style=\"background-color:#4273c8\"><a href=\"https:\/\/www.facebook.com\/sharer\/sharer.php?u=https%3A%2F%2Fwww.software-developer-india.com%2Fno%2Fhva-er-vanilla-javascript%2F\" title=\"Share on Facebook\" aria-label=\"Share on Facebook\" role=\"button\" rel=\"nofollow\" class=\"shariff-link\" style=\"; background-color:#3b5998; color:#fff\" target=\"_blank\"><span class=\"shariff-icon\" style=\"\"><svg width=\"32px\" height=\"20px\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 18 32\"><path fill=\"#3b5998\" d=\"M17.1 0.2v4.7h-2.8q-1.5 0-2.1 0.6t-0.5 1.9v3.4h5.2l-0.7 5.3h-4.5v13.6h-5.5v-13.6h-4.5v-5.3h4.5v-3.9q0-3.3 1.9-5.2t5-1.8q2.6 0 4.1 0.2z\"\/><\/svg><\/span><span class=\"shariff-text\">share<\/span>&nbsp;<\/a><\/li><li class=\"shariff-button linkedin shariff-nocustomcolor\" style=\"background-color:#1488bf\"><a href=\"https:\/\/www.linkedin.com\/sharing\/share-offsite\/?url=https%3A%2F%2Fwww.software-developer-india.com%2Fno%2Fhva-er-vanilla-javascript%2F\" title=\"Share on LinkedIn\" aria-label=\"Share on LinkedIn\" role=\"button\" rel=\"noopener nofollow\" class=\"shariff-link\" style=\"; background-color:#0077b5; color:#fff\" target=\"_blank\"><span class=\"shariff-icon\" style=\"\"><svg width=\"32px\" height=\"20px\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 27 32\"><path fill=\"#0077b5\" d=\"M6.2 11.2v17.7h-5.9v-17.7h5.9zM6.6 5.7q0 1.3-0.9 2.2t-2.4 0.9h0q-1.5 0-2.4-0.9t-0.9-2.2 0.9-2.2 2.4-0.9 2.4 0.9 0.9 2.2zM27.4 18.7v10.1h-5.9v-9.5q0-1.9-0.7-2.9t-2.3-1.1q-1.1 0-1.9 0.6t-1.2 1.5q-0.2 0.5-0.2 1.4v9.9h-5.9q0-7.1 0-11.6t0-5.3l0-0.9h5.9v2.6h0q0.4-0.6 0.7-1t1-0.9 1.6-0.8 2-0.3q3 0 4.9 2t1.9 6z\"\/><\/svg><\/span><span class=\"shariff-text\">share<\/span>&nbsp;<\/a><\/li><li class=\"shariff-button xing shariff-nocustomcolor\" style=\"background-color:#29888a\"><a href=\"https:\/\/www.xing.com\/spi\/shares\/new?url=https%3A%2F%2Fwww.software-developer-india.com%2Fno%2Fhva-er-vanilla-javascript%2F\" title=\"Share on XING\" aria-label=\"Share on XING\" role=\"button\" rel=\"noopener nofollow\" class=\"shariff-link\" style=\"; background-color:#126567; color:#fff\" target=\"_blank\"><span class=\"shariff-icon\" style=\"\"><svg width=\"32px\" height=\"20px\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 25 32\"><path fill=\"#126567\" d=\"M10.7 11.9q-0.2 0.3-4.6 8.2-0.5 0.8-1.2 0.8h-4.3q-0.4 0-0.5-0.3t0-0.6l4.5-8q0 0 0 0l-2.9-5q-0.2-0.4 0-0.7 0.2-0.3 0.5-0.3h4.3q0.7 0 1.2 0.8zM25.1 0.4q0.2 0.3 0 0.7l-9.4 16.7 6 11q0.2 0.4 0 0.6-0.2 0.3-0.6 0.3h-4.3q-0.7 0-1.2-0.8l-6-11.1q0.3-0.6 9.5-16.8 0.4-0.8 1.2-0.8h4.3q0.4 0 0.5 0.3z\"\/><\/svg><\/span><span class=\"shariff-text\">share<\/span>&nbsp;<\/a><\/li><\/ul><\/div>","protected":false},"excerpt":{"rendered":"<p>Hva er Vanilla JavaScript? Da nettsteder f\u00f8rst ble til, var de statiske, og det var greit den gangen. Og med introduksjonen av Vanilla Javascript endret &#8230; <a title=\"Hva er Vanilla JavaScript?\" class=\"read-more\" href=\"https:\/\/www.software-developer-india.com\/no\/hva-er-vanilla-javascript\/\" aria-label=\"Read more about Hva er Vanilla JavaScript?\">Les mer<\/a><\/p>\n","protected":false},"author":1,"featured_media":19371,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[224,193],"tags":[],"class_list":["post-19410","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-internett","category-utvikling"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.software-developer-india.com\/no\/wp-json\/wp\/v2\/posts\/19410","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.software-developer-india.com\/no\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.software-developer-india.com\/no\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.software-developer-india.com\/no\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.software-developer-india.com\/no\/wp-json\/wp\/v2\/comments?post=19410"}],"version-history":[{"count":1,"href":"https:\/\/www.software-developer-india.com\/no\/wp-json\/wp\/v2\/posts\/19410\/revisions"}],"predecessor-version":[{"id":19411,"href":"https:\/\/www.software-developer-india.com\/no\/wp-json\/wp\/v2\/posts\/19410\/revisions\/19411"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.software-developer-india.com\/no\/wp-json\/wp\/v2\/media\/19371"}],"wp:attachment":[{"href":"https:\/\/www.software-developer-india.com\/no\/wp-json\/wp\/v2\/media?parent=19410"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.software-developer-india.com\/no\/wp-json\/wp\/v2\/categories?post=19410"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.software-developer-india.com\/no\/wp-json\/wp\/v2\/tags?post=19410"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}