1 / 83

Indulekha Nadikuppam csi 668

JavaScript. Indulekha Nadikuppam csi 668. What is JavaScript?. JavaScript is a programming language that is used to add interactivity to Web Pages. Netscape invented JavaScript as a way to control the browser and add flash and interactivity to Web pages.

roz
Download Presentation

Indulekha Nadikuppam csi 668

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. JavaScript Indulekha Nadikuppam csi 668

  2. What is JavaScript? • JavaScript is a programming language that is used to add interactivity to Web Pages. • Netscape invented JavaScript as a way to control the browser and add flash and interactivity to Web pages. • JavaScript is often referred to as “scripting language”. • A scripting language is a light weight programming language, which is easy and fast to learn.

  3. What is JavaScript? • JavaScript is an interpreted language means it is not compiled. It is interpreted during run-time. • JavaScript is a client side language and it runs on client web browser. • JavaScript can be also used on the server-side.

  4. What is JavaScript? • A JavaScript is a program that is embedded directly into HTML pages • Because it is enclosed in the <SCRIPT> tag, the text of the script doesn’t appear on the user’s screen, and the web browser knows to run the JavaScript program. • You can validate text fields, disable buttons, validate forms, or change the background color of your page.

  5. What JavaScript Can Do? • JavaScript creates an active user interface, giving the users feedback as they navigate web pages. • For example, websites have buttons that highlight as mouse pointer moves over them. That’s done using JavaScript, using a technique called rollover. • JavaScript is used in Web pages to ensure that the user entered valid information in forms which can save business times and money. • If a web form requires calculations, JavaScript can do them on the user’s machine without needing to use a complex server CGI.

  6. JavaScript is Object-Based • JavaScript is not a full-blown Object-Oriented language • An object-based language is an object-oriented language with a collection of objects built right into the language • For example, we don’t have to build a “date” object in JavaScript because there is already one to use

  7. Object-Oriented Nature of HTML • JavaScript considers HTML an object-oriented language, where the various HTML tags correspond to different types of JavaScript objects <html> <head> <title>This is a title</title> </head> <body> <a href = “http://www.myhome.com”> My Home</a> <form> <input type = “button” name = *Button1*> </form> </body> <html>

  8. Object-Oriented Nature of HTML • JavaScript objects for the html page are: • Document. title = “This is a title”(from the <title> tag) • Document. form (the form on the page) • Document.form.Button1(the button on the form) • Every HTML element can be used as an object

  9. What JavaScript Can Do? • JavaScript controls the browser, so you can open up new windows, display alert boxes, and put custom messages in the status bar of the browser window • JavaScript has a set of date and time features, to generate clocks, calendars, and timestamp documents • Thus JavaScript provides site’s users with a better, more exciting experience

  10. JavaScript Is Event-Driven • Whenever something happens on a Web page, an event occurs. • Events can be just about anything- a button is clicked, the mouse is dragged, a page is loaded, a form is submitted, and so on. • JavaScript is event-driven in that it’s designed to react when an event occurs. How it reacts depends upon the program • JavaScript has 9 event handlers to interface script with system activities and user responses and actions • These 9 event handlers can be classified into 2 categories System events Mouse events

  11. System Events • System events don’t require user interaction in order to be activated • For example, you can signal that a page has finished loading, that a page is about to be unloaded, or that a period of time has elapsed. 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 visitor's 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. For example, you could have a popup asking for the user's name upon his first arrival to your page. The name is then stored in a cookie. Next time the visitor arrives at your page, you could have another popup saying something like: "Welcome John Doe!".

  12. Mouse Events • Mouse events require user interaction in order to be triggered Onclick: The most of the mouse events is the Onclick handler. This event is activated whenever you click an object that accepts such an event. Objects accepting onclick events are links, check boxes, and buttons OnFocus: Focus occurs when an object becomes the item in focus. This happens when the user clicks or tabs to the particular object, that object has the focus onMouseOver and onMouseOut: onMouseOver and onMouseOut are often used to create "animated" buttons. Ex:- <a href="http://www.w3schools.com" onmouseover="alert('An onMouseOver event');return false"> <img src="w3schools.gif" width="100" height="30"> </a>

  13. JavaScript Is Secure • JavaScript is designed to manipulate and present information through the browser, but it can’t retrieve information from another file or to save data to the Web server or the user’s computer. • It’s not possible to write a JavaScript program that would scan a computer’s directories and retrieve a user’s files

  14. JavaScript is Platform-Independent • JavaScript isn’t bound to a particular computer. • It is just bound to the browser that interprets it • JavaScript can run on Macintosh, Windows, or Unix copy of Netscape navigator

  15. Are Java and JavaScript the same? • Despite the name, JavaScript and Java have almost nothing to do with one another • Java and JavaScript are two completely different languages in both concept and design • Java is a full-featured object-oriented programming language, much more complex than JavaScript

  16. JavaScript isn’t Java • Java is compiled to byte codes on the server and the result is send to the client. JavaScript is interpreted on the client side. It doesn’t require any compilation. • JavaScript is embedded within an HTML document as plain text. Java applets are referenced from a document, but the code is kept in a separate file in binary form • JavaScript uses dynamic binding, which means that object references are checked at runtime. Java, on the other hand, uses static binding, in which object references must exist when the program is compiled

  17. JavaScript isn’t Java • JavaScript is identified within a document by the <SCRIPT> tag. Java applets are embedded in a document using the <APPLET> tag • JavaScript uses loose typing, meaning the variables don’t have to be declared, and the variable that was used as a string could be used as a number later. Java uses strong typing, which means the variables must be declared and used as a particular type

  18. JavaScript Guidelines Case-Sensitive • JavaScript is a case-sensitive language Ex: - “X” and “x” are both different variables. • The same is valid for functions Ex: - If you define a function with the name “GetValues” and call it with the name “Getvalues”, then you wont see any processing. Both are different functions.

  19. JavaScript Guidelines Symbols • All opened symbols must be closed properly. If you started a string with " then you should also close it with ". Otherwise, the page wont executed correctly. Ex: - {} This is mostly used in functions or in condition statements. function x() { }

  20. JavaScript Guidelines Ex: - [] This is used in arrays. var arTest = new Array(2) arTest[0] = "string1" arTest[1] = "string2” arTest[2] = "string3” Ex:- "“ This is usually used in strings. var mystr = "this is a string." Ex:- '‘ This can be also used in strings. var mystr = 'this is a string'

  21. JavaScript Guidelines NoScript • Some users don’t allow or don’t want to run a JavaScript on the browser. • In that case you should always use the <noscript> tag to displays a message that JavaScript is either disabled or not supported by the browser

  22. JavaScript Special Characters • The backslash (\) is used to insert apostrophes, new lines, quotes, and other special characters into a text string. Suppose 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

  23. JavaScript Special Characters • To solve this problem, you must place a backslash (\) before each double quote in "Viking". This turns each double quote into a string literal: var txt="We are the so-called \"Vikings\" from the north."; document.write(txt); • JavaScript will now output the proper text string: We are the so-called "Vikings" from the north. Ex:- document.write ("You \& I are singing!");  You & I are singing!

  24. JavaScript Guidelines Values and Variables In JavaScript, a piece of information is a value Variables contain values. Way to assign value “John” to variable myName is myName = “John”. Variable names cannot contain spaces or other punctuation Value Types Type Number String Boolean Null Object Function Description Any numeric value Characters inside quote marks True or False Empty and meaningless Any value associated with the object Value returned by a function

  25. JavaScript Guidelines • As in any programming language, there is way to put comments in JavaScript also • Comments can be either created in one line with // or in multiple lines with /*…*/. Ex:- // Please comment only this line /* Everything between these     signs, will be commented out. */

  26. Where to Put Scripts • Scripts can be used in either of two places on an HTML page: between the <HEAD> and </HEAD> tags, or between the <BODY> and </BODY> tags • To insert a JavaScript into an HTML page, we use the <script> tag. • Inside the <script> tag we use the "type=" attribute to define the scripting language. • So, the <script type="text/javascript"> and </script> tells where the JavaScript starts and ends.

  27. Example <html> <head> <title> My first script </title> </head> <body> <script type="text/javascript"> document. write(“Hello, world”); </script> </body> </html>

  28. Scope • Variables can be either defined globally or locally. • If you define a variable in a function then it is a local variable. • The variable is not accessible out of the function. • As soon as the function ends the variable is destroyed. • If you define a variable outside of a function, then it is called a global variable. • This variable is available and accessible everywhere.

  29. Example <html> <head> <script type="text/javascript">             var globalVar = "This is a global variable.<br/>"             function X()             {                         var globalVar = "Is the value changed ?<br/>"                         document.write(globalVar)             }             X()             document.write(globalVar) </script> </head> <body></body> </html> Output: Is the value changed ? This is a global variable.

  30. Alerting the User • One of the main uses of JavaScript is to provide feedback to people browsing the site • Alert window can be used to pop up vitally important information To alert a user: alert(“Welcome to my JavaScript page!”)

  31. Example <html> <body> <script type="text/javascript"> alert ("Welcome to my JavaScript page!") </script> </body> </html>

  32. Confirm Box • A confirm box is often used if you want the user to verify or accept something. • When a confirm box pops up, the user will have to click either "OK" or "Cancel" to proceed. • If the user clicks "OK", the box returns true. If the user clicks "Cancel", the box returns false. Syntax: confirm("some text");

  33. Prompt Box • A prompt box is often used if you want the user to input a value before entering a page. • When a prompt box pops up, the user will have to click either "OK" or "Cancel" to proceed after entering an input value. • If the user clicks "OK" the box returns the input value. If the user clicks "Cancel" the box returns null. • Syntax: prompt("some text", "default value");

  34. Using an External JavaScript • Sometimes you might want to run the same JavaScript on several pages, without having to write the same script on every page. • To simplify this, you can write a JavaScript in an external file. Save the external JavaScript file with a .js file extension. • The external script cannot contain the <script> tag! • To use the external script, point to the .js file in the "src" attribute of the <script> tag:

  35. Example <html> <head> <script src="xxx.js"> </script> </head> <body> </body> </html>

  36. JavaScript Arrays • Arrays are variables, which can contain multiple values. • Arrays are created always with the new keyword Assigning Values • The values can be assigned in two ways. Either without defining the size and index or by defining the size and index number. Example:- var days= new Array(“Sunday”, “Monday”, “Tuesday”, “Thursday”, “Friday”, “Saturday”); Or var days = new Array(7) var days[0] = “ Sunday”

  37. JavaScript Array Object Functions The Array object contains 10 functions. • JavaScript join Function:- The join function can be used to join the content of an array to a single string, separated with a character of your choice. If you don’t specify one, it will use the comma by default. Example:- <html> <head> <script type="text/javascript">             var arJoin = new Array("11", "12", "13", "14", “15”)             document.write(arJoin.join("|")) </script> </head> <body></body> </html> Output 11|12|13|14|15

  38. JavaScript Array Object Functions 2. JavaScript concat Function:- The concat function can be used to join two arrays together to one array Example:- <html> <head> <script type="text/javascript">             var ar1 = new Array("11", "12", "13", "14", “15”)             var ar2 = new Array("16", "17", "18", "19", “20”)             document.write(ar1.concat(ar2)) </script> </head> <body></body> </html> Output 11,12,13,14,15,16,17,18,19,20

  39. JavaScript Array Object Functions 3. JavaScript pop Function:- The pop function can be used to retrieve the last element of an array Example:- <html> <head> <script type="text/javascript">             var ar1 = new Array("11", "12", "13", "14", “15”)             document.write(ar1.pop()) </script> </head> <body></body> </html> Output 15

  40. JavaScript Array Object Functions 4. JavaScript push Function:- The push function can be used to add one ore more new elements to an array Example:- <html> <head> <script type="text/javascript">             var ar1 = new Array("11", "12", "13", "14", “15”)            ar1.push("16","17")            for(var i = 0;i<ar1.length;i++)                         document.write(ar1[i]+" | ") </script> </head> <body></body> </html> Output 11 | 12 | 13 | 14 | 15 | 16 | 17 |

  41. JavaScript Array Object Functions 5. JavaScript reverse Function:- The reverse function can be used to reverse the order of the elements in an array. The first will become the last and the last will become the first. <html> <head> <script type="text/javascript">             var arRev = new Array("11", "12", "13", "14", “15”)             document.write("Before Reverse: " + arRev + "<br/>")             document.write("After Reverse: "+arRev.reverse()) </script> </head> <body></body> </html> Output Before Reverse: 11,12,13,14,15 After Reverse: 15,14,13,12,11

  42. JavaScript Array Object Functions 6. JavaScript shift Function:- The shift function can be used to remove the first element of an array. It also returns the first element. Example:- <html> <head> <script type="text/javascript">            var arShift = new Array("11", "12", "13", "14", “15”)             document.write(arShift.shift()) </script> </head> <body></body> </html> Output 11

  43. JavaScript Array Object Functions 7. JavaScript slice Function:- • The slice method can be used to create a new array from a specific range in an array. • You have to define the starting position. You can also define the end position, however if you do not specify it then it will get the array position from your starting point to the end point of the array.

  44. JavaScript Array Object Functions Example:- <html> <head> <script type="text/javascript">             var arSlice = new Array("11", "12", "13", "14", “15”)            document.write(arSlice.slice(2,4) + "<br>")             // Without defining end             document.write(arSlice.slice(2)) </script> </head> <body></body> </html> Output 13,14 13,14,15

  45. JavaScript Array Object Functions 8. JavaScript splice Function:- The splice function can be used to add or remove elements of an array. You need to specify the starting position and how many elements to remove. <html> <head> <script type="text/javascript">             var arSplice = new Array("11", "12", "13", "14", “15”)             document.write(arSplice.splice(2,3, "99") + "<br>")             // adding new elements             document.write(arSplice) </script> </head> <body></body> </html> Output 13,14 11,12,15,99

  46. JavaScript Array Object Functions 9. JavaScript sort Function:- • The sort function can be used to sort the elements in an array. • You can also create a separate compare function to use with sort. • However if you do not, then it will convert all elements to strings and sort them in dictionary order. This can cause problems when you have integers in an array and need to sort them – i.e.: 11 would come before 3.

  47. JavaScript Array Object Functions <head> <script type="text/javascript">             var arSort = new Array("11", "10", "7", "8", "9")             document.write("Normal sorting: " + arSort.sort() + "<br>")             function SortNumeric(x,y)             {                         return x-y               }             document.write("Sorting with function: " + arSort.sort(SortNumeric)) </script> </head> <body></body> </html> Output Normal sorting: 10,11,7,8,9 Sorting with function: 7,8,9,10,11

  48. JavaScript Array Object Functions 10. JavaScript unshift Function:- The unshift function can be used to add new elements at the beginning of the array. This function only works on Netscape. <html> <head> <script type="text/javascript">             var arUnshift = new Array("11", "12", "13", "14", "15")            document.write(arUnshift.unshift("8","9","10")) </script> </head> <body></body> </html> Output 8,9,10,11,12,13,14,15

  49. JavaScript Boolean Object • The Boolean object is a wrapper for the Boolean data type. • The Boolean object is used to convert a non-Boolean value to a Boolean value (true or false). • Boolean object is defined with the new keyword var myBoolean=new Boolean(); • If the Boolean object has no initial value or if it is 0, null, "", false, undefined, or NaN, the object is set to false. Otherwise it is true (even with the string "false")!

  50. JavaScript 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);

More Related