JS CONTENTS
• Overview of java script (features, advantages and disadvantages)
• Uses of java script
• General Syntactic Characteristics
• Primitives, Operations And Expressions
• Objects
• Control and looping statements.
• Screen Output And Keyboard Input
Overview of java script (features, advantages and
disadvantages)
• JavaScript is a high-level, interpreted programming language that is
widely used to create interactive and dynamic web pages. It is a core
technology of the World Wide Web, alongside HTML and CSS. JavaScript
enables client-side script to interact with the user and make web pages
dynamic. JavaScript is the programming language of the web. Js is a case
sensitive.
Features of JavaScript
1. Lightweight – Small and efficient for web page scripting.
2. Interpreted – Executes code line-by-line in the browser (no need for
compilation).
3. Dynamic Typing – No need to declare variable types explicitly.
4. Object-Oriented – Supports object-oriented programming principles.
5. Event-Driven – Responds to user actions like clicks, scrolls, etc.
6. Cross-Platform – Works on any operating system and browser.
7. Versatile – Can be used for front-end and back-end (using [Link]).
8. Functional and Structured – Supports both programming paradigms.
Advantages of JavaScript
1. Client-Side Execution: Reduces server load by executing in the browser.
2. Fast: No need to compile; instantly interpreted in the browser.
3. Interactive Web pages: Enhances user experience with dynamic content.
4. Easy to Learn and Use: Simple syntax similar to C language.
5. Platform Independent: Works across all modern web browsers.
6. Rich Interfaces: Enables features like sliders, drag-and-drop, pop-ups.
Disadvantages of JavaScript
1. Browser Compatibility Issues: Code may behave differently in different
browsers.
2. Security Vulnerabilities: Can be exploited for malicious scripts (e.g., XSS
attacks).
3. Client-Side Dependency: Disabled JavaScript in browsers limits functionality.
4. No File Access: Cannot access local files due to browser sandboxing (for
security).
5. Debugging Challenges: Errors may be hard to trace without proper tools.
Uses of java script
• Makes websites interactive (buttons, sliders, forms).
• Validates form inputs before submission.
• Creates dynamic content (e.g., show/hide sections, pop-ups).
• Handles browser events like clicks, keypresses, etc.
• Builds games that run in the browser.
• Creates animations and visual effects.
• Fetches data from servers using AJAX (without reloading the
page).
• Used in mobile and desktop apps via frameworks (e.g., React
Native, Electron).
• Controls multimedia (audio/video).
• Supports back-end development using [Link].
General Syntactic Characteristics
• To use JavaScript in HTML, you typically embed it using the
<script> tag. Here’s a breakdown of the general syntax of
JavaScript when included in an HTML document:
1. Inline JavaScript (in the HTML file itself): In the <head> or
<body>.
2. JavaScript at the End of <body> (Best Practice): Placing the script at the
end of the body ensures the HTML is loaded before the JavaScript runs.
3. External JavaScript File: You can link an external .js file using the src
attribute in the <script> tag.
Syntax:
<script type=“ text/javascript” src=“[Link]”>
</script>
Examples (Inline JavaScript)
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<script>
// JavaScript goes here
function sayHello() {
alert("Hello from the head!");
}
</script>
</head>
<body>
<button onclick="sayHello()">Click Me</button>
</body>
</html>
Examples(JavaScript at the End of <body>)
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>Welcome</h1>
<button id="btn">Click Me</button>
<script>
[Link]("btn").onclick = function () {
alert("Button clicked!");
};
</script>
</body>
</html>
Examples (External JavaScript File)
HTML File ([Link]):
<!DOCTYPE html>
<html>
<head>
<title>External JS</title>
<script src="[Link]"></script>
</head>
<body>
<button onclick="greet()">Greet</button>
</body>
</html>
JavaScript File ([Link]):
function greet() {
alert("Hello from external JS!");
}
JavaScript Comments
1. Single Line Comments: Single line comments start with //
2. Multi-line Comments: Multi-line comments start with /* and end
with */.
• Any text between /* and */ will be ignored by JavaScript.
Keywords in JS:
• JavaScript has a set of reserved keywords that have special
meaning in the language. As of the latest ECMAScript standard
(ES2023), there are around 64 keywords, not including future
reserved words, literals, or global objects.
• EXAMPLES: if, else, switch, case, default, break, continue, for, while, do, in, var, let,
const, function, return, class, extends, constructor, super, try, catch, finally, throw, true,
false, null, import, export, from, enum, implements, interface, package, private,
protected, public, static, ……ETC
Primitives types in java script
• In JavaScript, primitive types are the most basic data types that hold
single immutable values. JavaScript has seven primitive types:
1. String
2. Number
3. Boolean
4. Undefined
5. Null
6. Symbol
7. BigInt
Primitives types in java script
1. String: Represents a sequence of characters.
Example: let name = "Alice";
2. Number: Represents both integer and floating-point numbers.
Example: let age = 25;
let price = 10.99;
3. Boolean: Represents true or false.
Example: let isStudent = true;
4. Undefined: A variable declared but not assigned a value.
Example: let x;
[Link](x); // undefined
5. Null: Represents intentional absence of any object value.
Example: let y = null;
6. Symbol: Represents a unique and immutable value often used as object keys.
Example: let sym = Symbol("id");
7. BigInt: Used for very large integers beyond the safe integer limit of Number.
Example: let big = 1234567890123456789012345678901234567890n;
Primitives types in java script
• Declaring variables, initializing, changing values, using const, and understanding
variable scope in JavaScript:
• Declaring Variables: Declare variables using:
• var (function-scoped, old way)
• let (block-scoped, modern way)
• const (block-scoped and constant)
• if declared with const, you cannot change the value:
– const gravity = 9.8;
– gravity = 10; // ❌ Error: Assignment to constant variable
const Keyword
• Use const when you don’t want the value to change.
• Must be initialized at the time of declaration.
Eg: const country = "India"; // Must be initialized
Primitives types in java script
Variable Scope
Scope defines where a variable is accessible.
1. Global Scope – Declared outside any block or function:
Eg: let globalVar = "Available everywhere";
2. Function Scope or local or Block variable– message is accessible only inside the
function:
Eg: function greet() {
var message = "Hello";
}
// alert(message); //❌ Not accessible outside
Eg: if (true) {
let temp = 100;
const humidity = 50;
}
// alert(temp); //❌ Not accessible outside block
JavaScript Operators
What Are Operators in JavaScript?
Operators in JavaScript are symbols used to perform operations on
values and variables. For example: +, -, *, /.
• Types of JavaScript Operators:
1. Arithmetic Operators
2. Assignment Operators
3. Comparison Operators
4. String Operators
5. Logical Operators
6. Type Operators
Arithmetic Operators
• Used to perform basic mathematical operations.
Operator Description Example Result
+ Addition 5+2 7
- Subtraction 5-2 3
* Multiplication 5*2 10
/ Division 10 / 2 5
Modulus
% 10 % 3 1
(Remainder)
** Exponentiation 2 ** 3 8
++ Increment x++ Adds 1
-- Decrement x-- Subtracts 1
Assignment Operators
• Assign values to variables. let x = 5; alert(x);
Operator Description Example Same As
= Assign x = 10 -
+= Add and assign x += 5 x=x+5
-= Subtract and assign x -= 3 x=x-3
*= Multiply and assign x *= 2 x=x*2
/= Divide and assign x /= 2 x=x/2
%= Modulus and assign x %= 3 x=x%3
Comparison Operators
• Used to compare values. alert(5 == '5');
Operator Description Example Result
== Equal to 5 == '5' true
=== Equal value & type 5 === '5' false
!= Not equal 5 != 3 true
Not equal value or
!== 5 !== '5' true
type
> Greater than 5>3 true
< Less than 5<3 false
Greater than or
>= 5 >= 5 true
equal to
Less than or equal
<= 5 <= 6 true
to
String Operators
• Concatenates (joins) strings.
• alert("Hi " + "There");
Operator Description Example Result
+ Concatenation "Hello" + " World" "Hello World"
Logical Operators
• Used with boolean values.
• alert(true && false);
Operator Description Example Result
&& Logical AND true && false false
|| Logical OR True || false true
! Logical NOT !true false
Type Operators and Conditional operator
• Checks the type of a variable.
• alert(typeof 123);
• The conditional operator (also called the ternary operator) is a shorthand way to write an
if...else statement. It is often used for concise decision-making expressions.
Syntax: condition ? expression_if_true : expression_if_false;
Example:
let age = 18;
let message = (age >= 18) ? "You are an adult." : "You are a minor.";
alert(message);
Operator Description Example Result
typeof Returns variable type typeof 123 "number"
obj instanceof
instanceof Checks object type true
Object
Control Statements in JavaScript
• Control statements in JavaScript are used to control the flow of
execution in a program. These include conditional statements,
looping statements, and control transfer statements.
• Conditional Statements:
1. if Statement
2. if...else Statement
3. if...else if...else Ladder (nested if and if else)
4. switch Statement
• Looping Statements
1. for Loop
2. while Loop
3. do...while Loop
• Control Transfer Statements
1. Break
2. continue
Conditional Statements
• Executes a block of code if a specified condition is true. if
• Executes one block of code if the condition is true, and another if it's false. If
else
• Checks multiple conditions in sequence. Nested
Example:
if (age >= 18) {
alert("You are eligible to vote.");
} else {
alert("You are not eligible to vote.");
}
Example:
if (score >= 90) {
alert("Grade A");
} else if (score >= 75) {
alert("Grade B");
} else {
alert("Grade C");
}
Conditional Statements
• Selects one of many blocks of code to execute. switch
Example:
let day = 2;
switch (day) {
case 1:
alert("Monday");
break;
case 2:
alert("Tuesday");
break;
default:
alert("Another day");
}
Looping Statements
• Loops a block of code a known number of times. for
• Loops a block of code as long as the condition is true. While
• Similar to while, but runs at least once. Do while
Examples
for (let i = 1; i <= 5; i++) {
alert("Number " + i);
}
Examples
let i = 1;
while (i <= 5) {
alert(i);
i++;
}
Examples
let i = 1;
do {
alert(i);
i++;
} while (i <= 5);
Control Transfer Statements
• Exits a loop or switch statement early. break
• Skips the current iteration of a loop. Continue
Examples:
for (let i = 1; i <= 10; i++) {
if (i === 5) break;
alert(i); // Will print 1 to 4
}
Examples:
for (let i = 1; i <= 5; i++) {
if (i === 3) continue;
alert(i); // Skips 3
}
Screen output and keyboard input methods
[Link]() method
[Link]() method
[Link]()
[Link]()
[Link]()
[Link]()
[Link]()
Screen output and keyboard input methods
Output on
Method Type Description Example
Screen
Writes directly to
Output [Link]("
[Link]() the HTML Hello!
(Screen) Hello!")
document.
Same as write(),
but adds a
Output newline. Useful [Link](
[Link]() Line1
(Screen) in source code, "Line1")
not visible in
HTML.
Accesses or
[Link] Changes
updates the
[Link] Output/Input mentById("demo" content of
content/value of
tById() (DOM) ).innerHTML = element with
an HTML
"Hi"; ID demo
element by ID.
Screen output and keyboard input methods
Output on
Method Type Description Example
Screen
Displays a popup
Popup:
[Link]() Output (Popup) alert box with a alert("Welcome!")
Welcome!
message.
(Deprecated in
most browsers)
Output (Status [Link] = Status bar text
[Link] Sets text in the
Bar) "Loading..."; (may not work)
browser's status
bar.
Shows a dialog
with OK and confirm("Are you Popup with
[Link]() Input (Popup)
Cancel. Returns sure?") OK/Cancel
true or false.
Prompts user to
input a value. prompt("Enter Popup with input
[Link]() Input (Popup)
Returns the input name:") field
as a string.
Screen output and keyboard input methods
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<script>
// Output
[Link]("This is [Link]()<br>");
[Link]("This is [Link]()");
// Alert box
[Link]("Hello from alert!");
// DOM manipulation
[Link]("demo").innerHTML = "Changed using getElementById";
// Confirm box
let result = [Link]("Do you want to continue?");
[Link]("<br>Confirm result: " + result);
// Prompt input
let name = [Link]("Enter your name:");
[Link]("<br>Your name is: " + name);
</script>
</body>
</html>
Design and display calculater
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple Calculator</title>
</head>
Design and display calculater
<body>
<div class="calculator">
<input type="text" id="result" disabled>
<div class="buttons">
<button onclick="clearScreen()">C</button>
<button onclick="deleteLast()">⌫</button>
<button onclick="appendValue('/')">/</button>
<button onclick="appendValue('*')">*</button>
<button onclick="appendValue('7')">7</button>
<button onclick="appendValue('8')">8</button>
<button onclick="appendValue('9')">9</button>
<button onclick="appendValue('-')">-</button>
<button onclick="appendValue('4')">4</button>
<button onclick="appendValue('5')">5</button>
<button onclick="appendValue('6')">6</button>
<button onclick="appendValue('+')">+</button>
<button onclick="appendValue('1')">1</button>
<button onclick="appendValue('2')">2</button>
<button onclick="appendValue('3')">3</button>
<button onclick="calculate()">=</button>
<button onclick="appendValue('0')" style="width: 112px">0</button>
<button onclick="appendValue('.')">.</button>
</div>
</div>
Design and display calculater
<script>
function appendValue(value) {
[Link]("result").value += value;
}
function clearScreen() {
[Link]("result").value = "";
}
function deleteLast() {
let current = [Link]("result").value;
[Link]("result").value = [Link](0, -1);
}
function calculate() {
try {
let result = eval([Link]("result").value);
[Link]("result").value = result;
} catch {
alert("Invalid Expression!");
}
}
</script>
</body>
</html>
THANK YOU
