Built-in Objects JavaScript Debuggers

20
Built-in Objects JavaScript Debuggers

Transcript of Built-in Objects JavaScript Debuggers

Page 1: Built-in Objects JavaScript Debuggers

Built-in Objects JavaScript Debuggers

Page 2: Built-in Objects JavaScript Debuggers

Built-in Objects

•  The global object refers to objects in the global scope.

•  The global scope consists of the properties of the global object, including inherited properties, if any. – Named window in browsers – Has properties representing all global variables – Other built-in objects are also properties of the

global object •  Ex: initial value of window.Array is Array object

– Has some other useful properties •  Ex: window.Infinity represents Number value

Page 3: Built-in Objects JavaScript Debuggers

Built-in Objects

•  The global object and variable resolution:

•  This is why we can refer to built-in objects (Object, Array, etc.) without prefixing with window.

i = 42; What does i refer to? 1.  Search for local variable or formal parameter

named i 2.  If none found, see if global object (window)

has property named i

Page 4: Built-in Objects JavaScript Debuggers

Built-in Objects

•  Primitive javascript data types are not objects and it has no properties.

•  JavaScript objects are composite values: they are a collection of properties or named values. When the value of a property is a function, we call it a method.

var str = 'hello'; document.write(str.toUpperCase());

•  Strings are not objects. Whenever referring to a property of a string str, JavaScript converts the string value to an object as if by calling new String(str). This object inherits string methods and is used to resolve the property reference. Once the property has been resolved, the newly created object is discarded.

Page 5: Built-in Objects JavaScript Debuggers

Built-in Objects

•  String(), Boolean(), and Number() built-in functions can be called as constructors, created “wrapped” Objects:

•  Instances inherit valueOf() method that returns wrapped value of specified type:

Output is “number”

Page 6: Built-in Objects JavaScript Debuggers

Built-in Objects

Page 7: Built-in Objects JavaScript Debuggers

Number Objects

Page 8: Built-in Objects JavaScript Debuggers
Page 9: Built-in Objects JavaScript Debuggers

JavaScript Boolean

•  JavaScript Boolean is an object that represents value in two states: true or false.

» Boolean b=new Boolean(value);

•  The default value of JavaScript Boolean object is false.

Page 10: Built-in Objects JavaScript Debuggers

JavaScript Boolean

Output: ({title:"Perl", publisher:"Leo Inc", price:200})

Page 11: Built-in Objects JavaScript Debuggers

JavaScript Date Object

•  The JavaScript date object can be used to get year, month and day. We can display a timer on the webpage by the help of JavaScript date object.

•  Use different Date constructors to create date object. It provides methods to get and set day, month, year, hour, minute and seconds.

We can use 4 variant of Date constructor to create date object.

Page 12: Built-in Objects JavaScript Debuggers

JavaScript Date Object

•  Refer below link for more details https://www.javatpoint.com/javascript-date

Page 13: Built-in Objects JavaScript Debuggers

Built-in Math Object

•  Math object has methods for performing standard mathematical calculations:

•  Also has properties with approximate values for standard mathematical quantities, e.g., e ( Math.E ) and π (Math.PI)

Page 14: Built-in Objects JavaScript Debuggers

Regular Expressions and

RegExp Object •  A regular expression is an object that describes a

pattern of characters. •  It performs powerful pattern-matching and search-

and-replace functions on text. Defined with the RegExp () constructor •  var pattern = new RegExp(pattern, attributes); •  pattern − A string that specifies the pattern of the

regular expression or another regular expression. •  attributes − An optional string containing any of

the "g", "i", and "m" attributes that specify global, case-insensitive, and multi-line matches, respectively.

Page 15: Built-in Objects JavaScript Debuggers

Regular Expressions and

RegExp Object

More details: https://www.tutorialspoint.com/javascript/javascript_regexp_object.htm

Page 16: Built-in Objects JavaScript Debuggers

JavaScript Debuggers

•  Programming code might contain syntax errors, or logical errors. •  Many of these errors are difficult to diagnose. •  Searching for (and fixing) errors in programming code is called

code debugging. •  All modern browsers have a built-in JavaScript debugger. •  Built-in debuggers can be turned on and off, forcing errors to be

reported to the user. •  With a debugger, we can also set breakpoints (places where code

execution can be stopped), and examine variables while the code is executing.

•  Activate debugging in your browser with the F12 key, and select "Console" in the debugger menu.

Page 17: Built-in Objects JavaScript Debuggers

Debugger: console.log() Method

•  console.log() method writes a message to the console. •  The console is useful for testing purposes. •  When testing this method, be sure to have the console

view visible (press F12 to view the console). •  <script>

a = 5; b = 6; c = a + b; console.log(c); </script>

•  JS values can be displayed in the debugger window.

Page 18: Built-in Objects JavaScript Debuggers

Debugger: Setting Breakpoints

•  In the debugger window, you can set breakpoints in the JavaScript code.

•  At each breakpoint, JavaScript will stop executing, and let US examine JavaScript values.

•  Or use debugger keyword stops the execution of JavaScript, and calls (if available) the debugging function.

•  Enter Developers tool section by pressing F12 key and go to sources- select a javascript file and set breakpoints by either selecting from the provided list like DOM breakpoints or Event listener breakpoints which stops the execution of code whenever an event occurs or set a breakpoint by simply clicking line number

Page 19: Built-in Objects JavaScript Debuggers

Major Browsers' Debugging Tools

•  Normally, activate debugging in your browser with F12,

and select "Console" in the debugger menu. •  Otherwise follow these steps:

Page 20: Built-in Objects JavaScript Debuggers

Thank you