Scribd
Upload
8 views

Full JavaScript Course for Beginners

The document provides a comprehensive introduction to JavaScript, covering its definition, uses, syntax, and basic programming concepts such as variables, data types, operators, conditional statements, loops, functions, and DOM manipulation. It explains how to write JavaScript code in various ways (inline, internal, and external) and includes practical examples and exercises for beginners. Additionally, it outlines a mini project for creating a click counter and offers tasks to reinforce learning.

Uploaded by

godfrey.svarukat
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
8 views

Full JavaScript Course for Beginners

The document provides a comprehensive introduction to JavaScript, covering its definition, uses, syntax, and basic programming concepts such as variables, data types, operators, conditional statements, loops, functions, and DOM manipulation. It explains how to write JavaScript code in various ways (inline, internal, and external) and includes practical examples and exercises for beginners. Additionally, it outlines a mini project for creating a click counter and offers tasks to reinforce learning.

Uploaded by

godfrey.svarukat
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 7

Full JavaScript Course for Beginners

What is JavaScript?
JavaScript is a powerful and versatile scripting language used to build dynamic and interactive
web pages. It runs directly in the browser, enabling developers to create features like image
sliders, form validations, live content updates, games, and more.

JavaScript Can Be Used To:


 Manipulate the DOM (Document Object Model) to dynamically change content.
 Respond to events such as mouse clicks, key presses, and form submissions.
 Communicate with servers using AJAX (fetch or XMLHttpRequest).
 Control multimedia (play/pause videos, change volume).
 Create animations and interactive visual effects.
JavaScript is supported by all modern browsers and is a client-side language (executed on the
user's device). It is now also widely used on the server side with environments like Node.js.

Where to Write JavaScript?


JavaScript code can be added to web pages in three ways:

a) Inline JavaScript
JavaScript written directly inside an HTML tag using the onclick, onmouseover, or similar
attributes.
<button onclick="alert('Clicked!')">Click Me</button>
Use sparingly, good for quick testing or small scripts.

b) Internal JavaScript
Placed inside a <script> tag within the <head> or <body> section of an HTML file.
<!DOCTYPE html>
<html>
<head>
<script>
alert("Hello from internal JavaScript");
</script>
</head>
<body>
</body>
</html>
Use when writing small scripts specific to one page.
c) External JavaScript
JavaScript written in a separate .js file and linked using the <script> tag. This is the best
approach for large or reusable code.
<script src="script.js"></script>
// script.js file
alert("Hello from external JavaScript file");
Advantages:
 Cleaner HTML code
 Easier code maintenance
 Reusability across multiple pages

JavaScript Syntax and Basics


JavaScript syntax defines how programs are written. It includes keywords, variables, operators,
expressions, and statements.

a) Variables
Used to store data values. JavaScript has three ways to declare variables:
var name = "Tafadzwa"; // Old, globally/function-scoped
let age = 25; // Block-scoped, preferred
const country = "Zimbabwe"; // Constant, can’t be reassigned

b) Data Types
JavaScript supports several types of data:
let name = "Anna"; // String
let age = 30; // Number
let isStudent = true; // Boolean
let hobbies = ["Code", "Read"]; // Array
let person = { name: "Anna", age: 30 }; // Object
let x = null; // Null
let y = undefined; // Undefined

c) Comments
Use comments to explain your code or disable code from running:
// Single-line comment
/* Multi-line
comment */
Output Methods
1. console.log() – outputs to the browser’s console (for debugging)
console.log("This is a message");
2. alert() – shows a popup alert box
alert("Hello User!");
3. document.write() – writes directly to the web page (not recommended for production)
document.write("Welcome to my page");
4. innerHTML – writes into a specific HTML element
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Welcome";
</script>

Operators

Arithmetic Operators:
Used for mathematical calculations:
+ // Addition
- // Subtraction
* // Multiplication
/ // Division
% // Modulus (Remainder)
** // Exponentiation

Comparison Operators:
Used to compare values:
== // Equal to (ignores type)
=== // Equal and same type
!= // Not equal
!== // Not equal or not same type
<, >, <=, >= // Greater or less comparisons

Logical Operators:
Used to combine conditions:
&& // Logical AND
|| // Logical OR
! // Logical NOT
Conditional Statements
Used to perform different actions based on different conditions.
let age = 18;
if (age >= 18) {
console.log("You are an adult");
} else {
console.log("You are underage");
}
You can also use else if for multiple conditions:
let grade = 75;
if (grade >= 90) {
console.log("Excellent");
} else if (grade >= 60) {
console.log("Pass");
} else {
console.log("Fail");
}

Loops
Used to repeat code multiple times.

For Loop:
for (let i = 1; i <= 5; i++) {
console.log("Count: " + i);
}

While Loop:
let i = 0;
while (i < 3) {
console.log("Hello");
i++;
}

Do-While Loop:
Executes the code block at least once:
let i = 0;
do {
console.log("Number: " + i);
i++;
} while (i < 3);

Functions
Functions are reusable blocks of code that perform a specific task.
function greet(name) {
console.log("Hello, " + name);
}
greet("Tafadzwa");
You can return values:
function add(a, b) {
return a + b;
}
console.log(add(3, 5));

Events
Events are actions that occur in the browser (e.g., clicks, mouse movements, key presses).
JavaScript can detect and respond to these.

HTML:
<button onclick="showMessage()">Click Me</button>
<p id="output"></p>

JavaScript:
function showMessage() {
document.getElementById("output").innerHTML = "Button Clicked!";
}

Arrays and Objects

Arrays:
Used to store multiple values in a single variable.
let fruits = ["Apple", "Banana", "Mango"];
console.log(fruits[1]); // Banana

Objects:
Used to store key-value pairs.
let person = {
name: "Tafadzwa",
age: 26,
job: "Developer"
};
console.log(person.name);

11. DOM Manipulation


DOM (Document Object Model) allows you to access and manipulate HTML elements with
JavaScript.

Example:
<h2 id="header">Old Title</h2>
<script>
document.getElementById("header").innerHTML = "New Title";
</script>
You can also change styles, attributes, or even create new elements.

Practice Mini Project – Click Counter


This project counts the number of times a button is clicked.

index.html
<h1>Click Counter</h1>
<p id="count">0</p>
<button onclick="increase()">Click Me</button>
<script src="script.js"></script>

script.js
let counter = 0;
function increase() {
counter++;
document.getElementById("count").innerText = counter;
}

Exercises

Task 1:
Create a function that takes two numbers as parameters and displays the sum.
Task 2:
Use a for loop to print all even numbers from 1 to 20 in the console.
<script>
for (let i = 1; i <= 20; i++) {
if (i % 2 === 0) {
console.log(i); // Output even numbers
}
}
</script>
 for (let i = 1; i <= 20; i++): Starts a loop from 1 to 20.
 if (i % 2 === 0): Checks if the number is even using the modulus operator %. If the
remainder when i is divided by 2 is 0, it's even.
 console.log(i): Prints the even number to the console.

Task 3:
Build a form with a text input. When submitted, display the entered name below the form.

You might also like