120 likes | 261 Views
2440: 211 Interactive Web Programming. JavaScript Fundamentals. 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
E N D
2440: 211 Interactive Web Programming JavaScript Fundamentals
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 Fundamentals
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 Fundamentals
Basic JavaScript Tips • All JavaScript programs must be stored in • A Web page’s <head> or <body> 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 Fundamentals
JavaScript Programs • Run from a Web page as scripts • Can either be: • Placed in a Web page’s <head> or <body> element • Using the <script> element with a type attribute to indicate the scripting language of choice • E.g. <script type=“text/javascript”> JavaScript commands </script> • The language attribute (deprecated) can also be used for HTML documents • E.g. <script language=“JavaScript”> JavaScript commands </script> • Saved in an external text file with a (.js) file extension • Saved JavaScript file is accessed using the <script> element • E.g. <script type=“text/javascript” src=“javascriptfile.js”> JavaScript Fundamentals
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. <script type=“text/javascript”> <!– Hide from non-JavaScript browsers JavaScript commands // Stop hiding from non-JavaScript browsers --> </script> JavaScript Fundamentals
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 Fundamentals
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 Fundamentals
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 <pre> element JavaScript Fundamentals
Regular Outputs on a Web page JavaScript Fundamentals
Outputs within <pre> Element JavaScript Fundamentals
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 JavaScript Fundamentals