NodeJs application not executing code of clientside Js Files

Question

I have just created a nodejs application(that uses expressjs and jade). I tried to implement jQuery but noticed it wasn't working. I then tried a simple test creating a javascript file with a simple function and call it from my view. For some reason I get a ReferenceError exception.

The browser does not complain that the Js file is missing, however it doesn't appear in the source list.

This is the code from the simple javascript file(The alert also doesn't work)

//index.js
    alert('foo');
    function foo(){
        alert('javascript!!');
    };

Here is the code of the app.js file:

var express = require('express');
var path = require('path');
var favicon = require('static-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');

var routes = require('./routes/index');
var users = require('./routes/users');

// Database setup
var mongo = require('mongodb');
var monk = require('monk');
var db = monk('localhost:27017/myApplication');

var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');

app.use(favicon());
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded());
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

// Make our db accessible to our router
app.use(function(req,res,next){
    req.db = db;
    next();
});

app.use('/', routes);
app.use('/users', users);




/// catch 404 and forwarding to error handler
app.use(function(req, res, next) {
    var err = new Error('Not Found');
    err.status = 404;
    next(err);
});

/// error handlers

// development error handler
// will print stacktrace
if (app.get('env') === 'development') {
    app.use(function(err, req, res, next) {
        res.status(err.status || 500);
        res.render('error', {
            message: err.message,
            error: err
        });
    });
}

// production error handler
// no stacktraces leaked to user
app.use(function(err, req, res, next) {
    res.status(err.status || 500);
    res.render('error', {
        message: err.message,
        error: {}
    });
});


module.exports = app;

and this the code of my view

doctype html
html
    head
        title My Application

        link(rel='stylesheet', href='/stylesheets/style.css')
        link(rel='stylesheet', href='/stylesheets/style-desktop.css')
        link(rel='stylesheet', href='/stylesheets/jquery-ui-1.10.4.min.css')
        link(rel='stylesheet', href='/stylesheets/style-desktop.css')

        link(rel='stylesheet', href='//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css')

        //script(type='text/javascript' href='/javascripts/jquery-1.10.2.js')
        //script(type='text/javascript' href='/javascripts/jquery-ui-1.10.4.min.js')
        script(type='text/javascript' href='/javascripts/index.js')
        script(type='text/javascript').
            foo();
            /*
            $(function() {
                console.log('test');
                alert('foo');
            });
            */

    body.homepage
        div#tabs
            ul
                li
                    a(href="#tabs-1") Nunc tincidunt
                li
                    a(href="#tabs-1") Nunc tincidunt
                li
                    a(href="#tabs-1") Nunc tincidunt
            div#tabs-1
                p LOL
            div#tabs-2
                p LOL2
            div#tabs-3
                p LOL3

This is a screenshot of the sources and console in chrome. Please note that if I click on the url of the javascript file in the elements tab It directs me to the file. So the path appears to be correct.

This is a screenshot of my file structure

Answer 1

As jedigo said in the comments, the issue was that I used "href" instead of "src" to refer to my javascript files which caused the issue.

Silly mistake from my part