Forums GAMERGEN

[DOC] Créer un portail, le Javascript et la radio

Règles du forum
Avant de poser votre question, commencez par faire une recherche sur le forum.
Nous mettons également à votre disposition un lexique et une FAQ.
Pour éviter toute censure ou fermeture de votre topic, veuillez lire les règles en vigueur.

[DOC] Créer un portail, le Javascript et la radio

Message non lupar biscottealacrevette » 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>:
Code: Select All Code
<html>
  <head>
    <script>mon code java-script</script>
  </head>
  <body>
    cette page contient un bout de java-script
  </body>
</html>
la deuxième consiste a intégrer un script depuis un fichier externe :
Code: Select All Code
<script src="file:/PSP/COMMON/monPortail/script.js"></script>
le fichier script.js doit contenir l'équivalent de ce qui aurait était écrit 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)
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épondeuse :) enchanté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]
le javascript renvoi une liste (d'ou le S a ElementS) de tout les div de ma page , ici j'ai demander le div 0 (le premier de la liste) cette méthode est assez peu recommencer car si vous placer un div avant celui déjà existant toute la liste sera décalé
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];
vous aurez aussi compris qu'ici le javascript renvoi une liste de tout les objet contenant le nom monDiv et nous avons recuperer le premier.
dernière méthode , la plus connue et la plus sure :
Code: Select All Code
var monElement = document.getElementById('maDiv');
ici le javascript scan le document a la recherche d'un élément d'on l'attribut id vaut maDiv , si dans la même page vous avez deux objet avec le même id le javascript prendra le dernier ... et comme vous êtes sensé n'en avoir qu'un sur la page , le javascript ne renvoi pas de liste , donc pas de [n] a ajouter et pas de S a Element, pratique non :3

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 :
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>
oui, vous pouvez mettre des image png 64*64 pour votre radio ^^
maintenant déplacer votre XML sur prscompiler.exe et HOP votre fichier PRS est apparue ! pas trop dur :D ?

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 :D
Dernière édition par kba le 05 Fév 2010, 16:40, édité 12 fois.
biscottealacrevette Gamer Hardcore
Gamer Hardcore
Messages: 750
Inscription: 28 Jan 2010, 20:54

Re: [TUTO] - Créer un portail+radio (pro)

Message non lupar biscottealacrevette » 23 Mai 2009, 15:58

donc maintenant que vous maitrisez comme un dieux le JavaScript on passe au chose serieuse :

avant de lire un stream il nous faut regler le son au max ! avec :
Code: Select All Code
psp.sysRadioSetMasterVolume(255);
psp.sysRadioSetSubVolume(255);

vous aurez remarquez que les 255 sont sans " " car ce ne sont pas des chaines mais des valeures :)
bref , une fois notre son a fond on lance la lecture du stream :
Code: Select All Code
psp.sysRadioPlayStream("http://mon.site.fr/stream.mp3");

il est possible de mettre en deuxieme argument le userAgent du player :
Code: Select All Code
psp.sysRadioPlayStream("http://mon.site.fr/stream.mp3","VLC media player");

ici on se fait passer pour VLC ...

donc pour résumer sa nous donne :


<a href="#" onclick="psp.sysRadioSetMasterVolume(255);psp.sysRadioSetSubVolume(255);psp.sysRadioPlayStream("http://mon.site.fr/stream.mp3","VLC media player");">lire</a>

maintenant mettons tout ca dans une fontion pour eviter d'avoir a tour retaper a chaque fois :
<script>
function play(url){
psp.sysRadioSetMasterVolume(255);
psp.sysRadioSetSubVolume(255);
psp.sysRadioPlayStream(url,"VLC media player");
}
</script>
<a href="#" onclick="play('http://mon.site.fr/stream.mp3')">play</a> attention a utiliser des cotes simples lorsque le codes est entre des " ".

et pour ce simplifier encore plus la vie :
<script>
function play(url){
psp.sysRadioSetMasterVolume(255);
psp.sysRadioSetSubVolume(255);
psp.sysRadioPlayStream(url,"VLC media player");
}
</script>
<select onchange="play(this.options[this.selectedIndex].value)">
<option>==liste de stream==</option>
<option value="http://monsite.fr/stream.mp3">monsite</option>
<option value="http://lesite.fr/stream.mp3">lesite</option>
</select>
ici la valeur de option est envoyer a la fonction play() pratique non ?

voila ! vous avez créer votre radio player en HTML en utilisant un peu de Javascript ...
Dernière édition par kba le 23 Mai 2009, 21:20, édité 1 fois.
biscottealacrevette Gamer Hardcore
Gamer Hardcore
Messages: 750
Inscription: 28 Jan 2010, 20:54

Re: [TUTO] - Créer un portail+radio (pro)

Message non lupar urbano25_1 » 23 Mai 2009, 17:05

salut, tu as obulier les balises suivantes :

<center>
<p align="left">
<p align="right">
<br>
<hr>


sinon c'est très bien merci pour le tutoriel
Avatar de l’utilisateur urbano25_1

Re: [TUTO] - Créer un portail+radio (pro)

Message non lupar napster23 » 23 Mai 2009, 21:42

Merci biscotelacrevete , sinon j'arrive pas as comprendre le javascript.
Always Look as Far as Possible!!!
napster23 Gamer Pro
Gamer Pro
Messages: 214
Inscription: 29 Juil 2010, 09:24
Localisation: Annaba,
Prénom: Fares
Pays: Algerie
Sexe: Homme

Re: [TUTO] - Créer un portail+radio (pro)

Message non lupar [Yaourt] » 24 Mai 2009, 19:15

Passage en post-it, merci à toi.

Par contre, désolé, mais il faut éviter les sondages pour les tuto. Ce n'est vraiment pas utile et ça gêne la visibilité des post-its.
[Yaourt] Gamer Or
Gamer Or
Messages: 5724
Inscription: 20 Mai 2009, 12:13
Pays: France

Re: [TUTO] - Créer un portail+radio (pro)

Message non lupar biscottealacrevette » 24 Mai 2009, 21:06

je sait mais c'etait pas un sondage au hazars , je voulais connaitre le niveau global des dev du forum pour adapter au mieux et ainsi expliquer du mieux possible sans viser trop haut ... en tout cas merci pour le post-it :)
biscottealacrevette Gamer Hardcore
Gamer Hardcore
Messages: 750
Inscription: 28 Jan 2010, 20:54

Re: [TUTO] - Créer un portail+radio (pro)

Message non lupar Blakred » 26 Mai 2009, 17:07

Lien pour le PRS Compiler mort

sinon c'est bizard car quand je met le fichier XML dans le PRS compiler sa me crée un TMP, c'est normal?

problème réglé mais dès que je l'ouvre avec internet explorer il veu que je télécharge le fichier >_<
Blakred Gamer Hardcore
Gamer Hardcore
Messages: 751
Inscription: 29 Déc 2007, 01:00
Prénom: Mathieu
Pays: France
Sexe: Homme

Re: [TUTO] - Créer un portail+radio (pro)

Message non lupar Skami 18 » 01 Juin 2009, 10:39

napster23 Wrote:Merci biscotelacrevete , sinon j'arrive pas as comprendre le javascript.

Le JS est un language orienté objet, comme Python...
Voilà des tutos du Site Du Zer0:
-Tout sur le Javascript
-DHTML et Javascript (sûrement le plus intéressant même si j'ai pas encore lu...)
Un site qui a l'air bien:http://web.developpez.com/

Sinon merci pour ce tuto: je vais pouvoir faire un lecteur maintenant... :D

EDIT: @Blakred:
Tu devrai prendre Firefox...
Avatar de l’utilisateur Skami 18 Gamer du Dimanche
Gamer du Dimanche
Messages: 46
Inscription: 01 Mai 2009, 17:15
Localisation: @skami-laptop:~$

Re: [GUIDE] Créer un portail, le Javascript et la radio

Message non lupar lauasse » 27 Juin 2009, 11:00

Merci pour le tuto bisctotte :wink:
lauasse Gamer Hardcore
Gamer Hardcore
Messages: 611
Inscription: 15 Sep 2012, 11:25
Pays: France

Re: [GUIDE] Créer un portail, le Javascript et la radio

Message non lupar Satyan78 » 29 Juin 2009, 17:47

^^ Saphire tu gere ^^ je viens de piger que pour les icone il falllait faire un tableau MERCI :D :D :D :D :D :D :D tu es mon dieu ^^ (juste un de tes surnom non?)
Ps: moi c'est $atYan ^^ et un question!! pk les portail de du style Kersamhome et Seven machin ressemble au tien?
Satyan78 Gamer Débutant
Messages: 6
Inscription: 21 Mar 2009, 23:22

Re: [GUIDE] Créer un portail, le Javascript et la radio

Message non lupar biscottealacrevette » 30 Juin 2009, 15:59

salu $atYan ^^ si un concept ou une création est reprise par la communauté c'est qu'elle a du potentiel :) en tout cas c'est bon signe ^^

une fois que tu a bien compris les bases du HTML je te conseil de continuer sur le CSS puis de finir avec le JavaScript (qui est le langage web client le plus ardu)
biscottealacrevette Gamer Hardcore
Gamer Hardcore
Messages: 750
Inscription: 28 Jan 2010, 20:54

Re: [GUIDE] Créer un portail, le Javascript et la radio

Message non lupar rapboy_49 » 16 Juil 2009, 21:20

j'aurai bien essayé mais je suis pas en CF.

hs : c'est rab&boy celui de UP :mrgreen:
Avatar de l’utilisateur rapboy_49 Gamer Hardcore
Gamer Hardcore
Messages: 611
Inscription: 16 Juil 2009, 16:25
Localisation: GPS, Tournez à gauche.
Pays: France

Suivante

 

Retourner vers Blabla