project pg

8/16/2019 Project PG

1/45

Chapter 1 INTRODUCTION

0


2/45

1.1 Web Development

Today, websites are efficient tool of communication within society. For example, when

people need information about a company or an organization, most of them will almost

instantaneously think of its website.

A website is a collection of Web pages, images, videos and other digital assets that is

hosted on one or several Web servers, usually accessible via the nternet, !obile phone or

a "A#.

The pages of websites can usually be accessed from a common root $%" called the

homepage, and usually reside on the same physical server. The $%"s of the pages

organize them into a hierarchy, although the hyperlinks between them control how the

reader perceives the overall structure and how the traffic flows between the different parts

of the sites.

A website re&uires attractive design and proper arrangement of links and images, which

enables a browser to easily interpret and access the properties of the site. 'ence it

provides the browser with ade&uate information and functionality about the organization,

community, network etc.

1.2 About the projet

The aim of this report is to explain the process of designing and building a website.

The website is called %abh 'elping 'ands and the $%" ($niform %esource "ocator) is*

https*++rabhhelpinghands.com.

The author of the website is monika vyas and it is based on content related to special kids

where am proving the details like schools, doctors etc available for physically and

mentally challenged children it contains case study and images to document this.

The website was built by hand coding -'T!" (xtensible 'ypertext !arkup "anguage)

and /00 (/ascading 0tyle 0heets). 1esigning is done in 'T!" and /00. The /!0

PAGE 1

https://rabhhelpinghands.com/https://rabhhelpinghands.com/


3/45

(content management system) here used is Wordpress. The %abh helping hands website

developed using 2'2 (preprocessor hypertext language) as the Front nd and !304" as

the 5ack nd

1.!About wor"plae

Ne#t $i% Tehnolo%& (#5T) is a premium web development and web design firm since

6778. #5T always aims at infusion of latest technologies for advancements of website

development. As a website applications development company we know how a website

can take off with proper design, programming9 #5T is based at :aipur, %a;asthan,

ndia with a team of 2rofessionals with assorted skill sets. #5T is formulated to

serve society by providing Web products and T services. We provide a full range of web

services with expertise in Website 1esign, Website 1evelopment, Website !aintenance,

Website %edesign, ?ffshore ?utsourcing, commerce Web 1evelopment, /!0 Web

1evelopment etc.

The owner of the company is !r. Amit 0hukla. worked under !r. A;ay 0harma

!anager of the company.

Ne#t $i% Tehnolo%& is a website designing, web development, 0oftware /onsulting,

specializing in creating custom web designing, web development commerce

development, web solutions, search engine optimization @ social media marketing

solutions. We provide &uality web design solutions and create professional websites with

fresh and innovative web design ideas. we offer includes website design, redesign, /!0

(/ontent !anagement 0ystem), /00 web design, open source ecommerce websites,

personal web pages, custom template design, open source shopping carts, blogs, custom

web design, website maintenance, seo (search engine optimization) and much more.

Ne#t $i% Tehnolo%& has gained a reputation of delivering &uality services by the time

critical solution and its ;ust because of our dedicated team. We deal in web development,

software development, mobile application development like android based application, B

2hone application, blackberry application and other mobile application development,

PAGE 2


4/45

search engine optimization and other T 0olutions. ach pro;ect is taken up as an

important assignment and each client is given top priority, 4uality is the key without

compromising on the costs and in this process, we strive to create and add value to the

businesses.

1.'About wor" (one

worked under the team lead by !r. A;ay 0harma. !y work during the internship

initially was to make 'T!" and /00 templates, then worked on few Word2ress

themes, where worked in languages like 2'2, :ava0cript, 'T!" and /00. The

5oot0trap, A:A- and :4uery were also used in some coding parts.

The main idea behind the internship was to gain knowledge in web services, so to gain

experience worked on my own website so that can take it further in future. The theme

used for rabhheplinghands.com is fully customized and have used some Word2ress

plugins to give it some professional look. used plugins for /ontact page, Testimonial,

0?, etc.

am also working on other site named monikavyas.com, 'ere, have used the oneBpage

theme named am one. t already has templates in it, so you only need to customize it

with help of 'T!" and /00. To make more changed in your website you need 2'2 and

:ava0cript that was completely used in the website rabhhelpinghands.com.

PAGE 3


5/45


6/45

0? plugin used 3?A0T

6.6.D Constrution

The author was tasked with constructing the website using -'T!" and /00.

The former was used for structure and the latter for the styling of the website. This

method not only reduces the overall page size, it also easier to edit and maintain.

'T!" ('yper Text !arkup "anguage) should be written i.e. all tags in

lower case, correct nesting of tags and all tags to be closed properly. 5y using -'T!" in

con;unction with a linked style sheet, the author has adhered to the W


7/45

to indicate which page the user is on. The rest of the navigation makes use of

a simple text colour rollover. The vertical navigation on the left of the page also makes

use of colour rollovers. 'owever, a rollover image has also been used. This image is

a small chevron placed vertically to the left of the text. When a mouse pointer hovers

over the text, the text changes colour and the image is swapped for that of

a flashing chevron. This is achieved by setting the image as a background image within

the li for the link and positioning it to the left.

2.2.2 Co(in%

The whole website has been hand coded in -'T!" and /00, it is beneficial, not only

to the person who wrote the code, but also to anybody who looks at the code, to

have a layout to some degree. For the -'T!", the author has left aligned all elements

except for the navigation areas. n addition, author has left white space after the start

and at the end of a div resulting in a uniform appearance of the code. n the case of

the /00, the author has grouped elements together i.e. layout, navigation and form area

it has clearly marked these sections. This makes the code easy to look at

and &uick to locate the many different sections that make up the stylesheet. n

the -'T!" document the author has inserted a comment next to each

closing div tag to highlight which div it belongs to. This is useful (especially when

nesting divs) as the bottom of the page can end up having several closing div tags. n

the /00 document the author has highlighted each section with an appropriate comment

i.e. side navigation for the vertical navigation. Furthermore, in the case of workarounds,

the author has stated what that certain piece of code is for.

2.2.! Compatibilit&

For a website to be acceptable it was necessary to check that it works in

multiple browsers. The browsers tested were*

• nternet xplorer E

• !ozilla Firefox D.7

PAGE 6


8/45

• chrome

• ?pera G

The website works fine in all of the above browsers.

2.2.' Desi%n Issues

The following chapter discusses the issues surrounding the design of the website, issues

such as, accessibility and different display settings. This stage of the development process

is fundamental to the success of the finished website. The navigation is easy to

use and because the website has a standard design across all pages, the whole site is easy

to navigate around. The author has also included a contact page which will generate himsome feedback as to how well his site has been designed. Accessibility

!aking the website accessible as well as aesthetically pleasing is &uite hard to do.

The author has, she feels, managed to strike a balance between the two. For instance,

the navigation and links within pages have a Htab index assigned to them and the contact

form specifies which language it is written in.

2.2.* Displa& +ettin%s

The website has been tested in various display settings ranging from


9/45

2.2.- Compression

#ot including the animated CF, all the images used in the website are photographs,

therefore the best format for them is :2C. The author has kept them at a high resolution

as she didnt want the images to lose any of their clarity however,

she still managed to achieve a small file size by optimizing them in

!acromedia Fireworks.

2hoto gallery demonstrates the ability to make images appear when a user positions

a mouse over a smaller image. The photo gallery is possible thanks to the visibility

property in the attached style sheet. The photo gallery enables a user

to hover over a thumbnail to reveal a larger version of the picture. All small

thumbnail images are of the same size, and the larger images are of a similar size to each

other. /opyright All images used in the website are the authors own.

2.2. +earh /n%ine Optimi0ation

An important element of any website that is built today is that it is visible by the different

search engines available for users to search on. The author has built his pages in a search

engine friendly manner /00 enabled him to do this effectively. ?ther than the /00

author has used the plugins available in Word2ress to give it the visibility over search

engine. The author has included meta tags in every page of his website enabling any

search engines to index the site better. !eta tags such as* J Keywords J 1escription J

%obots n addition to having keywords in the meta tag, the author has placed keywords

throughout his website. All keywords, whether they be in the main text or meta tag,

are relevant to the page that they are on.

2.2. /#ternal lin"s

The website has one external link to the Facebook page of rabh helping hands. t includes

the links to schools and some government sites to provide the information related to

special children.

PAGE 8


10/45

2.2.1 3ali(ation

The website is valid -'T!" and was validated via the W


11/45

Chapter ! Content 5ana%ement +&stem

!.1 Intro(ution6 Wor()ress

Word2ress is an online, open source website creation tool written in 2'2. 5ut in nonB

geek speak, its probably the easiest and most powerful blogging and website content

management system (or /!0) in existence today

PAGE 10


12/45

The /!0 am using for my pro;ect is Word2ress. have used both customized and

Word2ress theme. Word2ress is definitely the worldLs most popular /!0. The script is in

its roots more of a blog than a typical /!0. For a while now itLs been modernized and it

got thousands of plugins, what made it more /!0Blike.

The script as an ?pen 0ource is the first choice for most bloggers, but it can also be

successfully used for designing simple websites.

!.2 A(vanta%es

/as&7 eas&7 eas& ...

Word2ress does not re&uire 2'2 nor 'T!" knowledge unlike 1rupal, :oomla or Typo


13/45

Templates

?n the scripts homepage you can view thousands of graphics templates, that can change

your websiteLs look. 3ou can find there both free and paid templates. The paid ones are

often more advanced as well as more interesting.

5enu mana%ement

Word2ress menu management has extended functionalities, that can be modified to

include categories, pages, etc.

Non6stan(ar( 8iel(s

3ou can easily add fields to forms by yourself or using plugins. t will allow your blog or

subpages to have additional labels, categories or descriptions.

!.! Disa(vanta%es

5o(i8iation re9uires "nowle(%e o8 ):)

?perations like removing a date field re&uires some understanding of 2'2 language. t is

the case for most of such modifications.

;raphis mo(i8iation re9uires "nowle(%e o8 C++ an( :T5<

Although there are plenty templates available on the homepage, most of them are very

alike. To create a uni&ue look, you need to know /00 and 'T!".

PAGE 12


14/45

)lu%ins an( e88iien&

To compete with :oomla9 or 1rupal, Word2ress needs plenty of plugins to be installed.

$nfortunately, these plugins influence the scriptLs efficiency and not in a good way.

Another problem arises when you need to choose a plugin for a specific functionality.

Among all the thousands of plugins, most of them have their clones. t means, that any

given functionality can be added by several different plugins created by different authors.

0ometimes choosing the right one may take &uite some time.

):) seurit&

The script is not protected as well as other applications. t all depends on how sesitive is

the additional content of your page.

Tables an( %raphis 8ormattin%

!odifying tables or graphics format can be more complicated than in other applications

like 4uick. /!0 or :oomla.

+=< 9ueries

4ueries can be complex since all additional nonBstandard fields that make Word2ress a

/!0, re&uire additional syntax.

PAGE 13

http://whichcmstochoose.com/quick.cms.htmlhttp://whichcmstochoose.com/joomla.htmlhttp://whichcmstochoose.com/quick.cms.htmlhttp://whichcmstochoose.com/joomla.html


15/45

Conlusions

Word2ress is a very good script to create a simple website. t is one of the simplest to use

(definitely not simpler than 4uick. /!0 though) of all solutions available on the internet.

tLs very good choose for a beginnerLs. Advanced users with advanced needs would have

to install many plugins to have what is a standard for :oomla or 1rupal.

Chapter ' ):)

'.1 Intro(ution

):)? :&perte#t )re6proessor is a widely used, generalBpurpose scripting language

that was initially designed for web development to produce dynamic web pages. For this

purpose, 2'2 code is embedded into the 'T!" source document and interpreted by a

web server with a 2'2 processor module, which generates the web page document. As a

generalBpurpose programming language, 2'2 code is processed by an interpreter

application in commandBline mode performing desired operating system operations and

producing program output on its standard output channel. t may also function as a

graphical application. 2'2 is available as a processor for most modern web servers and

as a standalone interpreter on most operating systems and computing platforms.

2'2 was originally created by %asmus "erdorf in D88= and has been in continuous

development ever since. The main implementation of 2'2 is now produced by the 2'2

Croup and serves as the de facto standard for 2'2 as there is no formal specification.

2'2 is free software released under the 2'2 "icense.

'.2 :istor&

2'2 originally stood for personal home page. ts development began in D88I when the

1anish+Creenlandic programmer %asmus "erdorf initially created a set of 2erl scripts he

PAGE 14

http://whichcmstochoose.com/quick.cms.htmlhttp://whichcmstochoose.com/joomla.htmlhttp://whichcmstochoose.com/drupal.htmlhttp://whichcmstochoose.com/quick.cms.htmlhttp://whichcmstochoose.com/joomla.htmlhttp://whichcmstochoose.com/drupal.html


16/45

called L2ersonal 'ome 2age ToolsL to maintain his personal homepage, including tasks

such as displaying his resume and recording how much traffic his page was receiving.

'e rewrote these scripts as / programming language /ommon Cateway nterface (/C)

binaries, extending them to add the ability to work with web forms and to communicate

with databases and called this implementation L2ersonal 'ome 2age+Forms nterpreterL or

2'2+F. 2'2+F could be used to build simple, dynamic web applications. "erdorf

released 2'2+F as L2ersonal 'ome 2age Tools (2'2 Tools) version D.7L publicly on :une

G, D88=, to accelerate bug location and improve the code. This release already had the

basic functionality that 2'2 has today. This included 2erlBlike variables, form handling,

and the ability to embed 'T!". The syntax was similar to 2erl but was more limited and

simpler, although less consistent. A development team began to form and, after months of

work and beta testing, officially released 2'2+F 6 in #ovember D88.

Meev 0uraski and Andi Cutmans, two sraeli developers at the Technion T, rewrote the

parser in D88 and formed the base of 2'2


17/45

changes, which included plans for full $nicode support. 'owever, $nicode support took

developers much longer to implement than originally thought, and the decision was made

in !arch 67D7 to move the pro;ect to a branch, with features still under development

moved to a trunk.

!any highBprofile openBsource pro;ects ceased to support 2'2 I in new code as of

February =, 677G, because of the Co2'2= initiative, provided by a consortium of 2'2

developers promoting the transition from 2'2 I to 2'2 =.

2'2 currently does not have native support for $nicode or multibit strings $nicode

support is under development for a future version of 2'2 and will allow strings as well as

class, method, and function names to contain nonBA0/ characters.

2'2 interpreters are available on both


18/45

Chapter * Database >5&+=< +erve

*.1 Intro(ution

!y04" is a relational database management system (%15!0) that runs as a server

providing multiBuser access to number of databases. !y04" is officially pronounced

+ma sk;u l+ (N!y 0B4B"N), but is often also pronounced +ma si kwPl+ (N!y 0e&uelN).ɪˌɛ ːˈɛ ɪˈ ː

t is named for original developer !ichael WideniusL daughter !y.

The !y04" development pro;ect has made its source code available under the terms of

the C#$ Ceneral 2ublic "icense, as well as under a variety of proprietary agreements.

!y04" was owned and sponsored by a single forBprofit firm, the 0wedish company

!y04" A5, now owned by ?racle /orporation.

!embers of the !y04" community have created several forks (variations) such as

1rizzle, ?ur1elta, 2ercona 0erver, and !aria15. All of these forks were in progress

before the ?racle ac&uisition (1rizzle was announced G months before the 0un

ac&uisition).

FreeBsoftware pro;ects that re&uire a fullBfeatured database management system often use

!y04". 0uch pro;ects include (for example) Word2ress, php55, 1rupal and other

software built on the "A!2 software stack. !y04" is also used in many highBprofile,

largeBscale World Wide Web products including Wikipedia, Coogle and Facebook.

!y04" is an open source, 04" %elational 1atabase !anagement 0ystem (%15!0) that

is free for many uses. 'owever, !y04" found a broad, enthusiastic user base for its

PAGE 17


19/45

liberal licensing terms, perky performance, and ease of use. ts acceptance was aided in

part by the wide variety of other technologies such as 2'2, :ava, 2erl, 2ython, and the

like that have encouraged its use through stable, wellBdocumented modules and

extensions. !y04" has not failed to reward the loyalty of these users with the addition of

both sub selects and foreign keys.

Re8erenes 8or the ;raph

5.


20/45

http*++dev.mys&l.com+doc+refman+I.D+en+newsB


21/45

development group. And many 2'2Bbased ?pen 0ource pro;ects assume complete

familiarity with !y04" database administration for all developers.

$nlike some other databases, it should be well within the capability of any 2'2

developer to selfBadminister a !y04" database !any 2'2Bbased application packages,

both commercial and ?pen 0ource, also re&uire familiarity with a !y04" database to

install, run, and debug the Web app.

*.2 +upport an(


22/45

/ustomers that do not wish to follow the terms of the C2" may purchase a proprietary

license.

"ike many openBsource programs, !y04" has trademarked its name, which others may

use only with the trademark holderLs permission.

*.! Wh& ):) an( 5&+=>, offering support for features such as

overloading, interfaces, private member variables and methods, and other standard ??2

constructions.

2'2 costs you nothing. !y04" is openBsource licensed for many uses it is not and has

never been primarily communityBdeveloped software. 2'2 is easy to learn, compared to

the other ways to achieve similar functionality.

2'2 and !y04" run native on every popular flavour of $#- (including !ac ?0 -)

and Windows. A huge percentage of the worlds 'TT2 servers run on one of these two

classes of operating systems. 2'2 is compatible with the three leading Web servers*

PAGE 21


23/45

Apache 'TT2 0erver for $#- and Windows, !icrosoft nternet nformation 0erver,

and #etscape nterprise 0erver (a.k.a. i2lanet 0erver).

2'2 is a real programming language. 2'2 is pleasingly zippy in its execution, especially

when compiled as an Apache module on the $#- side. The !y04" server, once started,

executes even very complex &ueries with huge result sets in recordBsetting time.

Chapter ,? :TT) +erver > Apahe :TT) +erver

,.1 Intro(ution

The Apache 'TT2 0erver, commonly referred to as Apache (pronounced +P pUt i +), isˈ ʃ ː

web server software notable for playing a key role in the initial growth of the World Wide

Web. n 6778 it became the first web server software to surpass the D77 million web site

milestone. Apache was the first viable alternative to the #etscape /ommunications

/orporation web server (currently known as ?racle i2lanet Web 0erver), and has since

evolved to rival other $nixBbased web servers in terms of functionality and performance.

The ma;ority of web servers using Apache run a $nixBlike operating system.Vcitation

needed

Apache is developed and maintained by an open community of developers under the

auspices of the Apache 0oftware Foundation. The application is available for a wide

variety of operating systems, including $#-, C#$, Free501, "inux, 0olaris, #ovell

#etWare, !ac ?0 -, !icrosoft Windows, ?0+6, T2F, and e/om0tation. %eleased under

the Apache "icense, Apache is characterized as openBsource software.

PAGE 22


24/45

0ince April D88E Apache has been the most popular 'TT2 server software in use. As of

February 67D7 Apache served over =I.IEX of all websites and over EEX of the million

busiest.

,.2 :istor&

The preBrelease versions (before 7.E.6) of the Apache web server software were created

by %obert !c/ool, who was heavily involved with the #ational /entre for

0upercomputing Applications web server, known simply as #/0A 'TT2d. When

!c/ool left #/0A in midBD88I, the development of httpd stalled, leaving a variety of

patches for improvements circulating through eBmails. These patches were provided by a

number of other developers besides !c/ool* 5rian 5ehlendorf, %oy Fielding, %ob

'artill, 1avid %obinson, /liff 0kolnick, %andy Terbush, %obert 0. Thau, Andrew Wilson,

ric 'agberg, Frank 2eters and #icolas 2ioch, and they thus helped to form the original

NApache CroupN. There have been two explanations of the pro;ectLs name. According to

the Apache Foundation, the name was chosen out of respect for the #ative American tribe

of Apache (ndY), wellBknown for their endurance and their skills in warfare. 'owever,

the original FA4 on the Apache 0erver pro;ectLs website, from D88E to 677D, claimed that

NThe result after combining Vthe #/0A httpd patches was a patchy server. The first

explanation was supported at an Apache /onference and in an interview in 6777 by 5rian

5ehlendorf, who said that the name connoted NTake no prisoners. 5e kind of aggressive

and kick some assN 5ehlendorf then contradicted this in a 677 interview, stating that

NThe Apache server isnLt named in honor of CeronimoLs tribeN but that so many revisions

were sent in that Nthe group called it La patchy Web serverLN. 5oth explanations are

probably appropriate.

The system operates through the work of volunteers who specialize in certain areas of

coding. The Apache Croup (AC) emphasizes decentralization and has a low

interdependency in the tasks they do. The AC is a multinational server, having developers

located in $.0., 5ritain, /anada, Cermany, and taly. Although Apache collaborates as a

PAGE 23


25/45

group, the work is done by individuals. Their decisions are a result of eBmail and &uorum

voting system.

The very first version (7.E.6) of publicly distributed Apache was released in April D88=. A

new modular server architecture was written under the codename 0hambhala, which

became version 7.G.7 released in mid :uly. The D.7 version was released on 1ecember D,

D88=.

Zersion 6 of the Apache server was a substantial reBwrite of much of the Apache D.x code,

with a strong focus on further modularization and the development of a portability layer,

the Apache 2ortable %untime. The Apache 6.x core has several ma;or enhancements over

Apache D.x. These include $#- threading, better support for nonB$nix platforms (suchas !icrosoft Windows), a new Apache A2, and 2vE support. The first alpha release of

Apache 6 was in !arch 6777, with the first general availability release on April E, 6776.

Zersion 6.6 introduced a more flexible authorization A2. t also features improved cache

modules and proxy modules.

,.!


26/45

think those patent termination cases are inherently a bad idea, but nonetheless they are

incompatible with the C#$ C2".

'owever, version < of the C2" includes a provision (0ection e) which allows it to be

compatible with licenses that have patent retaliation clauses, including the Apache

"icense. The name Apache is a registered trademark and may only be used with the

trademark holderLs express permission.

Chapter -? ava +riptin% an( =uer&

-.1 Intro(ution

:ava0cript is a prototypeBbased scripting language that is dynamic, weakly typed and

has firstBclass functions. t is a multiBparadigm language, supporting ob;ect, imperative,

and functional programming styles.

:ava0cript was formalized in the /!A0cript language standard and is primarily used in

the form of clientBside :ava0cript, implemented as part of a Web browser in order to

provide enhanced user interfaces and dynamic websites. This

enables programmatic access to computational ob;ects within a host environment.

:ava0criptLs use in applications outside Web pages R for example

in 21F documents, siteBspecific browsers, and desktop widgets R is also significant.

PAGE 25

http://en.wikipedia.org/wiki/Prototype-basedhttp://en.wikipedia.org/wiki/Scripting_languagehttp://en.wikipedia.org/wiki/Dynamic_languagehttp://en.wikipedia.org/wiki/Weak_typinghttp://en.wikipedia.org/wiki/First-class_functionshttp://en.wikipedia.org/wiki/Multi-paradigmhttp://en.wikipedia.org/wiki/Imperative_programminghttp://en.wikipedia.org/wiki/Functional_programminghttp://en.wikipedia.org/wiki/ECMAScripthttp://en.wikipedia.org/wiki/Client-side_JavaScripthttp://en.wikipedia.org/wiki/Web_browserhttp://en.wikipedia.org/wiki/User_interfacehttp://en.wikipedia.org/wiki/Websitehttp://en.wikipedia.org/wiki/Computer_programminghttp://en.wikipedia.org/wiki/Application_softwarehttp://en.wikipedia.org/wiki/Portable_Document_Formathttp://en.wikipedia.org/wiki/Site-specific_browserhttp://en.wikipedia.org/wiki/Desktop_widgethttp://en.wikipedia.org/wiki/Prototype-basedhttp://en.wikipedia.org/wiki/Scripting_languagehttp://en.wikipedia.org/wiki/Dynamic_languagehttp://en.wikipedia.org/wiki/Weak_typinghttp://en.wikipedia.org/wiki/First-class_functionshttp://en.wikipedia.org/wiki/Multi-paradigmhttp://en.wikipedia.org/wiki/Imperative_programminghttp://en.wikipedia.org/wiki/Functional_programminghttp://en.wikipedia.org/wiki/ECMAScripthttp://en.wikipedia.org/wiki/Client-side_JavaScripthttp://en.wikipedia.org/wiki/Web_browserhttp://en.wikipedia.org/wiki/User_interfacehttp://en.wikipedia.org/wiki/Websitehttp://en.wikipedia.org/wiki/Computer_programminghttp://en.wikipedia.org/wiki/Application_softwarehttp://en.wikipedia.org/wiki/Portable_Document_Formathttp://en.wikipedia.org/wiki/Site-specific_browserhttp://en.wikipedia.org/wiki/Desktop_widget


27/45

#ewer and faster :ava0cript Z!s and frameworks built upon them (notably #ode.;s)

have also increased the popularity of :ava0cript for serverBside web applications.

:ava0cript uses syntax influenced by that of /. :ava0cript copies many names andnaming conventions from :ava, but the two languages are otherwise unrelated and have

very different semantics. The key design principles within :ava0cript are taken from

the self and 0cheme programming languages.

-.2 :istor&

:ava0cript was originally developed by 5rendan ich of #etscape under the

name !ocha, which was later renamed to "ive0cript, and finally to :ava0cript mainly

because it was more influenced by the :ava programming language. "ive0cript was the

official name for the language when it first shipped in beta releases of #etscape

#avigator 6.7 in 0eptember D88=, but it was renamed :ava0cript in a ;oint announcement

with 0un !icrosystems on 1ecember I, D88=, when it was deployed in the #etscape

browser version 6.75


28/45

:ava0cript, which were based on :avaLs ;ava.util.1ate class. :0cript was included

in nternet xplorer


29/45

:ava0cript supports much of the structured programming syntax

from / (e.g., if statements, while loops, switch statements, etc.). ?ne partial exception

is scoping* /Bstyle blockBlevel scoping is not supported (instead, :ava0cript has functionB

level scoping). :ava0cript D., however, supports blockBlevel scoping with

the let keyword. "ike /, :ava0cript makes a distinction

between expressionsand statements. ?ne syntactic difference from / is automatic

semicolon insertion, in which the semicolons that terminate statements can be omitted.

-.!.2 D&nami

(&nami t&pin%

As in most scripting languages, types are associated with values, not with variables. For

example, a variable x could be bound to a number, then later rebound to a string.

:ava0cript supports various ways to test the type of an ob;ect, including duck typing.

objet base(

:ava0cript is almost entirely ob;ectBbased. :ava0cript ob;ects are associative arrays,

augmented with prototypes (see below). ?b;ect property names are string

keys* ob;.x [ D7 andob;VLxL [ D7 are e&uivalent, the dot notation being syntactic sugar .

2roperties and their values can be added, changed, or deleted at runBtime. !ost properties

of an ob;ect (and those on its prototype inheritance chain) can be enumerated using

a for...in loop. :ava0cript has a small number of builtBin ob;ects such

as Function and 1ate.

run6time evaluation

:ava0cript includes an eval function that can execute statements provided as strings at

runBtime.

PAGE 28

http://en.wikipedia.org/wiki/Structured_programminghttp://en.wikipedia.org/wiki/C_(computer_language)http://en.wikipedia.org/wiki/Scope_(computer_science)http://en.wikipedia.org/wiki/Expression_(programming)http://en.wikipedia.org/wiki/Statement_(programming)http://en.wikipedia.org/wiki/JavaScript_syntax#Whitespace_and_semicolonshttp://en.wikipedia.org/wiki/JavaScript_syntax#Whitespace_and_semicolonshttp://en.wikipedia.org/wiki/Type_systemhttp://en.wikipedia.org/wiki/Value_(computer_science)http://en.wikipedia.org/wiki/Variable_(programming)http://en.wikipedia.org/wiki/String_(computer_science)http://en.wikipedia.org/wiki/Duck_typinghttp://en.wikipedia.org/wiki/Object-basedhttp://en.wikipedia.org/wiki/Object_(computer_science)http://en.wikipedia.org/wiki/Associative_arrayhttp://en.wikipedia.org/wiki/Syntactic_sugarhttp://en.wikipedia.org/wiki/Evalhttp://en.wikipedia.org/wiki/Structured_programminghttp://en.wikipedia.org/wiki/C_(computer_language)http://en.wikipedia.org/wiki/Scope_(computer_science)http://en.wikipedia.org/wiki/Expression_(programming)http://en.wikipedia.org/wiki/Statement_(programming)http://en.wikipedia.org/wiki/JavaScript_syntax#Whitespace_and_semicolonshttp://en.wikipedia.org/wiki/JavaScript_syntax#Whitespace_and_semicolonshttp://en.wikipedia.org/wiki/Type_systemhttp://en.wikipedia.org/wiki/Value_(computer_science)http://en.wikipedia.org/wiki/Variable_(programming)http://en.wikipedia.org/wiki/String_(computer_science)http://en.wikipedia.org/wiki/Duck_typinghttp://en.wikipedia.org/wiki/Object-basedhttp://en.wikipedia.org/wiki/Object_(computer_science)http://en.wikipedia.org/wiki/Associative_arrayhttp://en.wikipedia.org/wiki/Syntactic_sugarhttp://en.wikipedia.org/wiki/Eval


30/45

.


31/45

bound to that ob;ect for that invocation. The constructorLs prototype property determines

the ob;ect used for the new ob;ectLs internal prototype. :ava0criptLs builtBin constructors,

such as Array, also have prototypes that can be modified.

4untions as metho(s

$nlike many ob;ectBoriented languages, there is no distinction between a function

definition and a method definition. %ather, the distinction occurs during function calling

a function can be called as a method. When a function is called as a method of an ob;ect,

the functionLs local this keyword is bound to that ob;ect for that invocation.

-.!.* 5isellaneous

Run6time environment

:ava0cript typically relies on a runBtime environment (e.g. in a web browser ) to provide

ob;ects and methods by which scripts can interact with Nthe outside worldN. n fact, it

relies on the environment to provide the ability to include+import scripts

(e.g. 'T!" \script] elements). (This is not a language feature per se, but it is common

in most :ava0cript implementations.)

3aria(i 8untions

An indefinite number of parameters can be passed to a function. The function can access

them through formal parameters and also through the local arguments ob;ect.

Arra& an( objet literals

"ike many scripting languages, arrays and ob;ects (associative arrays in other languages)

can each be created with succinct shortcut syntax. n fact, these literals form the basis of

the :0?#data format.

Re%ular e#pressions

PAGE 30

http://en.wikipedia.org/wiki/Method_(computer_science)http://en.wikipedia.org/wiki/Web_browserhttp://en.wikipedia.org/wiki/HTMLhttp://en.wikipedia.org/wiki/Formal_parameterhttp://en.wikipedia.org/wiki/Object_literalhttp://en.wikipedia.org/wiki/JSONhttp://en.wikipedia.org/wiki/Method_(computer_science)http://en.wikipedia.org/wiki/Web_browserhttp://en.wikipedia.org/wiki/HTMLhttp://en.wikipedia.org/wiki/Formal_parameterhttp://en.wikipedia.org/wiki/Object_literalhttp://en.wikipedia.org/wiki/JSON


32/45

:ava0cript also supports regular expressions in a manner similar to 2erl, which provide a

concise and powerful syntax for text manipulation that is more sophisticated than the

builtBin string functions.

-.' Use in web pa%es

The most common use of :ava0cript is to write functions that are embedded in or

included from 'T!" pages and that interact with the 1ocument ?b;ect !odel (1?!) of

the page. 0ome simple examples of this usage are*

?pening or popping up a new window with programmatic control over the size,

position, and attributes of the new window (e.g. whether the menus, toolbars, etc., are

visible).

Zalidating input values of a web form to make sure that they are acceptable before

being submitted to the server.

/hanging images as the mouse cursor moves over them* This effect is often used

to draw the userLs attention to important links displayed as graphical elements.

Transmitting information about the userLs reading habits and browsing activities to

various websites. Web pages fre&uently do this for web analytics, ad

tracking, personalization or other purposes.

5ecause :ava0cript code can run locally in a userLs browser (rather than on a remote

server), the browser can respond to user actions &uickly, making an application more

responsive. Furthermore, :ava0cript code can detect user actions which 'T!" alone

cannot, such as individual keystrokes. Applications such as Cmail take advantage of this*

much of the userBinterface logic is written in :ava0cript, and :ava0cript dispatches

re&uests for information (such as the content of an eBmail message) to the server. The

wider trend of A;ax programming similarly exploits this strength. A :ava0cript

PAGE 31

http://en.wikipedia.org/wiki/Regular_expressionhttp://en.wikipedia.org/wiki/Perlhttp://en.wikipedia.org/wiki/HTMLhttp://en.wikipedia.org/wiki/Document_Object_Modelhttp://en.wikipedia.org/wiki/Pop-up_adhttp://en.wikipedia.org/wiki/Data_validationhttp://en.wikipedia.org/wiki/Form_(web)http://en.wikipedia.org/wiki/Rollover_(web_design)http://en.wikipedia.org/wiki/Web_analyticshttp://en.wikipedia.org/wiki/Ad_trackinghttp://en.wikipedia.org/wiki/Ad_trackinghttp://en.wikipedia.org/wiki/Personalizationhttp://en.wikipedia.org/wiki/Gmailhttp://en.wikipedia.org/wiki/Ajax_(programming)http://en.wikipedia.org/wiki/JavaScript_enginehttp://en.wikipedia.org/wiki/Regular_expressionhttp://en.wikipedia.org/wiki/Perlhttp://en.wikipedia.org/wiki/HTMLhttp://en.wikipedia.org/wiki/Document_Object_Modelhttp://en.wikipedia.org/wiki/Pop-up_adhttp://en.wikipedia.org/wiki/Data_validationhttp://en.wikipedia.org/wiki/Form_(web)http://en.wikipedia.org/wiki/Rollover_(web_design)http://en.wikipedia.org/wiki/Web_analyticshttp://en.wikipedia.org/wiki/Ad_trackinghttp://en.wikipedia.org/wiki/Ad_trackinghttp://en.wikipedia.org/wiki/Personalizationhttp://en.wikipedia.org/wiki/Gmailhttp://en.wikipedia.org/wiki/Ajax_(programming)http://en.wikipedia.org/wiki/JavaScript_engine


33/45

engine (also known as :ava0cript interpreter or :ava0cript implementation) is

an interpreter that interprets :ava0cript source code and executes the script accordingly.

The first :ava0cript engine was created by 5rendan ich at #etscape /ommunications

/orporation, for the #etscape #avigator web browser . The engine, codeB

named 0pider!onkey, is implemented in /. t has since been updated (in :ava0cript D.=)

to conform to /!AB6E6 dition


34/45

D.7!arch

D88E6.7 I-

D.=

PAGE 33

http://en.wikipedia.org/wiki/E4Xhttp://en.wikipedia.org/wiki/E4X


35/45

D.?ctober

677E

D.E > 2ythonic

generators >

iterators > let

6.7

D.G :une 677G

D. > generator

expressions > exp

ression closures

native

:0?# support >

minor updates

minor

updates /!A0cript =

compliance

I 8 DD.E7

Chapter ? B:T5<

.1 Intro(ution

PAGE 34

http://en.wikipedia.org/wiki/Generator_(computer_programming)http://en.wikipedia.org/wiki/Generator_(computer_programming)http://en.wikipedia.org/wiki/Closure_(computer_science)http://en.wikipedia.org/wiki/Closure_(computer_science)http://en.wikipedia.org/wiki/JSON#Native_encoding_and_decoding_in_browsershttp://en.wikipedia.org/wiki/JSON#Native_encoding_and_decoding_in_browsershttp://en.wikipedia.org/wiki/ECMAScripthttp://en.wikipedia.org/wiki/Generator_(computer_programming)http://en.wikipedia.org/wiki/Generator_(computer_programming)http://en.wikipedia.org/wiki/Closure_(computer_science)http://en.wikipedia.org/wiki/Closure_(computer_science)http://en.wikipedia.org/wiki/JSON#Native_encoding_and_decoding_in_browsershttp://en.wikipedia.org/wiki/JSON#Native_encoding_and_decoding_in_browsershttp://en.wikipedia.org/wiki/ECMAScript


36/45


37/45

standards such as -'T!" 6. n 677, the W


38/45

generally -'T!"Ls -!" syntax is a little more expressive than 'T!" (for example,

arbitrary namespaces are not allowed in 'T!"). 0o, firstly one source of differences is

immediate* -'T!" uses an -!" syntax, while 'T!" uses a pseudoB 0C!" syntax

(officially 0C!" for 'T!" I and under, but never in practice, and standardised away

from 0C!" in 'T!"=). 0econdly however, because the expressible contents of the

1?! in syntax are slightly different, there are some changes in actual behavior between

the two models.

Firstly then, syntax differences*

5roadly, the -!" rules re&uire that all elements be closed, either by a separate

closing tag or using self closing syntax (e.g. \br +]), while 'T!" syntax permits

some elements to be unclosed because either they are always empty (e.g. \input]) or

their end can be determined implicitly (NomissibilityN, e.g. \p]).

-!" is caseBsensitive for element and attribute names, while 'T!" is not.

0ome shorthand features in 'T!" are omitted in -!", such as (D) attribute

minimization, where attribute values or their &uotes may be omitted (e.g. \option

selected] or \option selected[selected], while -!" this must be expressed

as \option selected[NselectedN]) (6) element minimization may be used to remove

elements entirely (such as \tbody]inferred in a table if not given) and (


39/45

!ost prominently, behavior on parse errors differ. A fatal parse error in -!"

(such as an incorrect tag structure) causes document processing to be aborted.

!ost content re&uiring namespaces will not work in 'T!", except the builtBin

support for 0ZC and !ath!" in the 'T!"= parser along with certain magic

prefixes such as xlink.

:ava0cript processing is a little different in -'T!", with minor changes in case

sensitivity to some functions, and further precautions to restrict processing to wellB

formed content. 0cripts must not use the document.write() method it is not available

for -'T!". The inner'T!" property is available, but will not insert nonBwellB

formed content. ?n the other hand, it can be used to insert wellBformed namespaced

content into -'T!".

/00 is also applied slightly differently. 1ue to -'T!"Ls caseBsensitivity, all /00

selectors become case sensitive for -'T!" documents. 0ome /00 properties, such

as backgrounds, set on the\body] element in 'T!" are Linherited upwardsL into

the \html] element this appears not to be the case for -'T!".

.* A(option

The similarities between 'T!" I.7D and -'T!" D.7 led many web sites and content

management systems to adopt the initial W


40/45


41/45

specification. As of !ay 6= 67DD, -'T!" D.7 0trict is the document type used for

the homepage of the website of the World Wide Web /onsortium.

-'T!" D.7 Transitional is the -!" e&uivalent of 'T!" I.7D Transitional, and

includes the presentational elements (such as center,font and strike) excluded from

the strict version.

-'T!" D.7 Frameset is the -!" e&uivalent of 'T!" I.7D Frameset, and

allows for the definition of frameset documents Ra common Web feature in the late

D887s.

The second edition of -'T!" D.7 became a W


42/45

\head]

\title]\title]

\style type[text+css]

CSS Content Goes Here

\+style]

\+head]

\body]

With this method each (-)'T!" file contains the /00 code needed to style the page.

!eaning that any changes you want to make to one page, will have to be made to all.

This method can be good if you need to style only one page, or if you want different

pages to have varying styles.

/BT/RNA< +T


43/45

\+head]

\body]

5y using an external style sheet, all of your (-)'T!" files link to one /00 file in order

to style the pages. This means, that if you need to alter the design of all your pages, you

only need to edit one .css file to make global changes to your entire website.

'ere are a few reasons this is better.

• asier !aintenance

• %educed File 0ize

• %educed 5andwidth

• mproved Flexibility

CA+CADIN; ORD/R

n the previous paragraphs, have explained how to link to a css file either internally or

externally. f you understood, than am doing a good ;ob. f not dont fret, there is a long

way to go before we are finished. Assuming you have caught on already, you are

probably asking, well can do both_ The answer is yes. 3ou can have both internal,

external, and now wait a minute a third way_ 3es inline styles also.

Inline +t&les

have not mentioned them until now because in a way they defeat the purpose of using

/00 in the first place. nline styles are defined right in the (-)'T!" file along side the

element you want to style. 0ee example below.

\p style[color* Qff7777]Some red text \+p]

PAGE 42


44/45

nline styles will #?T allow the user to change styles of elements or text formatted this

way

+o7 whih is better@

0o with all these various ways of inserting /00 into your (-)'T!" files, you may now

be asking well which is better, and if use more than one method, in what order do these

different ways load into my browser_

All the various methods will cascade into a new Spseudo stylesheet in the following

order*

D. nline 0tyle (inside (-)'T!" element)6. nternal 0tyle 0heet (inside the \head] tag)


45/45

)OW/R U+/R+

0wapping stylesheets is beneficial not only for users with disabilities, but also power

users who are particular about how they read Web documents.

$ROW+/R I++U/+

3ou will discover as you delve farther into the world of /00 that all browsers are not

created e&ually, to say the least. /00 can and will render differently in various browsers

causing numerous headaches.

project pg

Documents