web

(1)

UNIT - I Internet Language:

 There are several internet languages used for webpage development.

 Web development is a term that is used to refer to the process of creating a website and can range from developing a single simple page to a series of complex pages. Web development encompasses several actions or practices and some of them include web design, content creation, programming, network security tasks as well as client side or server side scripting, etc.

Factors to be considered when choosing a programming language  Targeted platform.

 Language domain match  Efficiency

 Elasticity and Performance  Availability of libraries  Project size

 Expressiveness & Time to production  Tool support

Some of the most popular programming languages are,

1. Java Script: JavaScript is one of the most popular and dynamic programming languages used for creating and developing websites. It was developed by Netscape and borrows a lot of its syntax from C language. JavaScript is used very widely and effectively in creating desktop applications as well as for developing games.

2. Java: Java is yet another highly popular and widely used language that you can consider for web development. This language is an object-oriented, class-based and concurrent language that was developed by Sun Microsystems in the 1990s. 3. Python: Python is a highly used and all-purpose programming language which is dynamic in nature. Being dynamic in nature means that you as a developer can write and run the code without the need of a compiler.

4. CSS and HTML: CSS or Cascading Style Sheets is rather a markup language. When paired with HTML, CSS allow a developer to decide and define how a web page or a website will eventually look or how it will appear to the visitors of the web platform.

5. PHP: This is used to define PHP Hypertext Processor language that is a free server-side scripting language that has been designed for not just web development but also as a general-purpose programming platform. This is a widely used language that was created in the year 2004 and now powers over 200 million websites worldwide.

6. Ruby: Ruby is a dynamic programming language that is used for the creation or programming of mobile apps and websites. The language successfully balances imperative programming with functional programming and is a highly scalable language.

7. C++: This is a general purpose, well compiled and case sensitive web programming language that is not only imperative but also offers facilities for low-level memory manipulation. Since the language makes use of both low-level

(2)

features as well as the feature of high-level languages, it is considered as a middle-level language.

8. C: This is another general-purpose and imperative programming language which was developed way back in the 70s and is similar to C++ language. This language is known to be the most widely used programming platform that offers building elements for other languages like C++, Python, Java and others. These languages borrow features either directly or indirectly from it, and some of these include control structures, overall syntax, and standard libraries.

9. SQL (Structured Query Language): A vital part of web development, SQL makes obtaining specific data from large, complex databases a breeze.

Understanding HTML:

HTML is the standard markup language for creating Web pages.  HTML stands for Hyper Text Markup Language

 HTML describes the structure of Web pages using markup  HTML elements are the building blocks of HTML pages  HTML elements are represented by tags

 HTML tags label pieces of content such as "heading", "paragraph", "table", and so on

 Browsers do not display the HTML tags, but use them to render the content of the page. EXAMPLE: <!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body>

<h1>My First Heading</h1> <p>My first paragraph.</p> </body>

</html>

HTML Tags: HTML tags are element names surrounded by angle brackets: <tagname> content goes here... </tagname>  HTML tags normally come in pairs like <p> and </p>

 The first tag in a pair is the Opening tag, the second tag is the Closing tag  A forward slash inserted before the tag name of Closing tag.

The <!DOCTYPE> Declaration:

 The <!DOCTYPE> declaration represents the document type, and helps browsers to display web pages correctly.

(3)

 The <!DOCTYPE> declaration is not case sensitive.

 The <!DOCTYPE> declaration for HTML5 is: <!DOCTYPE html> HTML Versions:

Since the early days of the web, there have been many versions of HTML:

Version Year HTML 1991 HTML 2.0 1995 HTML 3.2 1997 HTML 4.01 1999 XHTML 2000 HTML5 2014 New Features:

HTML5 introduces a number of new elements and attributes that helps in building a modern website. Following are great features introduced in HTML5.

 New Semantic Elements − These are like <header>, <footer>, and <section>.

 Forms 2.0 − Improvements to HTML web forms where new attributes have been introduced for <input> tag.

 Persistent Local Storage − To achieve without resorting to third-party plugins.

 WebSocket − A a next-generation bidirectional communication technology for web applications.

 Server-Sent Events − HTML5 introduces events which flow from web server to the web browsers and they are called Server-Sent Events (SSE).

 Canvas − This supports a two-dimensional drawing surface that you can program with JavaScript.

 Audio & Video − We can embed audio or video on your web pages without resorting to third-party plugins.

 Geolocation − Now visitors can choose to share their physical location with your web application.

 Microdata − This lets you create your own vocabularies beyond HTML5 and extend your web pages with custom semantics.

 Drag and drop − Drag and drop the items from one location to another location on the same webpage.

(4)

Create a web page:

 A web page or web page is a document commonly written in HyperText Markup Language (HTML) that is accessible through the Internet or other network using an Internet browser.

 A web page is accessed by entering a URL address and may contain text, graphics, and hyperlinks to other web pages and files. The page you are reading now is an example of a web page.

 HyperText Markup Language (HTML) is the primary building block of creating a website.

 HTML is a very basic markup language and requires memorization of a few dozen HTML commands that structure the look and layout of a web page.

 Before writing any HTML code or designing your first web page, you must decide on an HTML editor or text editor, such as Notepad or WordPad.

 The following four steps are used to create a web page with Notepad or TextEdit. Step 1: Open Notepad or TextEdit.

Step 2: Write some html code. <!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body>

<h1>My First Heading</h1> <p>My first paragraph.</p> </body>

</html>

o The <!DOCTYPE html> declaration defines this document to be HTML5 o The <html> element is the root element of an HTML page

o The <head> element contains meta information about the document o The <title> element specifies a title for the document

o The <body> element contains the visible page content o The <h1> element defines a large heading

o The <p> element defines a paragraph Step 3: Save the file with .html extension.

 Save the file with in a folder, at specified drive in the local computer. Step 4: View the html page in our browser.

o Now that we have created a basic webpage, we may want to verify how the webpage looks. Being that we have files locally stored on our computer, you will not need to connect to the Internet to view our web page.

(5)

Linking to other web pages

 The anchor tag is used to plays the hyperlinks in the hypertext documents. The tag is <A>…. </A>. The term anchor is used, because it indicates the static positioning of a hyperlink.

 The three basic parts of hyperlink are:

a. The beginning and ending tag pair <A>…</A>.

b. The HREF attribute that specifies the “URL” of the page to be loaded when the hyperlink is selected.

c. The text or image that appears on the screen as an active link In HTML three different types of hyperlinks are created. They are, a. Clickable text hyperlinks

b. Clickable image hyperlinks. A). Clickable text hyperlinks:

 In these hyperlinks, ”text” is used to create an active hyperlink.  It uses the following syntax

<A HREF = “URL” or “HTML file”>sample clickable text</a>

ex: <A HREF= “http://www.vsuniversity.edu.in/result/mcasem1.html”>Mca First semester result </A>

 HREF stands for hyper text reference.

 Most graphical browsers will change the text color and underline the name of the hyperlink. When someone clicks on the text the file/index.HTML is requested from the server www.vsuniversity.edu.in. The text should be short and descriptive.

B). Clickable image hyperlinks:

 The principles behind creating a Clickable image hyperlink are same as for creating a Clickable text hyperlink. The type of hyperlink we describe here consists of a single image, for which one mouse click returns an HTML document. The idea is simply to replace the text with an image.

Syntax <A HREF= “URL” or “HTML file”>clickable Image</A> Ex: <A HREF=”www.vsuniversity.edu.in/home.html”>

<IMG SRC= “c:/windows/Home.GIF” Height =100 Width =50> </A> If the user clicks on the image, the document home.html will be loaded.

HTML Links - The target Attribute

 The target attribute specifies where to open the linked document. The target attribute can have one of the following values:

 _blank - Opens the linked document in a new window or tab

 _self - Opens the linked document in the same window/tab as it was clicked (this is default)

 _parent - Opens the linked document in the parent frame

 _top - Opens the linked document in the full body of the window

(6)

Publishing Methods

 There are various methods of publishing HTML documents but here are some of the most common methods:

Blogging platform

 Blogging platforms usually allow you to create "blog posts" by logging in to an administration area and clicking a button such as New Post or similar. They usually provide an HTML editor that allows you to add HTML elements without needing to know HTML. All HTML code is automatically generated as you use the WYSIWYG editor. But you can usually switch to HTML View or similar if you prefer to add your own HTML code. Once a post is ready to go live, simply click a button called Publish or similar. Using this method, all blog posts are stored as data in a database, so there is no need to create a .html document and save it to your local computer.

Online website builder

 Similar to using a blogging platform, you simply log in to the admin area, create articles, then publish them when they're ready. Online website builders usually allow you to select from a range of templates, add images, and edit articles using a WYSIWYG editor.

Content Mangement System (CMS)

 This is similar to using an online website builder. In fact, an online website builder basically is a content management system. The reason I separated this one is because, many organizations have their own CMS that staff can use to update their website. This may have been custom built for their organization or it could be an "off the shelf" product.

FTP your HTML document

 Upload your HTML document to the "live" server. In this scenario, you have a copy of your website on your local computer, and a copy located on a "live" (or "production") server. The live server is located with your web hosting provider (although you could host it yourself if you choose). Typically, you upload files to your hosting provider via FTP (File Transfer Protocol) using FTP software (referred to as an FTP Client) such as FileZilla. You can't use this method if your articles are stored in a database. You can only use it to upload files from a file system. Modify the file directly on the server

 This is not recommended, however, it is certainly possible. If you have full access to the live server, there's nothing to stop you editing the files on your website directly. You can double-click on a file, edit it, save it, and your website will be updated with the new change. Just as you would editing a file on your own computer. However, it is better practice to use FTP to edit your website in this case.

Self-Hosted Websites

 Most websites/blogs are hosted with a third party hosting company (regardless of which publishing method/s they use). Hosting is a 24/7 job and it's usually better to leave it to the experts (assuming your hosting company are experts!). However, it is possible to host your own website—after all, you are connected to the internet just like any hosting provider. To do this, you'll need to know how web servers work and you'll need to be well versed in internet security.

(7)

Text Alignment

HTML <object> align Attribute

 The align attribute specifies the alignment of an <object> element according to the surrounding element.

 The <object> element is an inline element (it does not insert a new line on a page), meaning that text and other elements can wrap around it. Therefore, it can be useful to specify the alignment of the <object> according to surrounding elements.

 Example:

 Attribute Values

Value Description

left Aligns the object to the left right Aligns the object to the right middle Aligns the object in the middle top Aligns the object at the top botto

m Aligns the object at the bottom

Paragraph <p> Tag

 The <p> tag defines a paragraph.

 Browsers automatically add some space (margin) before and after each <p> element. The margins can be modified with CSS (with the margin properties).

 The align attribute is not supported in HTML5.

Attribute Value Description

align left right center justify

Not supported in HTML5.

Specifies the alignment of the text within a paragraph

HTML Headings

Headings are defined with the <h1> to <h6> tags.

<h1> defines the most important heading. <h6> defines the least important heading.

Example:

<h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4>

(8)

<h5>Heading 5</h5> <h6>Heading 6</h6> FONT TAG

 In the body tag, text attribute is used to specify the text color for an entire document. Font tag is used to specify the text color for the section of the document.

 This tag is not supported in html5.

 This tag is also specifies font size, font face (style) Syntax:

FACE: The FACE attribute of the font tag is used to specify the font style for a particular section of the document.

SIZE: The size attribute is used to change the font size of the particular section of the document.

COLOUR: This attribute can specify the color by using either name or hexadecimal code. Ex: <FONT FACE=”Arial” SIZE=”20” Color=”yellow”>SVARTS-GUDUR </FONT> HTML Text Formatting Elements

 HTML also defines special elements for defining text with a special meaning.  HTML uses elements like <b> and <i> for formatting output, like bold or italic text. Formatting elements were designed to display special types of text:

 <b> - It defines Bold text. Ex: This is <b> SVARTS </b>college

 <strong> - It defines Important text Ex: This is <strong> SVARTS </strong>college

 <i> - It defines an Italic text Ex: This is <i> SVARTS </i>college

 <em> - It defines an Emphasized text Ex: This is <em> SVARTS </em>college

 <mark> - Marked text Ex: This is <mark> SVARTS </mark>college

 <small> - Small text Ex: This is <small> SVARTS </small>college

 <del> - Deleted text Ex: This is <del> SVARTS </del>college

 <ins> - Inserted text Ex: This is <ins> SVARTS </ins>college

 <sub> - Subscript text Ex: H<sub>2 </sub>O

 <sup> - Superscript text Ex: X<sup> 2</sup>

LIST Tag : Three primary types of lists are available in HTML. They are: i) Ordered lists ii) Unordered lists iii) Definition lists.

 Each list environment is well suited for one or more specific types of writing. An entire list is surrounded by the beginning and ending list tag, which varies depending on the type of the list.

 In addition list item tags are used to identify each entry in the list.

a) ORDERED LIST:

 In an ordered list, the elements are fixed by a symbol that denotes their relative order within the text. The most commonly used symbols of an ordered list are

(9)

Arabic numbers, and Roman numbers. An ordered list is used for a series of ordered items.

 The beginning and ending tags, for an ordered list are <OL> and </OL> tags. The beginning tag for each list item is <LI> an ending tag is not necessary for an item.

 The browser can determined the end of the list item by encountering either another list item tag or an ending tag for an ordered list.

 By default, an items in an ordered list or Arabic numbers (1,2,3….)  It uses the following format or syntax.

<OL type = “value” START = “value”> <LI> list item-1

<LI> list item-2 .

.

Ex: <H3> soft drinks </H3> <OL type = “A”>

<LI> Thumpsup <LI> Pepsi <LI> sprite <LI> coca cola </OL>

Type attribute: This attribute of an OL tag is used to specify one of the following characters as a label. The characters are 1, a, A, I and I.

The character ‘1’ is used for the labels 1,2,3………. The character ‘a’ is used for the labels a,b,c……….. The character ‘A’ is used for the labels A,B,C……. The character ‘i’ is used for the labels i,ii,iii………. The character ‘I’ is used for the labels I,II,III………

Start attribute: This attribute of an OL tag is used to specify the numbering from the value other than 1, or a or A, or i, or I.

b). UN-ORDERED LISTS :

 The ordered list is used when the order in which the data items appear is significant. If an order is not important, we can use the unordered list.

 Unordered list items are usually marked with bullets. The beginning and ending tags for an unordered list or <UR> and </UL> respectively.

 Each item in an unordered list is identified by a list item tag, <LI>.  It uses the following format or syntax.

< UL TYPE = “value”> <LI> list item-1 <LI> list item-2 <LI> list item-3 <LI> list item-4 .

. .

<LI> list item-n

eg:

<H2>Offered Courses </H2> <UL type = “ circle”>

<LI> MSCs <LI> MECs <LI> MPCs

<LI> BCOM comp <LI> BBC

(10)

</UL> </UL>

Each item is tri faced by a bullet and the default bullet is a shaded disk. It is also possible to use other bullets in HTML.

Type attribute: The type attribute in an unordered list tag is used to specify one of the following bullets.

i) disc ii) circle iii) square. c) DEFINITION LISTS:

Definition lists are unordered lists, in which each item has two parts. They are: 1) Definition term 2) Definition data.

The beginning and ending tag for the definition lists are <DL> and </DL> respectively. Instead of using a list item tag foe each item, the term portion requires a definition term tag<DT> and the definition portion requires the tag <DD> the corresponding ending tags for the definition term and data definition are </DT> and </DD>

respectively. It uses the following format or syntax. <DL> <DT> Definition term -1 <DD> Data Definition -1 <DT> Definition term -2 <DD> Data Definition -2 . . . <DT> Definition term -n <DD> Data Definition -n </DL>.

<H2> the following are the list of definitions for computer fundamentals </H2>

<DL>

<DT> <strong> hardware </strong> <DD> physical components of

computer

<DT> <strong> software </strong> <DD> set of programs

<DT> <strong> CPU </strong> <DD> central processing unit </DL>

 The web browser can place each item for the term on its own line. The definition is displayed on the succeeding line and it is slightly intended. In the above

example we used the strong tag for the terms: hardware, software, CPU. This makes them stand out better. The definition list environment is often used for displaying the set of definitions.

 NESTED LISTS : It is used for different types of lists within another or to nest multiple lists of the same type. In computer science the word ‘nest’ is used to indicate layers within layers. Think of an onion, when the outer layer is removed a new inner layer is explored. The inner layer is completely nested inside the outer layer the following example contain nested unordered lists.

<TITLE> CRITTERS </title> </HEAD> <BODY><H2> CRITTERS </H2> <OL type = “I”>

(11)

<LI> <strong> mammals </strong> <UL type = “circle” > <LI> whale <LI> cat <LI> cow </UL>

<LI> <strong> Reptiles </strong> <UL type = “circle” > <LI> alligator <LI> lizard <LI> snake </UL>

</OL> </BODY>

E-mail Links and link within a Page E-mail Links:

 Mailto link is a type of HTML link that activates the default mail client on the computer for sending an e-mail.

 The web browser requires default e-mail client software installed on his computer in order to activate the e-mail client.

 If you have Microsoft Outlook, for example as your default mail client, pressing a mailto

link will open a new mail window.

 The mailto link is written like regular link with extra parameters inside the href attribute:

<a href="mailto:name@email.com">Link text</a>

Parameter Description

mailto:name@email.com e-mail recipient address cc=name@email.com carbon copy e-mail address bcc=name@email.com blind carbon copy e-mail address subject=subject text subject of e-mail

body=body text body of e-mail

? first parameter delimiter

& other parameters delimiter Example:

<a href=admin@vsuniversity.edu.in>Contact Us </a> The code will generate this link: Contact Us

(12)

Mail to email address with subject

Pressing the above link will open a new mail window:

<a href="mailto:admin@vsuniversity.edu.in?subject=The%20subject%20of%20the%20mail"> Contact Us </a>

Link within a page or Intra document hyperlink:

An Anchor tag also allows you to create a hyper link to any part of the same document. That is any portion of the document can automatically be displayed at the top of the browsers document area. This is useful to jump various sections of the web page without scrolling. NAME attribute of the anchor tag is used to create such intra document linking.

Eg: <A href=” #chapter1”>Introduction to HTML </A> <A href=” #chapter2”>Introduction to java </A> <A href=” #chapter3”>Introduction to JavaScript </A> <A NAME=”chapter1”>

<H2>This the introduction part of HTML document </H2>

(13)

---</A>

<H2>This the introduction part of JAVA </H2>

---</A>

<h2>This the introduction part of JavaScript </H2>

---</A>

Creating HTML Forms

 The HTML <form> element defines a form that is used to collect user input.  An HTML form contains form elements.

 Form elements are different types of input elements, like text fields, checkboxes, radio buttons, submit buttons, and more.

The <input> element: It is the most important form element. The <input> element can be displayed in several ways, depending on the type attribute.

Type Description

<input type="text"> Defines a one-line text input field

<input type="radio"> Defines a radio button (for selecting one of many choices) <input type="submit"> Defines a submit button (for submitting the form)

Example:

<form action="/action_page.php" method=”post”> First name:<br>

Gender: <input type="radio" name="gender" value="male" checked> Male<br> <input type="radio" name="gender" value="female"> Female<br> <input type="radio" name="gender" value="other"> Other

The Action Attribute

 The action attribute defines the action to be performed when the form is submitted.  Normally, the form data is sent to a web page on the server when the user clicks on the

submit button.

 If the action attribute is omitted, the action is set to the current page. The Method Attribute

 The method attribute specifies the HTTP method (GET or POST) to be used when submitting the form data.

 The default method when submitting form data is GET.

 However, when GET is used, the submitted form data will be visible in the page address field.

(14)

 Always use POST if the form data contains sensitive or personal information. The POST method does not display the submitted form data in the page address field.

The Name Attribute

 Each input field must have a name attribute to be submitted.

 If the name attribute is omitted, the data of that input field will not be sent at all. Grouping Form Data with <fieldset>

 The <fieldset> element is used to group related data in a form.  The <legend> element defines a caption for the <fieldset> element. Example:

<fieldset> <legend>Personal information:</legend> First name:<br>

</fieldset> </form>

The <select> Element

 The <select> element defines a drop-down list.

 The <option> element defines an option that can be selected.  By default, the first item in the drop-down list is selected.

 To define a pre-selected option, add the selected attribute to the option.  Use the size attribute to specify the number of visible values:

Example:

<select name="cars" size="3">

<option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option> </select>

The <textarea> Element

 The <textarea> element defines a multi-line input field (a text area).  The rows attribute specifies the visible number of lines in a text area.  The cols attribute specifies the visible width of a text area.

Example: Information:

<textarea name="message" rows="10" cols="30"> Enter U r information here

</textarea> The <button> Element

 The <button> element defines a clickable button:

<button type="button" onclick="alert('Hello World!')">Click Me!</button> HTML5 added the following form elements:

(15)

1. <datalist> element

The <datalist> element specifies a list of pre-defined options for an <input> element.  Users will see a drop-down list of the pre-defined options as they input data.  The list attribute of the <input> element, must refer to the id attribute of the

<datalist> element.

<option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist> </form> 2. <output> element

 The <output> element represents the result of a calculation. <!DOCTYPE html>

100 + <input type="number" id="b" name="b" value="50"> = <output name="x" for="a b"></output>

Image Tag

 The <img> element, like most elements, is a container.

 The image is a separate file that loads into the space created by the img

element.There are three types of image files used in HTML, indicated by

different filename extensions: .jpg, .gif and .png (also know as JPEGs, GIFs

and PINGs);

Example:

<img src="Univeristy/Mainbuilding.jpg" align=”right”

alt="vs university building” border=”5” class="flr"

width="300" height="240">

The "src" or source attribute tells the browser what image (ie. image file) goes in the tag and where to find it. It is required. The browser sends instructions to the server to go to the folder,and send it back to the client (ie. your computer) and show it in the space reserved by the image tag.

Specific Attributes

(16)

Attribute Value Description align top bottom middle left right

It Specifies the alignment for the image.

alt text It Specifies alternate text

border pixels It Specifies the width of the image border.

height pixels or % It Specifies the height of the image.

hspace pixels It Amount of white space to be inserted to the left and

right of the object.

ismap URL It Defines the image as a server-side image map.

src URL It Specifies url of an image or path of an image.

usemap #mapname It Defines the image as a client-side image map and

used alongwith <map> and <area> tags.

vspace pixels The Amount of white space to be inserted to the top

and bottom of the object.

width pixels or % It Sets the width of an image in pixels or in %.

In the source attribute there are two ways to show what is known as the "path" to the image file:

The "absolute path":

<img src="https://www.vsuniversity.edu/photos/Mainbuilding.jpg" ...>

The "relative path":

<img src=" photos/Mainbuilding.jpg " ... > Custom Backgrounds and colors

 The CSS background properties are used to define the background effects for elements. CSS background properties:  background-color  background-image  background-repeat  background-attachment  background-position

Background Color: The background-color property specifies the background color of an element. The background color of a page is set like this:

Body {

background-color: lightblue; }

With CSS, a color is most often specified by:

(17)

 a HEX value - like "#ff0000"  an RGB value - like "rgb(255,0,0)" Example: h1 { background-color: green; } div { background-color: lightblue; } p { background-color: yellow; } Background Image

 The background-image property specifies an image to use as the background of an element. By default, the image is repeated so it covers the entire element.

body {

Background Image - Repeat Horizontally or Vertically

 By default, the background-image property repeats an image both horizontally and vertically.

 If the image is repeated only horizontally, then set background-repeat: repeat-x;  To repeat an image vertically, then set background-repeat: repeat-y;

body {

}

Background Image - Set position and no-repeat

 Showing the background image only once is also specified by the background-repeat property:

body {

}

In the example above, the background image is shown in the same place as the text. We want to change the position of the image, so that it does not disturb the text too much.

The position of the image is specified by the background-position property: body

{

(18)

background-position: right top; }

Background Image - Fixed position

 To specify that the background image should be fixed (will not scroll with the rest of the page), use the background-attachment property:

Body {

background-position: right top; background-attachment: fixed; }

(19)

UNIT - II

JavaScript

INTRODUCTION:

Javascript is a dynamic computer programming language. It is lightweight and most commonly used as a part of web pages, whose implementations allow client-side script to interact with the user and make dynamic pages. It is an interpreted programming language with object-oriented capabilities.

 JavaScript was first known as LiveScript, but Netscape changed its name to JavaScript, possibly because of the excitement being generated by Java.

 JavaScript made its first appearance in Netscape 2.0 in 1995 with the name LiveScript. The general-purpose core of the language has been embedded in Netscape, Internet Explorer, and other web browsers.

 The ECMA-262 Specification defined a standard version of the core JavaScript language.

 JavaScript is a lightweight, interpreted programming language.

 Designed for creating network-centric applications.

 Complementary to and integrated with Java.

 Complementary to and integrated with HTML.

 Open and cross-platform

Client-side JavaScript

Client-side JavaScript is the most common form of the language. The script should be included in or referenced by an HTML document for the code to be interpreted by the browser.

It means that a web page need not be a static HTML, but can include programs that interact with the user, control the browser, and dynamically create HTML content.

The JavaScript client-side mechanism provides many advantages over traditional CGI server-side scripts. For example, you might use JavaScript to check if the user has entered a valid e-mail address in a form field.

The JavaScript code is executed when the user submits the form, and only if all the entries are valid, they would be submitted to the Web Server.

JavaScript can be used to trap user-initiated events such as button clicks, link navigation, and other actions that the user initiates explicitly or implicitly.

Advantages of JavaScript

The merits of using JavaScript are:

 Less server interaction: We can validate user input before sending the page off to the server. This saves server traffic, which means less load on your server.

 Immediate feedback to the visitors: They don't have to wait for a page reload to see if they have forgotten to enter something.

 Increased interactivity: create interfaces that react when the user hovers over them with a mouse or activates them via the keyboard.

(20)

 Richer interfaces: We can use JavaScript to include such items as drag-and-drop components and sliders to give a Rich Interface to your site visitors.

Limitations of JavaScript

JavaScript as a full-fledged programming language. It lacks the following important features:

 Client-side JavaScript does not allow the reading or writing of files. This has been kept for security reason.

 JavaScript cannot be used for networking applications because there is no such support available.  JavaScript doesn't have any multithreading or multiprocessor capabilities.

Once again, JavaScript is a lightweight, interpreted programming language that allows you to build interactivity into otherwise static HTML pages.

<TITLE>SIMPLE JAVASCRIPT PROGRAM</TITLE> <SCRIPT Language= “javascript”>

Document.writeln(“<h1> svarts & science college</h1>”) </script>

</head> <body> </body> </html>

The script is included in the web page and run by user, usuall as soon as the page has been loaded. Browser is able to deburg the script and can display errors the document.writeln command is a standard java scipt command for writing output to a webpage.

Variables

JavaScript Variables:

Like many other programming languages, JavaScript has variables. Variables can be thought of as named containers. We can place data into these containers and then refer to the data simply by naming the container.

Before we can use a variable in a JavaScript program, you must declare it. Variables are declared with the var keyword as follows.

You can also declare multiple variables with the same varkeyword as follows − <script type="text/javascript">

var money, name; //-->

(21)

Storing a value in a variable is called variable initialization. You can do variable initialization at the time of variable creation or at a later point in time when you need that variable.

For instance, you might create a variable named money and assign the value 2000.50 to it later. For another variable, you can assign a value at the time of initialization as follows.

var name = "Ali"; var money;

money = 2000.50; //-->

</script>

Note − Use the var keyword only for declaration or initialization, once for the life of any variable name in a document. You should not re-declare same variable twice.

JavaScript is untyped language. This means that a JavaScript variable can hold a value of any data type. Unlike many other languages, you don't have to tell JavaScript during variable declaration what type of value the variable will hold. The value type of a variable can change during the execution of a program and

JavaScript takes care of it automatically. JavaScript Variable Scope

The scope of a variable is the region of your program in which it is defined. JavaScript variables have only two scopes.

 Global Variables − A global variable has global scope which means it can be defined anywhere in your JavaScript code.

 Local Variables − A local variable will be visible only within a function where it is defined. Function parameters are always local to that function.

Within the body of a function, a local variable takes precedence over a global variable with the same name. If you declare a local variable or function parameter with the same name as a global variable, you effectively hide the global variable. Take a look into the following example.

Ex: <html> <body>

<p>In this example, x, y, and z are variables.</p> <p id="demo"></p>

document.writeln("The value of z is: " + z); </script>

</body> </html>

JavaScript Variable Names

While naming variables in JavaScript, keep the following rules in mind.

 That should not use any of the JavaScript reserved keywords as a variable name. These keywords are mentioned in the next section. For example, break or boolean variable names are not valid.

 JavaScript variable names should not start with a numeral (0-9). They must begin with a letter or an underscore character. For example, 123test is an invalid variable name but _123test is a valid one.

(22)

 JavaScript variable names are case-sensitive. For example, Name and name are two different variables.

Control Statements

Very often when when we write code in javascript, we want to perform different actions for different decisions and we want some blocks of code to run again and again. We can use control structures in run in our code to do this.

If...else Statement:

The statement is used to execute some block of code, if the condition is true and other block of code if the condition is true.

JavaScript supports conditional statements which are used to perform different actions based on different conditions. Here we will explain the if..else statement.

JavaScript supports the following forms of if..else statement

 if statement

 if...else statement

 if...else if... statement.

if statement

The if statement is the fundamental control statement that allows JavaScript to make decisions and execute statements conditionally.

Sy:

if (test - condition){

Statement(s) to be executed if condition is true }

 A JavaScript expression is evaluated. If the resulting value is true, the given statement(s) are executed.

 If the expression is false, then no statement would be not executed. Most of the times, you will use comparison operators while making decisions.

Ex:

<html> <body> <script type="text/javascript"> var age = 20; if( age > 18 ){

document.write("<b>Qualifies for driving</b>"); }

//--> </script>

(23)

</body> </html> O/P:

Qualifies for driving

Set the variable to different value and then try...

if...else statement:

The 'if...else' statement is the next form of control statement that allows JavaScript to execute statements in a more controlled way.

Syntax

if (condition){

Statement(s) code to be executed if condition is true }

else{

Statement(s) code to be executed if expression is false }

 JavaScript expression is evaluated. If the resulting value is true, the given statement(s) in the ‘if’ block, are executed.

 If the expression is false, then the given statement(s) in the else block are executed. Ex:

<html> <head>

<title> max among three numbers</title> </head>

var x1,x2.x3;

x1=prompt("enter first number,""0"); x2=prompt("enter second number,""0"); x3=prompt("enter third number,""0"); if((x1>x2)&&(x1>x3))

document.writeln("<h1>the maximum number is"+x1+"</h1>"); else

document.writeln("<h1>the maximum number is"+x2+"</h1>"); document.writeln("<h1>the maximum number is"+x3+"</h1>"); </script>

</body> </html> Switch Case:

 This statement is used to select one to many blocks of code to be ‘executed’.

 We can use multiple if...else…if statements, as in the previous chapter, to perform a multiway branch. However, this is not always the best solution, especially when all of the branches depend on the value of a single variable.

Starting with JavaScript 1.2, we can use a switch statement which handles exactly this situation, and it does so more efficiently than repeated if...else ifstatements.

(24)

Declaration:

The objective of a switch statement is to give an expression to evaluate and several different statements to execute based on the value of the expression. The interpreter checks each case against the value of the expression until a match is found. If nothing matches, a default condition will be used.

Sy:

switch (choice) {

case choice 1: block1

break;

case choice 2: block2 break ... case choice3: block3 break

- - - - - - - - -

--default: block to be executed if choice is invalid }

 The break statements indicate the end of a particular case. If they were omitted, the interpreter would continue executing each statement in each of the following cases.

Ex: <html> <body>

document.write("Entering switch block<br />"); switch (grade)

{

case 'A': document.write("Good job<br />"); break;

case 'B': document.write("Pretty good<br />"); break;

case 'C': document.write("Passed<br />"); break;

case 'D': document.write("Not so good<br />"); break;

case 'F': document.write("Failed<br />"); break;

default: document.write("Unknown grade<br />") }

document.write("Exiting switch block"); </script>

<p>Set the variable to different value and then try...</p> </body> </html>

(25)

While Loop statement:

a situation where to need to perform an action over and over again. In such situations, would need to write loop statements to reduce the number of lines.

JavaScript supports all the necessary loops to ease down the pressure of programming.

while Loop

The while loop is used to execute a block of code while a specified condition is true. Sy:

while (expression){

Statement(s) to be executed if expression is true }

Ex: write a java script code to print the sum of n given numbers using while loop. <html>

<head>

<title>sum of given numbers</title> <body>

document.write("Starting Loop "); while (count < 10){

document.write("Current Count : " + count + "<br />"); count++;

} document.write("Loop stopped!"); //-->

</script>

<p>Set the variable to different value and then try...</p> </body>

</html>

do...while Loop

The do...while loop is similar to the while loop except that the condition check happens at the end of the loop. This means that the loop will always be executed at least once, even if the condition is false.

Sy: do{

Statement(s) to be executed; } while (expression);

Note − Don’t miss the semicolon used at the end of the do...while loop. Ex: <html> <body> <script type="text/javascript"> var count = 0; document.write("Starting Loop" + "<br />"); do{

(26)

count++; }

while (count < 5);

document.write ("Loop stopped!"); </script>

</html>

For Loop

The for loop is used when we know in advanced how many times the script should run.

 The loop initialization where we initialize our counter to a starting value. The initialization statement is executed before the loop begins.

 The test statement which will test if a given condition is true or not. If the condition is true, then the code given inside the loop will be executed, otherwise the control will come out of the loop.

 The iteration statement where you can increase or decrease your counter. Sy:

for (initialization; test condition; increment, decrement ){ code to be executed }

Ex:

<html> <body> <script type="text/javascript"> var sum=0,elemet,I,n; n=parseInt(prompt(“enter n value”,” “); for(i=1;i<=n;i++) {element=prompt(“enter”+i+”element”.” “); Sum=(sum)+parseInt(element); }

document.write("<h1> the sum is”+sum+”</h1>”); </script>

</body> </html>

for...in

loop

The for...in loop is used to loop through an object's properties. As we have not discussed Objects yet, you may not feel comfortable with this loop. But once you understand how objects behave in JavaScript, you will find this loop very useful.

Syntax

for (variablename in object){ statement or block to execute }

(27)

In each iteration, one property from object is assigned to variablename and this loop continues till all the properties of the object are exhausted.

Ex:

Try the following example to implement ‘for-in’ loop. It prints the web browser’s Navigator object. <html>

<body>

var aProperty;

document.write("Navigator Object Properties<br /> ");

for (aProperty in navigator) { document.write(aProperty); document.write("<br />"); }

document.write ("Exiting from the loop!"); //-->

</script>

<p>Set the variable to different object and then try...</p> </body>

</html>

Control Statements :

JavaScript provides full control to handle loops and switch statements. There may be a situation when you need to come out of a loop without reaching its bottom. There may also be a situation when you want to skip a part of your code block and start the next iteration of the loop.

To handle all such situations, JavaScript provides break and continuestatements. These statements are used to immediately come out of any loop or to start the next iteration of any loop respectively.

The break Statement

The break statement, which was briefly introduced with the switch statement, is used to exit a loop early, breaking out of the enclosing curly braces.

Ex:

The following example illustrates the use of a break statement with a while loop. Notice how the loop breaks out early once x reaches 5 and reaches to document.write (..) statement just below to the closing curly brace <html> <body> <script type="text/javascript"> var x = 1;

document.write("Entering the loop<br /> "); while (x < 20)

(28)

{

if (x == 5){

break; // breaks out of loop completely }

x = x + 1;

document.write( x + "<br />"); }

document.write("Exiting the loop!<br /> "); //-->

</script>

</html>

We already have seen the usage of break statement inside a switchstatement.

The continue Statement

The continue statement tells the interpreter to immediately start the next iteration of the loop and skip the remaining code block. When a continuestatement is encountered, the program flow moves to the loop check expression immediately and if the condition remains true, then it starts the next iteration, otherwise the control comes out of the loop.

Ex:

This example illustrates the use of a continue statement with a while loop. Notice how the continue statement is used to skip printing when the index held in variable x reaches 5 − <html>

<body>

document.write("Entering the loop<br /> ");

while (x < 10) {

x = x + 1;

if (x == 5){

continue; // skip rest of the loop body }

document.write( x + "<br />"); }

document.write("Exiting the loop!<br /> "); </script>

</html>

Functions

(29)

 This eliminates the need of writing the same code again and again. It helps programmers in writing modular codes.

 Functions allow a programmer to divide a big program into a number of small and manageable functions.

 Like any other advanced programming language, JavaScript also supports all the features necessary to write modular code using functions.

 We must have seen functions like alert() and write() in the earlier chapters. We were using these functions again and again, but they had been written in core JavaScript only once.

 JavaScript allows us to write our own functions as well. This section explains how to write own functions in JavaScript.

Function Definition

Before we use a function, we need to define it. The most common way to define a function in JavaScript is by using the function keyword, followed by a unique function name, a list of parameters (that might be empty), and a statement block surrounded by curly braces.

Sy:

Try the following example. It defines a function called say Hello that takes no parameters <script type="text/javascript"> function sayHello() { alert("Hello there"); } </script>

Calling a Function

To invoke a function somewhere later in the script, you would simply need to write the name of that function as shown in the following code.

{

document.write ("Hello there!"); }

</script>

(30)

</head> <body>

<p>Click the following button to call the function</p> <form>

<p>Use different text in write method and then try...</p> </body>

</html>

Function Parameters

Now, we have seen functions without parameters. But there is a facility to pass different parameters while calling a function. These passed parameters can be captured inside the function and any manipulation can be done over those parameters. A function can take multiple parameters separated by comma.

Ex:

Try the following example. We have modified our sayHello function here. Now it takes two parameters. <html>

<head>

document.write (name + " is " + age + " years old."); }

</script> </head> <body>

<p>Use different parameters inside the function and then try...</p> </body>

</html>

The return Statement

 A JavaScript function can have an optional return statement.

 This is required if you want to return a value from a function. This statement should be the last statement in a function.

 For example, you can pass two numbers in a function and then you can expect the function to return their multiplication in your calling program.

Ex:

Try the following example. It defines a function that takes two parameters and concatenates them before returning the resultant in the calling program.

(31)

<head>

var full;

full = first + last; return full; }

function secondFunction() {

var result;

result = concatenate('Zara', 'Ali'); document.write (result );

} </script> </head> <body>

<p>Use different parameters inside the function and then try...</p> </body>

</html>

Arrays Object

Array: an array is orderd set of data elements which can be accessed through a single variable name. caoceptuallu an array is made up of a set of slots, where each sloat assigned to is a single data element. We can access the data elements either sequencially by reading from the start of the array (or) by their index. The index is the position of theelements in the array, with the first element being at position of the element being at position zero and the last element at the position (arraylength-1”.

(32)

The Array object to store multiple values in a single variable. It stores a fixed-size sequential collection of elements of the same type. An array is used to store a collection of data, but it is often more useful to think of an array as a collection of variables of the same type.

Sy: Use the following syntax to create an Array object: var fruits = new Array( "apple", "orange", "mango" );

 The Array parameter is a list of strings or integers. When you specify a single numeric parameter with the Array constructor, specify the initial length of the array. The maximum length allowed for an array is 4,294,967,295. var fruits = [ "apple", "orange", "mango" ];

ordinal numbers to access and to set values inside an array as follows. fruits[0] is the first element

fruits[1] is the second element fruits[2] is the third element <html> <head> <title>concatenation of array</title> </head> <body> <scripr>

var a=[“Svarts”. “science”, “college”] var a=[“170408019001”. “80”, “firstclass”] var a=[“msc”. “mca”, mba”]

for(var i=0;i<result.length;i++) document.writeln(result[i]+”’”); </script> </body> </html> Array Properties

Here is a list of the properties of the Array object along with their description. S.

N

Property & Description

1 constructor: Returns a reference to the array function that created the object. 2 Index: The property represents the zero-based index of the match in the string 3 Input: This property is only present in arrays created by regular expression matches. 4 length: Reflects the number of elements in an array.

5 prototype: The prototype property allows you to add properties and methods to an object. In the following sections, we will have examples to illustrate the usage of Array properties.

(33)

Here is a list of the methods of the Array object along with their description. Sr.N

o

Method & Description

1 concat() : Returns a new array comprised of this array joined with other array(s) and/or value(s).

2 every(): Returns true if every element in this array satisfies the provided testing function.

3 filter(): Creates a new array with all of the elements of this array for which the provided filtering function returns true.

4 forEach(): Calls a function for each element in the array. 5 indexOf()

Returns the first (least) index of an element within the array equal to the specified value, or -1 if none is found.

6 join(): Joins all elements of an array into a string.

7 lastIndexOf(): Returns the last (greatest) index of an element within the array equal to the specified value, or -1 if none is found.

8 map(): Creates a new array with the results of calling a provided function on every element in this array.

9 pop(): Removes the last element from an array and returns that element.

10 push(): Adds one or more elements to the end of an array and returns the new length of the array.

11 reduce(): Apply a function simultaneously against two values of the array (from left-to-right) as to reduce it to a single value.

12 reduceRight(): Apply a function simultaneously against two values of the array (from right-to-left) as to reduce it to a single value.

13 reverse(): Reverses the order of the elements of an array -- the first becomes the last, and the last becomes the first.

14 shift(): Removes the first element from an array and returns that element. 15 slice(): Extracts a section of an array and returns a new array.

16 some(): Returns true if at least one element in this array satisfies the provided testing function.

17 toSource(): Represents the source code of an object 18 sort(): Sorts the elements of an array

19 splice(): Adds and/or removes elements from an array.

20 toString(): Returns a string representing the array and its elements.

21 unshift(): Adds one or more elements to the front of an array and returns the new length of the array.

In the following sections, we will have a few examples to demonstrate the usage of Array methods.

Array Object

 JavaScript provides a special built-in object that behaves much more like a standard indexed array - the Array object - than the more basic associative array.

(34)

 This inherits from Object so, just like every other object in Javascript, it is also an associative array. However, it is extended to handle arrays with integer indices in a way that corresponds much more to the way indexed arrays work in other languages.

 That is, an Array object looks like a standard linear array of the sort that you find in almost any other language, but there are some things that make it behave in ways that might not expect.

 As in the case of most languages, the Array object is indexed by an integer. However, unlike most languages you don't have to specify the size of the Array before we start using it.

 For example in JavaScript we can simply create an Array object and start storing values in elements: var myArray=new Array();

myArray[0]="A"; myArray[1]="B"; myArray[2]="C";

and so on. In this case you can select any element of the array by index e.g. myArray[1] is "B".  Create an array object using an Array literal to initialize it. For example:

myArray=["A","B","C"];

 creates exactly the same array as the previous example. myArray=[];

is a common idiom used to create an uninitialized array.

 As a third way of creating and initializing an Array object, you an also include the initial values in the constructor function:

var myArray=new Array("A","B","C");

Objects

JavaScript is an Object Oriented Programming (OOP) language. A programming language can be called object-oriented if it provides four basic capabilities to developers

 Encapsulation: The capability to store related information, whether data or methods, together in an object.

 Aggregation: The capability to store one object inside another object.

 Inheritance: The capability of a class to rely upon another class (or number of classes) for some of its properties and methods.

 Polymorphism: The capability to write one function or method that works in a variety of different ways.

Objects are composed of attributes. If an attribute contains a function, it is considered to be a method of the object, otherwise the attribute is considered a property.

Object Properties

Object properties can be any of the three primitive data types, or any of the abstract data types, such as another object. Object properties are usually variables that are used internally in the object's methods, but can also be globally visible variables that are used throughout the page.

Sy: objectName.objectProperty = propertyValue;

For example − The following code gets the document title using the "title"property of the document object. var str = document.title;

(35)

Methods are the functions that let the object do something or let something be done to it. There is a small difference between a function and a method – at a function is a standalone unit of statements and a method is attached to an object and can be referenced by the this keyword.

Methods are useful for everything from displaying the contents of the object to the screen to performing complex mathematical operations on a group of local properties and parameters.

For example: Following is a simple example to show how to use the write() method of document object to write any content on the document.

document.write("This is test");

User-Defined Objects

All user-defined objects and built-in objects are descendants of an object called Object. The new Operator

 The new operator is used to create an instance of an object. To create an object, the new operator is followed by the constructor method.

 In the following example, the constructor methods are Object(), Array(), and Date(). These constructors are built-in JavaScript functions.

var employee = new Object();

var books = new Array("C++", "Perl", "Java"); var day = new Date("August 15, 1947");

Strings Object

The String object lets you work with a series of characters; it wraps Javascript's string primitive data type with a number of helper methods.

As JavaScript automatically converts between string primitives and String objects, you can call any of the helper methods of the String object on a string primitive.

Sy: var val = new String(string); The String parameter is a series of characters that has been properly encoded.

String Properties:

S Property & Description

1 constructor: Returns a reference to the String function that created the object. 2 length : Returns the length of the string.

3 prototype: The prototype property allows you to add properties and methods to an object.

In the following sections, we will have a few examples to demonstrate the usage of String properties.

String Methods

Here is a list of the methods available in String object along with their description.

Sr.No Method & Description

1 charAt(): Returns the character at the specified index.

2 charCodeAt(): Returns a number indicating the Unicode value of the character at the given index.

3 concat(): Combines the text of two strings and returns a new string.

4 indexOf(): Returns the index within the calling String object of the first occurrence of the specified value, or -1 if not found.