Tutorial 7 debugging javascript section a basic debugging techniques
Advertisement
This presentation is the property of its rightful owner.
1 / 30

Tutorial 7 Debugging JavaScript Section A - Basic Debugging Techniques PowerPoint PPT Presentation

Tutorial 7 Debugging JavaScript Section A - Basic Debugging Techniques. Tutorial 7A Topics. Section A - Basic Debugging Techniques About debugging concepts How to interpret error messages How to trace errors with the alert() method How to trace errors with the write() and writeln() methods

Download Presentation

Tutorial 7 Debugging JavaScript Section A - Basic Debugging Techniques

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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Tutorial 7 debugging javascript section a basic debugging techniques

Tutorial 7 Debugging JavaScriptSection A - Basic Debugging Techniques

JavaScript Tutorial 7 - Debugging JavaScript


Tutorial 7a topics

Tutorial 7A Topics

  • Section A - Basic Debugging Techniques

    • About debugging concepts

    • How to interpret error messages

    • How to trace errors with the alert() method

    • How to trace errors with the write() and writeln() methods

    • How to use comments to locate bugs

    • About additional debugging techniques

JavaScript Tutorial 7 - Debugging JavaScript


Basic debugging techniques

Basic Debugging Techniques

  • Understanding Debugging

    • Debugging

      • Act of tracing and resolving errors in a program

    • Three types of errors

      • Syntax

      • Run-time

      • Logic

JavaScript Tutorial 7 - Debugging JavaScript


Basic debugging techniques1

Basic Debugging Techniques

  • Understanding Debugging

    • Syntax errors

      • Occur when code is used that the interpreter doesn’t recognize

      • Examples:

        • Invalid or incorrect statements

        • Missing symbols (e.g., curly brace)

        • Incorrect spelling or mistypes

        • Using different case when referencing variables

JavaScript Tutorial 7 - Debugging JavaScript


Basic debugging techniques2

Basic Debugging Techniques

  • Understanding Debugging

    • Run-time errors

      • Occur when interpreter encounters code it can’t handle

      • Examples:

        • Call to function that hasn’t been defined

        • Referencing a variable that hasn’t been declared

        • Division by zero

JavaScript Tutorial 7 - Debugging JavaScript


Basic debugging techniques3

Basic Debugging Techniques

  • Understanding Debugging

    • Logic errors

      • Problems in the design of the program that prevent it from running as anticipated

      • Examples:

        • Performing one operation when another is intended

          • e.g., multiplying instead of dividing

        • Infinite loops

JavaScript Tutorial 7 - Debugging JavaScript


Basic debugging techniques4

Basic Debugging Techniques

  • Error Messages

    • Error messages are generated by the JavaScript interpreter when it encounters a syntax or run-time error

      • Unfortunately  not with a logic error…

    • Information displayed in error messages:

      • Line number in document where error occurred

        • Referenced from first line of document

      • Description of the error

JavaScript Tutorial 7 - Debugging JavaScript


Basic debugging techniques5

Basic Debugging Techniques

  • Error Messages

    • Example:

      function missingClosingBrace() {

      var message = “Function missing brace.”;

      alert(message);

JavaScript Tutorial 7 - Debugging JavaScript


Javascript tutorial 7 debugging javascript

JavaScript Tutorial 7 - Debugging JavaScript


Javascript tutorial 7 debugging javascript

JavaScript Tutorial 7 - Debugging JavaScript


Basic debugging techniques6

Basic Debugging Techniques

  • Error Messages

    • In IE versions higher than 4:

      • Must turn on error notification

        • Tools menu  Options  Advanced

        • In Browsing category:

          • Select “Display a notification about every script error”

JavaScript Tutorial 7 - Debugging JavaScript


Basic debugging techniques7

Basic Debugging Techniques

  • Error Messages

    • In Netscape versions that support JavaScript 1.3 and higher:

      • Must turn on error notification

        • Tools and Tasks menu  JavaScript Console

JavaScript Tutorial 7 - Debugging JavaScript


Basic debugging techniques8

Basic Debugging Techniques

  • Error Messages

    • Messages don’t always identify the actual problem

    • They should be used as a starting point for debugging

      • Don’t assume that the problem is only with the line number shown in the error message

JavaScript Tutorial 7 - Debugging JavaScript


Basic debugging techniques9

Basic Debugging Techniques

  • Error Messages

    • Web browsers do not strictly enforce JavaScript syntax

    • Programs may run even though they contain bugs

    • Bugs may not be recognized consistently across different browsers

JavaScript Tutorial 7 - Debugging JavaScript


Basic debugging techniques10

Basic Debugging Techniques

  • Error Messages

    • How to mitigate bugs in your programs

      • Always use good syntax

      • Be disciplined in your programming technique

      • Thoroughly test your program in all major browsers

JavaScript Tutorial 7 - Debugging JavaScript


Basic debugging techniques11

Basic Debugging Techniques

  • Tracing Errors with the alert() Method

    • If unable to locate a bug using error messages

      • Must trace the code

    • Tracing

      • The examination of individual statements in an executing program

JavaScript Tutorial 7 - Debugging JavaScript


Basic debugging techniques12

Basic Debugging Techniques

  • Tracing Errors with the alert() Method

    • alert() method

      • provides one of the most useful ways to trace a program

      • Process:

        • Place an alert() method at the point in the program where you think the problem is located

        • Move it as necessary through the code until the problem is identified

          or

        • Place several throughout the program at one time

JavaScript Tutorial 7 - Debugging JavaScript


Javascript tutorial 7 debugging javascript

JavaScript Tutorial 7 - Debugging JavaScript


Javascript tutorial 7 debugging javascript

JavaScript Tutorial 7 - Debugging JavaScript


Javascript tutorial 7 debugging javascript

JavaScript Tutorial 7 - Debugging JavaScript


Javascript tutorial 7 debugging javascript

JavaScript Tutorial 7 - Debugging JavaScript


Javascript tutorial 7 debugging javascript

JavaScript Tutorial 7 - Debugging JavaScript


Basic debugging techniques13

Basic Debugging Techniques

  • Tracing Errors with the write() and writeln Methods

    • Examine multiple values

      • Alternative to single value using alert() method

      • Create a list by opening a new window and using write() and writeln() methods to print values to it

JavaScript Tutorial 7 - Debugging JavaScript


Basic debugging techniques14

Basic Debugging Techniques

  • Using Comments to Locate Bugs

    • Comment out lines that may be causing problems

      • Single statements

      • Groups of statements

    • Combine debugging techniques for more comprehensive approach

JavaScript Tutorial 7 - Debugging JavaScript


Javascript tutorial 7 debugging javascript

JavaScript Tutorial 7 - Debugging JavaScript


Javascript tutorial 7 debugging javascript

JavaScript Tutorial 7 - Debugging JavaScript


Basic debugging techniques15

Basic Debugging Techniques

  • Additional Debugging Techniques

    • Checking HTML Tags

      • If JavaScript bug cannot be found using the techniques mentioned here:

        • Check HTML code for errors

          • Missing open/close brackets

          • Missing open/close tags

      • HTML bugs generally aren’t announced

JavaScript Tutorial 7 - Debugging JavaScript


Basic debugging techniques16

Basic Debugging Techniques

  • Additional Debugging Techniques

    • Analyzing your logic

      • If bug isn’t a syntax or run-time error:

        • Check logic

          • Analyze each statement on a case-by-case basis

          • Use tracing to ensure values of variables at specific points in the program

JavaScript Tutorial 7 - Debugging JavaScript


Basic debugging techniques17

Basic Debugging Techniques

  • Additional Debugging Techniques

    • Testing statements with JavaScript URLs

      • JavaScript URL

        • Used for testing and executing JavaScript statements without an HTML document or JavaScript source file

        • Syntax:

          • javascript:statement(s)

        • Enter into the browser Location or Address box

JavaScript Tutorial 7 - Debugging JavaScript


Basic debugging techniques18

Basic Debugging Techniques

  • Additional Debugging Techniques

    • Reloading an HTML document

      • Web browsers can often fail to reload a document when directed to do so

      • Sometimes, you must,

        • Reload or refresh

        • Re-open page

        • Shutdown and reopen browser

        • Clear cache

JavaScript Tutorial 7 - Debugging JavaScript


  • Login