IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Bibliothèques & Frameworks Discussion :

Insertion du code JavaScript dans Html


Sujet :

Bibliothèques & Frameworks

  1. #1
    Membre du Club
    Homme Profil pro
    Inscrit en
    Octobre 2009
    Messages
    36
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Suisse

    Informations forums :
    Inscription : Octobre 2009
    Messages : 36
    Points : 42
    Points
    42
    Par défaut 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 html : Sélectionner tout - Visualiser dans une fenêtre à part
    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>
    		<!--[if lte IE 9]><link rel="stylesheet" href="css/ie9.css" /><![endif]-->
    		<!--[if lte IE 8]><script src="js/html5shiv.js"></script><![endif]-->
    	</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 : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    (function($) {
    	skel.init({
    		...
    })(jQuery);
    et skel.min.js
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    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 ?

  2. #2
    Expert éminent
    Avatar de Watilin
    Homme Profil pro
    En recherche d'emploi
    Inscrit en
    Juin 2010
    Messages
    3 094
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : En recherche d'emploi

    Informations forums :
    Inscription : Juin 2010
    Messages : 3 094
    Points : 6 755
    Points
    6 755
    Par défaut
    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/
    La FAQ JavaScript – Les cours JavaScript
    Touche F12 = la console → l’outil indispensable pour développer en JavaScript !

  3. #3
    Membre du Club
    Homme Profil pro
    Inscrit en
    Octobre 2009
    Messages
    36
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Suisse

    Informations forums :
    Inscription : Octobre 2009
    Messages : 36
    Points : 42
    Points
    42
    Par défaut 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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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');">

  4. #4
    Expert éminent
    Avatar de Watilin
    Homme Profil pro
    En recherche d'emploi
    Inscrit en
    Juin 2010
    Messages
    3 094
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : En recherche d'emploi

    Informations forums :
    Inscription : Juin 2010
    Messages : 3 094
    Points : 6 755
    Points
    6 755
    Par défaut
    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 HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    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 JS : Sélectionner tout - Visualiser dans une fenêtre à part
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    (function() {
      var $ = jQuery;
      ...
    })();
    Ou bien nommer la fonction pour l'appeler juste après :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    function appelleMoi($) {
      ...
    }
    appelleMoi(jQuery);
    C'est assez clair ?
    La FAQ JavaScript – Les cours JavaScript
    Touche F12 = la console → l’outil indispensable pour développer en JavaScript !

  5. #5
    Membre du Club
    Homme Profil pro
    Inscrit en
    Octobre 2009
    Messages
    36
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Suisse

    Informations forums :
    Inscription : Octobre 2009
    Messages : 36
    Points : 42
    Points
    42
    Par défaut Mille remerciements
    Clair comme l'eau de roche...
    Merci beaucoup.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Insertion de javascript dans html (slide)
    Par fidbell84 dans le forum jQuery
    Réponses: 4
    Dernier message: 12/06/2015, 16h58
  2. [SP-2010] Insertion de code Javascript dans une page Wiki
    Par Samuel_ dans le forum SharePoint
    Réponses: 4
    Dernier message: 22/07/2014, 17h42
  3. Insertion javascript dans html
    Par bisdel dans le forum Général JavaScript
    Réponses: 0
    Dernier message: 22/10/2011, 17h25
  4. Formulaire : cas d'insertion de code Javascript
    Par davmaster62 dans le forum Général JavaScript
    Réponses: 1
    Dernier message: 25/02/2006, 23h52
  5. code javascript dans onchange d'un <select>
    Par grochenel dans le forum Général JavaScript
    Réponses: 1
    Dernier message: 28/11/2005, 20h25

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo