Debugging JavaScript with Chrome DevTools Breakpoints

To debug JavaScript in Google Chrome use Developer Tools
To set a breakpoint, simply click on the grey margin where you see line numbers in the Sources tab
Stepping through the code-

Step Over – F10
Step into – F11
Step out Shift+F11
Continue F8

You can also use the following buttons in the Developer tools to step through the code-

To set a conditional breakpoint, right click on the grey margin and select “add conditional breakpoint”

The Call Stack panel displays the complete excetion path and in this path where you want to breakpoint add select any line where auto color blue background that means javascript excution pouse at breakpoint.

If you want to find a individual id then press

Ctrl+shift+I

and go to console tab and select

Ctrl+shift+F

and paste any id and press enter

Tagged : / / / /

Built-in/Predefined Methods in JavaScript

In JavaScript, however, a method is a function that belongs to an object. A JavaScript method is a property containing a function definition.

There is a long list of Built-in or pre-defined methods in JavaScript

Maths Methods in JavaScript

  • min() ->Returns the smallest of zero or more numbers.
  • pow() ->Returns base to the exponent power, that is, base exponent.
  • abs() ->Returns the absolute value of a number.
  • acos() ->Returns the arccosine (in radians) of a number.
  • asin() ->Returns the arcsine (in radians) of a number.
  • sin() ->Returns the sine of a number.
  • sqrt() ->Returns the square root of a number.
  • tan() ->Returns the tangent of a number.
  • atan() ->Returns the arctangent (in radians) of a number.
  • atan2() ->Returns the arctangent of the quotient of its arguments.
  • exp() ->Returns EN, where N is the argument, and E is Euler’s constant, the base of the natural logarithm.
  • floor() ->Returns the largest integer less than or equal to a number.
  • log() ->Returns the natural logarithm (base E) of a number.
  • max() ->Returns the largest of zero or more numbers.
  • ceil() ->Returns the smallest integer greater than or equal to a number.
  • cos() ->Returns the cosine of a number.
  • random() ->Returns a pseudo-random number between 0 and 1.
  • round() ->Returns the value of a number rounded to the nearest integer.
  • toSource() ->Returns the string “Math”.

Boolean Methods in JavaScript

  • toString() ->Returns a string of either “true” or “false” depending upon the value of the object.
  • toSource() ->Returns a string containing the source of the Boolean object; you can use this string to create an equivalent object.
  • valueOf() ->Returns the primitive value of the Boolean object.

String Methods in JavaScript

  • length() ->Returns the length of the string.
  • search() ->Executes the search for a match between a regular expression and a specified string.
  • split() ->Splits a String object into an array of strings by separating the string into substrings.
  • lastIndexOf() ->Returns the index within the calling String object of the last occurrence of the specified value, or -1 if not found.
  • charAt() ->Returns the character at the specified index.
  • match() ->Used to match a regular expression against a string.
  • charCodeAt() ->Returns a number indicating the Unicode value of the character at the given index.
  • concat()-Combines the text of two strings and returns a new string.
  • replace() ->Used to find a match between a regular expression and a string and to replace the matched substring with a new substring.
  • substr() ->Returns the characters in a string beginning at the specified location through the specified number of characters.
  • toLowerCase() ->Returns the calling string value converted to lower case.
  • toString() ->Returns a string representing the specified object.
  • toUpperCase() ->Returns the calling string value converted to uppercase.
  • valueOf() ->Returns the primitive value of the specified object.
  • toLocaleLowerCase() ->The characters within a string are converted to lower case while respecting the current locale.
  • toLocaleUpperCase() ->The characters within a string are converted to the upper case while respecting the current locale.
  • substring() ->Returns the characters in a string between two indexes into the string.

Array Methods in JavaScript

  • every() ->Returns true if every element in this array satisfies the provided testing function.
  • reduce() ->Apply a function simultaneously against two values of the array (from left-to-right) as to reduce it to a single value.
  • filter() ->Creates a new array with all of the elements of this array for which the provided filtering function returns true.
  • forEach() ->Calls a function for each element in the array.
  • indexOf() ->Returns the first (least) index of an element within the array equal to the specified value, or -1 if none is found.
  • join() ->Joins all elements of an array into a string.
  • slice() ->Extracts a section of an array and returns a new array.
  • some() ->Returns true if at least one element in this array satisfies the provided testing function.
  • toSource() ->Represents the source code of an object
  • lastIndexOf() ->Returns the last (greatest) index of an element within the array equal to the specified value, or -1 if none is found.
  • map() ->Creates a new array with the results of calling a provided function on every element in this array.
  • reduceRight() ->Apply a function simultaneously against two values of the array (from right-to-left) as to reduce it to a single value.
  • reverse() ->Reverses the order of the elements of an array — the first becomes the last, and the last becomes the first.
  • shift() ->Removes the first element from an array and returns that element.
  • sort() ->Sorts the elements of an array.
  • splice() ->Adds and/or removes elements from an array.
  • toString() ->Returns a string representing the array and its elements.
  • pop() ->Removes the last element from an array and returns that element.
  • push()->Adds one or more elements to the end of an array and returns the new length of the array.

Date Methods in JavaScript

  • getTime() ->Returns the numeric value of the specified date as the number of milliseconds since January 1, 1970, 00:00:00 UTC.
  • setTime() ->Sets the Date object to the time represented by a number of milliseconds since January 1, 1970, 00:00:00 UTC.
  • getTimezoneOffset() ->Returns the time-zone offset in minutes for the current locale.
  • getUTCDate() ->Returns the day (date) of the month in the specified date according to universal time.
  • setUTCDate() ->Sets the day of the month for a specified date according to universal time.
  • getUTCDay() ->Returns the day of the week in the specified date according to universal time.
  • getUTCFullYear() ->Returns the year in the specified date according to universal time.
  • getUTCHours() ->Returns the hours in the specified date according to universal time.
  • getUTCMilliseconds() ->Returns the milliseconds in the specified date according to universal time.
  • getUTCMinutes() ->Returns the minutes in the specified date according to universal time.
  • getUTCMonth() ->Returns the month in the specified date according to universal time.
  • getUTCSeconds() ->Returns the seconds in the specified date according to universal time.
  • getYear() ->Deprecated – Returns the year in the specified date according to local time. Use getFullYear instead.
  • setYear() ->Deprecated – Sets the year for a specified date according to local time. Use setFullYear instead.
  • setDate() ->Sets the day of the month for a specified date according to local time.
  • getDate() ->Returns the day of the month for the specified date according to local time.
  • setFullYear() ->Sets the full year for a specified date according to local time.
  • setHours() ->Sets the hours for a specified date according to local time.
  • setMilliseconds() ->Sets the milliseconds for a specified date according to local time.
  • setMinutes() ->Sets the minutes for a specified date according to local time.
  • getMonth() ->Returns the month in the specified date according to local time.
  • setMonth() ->Sets the month for a specified date according to local time.
  • getSeconds() ->Returns the seconds in the specified date according to local time.
  • setSeconds() ->Sets the seconds for a specified date according to local time.
  • setUTCFullYear() ->Sets the full year for a specified date according to universal time.
  • setUTCHours() ->Sets the hour for a specified date according to universal time.
  • setUTCMilliseconds() ->Sets the milliseconds for a specified date according to universal time.
  • setUTCMinutes() ->Sets the minutes for a specified date according to universal time.
  • setUTCMonth() ->Sets the month for a specified date according to universal time.
  • setUTCSeconds() ->Sets the seconds for a specified date according to universal time.
  • toDateString() ->Returns the “date” portion of the Date as a human-readable string.
  • toGMTString() ->Deprecated – Converts a date to a string, using the Internet GMT conventions. Use toUTCString instead.
  • toString() ->Returns a string representing the specified Date object.
  • toTimeString() ->Returns the “time” portion of the Date as a human-readable string.
  • valueOf() ->Returns the primitive value of a Date object.
  • Date() ->Returns today’s date and time
  • getDay() ->Returns the day of the week for the specified date according to local time.
  • getFullYear() ->Returns the year of the specified date according to local time.
  • toLocaleDateString() ->Returns the “date” portion of the Date as a string, using the current locale’s conventions.
  • toLocaleFormat() ->Converts a date to a string, using a format string.
  • toLocaleTimeString() ->Returns the “time” portion of the Date as a string, using the current locale’s conventions.
  • getHours() ->Returns the hour in the specified date according to local time.
  • getMilliseconds() ->Returns the milliseconds in the specified date according to local time.
  • getMinutes() ->Returns the minutes in the specified date according to local time.

Few important links for learning:-

  1. Want to know the difference between Function and Method in JavaScript? Just click here.
  2. Want to know what is function and how to use them in JavaScript? Just click here.
  3. Want to know what are variables and how to use them in JavaScript? Just click here.
  4. Let’s see an example for User form validation in JavaScript. click here.
  5. Let’s understand JavaScript. what and how? click here.
Tagged : / / / /

Methods in JavaScript

In JavaScript, however, a method is a function that belongs to an object. A JavaScript method is a property containing a function definition.

Few Important things of Methods:-

  • In JavaScript, however, a method is a function that belongs to an object.
  • JavaScript methods are the actions that can be performed on objects.
  • A JavaScript method is a property containing a function definition.
  • Accessing the object method is done with the following syntax: objectName.methodName()

Just similar to the functions in JavaScript methods are also classified in two categories:-

  1. Predefined
  2. User-defined

Predefined methods can be used directly by calling and giving parameter values (if required). while user-defined methods are first declared, defined, and then used in the program.

Deceleration and definitions of User-defined methods are done together we could understand better seeing the below code.
Syntax of Methods

object = {
    methodName: function() {
        // Content
    }
};

object.methodName()

How to access the Object Methods

we can access the object method with the following syntax stated below:-

objectName.methodName()

How to add the method to Object.

person.name = function () {
    return this.firstName + " " + this.lastName;
};

We could also directly use the built-in method.

var message = "Display message of your choice";
var x = message.toUpperCase();

The above method would just convert the text entered as a message to uppercase.

Few important links for learning:-

  1. Want to know the difference between Function and Method in JavaScript? Just click here.
  2. Want to know what is function and how to use them in JavaScript? Just click here.
  3. Want to know what are variables and how to use them in JavaScript? Just click here.
  4. Let’s see an example for User form validation in JavaScript. click here.
  5. Let’s understand JavaScript. what and how? click here.
Tagged : / / / / / /

Difference between Function and Method in JavaScript

So what’s the different between the two?

  • Methods have a “receiver” while functions do not.
  • Functions and methods are the same in JavaScript, but a method is a function, which is a property of an object.
  • Syntax for calling/ definition/declaration of functions and methods are different.
  • A function can be called directly by its name but methods are called by its object name and its method name using dot notation or square bracket notation.
  • Function passes the data and methods operates the data passed in the class.
  • A function lives on its own but method is a function associated with an object property.
  • Data passed to a function is explicit but method implicitly passes the object on which it was called.

Lets see detailed difference between them:-

A function in JavaScript is similar to a procedure —>a set of statements that performs a task or calculates a value, but for a procedure to qualify as a function, it should take some input and return an output

Few Important things of functions:-

  • The function is executed when something calls/invokes it.
  • The name may contain letters, digits, dollar signs, underscore.
  • Parameters are listed inside round parenthesis after the name of the function.
  • Arguments are values a function receives when it is invoked.
  • When the control reaches the return statement, js will stop executing and the value is returned to the caller.

There are three steps of Functions as well as Methods to use in the program.

  1. Declaration
  2. Definition.
  3. Call

In JavaScript function declaration and definition are mostly done together.

A JavaScript method is a property of an object that contains a function definition. Methods are functions stored as object properties.

Few Important things of Methods:-

  • In JavaScript, however, a method is a function that belongs to an object.
  • JavaScript methods are the actions that can be performed on objects.
  • A JavaScript method is a property containing a function definition.
  • Accessing the object method is done with the following syntax: objectName.methodName()

Syntax of Function

var func = function(a, b) {
    var sum = a + b;
    return sum;
}
  
console.log(sum(1, 2));

Syntax of Methods

object = {
    methodName: function() {
        // Content
    }
};

object.methodName()

Few important links for learning:-

  1. Let’s see an example for User form validation in JavaScript. click here.
  2. Let’s understand JavaScript. what and how? click here.
  3. Want to know what is function and how to use them in JavaScript? Just click here.
  4. Want to know what are variables and how to use them in JavaScript? Just click here.

Tagged : / / / /

Predefined Functions in JavaScript

Want to know what is function and how to use them in JavaScript? Just click here.

Every computer programming language has functions. Some functions are defined by the programmers while the code is being written while some functions are predefined when the language was built.

As every functions have three parts

  1. Function Declaration
  2. Function Definition.
  3. Function Call

In predefined functions, the first two points are already done inside the library which we include as a header file at the beginning of the program. we just have to call the function.

Few most common predefined functions that we use are:-

Functions to display something in JavaScript:-

alert(message– It displays an alert box with a message specified in it.

confirm(message) – It will display the message with two buttons. “OK” and “Cancel”.

prompt(message) – Displays a box with the message passed. There the user can enter text in the prompt field, and choose OK or Cancel. If the user chooses OK, the string value entered in the field is returned and If the user chooses Cancel, a NULL value is returned.

Functions for conversion in JavaScript:-

parseFloat() – It returns floating-point numbers the same way as the parseInt function does, but looks for floating-point qualified strings and returns their value as afloat.

parseInt()– It converts a string to an integer returning the first integer encountered which is contained in the string. If no integer values are found such as in the string “written text”, then a value of 0 is returned.

Functions for comparison in JavaScript:-

eval()– Converts a string to integer or float value.

isNaN(value) – If the value passed is not a number, the boolean value of true is returned, if it is a number, it returns false.

escape(string) – It passes the string to be encoded and returns the encoded string. Encodes a string from ASCII into an ISO Latin-1 (ISO 8859-1) character set for HTML processing.

unescape() – Converts an ISO8859-1 character set to ASCII.

isFinite() – function determines whether the passed value is a finite number. If needed, the parameter is first converted to a number.

Functions for decoding and encoding in JavaScript:-

decodeURI() function decodes a Uniform Resource Identifier (URI) previously created by encodeURI or by a similar routine. decodeURIComponent()

decodeURIComponent() method decodes a Uniform Resource Identifier (URI) component previously created by encodeURIComponent() or by a similar routine. encodeURI

encodeURI() encodes a Uniform Resource Identifier (URI) by replacing each instance of certain characters by one, two, three, or four escape sequences representing the UTF-8 encoding of the character (will only be four escape sequences for characters composed of two “surrogate” characters). encodeURIComponent()

encodeURIComponent() encodes a Uniform Resource Identifier (URI) component by replacing each instance of certain characters by one, two, three, or four escape sequences representing the UTF-8 encoding of the character (will only be four escape sequences for characters composed of two “surrogate” characters).

There are more predefined functions but these were the important ones which are often used.

Few important links for learning:-

  1. Let’s see an example for User form validation in JavaScript. click here.
  2. Let’s understand javascript. what and how? click here.
  3. Want to know what is function and how to use them in JavaScript? Just click here.
  4. Want to know what are variables and how to use them in JavaScript? Just click here.
Tagged : / / / /

Function in JavaScript

What is a Function in JavaScript

A JavaScript function is a block of code designed to perform a particular task. In simple terms, Functions are used to make work easy, reduce the effort of coding multiple lines for the same task which is needed to repeat multiple times.

  1. Function Declaration
  2. Function Definition.
  3. Function Call

In JavaScript function declaration and definition are done together.

Tagged : / / /

Variables in JavaScript

Variables are simply the name of the storage location. There are two ways we define variables more precisely they are known as the scope of the variable. Scope determines the accessibility (visibility) of these variables. they are:- local variable and global variable.

When variables are defined inside a function then they cannot be used outside of it, these types of variables are called local variables, and when variables are declared outside the function then we can use them anywhere these are global variables.

Tagged : / / /

A brief description of JAVASCRIPT

javascript is a scripting language used to make web pages interactive.

Tagged : / / / / / / / / /

Javascript Basics

JavaScript is the world’s most popular programming language. Some of the advantages of javascript are given below:

  • Client side execution
  • Validation on browser
  • Easy language

Disadvantages:

  • It is comparatively less secure.
  • No hardware access

Ways of adding javascript:

Inline – We can javascript inside the head tag or the body tag between <script>…</script>.

External – We can create a javascript file externally and link it inside the head tag or the body tag between <script>…</script>.

To link a java file to html file:-

<script src=”abc.js” type=”text/script”> </script>

Some of the functions of javascript is given below:-

  • Write function

*document.write()

  • It displays the content into page.
  • If we use this function in the end of the HTML document it will delete all existing HTML.
  • It is used only for testing purpose.

Ex:- document.write(variable); , document.write(4+2);

  • Alert function

*window.alert()

  • It displays the data in the alert box.
  • It should be used when you want the user to stop and see the alert.

Ex:- window.alert(“hello world”); , window.alert(“4+2);

  • Identifiers

It is a name having few letters, numbers and special characters.

It is used to identify var, function, symbolic constant and so on.

Ex:- X2 , PI , Sigma

  • Variable

It is an identifier or a name which is used to refer a value.

It is written with a combination of letters, numbers and special character with first letter being alphabet (Underscore & Dollar) also.

Ex:- C , fact , b33 , total_amount

  • Data type

In javascript we do not have to specify type of variable.

“Var” can hold any type of data like string , number , boolean etc

Primitive data types:

Data TypeDescription
Stringrepresents sequence of characters e.g. “hello”
Numberrepresents numeric values e.g. 100
Booleanrepresents boolean value either false or true
Undefinedrepresents undefined value
Nullrepresents null i.e. no value at all

Non-Primitive data types:

Data TypeDescription
Objectrepresents instance through which we can access members
Arrayrepresents group of similar values
RegExprepresents regular expression
  • Declaring Variable

var roll;

roll= name;

Here ‘roll’ is the variable name and ‘name’ is assigning value to variable.

If a variable is declared without a value then its value will be undefined.

Important points in Javascript:-

  • Statements are executed one by one as they are written.
  • Javascripts program and statements are often called Javascripts code.
  • Semicolons separates javascript statements.
  • Ending statement with semicolon is not required but it is highly recommended.
  • Javascript ignores multiple spaces.

Javascript and its Reserve Keywords

JavaScript is a lightweight, interpreted programming language in the world and that makes it a programmer’s great choice. Javascript helps us developing great front-end as well as back-end softwares using different Javascript based frameworks like jQuery, Node.JS etc.\

Here, I would like to talk about the reserved keywords in the Javascript. Keywords are reserved words in JavaScript that we should not use to indicate names for variables, methods, classes, or as any other identifier.

KeywordDescription
abstractA non-access modifier. Used for classes and methods: An abstract class cannot be used to create objects (to access it, it must be inherited from another class). An abstract method can only be used in an abstract class, and it does not have a body. The body is provided by the subclass (inherited from)
assertFor debugging
booleanA data type that can only store true and false values
breakBreaks out of a loop or a switch block
byteA data type that can store whole numbers from -128 and 127
caseMarks a block of code in switch statements
catchCatches exceptions generated by try statements
charA data type that is used to store a single character
classDefines a class
continueContinues to the next iteration of a loop
constDefines a constant. Not in use – use final instead
defaultSpecifies the default block of code in a switch statement
doUsed together with while to create a do-while loop
doubleA data type that can store whole numbers from 1.7e−308 to 1.7e+308
elseUsed in conditional statements
enumDeclares an enumerated (unchangeable) type
exportsExports a package with a module. New in Java 9
extendsExtends a class (indicates that a class is inherited from another class)
finalA non-access modifier used for classes, attributes and methods, which makes them non-changeable (impossible to inherit or override)
finallyUsed with exceptions, a block of code that will be executed no matter if there is an exception or not
floatA data type that can store whole numbers from 3.4e−038 to 3.4e+038
forCreate a for loop
gotoNot in use, and has no function
ifMakes a conditional statement
implementsImplements an interface
importUsed to import a package, class or interface
instanceofChecks whether an object is an instance of a specific class or an interface
intA data type that can store whole numbers from -2147483648 to 2147483647
interfaceUsed to declare a special type of class that only contains abstract methods
longA data type that can store whole numbers from -9223372036854775808 to 9223372036854775808
moduleDeclares a module. New in Java 9
nativeSpecifies that a method is not implemented in the same Java source file (but in another language)
newCreates new objects
packageDeclares a package
privateAn access modifier used for attributes, methods and constructors, making them only accessible within the declared class
protectedAn access modifier used for attributes, methods and constructors, making them accessible in the same package and subclasses
publicAn access modifier used for classes, attributes, methods and constructors, making them accessible by any other class
requiresSpecifies required libraries inside a module. New in Java 9
returnFinished the execution of a method, and can be used to return a value from a method
shortA data type that can store whole numbers from -32768 to 32767
staticA non-access modifier used for methods and attributes. Static methods/attributes can be accessed without creating an object of a class
strictfpRestrict the precision and rounding of floating point calculations
superRefers to superclass (parent) objects
switchSelects one of many code blocks to be executed
synchronizedA non-access modifier, which specifies that methods can only be accessed by one thread at a time
thisRefers to the current object in a method or constructor
throwCreates a custom error
throwsIndicates what exceptions may be thrown by a method
transientA non-accesss modifier, which specifies that an attribute is not part of an object’s persistent state
tryCreates a try…catch statement
varDeclares a variable. New in Java 10
voidSpecifies that a method should not have a return value
volatileIndicates that an attribute is not cached thread-locally, and is always read from the “main memory”
whileCreates a while loop

Also, in addition to that we should keep in mind that true, false, and null are not keywords, but they are literals and reserved words that also cannot be used as variables, methods, classes, or as any other identifier.

You can refer the link below to see a video for Reserve keywords in javascript:

Tagged : /