Logoer for HTML5, css3, javascript og jQuery

Implementer jQuery og JavaScript i wordpress og almindlige websites

Har i det sidste stykke tid hjulpet en veninde med et WordPress side, og vi blev lidt stuck i JavaScript og jQuery, så tænkte jeg lige ville lave en “lille guide” til hvordan man inkludere dem i websites og WordPress sider.

Men før vi går i gang, så lad os gøre det klart at Java og JavaScript er ikke det samme. Jeg høre det meget ofte sagt hos nyere webdesignere der ikke helt har sat sig ind i hvordan det fungere.

JavaScript er et script sprog, bruges inde i din browser og fungere ikke alene.

Java er et programmerings sprog, udviklet af Sun og bl.a. brugt til steder som Nem ID osv..

Kan dog godt forstå misforståelserne de har meget ens navne, deres syntax ligner lidt hinanden og JavaScript bliver kaldt et “JavaScript is the programming language of HTML and the Web.” på hjemmesider som W3Schools.

Men denne post handler kun om JavaScript. Så nu når dette er ude af verden lad os fortsætte.

Javascript er efter min mening helt klart det sprog man skal lære efter HTML og CSS, fordi man kan lave mange fede ting med det.

HTML5 og CSS3 har ganske vidst kommet i langt i deres funktioner og overtager mere-og-mere af hvad der tradionelt blev programmeret med Javascript. Hvilket bare gør det meget nemmere at lave hjemmesider.

Det er dog ikke helt, hvor det har overtaget for JavaScript, så jeg vil her vise hvordan du kan inkludere JavaScript, jQuery i en website og en WordPress site.

Det fede ved Javascript er at det er local-side, frem for serverside, hvilket vil side koden ligger på hjemmesiden snakket dynamisk brugerens computer, således at de ændringer der skal ske kan ske løbende når en function bliver triggered, uden at siden skal kommunikere med serveren eller re-loade siden, som ved PHP. Hvilket gør det bare er hurtigere. Det har også et bredere arbejds område end f.eks. Flash, fordi det ikke kræver et plugin at fungere og det er som udgangspunkt lettere for computeren af håndtere, fordi det ikke skal loade hele elementet på en gang.

Med alt det gode fra JavaScript er der en forfærdelig masse at lære omkring det. Hvis det er første gang man kaster sig over JavaScript, vil jeg anbefalde man stikker hovedet ned i W3schools online øvelser på http://www.w3schools.com/js/.

Det er gratis og indeholder en masse gode grundlæggende øvelser i bl.a. JavaScript (og er et glimerende bibliotek hvis man lige pludselig glemmer hvordan noget fungere).

For at gøre det endnu nemmere er der med tiden dukket JavaScript biblioteker op, som f.eks. jQuery. Der gør det at lave simple funktioner på websites meget lettere og os som webdesignere.

Sidenote Mange gør den fejl at skille JavaScript og jQuery ad som to forskellige sprog. Det er det ikke. jQuery er i pricippet et JavaScript-dokument med en masse funktioner som man kalder gennem jQuerys egne customised syntax.

Hvordan indsætter jeg JavaScript og jQuery i min Website

Du kan indsætte JavaScript i din normale website 2 forskellige måder. Du kan gøre det internt eller via et extern javascript dokument (.js).

JavaScript internt i  en website

Det er meget simpelt, du placere din Javascript kode i dit HTML dokument i et script tag (som set herunder). Du kan vælge at placere den i headeren eller din body, afhængig af hvad for funktioner du har. Hvis de bliver kaldt i dokumentet, vil jeg anbefalde du pacere din JavaScript i headeren, da den så loades før resten af siden og derfor at klar til at blive refereret. Hvis du har en JavaScript kode vil jeg dog ikke anbefalde du placere den i toppen, men muligvis længere ned på siden (i din Footer måske) eller i et externt dokument.

<script>
    /*din JavaScript*/
</script>

JavaScript og jQuery externt i  en website

Han man en masse JavaScript kan det være en god ide at placere den i et externt JavaScript dokument, kaldet .js . Dette er også den mest professionelle løsning, siden holder koden mere “ren” ved at separerer den fra HTMLen, derved gøre det nemmere for andre at overtage den og gøre siden hurtigere.

Hvis man vil inkludere jQuery i sin hjemmeside skal man også det gennem det extern dokument, der hentes fra jQuery’s hjemmeside. Det er jo som sagt bare et pre-skreven “JavaScript”-bibliotek man kobler på sin website (det kan findes på deres hjemmeside her https://jquery.com/download/ . Til din endelige hjemmeside anbefales det at du bruge deres compressed version).

Måden man inkludere et externt JavaScript eller jQuery dokument er igen gennem et script tag, denne gang med en src reference til JavaScrip dokumentet man ønsker at inkludere (se herunder):

<head>
    <script src=”mitJavaScriptDoc.js”></script>
<head>

Man kan også inkluder jQuery gennem et link til deres nyeste opdaterede jQuery via CDN (Content Delivery Network), fra henholdsvis google eller microsoft, som kan være en fordel da det kan loade hurtigere gennem de services. Jeg vil dog stadig anbefalde at man downloader en jQuery til sin even hjemmeside, i tilfælde af noget går galt, som eks. en server der går ned eller et link der ikke virker mere osv.

Gennem Google CDN (links fra 15 sep 2016):

<head>
    <script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js”></script>
</head>

Gennem Microsoft CDN (links fra 15 sep 2016):

<head>
    <script src=”http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js”></script>
</head>

Hvordan indsætter jeg det i min Wordpress side

Javascript kan indsættes som de altid har gjordt (se overover), men der er nogle smartere måder at gøre det på som jeg vil vise herunder. Derudover kommer nyere udgaver at WordPress kommer jQuery inkluderet i pakken. Så man behøver ikke inkludere det. Det kan faktisk være en fordel at ikke at inkludere jQuery, da det kan gå ind og modarbejde enkelte plugins og funktioner så siden ikke virker korrekt.

En korrekte måde at inkludere JavaScript externt i en WordPress side

Når du laver dit WordPress theme inkludere man ofte flere JavaScript og CSS filer. Man kan selvfølgelig inkludere den som man altid har gjordt i headeren og det kan virke fint, men WordPress har en anden mere “elegant” metode, som kan være lidt mere kompliceret.

I stedet for at inkludere dem i headeren, inkludere du dine filer gennem wp_enqueue_script() i function.php . Se funktionen herunder:

function ditTheme_script_enqueue(){
    wp_enqueue_script(‘ditJavaScriptId1’, get_template_directory_uri() . ‘/ditJavaScriptDoc2.js’, array(), ‘1.0.0’, true);
    wp_enqueue_script(‘ditJavaScriptId2’, get_template_directory_uri() . ‘/ditJavaScriptDoc2.js’, array(), ‘1.0.0’, true);
}
add_action( ‘wp_enqueue_scripts’, ‘ditTheme_script_enqueue’);

Jeg vil ikke gå mere ind i detaljer hvordan det fungere, men istedet give et link til WordPress’s egen website med forklaring https://developer.wordpress.org/reference/functions/wp_enqueue_script/

 

En korrekte måde at arbejde med jQuery i en WordPress side

jQuery er som sagt allerede inkluderet i nyere versioner af wordpress, det er dog i “compatibility mode”, så det ikke går i konflikt med andre biblioteker.

Det betyder i pricippet at i stedet for at skrive $ så skriver man jQuery i ens kode. Se herunder:

/* Normal jQuery */
$(‘.div’).on(‘click’, function() {})

/* Compatibility Mode */
jQuery(‘.div’).on(‘click’, function() {})

Man behøver heller ikke bruge jQuery istedet for $ alle steder. F.eks. indholdet der er wrapped i en funktion/trigger som skiver jQuery, føre det med videre til tegnene herunder.

Ellers fundere det nøjagtigt som før.

Dog skal det nævnes hvis man ønsker at inkludere et externt JavaScript dokument med jQuery funktioner i sig, kræver det at WordPress loader jQuery før det ønskede dokument. Derfor inkludere man dem således:

function ditTheme_script_enqueue() {
    wp_enqueue_script(‘ditJavaScriptMedJQueryId3’, get_template_directory_uri() . ‘ditJavaScriptMedJQueryId3.js’, array( ‘jquery’ ), ‘1.0.0’, true );
}
add_action( ‘admin_enqueue_scripts’, ‘ditTheme_script_enqueue’ );

Det at jeg kalder jQuery i min array, fortæller WordPress at dette JavaScript dokument er afhængig af jQuery, derved loader den jQuery først.

En anden måde simpel måde at arbejde med JavaScript og jQuery i WordPress

Den sidste måde at gøre alt det her på er gennem plugins.

WordPress, stærkeste side er alle dens plugins og der findes en god bunke plugins, som gør det nemt at inkludere JavaScript i ens side.

Så hvis man ikke er meget for at skulle rode med bund kode eller bare vil tilføje en lille extra detalje gennem noget Javascript kunne det være en mulighed.

 

Håber det har hjulpet med at afklare lidt omkring spørgsmål JavaScript og jQuery.

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *