ClojureScript no such namespace - clojure

Question

I am new to Clojure and I am trying to implement some ClojureScript functions in my project. I added [org.clojure/clojurescript "0.0-2138"] to my dependencies in project.clj. I tried for example:
(js/alert "Hello from ClojureScript.")
It says No such namespace: js!
What am I doing wrong? Can anyone help?
Here is my complete project.clj:
(defproject MyProject "0.1.0-SNAPSHOT"
:description "FIXME: write description"
:url "http://example.com/FIXME"
:license {:name "Eclipse Public License"
:url "http://www.eclipse.org/legal/epl-v10.html"}
:dependencies [[org.clojure/clojure "1.5.1"][table "0.4.0"][cljs-uuid "0.0.4"][lein-swank "1.4.5"][midje "1.5.1"]
[mysql/mysql-connector-java "5.1.18"][org.clojure/java.jdbc "0.1.1"]
[ring/ring-jetty-adapter "1.1.6"]
[compojure "1.1.3"]
[hiccup "1.0.2"]
[org.clojure/clojurescript "0.0-2138"]
[domina "1.0.2"]
[prismatic/dommy "0.1.1"]]
:plugins [[lein-cljsbuild "0.3.4"]]
;; cljsbuild options configuration
:cljsbuild {:builds
[{;; CLJS source code path
:source-paths ["src/cljs"]
;; Google Closure (CLS) options configuration
:compiler {;; CLS generated JS script filename
:output-to "resources/public/js/test.js"
;; minimal JS optimization directive
:optimizations :whitespace
;; generated JS code prettyfication
:pretty-print true}}]}
)
This is the file where I am trying to put the ClojureScript function. I am using Eclipse and Clojure REPL.
(ns webapp.pages
(:use [compojure.core :only (defroutes GET)]
[ring.adapter.jetty :as ring])
(:require [clojure.java.jdbc :as sql])
(:require
[ring.util.response :as resp])
(:use [hiccup.page :only (html5 include-css include-js)])
(:use webapp.db)
)
(defn showAlert []
(js/alert "Hello from ClojureScript.")
)
(defn insert-user [firstname lastname email password sex date]
(sql/with-connection db
(sql/insert-values :users
[:name :lastName :email :password :birthDate :gender]
[firstname lastname email password date sex])
)
(resp/redirect "/")
(showAlert)
)
(defn index []
(html5
[:head
[:title "Kladionica"]
[:meta {:name "viewport" :content "width=device-width, initial-scale=1"}]
(include-css "/public/css/bootstrap.min.css")
]
[:body
[:div {:class "modal fade" :id "myModal" :role "dialog" :aria-hidden "true"}
[:div {:class "modal-dialog"}
[:div {:class "modal-content"}
[:div {:class "modal-header"}
[:button {:type "button" :class "close" :data-dismiss "modal"}"x"]
[:h3 "Registracija"]
]
[:div {:class "modal-body"}
[:form {:action "/insert-user" :method "post" :class "form" :role "form"}
[:div {:class "row"}
[:div {:class "col-xs-6 col-md-6"}
[:input {:class "form-control" :style "margin-bottom: 10px;" :name "firstname" :placeholder "Ime" :type "text"}]
]
[:div {:class "col-xs-6 col-md-6"}
[:input {:class "form-control" :style "margin-bottom: 10px;" :name "lastname" :placeholder "Prezime" :type "text"}]
]
]
[:input {:class "form-control" :style "margin-bottom: 10px;" :name "email" :placeholder "Email" :type "email"}]
[:input {:class "form-control" :style "margin-bottom: 10px;" :name "password" :placeholder "Lozinka" :type "password"}]
[:input {:class "form-control" :style "margin-bottom: 10px;" :name "re-password" :placeholder "Ponovljena lozinka" :type "password"}]
[:label {:for ""} "Datum rodjenja"]
[:div {:class "row"}
[:div {:class "col-xs-4 col-md-4"}
[:select {:class "form-control" :name "month"}
[:option {:value "" :disabled "disabled" :selected "selected"} "Mjesec"]
[:option {:value "01"} "Januar"]
[:option {:value "02"} "Februar"]
[:option {:value "03"} "Mart"]
[:option {:value "04"} "April"]
[:option {:value "05"} "Maj"]
[:option {:value "06"} "Jun"]
[:option {:value "07"} "Jul"]
[:option {:value "08"} "Avgust"]
[:option {:value "09"} "Septembar"]
[:option {:value "10"} "Oktobar"]
[:option {:value "11"} "Novembar"]
[:option {:value "12"} "Decembar"]
]
]
[:div {:class "col-xs-4 col-md-4"}
[:select {:class "form-control" :name "day"}
[:option {:value "Day" :disabled "disabled" :selected "selected"} "Dan"]
(for [i (range 1 32)]
[:option {:value i} i]
(inc i))
]
]
[:div {:class "col-xs-4 col-md-4"}
[:select {:class "form-control" :name "year"}
[:option {:value "Year"} "Godina"]
(for [i (range 1900 2015)]
[:option {:value i} i]
(inc i))
]
]
]
[:label {:class "radio-inline"}
[:input {:type "radio" :name "sex" :id "maleId" :value "male"}]
"Musko"
]
[:label {:class "radio-inline"}
[:input {:type "radio" :name "sex" :id "femaleId" :value "female"}]
"Zensko"
]
[:br]
[:br]
[:button {:class "btn btn-lg btn-primary btn-block" :type "submit"} "Registruj se"]
]
]
[:div {:class "modal-footer"}
]
]
]
]
[:div {:class "navbar navbar-inverse navbar-static-top"}
[:div {:class "container"}
[:a {:href "#" :class "navbar-brand"} "TOP Kladionica"]
[:div {:class "navbar-collapse collapse"}
[:ul {:class "nav navbar-nav navbar-right"}
[:li [:a {:href "#myModal" :data-toggle "modal"} "Registracija"]]
[:li {:class "dropdown"}
[:a {:href "#" :class "dropdown-toggle" :data-toggle "dropdown" } "Login" [:b {:class "caret"}]]
[:ul {:class "dropdown-menu" :style "padding:15px;min-width:250px;"}
[:li
[:div{:class "row"}
[:div {:class "col-md-12"}
[:form {:class "form" :role "form" :method "post" :action "login" :accept-charset "UTF-8" :id "login-nav"}
[:div {:class "form-group"}
[:label {:class "sr-only" :for "inputEmail"} "Email adresa"]
[:input {:type "email" :class "form-control" :id "inputEmail" :placeholder "Email adresa" }]
]
[:div {:class "form-group"}
[:label {:class "sr-only" :for "inputPassword"} "Lozinka"]
[:input {:type "password" :class "form-control" :id "inputPassword" :placeholder "Lozinka" }]
]
[:div {:class "checkbox"}
[:label
[:input {:type "checkbox"} "Zapamti me"]
]
]
[:div {:class "form-group"}
[:button {:type "submit" :class "btn btn-success btn-block"} "Login"]
]
]
]
]
]
[:li {:class "divider"}]
[:li
[:input {:class "btn btn-primary btn-block" :type "button" :id "sign-in-google" :value "Google prijava"}]
[:input {:class "btn btn-primary btn-block" :type "button" :id "sign-in-twitter" :value "Twitter prijava"}]
]
]
]
]
]
]
]
[:div {:class "navbar navbar-default navbar-fixed-bottom"}
[:div {:class "alert alert-success alert-dismissable pull-right" :style "display:none"}
[:button {:type "button" :class "close" :data-dismiss "alert" :aria-hidden "true"} "x"]
[:strong "Uspijeh!"] "Uspjesno ste se registrovali!"
]
]
(include-js "//code.jquery.com/jquery-1.10.2.min.js")
(include-js "/public/js/bootstrap.js")
]
)
)

Answer 1

A couple of things here.
First of all, ClojureScript is a separate (but related) language with its own compiler, so you can't just put ClojureScript code in a Clojure file.
Second, ClojureScript needs to be compiled into JavaScript in order to do anything, and then that JavaScript needs to be executed by a JavaScript engine. You can do the compiling with the lein-cljsbuild plugin.
For a quick and easy introduction to ClojureScript, take a look at David Nolen's The Essence of ClojureScript. It will get you up and running in literally seconds, and you can take a look around the generated project.clj file to see how a project can be set up for ClojureScript if you're curious.
However, if you're very new to Clojure, it might be better to get comfortable with Clojure and Leiningen before jumping into ClojureScript. You don't have to, but it might be easier.

Answer 2

As other users are commenting here, you have to separate ClojureScript code from Clojure code (if you use cljsbuild to build cljs code the standard way is separate directories).
Why don't you use Clojure and ClojureScript in the same file?
This is not the exact question, as you should feel the ClojureScript code as Clojure code when typing it. The problem is that when you try to use an external Clojure library (not the core Clojure) in your ClojureScript code, then such external library uses the host JVM classes, while the ClojureScript one uses the host Javascript classes. That's the reason you have to use ClojureScript libraries (libraries adapted to JavaScript classes) inside ClojureScript code, and that's the reason your file is a bit messy.