Introduction to
Web built on a two-tier client/server system Requests and responses through which a Web browser and Web server communicate happen with HTTP
Behavior W3C
W3C – The World Wide Web Consortium "The dream behind the Web is of a common information space in which we communicate by sharing information."
W3C was created in October 1994 W3C was created by Tim Berners-Lee, the inventor of the Web W3C is organized as a Member Organization W3C is working to Standardize the Web W3C creates and maintains WWW Standards W3C Standards are called W3C Recommendations
The most important W3C standards are HTML CSS XML XSL DOM
ECMA - European Computer Manufacturers Association ECMA, founded in 1961, in order to meet the need for standardizing computer languages and input/output codes.
For Web developers, the most important standard is ECMAScript, the standardization of JavaScript. With JavaScript, DOM objects can be added, deleted, or changed.
JavaScript is an implementation of the ECMAScript language standard and is typically used to enable programmatic access to computational objects within a host environment.
JavaScript (brief) history Developed by Brendan Eich as Mocha First introduced in Navigator (LiveScript) Navigator 2.0: name changed to JavaScript 1.0 Microsoft released Internet Explorer 4.0 version of JavaScript (Jscript) ECMAScript International, standardized version of JavaScript Most recent version: edition 3
Executes in the browser on the user’s computer after the page elements are downloaded Reduces processing load on the Web server, taking advantage of the client machine Speeds up user experience
When HTML was first developed, Web pages were static Static Web pages cannot change after the browser renders them HTML and XHTML could only be used to produce static documents Javascript Client-side scripting language that allows Web page authors to develop interactive Web pages and sites
Adds dynamic behavior to Web pages Used to “remember” state Access to browser information, form elements, images
Executes on the Web server before the page is presented to the visitor Can handle file manipulation, document creation and modification Database connectivity More secure, more powerful PHP, ASP, ColdFusion, Java, CGI, etc.
<?xml version = "1.0" encoding = "utf-8" 8"?> ?> 1 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 4 5 <! <!-- -- Fig. 6.2: welcome.html -- --> 6 <! <!-- -- Displaying a line of text. -- --> <html xmlns = "http://www.w3.org/1999/xhtml"> 7 <head> 8 <title>A First Program in JavaScript</title> 9 10 <script type = "text/javascript"> 11 <! <!-- -- 12 document.writeln( 13 "<h1>Welcome to JavaScript Programming!</h1>" ); ); 14 // // -- --> 15 </script> 16 </head><body></body> 17 </html>
The browser’s document object represents the XHTML document currently being displayed in the browser. The document object allows a script programmer to specify XHTML text to be displayed in the XHTML document. JavaScript is case sensitive.
The document object ’s writeln method writes a line of XHTML text in the XHTML document.
Firefox Web Developer
Firefox Web Developer Firebug Addon
Firefox Web Developer Firebug Addon Chrome Developer Tools
Inspect Web Console Responsive Design View Style Editor Debugger Error Console
1.0" encodin <?xml xml vers version = on = "1.0 ncoding = g = "utf "utf-8" 8"?> ?> 1 <!DOCT DOCTYPE YPE html tml PUBL PUBLIC "-//W3 //W3C//DT //DTD XH D XHTML 1 ML 1.0 S .0 Strict rict//EN //EN" 2 3 "http http:// ://www. www.w3.o w3.org/TR g/TR/xht /xhtml1/D l1/DTD/x TD/xhtml1 tml1-stri trict.d ct.dtd" td"> 4 <! <!-- -- Fig. ig. 6.3: .3: welc welcome2. me2.html html -- --> 5 <! <!-- -- Print rinting o ng one l ne line w ne with ith multi ultiple ple state tatements nts. . -- --> 6 7 <html tml xmln xmlns = = "http http://ww //www.w3 w.w3.org/ org/1999 1999/xhtm xhtml" l"> <head head> 8 <tit <title> e>Prin Printin ting a g a Line Line with with Mul Multiple iple Sta Statemen ements ts</t </title itle> > 9 10 <scr <script t pt type ype = "text text/ja /javasc vascript ript"> 11 <! <!-- -- 12 docume cument.w nt.write( ite( "<h1 <h1 sty style = le = \"colo color: mage magenta nta\">" >" ); ); 13 docume cument.w nt.write( ite( "Wel Welcome come to to JavaS avaScrip cript " " + 14 "Prog Program ramming ming!</h !</h1>" >" ); ); 15 // // -- --> 16 </sc </script> ipt> 17 </hea /head>< d><body body></b ></body> dy> 18 </html html>
1.0" encodin <?xml xml vers version = on = "1.0 ncoding = g = "utf "utf-8" 8"?> ?> 1 <!DOCT DOCTYPE YPE html tml PUBL PUBLIC "-//W3 //W3C//DT //DTD XH D XHTML 1 ML 1.0 S .0 Strict rict//EN //EN" 2 "http http:// ://www. www.w3.o w3.org/TR g/TR/xht /xhtml1/D l1/DTD/x TD/xhtml1 tml1-stri trict.d ct.dtd" td"> 3 4 5 <! <!-- -- Fig. ig. 6.5: .5: welc welcome4. me4.html html -- --> 6 <! <!-- -- Alert lert dial dialog d og displa splaying ying mult multiple iple line lines. . -- --> 7 <html tml xmln xmlns = = "http http://ww //www.w3 w.w3.org/ org/1999 1999/xhtm xhtml" l"> <head head> 8 <tit <title> e>Prin Printin ting Mu g Multip ltiple Li e Lines nes in a n a Dial Dialog Bo g Box</ti /title> tle> 9 10 <scr <script t pt type ype = "text text/ja /javasc vascript ript"> 11 <! <!-- -- 12 windo indow.a w.alert lert( ( "We "Welcom lcome to e to\nJav nJavaScr aScript pt\nP nProgr ogrammi amming!" ng!" ); ); 13 // // -- --> 14 </sc </script> ipt> 15 </hea /head> d> 16 <body body> 17 <p> <p>Click ick Refr Refresh ( sh (or R or Reload load) to ) to run run this this scri script a pt again. ain.</p> </p> 18 </bod /body> y> 19 </html html>
<?xml xml vers version = on = "1.0 1.0" encodin ncoding = g = "utf "utf-8" 8"?> ?> 1 <!DOCT DOCTYPE YPE html tml PUBL PUBLIC "-//W3 //W3C//DT //DTD XH D XHTML 1 ML 1.0 S .0 Strict rict//EN //EN" 2 3 "http http:// ://www. www.w3.o w3.org/TR g/TR/xht /xhtml1/D l1/DTD/x TD/xhtml1 tml1-stri trict.d ct.dtd" td"> 4 <!-- <! -- Fig. ig. 6.7: .7: welc welcome5. me5.html html -- --> 5 <!-- <! -- Promp rompt box box use used on on a we a welcome come scr screen. en. --> 6 <html tml xmln xmlns = = "http http://ww //www.w3 w.w3.org/ org/1999 1999/xhtm xhtml" l"> 7 8 <head head> > 9 <tit <title> e>Usin Using P g Promp rompt an t and Ale Alert B rt Boxes xes</tit /title> e> 10 <scr <script t pt type ype = "text text/ja /javasc vascript ript"> 11 <! <!-- -- 12 var var name name; ; // st / string ring ente entered red by th y the us e user 13 14 // rea read th d the nam name fr e from th m the pr e prompt mpt box box as a s a stri string 15 name = me = win window.p ow.promp rompt( ( "Ple "Please ase ent enter y er your n ur name" ame" ); ); 16 17 docume cument.w nt.writel iteln( n( "<h1>H h1>Hello ello, " " + nam name + + 18 ", we , welco lcome t me to Ja o JavaScr aScript ipt progr rogrammi amming!</ g!</h1>" h1>" ); ); 19 // // -- --> 20 </sc </script> ipt> 21 </hea /head> d> 22 <body body> > 23 <p> <p>Click ick Refr Refresh ( sh (or R or Reload load) to ) to run run this this scri script a pt again. ain.</p> </p> 24 </bod /body> y> 25 </html html>
Keywords are words with special meaning in JavaScript. The keyword var is used to declare the names of variables. A variable name can be any valid identifier consisting of letters, digits, underscores ( _ ) and dollar signs ( $ ) that does not begin with a digit and is not a reserved JavaScript keyword.
Recommend
More recommend
