Javascript It’s not JAVA

What do these all have in common?

Take a deep breath … Enjoy the ride Learned? Sysadmin? html? CSS? Learned how to learn? Now a new language … Hold your hands in the air and scream?

Javascript Program dynamic web interactions Scripting language Interpreted at runtime–by the browser Can change on the fly Resources Ch 6-11, and 13 of Deitel and Deitel Website w3schools.com

Why? html = content CSS = appearance Scripting = behavior React to events Manipulate and validate data Add dynamic functionality Read and write HTML

Depth? Issues of style This class is just syntax Teach yourself

Do and learn Open Linux/gedit or Win/Notepad++ Create a dummy header Save as “test.html” Open “test.html” in your favorite browser Refresh as necessary (Ctrl-R) Alt: Open a console in Firefox Firebug or Chrome Inspector to try out the examples as they are presented.

Examples Playing with JavaScript document.write(" " + Date() + " "); Demos available at jsDemosjsDemos

Sample Scripts are created by Certain attributes expect javascript as value Home

JavaScript embedded in html

User interaction Alerts What &nbsp Time is it? Forms Parameter Checking (though increasingly this is being pushed to HTML in HTML5)

Syntax Similar to JAVA Statements end with ; /* comment */ Object.property Escape character is \  Example: \” Etc. No variable types – just declare them like var age = 18; var introText = "A long, long time ago...";

JavaScript as embedded code Can be a lengthy program

<!-- var name; // string entered by the user // read the name from the prompt box as a string name = window.prompt( "Please enter your name", " Type name here" ); document.writeln( " Hello " + name + ", welcome to JavaScript programming! " ); // -->

JavaScript is a complete programming language Arithmetic (D&D ch 6) Decisions/Control (D&D ch7, 8, 13) Functions (D&D ch 9) Arrays, Libraries & Objects (D&D ch ) Input/Output

Mathematical Operators

Relational Operators

Language flow Selection structure if if … else switch Repetition structure while do … while for for … in

Keywords

Functions Format of a function definition function function-name ( parameter-list ) { declarations and statements return expression ; } Function name any valid identifier Parameter list names of variables that will receive arguments  Must have same number as function call  May be empty Declarations and statements  Function body (“block” of code)

Function example document.writeln( " Square the numbers from 1 to 10 " ); // square the numbers from 1 to 10 loop for ( var x = 1; x <= 10; ++x ) // loop document.writeln( "The square of " + x + " is " + square( x ) function call square( x ) + " " ); // function call // The following square function's body is executed // only when the function is explicitly called. definition function square( y ) // square function definition { return y * y; // could also use Math.pow(y, 2.0); for floats }

Software Design Issues Design before code UML etc. Style Whitespace, Indenting, Commenting etc. See D&D ch 6 for recommendations

Much, much more A complete language See refs for more Textbook, D&D ch 6-13 w3schools.coms