Difference between revisions of "Python-Django/C2/Using-CSS-and-JavaScript-in-Django/English"

From Script | Spoken-Tutorial
Jump to: navigation, search
(Created page with ".")
 
 
(One intermediate revision by one other user not shown)
Line 1: Line 1:
−
.
+
'''Django'''/C2/Using CSS and JavaScript in Django/English
 +
 
 +
'''Title of script:''' Using CSS and JavaScript in Django
 +
 
 +
'''Keywords: '''Video tutorial, CSS, JavaScript
 +
 
 +
 
 +
 
 +
{| border=1
 +
|-
 +
|| Visual cue
 +
|| Narration
 +
|-
 +
|| Slide: CSS and JavaScript in Django
 +
|| Hello and welcome to the spoken tutorial on “'''Using CSS and JavaScript in Django'''”
 +
|-
 +
|| Slide: Learning Objectives
 +
|| In this tutorial, we will learn to:
 +
 
 +
* Add '''CSS''' and '''JavaScript''' files
 +
* Use them with the '''Django App'''
 +
|-
 +
|| Slide: System Requirements
 +
|| To record this tutorial, I am using
 +
 
 +
* '''Ubuntu Linux''' 16.04 OS
 +
* '''Python''' 3.5
 +
* '''Python 3.4-venv''' or higher
 +
* '''gedit Text Editor '''and
 +
* '''Firefox web browser'''
 +
|-
 +
|| Slide: Prerequisites
 +
|| To follow this tutorial, you need to know
 +
 
 +
* How to create '''Templates''' and '''Forms''' in '''Django'''
 +
* If not, then please go through the prerequisite tutorials in this website
 +
|-
 +
|| Slide: CSS & JavaScript
 +
||
 +
* Using '''CSS''' we can set the look and '''style''' for a '''web page'''
 +
* '''JavaScript''' allows us to create dynamic '''web pages'''
 +
|-
 +
|| Slide: Static Files
 +
||
 +
* In '''Django, CSS, JavaScript''' or '''Image''' files are referred as '''Static Files'''
 +
* Conventionally they are stored in a folder called '''static'''
 +
* '''Django''' will look for a '''static files''' in the '''app’s static''' folder
 +
 
 +
|-
 +
|| Open a Terminal window
 +
 
 +
Press CTRl+ALT+T simultaneously
 +
|| Let us open the '''terminal '''by pressing '''Ctrl, Alt''' and '''T '''keys simultaneously on the keyboard.
 +
|-
 +
|| [Terminal]
 +
 
 +
cd '''my-django '''[Enter]
 +
|| Now using '''cd command''', go to the folder '''my hyphen django '''which we had created earlier.
 +
|-
 +
|| [Terminal]
 +
 
 +
Type source myapp_env/bin/activate
 +
 
 +
and press Enter
 +
||  Activate the '''virtual environment myapp underscore env'''.
 +
 
 +
|-
 +
|| [Terminal] cd '''mysite '''[Enter]
 +
|| Go to the folder '''mysite '''using '''cd command'''.
 +
|-
 +
||
 +
|| Here onwards, please remember to press the '''Enter''' key after typing each '''command'''.
 +
|-
 +
|| [Terminal]
 +
 
 +
Type python manage.py runserver [Enter]
 +
|| Start the '''server.'''
 +
|-
 +
|| Open a browser and type http://localhost:8000/blogs/get_blogs
 +
|| Open a '''web browser''' and type the '''URL''' as shown.
 +
 
 +
This will take us to the '''get underscore blogs view function page.'''
 +
|-
 +
|| [browser]
 +
'''Pointing to the Output'''
 +
|| Here, we can see the output as plain text.
 +
 
 +
Using '''CSS''' we will apply some '''styles''' to this page.
 +
|-
 +
|| Switch to Terminal
 +
|| Switch to the '''terminal.'''
 +
|-
 +
|| [Terminal]
 +
 
 +
Press CTRL+SHIFT+T
 +
|| For our convenience, let us work on a separate tab.
 +
 
 +
Press '''Shift, Ctrl '''and '''T '''keys simultaneously.
 +
|-
 +
|| [Terminal Tab 2] Highlight '''my-site'''
 +
 
 +
Type cd mysite
 +
|| Ensure that, we are in the '''my-site''' directory in the new '''terminal '''window.
 +
 
 +
If not, then go to the '''my-site''' directory using the '''cd command.'''
 +
|-
 +
|| [Terminal Tab 2]
 +
 
 +
Type mkdir blog/static [Enter]
 +
|| We’ll create a '''static''' folder to hold our '''CSS''' and '''JavaScript''' files inside the '''blog''' folder.
 +
 
 +
Type '''mkdir <space> blog slash static'''
 +
|-
 +
|| [Terminal Tab 2]
 +
 
 +
Type mkdir blog/static/blog [Enter]
 +
|| Now, create a folder named '''blog '''inside the '''static '''folder.
 +
|-
 +
|| [Terminal Tab 2]
 +
 
 +
Highlight '''static/blog'''
 +
|| '''blog''' folder inside the '''static''' folder is created to avoid '''Name clashes''' between '''apps''' if any.
 +
|-
 +
|| [Terminal Tab 2]
 +
 
 +
Type''' '''mkdir blog/static/blog/css[Enter]
 +
|| Now, we’ll create a folder named '''CSS''' to store the '''CSS''' files inside this new '''blog '''directory.
 +
 
 +
Type''' mkdir <space> blog slash static slash blog slash css'''
 +
|-
 +
|| [Terminal Tab 2]
 +
 
 +
Type: cd blog/static/blog/css
 +
|| Next we’ll create a base '''CSS''' file named '''base.css''' inside the folder '''CSS.'''
 +
 
 +
Go the folder '''CSS''' using the '''cd command.'''
 +
|-
 +
|| [Terminal Tab 2]
 +
 
 +
Type gedit base.css & [Enter]
 +
|| Open the '''base.css''' file in any '''text editor.'''
 +
 
 +
I’ll open it in '''gedit text editor''' by typing
 +
 
 +
'''gedit <space> base dot css <space> ampersand'''
 +
|-
 +
|| [base.css]Type:
 +
 
 +
ul.number { list-style-type: upper-roman;}
 +
|| We are now in '''base.css''' file.
 +
 
 +
Type the code as shown here.
 +
 
 +
|-
 +
|| [base.css] Highlight
 +
 
 +
'''list-style-type: upper-roman'''
 +
|| '''List style type''' property specifies the appearance of a '''list item.'''
 +
 
 +
Here, it is assigned to '''upper roman'''.
 +
|-
 +
|| Press Ctrl+S
 +
|| Save the file.
 +
|-
 +
|| Only narration
 +
|| Next we have to add the '''CSS''' in our '''template''' file '''blogs dot html.'''
 +
|-
 +
|| Switch to Terminal
 +
|| Switch to the '''terminal'''.
 +
|-
 +
|| [Terminal Tab 2]
 +
 
 +
Type cd ../../../.. [Enter]
 +
|| Come back to the '''mysite''' folder using the '''cd command'''.
 +
|-
 +
|| [Terminal] Type gedit blog/templates/blog/blogs.html & [Enter]
 +
|| Then, open the '''blogs.html '''file from the '''templates''' folder in a '''text editor.'''
 +
|-
 +
|| [blogs.html] Type:
 +
 
 +
'''{% load static %}'''
 +
 
 +
'''<!DOCTYPE html>'''
 +
 
 +
'''<html>'''
 +
 
 +
'''<head>'''
 +
 
 +
'''<link rel="stylesheet" type="text/css" href="{% 'blog/css/base.css' %}">'''
 +
 
 +
</head>
 +
 
 +
<body>
 +
 
 +
|| We are inside the '''blogs.html''' file.
 +
 
 +
Above the '''body start tag''', update the code as shown here.
 +
 
 +
|-
 +
|| {% if blogs %}
 +
 
 +
‘’’<nowiki> <ul class="number"></nowiki>'''
 +
 
 +
{% for blog in blogs %}
 +
 
 +
<nowiki><li>{{blog.name}}</li></nowiki>
 +
 
 +
{% endfor %}
 +
 
 +
<nowiki></ul></nowiki>
 +
 
 +
{% else %}
 +
 
 +
<nowiki><p>No Blogs are available.</p></nowiki>
 +
 
 +
{% endif %}
 +
 
 +
</body>
 +
 
 +
</html>
 +
|| Next inside the '''ul start tag''', type the code as shown here.
 +
|-
 +
|| [blogs.html] Highlight
 +
 
 +
<'''link '''rel="stylesheet" type="text/css" href="{% static 'blog/css/base.css' %}">
 +
|| Using the '''link tag''', we have linked our '''CSS''' file to the '''HTML template'''.
 +
 
 +
|-
 +
|| [blogs.html] Highlight
 +
 
 +
<link '''rel'''<nowiki>="stylesheet"</nowiki>''' '''type="text/css" href="{% static 'blog/css/base.css' %}">
 +
|| '''rel attribute''' defines the relationship between the linked file and the '''HTML''' document.
 +
|-
 +
|| [blogs.html] Highlight
 +
 
 +
'''rel="stylesheet"'''
 +
|| '''rel equal to stylesheet '''specifies a persistent or preferred '''style.'''
 +
|-
 +
|| [blogs.html] Highlight
 +
 
 +
'''type'''<nowiki>="text/css"</nowiki>
 +
|| '''type '''specifies the '''MIME type''' of the linked document.
 +
|-
 +
|| [blogs.html] Highlight
 +
 
 +
type='''"text/css"'''
 +
|| The value '''text slash css '''indicates that the '''content''' of the file is '''CSS'''.
 +
|-
 +
|| [blogs.html] Highlight
 +
 
 +
'''href="{% static 'blog/css/base.css' %}"'''
 +
|| '''href '''specifies the location of the linked document.
 +
|-
 +
|| [blogs.html] Highlight
 +
 
 +
href="{% '''static ''''blog/css/base.css' %}"
 +
|| '''Static template tag''' builds the '''URL''' for the given path using the configured '''static''' file '''storage'''.
 +
|-
 +
|| [blogs.html] Highlight
 +
 
 +
'''{% load static %}'''
 +
|| '''load static '''will load the '''static '''files from the '''static '''folder.
 +
|-
 +
|| [blogs.html] Highlight
 +
 
 +
'''<ul class=”number”>'''
 +
|| Here, we added '''class ‘number’''' to the '''template''' for '''CSS''' effect.
 +
|-
 +
|| Press Ctrl+S
 +
|| Save the file.
 +
|-
 +
|| Only Narration
 +
|| We have added the '''CSS style''' to our '''template'''.
 +
 
 +
Now, let us cross verify this.
 +
|-
 +
|| Switch to browser
 +
|| Switch to '''browser''' and refresh the page.
 +
|-
 +
|| [browser]
 +
|| We can see that the '''Blog objects '''are listed in '''Roman letters.'''
 +
|-
 +
|| Only narration
 +
|| Now let us add one more '''style''' to the page.
 +
 
 +
Switch to '''base.css''' file in the '''text editor'''.
 +
|-
 +
|| [base.css] Type:
 +
 
 +
li {
 +
 
 +
color: blue;
 +
 
 +
}
 +
|| Next to the current '''style property''', type the code as shown.
 +
 
 +
This will set the text color to blue for each '''list item'''.
 +
|-
 +
|| [base.css] Highlight
 +
 
 +
color: blue
 +
|| '''color property''' specifies the color of the text.
 +
 
 +
Here, the color of the text is set to '''blue.'''
 +
|-
 +
|| Press: Ctrl +S
 +
|| Save the file.
 +
|-
 +
|| [browser]
 +
Press Ctrl + R
 +
 
 +
Highlight the output
 +
|| Switch to the '''browser''' and refresh the page.
 +
 
 +
Now we can see that the '''Blog objects '''are listed in '''Roman letters.'''
 +
 
 +
And the displayed text color is blue.
 +
|-
 +
|| Only Narration
 +
|| Next, let us add a '''JavaScript''' to '''Django templates'''.
 +
|-
 +
|| [Terminal Tab 2]
 +
 
 +
Type mkdir blog/static/blog/js [Enter]
 +
|| Switch to the second '''terminal.'''
 +
 
 +
Create a folder named '''js''' under '''static slash blog''' directory.
 +
|-
 +
|| [Terminal Tab 2]
 +
 
 +
Type gedit blog/static/blog/js/welcome.js & [Enter]
 +
|| Next create a '''JavaScript''' file named '''welcome dot js''' inside the '''js''' folder.
 +
|-
 +
|| [welcome.js] Type
 +
 
 +
function greet()
 +
{
 +
alert("Welcome to the blog app!");
 +
}
 +
|| We are now inside the '''welcome.js''' file.
 +
 
 +
Type the code as shown here.
 +
|-
 +
|| [Welcome.js] Highlight
 +
 
 +
'''alert'''("Welcome to the blog app!");
 +
|| When the web page opens, the '''alert function''' will open a '''pop-up''' box and display the given message.
 +
 
 +
|-
 +
|| [Welcome.js] Highlight
 +
 
 +
alert('''"Welcome to the blog app!"''');
 +
|| In this case, it will display '''Welcome to the blog app!'''
 +
 
 +
|-
 +
|| Press Ctrl+S
 +
|| We have now added a simple '''JavaScript'''.
 +
 
 +
Save the file.
 +
|-
 +
|| Switch to blogs.html in gedit
 +
|| Switch to the '''blogs dot html '''file, to include this '''JavaScript '''file in that code.
 +
|-
 +
|| [blogs.html] Type:
 +
 
 +
<script src="{% static 'blog/js/welcome.js' %}"></script>
 +
|| Next to the '''link tag''' for '''CSS''', type the code as shown.
 +
|-
 +
|| [blogs.html] Type:
 +
 
 +
<body onload="greet()">
 +
|| Then inside the '''body start tag''', type
 +
 
 +
'''space onload equal to within double quotes greet opening and closing brackets'''
 +
|-
 +
|| [blogs.html] <span style="color:#000000;">Highlight
 +
 
 +
'''<script src="{% static 'blog/js/welcome.js' %}"'''
 +
|| We have included the '''javascript''' file inside the '''head''' section using the '''script tag.'''
 +
 
 +
|-
 +
|| [blogs.html] Highlight
 +
 
 +
'''src="{% static 'blog/js/welcome.js' %}"'''
 +
|| The '''src attribute''' specifies the '''URL''' of an external '''script''' file.
 +
 
 +
|-
 +
|| [blogs.html] Highlight
 +
 
 +
'''onload="greet()"'''
 +
|| The '''onload''' event occurs when the '''object''' has been loaded.
 +
 
 +
So when the page is loaded on the '''browser''', the '''greet function''' will be '''called'''.
 +
|-
 +
|| Press Ctrl+S
 +
|| We have now linked the '''JavaScript '''file to our '''template'''.
 +
 
 +
Save the file.
 +
|-
 +
|| Switch to browser
 +
|| Switch to the '''browser''' and refresh the page.
 +
|-
 +
|| [browser]
 +
 
 +
Press Ctrl + R
 +
|| We see a '''pop-up '''with the message '''"Welcome to the blog app!"'''
 +
 
 +
Click on''' OK''' to close the '''pop-up.'''
 +
|-
 +
|| Only narration
 +
|| In this example, we have seen how to link a simple '''CSS style''' and a '''Javascript''' with the '''Django app.'''
 +
 
 +
Likewise we can add more '''styles''' and '''functions''' to make our page dynamic and attractive.
 +
|-
 +
|| [Terminal]
 +
 
 +
Press Ctrl+C keys
 +
 
 +
Type deactivate [Enter]
 +
|| Switch to the first '''terminal.'''
 +
 
 +
Stop the '''server.'''
 +
 
 +
And deactivate the '''virtual environment.'''
 +
|-
 +
|| Switch to slide
 +
|| With this, we come to the end of this tutorial.
 +
 
 +
Let us summarise.
 +
|-
 +
|| Slide: Summary
 +
|| In this tutorial, we have learnt to
 +
 
 +
* Add '''CSS''' and '''JavaScript''' files
 +
* Use them with the '''Django app'''
 +
 
 +
|-
 +
|| Slide: Assignment
 +
|| As an assignment,
 +
 
 +
* Set the font color for the '''blog list item''' to red.
 +
* Using''' JavaScript '''create a '''pop-up''' to display “'''Hello Django'''”.
 +
 
 +
|-
 +
|| Slide: About Spoken Tutorial project
 +
|| The video at the following link summarises the Spoken Tutorial project.
 +
 
 +
Please download and watch it.
 +
|-
 +
|| Slide: Spoken Tutorial workshops
 +
|| The '''Spoken Tutorial Project''' team conducts workshops and gives certificates.
 +
 
 +
For more details, please write to us.
 +
|-
 +
|| Slide: Forum for specific questions:
 +
|| Please post your timed queries in this Forum.
 +
|-
 +
|| Slide: FOSSEE to answer questions
 +
|| Please post your general or technical questions in this Forum.
 +
|-
 +
|| Slide: Acknowledgement
 +
|| Spoken Tutorial Project is funded by NMEICT, MHRD, Government of India.
 +
 
 +
More information on this mission is available at this link.
 +
|-
 +
|| Slide: Thanks Slide
 +
|| This script has been contributed by Thiagarajar College of Engineering and the FOSSEE Project, IIT Bombay.
 +
 
 +
The video has been recorded by Praveen from Spoken Tutorial Project, IIT Bombay.
 +
 
 +
Thanks for watching.
 +
|-
 +
|}

Latest revision as of 09:03, 10 October 2019

Django/C2/Using CSS and JavaScript in Django/English

Title of script: Using CSS and JavaScript in Django

Keywords: Video tutorial, CSS, JavaScript


Visual cue Narration
Slide: CSS and JavaScript in Django Hello and welcome to the spoken tutorial on “Using CSS and JavaScript in Django”
Slide: Learning Objectives In this tutorial, we will learn to:
  • Add CSS and JavaScript files
  • Use them with the Django App
Slide: System Requirements To record this tutorial, I am using
  • Ubuntu Linux 16.04 OS
  • Python 3.5
  • Python 3.4-venv or higher
  • gedit Text Editor and
  • Firefox web browser
Slide: Prerequisites To follow this tutorial, you need to know
  • How to create Templates and Forms in Django
  • If not, then please go through the prerequisite tutorials in this website
Slide: CSS & JavaScript
  • Using CSS we can set the look and style for a web page
  • JavaScript allows us to create dynamic web pages
Slide: Static Files
  • In Django, CSS, JavaScript or Image files are referred as Static Files
  • Conventionally they are stored in a folder called static
  • Django will look for a static files in the app’s static folder
Open a Terminal window

Press CTRl+ALT+T simultaneously

Let us open the terminal by pressing Ctrl, Alt and T keys simultaneously on the keyboard.
[Terminal]

cd my-django [Enter]

Now using cd command, go to the folder my hyphen django which we had created earlier.
[Terminal]

Type source myapp_env/bin/activate

and press Enter

Activate the virtual environment myapp underscore env.
[Terminal] cd mysite [Enter] Go to the folder mysite using cd command.
Here onwards, please remember to press the Enter key after typing each command.
[Terminal]

Type python manage.py runserver [Enter]

Start the server.
Open a browser and type http://localhost:8000/blogs/get_blogs Open a web browser and type the URL as shown.

This will take us to the get underscore blogs view function page.

[browser]

Pointing to the Output

Here, we can see the output as plain text.

Using CSS we will apply some styles to this page.

Switch to Terminal Switch to the terminal.
[Terminal]

Press CTRL+SHIFT+T

For our convenience, let us work on a separate tab.

Press Shift, Ctrl and T keys simultaneously.

[Terminal Tab 2] Highlight my-site

Type cd mysite

Ensure that, we are in the my-site directory in the new terminal window.

If not, then go to the my-site directory using the cd command.

[Terminal Tab 2]

Type mkdir blog/static [Enter]

We’ll create a static folder to hold our CSS and JavaScript files inside the blog folder.

Type mkdir <space> blog slash static

[Terminal Tab 2]

Type mkdir blog/static/blog [Enter]

Now, create a folder named blog inside the static folder.
[Terminal Tab 2]

Highlight static/blog

blog folder inside the static folder is created to avoid Name clashes between apps if any.
[Terminal Tab 2]

Type mkdir blog/static/blog/css[Enter]

Now, we’ll create a folder named CSS to store the CSS files inside this new blog directory.

Type mkdir <space> blog slash static slash blog slash css

[Terminal Tab 2]

Type: cd blog/static/blog/css

Next we’ll create a base CSS file named base.css inside the folder CSS.

Go the folder CSS using the cd command.

[Terminal Tab 2]

Type gedit base.css & [Enter]

Open the base.css file in any text editor.

I’ll open it in gedit text editor by typing

gedit <space> base dot css <space> ampersand

[base.css]Type:

ul.number { list-style-type: upper-roman;}

We are now in base.css file.

Type the code as shown here.

[base.css] Highlight

list-style-type: upper-roman

List style type property specifies the appearance of a list item.

Here, it is assigned to upper roman.

Press Ctrl+S Save the file.
Only narration Next we have to add the CSS in our template file blogs dot html.
Switch to Terminal Switch to the terminal.
[Terminal Tab 2]

Type cd ../../../.. [Enter]

Come back to the mysite folder using the cd command.
[Terminal] Type gedit blog/templates/blog/blogs.html & [Enter] Then, open the blogs.html file from the templates folder in a text editor.
[blogs.html] Type:

{% load static %}

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" type="text/css" href="{% 'blog/css/base.css' %}">

</head>

<body>

We are inside the blogs.html file.

Above the body start tag, update the code as shown here.

{% if blogs %}

‘’’ <ul class="number">

{% for blog in blogs %}

<li>{{blog.name}}</li>

{% endfor %}

</ul>

{% else %}

<p>No Blogs are available.</p>

{% endif %}

</body>

</html>

Next inside the ul start tag, type the code as shown here.
[blogs.html] Highlight

<link rel="stylesheet" type="text/css" href="{% static 'blog/css/base.css' %}">

Using the link tag, we have linked our CSS file to the HTML template.
[blogs.html] Highlight

<link rel="stylesheet" type="text/css" href="{% static 'blog/css/base.css' %}">

rel attribute defines the relationship between the linked file and the HTML document.
[blogs.html] Highlight

rel="stylesheet"

rel equal to stylesheet specifies a persistent or preferred style.
[blogs.html] Highlight

type="text/css"

type specifies the MIME type of the linked document.
[blogs.html] Highlight

type="text/css"

The value text slash css indicates that the content of the file is CSS.
[blogs.html] Highlight

href="{% static 'blog/css/base.css' %}"

href specifies the location of the linked document.
[blogs.html] Highlight

href="{% static 'blog/css/base.css' %}"

Static template tag builds the URL for the given path using the configured static file storage.
[blogs.html] Highlight

{% load static %}

load static will load the static files from the static folder.
[blogs.html] Highlight
Here, we added class ‘number’ to the template for CSS effect.
Press Ctrl+S Save the file.
Only Narration We have added the CSS style to our template.

Now, let us cross verify this.

Switch to browser Switch to browser and refresh the page.
[browser] We can see that the Blog objects are listed in Roman letters.
Only narration Now let us add one more style to the page.

Switch to base.css file in the text editor.

[base.css] Type:

li {

color: blue;

}

Next to the current style property, type the code as shown.

This will set the text color to blue for each list item.

[base.css] Highlight

color: blue

color property specifies the color of the text.

Here, the color of the text is set to blue.

Press: Ctrl +S Save the file.
[browser]

Press Ctrl + R

Highlight the output

Switch to the browser and refresh the page.

Now we can see that the Blog objects are listed in Roman letters.

And the displayed text color is blue.

Only Narration Next, let us add a JavaScript to Django templates.
[Terminal Tab 2]

Type mkdir blog/static/blog/js [Enter]

Switch to the second terminal.

Create a folder named js under static slash blog directory.

[Terminal Tab 2]

Type gedit blog/static/blog/js/welcome.js & [Enter]

Next create a JavaScript file named welcome dot js inside the js folder.
[welcome.js] Type

function greet() { alert("Welcome to the blog app!"); }

We are now inside the welcome.js file.

Type the code as shown here.

[Welcome.js] Highlight

alert("Welcome to the blog app!");

When the web page opens, the alert function will open a pop-up box and display the given message.
[Welcome.js] Highlight

alert("Welcome to the blog app!");

In this case, it will display Welcome to the blog app!
Press Ctrl+S We have now added a simple JavaScript.

Save the file.

Switch to blogs.html in gedit Switch to the blogs dot html file, to include this JavaScript file in that code.
[blogs.html] Type:

<script src="{% static 'blog/js/welcome.js' %}"></script>

Next to the link tag for CSS, type the code as shown.
[blogs.html] Type:

<body onload="greet()">

Then inside the body start tag, type

space onload equal to within double quotes greet opening and closing brackets

[blogs.html] Highlight

<script src="{% static 'blog/js/welcome.js' %}"

We have included the javascript file inside the head section using the script tag.
[blogs.html] Highlight

src="{% static 'blog/js/welcome.js' %}"

The src attribute specifies the URL of an external script file.
[blogs.html] Highlight

onload="greet()"

The onload event occurs when the object has been loaded.

So when the page is loaded on the browser, the greet function will be called.

Press Ctrl+S We have now linked the JavaScript file to our template.

Save the file.

Switch to browser Switch to the browser and refresh the page.
[browser]

Press Ctrl + R

We see a pop-up with the message "Welcome to the blog app!"

Click on OK to close the pop-up.

Only narration In this example, we have seen how to link a simple CSS style and a Javascript with the Django app.

Likewise we can add more styles and functions to make our page dynamic and attractive.

[Terminal]

Press Ctrl+C keys

Type deactivate [Enter]

Switch to the first terminal.

Stop the server.

And deactivate the virtual environment.

Switch to slide With this, we come to the end of this tutorial.

Let us summarise.

Slide: Summary In this tutorial, we have learnt to
  • Add CSS and JavaScript files
  • Use them with the Django app
Slide: Assignment As an assignment,
  • Set the font color for the blog list item to red.
  • Using JavaScript create a pop-up to display “Hello Django”.
Slide: About Spoken Tutorial project The video at the following link summarises the Spoken Tutorial project.

Please download and watch it.

Slide: Spoken Tutorial workshops The Spoken Tutorial Project team conducts workshops and gives certificates.

For more details, please write to us.

Slide: Forum for specific questions: Please post your timed queries in this Forum.
Slide: FOSSEE to answer questions Please post your general or technical questions in this Forum.
Slide: Acknowledgement Spoken Tutorial Project is funded by NMEICT, MHRD, Government of India.

More information on this mission is available at this link.

Slide: Thanks Slide This script has been contributed by Thiagarajar College of Engineering and the FOSSEE Project, IIT Bombay.

The video has been recorded by Praveen from Spoken Tutorial Project, IIT Bombay.

Thanks for watching.

Contributors and Content Editors

Nancyvarkey, Pravin1389

Retrieved from "https://script.spoken-tutorial.org/index.php?title=Python-Django/C2/Using-CSS-and-JavaScript-in-Django/English&oldid=49357"