JavaScript Tutorial for Beginners PDF download
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!
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?
Setting Up Your Environment
To start coding in JavaScript, you'll need:
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
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
Example:
let age = 25;
const name = 'Alice';
var isStudent = true;
Data Types
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
Example:
let sum = 10 + 5; // 15
let product = 10 * 5; // 50
Assignment Operators
Example:
let x = 10;
x += 5; // x is now 15
Comparison Operators
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
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) {
????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');
}
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:
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
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
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
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');
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
Adding/Updating Properties
person.job = 'Developer';
person['age'] = 31;
Methods in Objects
Objects can have functions called methods.
let calculator = {
????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
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
Event Listeners
button.addEventListener('click', function() {
????// code to execute on click
});
Quiz Question
Q8: Which method adds an event listener to an element?
A. element.addEventListener() B. element.onEvent() C. element.listenEvent() D. element.triggerEvent()
Answer: A. element.addEventListener()