How to access a ManagedBean through an external js file?

How do I access a managed bean jsf through an external javascript file? I'm trying to access it as follows:

  $("#botaoCadastroMaterial").click(function(){
   '#{cadastroMaterialController.salvar()}'; 
});

but it is not working.

Below is my xhtml:

<?xml version="1.0" encoding="UTF-8"?>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html" 
    template="../template/template.xhtml">

    <ui:define name="corpoPagina">
        <div id="divCadastroMaterial">
        <h1 style="width:100%;text-align:center;">Cadastro de Material</h1>
            <h:form prependId="false" id="formularioCadastroMaterial">
                <h:outputLabel value="Titulo"/>
                <h:inputText class="form-control"/>
                <h:outputLabel value="Categoria"/>
                <h:inputText class="form-control"/> 
                <h:commandButton class="btn btn-primary" value="Cadastrar" id="botaoCadastroMaterial"/>
            </h:form>               
        </div>
    </ui:define>

</ui:composition>