Html tutorials theory :
Data Types in JavaScript :
A Web page designer can store different types of values such as numbers, characters, or strings in variables. However, the Web page designer must know what kind of data a particular variable is expected to store. To identify the type of data that can be stored in a variable, JavaScript provides different data types.
A Web page designer need not specify the data type while declaring variables. Due to this, JavaScript is referred to as the loosely typed language. This means that a variable holding a number can also hold a string value later. The values of variables are automatically mapped to their data types when the script is executed in the browser.
Data types in JavaScript are classified into two broad categories namely, primitive and composite data types. Primitive data types contain only a single value, whereas the composite data types contain a group of values.
Primitive Data Types
A primitive data type contains a single literal value such as a number or a string. A literal is a static value that you can assign to variables.
Table 12.2 lists the primitive data types.
Primitive Data Type Description
boolean Contains only two values namely, true or false
null Contains only one value namely, null. A variable of this value specifies that the variable has no value. This null value is a keyword and it is not the same as the value, zero
number Contains positive and negative numbers and numbers with decimal point. Some of the valid examples include 6, 7.5, -8, 7.5e-3, and so on
string Contains alphanumeric characters in single or double quotation marks. The single quotes is used to represent a string, which itself consists of quotation marks. A set of quotes without any characters within it is known as the null string
Composite Data Types
A composite data type stores a collection of multiple related values, unlike primitive data types. In JavaScript, all composite data types are treated as objects. A composite data type can be either predefined or user-defined in JavaScript.
Composite Data Type Description
Objects Refers to a collection of properties and functions. Properties specify the characteristics and functions determine the behavior of a JavaScript object
Functions Refers to a collection of statements, which are instructions to achieve a specific task
Arrays Refers to a collection of values stored in adjacent memory locations
Methods
JavaScript allows you to display information using the methods of the document object. The document object is a predefined object in JavaScript, which represents the HTML page and allow managing the page dynamically. Each object in JavaScript consists of methods, which fulfills a specific task. There are two methods of the document object, which displays any type of data in the browser. These methods are as follows:
write(): Displays any type of data.
writeln(): Displays any type of data and appends a new line character.
The syntax demonstrates the use of document.write()method, which allows you to display information in the displayed HTML page.
Syntax:
document.write(“<data>” + variables);
where,
data: Specifies strings enclosed in double quotes.
variables: Specify variable names whose value should be displayed on the HTML page.
The syntax demonstrates the use of document.writeln() method, which appends a new line character.
Syntax:
document.writeln(“<data>” + variables);
<!DOCTYPE HTML>
<html>
<head>
<title> JavaScript language </title>
<script>
document.write(“<p> JavaScript:”);
document.writeln(“is a scripting”);
document.write(“and a case-sensitive language.”);
</script>
</head>
<p>
JavaScript: is a scripting and a case-sensitive language.
</p>
</html>
The code uses the writeln() method to display the text after the colon without leaving a space. It finally appends a new line character after the text. Then, the text within the write() method is displayed on the same line after leaving a space.
The same paragraph is displayed in the body of the HTML page. Note that the text in the p element appears on different lines. In HTML, the text on the second line, and a case sensitive language will not be displayed in the new line in the browser even though the ENTER key is pressed while writing the code. Rather, it will be displayed on the same line with a space. The writeln() method also follows this same format.
Using Comments
A Web page designer might code complex script to fulfill a specific task. In JavaScript, a Web page designer specifies comments to provide information about a piece of code in the script. Comments describe the code in simple words so that somebody who reads the code can understand the code. Comments are small piece of text that makes the program more readable. While the script is executed, the browser can identify comments as they are marked with special characters and do not display them.
JavaScript supports two types of comments. These are as follows:
Single-line Comments
Single-line comments begin with two forward slashes (//). You can insert single-line comments as follows:
// This statement declares a variable named num.
var num;
Multi-line Comments
Multi-line comments begin with a forward slash followed by an asterisk (/*) and end with an asterisk followed by a forward slash (*/). You can insert multiple lines of comments as follows:
/* This line of code
declares a variable */
var num;
Escape Sequence Characters
An escape sequence character is a special character that is preceded by a backslash (\). Escape sequence characters are used to display special non-printing characters such as a tab space, a single space, or a backspace. These non-printing characters help in displaying formatted output to the user to maximize readability.
The backslash character specifies that the following character denotes a non-printing character. For example, \t is an escape sequence character that inserts a tab space similar to the Tab key of the keyboard. In JavaScript, the escape sequence characters must always be enclosed in double quotes.
There are multiple escape sequence characters in JavaScript that provides various kind of formatting.
Escape Sequence Non-Printing Character
\b Back space
\f Form feed
\n New line
\r Carriage return
\t Horizontal tab
\’ Single quote
\” Double quote
\\ Backslash
\aaa Matches a Latin-1 encoding character using octal representation, where aaa are three octal numbers. For example, \251 represents the copyright symbol
\xaa Matches a Latin-1 encoding character using hexadecimal representation, where aa are two hexadecimal numbers. For example, \x61 represents the character ‘a’
\uaaaa Represent the Unicode encoding character, where aaaa are four hexadecimal numbers. For example, the character \ u0020 represents a space
Code Snippet :
<script>
document.write(“You need to have a \u0022credit card\u0022, if you
want to shop on the \’Internet\’.”);
</script>
The code uses a Unicode encoding character namely, \u0022, which represents double quotes. These open and close double quotes will contain the term credit card. Similarly, the word Internet will be placed in single quotes. The single quotes are specified using the backslash character
Built-in Functions
A function is a piece of code that performs some operations on variables to fulfill a specific task. It takes one or more input values, processes them, and returns an output value. JavaScript provides built-in functions that are already defined to fulfill a certain task. Table 12.5 lists the built-in functions.
Function Description Example
alert() Displays a dialog box with some information and OK button alert(“Please fill all the fields of the form”);
Displays a message box with the instruction
confirm() Displays a dialog box with OK and Cancel buttons. It verifies an action, which a user wants to perform confirm(“Are you sure you want to close the page?”);
Displays a message box with the question
parseInt() Converts a string value into a numeric value parseInt(“25 years”);
parseFloat() Converts a string into a number with decimal point parseFloat(“10.33”);
Returns 10.33
eval() Evaluates an expression and returns the evaluated result eval(“2+2”);
Returns 4
isNaN() Checks whether a value is not a number isNan(“Hello”);
Returns true
prompt() Displays a dialog box that accepts an input value through a text box. It also accepts the default value for the text box. prompt(“Enter your name”, “Name”);
Displays the message in the dialog box and Name in the text box.
Code Snippet 6:
<!DOCTYPE HTML>
<html>
<head>
<title> JavaScript language </title>
<script>
var value = “”;
var numone = prompt(“enter first value to perform the
multiplication operation”, value);
var numtwo = prompt(“enter second value to perform the
multiplication operation”, value);
var result = eval(numone * numtwo);
document.write(“The result of multiplying: “ + numone + “
and “ +
numtwo + “ is: “ + result + “.” );
</script>
</head>
</html>
In the code, it takes the first value from the user and stores in the numOne variable. Then, it takes the second value from the user and stores in the numTwo variable. It multiplies the values and stores the output in the result variable and then displays the output on the Web page.
Events
Consider a scenario where you want to design an Employee registration Web form. This form allows the users to fill in the appropriate details and click the submit button. When the user clicks the submit button, the form data is submitted to the server for validation purposes. In this case, when the user clicks the button, an event is generated. The submission of form refers to the action performed on click of the button.
An event occurs when a user interacts with the Web page. Some of the commonly generated events are mouse clicks, key strokes, and so on. The process of handling these events is known as event handling. displays the event .
Event Handling
Event handling is a process of specifying actions to be performed when an event occurs. This is done by using an event handler. An event handler is a scripting code or a function that defines the actions to be performed when the event is triggered.
When an event occurs, an event handler function that is associated with the specific event is invoked. The information about this generated event is updated on the event object. The event object is a built-in object, which can be accessed through the window object.
It specifies the event state, which includes information such as the location of mouse cursor, element on which an event occurred, and state of the keys in a keyboard .
Event Bubbling
Event bubbling is a mechanism that allows you to specify a common event handler for all child elements. This means that the parent element handles all the events generated by the child elements. For example, consider a Web page that consists of a paragraph and a table. The paragraph consists of multiple occurrences of italic text. Now, you want to change the color of each italic text of a paragraph when the user clicks a particular button. Instead of declaring an event handler for each italic text, you can declare it within the P element. This allows you to apply colors for all the italic text within the paragraph. This helps in reducing the development time and efforts since it minimizes the code. displays the event bubbling.
Nice Artice, you can read more about javascript interview question from Here
ReplyDeleteI've got a great list of HTML interview questions here
ReplyDelete