How I taught Javascript (and jQuery) in practice

There is absolutely no mood to go further than the content in the notes about Couchdb or Strophe JS and, possibly, XMPP as a whole, so I’ll tell you how I taught JavaScript.

Since experience has shown that, without immediately using the knowledge gained in practice, knowledge disappears from my head with fantastic speed, I decided to write something useful for myself. And since at that moment I felt the need for a web-face for Amarok and I could not googling it (at least, the one I liked), the question of the application of forces and the knowledge gained decided on its own.

Disclaimer: this article is not about “How to learn JS for a month” - I do not know it myself.
Drama "How the steel was tempered ^ H ^ H moved development" anyone can look in git log.
This is just a description without profound conclusions and at the end a couple of questions to those who know JS better.
')

Elapsed time.

Since I am at work, as the name implies, I work, everything was written during moments of unloading and other lunch breaks.
The dirty time it took 2 months without a week, pure - reading the material, google, thinking and writing the code directly - a week, according to a subjective assessment.

Components:

• Django - shows the face itself and calls the necessary functions through the dbus-interface.
• Amarok2 - I personally don’t like the A2 at all, but since I’m only going to see a home-made design and kde4 on the target machine, I didn’t consider it necessary to aim at the first Amarok. Moreover, it is not difficult to replace calls through dbus with the same calls through dcop.
• The logic is provided by strapping from js-scripts, learning to write which was the main task.

Get to the point!

It all started with pure JS, and ended with a dense use of jQuery {-UI}.
Total, we have:

1. Dbus-bindings to Amarok about this type
   
   import dbus
bus = dbus.SessionBus()
player = bus.get_object("org.mpris.amarok", "/Player")

..

def action(request, action, value):
'''1 input value, no output. Reporting if needed.'''
if action == 'set': player.VolumeSet(int(value))
if action == 'up': player.VolumeUp(int(value))
if action == 'down': player.VolumeDown(int(value))
if action == 'setposition':
current_track = int(media.GetCurrentTrack())
meta = media.GetMetadata(current_track)
length = int(meta['mtime'])#331000
#logging.debug(int(length*float(value)))
player.PositionSet(int(length*float(value)))
if action == 'add': addTrack(value)
if action == 'del': delTrack(value)
return HttpResponse()

   
   
2. A script that implements control logic.
   Something left on the bare js
   function metadata() {
var statusElem = document.getElementById('metadata');
statusElem.innerHTML = controller2('/metadata/');
};
   
   Something rewritten long ago using jQuery {-UI}
   function highlightCurrentTrack() {
// Highlights current track
var current_track = controller2('/track/');

$("#playlisttable tr.hlight").toggleClass('hlight');
$("tr#track"+current_track).toggleClass('hlight');
}

   
   
3. Directly interface:
   - Control buttons. This is amarok.js - calls to a special kind of links (for example, / volume / set / (\ d {1,3}) /).
   - Information about the current track - appeal to / metadata /.
   - Progress indicator of lost time - progressbar via jQuery-UI.
   - Slider volume control - slider via jQuery-UI.
   - A playlist is also formed by calling the playlist () - in fact, this is $ .getJSON ('/ playlist / json /' and the formation of a table with a list).
   - The file browser is implemented using the recursive function of traversing a given directory (~ / muzak, for example) and is reduced to a collapsed and clickable view using jQuery.
   

What's ready

- Switch tracks (back and forth, play, stop, pause)
- Display information for the track being played: current position, total time, progress, artist: title.
- Volume level slider (stock design, do not kick!)
- Div with tabs for playlist and file browser .

Known bugs

• Complete lack of design!
• A running Amarok is required, in its absence or restart we have an error, because bus = dbus.SessionBus ().
• Problems with the display of the current state of Amarok, if the page failed while playing music. Because it is impossible to get information about the playback status (playing | paused | stopped).
• And yes, the application has no name!

Scheduled:
- Make a human design (for me it is the hardest, because the draftsman of me with the letter “He”, but not at all “good”).
- Improve, in trivia, usability - like clickable lines in the playlist table, so that you can switch tracks in random order.
- Revise the amarok.js code for discarding unnecessary and overall harmony.

I would like to reasonably criticize the amarok.js code and general tips on the logic of the application.

Git watch here

UPD:

Sources

With the fact that Apress usually likes books, both of the jQuery books I used were published by Packt - this is Learning jQuery 1.3 and jQuery UI 1.7 . The first one is very lucidly described what the benefits of using the jQuery library are and how to use it in general, the second one covers the jQuery-UI library, which is based on jQuery for creating animations, effects and widgets.
Excellent documentation is available directly on jQuery.com (plugins - plugins.jquery.com ).

Until I rewrote the Ajax part in pure JS, the Introduction to Ajax and xmlhttprequest.ru helped me a lot .

At the very beginning, the choice was between jQuery and Prototype, but jQuery seemed subjectively easier to master with more accessible information.

Perhaps the topic should be called “We program the web for amarok using JS”, ​​but I wanted to emphasize that by creating an application larger than the training synthetic examples, it turns out much more sense, however, without missing a chance to show the resulting code.