Introduction to Java Scripts
JavaScript is a high-level programming language used to create dynamic content for
websites. It is a lightweight, cross-platform, and single-threaded programming language.
JavaScript is an interpreted language that executes code line by line providing more
flexibility.
HTML adds Structure to a web page, CSS styles it and JavaScript brings it to life by
allowing users to interact with elements on the page, such as actions on clicking buttons,
filling out forms, and showing animations.
JavaScript on the client side is directly executed in the user's browser. Almost all browsers
have JavaScript Interpreter and do not need to install any software. There is also a browser
console where you can test your JavaScript code.
JavaScript is also used on the Server side (on Web Servers) to access databases, file
handling and security features to send responses, to browsers.
Importance of Javascript
JavaScript is one of the 3 languages all web developers must learn:
HTML to define the content of web pages
CSS to specify the layout of web pages
JavaScript to program the behavior of web pages
Basic Structure of JavaScript:
// This is a simple JavaScript example
let message = "Hello, World!"; // Declare a variable
alert(message); // Display message in a popup
Objects in JavaScript
In JavaScript, an object is a collection of key-value pairs, where the keys (also called
properties) are strings (or symbols), and the values can be any data type, including other objects,
arrays, or functions. Objects are used to store and organize related data and functionality.
Objects are fundamental in JavaScript because they allow you to model real-world entities and
complex structures in your code.
Creating an Object
There are a few ways to create objects in JavaScript.
1. Using Object Literals: The most common and straightforward way to create an object is
by using the object literal syntax:
let person = {
name: "John Doe",
age: 30,
greet: function() {
[Link]("Hello, " + [Link]);
}
};
In this example, person is an object with:
o name: a property holding a string value ("John Doe").
o age: a property holding a number value (30).
o greet: a method (function) that outputs a greeting message.
2. Using the new Object() Constructor: You can also create an object using the
Object() constructor:
let person = new Object();
[Link] = "John Doe";
[Link] = 30;
[Link] = function() {
[Link]("Hello, " + [Link]);
};
This approach is less common since object literals are more concise and readable.
3. Using a Constructor Function: A constructor function is used to create multiple
instances of objects with the same structure. Constructor functions are generally used
when you want to create many objects that share the same properties and methods.
function Person(name, age) {
[Link] = name;
[Link] = age;
[Link] = function() {
[Link]("Hello, " + [Link]);
};
}
let person1 = new Person("John Doe", 30);
let person2 = new Person("Jane Doe", 28);
[Link](); // Outputs: Hello, John Doe
[Link](); // Outputs: Hello, Jane Doe
Accessing and Modifying Object Properties
Dot Notation: This is the most common and simplest way to access or modify an object's
properties.
[Link]([Link]); // Access property
[Link] = 35; // Modify property
Bracket Notation: Bracket notation is useful when property names contain spaces,
special characters, or are dynamic.
[Link](person["name"]); // Access property
person["age"] = 35; // Modify property
Adding New Properties to an Object
You can add new properties to an existing object using dot or bracket notation:
[Link] = "Engineer"; // Using dot notation
person["city"] = "New York"; // Using bracket notation
Deleting Properties from an Object
You can delete properties using the delete operator:
delete [Link]; // Removes the 'age' property from the object
Accessing Methods in Objects
Methods are functions defined as properties of an object. You can call methods using dot
notation or bracket notation with following syntax:
[Link]()
Example:
[Link](); // Calls the greet method and outputs: Hello, John Doe
The this Keyword
The this keyword refers to the object that the method is a part of. Inside an object’s method,
this refers to the object itself.
let person = {
name: "John",
greet: function() {
[Link]("Hello, " + [Link]); // 'this' refers to the 'person'
object
}
};
[Link](); // Outputs: Hello, John
DHTML:
DHTML stands for Dynamic HTML. Dynamic means that the content of the web page can be
customized or changed according to user inputs i.e. a page that is interactive with the user. In
earlier times, HTML was used to create a static page. It only defined the structure of the content
that was displayed on the page. With the help of CSS, we can beautify the HTML page by
changing various properties like text size, background color, etc. The HTML and CSS could
manage to navigate between static pages but couldn’t do anything else. If 1000 users view a page
that had their information for eg. Admit card then there was a problem because 1000 static pages
for this application build to work. As the number of users increases, the problem also increases,
and at some point, it becomes impossible to handle this problem. To overcome this problem,
DHTML came into existence. DHTML included JavaScript along with HTML and CSS to make
the page dynamic. This combo made the web pages dynamic and eliminated the problem of
creating static pages for each user. To integrate JavaScript into HTML, a Document Object
Model(DOM) is made for the HTML document. In DOM, the document is represented as nodes
and objects which are accessed by different languages like JavaScript to manipulate the
document.
DHTML JavaScript
HTML document include JavaScript:: The JavaScript document is included in our html
page using the html tag. <src> tag is used to specify the source of external JavaScript file.
Following are some of the tasks that can be performed with JavaScript:
Performing html tasks
Performing CSS tasks
Handling events
Validating inputs
Example 1: Example to understand how to use JavaScript in DHTML.
HTML
<h1>
GeeksforGeeks
</h1>
<p id = "geeks">
Hello Geeks!
</p>
<script>
[Link]("geeks").innerHTML =
"A computer science portal for geeks";
</script>
Output:
Explanation: In the above example, change the text of the paragraph using id. A document is an
object of HTML that is displayed in the current window or object of DOM. The
getElementById(id) gives the element id. The innerHTML defines the content within the id
element. The id attribute is used to change an HTML document and its property. Paragraph
content changed by document id. For example [Link](“geeks”).[Link] =
“blue”; It is used to set the paragraph color using the id of elements.
Example 2: Creating an alert on click of a button.
HTML
<h1 id = "para1"
style="display: flex; margin: auto; justify-content: center;">
GeeksforGeeks
</h1>
<input type = "Submit"
>
style="display: flex; margin: auto; justify-content: center;"/>
<script>
function Click() {
[Link]("para1").[Link] = "green";
[Link]("Color changed to green");
</script>
Output:
Explanation: In this example, creating a function that will be invoked on click of a button and it
changes the color of text and display the alert on the screen. window is an object of current
window whose inbuilt method alert() is invoked in Click() function.
XML:
xtensible Markup Language (XML) is a markup language that defines a set of rules for encoding
documents in a format that is both human-readable and machine-readable. The design goals of
XML focus on simplicity, generality, and usability across the Internet. It is a textual data format
with strong support via Unicode for different human languages. Although the design of XML
focuses on documents, the language is widely used for the representation of arbitrary data
structures such as those used in web services.
1. XML stands for extensible Markup Language
2. XML is a markup language like HTML
3. XML is designed to store and transport data
4. XML is designed to be self-descriptive
Syntax:
<root>
<child>
<subchild>.....</subchild>
</child>
</root>
Example:
This note is a note to Tove from Jani, stored as XML:
<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget this Weekend!</body>
</note>
The XML above is quite self-descriptive:
It has sender information
It has receiver information
It has a heading
It has a message body
Document Type Definition(DTD)
DTD stands for Document Type Definition.
A DTD defines the structure and the legal elements and attributes of an XML
document.
A DTD can be declared inside an XML document as inline or as an external
recommendation. DTD determines how many times a node should appear, and
how their child nodes are ordered.
There are 2 data types, PCDATA and CDATA
PCDATA is parsed character data.
CDATA is character data, not usually parsed.
Syntax:
<!DOCTYPE element DTD identifier
first declaration
second declaration
nth declaration
]>
Example:
XML document with an internal DTD:
XML
<?xml version="1.0"?>
<!DOCTYPE address [
<!ELEMENT address (name, email, phone, birthday)>
<!ELEMENT name (first, last)>
<!ELEMENT first (#PCDATA)>
<!ELEMENT last (#PCDATA)>
<!ELEMENT email (#PCDATA)>
<!ELEMENT phone (#PCDATA)>
<!ELEMENT birthday (year, month, day)>
<!ELEMENT year (#PCDATA)>
<!ELEMENT month (#PCDATA)>
<!ELEMENT day (#PCDATA)>
]>
<address>
<name>
<first>Rohit</first>
<last>Sharma</last>
</name>
<email>sharmarohit@[Link]</email>
<phone>9876543210</phone>
<birthday>
<year>1987</year>
<month>June</month>
<day>23</day>
</birthday>
</address>
The DTD above is interpreted like this:
!DOCTYPE address defines that the root element of this document is address.
!ELEMENT address defines that the address element must contain four elements: “name,
email, phone, birthday”.
!ELEMENT name defines that the name element must contain two elements: “first, last”.
o !ELEMENT first defines the first element to be of type “#PCDATA”.
o !ELEMENT last defines the last element to be of type “#PCDATA”.
!ELEMENT email defines the email element to be of type “#PCDATA”.
!ELEMENT phone defines the phone element to be of type “#PCDATA”.
!ELEMENT birthday defines that the birthday element must contain three elements
“year, month, day”.
o !ELEMENT year defines the year element to be of type “#PCDATA”.
o !ELEMENT month defines the month element to be of type “#PCDATA”.
o !ELEMENT day defines the day element to be of type “#PCDATA”.
XML document with an external DTD:
XML
<?xml version="1.0"?>
<!DOCTYPE address SYSTEM "[Link]">
<address>
<name>
<first>Rohit</first>
<last>Sharma</last>
</name>
<email>sharmarohit@[Link]</email>
<phone>9876543210</phone>
<birthday>
<year>1987</year>
<month>June</month>
<day>23</day>
</birthday>
</address>
[Link]:
<!ELEMENT address (name, email, phone, birthday)>
<!ELEMENT name (first, last)>
o <!ELEMENT first (#PCDATA)>
o <!ELEMENT last (#PCDATA)>
<!ELEMENT email (#PCDATA)>
<!ELEMENT phone (#PCDATA)>
<!ELEMENT birthday (year, month, day)>
o <!ELEMENT year (#PCDATA)>
o <!ELEMENT month (#PCDATA)>
o <!ELEMENT day (#PCDATA)>
Output:
XML Schema:
XML Schema (XSD) is a language used for defining the structure and data types of an XML
document. Unlike DTD (Document Type Definition), which only defines the structure, XML
Schema can also specify data types (like string, integer, date, etc.) for elements and attributes in
an XML document.
XML Schema allows for:
1. Defining elements and attributes with specific data types.
2. Validating data in XML files, ensuring correctness and conformity to a defined
structure.
3. Describing relationships between elements in a more sophisticated manner (e.g.,
sequences, choices).
4. Reusability of complex data structures using types and inheritance.
Components of XML Schema (XSD)
Elements: Define the structure of the document.
Attributes: Define additional information for elements.
Complex Types: Used when elements contain other elements (more detailed data
structures).
Simple Types: Used when elements contain only text data, like strings or numbers.
Data Types: Defines what kind of data the elements and attributes can hold (e.g.,
xs:string, xs:decimal).
Example of XML Schema (XSD)
Let's take an example of a bookstore to demonstrate how you can define an XML schema for it.
1. XML Example for Bookstore (The XML document we're going to validate)
<?xml version="1.0" encoding="UTF-8"?>
<bookstore xmlns:xsi="[Link]
xsi:noNamespaceSchemaLocation="[Link]">
<book id="1">
<title lang="en">Learning XML</title>
<author>John Doe</author>
<price>29.95</price>
<publisher>XYZ Publications</publisher>
</book>
<book id="2">
<title lang="es">Aprendiendo XML</title>
<author>Juan Pérez</author>
<price>19.95</price>
<publisher>ABC Editorial</publisher>
</book>
</bookstore>
2. XML Schema (XSD) for Bookstore
<?xml version="1.0" encoding="UTF-8"?>
<xs:schema xmlns:xs="[Link]
<!-- Root element -->
<xs:element name="bookstore">
<xs:complexType>
<xs:sequence>
<!-- Defining book element that can repeat -->
<xs:element name="book" maxOccurs="unbounded">
<xs:complexType>
<xs:sequence>
<!-- Title element with lang attribute -->
<xs:element name="title">
<xs:complexType>
<xs:sequence>
<xs:element name="text" type="xs:string"/>
</xs:sequence>
<xs:attribute name="lang" type="xs:string" use="required"/>
</xs:complexType>
</xs:element>
<!-- Author element -->
<xs:element name="author" type="xs:string"/>
<!-- Price element -->
<xs:element name="price" type="xs:decimal"/>
<!-- Publisher element -->
<xs:element name="publisher" type="xs:string"/>
</xs:sequence>
<!-- Book id as a required attribute -->
<xs:attribute name="id" type="xs:ID" use="required"/>
</xs:complexType>
</xs:element>
</xs:sequence>
</xs:complexType>
</xs:element>
</xs:schema>
The above XML schema is explained as follows
Root Element:
<xs:element name="bookstore">: This defines the root element of the XML document,
which is bookstore in this case.
Complex Types and Sequences:
<xs:complexType>: This tag is used to define an element that has child elements or
attributes. It is used here to define the structure of the bookstore and book elements.
<xs:sequence>: This specifies that the child elements should appear in a particular order
(e.g., title, author, price, publisher).
Element Details:
<xs:element name="book" maxOccurs="unbounded">: This defines that the book
element can appear multiple times (indicated by maxOccurs="unbounded").
xs:string: The data type for text elements like title, author, and publisher.
xs:decimal: Specifies that the price element must contain a decimal number.
Attributes:
xs:attribute name="id" type="xs:ID" use="required": This specifies that the book
element must have an id attribute, and the value of id must be a unique identifier (xs:ID
type).
Required Attribute:
xs:attribute name="lang" type="xs:string" use="required": The title element must
have a lang attribute (such as en for English or es for Spanish), and it is mandatory.
To refer to the XML schema (XSD) in the XML document, you use the xsi:schemaLocation or
xsi:noNamespaceSchemaLocation attribute in the root element.
