JavaScript Tutorial for Beginners
Welcome to the world of JavaScript! This tutorial is designed to help beginners learn
JavaScript from scratch. We'll cover the fundamentals, provide coding examples, and
include quiz questions to test your understanding. Let's get started!
Learn more HTML, CSS, JavaScript Web Development at https://basescripts.com/ Laurence Svekis
1
JavaScript Tutorial for Beginners 1
Introduction to JavaScript 3
Why Learn JavaScript? 3
Setting Up Your Environment 3
Your First JavaScript Program 4
Basics of JavaScript Syntax 4
Comments 4
Case Sensitivity 5
Semicolons 5
Variables and Data Types 5
Declaring Variables 5
Data Types 5
Quiz Question 6
Operators 6
Arithmetic Operators 6
Assignment Operators 7
Comparison Operators 7
Quiz Question 7
Conditional Statements 8
if Statement 8
if...else Statement 8
if...else if...else Statement 8
switch Statement 8
Example 9
Quiz Question 9
Loops 10
for Loop 10
while Loop 10
do...while Loop 11
Quiz Question 11
Functions 11
Declaring a Function 11
Calling a Function 12
Example 12
Quiz Question 12
Arrays 13
Creating an Array 13
Learn more HTML, CSS, JavaScript Web Development at https://basescripts.com/ Laurence Svekis
2
Accessing Array Elements 13
Array Methods 13
Quiz Question 13
Objects 14
Creating an Object 14
Accessing Object Properties 14
Adding/Updating Properties 14
Methods in Objects 14
Quiz Question 15
DOM Manipulation 15
Selecting Elements 15
Changing Content 16
Event Listeners 16
Quiz Question 16
Introduction to JavaScript
JavaScript is a versatile programming language commonly used to create interactive
effects within web browsers. It's one of the core technologies of the World Wide Web,
alongside HTML and CSS.
Why Learn JavaScript?
● Interactivity: Enhance user engagement on websites.
● Versatility: Used in web development, server-side programming, game
development, and more.
● Demand: High demand for JavaScript developers in the job market.
Setting Up Your Environment
To start coding in JavaScript, you'll need:
1. A Web Browser: Modern browsers like Chrome, Firefox, or Edge.
2. A Text Editor or IDE: Options include Visual Studio Code, Sublime Text, or
Notepad++.
Learn more HTML, CSS, JavaScript Web Development at https://basescripts.com/ Laurence Svekis
3
Your First JavaScript Program
Create a new HTML file and add the following code:
<!DOCTYPE html>
<html>
<head>
<title>My First JavaScript Program</title>
</head>
<body>
<h1>Hello, World!</h1>
<script>
alert('Hello, World!');
</script>
</body>
</html>
Save the file as index.html and open it in your browser. You should see an alert box
displaying "Hello, World!".
Basics of JavaScript Syntax
JavaScript syntax is the set of rules that define how a JavaScript program is
constructed.
Comments
● Single-line comment: // This is a comment
Learn more HTML, CSS, JavaScript Web Development at https://basescripts.com/ Laurence Svekis
4
Multi-line comment:
/*
This is a
multi-line comment
*/
Case Sensitivity
JavaScript is case-sensitive. For example, myVariable and myvariable are
different.
Semicolons
Semicolons are used to separate statements. While they are optional in many cases, it's
good practice to include them.
Variables and Data Types
Variables store data values that can be changed later.
Declaring Variables
● var: Older way to declare variables.
● let: Used for variables that can change.
● const: Used for variables that won't change.
Example:
let age = 25;
const name = 'Alice';
var isStudent = true;
Data Types
Learn more HTML, CSS, JavaScript Web Development at https://basescripts.com/ Laurence Svekis
5
● String: Text data ('Hello', "World")
● Number: Numeric data (42, 3.14)
● Boolean: Logical data (true, false)
● Null: No value (null)
● Undefined: A declared variable without a value (undefined)
● Object: Complex data structures
Quiz Question
Q1: Which keyword is used to declare a variable that cannot be reassigned?
A. var
B. let
C. const
D. variable
Answer: C. const
Operators
Operators perform operations on variables and values.
Arithmetic Operators
● Addition (+)
● Subtraction (-)
● Multiplication (*)
● Division (/)
● Modulus (%): Remainder of division
Example:
let sum = 10 + 5; // 15
let product = 10 * 5; // 50
Learn more HTML, CSS, JavaScript Web Development at https://basescripts.com/ Laurence Svekis
6
Assignment Operators
● =: Assigns value
● +=: Adds and assigns
● -=: Subtracts and assigns
Example:
let x = 10;
x += 5; // x is now 15
Comparison Operators
● Equal (==)
● Strict Equal (===)
● Not Equal (!=)
● Greater than (>)
● Less than (<)
Example:
let isEqual = (5 == '5'); // true
let isStrictEqual = (5 === '5'); // false
Quiz Question
Q2: What will be the value of result?
let result = 10 % 3;
A. 0
B. 1
C. 3
D. 7
Learn more HTML, CSS, JavaScript Web Development at https://basescripts.com/ Laurence Svekis
7
Answer: B. 1
Conditional Statements
Conditional statements perform different actions based on different conditions.
if Statement
if (condition) {
// code to execute if condition is true
}
if...else Statement
if (condition) {
// code if true
} else {
// code if false
}
if...else if...else Statement
if (condition1) {
// code if condition1 is true
} else if (condition2) {
// code if condition2 is true
} else {
// code if both conditions are false
}
switch Statement
switch(expression) {
Learn more HTML, CSS, JavaScript Web Development at https://basescripts.com/ Laurence Svekis
8
case value1:
// code
break;
case value2:
// code
break;
default:
// code
}
Example
let score = 85;
if (score >= 90) {
console.log('Grade A');
} else if (score >= 80) {
console.log('Grade B');
} else {
console.log('Grade C');
}
Quiz Question
Q3: What will be logged to the console?
let num = 7;
if (num % 2 === 0) {
console.log('Even');
} else {
console.log('Odd');
}
Learn more HTML, CSS, JavaScript Web Development at https://basescripts.com/ Laurence Svekis
9
A. Even
B. Odd
C. Error
D. undefined
Answer: B. Odd
Loops
Loops are used to execute a block of code repeatedly.
for Loop
for (initialization; condition; increment) {
// code to execute
}
Example:
for (let i = 0; i < 5; i++) {
console.log('Iteration number ' + i);
}
while Loop
while (condition) {
// code to execute
}
Example:
Learn more HTML, CSS, JavaScript Web Development at https://basescripts.com/ Laurence Svekis
10
let i = 0;
while (i < 5) {
console.log('Iteration number ' + i);
i++;
}
do...while Loop
do {
// code to execute
} while (condition);
Quiz Question
Q4: How many times will the following loop execute?
for (let i = 1; i <= 5; i++) {
console.log(i);
}
A. 4
B. 5
C. 6
D. Infinite
Answer: B. 5
Functions
Functions are reusable blocks of code that perform a specific task.
Declaring a Function
Learn more HTML, CSS, JavaScript Web Development at https://basescripts.com/ Laurence Svekis
11
function functionName(parameters) {
// code to execute
}
Calling a Function
functionName(arguments);
Example
function greet(name) {
return 'Hello, ' + name + '!';
}
let message = greet('Alice');
console.log(message); // Outputs: Hello, Alice!
Quiz Question
Q5: What will be the output?
function add(a, b) {
return a + b;
}
console.log(add(5, 7));
A. 12
B. 57
C. undefined
D. Error
Answer: A. 12
Learn more HTML, CSS, JavaScript Web Development at https://basescripts.com/ Laurence Svekis
12
Arrays
Arrays are used to store multiple values in a single variable.
Creating an Array
let fruits = ['Apple', 'Banana', 'Cherry'];
Accessing Array Elements
let firstFruit = fruits[0]; // 'Apple'
Array Methods
● push(): Adds an element to the end
● pop(): Removes the last element
● shift(): Removes the first element
● unshift(): Adds an element to the beginning
● length: Returns the number of elements
Example:
fruits.push('Date');
console.log(fruits); // ['Apple', 'Banana', 'Cherry', 'Date']
Quiz Question
Q6: What is the value of colors.length?
let colors = ['Red', 'Green', 'Blue'];
colors.push('Yellow');
Learn more HTML, CSS, JavaScript Web Development at https://basescripts.com/ Laurence Svekis
13
A. 3
B. 4
C. 5
D. Undefined
Answer: B. 4
Objects
Objects are collections of key-value pairs.
Creating an Object
let person = {
firstName: 'John',
lastName: 'Doe',
age: 30
};
Accessing Object Properties
● Dot Notation: person.firstName
● Bracket Notation: person['lastName']
Adding/Updating Properties
person.job = 'Developer';
person['age'] = 31;
Methods in Objects
Objects can have functions called methods.
let calculator = {
Learn more HTML, CSS, JavaScript Web Development at https://basescripts.com/ Laurence Svekis
14
add: function(a, b) {
return a + b;
}
};
console.log(calculator.add(5, 7)); // Outputs: 12
Quiz Question
Q7: How do you access the age property of the student object?
let student = {
name: 'Emily',
age: 22
};
A. student.age
B. student('age')
C. student[age]
D. student::age
Answer: A. student.age
DOM Manipulation
DOM (Document Object Model) manipulation allows you to interact with and modify web
pages.
Selecting Elements
● document.getElementById()
● document.getElementsByClassName()
Learn more HTML, CSS, JavaScript Web Development at https://basescripts.com/ Laurence Svekis
15
● document.querySelector()
● document.querySelectorAll()
Example:
<!DOCTYPE html>
<html>
<body>
<p id="demo">Hello World!</p>
<script>
let element = document.getElementById('demo');
element.style.color = 'red';
</script>
</body>
</html>
Changing Content
● element.innerHTML: Sets or returns the HTML content
● element.textContent: Sets or returns the text content
Event Listeners
button.addEventListener('click', function() {
// code to execute on click
});
Quiz Question
Q8: Which method adds an event listener to an element?
Learn more HTML, CSS, JavaScript Web Development at https://basescripts.com/ Laurence Svekis
16
A. element.addEventListener()
B. element.onEvent()
C. element.listenEvent()
D. element.triggerEvent()
Answer: A. element.addEventListener()
Learn more HTML, CSS, JavaScript Web Development at https://basescripts.com/ Laurence Svekis
17
