1 / 44

JAVASCRIPT PROGRAMMING LANGUAGE

JAVASCRIPT PROGRAMMING LANGUAGE. Introduction.

bela
Download Presentation

JAVASCRIPT PROGRAMMING LANGUAGE

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 PROGRAMMING LANGUAGE

  2. Introduction JavaScript is a scripting language. The term scripting language refers to programming languages that are executed by an interpreter from within a Web browser. An interpreter translates programming code into an executable format each time the program is run – one line at a time. Programs written in scripting languages, such as JavaScript, are interpreted when a scripting engine loads an HTML page.

  3. Introduction (Continued) The JavaScript language was first introduced in Navigator and was originally called LiveScript. With the release of Navigator 2.0, the name was changed to JavaScript 1.0. Subsequently, Microsoft released its own version of JavaScript in Internet Explorer 4.0 and named it Jscript.

  4. JavaScript’s Role on the Web JavaScript brings HTML to life and makes Web pages dynamic. Instead of HTML documents being static, JavaScript can turn them into applications, such as games or order forms. You can use JavaScript to change the contents of a Web page after it has been rendered by a browser, to interact with a user through forms and controls, to create visual effects such as animation, and to control the web browser window itself. None of these things was possible before the creation of JavaScript.

  5. JavaScript’s Role on the Web JavaScript is available in two formats: Client-side JavaScript and Server-side JavaScript. The standardized client-side JavaScript is the format available to HTML pages displayed in Web browsers (the client). JavaScript version 1.2 in Navigator 4.0 and ECMScript are client-side versions of JavaScript. Server-side JavaScript is used with Web servers to access file systems, communicate with other applications, access databases, and perform other tasks.

  6. Script Beginning JavaScript Programs run from within an HTML document. The statements that make up a JavaScript program in an HTML document are contained between the <SCRIPT> ….. </SCRIPT> tag pairs. The <SCRIPT> tag is used to notify the Web Browser that the commands that follow it need to be interpreted by a scripting engine. The LANGUAGE attribute of the <SCRIPT> tag tells the browser which scripting language and which version of the scripting language is being used. <SCRIPT LANGUAGE=“JAVASCRIPT”> JAVASCRIPT STATEMENTS; </SCRIPT>

  7. First JavaScript Program <PRE> <Script Language=“JavaScript1.4” Document.writeln(“Hello World”>; //Print on the screen Document.write(“This line is printed below the ‘Hello World’ line.”); </Script> </PRE> [Note: The write() and writeln() methos of the document object require a text string as an argument.]

  8. Structure of JavaScript Programming <HTML> <HEAD> <TITILE> … </TITLE> <Script Language=“JavaScript”> Define any function </Script> <BODY> <Script Language=“JavaScript”> Use defined function </script> </HEAD> </HTML> Should be : “javascript” OR JavaScript

  9. Internal and External Source for print <HTML> <HEAD> <TITLE> Multiple JavaScript Calls </Title> </Head/> <Body> <Script Language="JavaScript" SRC="source.js"> </Script> <pre> <script language="JavaScript"> document.writeln("This line was created with embedded JavaScript code."); document.writeln("This line was also created with embedded JavaScript code."); </Script> </pre> </body> <HTML> document.write("this line was printed from the JavaScript spurce file.") Save the file asJavaScriptsource.js

  10. Adding Comments to a JavaScript Program <Script Language=“JavaScript1.2”> /* This line is part of the block comment. This line is also part of the block comment */ Document.writeln(“somments Example”); //Line comments con follow code statements //This line comment takes up an entire line. /*This is another way of creating a block comment.*/ </Script>

  11. Hiding JavaScript from Incompatible Browsers <HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY> This line is rendered normally since it is located before the opening comment tag. <BR> <!- - text on this line is not displayed Text on this line is not displayed This line is not displayed either --> This line is rendered normally since it is located after the closing comment tag. <BR> </BODY> </HTML>

  12. <HTML> <HEAD> <TITLE> Multiple JavaScript Calls </Title> <Script Language="JavaScript" <!– Begin Hiding JavaScript  mylink= "C:\Documents and Settings\Administrator\Desktop\1.html" </Script> <Body> <a href= "&{mylink};"> click here </A> </body> <HTML>

  13. Variables, Functions, Objects, and Events

  14. Variable One of the most important aspects of programming is the ability to store and manipulate values in computer memory location. The values stored in computer memory locations are called variables. In JavaScript, you use the reserved keyword Var to create variable. Reserved word, or keywords, are part of the JavaScript language syntax. Reserved words cannot be used for variable names. Abstract Char Do Finally Boolean Class Double Float Break Const Else For Byte Continue Extends Function Case Default False Goto Catch Delete Final If Implements New Static True Import Null Super Try Import Null Super Try In Package Switch Typeof Instanceof Public Throw While Long Return Throws With Native Short Transient

  15. The value you assign a variable can be a literal string or a numeric value. Var myvariable=“Hello”; ------- String Var myvariable=100; ------------ numeric You can declare multiple variables in the same statement using a single Var keyword: Var firstvar=“text” , secondvar=100, thirdvar=2.5; Ex. Var myDog=“Golden Retriever”; Document.writeln(myDog); myDog=“Irish Setter”; document.writeln(myDog);

  16. USER INPUT <HTML> <HEAD> <SCRIPT language = JavaScript> var name = prompt("Enter your name", "Name"); </SCRIPT> </HEAD> <BODY> <SCRIPT language = "JavaScript"> document.write("<H2> Hello " + name + "</H2>"); </SCRIPT> </BODY> </HTML>

  17. To Display String and Number <HTML> <HEAD> <TITLE>Script</TITLE> <SCRIPT LANGUAGE=“JavaScript”> document.write("JavaScript") </script> </HEAD> <body> <SCRIPT LANGUAGE="JavaScript"> document.write("Hello everybody") document.write(1000) </Script> </BODY> </HTML>

  18. Simple Convert on Hexadecimal Value <HTML> <HEAD> <TITLE>Integer</TITLE> Integral Value with String </HEAD> <body> <SCRIPT LANGUAGE="JavaScript"> document.write(00123 + "<br>") document.write(2*125 + "<br>" + 123 + "Aptech") </Script> </BODY> </HTML>

  19. Hexadecimal to Binary <HTML> <HEAD> <TITLE>Hexadecimal Code</TITLE> This Hexadecimal Code convert to Binary. </HEAD> <body> <SCRIPT LANGUAGE="JavaScript"> document.write("<br>" + "<Font color=red face=Arial size=5>") document.write("Notebook" + 10e5) document.write("<center>" + "Good Morning" + "</center>" + 10e-5) </Script> </BODY> </HTML>

  20. Print Number <html> <head> <title> Print Numbers </Title> </head> <body> <pre> <Script Language="JavaScript"> var integervar = 150; var floatingpointvar = 3.0e7; document.writeln(integervar); document.writeln(floatingpointvar); </script> </pre> </body> </html>

  21. Variable Calculation <HTML> <HEAD> Variable </HEAD> <title> Variable </title> <BODY bgcolor="Red"> <Script Language="JavaScript"> var a = "Ram has scored"; var b = 100; var c = "in Final"; var d = a+b+c; var e = 100; document.writeln("<font color=Blue face=Arial size=4>"); document.writeln("<br>" + a + b ); document.writeln("<br>" + d + "<br>" + "<hr>"); document.writeln("Total" + c + "is" + b + e + "</font>"); </script> </body> </HTML>

  22. Variable Calculation <HTML> <HEAD> Variable calculation</HEAD> <title> Variable </title> <BODY bgcolor=wheat> <Script Language="JavaScript"> var a = 100; var b = -109; var c = 15; var d = a*c; var e = a/c;

  23. document.writeln("<hr color=Blue size=5>" + "<Font color=Blue size=4>"); document.writeln("a+b" + "=" + (a+b)); document.writeln("<br>" + "a-b" + "=" + (a-b)); document.writeln("<br>" + "(a+b-e)" + "=" + (a+b-e)); document.writeln("<br>" + "(a*b-d)" + "=" + (a*b-d)); document.writeln("<br>" + "(a/b*c)" + "=" + (a/b*c)); document.writeln("</font>"); </script> </body> </HTML>

  24. Variable Calculation <script language="javascript"> var name="anil"; var salary=900; var da=90; var hra=90; var totalsalary=salary+da+hra; document.write("<font size=7 color=red><b><i>"+"name is" +name+"<br>"); document.write("<font size=7 color=red><b><i>"+"da is"+da +"<br>"); document.write("<font size=7 color=red><b><i>"+"hra is" +hra+"<br>"); document.write("<font size=7 color=red><b><i>"+"total salary is" + totalsalary+"<br>"); </script>

  25. Define Global Variable <HTML> <HEAD> <title> Variable scope </title> <Script Language="JavaScript"> var First_Global_Variable = "First Global Variable"; function Scope_Example() { Second_Global_Variable = "Second Global Variable"; var Local_Variable = "Local Variable"; document.writeln(First_Global_Variable); //prints successfully document.writeln(Second_Global_Variable); //prints successfully document.writeln(Local_Variable); //prints successfully } </script>

  26. </head> <BODY bgcolor=wheat> <pre> <Script Language="JavaScript"> Scope_Example(); document.writeln(First_Global_Variable); //prints successfully document.writeln(Second_Global_Variable); //prints successfully document.writeln(Local_Variable); //error message </script> </pre> </body> </HTML>

  27. Table Inside Function <script language="javascript"> document.write("<table border=5>"); document.write("<tr><td>name</td>"); document.write("<td>ram</td>"); document.write("<tr><td>address</td>"); document.write("<td>bkt</td>"); document.write("<tr><td>phone</td>"); document.write("<td>610521</td>"); </script>

  28. Defining Functions: • Individual statements used in a computer program are often grouped into logical units called procedures. In JavaScript programming, procedures are called functions. • The lines that compose a function within an HTML document are called the function definition. The syntax for defining a function is: • Function name_of_function (parameters) { • Statements; • } • A function definition consists of three parts: • The reserved word function followed by the function name. The reserved word function notified the JavaScript interpreter that the code that follows is a function. As with variables, the name you assign to a function is called an identifier. The same rules and conventions that apply to variable names apply to function names. • Any parameters required by the function, contained within parentheses following the function name. • The function’s statements, enclosed in curly braces{ }

  29. Function that prints the name of multiple companies Function print_company_name(company1, company2, company3) { document.writeln(company1); document.writeln(company2); document.writeln(company3); }

  30. To create a JavaScript Program that Print Company Name: <HTML> <HEAD> <TITLE> Two Functions Program </TITLE> <Script Language=“JavaScript” <!- - Hide from incompatible Browsers Function print_conpany_name(company_name) { document.writeln(company_name); } //Stop Hiding from Incompatible Browsers - -> </Script>

  31. Typeof Function <HTML> <HEAD> type of function (to define character or number </HEAD> <Title>typeof()</title> <BODY bgcolor="Red"> <pre> <Script Language="JavaScript"> var a = 150; var b = "MOTHER"; document.writeln("Type of a is" + typeof(a)); document.writeln("<br>" + typeof(a)); document.writeln("<br>" + "type of b is" + b + typeof(b)); </script> </pre> </body> </HTML>

  32. </HEAD> <BODY> <Script Language=“Java Script1.3”> <!– Hide from incompatible browsers Print_ company_name(“my company”); //Stop Hiding from incompatible browsers - -> </script> </BODY> </HTML>

  33. To Create a JavaScript Program that contains two functions: <HTML> <HEAD> <TITLE> Two Function Program</TITLE> <SCRIPT LANGUAGE=“JAVASCRIPT1.2”> <!- - Hide from incompatible browsers Function print_message(first_message) { document.writeln(first_message); } Function return_message(second_message) { return “This message was returned from a function”; } //Stop Hiding from Incompatible Browsers - -> </Script>

  34. </HEAD> <BODY> <PRE> <Script Language=“Java Script1.2”> <!– Hide from incompatible browsers Print_ message(“’This text was printed from a function”); var return_value = return_message(); document.writeln(return_value); //Stop Hiding from incompatible browsers - -> </script> </pre> </BODY> </HTML>

  35. USING EVENTS One of the primary ways in which JavaScript makes HTML documents dynamic is through events. You can use JavaScript events to add interactivity between your Web pages and users. An event is specific circumstance that is monitored by JavaScript. The most common events are actions that users take. EVENT Triggered when About The loadihng of an image is interrupted Blur An elemet, such as a radio button, because inactive Click An element is clicked onces Change The calue of an element changes Error There is an erroe when loading a document or image

  36. Focus An element because active Load A socument or image loads MouseOut The mouse moves off an element MouseOver The mouse moves an element Reset A form resets Select A user selects a field in a form Submit A user submits a form Unload A document unloads

  37. HTML Tags and Events Element Description Events <A> … </A> Link Click MouseOver MouseOut <IMG> Image About Error Load <AREA> area MouseOver MouseOut <Body> … </Body> Document body Blur Error

  38. Focus Load Unload <FRAMESET> … </FRAMESET> Frame set Blur Error Focus Load Unload <FRAME> … </FRAME> Frame Blur Focus <FORM> … </FORM> Form Submit Reset <INPUT TYPE=“Text”> Text Field Blur Focus change

  39. Select <TEXTAREA> … </TEXTAREA> Text area Blur focus change select <INPUT TYPE =“SUBMIT”> Submit Click <INPUT TYPE=“RESET”> Reset Click <INPUT TYPE=”Radio”> Radio Click <INPUT TYPE=“CHECKBOX”> Checkbox Click <SELECT> … </SELECT> Selection Blur Focus Change

  40. <HTML> <HEAD> <TITLE>Viewing the array elements of a JavaScript Array</TITLE> </HEAD> <BODY> <SCRIPT language = "JavaScript"> <!-- Begin Hiding JavaScript friends = new Array(5); friends[0] = "Ananth"; friends[1] = "Cedric"; friends[2] = "Ketan"; document.write(friends[0]+"<BR>"); document.write(friends[1]+"<BR>"); document.write(friends[2]+"<BR>"); join_crit = friends.join(); document.write(join_crit); // End hiding JavaScript --> </SCRIPT> </BODY> </HTML>

  41. <HTML> <HEAD> <TITLE>Creating and Using User Defined Functions</TITLE> <SCRIPT LANGUAGE="JavaScript"> var name = ""; function hello( ) { name = prompt('Enter Your Name:','Name'); alert('Greetings ' + name + ', Welcome to my page!'); } function goodbye( ) { alert('Goodbye ' + name + ', Sorry to see you go!'); } </SCRIPT> </HEAD> <BODY onLoad="hello( );" onUnload="goodbye( );"> <IMG SRC="Images\Pinkwhit.gif "> </BODY> </HTML>

  42. <HTML> <HEAD> <TITLE>Outputting Text </TITLE> </HEAD> <BODY> <CENTER><BR><BR> <IMG SRC = "Images/sctfamil.gif" Width = 100 Height = 100> Silicon Chip Technologies.<BR> <SCRIPT Language = "Javascript"> document.write("<BR><BR>"); document.write('<IMG SRC = "Images/sctfamil.gif" Width = 100 Height = 100>'); document.write("<B>Silicon Chip Technologies.</B> <BR>") </SCRIPT> </CENTER> </BODY> </HTML>

  43. <HTML> <HEAD> <TITLE>EXAMPLE</TITLE> </HEAD> <BODY> <SCRIPT Language = "Javascript"> alert("Welcome To My Web Site!"); document.write('<IMG SRC = "Images/welcome.gif">'); </SCRIPT> </BODY> </HTML>

  44. <HTML> <HEAD> <TITLE>Example 2.6 </TITLE> </HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript"> document. write('<IMG SRC="Images/welcome.gif">'); document. write("<H1>Greetings,"); document.write(prompt("Enter Your Name:","Name")); document.write(".Welcome to My HomePage!</H1>"); </SCRIPT> </BODY> </HTML>

More Related