0% found this document useful (0 votes)
25 views

JavaScript Level One

Uploaded by

ahmad masadeh
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
25 views

JavaScript Level One

Uploaded by

ahmad masadeh
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, 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