Exploring the Fundamentals of JavaScript
Our Chapter Takeaways
Blocks pallet in scratch,
Look, Motion, Events and sound blocks.
adding new sprite,
adding new background,
opening an existing project
Varun: "Guys, I found this cool game online. It’s all in JavaScript!"
Sakshi: "JavaScript? Isn’t that like super hard?"
Hansika: "Not really! It’s just a language. Like how we speak, but for computers."
Varun: "Exactly! Look, we can start with simple stuff, like making a button."
Sakshi: "A button? But how?"
Hansika: "We just write a command. Let’s try document.write('Click Me!');"
Varun: "Whoa! It’s like magic, but with code!"
Sakshi: "This is fun! I’m going to learn more JavaScript tricks!"
[A boy and two girls are sitting next to each other at their desks in the classroom. The girl is holding a
tablet and asking something from both showing something on the screen.]
Before We Begin
Encircle the language which is not part of this group:
JavaScript | Visual Basic | Python | French | Java
JavaScript Statements
JavaScript is a powerful programming language primarily used to add interactivity to web pages. At
its core, JavaScript is composed of statements—these are the building blocks that tell the browser
what to do. Each statement performs a specific action, such as declaring a variable, performing a
calculation, or controlling the flow of the program. For example, consider a simple statement that
displays a message to the user:
alert("Welcome to JavaScript!");
This statement uses the `alert` function to show a pop-up box with the text "Welcome to JavaScript!"
to the user. Each JavaScript statement generally ends with a semicolon (`;`), though this is technically
optional. Multiple statements can be written on a single line, separated by semicolons, but it is a
good practice to place each statement on its own line for clarity.
JavaScript also supports conditional statements that allow code to execute differently based on
conditions. For instance, the `if` statement is used to perform a specific action only if a certain
condition is true:
let age = 18;
if (age >= 18) {
console.log("You are eligible to vote.");
In this example, the message "You are eligible to vote." will only be logged to the console if the `age`
is 18 or greater.
Teacher Clue
Please watch videos on YouTube and then help children to learn all the commands explained in this
chapter in Practical Lab.
JavaScript Output
In JavaScript, there are several ways to produce output, whether it's displaying text on a webpage,
sending messages to the console for debugging, or showing alerts to the user. Understanding these
different methods is essential for interacting with users and debugging your code.
1. `console.log()`: This method is used primarily for debugging. It sends the specified message to the
browser's console, which can be viewed by developers.
console.log("This is a message for developers.");
This statement will output "This is a message for developers." in the browser’s console.
2. `alert()`: As seen earlier, the `alert()` method displays a pop-up box with a specified message.
alert("This is an alert box.");
3. `document.write()`: This method writes directly to the HTML document. It can be used to display
content on the web page but should be used cautiously because it can overwrite the entire content
of the page.
document.write("Hello, World!");
4. `innerHTML`: This property is used to insert content into an HTML element. For example:
document.getElementById("demo").innerHTML = "JavaScript is awesome!";
Here, the text "JavaScript is awesome!" is placed inside the HTML element with the ID "demo".
Each of these methods serves a different purpose, from simple alerts to dynamic web content
generation, making them essential tools for any JavaScript programmer.
Variables and Data Types in JavaScript
Variables in JavaScript are used to store data that can be referenced and manipulated later in the
code. To declare a variable, you use the `var`, `let`, or `const` keywords. Each variable has a name,
which acts as a label for the data it holds.
let name = "Arya";
let age = 12;
let isStudent = true;
In this example, three variables are declared: `name` is a string, `age` is a number, and `isStudent` is a
boolean (true/false value).
JavaScript supports various data types, including:
1. Strings: Text data, enclosed in quotes (either single or double). For example, `"Hello, World!"`.
2. Numbers: Numeric data, which can be integers or floating-point values. For example, `42` or
`3.14`.
3. Booleans: True/false values. For example, `true` or `false`.
4. Objects: Complex data structures that can hold multiple values. For example:
let person = {firstName: "Arya", lastName: "Singh", age: 12};
5. Arrays: Collections of values, which can be of any data type. For example:
let fruits = ["Apple", "Banana", "Mango"];
Variables can change during the execution of a program if they are declared with `var` or `let`, but
not with `const`.
JavaScript LET
The `let` keyword was introduced in ECMAScript 6 (ES6) to improve how variables are declared.
Unlike `var`, which has been used historically, `let` allows you to declare block-scoped variables. This
means that a variable declared with `let` only exists within the block it was defined in, such as inside
a loop or an `if` statement.
let x = 10;
if (x > 5) {
let y = 20;
console.log(y); // Outputs: 20
console.log(y); // Error: y is not defined
In this example, `y` is only accessible within the `if` block. Outside of it, `y` doesn't exist, which helps
prevent errors in larger programs where variables might accidentally interfere with each other.
Using `let` is generally preferred over `var` because it leads to cleaner and more maintainable code.
The block scope helps avoid potential pitfalls associated with global or function-scoped variables that
`var` creates.
JavaScript Const
The `const` keyword is another ES6 addition, and it’s used to declare variables that should not be
reassigned after their initial value is set. This is particularly useful when you want to ensure that
certain values remain constant throughout the execution of your program.
const pi = 3.14;
console.log(pi); // Outputs: 3.14
pi = 3.14159; // Error: Assignment to constant variable
In this example, the value of `pi` cannot be changed once it's set. If you try to assign a new value to
`pi`, the program will throw an error. However, it’s important to note that if `const` is used to declare
an object or an array, the contents of the object or array can still be modified:
const car = {brand: "Toyota", model: "Corolla"};
car.model = "Camry";
console.log(car.model); // Outputs: Camry
Here, the `car` object itself remains constant, but its properties can be changed. This makes `const` a
powerful tool for creating predictable and stable code.
JavaScript Numbers
Numbers in JavaScript are a versatile data type that can handle both integers and floating-point
values. JavaScript treats all numbers as floating-point by default, following the IEEE 754 standard.
This means that even if you assign an integer to a variable, it’s stored as a floating-point number:
let num1 = 42; // An integer
let num2 = 3.14; // A floating-point number
JavaScript provides various methods and operators to work with numbers. For example, you can
perform arithmetic operations like addition, subtraction, multiplication, and division:
let sum = num1 + num2;
console.log(sum); // Outputs: 45.14
JavaScript also has built-in methods for converting other data types to numbers, such as `parseInt()`
and `parseFloat()`, which convert strings to integers and floating-point numbers, respectively:
let str = "100";
let intVal = parseInt(str);
console.log(intVal); // Outputs: 100
Additionally, JavaScript has a special value called `NaN` (Not-a-Number), which is used to indicate
that a calculation didn’t result in a valid number:
let result = "hello" 10;
console.log(result); // Outputs: NaN
Understanding how to work with numbers in JavaScript is crucial for tasks ranging from simple
arithmetic to complex mathematical calculations, making it a foundational skill for any developer.
Let’s Practice-1
SVRALIABE
Answer: VARIABLE
NTOCS
Answer: CONST
UPOUTT
Answer: OUTPUT
ADTATYPE
Answer: DATA TYPE
ATEMSENTTA
Answer: STATEMENT
SMBNERU
Answer: NUMBERS
Let’s Practice-2
Multiple Choice Questions (MCQs)
1. Which of the following is used to display a message in a pop-up box in JavaScript?
a) `console.log()`
b) `document.write()`
c) `alert()`
d) `innerHTML()`
2. What keyword is used to declare a variable that cannot be reassigned in JavaScript?
a) `let`
b) `var`
c) `const`
d) `function`
3. What will be the output of the following code?
let x = 10;
if (x > 5) {
let y = 20;
console.log(y);
a) 20
b) `undefined`
c) 10
d) Error: `y is not defined`
4. Which method is used to display content on the webpage directly?
a) `alert()`
b) `console.log()`
c) `document.write()`
d) `innerHTML()`
5. What will the following code output?
const pi = 3.14;
pi = 3.14159;
console.log(pi);
a) 3.14159
b) 3.14
c) Error: Assignment to constant variable
d) `undefined`
Fill in the Blanks
1. In JavaScript, the `______` keyword is used to declare variables that are block-scoped.
Answer: `let`
2. The `______` method is used to log messages to the browser's console for debugging purposes.
Answer: `console.log()`
3. JavaScript treats all numbers as ______ by default.
Answer: floating-point numbers
4. The `______` method can be used to convert a string to an integer in JavaScript.
Answer: `parseInt()`
5. In JavaScript, `NaN` stands for ______.
Answer: Not-a-Number
True or False
1. JavaScript requires a semicolon at the end of every statement.
2. The `const` keyword allows you to change the contents of an object or array.
3. The `innerHTML` property can be used to insert content into an HTML element.
4. Variables declared with `var` are block-scoped.
5. JavaScript can handle both integers and floating-point numbers.
Value-Based Question
Karan is learning JavaScript and wants to ensure that some values in his program do not change
throughout the execution. Which keyword should Karan use, and why is it important to declare
certain variables this way?
Competency-Based Question
You are developing a JavaScript program to manage a small library. How would you use variables,
data types, and constants to store information about the books, such as titles, authors, and the total
number of books, ensuring that the total number of books cannot be changed directly?
Activity-Based Question
Create a simple JavaScript program that takes a user's name and age as input, stores them in
variables, and then outputs a message that includes the user's name and whether they are eligible to
vote. Use `let` for variables and display the output using `console.log()`.
Task: Implement the program, test it with different age values, and observe how changing the age
affects the output.
Practical-Based Question
Write a JavaScript function that calculates the area of a circle. The radius of the circle should be
passed as an argument to the function. Use a constant for `pi` (3.14) and display the result using
`console.log()`. Test your function with different radius values.
Task: Implement the function, test it with different radii, and verify that the output is correct.
