INTRODUCTION TO JAVASCRIPT
JAVASCRIPT
What is Javascript
- JavaScript is a programming language that allows you to
make web pages interactive. Where HTML and CSS are
languages that give structure and style to web pages,
JavaScript gives web pages interactive elements that engage a
user.
JAVASCRIPT
Focus Points
• Variables
• Data Types
• Operators
• Functions
• Control Structures
JAVASCRIPT- HOW TO RUN JAVASCRIPT
CODE?
How to run Javascript Code?
• The simplest way to get started is to simply create an
HTML file with JavaScript code inside of it.
JAVASCRIPT- HOW TO RUN JAVASCRIPT
CODE?
Another way to include JavaScript in a
web page is through an external script.
This is very similar to linking external
CSS docs to your website. Javascript files
have the extension .js like .css for
stylesheets. External JavaScript files are
used for more complex scripts.
JAVASCRIPT FRAMEWORKS
FrontEnd Framework BackEnd Framework
• React • NodeJs
• AngularJS • NextJs
• Vuejs • ExpressJS
• [Link] • Nuxt
• Preact
• Gatsby
• Svelte.
• MeteorJS
• [Link]
COMMON JAVASCRIPT METHODS
• alert()
• prompt()
• confirm()
• [Link]()
• [Link]()
JAVASCRIPT - COMMENTS
• Line comment
// This is a comment
• Block comment
/* This is a section of multiline comments
that will not be interpreted */
JAVASCRIPT – VARIABLES
Javascript variables are containers for storing data values.
Here are some of the types we will cover
• Strings
• Numbers
• Boolean
JAVASCRIPT – NAMING CONVENTION
• A variable could contain any of the followings:
• Uppercase (A-Z) and lowercase letters (a-z)
• Digits from 0 through 9
• Underscore _ and the dollar sign $
• Variables start with a lowercase letter, and they should be descriptive.
• No space and punctuation characters are allowed in a variable name
JAVASCRIPT – NAMING CONVENTION
• The first character of a variable name can be only a-z, $, or _ (no numbers)
• Variable names are case-sensitive
• No reserved words or keywords are allowed in a variable name: var, let, class,
return and function
• When the name contains multiple words, camelCase is commonly used. Each
word except the first word starts with a capital letter.
JAVASCRIPT – VARIABLES
• Variables are values in your code that can represent different values each time the code runs.
• To create a variable in JavaScript: let, var and const.
• The second time you call a variable; you only use the name of the existing variable to assign it a
new value:
• let and var are both used for variables that might have a new value assigned to them somewhere
in the program.
• const is used for variables that only get a value assigned once, If you try reassigning a value
declared with const, you will get an error.
JAVASCRIPT – DATA TYPES
• A value in Javascript is always of a certain type. E.g A string or a number.
• There are eight basic data types in Javascript
• We can put any type in a variable E.g A variable can at one moment be a string and
then store a number
let message = “Hello”;
message = 123456;
• Programming languages that allow such things are called dynamically typed, meaning
there exist data types, but variables are not bound to any of them
JAVASCRIPT - STRING
A string is used to store a text value. It is a sequence of characters. There are different
ways to declare a string:
• Double quotes
• Single quotes
• Backticks: special template strings in which you can use variables directly
let singleString = ‘Hi there’;
let doubleString= “How are you?”;
Let language = “Javascript”;
let message = `Let’s Learn $(Language)`;
[Link](message);
JAVASCRIPT – STRING
• String Length
let city = "Stockholm"
[Link] // this will result in 9
• The .toUpperCase() method allows us to make a new copy of a string while converting every single character to uppercase.
let name = ”simi"
let shouting = [Link]()
[Link](shouting) // ”SIMI"
[Link](name) // ”simi" (it's unchanged)
• The .toLowerCase() method creates a copy of the string that is all in lower case. Here's an example:
let name = ”SIMI"
let lowercased = [Link]()
[Link](lowercased) // ”simi"
[Link](name) // ”SIMI" (unchanged)
JAVASCRIPT - NUMBERS
The number data type is used to represent, numbers
• 64-bit floating-point number: It can store rather large numbers and both signed and unsigned
numbers, numbers with decimals, and more.
• Number data type can also be used to represent Integers, decimals, exponentials, octal,
hexadecimal, and binary numbers.
let intNr = 1;
let decNr = 1.5;
let expNr = 1.4e15;
let octNr = 0o10;
let hexNr = 0x3E8;
let binNr = 0b101;
JAVASCRIPT - BOOLEAN
• The Boolean data type can hold two values: true and false. This Boolean is used a lot in
code, especially expressions that evaluate to a Boolean
let bool1 = false;
let bool2 = true;
JAVASCRIPT - ARITHMETIC OPERATORS
Operator Description Example
+ Addition i+5
- Subtraction J-10
* Multiplication i*8
/ Division a/3
% Modulus (division remainder) i%6
++ increment i++
-- Decrement i--
** Exponentiation a**c
JAVASCRIPT - ASSIGNMENT OPERATOR
Operator Example Equivalent to
= i=5 i=5
+= j+=4 j = j+4
+= a += ‘string’ a = a + ‘string’
-= j-=4 j = j -4
*= b*=2 b = b*2
/= c/=5 c = c/5
%= d%=6 d=d%6
JAVASCRIPT – COMPARISON OPERATORS
Operator Description Example
== Is equal to I == 5
!= Is not equal to J !=10
> Is greater than i>0
< Is less than i<6
>= Is greater than or equal to J>=15
<= Is less than or equal to J <=20
=== Is equal to (and of the same type) i===4
!== Is not equal to (and of the same i!==“a”
type)
JAVASCRIPT – LOGICAL OPERATORS
Operator Description Example
&& And a==4 && b==5
|| Or a<5||a>0
! Not !(a==b)
JAVASCRIPT - FUNCTIONS
Functions allow you to store a piece of code that does a single task inside a defined block and then
call that code whenever you need it using a single short command rather than having to type out
the same code multiple times.
It starts with a keyword “Function” followed by the name of the function
Function addition(){
// content of the function
let a = 5
let b = 7
[Link](5 + 7)
}
You can invoke the function using the function name
addition();
JAVASCRIPT – LOCAL VARIABLES
• Local Variables are only in scope within the function they are defined
• Variables defined inside the function are not available outside the function
• The function parameters are also local variables.
function testAvailability() {
let y = "Local variable!";
[Link]("Available here:", y);
}
testAvailability();
[Link]("Not available here:", y);
JAVASCRIPT – GLOBAL VARIABLE
• Global variable are variables declared outside a function and not in some code block
• Variables are accessible in the scope (either function or block) where they are defined,
plus any “Lower” scopes.
let globalVar = "Accessible everywhere!";
[Link]("Outside function:", globalVar);
function creatingNewScope(x) {
[Link]("Access to global vars inside function." , globalVar);
}
creatingNewScope("some parameter");
[Link]("Still available:", globalVar);
JAVASCRIPT – CONTROL STRUCTURES
• Selection
• Single(If Statement)
• Double (if else statement)
• Multiple (Switch Statement)
• Iteration
• Fixed (for loop)
• Pretest (While loop)
• Posttest(do while loop)
JAVASCRIPT – IF STATEMENT
You can make decision in our code using if statement
It Implies if *some condition is true*, then *a certain action will happen*,
let a=10
If(a > 100){
[Link](“a is greater than 100”);
}
JAVASCRIPT – IF ELSE STATEMENT
if *some condition is true*, then *a certain action will happen*, else
*another action will happen*
let a = 10;
if(a > 100){
[Link](“a is greater than 100”");
}
else {
[Link](“a is lesser than 100”");
}
JAVASCRIPT – ELSE IF STATEMENTS
• This is Used for multiple conditions
• If *a value falls into a certain category*, then *a certain action will happen*, else if *the value falls
into a different category than the previous statement*, then *a certain action will happen*, else if
*the value falls into a different category than either of the previous brackets*, then *a certain
action will happen*
JAVASCRIPT – ELSE IF STATEMENTS
age = 40
if(age < 3){
[Link]("Access is free under three.");
}
else if(age < 12) {
[Link]("With the child discount, the fee is 5 dollars");
}
else if(age < 65) {
[Link]("A regular ticket costs 10 dollars.");
}
else if(age >= 65 && age < 100) {
[Link]("A ticket is 7 dollars.");
}
else {
[Link](“We cant give you access”)
}
JAVASCRIPT - CONDITIONAL TERNARY
OPERATORS
It’s a quick way of writing if else statements
Operand1 ? operand2 : operand3;
=> operand1 is the expression that is to be evaluated. If the value of the expression is true,
operand2 gets executed. If the value of the expression is false, operand3 gets executed.
let age = 15
let access = age < 18 ? “denied” : “allowed”;
[Link](access)
JAVASCRIPT – SWITCH STATEMENT
If you have a conditions where the values are to be tested for an exact match, it's better to use a switch
statement instead of If else statements.
let activity = “Drive home” case "Lunch":
switch(activity) { [Link]("It is 12:00PM");
case "Get up": break;
[Link]("It is 6:30AM"); case "Drive home":
break; [Link]("It is 5:00PM");
case "Breakfast": break;
[Link]("It is 7:00AM"); case "Dinner":
break; [Link]("It is 6:30PM");
break;
case "Drive to work":
default:
[Link]("It is 8:00AM");
[Link]("I cannot determine the
break;
current time.");
break;
}
JAVASCRIPT - LOOPS
• A while loop executes a certain block of code if a condition evaluates to true
• If the condition is false, the whole code inside will be skipped.
while(condition) {
// code that gets executed if the condition is true
}
E.G
let I = 0;
while (i < 10){
[Link](i);
i++;
}
JAVASCRIPT - LOOPS
• A do while loop is used when we need the code block to be executed as least
once.
do {
// code to be executed if the condition is true
} while(condition);
• It executes what is within the do block, and then after that it evaluates the while. If
the condition is true, it will execute what is in the do block again. It will continue to
do so until the condition in the while changes to false.
JAVASCRIPT - LOOPS
Let’s use a do while loop to ask the user for a number between 0 and 100
Let number;
do {
number = prompt(“Please enter a number between 0 and 100: ”);
} while (!(number >= 0 && number < 100));
JAVASCRIPT - LOOPS
The syntax for a for loop:
for (initialize variable; condition; statement) {
// code to be executed
}
E.G
for(i = 0; i < 10; i++) {
[Link](i);
}
JAVASCRIPT
• Nested Loops
• Break and Continue
• Build a Calculator with what we’ve done today.
TextBooks
- JavaScript for Web Developers: A Beginner’s Guide" Author: Mark Lassoff
- Eloquent JavaScript: A Modern Introduction to Programming" (3rd Edition)
Author: Marijn Haverbeke
THANK YOU