Créez les fichiers suivants

utilisateurs.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"> 
		<title>utilisateurs</title>
		<link type="text/css" rel="stylesheet" href="utilisateurs.css"/>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
		<script src="utilisateurs.js"></script>
	</head>
	<body>
<!--------------------->
<ul id="utilisateurs">
	<li data-uid="karim" >Karim </li>
	<li data-uid="martin">Martin</li>
	<li data-uid="leila" >Leïla </li>
	<li data-uid="joe"   >Joe C.</li>
</ul>

<div id="affichage">
	<p>Nom :   <span id="nom"  ></span>     </p> 
	<p>Age :   <span id="age"  ></span> ans	</p> 
	<p>Score : <span id="score"></span>		</p> 
</div>

<!--------------------->
	</body>
</html>


utilisateurs.css

body
{
	font-family: sans;
}

#utilisateurs 
{
	width: 150px;
	cursor: pointer;
}
#utilisateurs li:hover
{
	background-color: #fea;
}

#affichage
{
	background-color: white;
	width: 200px;
	border: 1px solid #aaa;
	box-shadow: 1px 1px 2px rgba(0,0,0,.2);
	padding: 10px;
}

#affichage p
{
	margin: 4px;
}

#affichage span
{
	color: #00a;
}


utilisateurs.php

<?php
// Une liste d'utilisateurs, juste pour l'exemple. 
// En pratique on chercherait dans une base de données.
$utilisateurs=array(
			   'joe'   =>array('nom'=>'Joe C.','score'=>34,'age'=>22),
			   'martin'=>array('nom'=>'Martin','score'=>3 ,'age'=>7 ),
			   'karim' =>array('nom'=>'Karim' ,'score'=>45,'age'=>19),
			   'leila' =>array('nom'=>'Leïla' ,'score'=>49,'age'=>23),
	                 );



utilisateurs.js

console.log("Ce programme JS vient d'être chargé");
$(document).ready(function()
{
	console.log("Le document est pret");

        // ......

	console.log("La mise en place est finie. En attente d'événements...");
});