1 / 16

JAVASCRIPT IN HTML

JAVASCRIPT IN HTML. Holy Name Catholic High School Mr. Penza, Instructor. INTRODUCTION. Interpreted Language Embedded in the Web Browser Automatically read by Browser when loaded First appeared 1995, Netscape Navigator Don’t confuse with Sun Microsystems “JAVA”

xenos
Download Presentation

JAVASCRIPT IN HTML

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 IN HTML Holy Name Catholic High School Mr. Penza, Instructor Adv Computer- JavaScript

  2. INTRODUCTION • Interpreted Language • Embedded in the Web Browser • Automatically read by Browser when loaded • First appeared 1995, Netscape Navigator • Don’t confuse with Sun Microsystems “JAVA” • Used to perform dynamic visual Web Effects! Adv Computer- JavaScript

  3. Agenda • Overview. • Including JavaScript into HTML • Performing Mathematic Operations • Making Statements. • If …. Then • Loops • Using Arrays Adv Computer- JavaScript

  4. Agenda (Cont.) • Windows Pop-ups / Frames • Creating the Form • Radio buttons, Checkboxes • Send functions • Event Handling • Mouse over, click • Image Trickery/ Slide show/ Animation Adv Computer- JavaScript

  5. JavaScript in HTML-Internal • Define the Script Block in HTML code. • May be placed anywhere in the HTML code. • Usually placed between the <head></head> • Example: <script type = “text/javascript”> (javascript code) </script> Adv Computer- JavaScript

  6. JavaScript in HTML-External • Easier to maintain, accessible to multiple HTML docs • Create a separate text file with “*.js” • Example: <script type=“text/javascript” src=“xxx.js”> </script> • Then create “*.js” file to include all javascript code. Adv Computer- JavaScript

  7. FIRST JAVASCRIPT PROGRAM • Create “hello.js” with notepad. Alert( “Hello World” ); • Add script “link” to HTML <head> <title>Hello World</title> <script type= “text/javascript” src = “hello.js”> </script> </head> Adv Computer- JavaScript

  8. SYNTAX RULES • JavaScript is “CASE SENSITIVE” • Alert is not equal to ALERT • Semicolon at end of each line. ; • Spaces or “white space” is ignored . • Comment lines /* this is a comment line */ // this is also a comment line Adv Computer- JavaScript

  9. VARIABLES • Place to Store Data/ Information • Valid variables: Abc my_var var123 • Example: • Firstvar.js // create a var and assign a string to it. var message = “my first variable” // display the message alert( message ); Adv Computer- JavaScript

  10. DATA TYPES • Create “datatypes.js • Example: // initialize a number, string, boolean Var a = 0.06; Var b = “JavaScript in easy steps”; Var c = false; Alert( typeof a + “\n” + typeof b +”\n” + typeof c ); Adv Computer- JavaScript

  11. ESCAPE SEQUENCES • \b Backspace • \f Form Feed • \n New Line • \r Carriage return • \’ Single Quote • \” Double Quote • \\ Single Backslash Character • Example • Alert( “We all say \”JavaScript is great ! \” “); Adv Computer- JavaScript

  12. FUNCTIONS • Portable Code to be called once or many times. • Called from *.js or *.html • Example: // a function to display a message function call_alert( ) { Alert( “ My First JavaScript Function”); } Adv Computer- JavaScript

  13. FUNCTIONS (Cont.) • Arguments: • “ fcn-args.js “ // a function to display a passed argument function call_alert( str ) { alert( str ); } • “fcn-args.html” • <body onload = “call_alert( ‘passed value ‘ )”> Adv Computer- JavaScript

  14. MULTI-FUNCTION “MULTI.FS” // Function to call a 2nd function, display result. function call_alert( num ) { var new_num = make_double( num ); alert ( “The Value Is “ + new_num ); } // function 2 Function make_double( num ) { var double_num = num + num; return double_num; } HTML CALL <body onload = “call_alert( 4 )”> Adv Computer- JavaScript

  15. MULTI FUNCTION (SCOPE.JS) // Create a global variable var stored_num; // Call a second function function call_alert( num ) { stored_num = num; make_triple(); alert( “The Value Is “ + stored_num ); // Function to Triple the var function make_triple( ) { stored_num = stored_num + stored_num +stored_num; } HTML call <body onload = “call_alert( 5 )”> Adv Computer- JavaScript

  16. Multiple Arguments “multa.js” // Create three variables var a, b, c; // a function to display 3 arguments function call_alert( str1, str2, str3 ) { a = str1; b = str2; c = str3; alert( a + b + c ); } HTML call <body onload = “call_alert(‘Great’,’ ‘,’JavaScript’)”> Adv Computer- JavaScript

More Related