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:
Static – Javascript
2 – Verifique a estrutura do seu projeto para o template e o javascript, use a figura abaixo para referencia:
Django – diretórios
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:
Django – App – Código – Navegador
4 – Teste a sua aplicação entrando e saindo do campo de texto para o nome e o evento javascript será disparado:
Django – Form – Javascript
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 ';
}
Ricardo Mantovani
Desenvolvimento Código Aberto 