Scribd
Upload
9 views

01-02 Fundamental Concepts

Uploaded by

tejasbadgujar238
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
9 views

01-02 Fundamental Concepts

Uploaded by

tejasbadgujar238
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 8

Basics Of JavaScript Programming

 Object Name
 Property
 Method
 Dot Syntax
 Main Event

Fundamental Concepts Of Java Script Programming


In JavaScript, objects, properties, and methods are fundamental concepts that define how data
and functions are structured and accessed. Here's an overview of each:
1. Object:
 An object in JavaScript is a collection of properties and methods.
 It can be created using object literals or the new Object() syntax.
 An object is essentially a way to group related data and functionality.
Example of Object:

In the above example:

Subject: Java Script Notes Print Date: [16/Oct/24], Page 1 of 8


 Person is the object.
 FirstName, LastName, and Age are properties.
 FullName is a method.
2. Property:
 A property is a key-value pair attached to an object.
 The keys are strings (or symbols) that reference specific values, which can be any
type of data (e.g., string, number, boolean, array, function, or another object).
 Accessing and Modifying Properties:
Properties can be accessed or modified using dot notation or bracket notation.
Dot Notation:
Syntax: ObjectName.PropertyName
document.write(Person.FirstName);
Bracket Notation
Syntax: ObjectName[PropertyName]
document.write(Person[“FirstName”]);

 Modifying a Property
ObjectName.PropertyName = NewValue;
ObjectName[PropertyName] = NewValue;
Person.FirstName = “Ram”;
Person[“FirstName”]=”Ram”;
3. Method:
 A method is a function that is associated with an object.
 Methods can access and modify the object's properties by using the this keyword,
which refers to the object the method belongs to.
 A method is a set of statements performed by an object when it receives a
message.
 Example of a Method:
Syntax : ObjectName.methodName();
Person.FullName();
 Here, FullName is a method of the Person object, and it returns the concatenated
string of FirstName and LastName.
 Example 2:
Subject: Java Script Notes Print Date: [16/Oct/24], Page 2 of 8
o Submit a button on the form is an object.
o The dimensions of the buttons are the properties of the object.
o When you click on the submit button, it causes the button to process the
method.

4. Creating Objects with the Constructor Function:


 You can also create objects using constructor functions.
 It is useful when you want to create multiple instances of an object.

Subject: Java Script Notes Print Date: [16/Oct/24], Page 3 of 8


Dot Syntax in Java Script.
 Dot syntax in JavaScript is used to access an object's properties or methods.
 It allows you to refer to a specific property or method by using a dot (.) between the object
name and the property or method you want to access.
 Example:

In this example:
person.name accesses the name property of the person object.
person.greet() calls the greet method of the person object.

Main Event in JavaScript


 In JavaScript, events represent actions or occurrences that happen in the browser, which
the system can respond to.
 These can be user-generated events like clicks, form submissions, key presses, or
system-generated events like the page loading.
 Types of Events in JavaScript
o Mouse Events:
 click : When a user clicks on an element.
 dblclick : When a user double-clicks.
 mousedown : When a mouse button is pressed.
 mouseup : When a mouse button is released.
Subject: Java Script Notes Print Date: [16/Oct/24], Page 4 of 8
 mouseover : When the mouse is moved over an element.
o Keyboard Events:
 keydown : When a key is pressed.
 keyup : When a key is released.
 keypress : When a key is pressed down and produces a character.
o Form Events:
 submit : When a form is submitted.
 change : When the value of an input element changes.
 focus : When an element gets focus.
 blur : When an element loses focus.
o Window Events:
 load : When the entire page loads.
 resize : When the browser window is resized.
 scroll : When the user scrolls the page.
Event Handlers in JavaScript
 Event handlers are functions that are executed when an event occurs. You can attach an
event handler to an HTML element by using:
o HTML attribute method : Add the event directly to the HTML tag.
o JavaScript property method : Use JavaScript to set the event handler.
o Event listener method :Use addEventListener() for greater flexibility.
 HTML Attribute Method
You can specify an event handler directly in the HTML tag:

Subject: Java Script Notes Print Date: [16/Oct/24], Page 5 of 8


 JavaScript Property Method
Assign an event handler using JavaScript:

 Using addEventListener()
This method allows you to add multiple event listeners to an element and is the preferred
method for handling events:

Subject: Java Script Notes Print Date: [16/Oct/24], Page 6 of 8


Example 2: Handling a Mouseover Event

Subject: Java Script Notes Print Date: [16/Oct/24], Page 7 of 8


Example 3: Handling a Form Submission

Subject: Java Script Notes Print Date: [16/Oct/24], Page 8 of 8

You might also like