Javascript Tutorials

JavaScript Zone

Thompp Nation > JS Zone > JS Scripts > Match Fixtures Tutorial

Menu

Bookmark This Page

Introduction
Pre-requisites
Installation

16. Match Fixtures JavaScript

Introduction

Links

Thompp's Javascripts Index

Thompp nation Home Page

Use this script to display, for example, your team's fixtures and results for the current season. You could also display results for previous seasons, provided they are held on separate pages.

You maintain your team's fixtures/results in a simple to use table that is held in a separate JavaScript (.js) file. These matches can be categorised how you please, e.g. into months. Then each category is displayed on your web page. When the user clicks a category, all the fixtures fot that category are displayed in a new window.

Currently this script can only display one table of matches per HTML page, although I may update this script in the future to amend this. Maybe leave it as an exercise to the reader to do this ?

Fixtures Demonstration

Liverpool FC Fixtures/Results for 2002/3

Pre-requisites

there are no pre-requisites for this tutorial

Installation

Update your html page - add the following code as indicated:

1/3. create a javascript called fixtures.js and copy in the following code: =========================================================================== function showgames(pcat) { var i; var ztext; // alert("fixtures.js #1"); ztext = "<div align=center><small><b>Fixtures/Results for " + pcat + "</b></small></div><br>"; ztext = ztext + "<hr><table width=100% !bgcolor='#c0c0c0'>"; ztext = ztext + "<tr><td width=10%><small><small>Date"; ztext = ztext + "<td width=20%><small><small>Opponents (H/A)"; ztext = ztext + "<td width=20%><small><small>Competition"; ztext = ztext + "<td width=10%><small><small>Result (F-A)"; ztext = ztext + "<td width=50%><small><small>Comments"; ztext = ztext + "</table><hr><table width=100%>"; for (i=0; i < fixtab.length ; i++) { if ( pcat == fixtab[i][0] ) { ztext = ztext + "<tr><td width=10%><small><small>"+fixtab[i][1]; ztext = ztext + "<td width=20%><small><small>"+fixtab[i][2]; ztext = ztext + "<td width=20%><small><small>"+fixtab[i][3]; ztext = ztext + "<td width=10%><small><small>"+fixtab[i][4]; ztext = ztext + "<td width=40%><small><small>"+fixtab[i][5]; } } ztext = ztext+"</table><hr><br>"; // alert(ztext); win = window.open("","","scrollbars"); win.document.write(ztext); win.document.close; // alert("fixtures.js #2"); } function showcats() { var i, lastcat = "", count =4; var ztext; var atext; ztext = "<table width=100%>"; for (i=0; i < fixtab.length ; i++) { if ( lastcat != fixtab[i][0] ) { lastcat = fixtab[i][0]; if (count > 3) { ztext = ztext + "<tr>"; count = 0; } count++; atext = "<a href='javascript:showgames("; //+fixtab[i][0]+")'>"; atext = atext + '"' + fixtab[i][0] + '"'; atext = atext + ")'>"; ztext = ztext + "<td width=25%><small><small>"+atext+fixtab[i][0]+"</a>"; } } ztext = ztext + "</table>"; document.write(ztext); } 2/3. create a javascript called mymatches.js (or whatever!) and copy in the following code: =========================================================================================== // liverpool 2002/3 season var fixtab=new Array(); var c=-1; // item list - category, date, opponent, competition, score, comments // July c++;fixtab[c]=new Array("July", "Jul 19", "Le Havre (A)", "Friendly", "1-0", ""); c++;fixtab[c]=new Array("July", "Jul 27", "Wolfsburg (A)", "Friendly", "1-1", "New Senegal signing Diouf scores first goal for Liverpool"); c++;fixtab[c]=new Array("July", "Jul 30", "Lazio (H)", "Friendly", "0-1", ""); // August c++;fixtab[c]=new Array("August", "Aug 02", "Real Madrid (A)", "Real Madrid Centenary Tournament ", "0-2", "Liverpool go into third place play-off with AC Milan"); c++;fixtab[c]=new Array("August", "Aug 04", "AC Milan (A)", "Real Madrid Centenary Tournament ", "2-1", "Liverpool take third place in tournament"); c++;fixtab[c]=new Array("August", "Aug 11", "Arsenal (A)", "FA Community Shield", "", "(BskyB)"); c++;fixtab[c]=new Array("August", "Aug 13", "Chester City (A)", "Friendly", "", ""); c++;fixtab[c]=new Array("August", "Aug 18", "Aston Villa (A)", "Premiereship", "", "(PPV)"); c++;fixtab[c]=new Array("August", "Aug 24", "Southampton (H)", "Premiereship", "", ""); c++;fixtab[c]=new Array("August", "Aug 28", "Blackburn Rovers (A)", "Premiereship", "", ""); 3/3. add the following code to the <body> part of your HTML page: ================================================================== <script src="mymatches.js"></script> <script src="fixtures.js"></script> <script language="JavaScript">  </script>

Page last updated 8th August 2002