Scribd
Upload
10 views17 pages

JavaScript For Beginners

Uploaded by

contraste visual
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
10 views17 pages

JavaScript For Beginners

Uploaded by

contraste visual
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/ 17

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

You might also like