Etikettarkiv: jquery

Lär dig JavaScript

Jag har kodat JQuery i många år och har aldrig riktigt skrivit sådär jättemånga rader kod i enbart JavaScript måste jag erkänna. Så tänkte att det nu är dags att tag i JavaScript-kompetensen.

Sökte av marknaden lite efter böcker och införskaffade några stycken som jag skickade in på min läsplatta med hjälp av grymma ReadMill som jag använder för alla mina eBöcker nuförtiden.

Så nu har jag nästan läst klart min första JavaScript-bok och känner att jag har äntligen har mer koll. Testade att göra ett enkelt script som loggar musrörelser på en webbsida och skickar över till servern regelbundet.  Testa mousemove.html här.

Boken som är ett måsteläsning om man vill lära sig JavaScript är följande:

lär dig javascript

Eloquent JavaScript

Stötta gärna den andra upplagan som nu crowdfoundas (första utgåvan av boken är från 2007). Tipstack till Patrik Spathon.

Uploadprogress i PHP

Vill du på ett trevligt och informativt sätt visa dina besökare hur långt deras uppladdning av en fil har gått? Jag har suttit och testat lite olika lösningar och hittade till slut en bra och detta är vad jag har lärt mig på vägen:

Metod ett: APC

Om du har säkerhetspaketet Suhosin inkompilerat i PHP så kan detta ställa till med problem om du använder en metod som förlitar sig på APC för att visa uppladdningsstatus. Suhosin verkar vara standard i Ubuntu Edgy och om du vill ta reda på om du har denna patch eller ej installerad kan du skriva:

[email protected]:~$ php -i|grep Suhosin
This server is protected with the Suhosin Patch 0.9.6.2

Har du inte Suhosin kan du titta här för en av många guider hur du använder APC för uppladdningsstatus

Metod två: uploadprogress.so

Så dags att gå vidare till metod nummer två som heter uploadprogress.so. Detta är en modul till PHP som installeras under Windows eller Linux och kräver minst PHP version 5.2, för att installera under Windows så ladda hem DLL-modulen här exempelvis. Och under Linux så kan du köra följande kommando:

pecl install uploadprogress

Du kan eventuellt få ett felmeddelande tillbaka som ber dig köra ett kommando som innefattar channel://.. etc (och får du ett felmeddelande om att phpize saknas så måste du installera paketet php5-dev). Efter detta lägger du till raden extension=uploadprogress.so längst ner i din php.ini och startar om Apache. Vill du verifiera att modulen används kan du anropa en sida på din webbserver som kör phpinfo() anropet och söka efter uploadprogress.

Det finns nu en viktig sak att göra innan det är dags att sätta igång med JavaScript/PHP-kodande och det är att generera ett unikt ID för varje filuppladdning och det kan man lättast göra genom att lägga till följande rad direkt under FORM taggen i det formulär som har hand om filuppladdningen:

<form action="/post.php" method="POST" id="postform" enctype="multipart/form-data">
<input type="hidden" name="UPLOAD_IDENTIFIER" id="UPLOAD_IDENTIFIER" value="<?
$_SESSION&#91;'uniq_id'&#93; = uniqid();
echo $_SESSION&#91;'uniq_id'&#93;;
?>"/>

Såja, då var det bara två saker kvar. Dels koden för att visa hur uppladdningen går samt koden som sköter hämtandet av denna information.

Skapa då exempelviss progress.php som innehåller något liknande:

<?
session_start();
header( "Expires: Mon, 26 Jul 1997 05:00:00 GMT" ); // disable IE caching
header( "Last-Modified: ". gmdate( "D, d M Y H:i:s" ) ." GMT" );
header( "Cache-Control: no-cache, must-revalidate" );
header( "Pragma: no-cache" );
$p = uploadprogress_get_info($_SESSION&#91;'uniq_id'&#93;);

print '<pre>';
print_r($p);
print '</pre>';
?>

Och ovan PHP-kod skriver då ut följande:

time_start - The time that the upload began (same format as time()).
time_last - The time that the progress info was last updated.
speed_average - Average speed. (bytes / second)
speed_last - Last measured speed. (bytes / second)
bytes_uploaded - Number of bytes uploaded so far.
bytes_total - The value of the Content-Length header sent by the browser.
files_uploaded - Number of files uploaded so far.
est_sec - Estimated number of seconds remaining.

Och då var det bara en sak kvar och det är JavaScriptet som har hand om att hämta denna information från progress.php men det lämnar jag kvar som en övning för läsaren då det skiljer sig en hel del mellan vilket ramverk man använder (jag gillar jQuery).

Jag använder mig sedan av denna snygga bild:

Hittas på barenakedapp.com/the-design/displaying-percentages

jQuery 1.2.6 här

Nu har JavaScript-framework’et jQuery som jag älskar släppts i ny version 1.2.6, med en mängd trevliga förbättringar:

  • Event Handling is 103% Faster
  • CSS Selectors are 13% faster
  • .offset() is 21% faster
  • .css() is 25% faster
  • Dimensions Plugin is Now Part of Core
  • .attr() overhaul
  • .toggle() can now accept more functions

Och en mängd mer buggfixar och förbättringar!

Ladda nya jQuery version 1.2.6 här:

http://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.2.6.min.js