JavaScript Level One

JavaScript Level One

 Django Bootcamp

● Welcome to the first JavaScript Section!

● This will begin to build our understanding of
adding interactive functionality to our websites!
 Django Bootcamp

● Javascript support is built directly into modern web

browsers.
● We can run Javascript directly into the browser
console, or as a full .js script connected to an
HTML file.
 Django Bootcamp

● Javascript is a full programming language,

meaning unlike HTML or CSS is supports things
such as arrays, loops, and general logic.
● We will briefly cover major programming concepts
as we encounter them with JS!
 Django Bootcamp

● Eventually we will show how to use Javascript to

directly change the HTML or CSS shown on a
page.
● To begin with however, we will focus on just the
Javascript basics by itself.
 Django Bootcamp

● We’ll start off with JS in the console.

● Later on we will have full .js scripts and connect
them to our HTML.
● All the code used in this section can be found as .js
scripts under the Javascript_Level_One folder.
Let’s get started!
JavaScript Level One
Part 1 - Javascript Basics
JavaScript Level One
 Django Bootcamp

● Let’s go to our browser, open up our console and

walk through the basics of Javascript.
 Part 2 -
Connecting Javascript
JavaScript Level One
 Django Bootcamp

● We learned quite a bit in the last lecture, so let’s

take a break and just show you how to connect
Javascript to an HTML file!
● We’ll open up Atom and the browser for this!
Part 3 - First JS Exercise
JavaScript Level One
 Django Bootcamp

● Let’s get some practice with your new skills!

● You will create a very simple website that takes in
a weight in Imperial pounds (lbs) and converts it to
kilograms.
 Django Bootcamp

● The HTML is already done, all your work will be

in the connected .js file.
● The relevant files are:
○ Part3_Exercise.html
○ Part3.js
 Django Bootcamp

● At the bottom of the HTML file is the connection

to the solution .js file, make sure to change it to
your own .js file before you start!
● Let’s quickly explore the exercise!
Part 4 - Operators
JavaScript Level One
 Django Bootcamp

● It is time to learn about Comparison and Logical

Operators with Javascript.
● These operators allow us to begin to add logic to
our Javascript Code.
● There are also 5 optional quick exercises at the end
of this lecture!
Part 5 - Control Flow
JavaScript Level One
 Django Bootcamp

● Control Flow is a fundamental aspect of any full

programming language.
● It allows us to execute code if a certain situation
arises.
● We use it in combination with logical and
comparison operators.
 Django Bootcamp

● In case this is your first time programming, let’s

briefly go over the main concepts.
● If you’ve programmed in other languages before,
you may find it more useful just to reference the
notes for the JS syntax!
 Django Bootcamp

● We will initiate some condition check that returns a

boolean, either True or False.
● Based off those results we use control flow to
execute a specific block of code.
 Django Bootcamp

● IF statement
● if (condition){
//Execute some Code
}
 Django Bootcamp

● IF ELSE statement
● if (condition){
//Execute some Code
}else{
// Execute some other Code
}
 Django Bootcamp

● IF, ELSE IF, ELSE statement

● if (condition one){
//Execute some Code
}else if(condition two){
// Execute some other Code
}else{
// Execute some backup Code
}
 Django Bootcamp

● Alright, let’s code through some examples!

Part 6 - While Loops
JavaScript Level One
 Django Bootcamp

● Let’s learn about While Loops.

● Loops allow us to automatically repeat blocks of
code.
● The While Loop will continually execute code as
long as a condition remains true.
 Django Bootcamp

● While Loop
● while(condition){
// Execute some code while
// this condition is true
}
Part 7 - For Loops
JavaScript Level One
 Django Bootcamp

● Let’s learn about For Loops

● If you’ve only dealt with Python before, you may
want to watch this lecture as the syntax will appear
quite different to you!
 Django Bootcamp

● For Loops allow you to continually execute code a

specific number of times.
● Javascript has three types of For Loops:
○ For - loops through a number of times
○ For/In - loops through a JS object
○ For/of - used with arrays
 Django Bootcamp

● A quick note, previously we used the notation:

○ num = num +1
○ num += 1
○ num++
● These are all the same
 Django Bootcamp

● For Loop
● for (statement1;statement2;statement3){
// Execute some code
}
 Django Bootcamp

● Statement 1 is executed before the loop (the code

block) starts.
● for (statement1;statement2;statement3){
// Execute some code
}
 Django Bootcamp

● Statement 1 is executed before the loop (the code

block) starts.
● for (var i = 0;statement2;statement3){
// Execute some code
}
 Django Bootcamp

● Statement 2 defines the condition for running the

loop
● for (var i = 0;statement2;statement3){
// Execute some code
}
 Django Bootcamp

● Statement 2 defines the condition for running the

loop
● for (var i = 0;i<5;statement3){
// Execute some code
}
 Django Bootcamp

● Statement 3 is executed each time after the loop

cycles through.
● for (var i = 0;i<5;statement3){
// Execute some code
}
 Django Bootcamp

● Statement 3 is executed each time after the loop

cycles through.
● for (var i = 0;i<5;i++){
// Execute some code
}
 Django Bootcamp

● This is the most common For Loop structure you

will see in Javascript
● for (var i = 0;i<5;i++){
// Execute some code
}
 Django Bootcamp

● For example a string is just a sequence of

characters.
● Imagine we wanted to print each letter in a
particular string.
● We could use the following...
 Django Bootcamp

● Print every letter

● var word = “hello”
for (var i = 0;i < word.length ;i++){
console.log(word[i])
}
 Django Bootcamp

● Let’s see some examples of these two types of For

Loops, later on we will cover the For/Of method
when we discuss arrays.
Part 8 - Loop Exercises
JavaScript Level One
 Django Bootcamp

● Located under the Javascript_Level_One folder,

the file is:
○ Part8_Loops_Exercise.js
Part 8 - Loop Exercises
Solutions
JavaScript Level One
Part 9 - JS Level One Project
JavaScript Level One
 Django Bootcamp

● We’ve completed all the lectures for JS Level One,

now it is time for a project!
● For this project you will be creating a simple
website that asks a visitor questions using JS and
the prompt() function.
 Django Bootcamp

● Through these questions you will secretly be

checking to see if there is a spy present!
● The spy is going to answer the questions in a very
particular way.
 Django Bootcamp

● Behind the scenes you will use JS to check for

these certain correct answers to the questions.
● If you find the spy, you will leave a message in the
console for them to check!
 Django Bootcamp

● You will need to check the Part9_JS_Project.html

file for the full instructions.
● An example solution is located under Part9.js , so
remember to link to your own .js script before
getting started!
 Django Bootcamp

● Let’s briefly explore the instruction page and an

example!
Part 9 - JS Level One Project
- Solution
JavaScript Level One