What is JavaScript?
JavaScript is a programming language used to create interactive web pages.
It adds behavior and functionality to websites.
JavaScript works together with HTML and CSS.
It runs directly inside the web browser.
It is one of the most popular programming languages for web development.
History of JavaScript
JavaScript was created in 1995.
Developed by Brendan Eich at Netscape.
Originally called Mocha.
Later renamed LiveScript.
Finally named JavaScript.
The official standard is called ECMAScript (ES).
Example:
HTML → Creates Button
CSS → Styles the button
JavaScript → Makes the button work
Where JavaScript Runs
Client Side (Browser)
Runs inside the web browser.
Executed by the JavaScript engine.
Examples: Chrome -V8, Firefox-SpiderMonkey, Safari-JavaScriptCore
Server Side
Runs on the server using [Link].
Used for backend development and APIs.
Server side JavaScript is used for:
Databases
APIs
Backend logic
Example uses:
login system
saving user data
payment processing
Features of JavaScript
Lightweight language: JavaScript is easy to learn and write.
Interpreted language: JavaScript does not need compilation.
Event-driven programming: JavaScript responds to user actions.(clicks)
Object-based language: JavaScript uses objects to represent real-world
entities.
Platform independent
Limitations of JavaScript
1. Browser Security Restrictions
JavaScript cannot access user files directly.
2. Browser Compatibility Issues
Different browsers may behave differently.
3. Debugging Can Be Difficult
Large applications may be complex.
What Can JavaScript Do?
Can handle events
Can read and write HTML elements
Can validate form data
Can access / modify browser cookies
Can detect the user’s browser and OS
Can be used as object-oriented language
Can handle exceptions
Can perform asynchronous server calls (AJAX)
What Can JavaScript can’t Do?
Can not do database related operation
Can not close a window that it hasn't opened.
Cannot Read From or Write to Files in the Client.
Cannot Protect Your Page Source or Images
JavaScript - Placement in HTML File
1. Script in <head> Section 2. Script in <body> Section
3. External JavaScript File
Basic Example of JavaScript
Explanation
<script> : Used to write JavaScript code.
document : Represents the webpage.
[Link]() : Displays output on the webpage.
Ways to Add JavaScript
Output Methods in JavaScript
In JavaScript, output methods are used to display information or results to
the user or developer.
JavaScript programs often perform calculations or process data, and the
results need to be shown somewhere.
JavaScript can display output in different ways such as:
On the web page
In a popup window
In the browser console
Inside HTML elements
The most commonly used output methods are:
1. [Link]()
2. alert()
3. [Link]()
4. innerHTML
1. [Link]()
[Link]() is used to write content directly to the HTML document (web page).
It displays output inside the webpage itself.
2. alert()
alert() displays a popup message box in the browser.
It is mainly used to show warning messages or notifications.
3. [Link]()
[Link]() is used to display messages in the browser console.
It is mainly used for debugging and testing code.
Developers use it to check variable values and program flow.
4. innerHTML
innerHTML is used to change or display content inside an HTML element.
It allows JavaScript to modify webpage content dynamically.
Standard Popup Boxes
Alert box with text and [OK] button
Just a message shown in a dialog box:
alert("Some text here");
Confirmation box
Contains text, [OK] button and [Cancel] button:
confirm("Are you sure?");
Prompt box
Contains text, input field with default value:
prompt ("enter amount", 10);
Examples
1. Show Message When Button is Clicked
2. Ask User Name
3. Simple Calculator Message
4. Button That Changes Text
JS- Java Script Variables
Example By using Var Example By using let
var x = 5; letx = 5;
var y = 6; lety = 6;
var z = x + y;
letz = x + y;
Example By using Const Example By using nothing
const x = 5; x = 5;
const y = 6; y = 6;
letz = x + y; z = x + y;
Variable naming conventions
1. You should not use any of the JavaScript reserved keywords as a variable name.
For example, break or boolean variable names are not valid.
2. JavaScript variable names should not start with a numeral (0-9).
[Link] must begin with a letter or an underscore character. For example, 123test
is an invalid variable name but _123test is a valid one.
4. JavaScript variable names are case-sensitive. For example, Name and name are
two different variables.
Variables in JavaScript
A variable is used to store data or values in a program.
It acts like a container that holds information.
The stored value can be used or changed later in the program.
Age = 20
Here:
Age → variable name
20 → value stored in the variable
Declaring Variables in JavaScript
In JavaScript, variables can be declared using three keywords:
var
let 1. var (Old Method)
var was used in older versions of JavaScript
const
2. let (Modern Method) 3. const (Constant Variable)
let was introduced in ES6 (2015). const is used for values that should not change.
Data Types in JavaScript
What is a Data Type
A data type defines the type of data stored in a variable.
It tells JavaScript what kind of value the variable contains.
Different types of data require different operations.
Checking Data Type
JavaScript provides a typeof operator.
7. User Input
Why Data Types are Important
Data types help JavaScript to:
Store data properly
Perform correct operations
Manage memory efficiently
Avoid errors in programs
Types of Data Types in JavaScript
JavaScript has two main categories of data types.
1. Primitive Data Types 2. Non-Primitive Data Types
These store single values. These store collections of values.
String
Examples:
Number
Object
Boolean
Undefined Array
Null Function
BigInt
Symbol
Non-Primitive Data Types
1. Object
Objects store multiple values in key-value pairs
2. Array
Arrays store multiple values in a single variable.
Arrays in JavaScript
An array is a data structure used to store multiple values in a single variable.
Instead of creating many variables, we can store all values in one array.
Array elements are stored using index numbers.
Why Arrays are Used
Arrays are useful when we need to:
Store multiple values
Manage lists of data
Process similar data easily
Example:
Student names
Product list
Marks of subjects
Cities list
How to Create array in Javascript
Method 1:
var cars = ["Saab", "Volvo", "BMW"];
Method 2:
var cars = new Array("Saab", "Volvo", "BMW");
Method 3:
cars[0] = “Saab”
cars[1]= “Volvo”
cars[2]= “BMW”
How to access Values of Arrays in Javascript
Method 1:- To Access only one value
var name = cars[0];
Method 2: To Access only one value with showing it in HTML Page
[Link]("t1").value = cars[0];
Method 3: To Access full Array
[Link]("t1").value= cars;
Functions in JavaScript
A function is a block of code designed to perform a specific task.
It runs only when it is called.
Functions help reuse code instead of writing the same code multiple times.
Why Functions are Used
Functions are used to:
Reduce code repetition
Organize programs
Improve code readability
Make programs easier to maintain
Break large programs into smaller parts
Decision Making
Loops
Used for repetation of the code or the operations.
Advantages of JavaScript
Speed: Client-side JavaScript is very fast because it can be run immediately
within the client-side browser.
Simplicity: JavaScript is relatively simple to learn and implement.
Popularity: JavaScript is used everywhere on the web.
Interoperability: JavaScript plays nicely with other languages and can be used
in a huge variety of applications.
Server Load: Being client-side reduces the demand on the website server.
Rich Interface: Gives the ability to create rich interfaces.
Disadvantages of JavaScript
Client-Side Security: Because the code executes on the users’ computer, in
some cases it can be exploited for malicious purposes. This is one reason some
people choose to disable Javascript.
Browser Support: JavaScript is sometimes interpreted differently by different
browsers. This makes it somewhat difficult to write cross-browser code.
DOM (Document Object Model)
DOM stands for Document Object Model.
It is a programming interface for HTML and XML documents.
The DOM represents the structure of a webpage as objects.
It allows JavaScript to access and modify HTML elements dynamically.
Why DOM is Important
DOM allows JavaScript to:
Change HTML content
Change CSS styles
Handle events
Add or remove HTML elements
Create dynamic webpages
Without DOM, JavaScript cannot interact with
HTML elements.
With the object model, JavaScript gets all the power it needs to create
dynamic HTML:
1. JavaScript can change all the HTML elements in the page
2. JavaScript can change all the HTML attributes in the page
3. JavaScript can change all the CSS styles in the page
4. JavaScript can remove existing HTML elements and attributes
5. JavaScript can add new HTML elements and attributes
Accessing HTML Elements Using DOM
JavaScript uses different methods to select elements.
Common methods:
getElementById()
getElementsByClassName()
getElementsByTagName()
querySelector()
Methods Description
getElementById(id) Find an element by element id
getElementsByTagName(name) Find an element by Tag Name
getElementsByClassName(name) Find an element by Class Name
getElementsByName(name) Find an element by element name
write() Writes new text to a document
Events in JavaScript
What is an Event
An event is an action that occurs in the browser.
Events can be triggered by the user or the browser.
JavaScript can detect these events and respond to them.
Simple Definition
An event is something that happens on a webpage, and JavaScript can react to it.
Examples of Events
Some common user actions that create events:
Clicking a button
Moving the mouse
Pressing a key
Submitting a form
Loading a webpage
Common JavaScript Events
Event Description
onclick Triggered when element is clicked
onmouseover When mouse moves over element
onmouseout When mouse leaves element
onkeydown When key is pressed
onload When page finishes loading
onchange When input value changes
💡 Fun Fact:
JavaScript was created in just 10 days by Brendan Eich in 1995 while working at
Netscape Communications.
He originally named it Mocha, then LiveScript, and later it was renamed JavaScript
to ride the popularity of Java at that time.
👉 Even though the names are similar, Java and JavaScript are completely different
languages.