As I taught Javascript (and jQuery) in practice
There is absolutely no mood to go beyond the content in the notes about Couchdb or Strophe JS and, possibly, XMPP as a whole, so I'll tell you how I learned JavaScript.
Since experience has shown that without the immediate use of the knowledge gained in practice, knowledge disappears from my head at a fantastic speed, I decided to write something useful for myself. And because at that moment I felt the need for a web-face for Amarok and I couldn’t google it (at least I liked it), the question of applying strength and acquired knowledge was decided by itself.
Disclaimer: This article is not about “How to learn JS in a month” - I don’t know it myself.
The drama "How steel was tempered ^ H ^ H development was developed" can be watched in git log.
This is just a description without thoughtful conclusions and at the end a couple of questions for those who know JS better.
Since I work at work, as the name implies, I work, everything was written in moments of unloaded and other lunch breaks.
It took 2 months of dirty time, without a week, of pure time - reading material, googling, thinking and writing the code directly - a week, according to a subjective assessment.
It all started with pure JS, and ended with a dense use of jQuery {-UI}.
Total, we have:
- Switching tracks (back and forth, loss, stop, pause)
- Display information for the track being played: current position, total time, progress, artist: name.
- Volume slider (stock design, don't kick!)
- Div with tabs for playlist and for file browser .
Planned:
- To make a human design (for me it is the most difficult, because a draftsman from me to the letter "He", but not "good" at all).
- Improve, in little things, usability - like clickable rows in a playlist table so that you can switch tracks in random order.
- Review the code amarok.js for throwing excess and overall harmony.
I would like to reasonably criticize amarok.js codeand general application logic tips.
Git watch here
UPD:
While I usually like books from Apress, both of the jQuery books I used were published by Packt - Learning jQuery 1.3 and jQuery UI 1.7 The User Interface Library for jQuery . The first one very clearly describes what is the benefit of using the jQuery library and how to use it at all, the second one illuminates the jQuery-UI library based on jQuery for creating animations, effects and widgets.
Excellent documentation is posted 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 to be subjectively easier to learn with more accessible information.
Perhaps the topic should be called “Programming the web-face for amarok using JS”, but I wanted to emphasize that creating an application larger than synthetic synthetic examples would be much more sense, however, without missing a chance to show the resulting code.
Since experience has shown that without the immediate use of the knowledge gained in practice, knowledge disappears from my head at a fantastic speed, I decided to write something useful for myself. And because at that moment I felt the need for a web-face for Amarok and I couldn’t google it (at least I liked it), the question of applying strength and acquired knowledge was decided by itself.
Disclaimer: This article is not about “How to learn JS in a month” - I don’t know it myself.
The drama "How steel was tempered ^ H ^ H development was developed" can be watched in git log.
This is just a description without thoughtful conclusions and at the end a couple of questions for those who know JS better.
Time spent.
Since I work at work, as the name implies, I work, everything was written in moments of unloaded and other lunch breaks.
It took 2 months of dirty time, without a week, of pure time - reading material, googling, thinking and writing the code directly - a week, according to a subjective assessment.
Components:
- Django - shows the muzzle itself and calls the necessary functions through the dbus interface.
- Amarok2 - I personally don’t like A2 at all, but since I will only see a home-made design, and kde4 is on the target machine, I did not find it necessary to aim at the first Amarok. Moreover, it does not seem difficult to replace calls through dbus with the same via dcop.
- Logic is provided by binding 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:
- Amarok Dbus Bindings
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() - A script that implements control logic.
Something left on bare JS Something long rewritten using jQuery {-UI}function metadata() {
var statusElem = document.getElementById('metadata');
statusElem.innerHTML = controller2('/metadata/');
};function highlightCurrentTrack() {
// Highlights current track
var current_track = controller2('/track/');
$("#playlisttable tr.hlight").toggleClass('hlight');
$("tr#track"+current_track).toggleClass('hlight');
} - Directly interface:
- Control buttons. These are amarok.js - calls to a special kind of links (for example, / volume / set / (\ d {1,3}) /).
- Information about the current track - access to / metadata /.
- Progress indicator of lost time - progressbar via jQuery-UI.
- Volume control slider - via jQuery-UI slider.
- A playlist is also formed by calling playlist () - in fact, it is $ .getJSON ('/ playlist / json /' and forming a table with a list.
- The file browser is implemented using the recursive function to bypass a given directory (~ / muzak, for example) and make it minimized and clickable using jQuery.
What is ready
- Switching tracks (back and forth, loss, stop, pause)
- Display information for the track being played: current position, total time, progress, artist: name.
- Volume slider (stock design, don't kick!)
- Div with tabs for playlist and for file browser .
Known bugs
- The complete lack of design!
- A running Amarok is required, if it is absent or restarted, we have an error, because bus = dbus.SessionBus ().
- Problems with displaying the current state of Amarok if the page refreshed while playing music. Because it is impossible to get information about the playing status (playing | paused | stopped).
- And, yes, the application has no name!
Planned:
- To make a human design (for me it is the most difficult, because a draftsman from me to the letter "He", but not "good" at all).
- Improve, in little things, usability - like clickable rows in a playlist table so that you can switch tracks in random order.
- Review the code amarok.js for throwing excess and overall harmony.
I would like to reasonably criticize amarok.js codeand general application logic tips.
Git watch here
UPD:
Sources
While I usually like books from Apress, both of the jQuery books I used were published by Packt - Learning jQuery 1.3 and jQuery UI 1.7 The User Interface Library for jQuery . The first one very clearly describes what is the benefit of using the jQuery library and how to use it at all, the second one illuminates the jQuery-UI library based on jQuery for creating animations, effects and widgets.
Excellent documentation is posted 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 to be subjectively easier to learn with more accessible information.
Perhaps the topic should be called “Programming the web-face for amarok using JS”, but I wanted to emphasize that creating an application larger than synthetic synthetic examples would be much more sense, however, without missing a chance to show the resulting code.