2440: 211 Interactive Web Programming JavaScript Fundamentals

2 Programming Language Elements  Key words (reserved words) – words with a special meaning in the programming language  Operators – symbols or words that perform operations on one or more operands  Punctuation – serve specific purposes like marking the beginning and ending of a statement  Programmer-defined names – words or names defined by the programmer  Syntax – rules that dictate how keywords and operators may be used and where punctuation symbols must appear

JavaScript Fundamentals3 Methods of Programming  Two primary methods of programming are:  Procedural – creates programs made up of variables and procedures  Variable – named storage location in a computer’s memory  Procedure – set of programming language statements that perform a specific task  Object-oriented – creates programs made up of objects (instances of a class)  Object – a software entity with attributes (fields) and methods (procedures associated with an object)  Class – specifies the attributes and methods of objects

JavaScript Fundamentals4 Basic JavaScript Tips  All JavaScript programs must be stored in  A Web page’s or element or  A separate file with a.js extension  Comments are ignored by the compiler  JavaScript is case-sensitive  For every opening brace, there must be a corresponding closing brace  JavaScript statements are terminated with semicolons (;), except comments, method headers, or braces  Only when you want to separate statements that are placed on a single line  But it is good practice to end all statements with semicolons

JavaScript Fundamentals5 JavaScript Programs  Run from a Web page as scripts  Can either be:  Placed in a Web page’s or element  Using the element with a type attribute to indicate the scripting language of choice  E.g. JavaScript commands </script>  The language attribute (deprecated) can also be used for HTML documents  E.g. JavaScript commands </script>  Saved in an external text file with a (.js) file extension  Saved JavaScript file is accessed using the element  E.g.

JavaScript Fundamentals6 Comments  Non executable statements  Used to document code  The two JavaScript comments are:  Line comments  E.g. // Line comment here  Paragraph comments  E.g. /* Paragraph comments here */  Used to hide JavaScript code from browsers that do not support JavaScript code  HTML/XHTML comments may be used for this purpose  E.g. <!– Hide from non-JavaScript browsers JavaScript commands // Stop hiding from non-JavaScript browsers --> </script>

JavaScript Fundamentals7 JavaScript Statements  JavaScript is an object-based language  Uses objects by modifying their properties or applying their methods  Object – any software entity with attributes (properties) and procedures (methods)  Example of JavaScript objects include document, window, Date, Math, etc  Property (attribute) – description of an object  E.g. window.status  Procedure (method) – used to perform specific tasks on objects  E.g. document.writeln()  The period (.) is used to distinguish between an object and its properties and procedures  E.g.  document.writeln() // uses the document’s writeln() procedure  window.alert // uses the window’s status property

JavaScript Fundamentals8 Sending Output to a Web Document  The document object’s write( ) and writeln( ) methods are used to send output to a Web page  E.g. document.writeln(“JavaScript is fun…”);  Single line strings must be placed on a single line as shown above  An error is generated when a line break is found  E.g. document.writeln(“JavaScript is fun… “);  If line breaks have to be included use the following methods  Examples: document.writeln(“JavaScript is \ fun… “); document.writeln(“JavaScript is “ + “fun… “);

JavaScript Fundamentals9 Sending Output to a Web Document…  The only difference between the write() and writeln() methods is that the writeln() adds a line break after the output  The difference is only recognized in a element

JavaScript Fundamentals10 Regular Outputs on a Web page <!-- hide from non-JavaScript browsers // Javascript line comments here /* JavaScript paragraph/block comments here document.writeln("Hello..."); document.write("I love JavaScript programming..."); // Stop hiding from non-JavaScript browsers --> </script>

JavaScript Fundamentals11 Outputs within Element <pre> <!-- hide from non-JavaScript browsers // Javascript line comments here /* JavaScript paragraph/block comments here document.writeln("Hello..."); document.write("I love JavaScript programming..."); // Stop hiding from non-JavaScript browsers --> </script></pre>

JavaScript Fundamentals12 Debugging  The process of removing errors in a program  Bug – an error in a program  Types of errors include:  Syntax errors – violates rules of the programming language  Logical errors – cause programs to produce wrong results  Common syntax errors include:  Missing quotes  Mismatched quotes  Mismatched parenthesis or braces  Misspelled user-defined names  Missing punctuations