You are on page 1of 24

Notes

Unit 1
JavaScript introduction

• JavaScript is a lightweight, cross-platform, and interpreted compiled programming language


which is also known as the scripting language for webpages.
• It is well-known for the development of web pages, many non-browser environments also
use it.
• JavaScript can be used for Client-side development
• It is also supports Server-side developments known as livewire.
➢ JavaScript contains a standard library of objects, like Array, Date, and Math, and a core set of
language elements like operators, control structures, and statements.

➢ JavaScript can be added to your HTML file in two ways:


• Internal JS: We can add JavaScript directly to our HTML file by writing the code inside the
<script> tag. The <script> tag can either be placed inside the <head> or the <body> tag
according to the requirement.
• External JS: We can write JavaScript code in other file having an extension.js and then link
this file inside the <head> tag of the HTML file in which we want to add this code.

➢ Uses of JavaScript
• It gives html designers a programming a tool: html authors are normally not programmers,
but java script is a scripting language with a simple syntax! Almost anyone can put small
snippets of code into their html pages.
• JavaScript can put dynamic text into text into html pages- A JavaScript statement like this :
document write (“<h1>”+ name +”</h1>”) can write a variable text into html page.
• It can react to events: A JavaScript can be set to execute when something happens , like
when a page has finished loading or when a user clicks on an html element.
• JavaScript can read and write HTML elements- A JavaScript can read and change the
content of Html Element.
• It can be used to validate data – A JavaScript can be used to validate form data before it is
submitted to a server. This saves the server from extra processing.
• It can be used to detect visitor’s browser – depending on the browser -load the another
page specified for that browser
• It can be used to create cookies – A JavaScript can be used to store and retrieve
information of user.
➢ Limitations of JavaScript
• Client Side JavaScript does not allow the reading/writing of files.This has been kept for
security reason.
• It can’t be used for networking applications because there is no such support available.
• It doesn’t have multithreading/ multiprocessing capabilities.
• Performance: JavaScript does not provide the same level of performance as offered by many
traditional languages as a complex program written in JavaScript would be comparatively
slow. But as JavaScript is used to perform simple tasks in a browser, so performance is not
considered a big restriction in its use.
• Weak error handling and type checking facilities: It is weakly typed language as there is no
need to specify the data type of the variable. So wrong type checking is not performed by
compile.

Is JavaScript compiled or interpreted or both? (Note)


JavaScript is both compiled and interpreted. In the earlier versions of JavaScript, it used only the
interpreter that executed code line by line and shows the result immediately. But with time the
performance became an issue as interpretation is quite slow. Therefore, in the newer versions of JS,
probably after the V8, JIT compiler was also incorporated to optimize the execution and display the
result more quickly. This JIT compiler generates a bytecode that is relatively easier to code.

Question: How javaScript is


different from java?
What are various objects in
java scripts?
Explain with Example?

JavaScript Objects
A JavaScript object is an entity having state and behaviour (properties and method). For example:
car, pen, bike, chair, glass, keyboard, monitor etc.

JavaScript is an object-based language. Everything is an object in JavaScript.

• Booleans can be objects (if defined with the new keyword)


• Numbers can be objects (if defined with the new keyword)
• Strings can be objects (if defined with the new keyword)
• Dates are always objects
• Maths are always objects
• Regular expressions are always objects
• Arrays are always objects
• Functions are always objects
• Objects are always objects

All JavaScript values, except primitives, are objects.


JavaScript Primitives-
A primitive value is a value that has no properties or methods. 3.14 is a primitive value. A primitive
data type is data that has a primitive value.
JavaScript defines 7 types of primitive data types:
• Examples
• string
• number
• boolean
• null
• undefined
• symbol
• bigint
JavaScript is template based not class based. Here, we don't create class to get the object. But, we
direct create objects.

Creating objects in JavaScript


There are 3 ways for creating objects

1) by object lateral

The syntax of creating object using object literal is given below:


object={property1:value1,property2:value2.....propertyN:valueN}

<script>
emp={id:102,name:"Shyam Kumar",salary:40000}
document.write(emp.id+" "+emp.name+" "+emp.salary);
</script>

2) By creating instance of object directly (using new keyword)

The syntax of creating object directly is given below:


var objectname=new Object();
<script>
var emp=new Object();
emp.id=101;
emp.name="Ravi Malik";
emp.salary=50000;
document.write(emp.id+" "+emp.name+" "+emp.salary);
</script>

3) By using an object constructor(using new keyword )


Here, you need to create function with arguments. Each argument value can be assigned in the
current object by using this keyword.
<script>
function emp(id,name,salary){
this.id=id;
this.name=name;
this.salary=salary;
}
e=new emp(103,"Vimal Jaiswal",30000);
document.write(e.id+" "+e.name+" "+e.salary);
</script>

4) Create an object using Object.create().

DHTML
DHTML stands for Dynamic Hypertext Markup language i.e., Dynamic HTML.

Dynamic HTML is not a markup or programming language but it is a term that combines the features
of various web development technologies for creating the web pages dynamic and interactive.

The DHTML application was introduced by Microsoft with the release of the 4 th version of IE (Internet
Explorer) in 1997.

Components of Dynamic HTML


DHTML consists of

HTML 4.0

o CSS
o JavaScript
o DOM.

HTML 4.0

HTML is a client-side markup language, which is a core component of the DHTML. It defines the
structure of a web page with various defined basic elements or tags.

CSS
CSS stands for Cascading Style Sheet, which allows the web users or developers for controlling the
style and layout of the HTML elements on the web pages.

JavaScript

JavaScript is a scripting language which is done on a client-side. The various browser supports
JavaScript technology. DHTML uses the JavaScript technology for accessing, controlling, and
manipulating the HTML elements. The statements in JavaScript are the commands which tell the
browser for performing an action.

DOM

DOM is the document object model. It is a w3c standard, which is a standard interface of programming
for HTML. It is mainly used for defining the objects and properties of all elements in HTML.

Uses of DHTML
Following are the uses of DHTML (Dynamic HTML):

o It is used for designing the animated and interactive web pages that are developed in real-
time.
o DHTML helps users by animating the text and images in their documents.
o It allows the authors for adding the effects on their pages.
o It also allows the page authors for including the drop-down menus or rollover buttons.
o This term is also used to create various browser-based action games.
o It is also used to add the ticker on various websites, which needs to refresh their content
automatically.

Features of DHTML
Following are the various characteristics or features of DHTML (Dynamic HTML):

o Its simplest and main feature is that we can create the web page dynamically.
o Dynamic Style is a feature that allows the users to alter the font, size, color, and content of a
web page.
o It provides the facility for using the events, methods, and properties. And, also provides the
feature of code reusability.
o It also provides the feature in browsers for data binding.
o Using DHTML, users can easily create dynamic fonts for their web sites or web pages.
o With the help of DHTML, users can easily change the tags and their properties.
o The web page functionality is enhanced because the DHTML uses low-bandwidth effect.

Difference between HTML and DHTML


Following table describes the differences between HTML and DHTML:

HTML (Hypertext Markup language) DHTML (Dynamic Hypertext Markup language)

1. HTML is simply a markup language. 1. DHTML is not a language, but it is a set of technologies of
web development.

2. It is used for developing and creating web pages. 2. It is used for creating and designing the animated and
interactive web sites or pages.

3. This markup language creates static web pages. 3. This concept creates dynamic web pages.

4. It does not contain any server-side scripting code. 4. It may contain the code of server-side scripting.

5. The files of HTML are stored with the .html or .htm 5. The files of DHTML are stored with the .dhtm extension in
extension in a system. a system.

6. A simple page which is created by a user without 6. A page which is created by a user using the HTML, CSS,
using the scripts or styles called as an HTML page. DOM, and JavaScript technologies called a DHTML page.

7. This markup language does not need database 7. This concept needs database connectivity because it
connectivity. interacts with users.

DHTML JavaScript
JavaScript can be included in HTML pages, which creates the content of the page as dynamic. We can
easily type the JavaScript code within the <head> or <body> tag of a HTML page. If we want to add the
external source file of JavaScript, we can easily add using the <src> attribute.

Learn more

Following are the various examples, which describes how to use the JavaScript technology with the
DHTML:

Document.write() Method

The document.write() method of JavaScript, writes the output to a web page.

Example 1: The following example simply uses the document.write() method of JavaScript in the
DHTML. In this example, we type the JavaScript code in the <body> tag.
1. <HTML>
2. <head>
3. <title>
4. Method of a JavaScript
5. </title>
6. </head>
7. <body>
8. <script type="text/javascript">
9. document.write("JavaTpoint");
10. </script>
11. </body>
12. </html>
Test it Now

JavaScript and HTML event

A JavaScript code can also be executed when some event occurs. Suppose, a user clicks an HTML
element on a webpage, and after clicking, the JavaScript function associated with that HTML element
is automatically invoked. And, then the statements in the function are performed.

Example 1: The following example shows the current date and time with the JavaScript and HTML
event (Onclick). In this example, we type the JavaScript code in the <head> tag.

1. <html>
2. <head>
3. <title>
4. DHTML with JavaScript
5. </title>
6. <script type="text/javascript">
7. function dateandtime()
8. {
9. alert(Date());
10. }
11. </script>
12. </head>
13. <body bgcolor="orange">
14. <font size="4" color="blue">
15. <center> <p>
16. Click here # <a href="#" onClick="dateandtime();"> Date and Time </a>
17. # to check the today's date and time.
18. </p> </center>
19. </font>
20. </body>
21. </html>
Test it Now

Output:

Explanation:
In the above code, we displayed the current date and time with the help of JavaScript in DHTML. In
the body tag, we used the anchor tag, which refers to the page itself. When you click on the link, then
the function of JavaScript is called.

In the JavaScript function, we use the alert() method in which we type the date() function. The date
function shows the date and time in the alert dialog box on the web page.

JavaScript and HTML DOM

With version 4 of HTML, JavaScript code can also change the inner content and attributes of the HTML
event.

Example 1: This example checks the Grade of a student according to the percentage criteria with the
JavaScript and HTML DOM. In this example, we type the code of a JavaScript in the <body> tag.

1. <html>
2. <head>
3. <title> Check Student Grade
4. </title>
5. </head>
6.
7. <body>
8. <p>Enter the percentage of a Student:</p>
9. <input type="text" id="percentage">
10. <button type="button" onclick="checkGrade()">
11. Find Grade
12. </button>
13. <p id="demo"></p>
14. <script type="text/javascript">
15. function checkGrade() {
16. var x,p, text;
17. p = document.getElementById("percentage").value;
18.
19. x=parseInt(p);
20.
21.
22. if (x>90 && x <= 100) {
23. document.getElementById("demo").innerHTML = "A1";
24. } else if (x>80 && x <= 90) {
25. document.getElementById("demo").innerHTML = "A2";
26. } else if (x>70 && x <= 80) {
27. document.getElementById("demo").innerHTML = "A3";
28. }
29. }
30. </script>
31. </body>
32. </html>
Test it Now

Output:

Explanation:

In the above code, we check the student’s Grade with the help of JavaScript in DHTML. In the JavaScript
code, we used the checkGrade() method, which is invoked when we click on the button. In this
function, we stored the value in variable p. The value is taken in the input field. When the value is
stored, then we convert the value of p into integer and store the conversion value in x, because the
value in p is text.

After that, we used the if-else-if statement for finding the grade according to the percentage.

CSS with JavaScript in DHTML

With version 4 of HTML, JavaScript code can also change the style such as size, color, and face of an
HTML element.

Example 1: The following example changes the color of a text.


1. <html>
2. <head>
3. <title>
4. getElementById.style.property example
5. </title>
6. </head>
7. <body>
8. <p id="demo"> This text changes color when click on the following different buttons. </p>
9. <button onclick="change_Color('green');"> Green </button>
10. <button onclick="change_Color('blue');"> Blue </button>
11. <script type="text/javascript">
12.
13. function change_Color(newColor) {
14. var element = document.getElementById('demo').style.color = newColor;
15. }
16. </script>
17. </body>
18. </html>
Test it Now

Output:

Explanation:
In the above code, we changed the color of a text by using the following syntax:

1. document.getElementById('demo').style.property=new_value;.

The above syntax is used in the JavaScript function, which is performed or called when we clicked on
the HTML buttons. The different HTML buttons specify the color of a text.

DHTML CSS
We can easily use the CSS with the DHTML page with the help of JavaScript and HTML DOM. With the
help of this.style.property=new style statement, we can change the style of the currently used HTML
element. Or, we can also update the style of any particular HTML element
by document.getElementById(id).style.property = new_style statement.

Example 1: The following example uses the DHTML CSS for changing the style of current element:

1. <html>
2. <head>
3. <title>
4. Changes current HTML element
5. </title>
6. </head>
7. <body>
8. <center>
9. <h1 onclick="this.style.color='blue'"> This is a JavaTpoint Site </h1>
10. <center>
11. </body>
12. </html>
Test it Now

Output:
Explanation:

In the above code, we used the this.style.color='blue' statement, which shows the color of a text as
blue.

Example 2: The following example uses the DHTML CSS for changing the style of the HTML element:

1. <html>
2. <head>
3. <title>
4. changes the particular HTML element example
5. </title>
6. </head>
7. <body>
8. <p id="demo"> This text changes color when click on the following different buttons. </p>
9. <button onclick="change_Color('green');"> Green </button>
10. <button onclick="change_Color('blue');"> Blue </button>
11. <script type="text/javascript">
12.
13. function change_Color(newColor) {
14. var element = document.getElementById('demo').style.color = newColor;
15. }
16. </script>
17. </body>
18. </html>
Test it Now

Output:

Explanation:

In the above code, we used the var element = document.getElementById('demo').style.color =


newColor; statement, which changes the color of a text as green and blue according to the buttons.

DHTML Events
An event is defined as changing the occurrence of an object.

It is compulsory to add the events in the DHTML page. Without events, there will be no dynamic
content on the HTML page. The event is a term in the HTML, which triggers the actions in the web
browsers.

Suppose, any user clicks an HTML element, then the JavaScript code associated with that element is
executed. Actually, the event handlers catch the events performed by the user and then execute the
code.

Example of events:

1. Click a button.
2. Submitting a form.
3. An image loading or a web page loading, etc.
Following table describes the Event Handlers used in the DHTML:

S.No. Event When it occurs

1. onabort It occurs when the user aborts the page or media file loading.

2. onblur It occurs when the user leaves an HTML object.

3. onchange It occurs when the user changes or updates the value of an object.

4. onclick It occurs or triggers when any user clicks on an HTML element.

5. ondblclick It occurs when the user clicks on an HTML element two times together.

6. onfocus It occurs when the user focuses on an HTML element. This event handler works opposite
to onblur.

7. onkeydown It triggers when a user is pressing a key on a keyboard device. This event handler works for
all the keys.

8. onkeypress It triggers when the users press a key on a keyboard. This event handler is not triggered
for all the keys.

9. onkeyup It occurs when a user released a key from a keyboard after pressing on an object or
element.

10. onload It occurs when an object is completely loaded.

11. onmousedown It occurs when a user presses the button of a mouse over an HTML element.

12. onmousemove It occurs when a user moves the cursor on an HTML object.

13. onmouseover It occurs when a user moves the cursor over an HTML object.

14. onmouseout It occurs or triggers when the mouse pointer is moved out of an HTML element.

15. onmouseup It occurs or triggers when the mouse button is released over an HTML element.

16. onreset It is used by the user to reset the form.

17. onselect It occurs after selecting the content or text on a web page.

18. onsubmit It is triggered when the user clicks a button after the submission of a form.

19. onunload It is triggered when the user closes a web page.

Following are the different examples using the different event handlers, which helps us to understand
the concept of DHTML events:

Example 1: This example uses the onclick event handler, which is used to change the text after clicking.
1. <html>
2. <head>
3. <title>
4. Example of onclick event
5. </title>
6. <script type="text/javascript">
7. function ChangeText(ctext)
8. {
9. ctext.innerHTML=" Hi JavaTpoint! ";
10. }
11. </script>
12. </head>
13. <body>
14. <font color="red"> Click on the Given text for changing it: <br>
15. </font>
16. <font color="blue">
17. <h1 onclick="ChangeText(this)"> Hello World! </h1>
18. </font>
19. </body>
20. </html>
Test it Now

Output:
Example 2: This example uses the onsubmit event handler, which gives an alert after clicking
on a submit button.

1. <html>
2. <head>
3. <title>
4. Example of onsubmit event
5. </title>
6. </head>
7. <body>
8. <form onsubmit="Submit_Form()">
9. <label> Enter your name: </label>
10. <input type="text">
11. <label> Enter your Roll no: </label>
12. <input type="Number">
13. <input type="submit" value="submit">
14. </form>
15. <script type="text/javascript">
16. function Submit_Form()
17. {
18. alert(" Your form is submitted");
19. }
20. </script>
21. </body>
22. </html>
Test it Now

Output:

DHTML DOM
DHTML DOM stands for Dynamic HTML Document Object Model.

It is a w3c standard, which is a standard interface of programming for HTML. It is mainly used for
defining the objects and properties of all elements in HTML. It also defines the methods for accessing
the HTML elements.

Example: The following program helps in understanding the concept of DHTML DOM. This example
changes the color of text and displays the text in red colour automatically.

1. <html>
2. <head>
3. <title>
4. Example of DHTML DOM
5. </title>
6. </head>
7. <body>
8. <font color = "blue">
9. <p id="demo"> This text changes color when the page loaded. </p>
10. </font>
11. <script type="text/javascript">
12. document.getElementById('demo').style.color = "red";
13. </script>
14. </body>
15. </html>
Test it Now

Output:

Advantages of DHTML
Following are the various benefits or the advantages of DHTML (Dynamic HTML):

o Those web sites and web pages which are created using this concept are fast.
o There is no plug-in required for creating the web page dynamically.
o Due to the low-bandwidth effect by the dynamic HTML, the web page functionality is
enhanced.
o This concept provides advanced functionalities than the static HTML.
o It is highly flexible, and the user can make changes easily in the web pages.

Disadvantages of DHTML
Following are the various disadvantages or limitations of DHTML (Dynamic HTML):
o The scripts of DHTML does not run properly in various web browsers. Or in simple words, we
can say that various web browsers do not support the DHTML. It is only supported by the latest
browsers.
o The coding of those websites that are created using DHTML is long and complex.
o For understanding the DHTML, users must know about HTML, CSS, and JavaScript. If any user
does not know these languages, then it is a time-consuming and long process in itself.

XML
XML stands for Extensible Markup Language. It is a text-based markup language derived from
Standard Generalized Markup Language (SGML).
XML tags identify the data and are used to store and organize the data, rather than specifying
how to display it like HTML tags, which are used to display the data. XML is not going to replace
HTML in the near future, but it introduces new possibilities by adopting many successful
features of HTML.
There are three important characteristics of XML that make it useful in a variety of systems
and solutions −
• XML is extensible − XML allows you to create your own self-descriptive tags, or
language, that suits your application.
• XML carries the data, does not present it − XML allows you to store the data
irrespective of how it will be presented.
• XML is a public standard − XML was developed by an organization called the
World Wide Web Consortium (W3C) and is available as an open standard.

Is XML a Programming Language?

A programming language consists of grammar rules and its own vocabulary which is used to create
computer programs. These programs instruct the computer to perform specific tasks. XML does not
qualify to be a programming language as it does not perform any computation or algorithms. It is
usually stored in a simple text file and is processed by special software that is capable of interpreting
XML.

Now we will discuss the simple syntax rules to write an XML document. Following is a
complete XML document −

<?xml version = "1.0"?>


<contact-info>
<name>Tanmay Patil</name>
<company>TutorialsPoint</company>
<phone>(011) 123-4567</phone>
</contact-info>
You can notice there are two kinds of information in the above example −
• Markup, like <contact-info>
• The text, or the character data, Tutorials Point and (040) 123-4567.
The following diagram depicts the syntax rules to write different types of markup and text in
an XML document.

XML Declaration
The XML document can optionally have an XML declaration. It is written as follows −
<?xml version = "1.0" encoding = "UTF-8"?>

Where version is the XML version and encoding specifies the character encoding used in the document.

In this chapter, we will discuss the simple syntax rules to write an XML document. Following is a
complete XML document −
<?xml version = "1.0"?>
<contact-info>
<name>Tanmay Patil</name>
<company>TutorialsPoint</company>
<phone>(011) 123-4567</phone>
</contact-info>

You can notice there are two kinds of information in the above example −
• Markup, like <contact-info>
• The text, or the character data, Tutorials Point and (040) 123-4567.
The following diagram depicts the syntax rules to write different types of markup and text in an XML
document.

Nesting of Elements − An XML-element can contain multiple XML-elements as its children, but the
children elements must not overlap. i.e., an end tag of an element must have the same name as that
of the most recent unmatched start tag.
The Following example shows incorrect nested tags −
<?xml version = "1.0"?>
<contact-info>
<company>TutorialsPoint
</contact-info>
</company>
The Following example shows correct nested tags −
<?xml version = "1.0"?>
<contact-info>
<company>TutorialsPoint</company>
<contact-info>

XML Schema
An XML Schema describes the structure of an XML document.
The XML Schema language is also referred to as XML Schema Definition (XSD).
XML Schema is an XML-based (and more powerful) alternative to DTD.

The purpose of an XML Schema is to define the legal building blocks of an XML document:

• the elements and attributes that can appear in a document


• the number of (and order of) child elements
• data types for elements and attributes
• default and fixed values for elements and attributes

Another great strength about XML Schemas is that they are written in XML.

• You don't have to learn a new language


• You can use your XML editor to edit your Schema files
• You can use your XML parser to parse your Schema files
• You can manipulate your Schema with the XML DOM
• You can transform your Schema with XSLT

XML Schemas are extensible, because they are written in XML.


With an extensible Schema definition you can:
• Reuse your Schema in other Schemas
• Create your own data types derived from the standard types
• Reference multiple schemas in the same document

XSD Example

<?xml version="1.0"?>
<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema">

<xs:element name="note">
<xs:complexType>
<xs:sequence>
<xs:element name="to" type="xs:string"/>
<xs:element name="from" type="xs:string"/>
<xs:element name="heading" type="xs:string"/>
<xs:element name="body" type="xs:string"/>
</xs:sequence>
</xs:complexType>
</xs:element>
</xs:schema>
XML DTD
The XML Document Type Declaration, commonly known as DTD, is a way to describe XML language
precisely. DTDs check vocabulary and validity of the structure of XML documents against
grammatical rules of appropriate XML language.

An XML DTD can be either specified inside the document, or it can be kept in a separate document
and then liked separately.

Syntax
Basic syntax of a DTD is as follows −

<!DOCTYPE element DTD identifier


[
declaration1
declaration2
........
]>

In the above syntax,


• The DTD starts with <!DOCTYPE delimiter.
• An element tells the parser to parse the document from the specified root element.
• DTD identifier is an identifier for the document type definition, which may be the path
to a file on the system or URL to a file on the internet. If the DTD is pointing to external
path, it is called External Subset.
• The square brackets [ ] enclose an optional list of entity declarations called Internal
Subset.

1. Internal DTD
A DTD is referred to as an internal DTD if elements are declared within the XML files. To refer it as
internal DTD, standalone attribute in XML declaration must be set to yes. This means, the declaration
works independent of an external source.
Syntax
Following is the syntax of internal DTD −
<!DOCTYPE root-element [element-declarations]>
where root-element is the name of root element and element-declarations is where you declare the
elements.

2. External DTD
In external DTD elements are declared outside the XML file. They are accessed by specifying the system
attributes which may be either the legal .dtd file or a valid URL. To refer it as external
DTD, standalone attribute in the XML declaration must be set as no. This means, declaration includes
information from the external source.
Syntax
Following is the syntax for external DTD −
<!DOCTYPE root-element SYSTEM "file-name">
where file-name is the file with .dtd extension.
Rules

• The document type declaration must appear at the start of the document (preceded only by
the XML header) − it is not permitted anywhere else within the document.
• Similar to the DOCTYPE declaration, the element declarations must start with an exclamation
mark.
• The Name in the document type declaration must match the element type of the root
element.

You might also like