Javascript Select Menu Item & Tool

Question

I am brand new to javascript and quite overwhelmed trying to learn this language. I am trying to convert extensions for Photoshop that were created with Configurator 4 (in case some of you may not know, these panels will no longer be supported in future versions of Photoshop).
I need to create some HTML panels that use javascript. If someone could help me get started with some basic javascript I would be greatly appreciative.
Here is what I need to get started:
1. Tabs at the very top for access to different panel layers.
2. Open menu item with button connected to javascript.
3. Select tool from javascript.
I have found the documentation a bit scarce for non-coders (Hello Adobe), so if someone could show me how the above would work then I probably can figure out the rest.
Thanks in Advance - Sam

Answer 1

Thank you - that's the ticket.
For both tool and menu item I had ScriptingListenerJS active and it gave me the javascript for selecting a tool and also a menu item.
I will look into the creating tabs on the panel in html.
Another question:
I am working with the "Hello World" extension example and am a bit confused by the main.js file.
(function () {
    'use strict';
    var csInterface = new CSInterface();
    // Reloads extension panel
    function reloadPanel() {
        location.reload();
    function init() {
        themeManager.init();
        $("#btn_reload").click(reloadPanel);
        $("#btn_test").click(function () {
            csInterface.evalScript('sayHello()');
        $("#new_doc").click(function () {
            csInterface.evalScript('newDoc()');
         $("#myNewDoc").click(function () {
            app.documents.add();
    init();
On the html page there is this: <button id="btn_test">Call ExtendScript</button>
On the main.js file there is this:
$("#btn_test").click(function () {
            csInterface.evalScript('sayHello()');
What does the "$" mean and what does the "#" mean in front of "btw_test".
Thanks in advance - Sam