0
UNIT I –INTRODUCTIONWEB TECHNOLOGY
TOPICS- INTRODUCTION•   History of Internet•   History of World Wide Web•   HTML 4.0 Protocols•   Object based Technology•...
The Internet• The Internet is a global system of networked computers  together with their users and data
1960’s Telecommunications• Packet Switching  – data to be transmitted is divided into small packets of    information and ...
History of the Internet• Government sponsored goal – to maintain  communication via computers even with threat of war   – ...
Arpanet, 1969•   Advanced Research Projects Agency Network•   Enable sharing of supercomputer power•   4 nodes•   1971- ex...
1970s TelecommunicationsLocal Area NetworksEmail inventedUNIX developedNewsgroups emerged
1980’s Telecommunications• TCP/IP established• No longer primary research oriented   – Business applications added• Domain...
TCP/IP• TCP – transmission scheme for the internet hosts• Protocol – rules that govern how different hosts on a network  c...
1990’s Telecommunications• Many commercial interests• Advertised on TV• Ordinary people became publishers
Internet Characteristics• Structure made up of millions of interconnected computers• Users communicate and share informati...
Web ConceptsLet’s start with the user• To use the web you must have a computer or another “web-  ready” device, ex: Palm P...
Need for connecting InternetYour computer must have communications hardwarewith installed drivers (software).  Modem card,...
Web Concepts• Your computer must have Web service   – Modem and Dialup Internet Service Provider (ISP), ex: AOL   – *Digit...
WEB CONCEPTSYour computer must be logged into the Web  Dialup has dialed, connected & user has  logged in               ...
SIMPLE DSLThere are many types of network setups• 56k Modem plugged into phone line (1 computer)• AOL is a dialup service ...
USE OF CABLE AND DSL              • Cable/DSL/Satellite Modem plugged into                cable/DSL/satellite outlet .    ...
Cable/DSL/Satellite with Hub   • Cable/DSL/Satellite Modem plugged into     cable/DSL/satellite outlet   • Requires 2 or m...
Cable/DSL/Satellite with Router/Switch  • Cable/DSL/Satellite Modem and Router/ Switch plugged into    cable/satellite out...
Cable/Satellite with Wireless                   Router/Switch  • Cable/Satellite Modem and wireless Router/Switch plugged ...
Firewalls-Networks• Computer Firewalls are used to keep unwanted Internet  users from accessing your network• Once online,...
How the Web WorksOnce your computer is logged in, it is assigned an Internet Protocol (IP) address.• Most networks (and al...
How the Web Works• Every time you request information from the Internet,  your IP is sent with the request, so the Interne...
How the Web WorksSimple Example:• You wants news so you type in:  http://www.msnbc.com/news/934483.asp?vts=072920030920• M...
Protocols supporting Web TCP    handles conversion between messages and streams packets IP    handles addressing of pa...
Scripting Languages• Client side and server side scripting Languages.• Client side Scripting Client-side scripting general...
Scripting Languages• Server side Scripting Languages:• Server-side scripting is a web server technology in which a  users ...
Server side Scripting• The primary advantage to server-side scripting is the ability to  highly customize the response bas...
Server side Scripting• ASP   – Microsoft designed solution allowing various languages inside     a HTML-like outer page.  ...
Server side Scripting•   LSP Lua Server Pages, LUA_(programming_language), is a fast scripting language  suitable for CPU...
Server side Scripting• SMX   – Lisp-like open source language designed to be embedded     into an HTML page.• Server Side ...
Server side Scripting• ESP   – ESP or Escapade was written in 1997 by Ed Carp, and     enjoys wide use in Europe, but has ...
Scripting Languages• Dynamic websites are also sometimes powered by custom  web application servers, for example the Pytho...
Protocols Supporting HTML 4.0• HTTP-Hyper text transfer Protocol• SMTP-Simple Mail transfer Protocol• IMAP-Internet Messag...
Object based Technology• With this technology Properly designed software trends  more reusable in all projects.• Libraries...
Object Based Scripting Language• Since objects are reusable we can use them in scripting  language they are more productiv...
Java Script• JavaScript is THE scripting language of the  Web!• JavaScript is used in millions of Web pages to  improve th...
Java Script•   A scripting language is a lightweight programming language•   A JavaScript consists of lines of executable ...
What can a JavaScript Do?• JavaScript gives HTML designers a programming  tool• JavaScript can put dynamic text into an HT...
Inline javascript• Example 1<html><body> <scripttype="text/javascript">document.write("Hello World!");</script></body></ht...
Comment tag•     <!--document.write("Hello World!");//-->    To hide the java script code in html we can use this HTML    ...
Multi line Comments• Multi line comments is same as used in ‘C’ Language.• /* The code below will write one header and two...
Head and Body• JavaScripts in the body section will be executed WHILE the  page loads.• JavaScripts in the head section wi...
External JavaScript• Here the common.js a external notepad file the java script  block will be loaded and used in any part...
Alert and DivisionsAlert boxes are used to stop any action in the browser it waits till the user   clicks ok or cancel.<sc...
Divisions-Example We divide the page in to inner division named feed back and change the font color in the inner html<html...
Java Script Sequential code•   Each statement is executed by the browser in the sequence they are    written.•   This exam...
Variable• A variable is a "container" for information you want to  store.• We can refer to a variable by name to see its v...
Usage of Variable<html><body><script type="text/javascript">var name="Hege";Declaring variablesdocument.write(name);docume...
Usage of Variables in JS• In JS we give all the variables as Strings• To convert the string in to integer or float we  hav...
Usage of Variables in JS• parseInt(123.45) // 124• parseInt(77) // 77• parseInt(099) // 0 (9 is not an octal digit)• Strin...
Usage of Variables in JSConverting Number in to strings• a = a.toString() // This converts a to string• b = b.toString() /...
Usage of Symbols in JS                          HTML entit             encodechr   HexCode   Numeric              escape(c...
Conditional Statements• In JavaScript we have the following conditional statements:• if statement - use this statement if ...
If...Else Statements•     Conditional statements in JavaScript are used to perform different actions      based on differe...
If...else Statements  If we want to execute some code if a condition is true and   another code if the condition is not tr...
If...else StatementsUse of else if<script type="text/javascript"> var d = new Date() var time =    d.getHours()if (time<10...
Switch Statements• We can use the switch statement if you want to select one   of many blocks of code to be executed. swit...
Switch Statements<script type="text/javascript"> var d=new Date(); theDay=d.getDay(); switch (theDay){  case 5: document.w...
JavaScript Operators•   Arithmetic Operators•   Assignment Operators•   Comparison Operators•   Logical Operators•   Strin...
Functions• A function contains code that will be executed by an event  or by a call to that function.• We can call a funct...
Functions-Example<html>   <head>   <script type="text/javascript">   function displaymessage()  {   alert("Hello World!");...
Return keywordThe function below should return the product of two numbers   (a and b):product=prod(2,3);function prod(a,b)...
For Loop• loops through a block of code a specified number of times .• The for loop is used when you know in advance how m...
Example-For loop<html> <body><script type="text/javascript">var i=0;for (i=0;i<=10;i++){document.write("The number is " + ...
While and Do-While Loop•   The while loop is used when you want the loop to execute and continue    executing while the sp...
Do-while Loop•  The do...while loop is a variant of the while loop. This loop will always   execute a block of code ONCE, ...
Break and Continue Statements• JavaScript break and continue Statements• There are two special statements that can be used...
Break-Example<html> <body><script type="text/javascript"> var i=0; for (i=0;i<=10;i++){ if (i==3) {break; } document.write...
Continue-Example<html><body> <script type="text/javascript">var i=0for (i=0;i<=10;i++) {if(i==3) { continue; } document.wr...
For...In Statement• The for...in statement is used to loop (iterate) through the  elements of an array or through the prop...
For-In Statement<html> <body><script type="text/javascript">var x; var mycars = new Array();mycars[0] = "Saab"; mycars[1] ...
Java Script -Guidelines• We can break up a code line within a text string with a  backslash. The example below will be dis...
Yet to Cover•   JS Events•   JS Try Catch•   JS Throw•   JS On error•   JS Special Texts•   JS object intro•   JS String• ...
JS Events• By using JavaScript, we have the ability to create dynamic web  pages.• Events are actions that can be detected...
JS Events•   Examples of events:•   A mouse click•   A web page or an image loading•   Mousing over a hot spot on the web ...
JS Events•   Events are normally used in combination with functions, and the function will    not be executed before the e...
JS Events• onFocus, onBlur and onChange•   The onFocus, onBlur and onChange events are often used in combination    with v...
JS Events• onSubmit• The onSubmit event is used to validate form fields before  submitting it.•   The checkForm() function...
JS Events• onMouseOver and onMouseOut• onMouseOver and onMouseOut are often used to create  "animated" buttons.• Below is ...
Catch errors• When browsing Web pages on the internet, we all have seen a  JavaScript alert box telling us there is a runt...
Try...Catch Statement• The try...catch statement allows you to test a block of code for  errors. The try block contains th...
Example 1 –Without try..catch<html><head> <script type="text/javascript">function message() {addalert("Welcome guest!"); }...
Example 1 –With try...catch<html> <head> <script type="text/javascript"> var txt=“ “ function message() {try {adddlert("We...
Example 2 –With try...catch<html><head><script type="text/javascript"> var txt=""function message(){ try {adddlert("Welcom...
The Throw Statement• The throw statement allows you to create an exception.• If you use this statement together with the t...
Throw Statement-Example<script type="text/javascript"> var x=prompt("Enter a number between 0 and 10:","");try { if(x>10) ...
The onerror Event•   The on error event is fired whenever there is a script error in the page.•   To use the on error even...
EXAMPLE-ONERROR<html><head> <script type="text/javascript">on error=handleErr; var txt="";function handleErr(msg,url,l) { ...
JS SPECIAL CHARACTERS• In JavaScript you can add special characters to a text string by  using the backslash sign.•   The ...
JS OBJECTS AND METHODS• JavaScript is an Object Oriented Programming (OOP) language• Properties are the values associated ...
EXAMPLE FOR GETTING DATEMETHOD<html><body><script type="text/javascript">document.write(Date());</script></body></html>
DATEMETHOD-EXAMPLE<html><body><script type="text/javascript">var minutes = 1000*60;var hours = minutes*60;var days = hours...
DATE METHOD• Defining Dates• The Date object is used to work with dates and times.• We define a Date object with the new k...
DATE METHOD• In the example below we set a Date object to a specific date  (14th January 2010):• var myDate=new Date(); my...
DATE METHOD• Comparing Dates• The Date object is also used to compare two dates.• The following example compares todays da...
JavaScript Array Object• The Array object is used to store a set of values in a single  variable name• Defining Arrays• Th...
JavaScript Array Object• There are two ways of adding values to an array (you can add  as many values as you need to defin...
JavaScript Array Object• Accessing Arrays  You can refer to a particular element in an array by referring to  the name of ...
BOOLEAN OBJECT• The Boolean object is an object wrapper for a Boolean value.• The Boolean object is used to convert a non-...
BOOLEAN OBJECT• All the following lines of code create Boolean objects with an  initial value of false:•   var myBoolean=n...
BOOLEAN OBJECT• All the following lines of code create Boolean objects with an  initial value of true:•   var myBoolean=ne...
Math Object•   The Math object allows you to perform common mathematical tasks.•   The Math object includes several mathem...
Mathematical Methods• In addition to the mathematical values that can be accessed  from the Math object there are also sev...
What is RegExp• RegExp, is short for regular expression.• When you search in a text, you can use a pattern to describe  wh...
What is RegExp• Methods of the RegExp Object• The RegExp Object has 3 methods: test(), exec(), and compile().• test()• The...
What is RegExp• exec()• The exec() method searches a string for a specified value.  Returns the text of the found value. I...
What is RegExp• compile()• The compile() method is used to change the RegExp.• compile() can change both the search patter...
The HTML DOM• The HTML DOM defines a standard set of objects for HTML, and  a standard way to access and manipulate HTML d...
The HTML DOM• DocumentRepresents the entire HTML document and can be  used to access all elements in a page.• AnchorRepres...
JS SAMPLESMicrosoft Word   Document
Upcoming SlideShare
Loading in...5
×

Web technology

1,306

Published on

Published in: Education, Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,306
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
41
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "Web technology"

  1. 1. UNIT I –INTRODUCTIONWEB TECHNOLOGY
  2. 2. TOPICS- INTRODUCTION• History of Internet• History of World Wide Web• HTML 4.0 Protocols• Object based Technology• Java Script
  3. 3. The Internet• The Internet is a global system of networked computers together with their users and data
  4. 4. 1960’s Telecommunications• Packet Switching – data to be transmitted is divided into small packets of information and labeled to identify the sender and recipient – sent over a network and then reassembled at their destination – if any packet did not arrive or was not intact, original sender requested to resend the packet
  5. 5. History of the Internet• Government sponsored goal – to maintain communication via computers even with threat of war – no central authority – Designed to operate while system is broken
  6. 6. Arpanet, 1969• Advanced Research Projects Agency Network• Enable sharing of supercomputer power• 4 nodes• 1971- expanded to 15 nodes• 1972- expanded to 23 nodes
  7. 7. 1970s TelecommunicationsLocal Area NetworksEmail inventedUNIX developedNewsgroups emerged
  8. 8. 1980’s Telecommunications• TCP/IP established• No longer primary research oriented – Business applications added• Domain Name System developed – Assign names to host computers
  9. 9. TCP/IP• TCP – transmission scheme for the internet hosts• Protocol – rules that govern how different hosts on a network communicate and share resources• Internet protocol – addressing scheme to distinguish one computer from another
  10. 10. 1990’s Telecommunications• Many commercial interests• Advertised on TV• Ordinary people became publishers
  11. 11. Internet Characteristics• Structure made up of millions of interconnected computers• Users communicate and share information• Uses fiber optic cables, satellites, phone lines, other telecommunications media to send data back and forth
  12. 12. Web ConceptsLet’s start with the user• To use the web you must have a computer or another “web- ready” device, ex: Palm Pilot or Web phones*.
  13. 13. Need for connecting InternetYour computer must have communications hardwarewith installed drivers (software). Modem card, ex: 56k Modem Network* or NIC** card, ex: Linksys Wireless Network card
  14. 14. Web Concepts• Your computer must have Web service – Modem and Dialup Internet Service Provider (ISP), ex: AOL – *Digital Subscriber Line (DSL), offered by phone company in non-rural areas – *Internet Satellite, offered by satellite TV – *Digital Cable, offered by cable TV – *Dedicated LAN, ex: large corp. networks or US govt.
  15. 15. WEB CONCEPTSYour computer must be logged into the Web Dialup has dialed, connected & user has logged in OR DSL/Satellite/Cable modem is on and connected
  16. 16. SIMPLE DSLThere are many types of network setups• 56k Modem plugged into phone line (1 computer)• AOL is a dialup service Phone Dialup Outlet Modem Computer
  17. 17. USE OF CABLE AND DSL • Cable/DSL/Satellite Modem plugged into cable/DSL/satellite outlet . • Uses special Category 5 (Cat 5 RJ45) • Cable called patch cords Cable/ Cable/DSL/Satellite Satellite Outlet Modem Computer
  18. 18. Cable/DSL/Satellite with Hub • Cable/DSL/Satellite Modem plugged into cable/DSL/satellite outlet • Requires 2 or more Internet Protocol (IP) connections (like 2 separate phone numbers)Cable/DSL Cable/DSL Satellite Satellite Hub Outlet Modem Computer Computer
  19. 19. Cable/DSL/Satellite with Router/Switch • Cable/DSL/Satellite Modem and Router/ Switch plugged into cable/satellite outlet. • Requires only 1 Internet Protocol (IP) connectionCable/DSL Cable/DSL Satellite Router/ Satellite Computer Modem Switch Outlet Computer
  20. 20. Cable/Satellite with Wireless Router/Switch • Cable/Satellite Modem and wireless Router/Switch plugged into cable/satellite outlet • Replaces switch-to-computer cables, requires wireless network cards. Cable/ Wireless Computer Cable/Satellite Satellit Router/ Outlet e Switch Modem Computer
  21. 21. Firewalls-Networks• Computer Firewalls are used to keep unwanted Internet users from accessing your network• Once online, you are vulnerable w/o a firewall – Black Ice is an example of firewall software Firewall Cable/ Cable/ Router/ Satellit Satellite Switch e Modem & Outlet Firewall Computer
  22. 22. How the Web WorksOnce your computer is logged in, it is assigned an Internet Protocol (IP) address.• Most networks (and all dialups) issue IPs on a per-login basis, these are called Dynamic IPs• Some networks issue these permanently, these are called Fixed IPs• Your IP is a 16-digit number which is used to identify your computer to the Internet, ex: 208.127.007.123
  23. 23. How the Web Works• Every time you request information from the Internet, your IP is sent with the request, so the Internet knows where to send the information.• Every website has an IP address. The Universal Resource Location (URL) like, www.yahoo.com is translated to its IP address automatically for you. Router/switches that only need one IP address The router keeps track of the network users so they can share the IP address.
  24. 24. How the Web WorksSimple Example:• You wants news so you type in: http://www.msnbc.com/news/934483.asp?vts=072920030920• MSN-BC receives the request, looks up the article and send it back to you. http://www.msnbc.com/news/934483.asp?vts=072920030920
  25. 25. Protocols supporting Web TCP  handles conversion between messages and streams packets IP  handles addressing of packets across networks TCP/IP  enables packets to be sent across multiple networks using multiple standards Telnet  One of the earliest standards for exchanging transmission, directly connect accounts on different systems. SMTP  specifies another way of direct connection
  26. 26. Scripting Languages• Client side and server side scripting Languages.• Client side Scripting Client-side scripting generally refers to the class of computer programs on the web that are executed client-side, by the users web browser.• List of Client Scripting Java Script Jscript VB Script DHTML
  27. 27. Scripting Languages• Server side Scripting Languages:• Server-side scripting is a web server technology in which a users request is fulfilled by running a script directly on the web server .• It is usually used to provide interactive web sites that interface to databases or other data stores.• This is different from client-side scripting where scripts are run by the viewing web browser, usually in JavaScript.
  28. 28. Server side Scripting• The primary advantage to server-side scripting is the ability to highly customize the response based on the users requirements, access rights, or queries into data stores.• Perl scripts and shell scripts using the Common Gateway Interface (CGI).• Those scripts were executed by the operating system, mnemonic coding and the results simply served back by the web server
  29. 29. Server side Scripting• ASP – Microsoft designed solution allowing various languages inside a HTML-like outer page. – Primarily a Windows technology, but with limited support on other platforms.• ASP.NET – ASP.NET is a set of web application development technologies marketed by Microsoft. – Programmers can use it to build dynamic web sites, web applications and XML web services.
  30. 30. Server side Scripting• LSP Lua Server Pages, LUA_(programming_language), is a fast scripting language suitable for CPU and/or memory constrained systems. The LSP comes as a plugin to the Barracuda Embedded Web Server for small business applications. LSP applications include a Content Management System and a Bulletin Board.• PHP – Common opensource solution based on including code in its own language into an HTML page. – Personal Home Page, Hypertext Preprocessor ,Recursive name Convention• Server-side JavaScript – A language generally used on the client side but also occasionally on the server side.
  31. 31. Server side Scripting• SMX – Lisp-like open source language designed to be embedded into an HTML page.• Server Side Includes – A fairly basic system which is part of the common Apache web server, used primarily for combining documents or parts of documents on the server side into a single server response.• Ruby on Rails• ColdFusion – Cross platform tag-based commercial server side scripting system.
  32. 32. Server side Scripting• ESP – ESP or Escapade was written in 1997 by Ed Carp, and enjoys wide use in Europe, but has had limited acceptance in the US.• JSP – A Java-based system for embedding Java-related code in HTML pages.• Lasso – A Datasource neutral interpreted programming language and cross platform server.
  33. 33. Scripting Languages• Dynamic websites are also sometimes powered by custom web application servers, for example the Python "Base HTTP Server" library, although some may not consider this to be server-side scripting.• Python is a multi-paradigm programming language (primarily functional, object oriented and imperative) which has a fully dynamic type system and uses automatic memory management; it is thus similar to Perl, Ruby, Scheme, and Tcl-Tool Command Language.
  34. 34. Protocols Supporting HTML 4.0• HTTP-Hyper text transfer Protocol• SMTP-Simple Mail transfer Protocol• IMAP-Internet Message Access Protocol• POP-Post office Protocol• MIME-Multipurpose Internet Mail Extension
  35. 35. Object based Technology• With this technology Properly designed software trends more reusable in all projects.• Libraries of reusable components such as MFC--Microsoft JFC—Sun Microsystems FCL(.Net framework)
  36. 36. Object Based Scripting Language• Since objects are reusable we can use them in scripting language they are more productive• They are easily understood and easier to correct and modify.• Java Script is one of popular object based scripting language for Web.• Browser portability is elusive goal• Java script offers this portability
  37. 37. Java Script• JavaScript is THE scripting language of the Web!• JavaScript is used in millions of Web pages to improve the design,• JavaScript is to validate forms, detect browsers, create cookies, and much more.• JavaScript was designed to add interactivity to HTML pages
  38. 38. Java Script• A scripting language is a lightweight programming language• A JavaScript consists of lines of executable computer code• A JavaScript is usually embedded directly into HTML pages• JavaScript is an interpreted language (means that scripts execute without preliminary compilation)
  39. 39. What can a JavaScript Do?• JavaScript gives HTML designers a programming tool• JavaScript can put dynamic text into an HTML page• JavaScript can react to events• JavaScript can be used to detect the visitors browser• JavaScript can be used to validate data and create cookies.
  40. 40. Inline javascript• Example 1<html><body> <scripttype="text/javascript">document.write("Hello World!");</script></body></html> The browser will recognize it as a JavaScript command and execute the code line. In this case the browser will write Hello World! to the page:
  41. 41. Comment tag• <!--document.write("Hello World!");//--> To hide the java script code in html we can use this HTML comment tag. Some browsers may not support this java script, in such cases this comment tag can be used. // This is the comment tag of the java script which can nullify the effect of -- > html comment tag
  42. 42. Multi line Comments• Multi line comments is same as used in ‘C’ Language.• /* The code below will write one header and two paragraphs */• Comments can be used in End of the lines also.• <script type="text/javascript"> document.write("Hello"); // This will write "Hello" document.write("Dolly"); // This will write "Dolly" </script>
  43. 43. Head and Body• JavaScripts in the body section will be executed WHILE the page loads.• JavaScripts in the head section will be executed when CALLED.<html><head> JAVA SCRIPT </head><body> <scripttype="text/javascript">document.write("Hello World!");</script></body></html>
  44. 44. External JavaScript• Here the common.js a external notepad file the java script block will be loaded and used in any part of the browser Difference between inline java script and external is that it is a separate file. Using External js is fast and speedy process, as the external block will be in browser cache.• <script type=‘text/java script src=common.js’></script>
  45. 45. Alert and DivisionsAlert boxes are used to stop any action in the browser it waits till the user clicks ok or cancel.<script type=text/javascript>alert(“Hello World”) </script>We search a block in the given html page using java script<body><div id=feedback></div><script type=text/javascript>document.getElementById(feedback).innerHTML=Hello World!;
  46. 46. Divisions-Example We divide the page in to inner division named feed back and change the font color in the inner html<html><body><div id=feedback></div><script type=text/javascript>document.getElementById(feedback).innerHTML=<P><font color=red>Hello World!</font>;</script></body></html>
  47. 47. Java Script Sequential code• Each statement is executed by the browser in the sequence they are written.• This example will write a header and two paragraphs to a web page.The Curly braces indicates start and end of js block.<script type="text/javascript">{ document.write("<h1>This is a header</h1>"); document.write("<p>This is a paragraph</p>"); document.write("<p>This is another paragraph</p>");} </script>
  48. 48. Variable• A variable is a "container" for information you want to store.• We can refer to a variable by name to see its value or to change its value.• Rules for variable names:• Variable names are case sensitive• They must begin with a letter or the underscore character .• When you declare a variable within a function, the variable can only be accessed within that function. Which is called local variable
  49. 49. Usage of Variable<html><body><script type="text/javascript">var name="Hege";Declaring variablesdocument.write(name);document.write("<br>");name="Tove";Assigning value to variablesdocument.write(name);</script><p>The script above declares a variable,assigns a value to it, change the value,and displays the value again.</p></body></html>
  50. 50. Usage of Variables in JS• In JS we give all the variables as Strings• To convert the string in to integer or float we have to include Parse Float(String) Parse Int(String) Eg. ParseInt(‘77’) = 77 ParseInt(‘gjk0’) = NANThe reprsentation can also be given accordingly with base or radix. ParseInt(String,[,base])
  51. 51. Usage of Variables in JS• parseInt(123.45) // 124• parseInt(77) // 77• parseInt(099) // 0 (9 is not an octal digit)• String begin with 0x and –0x are hexadecimal numbers• Strings begin with 0 are octal numbers.• The arguments of Parse float or parse int will be converted in to decimal numbers.
  52. 52. Usage of Variables in JSConverting Number in to strings• a = a.toString() // This converts a to string• b = b.toString() // This converts b to string• (5.41).toString() // Result: the string 5.41• (Math.PI).toString() // Result: the string3.141592653589793
  53. 53. Usage of Symbols in JS HTML entit encodechr HexCode Numeric escape(chr) Description y URI(chr)" x22 " &quot; %22 %22 quotation mark& x26 & &amp; %26 & ampersand< x3C < &lt; %3C %3C less-than sign greater-than> x3E > &gt; %3E %3E sign non-breaking xA0   &nbsp; %A0 %C2%A0 space inverted¡ xA1 ¡ &iexcl; %A1 %C2%A1exclamation mark
  54. 54. Conditional Statements• In JavaScript we have the following conditional statements:• if statement - use this statement if you want to execute some code only if a specified condition is true• if...else statement - use this statement if you want to execute some code if the condition is true and another code if the condition is false• if...else if....else statement - use this statement if you want to select one of many blocks of code to be executed• switch statement - use this statement if you want to select one of many blocks of code to be executed
  55. 55. If...Else Statements• Conditional statements in JavaScript are used to perform different actions based on different conditions. <script type="text/javascript"> //Write a "Good morning" greeting if //the time is less than 10 var d=new Date(); var time=d.getHours(); if (time<10){ document.write("<b>Good morning</b>");}</script>
  56. 56. If...else Statements If we want to execute some code if a condition is true and another code if the condition is not true, use the if....else statement.<script type="text/javascript"> var d=new Date(); var time=d.getHours();if (time<10) { document.write("<b>Good morning</b>"); }else { document.write("Good day!"); } </script>
  57. 57. If...else StatementsUse of else if<script type="text/javascript"> var d = new Date() var time = d.getHours()if (time<10) { document.write("<b>Good morning</b>"); }else if (time>10 && time<16){document.write("<b>Good day</b>"); }else { document.write("<b>Hello World!</b>"); }</script>
  58. 58. Switch Statements• We can use the switch statement if you want to select one of many blocks of code to be executed. switch(){case 1: execute code block 1break;case 2: execute code block 2 break;default: code to be executed if n is different from case 1 and 2}
  59. 59. Switch Statements<script type="text/javascript"> var d=new Date(); theDay=d.getDay(); switch (theDay){ case 5: document.write("Finally Friday"); break; case 6: document.write("Super Saturday"); break; case 0: document.write("Sleepy Sunday"); break; default: document.write("Im looking forward to this weekend!");}</script>
  60. 60. JavaScript Operators• Arithmetic Operators• Assignment Operators• Comparison Operators• Logical Operators• String Operator• Conditional Operator
  61. 61. Functions• A function contains code that will be executed by an event or by a call to that function.• We can call a function from anywhere within the page (or even from other pages if the function is embedded in an external .js file).• Functions can be defined both in the <head> and in the <body> section of a document.• To assure that the function is read/loaded by the browser before it is called, it could be wise to put it in the <head> section.
  62. 62. Functions-Example<html> <head> <script type="text/javascript"> function displaymessage() { alert("Hello World!");}</script> </head><body> <form> <input type="button" value="Click me!"onclick="displaymessage()" ></form></body></html>
  63. 63. Return keywordThe function below should return the product of two numbers (a and b):product=prod(2,3);function prod(a,b){ x=a*b;return x; }
  64. 64. For Loop• loops through a block of code a specified number of times .• The for loop is used when you know in advance how many times the script should run.• for (var=startvalue;var<=endvalue;var=var+increment)• The increment parameter could also be negative, and the <= could be any comparing statement.
  65. 65. Example-For loop<html> <body><script type="text/javascript">var i=0;for (i=0;i<=10;i++){document.write("The number is " + i); document.write("<br />"); } </script> </body></html>
  66. 66. While and Do-While Loop• The while loop is used when you want the loop to execute and continue executing while the specified condition is true.<html><body> <script type="text/javascript"> var i=0;while (i<=10) { document.write("The number is " + i); document.write("<br />");i=i+1;} </script> </body> </html>
  67. 67. Do-while Loop• The do...while loop is a variant of the while loop. This loop will always execute a block of code ONCE, and then it will repeat the loop as long as the specified condition is true<html><body><script type="text/javascript">var i=0;do {document.write("The number is " + i);document.write("<br />"); i=i+1;}while (i<0); </script></body> </html>
  68. 68. Break and Continue Statements• JavaScript break and continue Statements• There are two special statements that can be used inside loops: break and continue.• Break• The break command will break the loop and continue executing the code that follows after the loop (if any).• Continue• The continue command will break the current loop and continue with the next value
  69. 69. Break-Example<html> <body><script type="text/javascript"> var i=0; for (i=0;i<=10;i++){ if (i==3) {break; } document.write("The number is " + i); document.write("<br />");} </script> </body> </html>
  70. 70. Continue-Example<html><body> <script type="text/javascript">var i=0for (i=0;i<=10;i++) {if(i==3) { continue; } document.write("The number is " + i);document.write("<br />"); } </script> </body> </html>
  71. 71. For...In Statement• The for...in statement is used to loop (iterate) through the elements of an array or through the properties of an object.• for (variable in object) { code to be executed }• The variable argument can be a named variable, an array element, or a property of an object.
  72. 72. For-In Statement<html> <body><script type="text/javascript">var x; var mycars = new Array();mycars[0] = "Saab"; mycars[1] = "Volvo"; mycars[2] = "BMW";for (x in mycars){ document.write(mycars[x] + "<br />"); }</script></body> </html>
  73. 73. Java Script -Guidelines• We can break up a code line within a text string with a backslash. The example below will be displayed properly: document.write("Hello World!");• Java Script is Case Sensitive myfunction() and myFunction() are not same• JavaScript ignores extra spaces. You can add white space to your script to make it more readable. name="Hege"; name = "Hege";
  74. 74. Yet to Cover• JS Events• JS Try Catch• JS Throw• JS On error• JS Special Texts• JS object intro• JS String• JS Boolean• JS array• JS math• JS Regexp• HTML Dom
  75. 75. JS Events• By using JavaScript, we have the ability to create dynamic web pages.• Events are actions that can be detected by JavaScript.• Every element on a web page has certain events which can trigger JavaScript functions.• For example, we can use the on Click event of a button element to indicate that a function will run when a user clicks on the button. We define the events in the HTML tags.
  76. 76. JS Events• Examples of events:• A mouse click• A web page or an image loading• Mousing over a hot spot on the web page• Selecting an input box in an HTML form• Submitting an HTML form• A keystroke
  77. 77. JS Events• Events are normally used in combination with functions, and the function will not be executed before the event occurs.• Onload and Onunload: The onload and onUnload events are triggered when the user enters or leaves the page. The onload event is often used to check the visitors browser type and browser version, And load the proper version of the web page based on the information. Both the onload and onUnload events are also often used to deal with cookies that should be set when a user enters or leaves a page.
  78. 78. JS Events• onFocus, onBlur and onChange• The onFocus, onBlur and onChange events are often used in combination with validation of form fields.• Below is an example of how to use the onChange event. The checkEmail() function will be called whenever the user changes the content of the field:• <input type="text" size="30" id="email" onchange="check Email()">
  79. 79. JS Events• onSubmit• The onSubmit event is used to validate form fields before submitting it.• The checkForm() function will be called when the user clicks the submit button in the form. If the field values are not accepted, the submit should be cancelled. The function checkForm() returns either true or false. If it returns true the form will be submitted, otherwise the submit will be cancelled:• <form method="post" action="xxx.htm" onsubmit="return checkForm()">
  80. 80. JS Events• onMouseOver and onMouseOut• onMouseOver and onMouseOut are often used to create "animated" buttons.• Below is an example of an onMouseOver event. An alert box appears when an onMouseOver event is detected:• <a href="http://www.w3schools.com" onmouseover="alert(An onMouseOver event);return false">• <img src="w3schools.gif" width="100" height="30"> </a>
  81. 81. Catch errors• When browsing Web pages on the internet, we all have seen a JavaScript alert box telling us there is a runtime error and asking "Do you wish to debug?". Error message like this may be useful for developers but not for users. When users see errors, they often leave the Web page.• This concept will teach you how to trap and handle JavaScript error messages, so you dont lose your audience.• There are two ways of catching errors in a Web page:• By using the try...catch statement (available in IE5+, Mozilla 1.0, and Netscape 6)• By using the onerror event. This is the old standard solution to catch errors (available since Netscape 3)
  82. 82. Try...Catch Statement• The try...catch statement allows you to test a block of code for errors. The try block contains the code to be run, and the catch block contains the code to be executed if an error occurs. Using uppercase letters will generate a JavaScript error!SyntaxTry {//Run some code here} catch(err) { //Handle errors here }Note that try...catch is written in lowercase letters. Using uppercase letters will generate a JavaScript error!}
  83. 83. Example 1 –Without try..catch<html><head> <script type="text/javascript">function message() {addalert("Welcome guest!"); }</script> </head> <body><input type="button" value="View message" onclick="message()" /> </body> </html>
  84. 84. Example 1 –With try...catch<html> <head> <script type="text/javascript"> var txt=“ “ function message() {try {adddlert("Welcome guest!"); } catch(err) {txt="There was an error on this page.nn"; txt+="Error description: " + err.description + "nn"; txt+="Click OK to continue.nn"; alert(txt); }}</script> </head> <body> <input type="button" value="View message" onclick="message()" /> </body> </html>
  85. 85. Example 2 –With try...catch<html><head><script type="text/javascript"> var txt=""function message(){ try {adddlert("Welcome guest!"); }catch(err) { txt="There was an error on this page.nn";txt+="Click OK to continue viewing this page,n"; txt+="or Cancel to return to the home page.nn"; if(!confirm(txt)) { document.location.href="http://www. yahoo.com/"; } } }</script> </head><body> <input type="button" value="View message" onclick="message()" /> </body></html>
  86. 86. The Throw Statement• The throw statement allows you to create an exception.• If you use this statement together with the try...catch statement, you can control program flow and generate accurate error messages.• Syntax• throw (exception)• The exception can be a string, integer, Boolean or an object.
  87. 87. Throw Statement-Example<script type="text/javascript"> var x=prompt("Enter a number between 0 and 10:","");try { if(x>10) throw "Err1";else if(x<0) throw "Err2“; }catch(er) { if(er=="Err1") alert("Error! The value is too high"); if(er == "Err2") alert("Error! The value is too low"); } </script> </body> </html>
  88. 88. The onerror Event• The on error event is fired whenever there is a script error in the page.• To use the on error event, you must create a function to handle the errors. Then you call the function with the on error event handler• The event handler is called with three arguments: msg (error message), url (the url of the page that caused the error) and line (the line where the error occurred).• Syntaxon error=handleErrfunction handleErr(msg,url,l){ //Handle the error here return true or false}
  89. 89. EXAMPLE-ONERROR<html><head> <script type="text/javascript">on error=handleErr; var txt="";function handleErr(msg,url,l) { txt="There was an error on this page.nn"; txt+="Error: " + msg + "n"; txt+="URL: " + url + "n"; txt+="Line: " + l + "nn"; txt+="Click OK to continue.nn"; alert(txt); return true; }function message() { addalert("Welcome guest!"); } </script> </head><body> <input type="button" value="View message" onclick="message()" /> </body></html>
  90. 90. JS SPECIAL CHARACTERS• In JavaScript you can add special characters to a text string by using the backslash sign.• The backslash () is used to insert apostrophes, new lines, quotes, and other special characters into a text string.• var txt="We are the so-called "Vikings" from the north."; document.write(txt);• In JavaScript, a string is started and stopped with either single or double quotes. This means that the string above will be chopped to: We are the so- called.
  91. 91. JS OBJECTS AND METHODS• JavaScript is an Object Oriented Programming (OOP) language• Properties are the values associated with an object.<script type="text/javascript">var txt="Hello World!"; document.write(txt.length);</script>• Methods are the actions that can be performed on objects.• In the following example we are using the to Uppercase() method of the String object to display a text in uppercase letters :<script type="text/javascript">var str="Hello world!"; document.write(str.toUpperCase());</script>
  92. 92. EXAMPLE FOR GETTING DATEMETHOD<html><body><script type="text/javascript">document.write(Date());</script></body></html>
  93. 93. DATEMETHOD-EXAMPLE<html><body><script type="text/javascript">var minutes = 1000*60;var hours = minutes*60;var days = hours*24;var years = days*365;var d = new Date();var t = d.getTime();var y = t/years;document.write("Its been: " + y + " years since 1970/01/01!");</script></body></html>
  94. 94. DATE METHOD• Defining Dates• The Date object is used to work with dates and times.• We define a Date object with the new keyword. The following code line defines a Date object called myDate:• var myDate=new Date()Note: The Date object will automatically hold the current date and time as its initial value!• Manipulate Dates• We can easily manipulate the date by using the methods available for the Date object.
  95. 95. DATE METHOD• In the example below we set a Date object to a specific date (14th January 2010):• var myDate=new Date(); myDate.setFullYear(2010,0,14);• And in the following example we set a Date object to be 5 days into the future:• var myDate=new Date(); myDate.setDate(myDate.getDate()+5)• ;Note: If adding five days to a date shifts the month or year, the changes are handled automatically by the Date object itself!
  96. 96. DATE METHOD• Comparing Dates• The Date object is also used to compare two dates.• The following example compares todays date with the 14th January 2010:var myDate=new Date(); myDate.setFullYear(2010,0,14);var today = new Date();if (myDate>today) { alert("Today is before 14th January 2010");} else { alert("Today is after 14th January 2010"); }
  97. 97. JavaScript Array Object• The Array object is used to store a set of values in a single variable name• Defining Arrays• The Array object is used to store a set of values in a single variable name.• We define an Array object with the new keyword. The following code line defines an Array object called myArray:• var myArray=new Array()
  98. 98. JavaScript Array Object• There are two ways of adding values to an array (you can add as many values as you need to define as many variables you require).• var mycars=new Array(); mycars[0]="Saab"; mycars[1]="Volvo"; mycars[2]="BMW";You could also pass an integer argument to control the arrays size:• var mycars=new Array(3); mycars[0]="Saab"; mycars[1]="Volvo"; mycars[2]="BMW";2:• var mycars=new Array("Saab","Volvo","BMW");
  99. 99. JavaScript Array Object• Accessing Arrays You can refer to a particular element in an array by referring to the name of the array and the index number. The index number starts at 0.• The following code line:• document.write(mycars[0]); :Modify Values in Existing Arrays• To modify a value in an existing array, just add a new value to the array with a specified index number:• mycars[0]="Opel";Now, the following code line:• document.write(mycars[0]);
  100. 100. BOOLEAN OBJECT• The Boolean object is an object wrapper for a Boolean value.• The Boolean object is used to convert a non-Boolean value to a Boolean value (true or false).• We define a Boolean object with the new keyword. The following code line defines a Boolean object called my Boolean:• var myBoolean=new Boolean();
  101. 101. BOOLEAN OBJECT• All the following lines of code create Boolean objects with an initial value of false:• var myBoolean=new Boolean();• var myBoolean=new Boolean(0);• var myBoolean=new Boolean(null);• var myBoolean=new Boolean("");• var myBoolean=new Boolean(false);• var myBoolean=new Boolean(NaN);
  102. 102. BOOLEAN OBJECT• All the following lines of code create Boolean objects with an initial value of true:• var myBoolean=new Boolean(true);• var myBoolean=new Boolean("true");• var myBoolean=new Boolean("false");• var myBoolean=new Boolean("Richard");
  103. 103. Math Object• The Math object allows you to perform common mathematical tasks.• The Math object includes several mathematical values and functions. You do not need to define the Math object before using it.• Mathematical Values• Math.E• Math.PI• Math.SQRT2• Math.SQRT1_2• Math.LN2 Math.LN10• Math.LOG2E Math.LOG10E
  104. 104. Mathematical Methods• In addition to the mathematical values that can be accessed from the Math object there are also several functions (methods) available.• document.write(Math.round(4.7));• document.write(Math.random());• document.write(Math.floor(Math.random()*11));
  105. 105. What is RegExp• RegExp, is short for regular expression.• When you search in a text, you can use a pattern to describe what you are searching for. RegExp IS this pattern.• Defining RegExp• The RegExp object is used to store the search pattern .• var patt1=new RegExp("e");• The following code line defines a RegExp object called patt1 with the pattern "e":
  106. 106. What is RegExp• Methods of the RegExp Object• The RegExp Object has 3 methods: test(), exec(), and compile().• test()• The test() method searches a string for a specified value. Returns true or false• var patt1=new RegExp("e");document.write(patt1.test("The best things in life are free"));
  107. 107. What is RegExp• exec()• The exec() method searches a string for a specified value. Returns the text of the found value. If no match is found, it returns null• var patt1=new RegExp("e");document.write(patt1.exec("The best things in life are free"));• var patt1=new RegExp("e","g"); do { result=patt1.exec("The best things in life are free"); document.write(result); } while (result!=null)
  108. 108. What is RegExp• compile()• The compile() method is used to change the RegExp.• compile() can change both the search pattern, and add or remove the second parameter.• var patt1=new RegExp("e");document.write(patt1.test("The best things in life are free"));patt1.compile("d");document.write(patt1.test("The best things in life are free"));
  109. 109. The HTML DOM• The HTML DOM defines a standard set of objects for HTML, and a standard way to access and manipulate HTML documents.• All HTML elements, along with their containing text and attributes, can be accessed through the DOM.• The contents can be modified or deleted, and new elements can be created.• The HTML DOM is platform and language independent• It can be used by any programming language like Java, JavaScript, and VBScript.
  110. 110. The HTML DOM• DocumentRepresents the entire HTML document and can be used to access all elements in a page.• AnchorRepresents an <a> element.• AreaRepresents an <area> element inside an image-map• BaseRepresents a <base> element• BodyRepresents the <body> element• ButtonRepresents a <button> element
  111. 111. JS SAMPLESMicrosoft Word Document
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×