Scribd
Upload
17 views53 pages

PP 13

This document provides an overview of a JavaScript Level One course. It covers 9 parts that teach JavaScript basics, including adding interactive functionality to websites, running JavaScript in the browser console and connecting external JavaScript files to HTML. The parts cover programming concepts like arrays, loops, operators, control flow, while loops, for loops and exercises to practice these skills. The final project involves using JavaScript prompts to ask a visitor questions and check if a spy is present by looking for specific answers.

Uploaded by

raji
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
17 views53 pages

PP 13

This document provides an overview of a JavaScript Level One course. It covers 9 parts that teach JavaScript basics, including adding interactive functionality to websites, running JavaScript in the browser console and connecting external JavaScript files to HTML. The parts cover programming concepts like arrays, loops, operators, control flow, while loops, for loops and exercises to practice these skills. The final project involves using JavaScript prompts to ask a visitor questions and check if a spy is present by looking for specific answers.

Uploaded by

raji
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 53

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

You might also like