Insertion du code JavaScript dans Html

Bonjour,

J'ai créée quelques sites web en utilisant du code JavaScript dans Html ou appeller des fonctions externes situées dans un fichier.js
Dernièrement j'ai trouvé un template que je veux utiliser pour créer un nouveau site, mais voilà je suis perplexe je n'arrive pas à comprendre comment JavaScript est actif dans la page Html.
Dans mon dernier site que j'ai crée j'avais besoin d'une fonction JavaScipt que j'ai déclaré dans un fichier externe.js et j'ai appellé cette fonction dans <body onload="mafonction();">
Voici la déclaration <head> du nouveau template :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <!DOCTYPE HTML> <html><head> <title>MonSite</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta name="description" content="" /> <meta name="keywords" content="" /> <script src="js/jquery.min.js"></script> <script src="js/skel.min.js"></script> <script src="js/skel-layers.min.js"></script> <script src="js/init.js"></script> <noscript> <link rel="stylesheet" href="css/skel.css" /> <link rel="stylesheet" href="css/style.css" /> <link rel="stylesheet" href="css/style-desktop.css" /> </noscript>   </head> <body>...</body></html>
Si je supprime les declarations <script> </script> le style n'est pas appliqué,
donc on voit bien que le style de la page est crée avec JavaScript (il est appliqué par CSS au cas où JavaScript n'est pas activé dans le navigateur : balise <noscript>).

Voici init.js
Code:

1 2 3 4 (function($) { skel.init({ ... })(jQuery);
et skel.min.js
Code:

1 2 var skel=function(){var ... ... (this,function(){return skel});
Ma question est donc la suivante :

Comment ça se fait que ceci marche?
Dans le Html il y a aucun appel de fonction JavaScript pourtant le style (à travers JavaScript et JQuery) est appliqué à la page.
Dans le <body onload> il n'y rien...
Je ne comprends pas !!!!
Une explication ?

C'est du JavaScript non intrusif. C'est une pratique recommandée, ça permet de bien séparer les couches : la couche contenu (HTML), la couche présentation (CSS) et la couche comportement (JS).

Dans ton template ça se passe à coup sûr dans la fonction skel.init, malheureusement tu as omis de nous en donner le code. Apparemment ce template utilise jQuery donc l'initialisation se fait sans doute au moyen de $(document).ready ou une variante. Voir http://api.jquery.com/ready/

skel.min.js

Je veux bien vous mettre le code pour voir la fonction skel.init.
Ceci ne répondra pas à ma question à savoir par quel mécanisme le code javascript est appellé dans le html puisqu'il n'y a pas d'appel de fonction.
Quand je me suis formé au JavaScript et même dans la plupart des exemples et tutoriels sur le net moi-même j'ai compris la chose suivante:
On déclare dans un fichier externe .js les fonctions qu'on a besoin et ensuite on applle ses fonctions dans html.
Dans le code html du template il n'y pas d'appel de fonction JavaScript !!!
Voici le code skel.min.js :

Code:

1
2
3
 
/* skel.js v2.2.1 | (c) n33 | getskel.com | MIT licensed */
var skel=function(){var e="breakpoints",t="config",n="iterate",r="elements",i="stateId",s="stateElements",o="getElementsByClassName",u=!1,a="getElementsByTagName",f="length",l="gridLevelMax",c=null,h="getCachedElement",p="viewport",d=" 0 -1px ",v="cacheNewElement",m="config_breakpoint",g="createElement",y=!0,b="gutters",w="vars",E="insertBefore",S="newInline",x="substring",T="}",N="parentNode",C="cache",k="locations",L="gridLevelMap",A="orientationChange",O="deviceType",M="className",_=" 0 0 ",D="object",P="isArray",H="match",B="grid",j="+*,",F="replace",I="head",q="newElement",R="canUseProperty_element",U="indexOf",z="_skel_isReversed",W="push",X="extend",V="matchesMedia",$="DOMReady",J="containers",K="onorientationchange",Q="defaults",G="lock",Y="getComputedStyle",Z="addEventListener",et="^head",tt="{display:none!important}",nt="parseMeasurement",rt="isActive",it="charAt",st="registerLocation",ot="trigger",ut="IEVersion",at="documentElement",ft="events",lt="placeholder",ct="level",ht="attachElements",pt="isStatic",dt="attachElement",vt="plugins",mt="DOMContentLoaded",gt="text/css",yt="device-width",bt="states",wt="initial-scale=1",Et="_skel_attach",St="removeEventListener",xt="split",Tt="resize",Nt="attached",Ct="location",kt="change",Lt="normalize",At="collapse",Ot="applyRowTransforms",Mt="media",_t="previousSibling",Dt="(min-width: ",Pt="html",Ht="style",Bt="firstChild",jt="forceDefaultState",Ft="_skel_placeholder",It="querySelectorAll",qt="min-height",Rt="max-height",Ut="min-width",zt="innerHTML",Wt="prototype",Xt="max-width",Vt="nextSibling",$t="hasOwnProperty",Jt="domready",Kt="onresize",Qt="priority",Gt="href",Yt=".\\3$1 ",Zt="android",en="readyState",tn="height=",nn={breakpoints:[],breakpointList:[],cache:{elements:{},states:{},stateElements:{}},config:{breakpoints:{"*":{href:u,media:""}},containers:1140,defaultState:c,events:{},grid:{level:1,collapse:u,gutters:[40,0]},lock:{path:u,permanent:y},plugins:{},pollOnce:u,preload:u,reset:Lt,RTL:u,viewport:{width:yt,height:"",scalable:y}},css:{bm:"*,*:before,*:after{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}",n:"html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:700}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}",r:"html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}body{-webkit-text-size-adjust:none}",gc:function(e){return".\\31 2u"+e+",.\\31 2u\\24"+e+"{width:100%;clear:none;margin-left:0}"+".\\31 1u"+e+",.\\31 1u\\24"+e+"{width:91.6666666667%;clear:none;margin-left:0}"+".\\31 0u"+e+",.\\31 0u\\24"+e+"{width:83.3333333333%;clear:none;margin-left:0}"+".\\39 u"+e+",.\\39 u\\24"+e+"{width:75%;clear:none;margin-left:0}"+".\\38 u"+e+",.\\38 u\\24"+e+"{width:66.6666666667%;clear:none;margin-left:0}"+".\\37 u"+e+",.\\37 u\\24"+e+"{width:58.3333333333%;clear:none;margin-left:0}"+".\\36 u"+e+",.\\36 u\\24"+e+"{width:50%;clear:none;margin-left:0}"+".\\35 u"+e+",.\\35 u\\24"+e+"{width:41.6666666667%;clear:none;margin-left:0}"+".\\34 u"+e+",.\\34 u\\24"+e+"{width:33.3333333333%;clear:none;margin-left:0}"+".\\33 u"+e+",.\\33 u\\24"+e+"{width:25%;clear:none;margin-left:0}"+".\\32 u"+e+",.\\32 u\\24"+e+"{width:16.6666666667%;clear:none;margin-left:0}"+".\\31 u"+e+",.\\31 u\\24"+e+"{width:8.3333333333%;clear:none;margin-left:0}"+".\\31 2u\\24"+e+j+".\\31 1u\\24"+e+j+".\\31 0u\\24"+e+j+".\\39 u\\24"+e+j+".\\38 u\\24"+e+j+".\\37 u\\24"+e+j+".\\36 u\\24"+e+j+".\\35 u\\24"+e+j+".\\34 u\\24"+e+j+".\\33 u\\24"+e+j+".\\32 u\\24"+e+j+".\\31 u\\24"+e+"+*{"+"clear:left;"+T+".\\-11u"+e+"{margin-left:91.6666666667%}"+".\\-10u"+e+"{margin-left:83.3333333333%}"+".\\-9u"+e+"{margin-left:75%}"+".\\-8u"+e+"{margin-left:66.6666666667%}"+".\\-7u"+e+"{margin-left:58.3333333333%}"+".\\-6u"+e+"{margin-left:50%}"+".\\-5u"+e+"{margin-left:41.6666666667%}"+".\\-4u"+e+"{margin-left:33.3333333333%}"+".\\-3u"+e+"{margin-left:25%}"+".\\-2u"+e+"{margin-left:16.6666666667%}"+".\\-1u"+e+"{margin-left:8.3333333333%}"}},defaults:{breakpoint:{config:c,elements:c,test:c},config_breakpoint:{containers:"100%",grid:{},href:u,media:"",viewport:{}}},events:[],forceDefaultState:u,gridLevelMap:{k:{},v:{}},gridLevelMax:1,isInit:u,isStatic:u,locations:{body:c,head:c,html:c},lcn:"_skel_lock",me:c,plugins:{},sd:"/",stateId:"",vars:{},DOMReady:c,getElementsByClassName:c,indexOf:c,isArray:c,iterate:c,matchesMedia:c,extend:function(e,t){var r;nn[n](t,function(n){nn[P](t[n])?(nn[P](e[n])||(e[n]=[]),nn[X](e[n],t[n])):typeof t[n]==D?(typeof e[n]!=D&&(e[n]={}),nn[X](e[n],t[n])):e[n]=t[n]})},getArray:function(e){return nn[P](e)?e:[e]},parseMeasurement:function(e){var t,n;if(typeof e!="string")t=[e,"px"];else if(e=="fluid")t=[100,"%"];else{var n;n=e[H](/([0-9\.]+)([^\s]*)/),n[f]<3||!n[2]?t=[parseFloat(e),"px"]:t=[parseFloat(n[1]),n[2]]}return t},canUseProperty_element:c,canUse:function(t){return nn[e][t]&&nn[e][t].test()},canUseProperty:function(e){nn[R]||(nn[R]=document[g]("div"));var t=nn[R][Ht],n=e[it](0).toUpperCase()+e.slice(1);return e in t||"Moz"+n in t||"Webkit"+n in t||"O"+n in t||"ms"+n in t},hasActive:function(e){var t=u;return nn[n](e,function(n){t=t||nn[rt](e[n])}),t},isActive:function(e){return nn[U](nn[i],nn.sd+e)!==-1},isLocked:function(){return!!nn[w][G]&&nn[P](nn[w][G])},lock:function(e,n){nn[w][G]=[e,n],document.cookie=nn.lcn+"="+nn[w][G].join("_")+(nn[t][G].path?";path="+nn[t][G].path:"")+(nn[t][G].permanent?";expires=Tue, 19 Jan 2038 03:14:07 GMT":""),window[Ct].reload()},unlock:function(){nn[w][G]=c,document.cookie=nn.lcn+"="+(nn[t][G].path?";path="+nn[t][G].path:"")+";expires=Thu, 01 Jan 1970 01:02:03 GMT",window[Ct].reload()},useActive:function(e){if(typeof e!==D)return e;var t=c;return nn[n](e,function(n){if(t!==c)return;nn[rt](n)&&(t=e[n])}),t},wasActive:function(e){return nn[U](nn[w].lastStateId,nn.sd+e)!==-1},applyRowTransforms:function(e){nn[t].RTL&&(nn.unreverseRows(),e[t][B][At]&&nn.reverseRows());var r="_skel_important",i=[],s,a;for(s=1;s<=nn[l];s++)a=nn[o]("important("+nn[L].k[s]+")"),nn[n](a,function(e){i[W](a[e])});a=nn[o]("important(collapse)"),nn[n](a,function(e){i[W](a[e])}),nn[n](i,function(n){if(n===f)return;var s=i[n],o=s[N],a,l=u,c,h;if(!o)return;if(!s[$t](r)||s[r]===u){e[t][B][At]&&s[M][H](/important\(collapse\)/)?l="c":s[M][H](/important\((.+)\)/)&&(h=parseInt(nn[L].v[RegExp.$1]))<=e[t][B][ct]&&(l="l");if(!l)return;c=nn[t].RTL?Vt:_t,a=s[c];while(a&&a.nodeName=="#text")a=a[c];if(!a)return;o[E](s,nn[t].RTL&&l=="l"?o.lastChild:o[Bt]),s[r]={placeholder:a,mode:l,level:h}}else{a=s[r][lt],l=s[r].mode;if(l=="c"&&e[t][B][At]||l=="l"&&s[r][ct]<=e[t][B][ct])return;o[E](s,nn[t].RTL&&l=="l"?a[_t]:a[Vt]),s[r]=u}})},reverseRows:function(){var e=nn[o]("row");nn[n](e,function(t){if(t===f)return;var n=e[t];if(n[z])return;var r=n.children,i;for(i=1;i<r[f];i++)n[E](r[i],r[0]);n[z]=y})},unreverseRows:function(){var e=nn[o]("row");nn[n](e,function(t){if(t===f)return;var n=e[t];if(!n[z])return;var r=n.children,i;for(i=1;i<r[f];i++)n[E](r[i],r[0]);n[z]=u})},bind:function(e,t){return nn.on(e,t)},on:function(e,t){var r=e[xt](/[\s]+/);nn[n](r,function(e){var n=r[e];if(nn.isInit){if(n=="init"){t();return}if(n==kt)t();else if(n[it](0)=="+"&&nn[rt](n[x](1)))t();else if(n[it](0)=="!"&&!nn[rt](n[x](1))){t();return}}nn[ft][n]||(nn[ft][n]=[]),nn[ft][n][W](t)})},change:function(e){nn.on(kt,e)},ready:function(e){nn.on("ready",e)},trigger:function(e){if(!nn[ft][e]||nn[ft][e][f]==0)return;var t;nn[n](nn[ft][e],function(t){nn[ft][e][t]()})},registerLocation:function(e,t){e==I?t[Et]=function(e,t){t?this[E](e,this[Bt]):this===nn.me[N]?this[E](e,nn.me):this.appendChild(e)}:t[Et]=function(e,t){t?this[E](e,this[Bt]):this.appendChild(e)},nn[k][e]=t},addCachedElementToBreakpoint:function(t,n){nn[e][t]&&nn[e][t][r][W](n)},addCachedElementToState:function(e,t){nn[C][s][e]?nn[C][s][e][W](t):nn[C][s][e]=[t]},attachElement:function(e){var t,n=e[Ct],r=u;return e[Nt]?y:(n[0]=="^"&&(n=n[x](1),r=y),n in nn[k]?(t=nn[k][n],t[Et](e[D],r),e[Nt]=y,e.onAttach&&e.onAttach(),y):u)},attachElements:function(e){var t=[],r=[],i,s,o;nn[n](e,function(n){t[e[n][Qt]]||(t[e[n][Qt]]=[]),t[e[n][Qt]][W](e[n])}),nn[n](t,function(e){if(t[e][f]==0)return;nn[n](t[e],function(n){nn[dt](t[e][n])||r[W](t[e][n])})}),r[f]>0&&nn[$](function(){nn[n](r,function(e){nn[dt](r[e])})})},cacheElement:function(e){return nn[C][r][e.id]=e,e},cacheNewElement:function(e,t,n,r){var i;return t[N]&&t[N].removeChild(t),i=nn[q](e,t,n,r),nn.cacheElement(i)},detachAllElements:function(e){var t,i,s={};nn[n](e,function(t){s[e[t].id]=y}),nn[n](nn[C][r],function(e){if(e in s)return;nn.detachElement(e)})},detachElement:function(e){var t=nn[C][r][e],n;if(!t[Nt])return;n=t[D];if(!n[N]||n[N]&&!n[N].tagName)return;n[N].removeChild(n),t[Nt]=u,t.onDetach&&t.onDetach()},getCachedElement:function(e){return nn[C][r][e]?nn[C][r][e]:c},newElement:function(e,t,n,r){return{id:e,object:t,location:n,priority:r,attached:u}},removeCachedElementFromBreakpoint:function(t,i){return nn[n](nn[e][t][r],function(n){nn[e][t][r][n].id==i&&delete nn[e][t][r][n]}),y},removeCachedElementFromState:function(e,t){return nn[n](nn[C][s][e],function(n){nn[C][s][e][n].id==t&&delete nn[C][s][e][n]}),y},uncacheElement:function(e){return e in nn[C][r]?(delete nn[C][r][e],y):u},changeState:function(o){var a,l,c,g,E,N,k,A,O;nn[w].lastStateId=nn[i],nn[i]=o;if(!nn[C][bt][nn[i]]){nn[C][bt][nn[i]]={config:{},elements:[],values:{}},c=nn[C][bt][nn[i]],nn[i]===nn.sd?a=[]:a=nn[i][x](1)[xt](nn.sd),nn[X](c[t],nn[Q][m]),nn[n](a,function(n){nn[X](c[t],nn[e][a[n]][t])}),k="mV"+nn[i],c[t][p].content?A=c[t][p].content:nn.isLocked()?(g=[],g[W]("user-scalable=yes"),nn[w][G][0]&&g[W]("width="+nn[w][G][0]),nn[w][G][1]&&g[W](tn+nn[w][G][1]),A=g.join(","),window.setTimeout(function(){nn.poll()},0)):(g=[],g[W]("user-scalable="+(c[t][p].scalable?"yes":"no")),c[t][p].width&&g[W]("width="+c[t][p].width),c[t][p].height&&g[W](tn+c[t][p].height),c[t][p].width==yt&&g[W](wt),A=g.join(",")),(E=nn[h](k))||(E=nn[v](k,nn.newMeta(p,A),et,4)),c[r][W](E);var M,D,P=u;g=nn[nt](c[t][J]),M=g[0],D=g[1],c.values[J]=M+D,k="iC"+c.values[J],D.substr(-1)=="!"&&(P=y,D=D.substr(0,D[f]-1)),(E=nn[h](k))||(E=nn[v](k,nn[S](".container{margin-left:auto;margin-right:auto;width:"+M*1+D+(P?"!important;max-width:none!important;min-width:0!important"+T:T+".container.\\31 25\\25{width:100%;max-width:"+M*1.25+D+";min-width:"+M+D+T+".container.\\37 5\\25{width:"+M*.75+D+T+".container.\\35 0\\25{width:"+M*.5+D+T+".container.\\32 5\\25{width:"+M*.25+D+T)),I,3)),c[r][W](E),k="iGG"+c[t][B][b][0]+"_"+c[t][B][b][1];if(!(E=nn[h](k))){var H,j;g=nn[nt](c[t][B][b][0]),H=g[0],j=g[1];var q,R;g=nn[nt](c[t][B][b][1]),q=g[0],R=g[1],E=nn[v]("iGG"+c[t][B][b][0]+"_"+c[t][B][b][1],nn[S](".row>*{padding:"+q*1+R+_+H*1+j+T+".row{margin:"+q*-1+R+d+H*-1+j+T+".row.uniform>*{padding:"+H*1+j+_+H*1+j+T+".row.uniform{margin:"+H*-1+j+d+H*-1+j+T+".row.\\32 00\\25>*{padding:"+q*2+R+_+H*2+j+T+".row.\\32 00\\25{margin:"+q*-2+R+d+H*-2+j+T+".row.uniform.\\32 00\\25>*{padding:"+H*2+j+_+H*2+j+T+".row.uniform.\\32 00\\25{margin:"+H*-2+j+d+H*-2+j+T+".row.\\31 50\\25>*{padding:"+q*1.5+R+_+H*1.5+j+T+".row.\\31 50\\25{margin:"+q*-1.5+R+d+H*-1.5+j+T+".row.uniform.\\31 50\\25>*{padding:"+H*1.5+j+_+H*1.5+j+T+".row.uniform.\\31 50\\25{margin:"+H*-1.5+j+d+H*-1.5+j+T+".row.\\35 0\\25>*{padding:"+q*.5+R+_+H*.5+j+T+".row.\\35 0\\25{margin:"+q*-0.5+R+d+H*-0.5+j+T+".row.uniform.\\35 0\\25>*{padding:"+H*.5+j+_+H*.5+j+T+".row.uniform.\\35 0\\25{margin:"+H*-0.5+j+d+H*-0.5+j+T+".row.\\32 5\\25>*{padding:"+q*.25+R+_+H*.25+j+T+".row.\\32 5\\25{margin:"+q*-0.25+R+d+H*-0.25+j+T+".row.uniform.\\32 5\\25>*{padding:"+H*.25+j+_+H*.25+j+T+".row.uniform.\\32 5\\25{margin:"+H*-0.25+j+d+H*-0.25+j+T+".row.\\30 \\25>*{padding:0}"+".row.\\30 \\25{margin:0 0 -1px 0}"),I,3)}c[r][W](E);if(c[t][B][ct]>1){k="igZ"+c[t][B][ct];if(!(E=nn[h](k))){A="";for(N=2;N<=c[t][B][ct];N++)A+=nn.css.gc("\\28 "+nn[L].k[N]+"\\29");E=nn[v](k,nn[S](A),I,3)}c[r][W](E)}c[t][B][At]&&(k="igC"+c[t][J],(E=nn[h](k))||(E=nn[v](k,nn[S](".row:not(.no-collapse)>*{width:100%!important;margin-left:0!important"+T),I,3)),c[r][W](E));if(!nn[pt]){k="iCd"+nn[i];if(!(E=nn[h](k))){A=[],O=[],nn[n](nn[e],function(e){nn[U](a,e)!==-1?A[W](".not-"+e):O[W](".only-"+e)});var z=(A[f]>0?A.join(",")+tt:"")+(O[f]>0?O.join(",")+tt:"");E=nn[v](k,nn[S](z[F](/\.([0-9])/,Yt)),I,3),c[r][W](E)}}nn[n](a,function(i){nn[e][a[i]][t][Gt]&&(k="ss"+a[i],(E=nn[h](k))||(E=nn[v](k,nn.newStyleSheet(nn[e][a[i]][t][Gt]),I,5)),c[r][W](E)),nn[e][a[i]][r][f]>0&&nn[n](nn[e][a[i]][r],function(t){c[r][W](nn[e][a[i]][r][t])})}),nn[C][s][nn[i]]&&(nn[n](nn[C][s][nn[i]],function(e){c[r][W](nn[C][s][nn[i]][e])}),nn[C][s][nn[i]]=[])}else c=nn[C][bt][nn[i]];nn.detachAllElements(c[r]),nn[ht](c[r]),nn[$](function(){nn[Ot](c)}),nn[w].state=nn[C][bt][nn[i]],nn[w][i]=nn[i],nn[ot](kt),nn[n](nn[e],function(e){nn[rt](e)?nn.wasActive(e)||nn[ot]("+"+e):nn.wasActive(e)&&nn[ot]("-"+e)})},getStateId:function(){if(nn[jt]&&nn[t].defaultState)return nn[t].defaultState;var r="";return nn[n](nn[e],function(t){nn[e][t].test()&&(r+=nn.sd+t)}),r},poll:function(){var e="";e=nn.getStateId(),e===""&&(e=nn.sd),e!==nn[i]&&(nn[pt]?nn.changeState(e):(nn[k][Pt][M]=nn[k][Pt][M][F](nn[i][x](1)[F](new RegExp(nn.sd,"g")," "),""),nn.changeState(e),nn[k][Pt][M]=nn[k][Pt][M]+" "+nn[i][x](1)[F](new RegExp(nn.sd,"g")," "),nn[k][Pt][M][it](0)==" "&&(nn[k][Pt][M]=nn[k][Pt][M][x](1))))},updateState:function(){var t,o,u,a,l=[];if(nn[i]==nn.sd)return;t=nn[i][x](1)[xt](nn.sd),nn[n](t,function(s){o=nn[e][t[s]];if(o[r][f]==0)return;nn[n](o[r],function(e){nn[C][bt][nn[i]][r][W](o[r][e]),l[W](o[r][e])})}),nn[C][s][nn[i]]&&(nn[n](nn[C][s][nn[i]],function(e){nn[C][bt][nn[i]][r][W](nn[C][s][nn[i]][e]),l[W](nn[C][s][nn[i]][e])}),nn[C][s][nn[i]]=[]),l[f]>0&&nn[ht](l)},newDiv:function(e){var t=document[g]("div");return t[zt]=e,t},newInline:function(e){var t;return t=document[g](Ht),t.type=gt,t[zt]=e,t},newMeta:function(e,t){var n=document[g]("meta");return n.name=e,n.content=t,n},newStyleSheet:function(e){var t=document[g]("link");return t.rel="stylesheet",t.type=gt,t[Gt]=e,t},initPlugin:function(e,n){typeof n==D&&nn[X](e[t],n),e.init&&e.init()},registerPlugin:function(e,t){if(!t)return u;nn[vt][e]=t,t._=this,t.register&&t.register()},init:function(e,r){nn.initConfig(e),nn.initElements(),nn.initEvents(),nn.poll(),r&&typeof r==D&&(nn[t][vt]=r),nn[n](nn[vt],function(e){nn.initPlugin(nn[vt][e],e in nn[t][vt]?nn[t][vt][e]:c)}),nn.isInit=y,nn[ot]("init")},initAPI:function(){var e,t,r=navigator.userAgent;nn[w][ut]=99,e="other",r[H](/Firefox/)?e="firefox":r[H](/Chrome/)?e="chrome":r[H](/Safari/)&&!r[H](/Chrome/)?e="safari":r[H](/(OPR|Opera)/)?e="opera":r[H](/MSIE ([0-9]+)/)?(e="ie",nn[w][ut]=RegExp.$1):r[H](/Trident\/.+rv:([0-9]+)/)&&(e="ie",nn[w][ut]=RegExp.$1),nn[w].browser=e,nn[w][O]="other",t={ios:"(iPad|iPhone|iPod)",android:"Android",mac:"Macintosh",wp:"Windows Phone",windows:"Windows NT"},nn[n](t,function(e){r[H](new RegExp(t[e],"g"))&&(nn[w][O]=e)});switch(nn[w][O]){case"ios":r[H](/([0-9_]+) like Mac OS X/),e=parseFloat(RegExp.$1[F]("_",".")[F]("_",""));break;case Zt:r[H](/Android ([0-9\.]+)/),e=parseFloat(RegExp.$1);break;case"mac":r[H](/Mac OS X ([0-9_]+)/),e=parseFloat(RegExp.$1[F]("_",".")[F]("_",""));break;case"wp":r[H](/IEMobile\/([0-9\.]+)/),e=parseFloat(RegExp.$1);break;case"windows":r[H](/Windows NT ([0-9\.]+)/),e=parseFloat(RegExp.$1);break;default:e=99}nn[w].deviceVersion=e,nn[w].isTouch=nn[w][O]=="wp"?navigator.msMaxTouchPoints>0:"ontouchstart"in window,nn[w].isMobile=nn[w][O]=="wp"||nn[w][O]==Zt||nn[w][O]=="ios",e=document.cookie[xt](";"),nn[n](e,function(t){var n=e[t][xt]("=");if(n[0][F](/^\s+|\s+$/g,"")==nn.lcn&&n[1][f]>0){nn[w][G]=n[1][xt]("_");return}})},initConfig:function(i){var s=[],o=[],c;if(!i||!(e in i))nn[pt]=y,nn[t][p].width="",nn[t][p].height="",nn[t][p].scalable=y;typeof i==D&&(i[e]&&(nn[t][e]={}),nn[X](nn[t],i)),B in nn[t]&&b in nn[t][B]&&!nn[P](nn[t][B][b])&&(nn[t][B][b]=[nn[t][B][b],nn[t][B][b]]),nn[X](nn[Q][m][B],nn[t][B]),nn[l]=Math.max(nn[l],nn[t][B][ct]),nn[X](nn[Q][m][p],nn[t][p]),nn[Q][m][J]=nn[t][J],nn[n](nn[t][e],function(n){var i,s={},u,a;nn[X](s,nn[t][e][n]),Gt in s||(s[Gt]=nn[Q][m][Gt]),Mt in s||(s[Mt]=nn[Q][m][Mt]),"range"in s&&(u=s.range,u=="*"?a="":u[it](0)=="-"?a="(max-width: "+parseInt(u[x](1))+"px)":u[it](u[f]-1)=="-"?a=Dt+parseInt(u[x](0,u[f]-1))+"px)":nn[U](u,"-")!=-1&&(u=u[xt]("-"),a=Dt+parseInt(u[0])+"px) and (max-width: "+parseInt(u[1])+"px)"),s[Mt]=a),B in s&&(b in s[B]&&!nn[P](s[B][b])&&(s[B][b]=[s[B][b],s[B][b]]),"zoom"in s[B]&&(s[B][ct]=s[B].zoom),ct in s[B]&&(nn[l]=Math.max(nn[l],s[B][ct]))),nn[t][e][n]=s,i={},nn[X](i,nn[Q].breakpoint),i[t]=nn[t][e][n],i.test=function(){return nn[V](s[Mt])},i[r]=[],nn[t].preload&&i[t][Gt]&&o[W](i[t][Gt]),nn[e][n]=i,nn.breakpointList[W](n)});if(nn[l]>1||nn[pt])for(c=2;c<=nn[l];c++)nn[L].k[c]=nn[L].v[c]=c;else nn[n](nn[t][e],function(n){var r=nn[t][e][n];nn[l]++,B in r||(r[B]={}),r[B][ct]=nn[l],nn[L].k[nn[l]]=n,nn[L].v[n]=nn[l]});nn[n](nn[t][ft],function(e){nn.on(e,nn[t][ft][e])}),o[f]>0&&window[Ct].protocol!="file:"&&nn[$](function(){var e,t=document[a](I)[0],r=new XMLHttpRequest;nn[n](o,function(e){r.open("GET",o[e],u),r.send("")})})},initElements:function(){var e=[];e[W](nn[q]("mV",nn.newMeta(p,wt),et,1));switch(nn[t].reset){case"full":e[W](nn[q]("iR",nn[S](nn.css.r),et,2));break;case Lt:e[W](nn[q]("iN",nn[S](nn.css.n),et,2))}e[W](nn[q]("iBM",nn[S](nn.css.bm),et,1)),e[W](nn[q]("iG",nn[S]('.row{border-bottom:solid 1px transparent}.row>*{float:left}.row:after,.row:before{content:"";display:block;clear:both;height:0}.row.uniform>*>:first-child{margin-top:0}.row.uniform>*>:last-child{margin-bottom:0}'+nn.css.gc("")),I,3)),nn[ht](e)},initEvents:function(){var e;!nn[t].pollOnce&&!nn[pt]&&(nn.on(Tt,function(){nn.poll()}),nn.on(A,function(){nn.poll()})),nn[w][O]=="ios"&&nn[$](function(){nn.on(A,function(){var e=document[a]("input");nn[n](e,function(t){e[t][Ft]=e[t][lt],e[t][lt]=""}),window.setTimeout(function(){nn[n](e,function(t){e[t][lt]=e[t][Ft]})},100)})}),nn[$](function(){nn[ot]("ready")}),window[Kt]&&nn.on(Tt,window[Kt]),window[Kt]=function(){nn[ot](Tt)},window[K]&&nn.on(A,window[K]),window[K]=function(){nn[ot](A)}},initUtilityMethods:function(){document[Z]?!function(e,t){nn[$]=t()}(Jt,function(){function e(e){s=1;while(e=t.shift())e()}var t=[],n,r=document,i=mt,s=/^loaded|^c/.test(r[en]);return r[Z](i,n=function(){r[St](i,n),e()}),function(e){s?e():t[W](e)}}):!function(e,t){nn[$]=t()}(Jt,function(e){function t(e){p=1;while(e=n.shift())e()}var n=[],r,i=!1,s=document,o=s[at],u=o.doScroll,a=mt,f=Z,l="onreadystatechange",c=en,h=u?/^loaded|^c/:/^loaded|c/,p=h.test(s[c]);return s[f]&&s[f](a,r=function(){s[St](a,r,i),t()},i),u&&s.attachEvent(l,r=function(){/^c/.test(s[c])&&(s.detachEvent(l,r),t())}),e=u?function(t){self!=top?p?t():n[W](t):function(){try{o.doScroll("left")}catch(n){return setTimeout(function(){e(t)},50)}t()}()}:function(e){p?e():n[W](e)}}),document[o]?nn[o]=function(e){return document[o](e)}:nn[o]=function(e){var t=document;return t[It]?t[It](("."+e[F](" "," ."))[F](/\.([0-9])/,Yt)):[]},Array[Wt][U]?nn[U]=function(e,t){return e[U](t)}:nn[U]=function(e,t){if(typeof e=="string")return e[U](t);var n,r=t?t:0,i;if(!this)throw new TypeError;i=this[f];if(i===0||r>=i)return-1;r<0&&(r=i-Math.abs(r));for(n=r;n<i;n++)if(this[n]===e)return n;return-1},Array[P]?nn[P]=function(e){return Array[P](e)}:nn[P]=function(e){return Object[Wt].toString.call(e)==="[object Array]"},Object.keys?nn[n]=function(e,t){if(!e)return[];var n,r=Object.keys(e);for(n=0;r[n];n++)t(r[n])}:nn[n]=function(e,t){if(!e)return[];var n;for(n in e)Object[Wt][$t].call(e,n)&&t(n)},window.matchMedia?nn[V]=function(e){return e==""?y:window.matchMedia(e).matches}:window.styleMedia||window[Mt]?nn[V]=function(e){if(e=="")return y;var t=window.styleMedia||window[Mt];return t.matchMedium(e||"all")}:window[Y]?nn[V]=function(e){if(e=="")return y;var t=document[g](Ht),n=document[a]("script")[0],r=c;t.type=gt,t.id="matchmediajs-test",n[N][E](t,n),r=Y in window&&window[Y](t,c)||t.currentStyle;var i="@media "+e+"{ #matchmediajs-test { width: 1px; } }";return t.styleSheet?t.styleSheet.cssText=i:t.textContent=i,r.width==="1px"}:(nn[jt]=y,nn[V]=function(e){if(e=="")return y;var t,n,r,i,s={"min-width":c,"max-width":c},o=u;n=e[xt](/\s+and\s+/);for(i in n)t=n[i],t[it](0)=="("&&(t=t[x](1,t[f]-1),r=t[xt](/:\s+/),r[f]==2&&(s[r[0][F](/^\s+|\s+$/g,"")]=parseInt(r[1]),o=y));if(!o)return u;var a=document[at].clientWidth,l=document[at].clientHeight;return s[Ut]!==c&&a<s[Ut]||s[Xt]!==c&&a>s[Xt]||s[qt]!==c&&l<s[qt]||s[Rt]!==c&&l>s[Rt]?u:y})},preInit:function(){var e=document[a]("script");nn.me=e[e[f]-1],nn.initUtilityMethods(),nn.initAPI(),nn[st](Pt,document[a](Pt)[0]),nn[st](I,document[a](I)[0]),nn[$](function(){nn[st]("body",document[a]("body")[0])}),nn[w].browser=="ie"&&nn[w][ut]>=10&&nn[dt](nn[q]("msie-viewport-fix",nn[S]("@-ms-viewport{width:device-width}"),et,1))}};return nn.preInit(),nn[w][ut]<9&&(nn[Ot]=function(e){},nn[S]=function(e){var t;return t=document[g]("span"),t[zt]='&nbsp;<style type="text/css">'+e+"</style>",t}),nn}();(function(e,t){typeof define=="function"&&define.amd?define([],t):typeof exports=="object"?module.exports=t():e.skel=t()})(this,function(){return skel});

et le code init.js :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
 
(function($) {
 
	skel.init({
		reset: 'full',
		breakpoints: {
			'global':	{ range: '*', href: 'css/style.css' },
			'desktop':	{ range: '737-', href: 'css/style-desktop.css', containers: 1200, grid: { gutters: 25 } },
			'1000px':	{ range: '737-1200', href: 'css/style-1000px.css', containers: 1000, grid: { gutters: 20 }, viewport: { width: 1080 } },
			'mobile':	{ range: '-736', href: 'css/style-mobile.css', containers: '100%!', grid: { collapse: true, gutters: 20 }, viewport: { scalable: false } }
		},
		plugins: {
			layers: {
				config: {
					mode: 'transform'
				},
				navPanel: {
					hidden: true,
					breakpoints: 'mobile',
					position: 'top-left',
					side: 'left',
					animation: 'pushX',
					width: '80%',
					height: '100%',
					clickToHide: true,
					html: '<div data-action="navList" data-args="nav"></div>',
					orientation: 'vertical'
				},
				titleBar: {
					breakpoints: 'mobile',
					position: 'top-left',
					side: 'top',
					height: 44,
					width: '100%',
					html: '<span class="toggle" data-action="toggleLayer" data-args="navPanel"></span><span class="title" data-action="copyHTML" data-args="logo"></span>'
				}
			}
		}
	});
 
})(jQuery);

Aussi je voudrai vous demander qu'est que ça veut dire function($) dans l'entête du fichier init.js.
Moi personnellement j'avais l'habitude de donner un nom genre "function loadXML(fichier)" et d'appeller la fonction dans le html : <body onload="loadXML('xml/actualites.xml');">

Est-ce que tu pourrais me trouver une version non minifiée de ton template ? Là je ne peux rien en tirer.

Il y a forcément un appel de fonction dans le code, mais il est déguisé. Laisse-moi te donner un exemple simple :
Code:

1 2 3 4 5 6 7 8 9 <!DOCTYPE html> <html> <head> <script src="fichier.js"></script> </head> <body> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etc.</p> </body> </html>
Le fichier.js :
Code:

1 2 3 document.addEventListener("DOMContentLoaded", function() { document.body.style.backgroundColor = "#88FF88"; });
Comme tu le vois, il n'y a pas d'appel de fonction dans le HTML, et pourtant le script s'active lorque la page est chargée. C'est grâce à l'évènement DOMContentLoaded qui correspond au chargement de la page. La méthode .ready de jQuery utilise cet évènement.

J'ai jeté un œil au site de Skel et il semblerait qu'il utilise domready qui fait sensiblement la même chose.

Pour répondre à ta question à propos de function($) : il s'agit d'un wrapper, c'est-à-dire une encapsulation. En écrivant une fonction comme ceci avec les parenthèses d'appel juste après :
Code:

1 2 3 (function() { ... })();
On créé une fonction qui est immédiatement appelée (les anglophones appellent ça une IIFE). Et on peut lui passer des arguments :
Code:

1 2 3 (function(arg) { console.log(arg); })("bonjour");
Copie ce code dans ta console et tu verras s'afficher le message « bonjour ».

Le fait d'encapsuler l'objet jQuery permet d'éviter les conflits avec les autres bibliothèques qui utilisent aussi le symbole $. Je crée une IIFE, je lui passe jQuery en paramètre et je décide que ce paramètre s'appelle $.
Code:

1 2 3 (function($) { ... })(jQuery);
Ça permet d'avoir une variable locale $ dans la fonction, dont on est sûr qu'elle correspond à l'objet jQuery, et qui n'entre pas en conflit avec un éventuel objet $ à l'extérieur de cette fonction. Tu me suis ?

On aurait pu écrire ce code exactement équivalent :
Code:

1 2 3 4 (function() { var $ = jQuery; ... })();
Ou bien nommer la fonction pour l'appeler juste après :
Code:

1 2 3 4 function appelleMoi($) { ... } appelleMoi(jQuery);
C'est assez clair ? ;)

Mille remerciements

Clair comme l'eau de roche...
Merci beaucoup.