JAVASCRIPT IN HTML

JAVASCRIPT IN HTML Holy Name Catholic High School Mr. Penza, Instructor Adv Computer- JavaScript

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

JAVASCRIPT IN HTML