Desenvolvimento Código Aberto

O Django possibilita trabalhar com Javascript de um modo automático e fácil, um destes modos é utilizando diretórios estáticos. Websites geralmente precisam servir arquivos adicionais, tais como imagens, JavaScript, ou CSS. Em Django, nos referimos a esses arquivos como arquivos estáticos e você pode configura-los facilmente utilizando algumas variáveis disponíveis no arquivo de configuração em um projeto Django. Um outro modo de utilizar Javascript e CSS em Django é utilizando os Form Assets que permitem utilizar uma combinação exata de CSS e JavaScript necessários para uma determinada página, dependendo dos widgets que estão em uso nessa página.

Static: https://docs.djangoproject.com/en/1.7/howto/static-files/

Form Assets: https://docs.djangoproject.com/en/1.7/topics/forms/media/

Usando uma Biblioteca Externa

1 – Crie um projeto e uma aplicação Django e configure o banco de dados MySQL, o diretório de templates e arquivos estáticos adequadamente para isto veja o código abaixo para o arquivo do projeto settings.py. Crie seu modelo, visão, template e form também de acordo os arquivos abaixo. Crie o arquivo meujsteste.js dentro das pastas estáticas que você também precisa criar chamadas assets/javascript:

2 – Verifique a estrutura do seu projeto para o template e o javascript, use a figura abaixo para referencia:

3 – Rode sua aplicação, no navegador clique com o botão direito e escolha exibir código fonte, verifique que os atributos do form e a variável estática do template formaram o HTML necessário para que os eventos javascript funcionem corretamente com o formulário Django:

4 – Teste a sua aplicação entrando e saindo do campo de texto para o nome e o evento javascript será disparado:

Exemplo:

Neste exemplo utilizamos Javascript através das configurações estáticas para imprimir na página os eventos de entrada e saída do mouse em um Widget CharField do Django utilizando atributos adicionais para criar o código HTML.

Python

settings.py

"""
Django settings for MeuDjango project.

For more information on this file, see
https://docs.djangoproject.com/en/1.6/topics/settings/

For the full list of settings and their values, see
https://docs.djangoproject.com/en/1.6/ref/settings/
"""

# Build paths inside the project like this: os.path.join(BASE_DIR, ...)
import os
BASE_DIR = os.path.dirname(os.path.dirname(__file__))

# Quick-start development settings - unsuitable for production
# See https://docs.djangoproject.com/en/1.6/howto/deployment/checklist/

# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = '*0qj3@ul9n3k)%xbgxfqwwxm!+2f$1&)i*k1ft85(b-7kz)9q^'

# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True

TEMPLATE_DEBUG = True

ALLOWED_HOSTS = []

# Application definition

INSTALLED_APPS = (
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'meusite',
)

MIDDLEWARE_CLASSES = (
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',

)

ROOT_URLCONF = 'MeuDjango.urls'

WSGI_APPLICATION = 'MeuDjango.wsgi.application'

# Database
# https://docs.djangoproject.com/en/1.6/ref/settings/#databases

DATABASES = {
    'default': {
        'NAME': 'DAsandbox',
        'ENGINE': 'mysql.connector.django',
        'USER': 'root',
        'PASSWORD': 'minhasenha',
        'OPTIONS': {
          'autocommit': True,
        },
    }
}

# Internationalization
# https://docs.djangoproject.com/en/1.6/topics/i18n/

LANGUAGE_CODE = 'en-us'

TIME_ZONE = 'UTC'

USE_I18N = True

USE_L10N = True

USE_TZ = True

# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/1.6/howto/static-files/

STATIC_URL = '/static/'

# Django - diretorios estaticos
STATICFILES_DIRS = (os.path.join(BASE_DIR, "static"),)

# Django - Templates
TEMPLATE_DIRS = (os.path.join(BASE_DIR, "static", "template"),)

model.py

from django.db import models

# Cria modelo
class Funcionario (models.Model):
    nome = models.CharField(max_length=30)
    sobrenome = models.CharField(max_length=50)
    cargo = models.CharField(max_length=50)
    salario = models.DecimalField(max_digits=19, decimal_places=10)

    # Define unicode para o Django Admin
    def __unicode__(self):
        return self.nome

view.py

from django.shortcuts import render, render_to_response, RequestContext
from django.http import HttpResponse

# Importa form
from meusite.forms import MeuForm

# Exibe View
def home(request):

    # Cria form
    form = MeuForm(request.POST or None)   

    # Valida e salva
    if form.is_valid():
        salvar = form.save(commit=False)
        salvar.save()
        return HttpResponse("Dados inseridos com sucesso!")

    # Chama Template
    return render_to_response("devaberto.html",
                              locals(),
                              context_instance = RequestContext(request))

template – devaberto.html

{% load static %}
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<script type="text/javascript" src='{% static "assets/javascript/meujsteste.js" %}'></script>
	</head>
	<body>
		<div>
			<header>
				<h1>Desenvolvimento Aberto</h1>
				<h2>Django - Validations </h2>
			</header>
			<div>
				<p>
					Meu Formulário
				</p>
				<form method="post" action="">
					{% csrf_token %}
					{{ form.as_p }}
					<input type="submit" />
				</form>
			</div>
		</div>
		<!-- Div - logs do evento javascript -->
		<div id="meulog">  </div>

	</body>
</html>

forms.py

from  django import forms

# Importa modelo
from models import Funcionario

# Cria classe do form para o modelo
class MeuForm(forms.ModelForm):
    nome = forms.CharField(widget=forms.TextInput(attrs={'onmouseover':'meuMouseOver()', 'onmouseout':'meuMouseOut()'}))
    sobrenome = forms.CharField()
    cargo = forms.CharField()
    salario = forms.DecimalField()

    # Associa formulario ao modelo
    class Meta:
        model = Funcionario

    # Django Validations  - customizar
    def clean_sobrenome(self):
        snome = self.cleaned_data['sobrenome']
        if len(snome) <= 3:
            raise forms.ValidationError("Sobrenome precisa conter mais de 3 caracteres.")
        return snome

Javascript – meujsteste.js

// Desenvolvimento Aberto
// Javascript teste

function meuMouseOver() {
    var div = document.getElementById('meulog');

    div.innerHTML = div.innerHTML + 'Você entrou no campo nome ';
}

function meuMouseOut() {
    var div = document.getElementById('meulog');

    div.innerHTML = div.innerHTML + 'Você saiu do campo nome ';
}