Built-in Objects JavaScript Debuggers

Post on 08-Jun-2022

11 views 0 download

Transcript of Built-in Objects JavaScript Debuggers

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

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

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.

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”

Built-in Objects

Number Objects

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.

JavaScript Boolean

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

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.

JavaScript Date Object

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

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)

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.

Regular Expressions and

RegExp Object

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

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.

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.

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

Major Browsers' Debugging Tools

•  Normally, activate debugging in your browser with F12,

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

Thank you