[DOC] Créer un portail, le Javascript et la radio
Posté: 23 Mai 2009, 15:57_______________Créer un portail
_______________________Part 1. Javascript
Préface
les deux parties de ce tutoriel sont une suite au premier tutoriel rédigé par Naoki, qui contient les programmes a utiliser , les bases du HTML , le CSS.
En ce qui nous concerne nous passerons a l'étape suivante qui est le java-script , et son utilisation dans le mode radio. Il se peut que vous vous perdiez en lisant les lignes de java-script , si c'est le cas , ne copiez-coller pas bettement le code dans votre portail , car vous n'y comprendrez rien , lorsqu'un dev (surtout moi ^^) lira le code source de votre portail et verra qu'il n'y a eu qu'un simple copier-coler du tutoriel sa donnera pas forcement envie d'aider ... donc chercher a comprendre avant de copier , et si vous ne comprenez pas : poser une question ! je suis la pour vous aider , mais pas pour faire le travail a votre place.
1. Les bases du java-script
1.0 ou mettre du javascript ?
il existe plusieurs possibilité pour ajouter du javascript dans votre document HTML :
la première consiste a écrire le java-script entre les balises <script></script>:
la troisième façon consiste a écrire le script directement dans la balises souhaitée (attention toute les balises ne le supporte pas)
vous pouvez aussi essayer : onmouseout onmouseover onmousedown
1.1 les variables :
les variables sont des petite cases qui peuvent contenir : du texte ou des nombres.
pour déclarer (ajouter) une variable il vous suffi d'écrire :
une fois une variable déclarer vous pouvez modifier son contenu avec :
le texte contenu dans maVariable a ete remplacé
pour ajouter a la suite faite comme ceci :
maVariable contient le deuxième contenu suivi du troisième contenu.
1.2 les fonctions :
les fonctions sont des zone de codes qui ne sont executer que lorque elles ont invoquées.
pour créer une fonction faite comme ceci :
1.3 petit truc utiles :
vous voulez connettre la valeure d'une variable pour savoir si tout c'est bien passé ? pas de probleme ! voila quelque astuce pour les afficher :
attention la fonction write ne marche plus lorsque la page est afficher , donc seul les methodes 1 et 2 marchent (voir chap 1.0)
et dans notre HTML nous pouvons ajouter dans le body:
en règle général les fonction reçoivent des paramètres , font leur boulot et renvoi une valeur une fois qu'elles ont fini a par ce ya rien a comprendre...
je vais pas m'allonger sur les array , la programmation orienté objet, les expressions régulière etc... car je vous sent prêt a tombé par terre ^^
5. Le DOM
C'est quoi ?
Le Document Object Model est la structure du document (html) qui sera générée par le navigateur internet. cette structure est en faite une arborescence regroupant tout les objet de votre page html
Et le Javascript dans tout ca ?
Le javascript, lui, permet de modifier dynamiquement la structure DOM , la PSP est assez mauvaise dans ce domaine mais on peut quand même faire de bonne chose avec ...
Accéder a un objet du DOM
il existes 3 façons de d'accéder a un objet :
supposons un div :
la première méthode consiste a rechercher TOUT les div du document :
la deuxième consiste a scanner la page a la recherche d'un objet don l'attribut name vaut monDiv :
dernière méthode , la plus connue et la plus sure :
Modifier a un objet du DOM
vous avez donc récupérer l'adresse (le pointeur) de votre objet et vous l'avez stoker dans la variable monElement , on va pas rester comme sa ! on va modifier les propriétés de monElement ! mais ... avan cela je vous conseil d'ajouter a Firefox le plugin "FireBug" il vous permettra d'avoir une vue globale sur toute l'arborescence du DOM de votre page HTML [apercu]
ouvrez donc votre page HTML de portail avec firefox , cliquez sur le petit insecte en a droite dans la barre de statu de firefox , choisissez HTML pour le panneau lateral de gauche, et DOM pour celui de droite , vous verrez dans ce dernier les atributs de l'element selectionnez dans le tableau de gauche , prenons un exemple :
je sélectionne l'image de mon avatar , je vois apparaitre dans le panneau de droite la liste des propriétés de la balise img (height , with , src):
si votre propriétée est dans une categorie (par exemple pour style) , vous devrez y acceder avec : nomDeLaCategorie.maPropriétée , soit concrètement :
nous connaissont donc maintenant tout les propriétée de notre objet nous voullon donc lui assigner une valeur (ou la modifier) voici une exemple theorique :
et si vous vouler afficher un objet il vous suffi d'utiliser la propriétée style.visibility et de la mettre a show ou hidden selon si vous voulez le cacher ou l'afficher
6. La Radio
- télécharger le PRScompiler
nous y voila ! la radio ... si vous avez tout lut vous (surtout le javascript) verrez c'est tres facile !
6.1 - créer le PRS
créez un fichier .xml qui contiendra toute les info de votre radio :
maintenant déplacer votre XML sur prscompiler.exe et HOP votre fichier PRS est apparue ! pas trop dur
?
passons au chose sérieuses ...
6.2 créer le fichier HTML de la radio
pour une liste complette des fonctions du RadioPlayer PSP passez voir ici :
http://psp-online.net/ultimate-portal/UP4PSP/radio/
vous y trouverez aussi des exemples ...
/!\ a savoir /!\
quand le navigateur internet est lancé depuis l'onglet radio le module radio n'est pas actif !! il nous faut donc l'activer avec une balise HTML qu'on pet placer n'importe ou :
<object name="psp" type="application/x-psp-extplugin"></object>
voila ! maintenant le navigateur peut lire des stream audio etc...
nous allons voir dans les second post les fonctions javascript capable de controler l'objet x-psp-extplugin et c'est promis , on va s'eclater
_______________________Part 1. Javascript
Préface
les deux parties de ce tutoriel sont une suite au premier tutoriel rédigé par Naoki, qui contient les programmes a utiliser , les bases du HTML , le CSS.
En ce qui nous concerne nous passerons a l'étape suivante qui est le java-script , et son utilisation dans le mode radio. Il se peut que vous vous perdiez en lisant les lignes de java-script , si c'est le cas , ne copiez-coller pas bettement le code dans votre portail , car vous n'y comprendrez rien , lorsqu'un dev (surtout moi ^^) lira le code source de votre portail et verra qu'il n'y a eu qu'un simple copier-coler du tutoriel sa donnera pas forcement envie d'aider ... donc chercher a comprendre avant de copier , et si vous ne comprenez pas : poser une question ! je suis la pour vous aider , mais pas pour faire le travail a votre place.
1. Les bases du java-script
1.0 ou mettre du javascript ?
il existe plusieurs possibilité pour ajouter du javascript dans votre document HTML :
la première consiste a écrire le java-script entre les balises <script></script>:
- Code: Select All Code
<html>
<head>
<script>mon code java-script</script>
</head>
<body>
cette page contient un bout de java-script
</body>
</html>
- Code: Select All Code
<script src="file:/PSP/COMMON/monPortail/script.js"></script>
la troisième façon consiste a écrire le script directement dans la balises souhaitée (attention toute les balises ne le supporte pas)
- Code: Select All Code
<input type="button" value="test" onmouseclick="ici mon code javascript"/>
<a href="javascript:ici mon code javascript">test</a>
<a href="#" onclick="ici mon code javascript">test</a>
vous pouvez aussi essayer : onmouseout onmouseover onmousedown
1.1 les variables :
les variables sont des petite cases qui peuvent contenir : du texte ou des nombres.
pour déclarer (ajouter) une variable il vous suffi d'écrire :
- Code: Select All Code
var maVariable = "le contenu";
une fois une variable déclarer vous pouvez modifier son contenu avec :
- Code: Select All Code
maVariable = "le deuxième contenu";
le texte contenu dans maVariable a ete remplacé
pour ajouter a la suite faite comme ceci :
- Code: Select All Code
maVariable += "le troisième contenu";
maVariable contient le deuxième contenu suivi du troisième contenu.
1.2 les fonctions :
les fonctions sont des zone de codes qui ne sont executer que lorque elles ont invoquées.
pour créer une fonction faite comme ceci :
- Code: Select All Code
function maFonction(){
ici le code de ma fonction
}
1.3 petit truc utiles :
vous voulez connettre la valeure d'une variable pour savoir si tout c'est bien passé ? pas de probleme ! voila quelque astuce pour les afficher :
- Code: Select All Code
var maVariable = "test";
write( maVariable );
alert( ma variable );
attention la fonction write ne marche plus lorsque la page est afficher , donc seul les methodes 1 et 2 marchent (voir chap 1.0)
script.js Wrote:// ceci est un commentaire
/* ceci est aussi un commentaire */
var moi = "test"; //je défini une variable moi qui contient la valeur test " " pour indiquer que c'est du texte
var moi2 = moi; // la je dit que moi2 prend la même valeur que moi (d'où l'intérêt de mettre des "" lorsque c'est une chaine de caractere et pas lorsque c'est une autre variable)
function go(){ // je crée la fonction go()
alert("voici du texte"); // on affiche un message "voici du texte"
alert(moi); // on affiche un message ayant pour valeur le contenu de moi
alert(moi2) // .... moi2
}
fonction go2(argument){ // cette fonction peut recevoir un argument
alert("argument"); // l'erreur basique est de mettre des "" mais argument est une variable ... donc pas de ""
alert(argument); // ici on affiche la valeur recu par la fonction au traver de argument
alert("ma fonction a recu comme argument" + argument) // on affiche du texte suivit de la variable
}
function repondeuse(){ // cette fonction ne fait rien ne recois rien ... elle ne fait que répondre
alert('je suis répondeuseenchantée'); // on lui fait afficher un message quand meme ...
return 'du texte'; // ici elle renvoi du texte , mais elle pourai renvoyer un argument
}
et dans notre HTML nous pouvons ajouter dans le body:
index.html Wrote:<a href="#" onclick="go()">ma fonction go()</a>
<a href="#" onclick="go2()">go2() sans paramètre</a>
<a href="#" onclick="go2(moi)">go2() avec comme paramètre la variable moi</a>
<a href="#" onclick="alert(repondeuse())">repondeuse()</a> on affiche ce que renvoi repondeuse apres qu'elle est fait son boulot ...
en règle général les fonction reçoivent des paramètres , font leur boulot et renvoi une valeur une fois qu'elles ont fini a par ce ya rien a comprendre...
je vais pas m'allonger sur les array , la programmation orienté objet, les expressions régulière etc... car je vous sent prêt a tombé par terre ^^
5. Le DOM
C'est quoi ?
Le Document Object Model est la structure du document (html) qui sera générée par le navigateur internet. cette structure est en faite une arborescence regroupant tout les objet de votre page html
Et le Javascript dans tout ca ?
Le javascript, lui, permet de modifier dynamiquement la structure DOM , la PSP est assez mauvaise dans ce domaine mais on peut quand même faire de bonne chose avec ...
Accéder a un objet du DOM
il existes 3 façons de d'accéder a un objet :
supposons un div :
- Code: Select All Code
<div id="maDiv" name="monDiv">un peut de texte</div>
la première méthode consiste a rechercher TOUT les div du document :
- Code: Select All Code
var monElement = document.getElementsByTagName('div')[0]
la deuxième consiste a scanner la page a la recherche d'un objet don l'attribut name vaut monDiv :
- Code: Select All Code
var monElement = document.getElementsByName('monDiv')[0];
dernière méthode , la plus connue et la plus sure :
- Code: Select All Code
var monElement = document.getElementById('maDiv');
Modifier a un objet du DOM
vous avez donc récupérer l'adresse (le pointeur) de votre objet et vous l'avez stoker dans la variable monElement , on va pas rester comme sa ! on va modifier les propriétés de monElement ! mais ... avan cela je vous conseil d'ajouter a Firefox le plugin "FireBug" il vous permettra d'avoir une vue globale sur toute l'arborescence du DOM de votre page HTML [apercu]
ouvrez donc votre page HTML de portail avec firefox , cliquez sur le petit insecte en a droite dans la barre de statu de firefox , choisissez HTML pour le panneau lateral de gauche, et DOM pour celui de droite , vous verrez dans ce dernier les atributs de l'element selectionnez dans le tableau de gauche , prenons un exemple :
je sélectionne l'image de mon avatar , je vois apparaitre dans le panneau de droite la liste des propriétés de la balise img (height , with , src):
- Code: Select All Code
si votre propriétée est dans une categorie (par exemple pour style) , vous devrez y acceder avec : nomDeLaCategorie.maPropriétée , soit concrètement :
- Code: Select All Code
style.visibility
nous connaissont donc maintenant tout les propriétée de notre objet nous voullon donc lui assigner une valeur (ou la modifier) voici une exemple theorique :
- Code: Select All Code
<div name="maDiv" id="monDiv">coucou !</div>
<a href="javascript:document.getElementById('monDiv').innerHTML='salut !'">modifier le innerHTML du div via l'ID</a>
<a href="javascript:document.getElementsByName[0]('maDiv').innerHTML='sa va ?'">modifier le innerHTML du div via le name</a>
<a href="javascript:document.getElementsByTagName[0]('maDiv').innerHTML='bien et toi ?'">modifier le innerHTML du div via le tag name</a>
et si vous vouler afficher un objet il vous suffi d'utiliser la propriétée style.visibility et de la mettre a show ou hidden selon si vous voulez le cacher ou l'afficher
6. La Radio
- télécharger le PRScompiler
nous y voila ! la radio ... si vous avez tout lut vous (surtout le javascript) verrez c'est tres facile !
6.1 - créer le PRS
créez un fichier .xml qui contiendra toute les info de votre radio :
oui, vous pouvez mettre des image png 64*64 pour votre radio ^^radio.xml Wrote:<?xml version="1.0" encoding="UTF-8"?>
<radioplayer title="ma radio" icon="1.png" focus_icon="2.png">
<info author="moi" radioplayer_url="file:/index.html" homepage_url="http://google.fr" comment="ma première radio" copyright="CC:by-nc-sa" />
</radioplayer>
maintenant déplacer votre XML sur prscompiler.exe et HOP votre fichier PRS est apparue ! pas trop dur
?passons au chose sérieuses ...
6.2 créer le fichier HTML de la radio
pour une liste complette des fonctions du RadioPlayer PSP passez voir ici :
http://psp-online.net/ultimate-portal/UP4PSP/radio/
vous y trouverez aussi des exemples ...
/!\ a savoir /!\
quand le navigateur internet est lancé depuis l'onglet radio le module radio n'est pas actif !! il nous faut donc l'activer avec une balise HTML qu'on pet placer n'importe ou :
<object name="psp" type="application/x-psp-extplugin"></object>
voila ! maintenant le navigateur peut lire des stream audio etc...
nous allons voir dans les second post les fonctions javascript capable de controler l'objet x-psp-extplugin et c'est promis , on va s'eclater
![[apercu]](http://img29.imageshack.us/img29/5892/firebugi.png){kind=link}