<h2>JavaScript Tutorial Overview</h2>
Welcome to JavaScript Tutorials. The intent of these tutorials is to provide a good understanding of JavaScripts.
<h2>Introduction to JavaScript</h2>
JavaScript was invented by Brendan Eich at Netscape(with Navigator 2.0), and has appeared in all browsers since 1996. JavaScript is from Netscape. JavaScript initially it was called as Live Script JavaScript is a lightweight, interpreted programming language that allows you to build interactivity into otherwise static HTML pages. JavaScript is used in billions of Web pages to add functionality, validate forms, communicate with the server, and much more. JavaScript is the most popular scripting language on the internet and works in all major browsers, such as Internet Explorer, Firefox, Chrome, Opera, and Safari. 
What you should Already know 
Before you continue you should have a basic understanding of the following. HTML and CSS.
<blockquote>Learn JavaScript by Tekslate - Fastest growing sector in the industry. Explore Online "<a style="color: #e03e2d;" href="javascript-training" target="_blank" rel="noopener">JavaScript Training</a>" and course is aligned with industry needs &amp; developed by industry veterans. Tekslate will turn you into JavaScript Expert.</blockquote>
<h3>What is JavaScript?</h3>
JavaScript was designed to add interactivity to HTML pages JavaScript is a scripting language A scripting language is a lightweight programming language. JavaScript is an interpreted language (means that scripts execute without preliminary compilation) Everyone can use JavaScript without purchasing a license. 
Are Java and JavaScript the same? 
No! Java and JavaScript are two completely different languages in both concept and design.
<h3>What can JavaScript do?</h3>
JavaScript gives HTML designers 3 programming tool-HTML authors are normally not programmers, but JavaScript is a scripting language with a very simple syntax! Almost anyone can put small &ldquo;snippets&rdquo; of code into their HTML pages 
JavaScript can react to events &ndash; 
A javascript can be set to execute when something happens, like when a page has finished loading or when a user clicks on an HTML element.
JavaScript can read and write HTML elements &ndash;
 A javascript can read and change the content of an <a href="html-table-tags" target="_blank" rel="noopener">HTML</a> element.
 JavaScript can be used to validate data &ndash;
 A JavaScript can be used to validate form data before it is submitted to a server. This saves the server from extra processing
. JavaScript can be used to detect the visitor&rsquo;s browser- 
A JavaScript can be used to detect the visitor&rsquo;s browser. and depending on the browser-load another page specifically designed for that browser
 JavaScript can be used to create cookies &ndash;
<ul>
<li>A JavaScript can be used to store and retrieve information on the visitor&rsquo;s computer</li>
</ul>
Related Blogs of JavaScript For More Info:&nbsp;<a href="javascript-operators" target="_blank" rel="noopener">JavaScript Operators</a>,&nbsp;<a href="javascript-objects-properties" target="_blank" rel="noopener">JavaScript Objects &amp; Properties</a>,&nbsp;<a href="javascript-switch-case" target="_blank" rel="noopener">JavaScript Switch Case</a>
<h3>Limitations with JavaScript</h3>
We can&rsquo;t treat JavaScript as a full-fledged programming language. it lacks the following important features: Client-side JavaScript does not allow the reading or writing of files. This has been kept for security reasons. JavaScript can be used for Networking applications because is no such support available. JavaScript doesn&rsquo;t have any multithreading or multi-process capabilities. &nbsp;
<h2>JavaScript Development Tools</h2>
One of JavaScript&rsquo;s strengths is that expensive development tools are not usually required. You can start with a simple text editor such as Notepad. Since it is an interpreted language inside the context of a web browser, you don&rsquo;t even need to buy a compiler. To make our life simpler, various vendors have come up with very nice JavaScript editing tools. A few of them are listed here:
 Microsoft FrontPage: 
Microsoft has developed a popular HTML editor called FrontPage. FrontPage also provides web developers with a number of JavaScript tools to assist in the creation of an interactive website.
 Macromedia Dreamweaver MX:&nbsp; 
Macromedia Dreamweaver MX is a very popular HTML and JavaScript editor in the professional web development crowd. It provides several handy prebuilt JavaScript components, integrates well with the database, and conforms to new standards such as XHTML and XML. 
Macromedia HomeSite 5:&nbsp; 
This provided a well-liked HTML and JavaScript editor, which will manage their personal web site just fine. &nbsp;
<h3>Where JavaScript is Today?</h3>
The ECMAScript is the standard for scripting languages. The JavaScript 2.0 adheres to ECMAScript Edition 4. Today, Netscape&rsquo;s JavaScript and Microsoft&rsquo;s Jscript conform to the ECMAScript standard.
<h2>JavaScript &amp; Browsers</h2>
Browsers that do not support JavaScript, will display JavaScript as page content. To prevent them from doing this, and as a part of the JavaScript standard, the HTML comment tag should be used to &ldquo;hide&rdquo; the JavaScript. Just add an HTML comment tag 
&lt;!&mdash;before the first JavaScript statement, and&nbsp; a -- &gt; (end of comment) after the last JavaScript statement, like this :
<pre class="language-javascript"><code>&lt;html&gt;

&lt;body&gt;

&lt;script type=&rdquo;text/javascript&rdquo;&gt;

&lt;!&mdash; document.getElementByID(&ldquo;demo&rdquo;).innerHTML=Date(); /-- &gt;

&lt;/script&gt;

&lt;/body&gt;

&lt;/html&gt;</code></pre>
The two forward slashes at the end of the comment line(//) are the JavaScript symbol. This prevents JavaScript from executing -- &gt; tag.
<h2>Comments in JavaScript</h2>
JavaScript supports both C-style and C++ style comments, Thus: Any text between a // and the end of a line is treated as a comment and is ignored by JavaScript. Any text between the characters /* and */ is treated as a comment. This may span multiple lines JavaScript also recognizes the HTML comment opening sequence 
&lt;!--, javascript treats this as a single-line comment, just as it does the // comment. The HTML comment closing sequence -- &gt; is not recognized by JavaScript so it should be written as //- - &gt;
 Example
<pre class="language-javascript"><code>&lt;script language=&rdquo;JavaScript&rdquo; type=&rdquo;type/javaScript&rdquo;&gt;

&lt;!&mdash; // This is a comment. It is similar to comment in C++

/ * This is a multiline comment in JavaScript It is very similar to comments in C programming

*/

//-- &gt; &lt;/script&gt;</code></pre>
<h3>Enabling JavaScript in Browsers</h3>
All modern browsers come with built-in support for JavaScript. Many times you may need to enable or disable this support manually.&nbsp;
<h3>JavaScript in Internet Explorer</h3>
Here are simple steps to turn on or turn off JavaScript in your Internet Explorer :
<ol>
<li>Follow Tools - &gt; Internet options from menu</li>
<li>Select the Security tab from the dialog box</li>
<li>Click the Custom Level button</li>
<li>Scroll down till you find the Scripting option</li>
<li>Select Enable radio button under Active scripting</li>
<li>Finally, click OK and come out</li>
</ol>
To disable JavaScript support in your Internet Explorer, you need to select the Disable radio button under Active Scripting. &nbsp;
<h3>JavaScript in Opera</h3>
Here age simple steps to turn on or turn off JavaScript in your Opera:
<ol>
<li>Follow Tools - &gt; Preferences</li>
</ol>
from the menu
<ol start="2">
<li>Select the Advanced options from the dialog box.</li>
<li>Select Content from the listed items</li>
<li>Select Enable JavaScript checkbox.</li>
<li>Finally, click ok and come out.</li>
</ol>
To disable JavaScript support in your opera, you should not select Enable JavaScript checkbox. &nbsp;
<h3>JavaScript in Firefox</h3>
JavaScript allows you to work with three primitive data types @
<ul>
<li>Numbers eg. 123,120.50 etc</li>
<li>Strings of text eg. &ldquo;This text string&rdquo; etc</li>
<li>Boolean e.g true or false.</li>
</ul>
JavaScript also defines two trivial data types, null and undefined, each of which defines only a single value. In addition to these primitive data types, JavaScript supports a composite data type known as an object. We will see an object detail in a separate chapter. 
Note: Java does not make a distinction between integer values and floating-point values. All numbers in JavaScript are represented as floating-point values. JavaScript represents numbers using the 64-bit floating-point format defined by the IEEE 754 standard.
 Warning for Non-JavaScript browsers if you have to do something important using JavaScript then you can display a warning message to the user using &lt;noscript&gt; tags you can add no script block immediately after the script block as follows: 
<pre class="language-javascript"><code>&lt;html&gt;

&lt;body&gt;

&lt;script language-&ldquo;javascript&rdquo; type=&rdquo;text/javascript&rdquo;&gt;

!&mdash; document.write(&ldquo;Hello World!&rdquo;) //-- &gt;

&lt;/script&gt;

&lt;noscript&gt;

Sorry&hellip; JavaScript is needed to go ahead.

&lt;/noscript&gt;

&lt;/body&gt;

&lt;/html&gt;</code></pre>
Now, if the user&rsquo;s browser does not support JavaScript or JavaScript is not enabled then a message from &lt;/noscript&gt; will be displayed on the screen.

JavaScript Tutorial | JavaScript  Study Guide

JavaScript Tutorial

javascript-tutorials

JavaScript Interview Questions & Answers

javascript-interview-questions-answers

&nbsp;
<h2>JavaScript Syntax</h2>
A JavaScript consists of JavaScript statements that are placed within the &lt;script&gt;&hellip;&hellip;&lt;/script&gt; <a href="https://tekslate.com/mvc-html-helper-class-controllers" target="_blank" rel="noopener">HTML </a>tags in web page.
 You can place the &lt;script&gt; tag containing your JavaScript anywhere within your web page but it is preferred was to keep it within the &lt;head&gt; tags 
The &lt;script&gt; tag alert the browser program to begin interpreting all the text between these tags as a script. So simple syntax of your JavaScript will be as follows. 
&lt;script&gt; 
JavaScript code 
&lt;/script&gt; 
&nbsp; The script tag takes two important attributes Language
<ul>
<li>This attribute specifies what scripting language you are using. Typically, its value will be javascript. Although recent versions of HTML(and XHTML, its successor) have phased out the use of this attribute.</li>
</ul>
<blockquote>Learn JavaScript by Tekslate - Fastest growing sector in the industry. Explore Online "<a style="color: #e03e2d;" href="javascript-training" target="_blank" rel="noopener">JavaScript Training</a>" and course is aligned with industry needs &amp; developed by industry veterans. Tekslate will turn you into JavaScript Expert.</blockquote>
&nbsp;
Type:
<ul>
<li>This attribute is what is now recommended to indicate the scripting language in use and its value should be set to &ldquo;text/javascript&rdquo;.</li>
</ul>
So your javascript segment will look like:
<pre class="language-javascript"><code>&lt;script language =&rdquo;javascript&rdquo; type=&rdquo;text/javascript&rdquo;&gt;

JavaScript code

&lt;/script&gt;

</code></pre>
First JavaScript Program
 Let us write our class example to print out &ldquo;Hello World&rdquo;. 
<pre class="language-javascript"><code>&lt;html&gt;

&lt;body&gt;

&lt;script language=&rdquo;javascript&rdquo; type=&rdquo;text/javascript&rdquo;&gt;

document.write(&ldquo;Hello World!);

&lt;/script&gt;

&lt;/body&gt;

&lt;/html&gt;</code></pre>
Next, we call a function document .write which writes a string into our HTML document. This function can be used to write text, HTML, or both. So the above code will display the following result: Hello World! Whitespace and Line Breaks 
JavaScript ignores spaces, tabs, and newlines that appear in <a href="javascript-variables-data-types" target="_blank" rel="noopener">JavaScript programs</a>. Because you can use spaces, tabs, and newlines freely in your program so you are free to format and indent your program in a neat and consistent way that makes the code easy to read and understand. 
Semicolons are optional 
Simple statements in JavaScript are generally followed by a semicolon character, just as they are in C, C++, and Java, JavaScript, however, allows you to omit this semicolon if your statements are each placed on a separate line, For example, the following code could be written without semicolons
<pre class="language-javascript"><code>&lt;script language=&rdquo;JavaScript&rdquo; type=&rdquo;text/JavaScript&rdquo;&gt;

&lt;!&mdash; var1=10 var2=20 //&agrave;

&lt;/script&gt;

But when formatted in a single line as follows, the semicolons are required:

&lt;script language=&rdquo;javascript&rdquo; type=&rdquo;text/javascript&rdquo;&gt;

&lt;!&mdash; var1=10; var2=20; //&agrave;

&lt;/script&gt;</code></pre>
 &nbsp;
Note It is a good programming practice to use semicolons. 
Case Sensitivity 
JavaScript is a case-sensitive language. This means that language keywords, variables, function names, and any other identifiers must always be typed with a consistent capitalization of letters. So identifiers Time, Time, and TIME will have different meanings in JavaScript. 
<a style="background-color: #e94350; color: #ffffff; padding: 10px 20px;" href="javascript-tutorials" target="_blank" rel="noopener">Check Out JavaScript Tutorial</a>
NOTE Care should be taken while writing your variable and function names in JavaScript 
JavaScript Placement in HTML File 
There is a flexibility given to include JavaScript code anywhere in an HTML document. But there are the following most preferred ways to include JavaScript in your HTML file. 
Script in &lt;head&gt; &hellip; &lt;/head&gt; section 
Script in &lt;body&gt; &hellip;&nbsp; &lt;.body&gt; 
Section Script in &lt;body&gt; &hellip;. &lt;/body&gt; 
and &lt;head&gt; &hellip;..&nbsp; &lt;/head&gt; sections.
 Script in and external file and then include in &lt;head&gt;--- &lt;/head&gt; section. 
In the following section we will see how we can put JavaScript in different ways: &nbsp;
 JavaScript in &lt;head&gt;&hellip;&lt;/head&gt; section:
 If you want to have a script run on some event, such as when a user clicks somewhere, then you will place that script in the head as follows:
<pre class="language-javascript"><code>&lt;html&gt;

&lt;head&gt;

&lt;script type=&rdquo;text/javascript&rdquo;&gt;

&lt;!&mdash; Function sayHello() alert(&ldquo;Hello World&rdquo;) } //-- &gt;

&lt;/script&gt;

&lt;/head&gt;

&lt;body&gt;

&lt;input type=&rdquo;button&rdquo; onclick=&rdquo;sayHello()&rdquo; value=&rdquo;Say Hello&rdquo; /&gt;

&lt;/body&gt;

&lt;/html&gt; </code></pre>
 JavaScript in &lt;body&gt;&hellip;&nbsp; &lt;/body&lt; section:
 if you need a script to run as the page loads so that script generates content in the page, the script goes in the &lt;body&gt; portion of the document. In this case, you would not have any function defined using Javascript: 
<pre class="language-javascript"><code>&lt;html&gt;

&lt;head&gt;

&lt;body&gt;

&lt;script type=&rdquo;text/javaScript&rdquo;&gt;

&lt;!&mdash; document.wirte(&ldquo;Hello Word&rdquo;) //-- &gt; &lt;/script&gt;

&lt;p&gt;This is webpage body &lt;/p&gt;

&lt;/body&gt;

&lt;/html&gt; </code></pre>
 JavaScript in &lt;body&gt; and &lt;head&gt; sections: 
You can put your JavaScript code in &lt;head&gt; and &lt;body&gt; section altogether as follows: &lt;html&gt; &lt;head&gt; Javascript is untyped language. This means that a javascript variable can hold a value of any data type. Unlike many other languages. you don&rsquo;t have to tell javascript during variable declaration what type of value the variable will hold. The value type of a variable can change during the execution of a program and JavaScript takes care of it automatically.

JavaScript Syntax, Comments, Where To | TekSlate 

JavaScript Syntax, Comments, Where To

javascript-syntax-comments-where-to

&nbsp;
<h2>JavaScript Variables</h2>
Like many other programming languages, JavaScript has variables, variables can be thought of as named containers. You can place data into these containers and then refer to the data simply by naming the container. Before you use a variable in a JavaScript program, you must declare it. 
Variables are declared with the var keyword as follows:
<pre class="language-javascript"><code>&lt;script type=&rdquo;type/javascript&rdquo;&gt;

&lt;!&mdash; var money ; var name; //-- &gt;

&lt;/script&gt;

You can also declare multiple variables with the same var keyword as follows:

&lt;script type=&rdquo;text/javascript&rdquo;&gt;

&lt;!&mdash; Var money, name; // -- &gt;

&lt;/script&gt;</code></pre>
 Script a value in a variable is called variable initializations. You can do variable initialization at the time of variable creating or later point in time when you need that variable as follows: For instance, you might create a variable named money and assign the value 2000.50 to it later.
<blockquote>
Learn JavaScript by Tekslate - Fastest growing sector in the industry. Explore Online "<a style="color: #e03e2d;" href="javascript-training" target="_blank" rel="noopener">JavaScript Training</a>" and course is aligned with industry needs &amp; developed by industry veterans. Tekslate will turn you into JavaScript Expert.
</blockquote>
&nbsp;
For another variable you can assign a value the time initialization as follows :
<pre class="language-javascript"><code>&lt;script type=&rdquo;text/javascript&rdquo;&gt;

&lt;!&mdash; var name=&rdquo;Ali&rdquo;; var money; money=2000.50; //-- &gt;

&lt;/script&gt;

</code></pre>
 Note: Use the var keyword only for declaration or initialization. once for the life or any variable name in a document. You should not re-declare the same variable twice.
<pre class="language-javascript"><code>&lt;script type=&rdquo;type/javascript&rdquo;&gt;

&lt;!&mdash; functionsayHello() { alert { &ldquo;Hello World&rdquo;} } //- - &gt;

&lt;/script&gt;

&lt;/head&gt;

&lt;body&gt;

&lt;script type=&rdquo;text/javascript&rdquo;&gt;

&lt;!&mdash; document.write(&ldquo;Hello World&rdquo;) // - - &gt;

&lt;/script&gt;

&lt;input type=&rdquo;button&rdquo; onclick=&rdquo;sayHello()&rdquo; value=&rdquo;say Hello&rdquo; /&gt;

&lt;/body&gt;

&lt;/html&gt;</code></pre>
 &nbsp;
<h3>JavaScript in External File</h3>
As you begin to work more extensively with JavaScript, you will likely find that there are cases where you are reusing identical JavaScript code on multiple pages of a site. You are not restricted to be maintaining identical code in multiple <a href="https://tekslate.com/mvc-html-helper-class-controllers" target="_blank" rel="noopener">HTML</a> files. The Script tag provides a mechanism to allow you to store JavaScript in an external file and then include it into your HTML files. Here is an example to show how you can include an external javaScript file in your HTML code using script tag and its srcattribute :
<pre class="language-javascript"><code>&lt;html&gt;

&lt;head&gt;

&lt;script type=&rdquo;text/javascript&rdquo; src=&rdquo;filename.js&rdquo;&gt;

&lt;/script&gt;

&lt;/head&gt;

&lt;body&gt; &hellip;&hellip;&hellip;&hellip;&hellip;&hellip;.. &lt;/body&gt;

&lt;/html&gt;

</code></pre>
The use of JavaScript from an external file source, you need to write you all JavaScript source code in a simple text file with the extension &ldquo;.js&rdquo; and then include that file as shown above.
For example, you can keep following content in the filename.js file, and then you can use the say Hello function in your HTML file after including filename.js file: functionsayHello() { alert(&ldquo;Hello World&rdquo;) } &nbsp;
<h3>JavaScript Data Types</h3>
One of the most fundamental characteristics of a programming language is the set of data types it supports. These are the type of values that can be represented and manipulated in a programming language. Here are simple steps to turn on or off JavaScript in you Firefox
<ol>
<li>Follow Tools - &gt; Options from the menu</li>
<li>Select the Content option from the dialog box</li>
<li>Select Enable JavaScript checkbox</li>
<li>Finally, click on ok and come out.</li>
</ol>
&nbsp; To disable JavaScript support in your Firefox. You should not select Enable JavaScript checkbox. &nbsp;
<h3>JavaScript Variable Scope</h3>
The scope of a variable is the region of your program in which it is defined. JavaScript variable will have only two scopes. 
Global Variable: 
A global variable has a global scope which means it is defined everywhere in your JavaScript code.
<a style="background-color: #e94350; color: #ffffff; padding: 10px 20px;" href="javascript-tutorials" target="_blank" rel="noopener">Check Out JavaScript Tutorial</a>
Local Variable:
A local variable will be visible only within a function where it is defined. Function parameters are always local to that function Within the body of a function, a local variable takes presentence over a global variable with the same name.
 If you declare a local variable or function parameter with the same name as a global variable, you effectively hide the global variable. The following example explains it: 
<pre class="language-javascript"><code>&lt;script type=&rdquo;text/javascript&rdquo;&gt;

&lt;!&mdash; varmyVar=&rdquo;global&rdquo;; // Declare a global variable functioncheckscope() { varmyvar=&rdquo;local&rdquo;; // Declare a local variable document.write(myVar) ; } //-- &gt;

&lt;/script&gt; </code></pre>
<h3>JavaScript Variable Names</h3>
While naming your variables in JavaScript keep following rules in mind You should not use any of the JavaScript reserved keywords as a variable name. These keywords are mentioned in the next section. For example, break or Boolean variable names are not valid JavaScript variable names should not start with a numeral (0-9) They must begin with a letter or the underscore character. For example, the 123test is an invalid variable name but the 123test is a valid one. JavaScript variable names are case sensitive. For example, Name and name are two different variables &nbsp;
<h3>JavaScript Reserved Words</h3>
The following are reserved words in JavaScript. They cannot be used as JavaScript variables, functions, methods, loop labels, or any object names. &nbsp;
<table>
<tbody>
<tr>
<td width="150">abstract Boolean break byte case catch char const continue debugger default delete do double &nbsp;</td>
<td width="150">else enum export extends false final finally float for function goto if implements import in &nbsp;</td>
<td width="150">instance of int interface long native new null package private protected public return short static super</td>
<td width="150">switch synchronized this throw throws transient true try typeof var void volatile while with &nbsp;</td>
</tr>
</tbody>
</table>
&nbsp; &nbsp;

JavaScript Variables & Data Types | JavaScript Guide | Tekslate

JavaScript Variables & Data Types

javascript-variables-data-types

&nbsp;
<h2>&nbsp;What is the operator?</h2>
A simple answer can be given using the expression 4+5 is equal to 9, Here 4 and 5 are called operands, and + is called operator JavaScript language supports the following type of operators. Arithmetic Operators Comparison Operators Logical (or Relational) Operators Assignment Operators Conditional (or ternary) Operators Lets have a look at all operators one by one.&nbsp; &nbsp;
<h3>Arithmetic Operators</h3>
There are following arithmetic operators supported by JavaScript language Assume variable A holds 10 and variable B holds 20 then
<table style="height: 431px;" width="760">
<tbody>
<tr>
<td width="187">Operator</td>
<td width="187">Description</td>
<td width="187">Example</td>
</tr>
<tr>
<td width="187">+</td>
<td width="187">Adds 2 operands</td>
<td width="187">A+B will give 30</td>
</tr>
<tr>
<td width="187">-</td>
<td width="187">Subtract second opened from the first</td>
<td width="187">A-B will give -10</td>
</tr>
<tr>
<td width="187">*</td>
<td width="187">Multiply both operands</td>
<td width="187">A*B will give 200</td>
</tr>
<tr>
<td width="187">/</td>
<td width="187">Divide numerator by denumerator</td>
<td width="187">B/A will give 2</td>
</tr>
<tr>
<td width="187">%</td>
<td width="187">Modulus operator and a reminder of after an integer division</td>
<td width="187">B%A will give 0</td>
</tr>
<tr>
<td width="187">++</td>
<td width="187">The increment operator increases integer value by one</td>
<td width="187">A++ will give 11</td>
</tr>
<tr>
<td width="187">--</td>
<td width="187">The decrement operator decreases integer value by one</td>
<td width="187">A&mdash;will give 9</td>
</tr>
</tbody>
</table>
&nbsp; Note:&nbsp; Addition operator (+) works for number as well as strings Ex: &ldquo;a&rdquo; +10 will give &ldquo;a10&rdquo;
<blockquote>Learn JavaScript by Tekslate - Fastest growing sector in the industry. Explore Online " <a style="color: #e03e2d;" href="javascript-training" target="_blank" rel="noopener">JavaScript Training</a>" and course is aligned with industry needs &amp; developed by industry veterans. Tekslate will turn you into JavaScript Expert.</blockquote>
&nbsp;
&nbsp; The comparison operators There are following comparison operators supported by javascript language Assume variable A holds 10 and variable B holds 20 then
<table style="height: 469px;" width="763">
<tbody>
<tr>
<td width="234">Operator</td>
<td width="234">Description</td>
<td width="234">Example</td>
</tr>
<tr>
<td width="234">==</td>
<td width="234">Checks if the value of 2 operands are equal or not, if yes then the condition becomes true</td>
<td width="234">(A==B) is not true</td>
</tr>
<tr>
<td width="234">!=</td>
<td width="234">Checks if the value of 2 operands are equal or not, if values are not equal then the condition becomes true</td>
<td width="234">(A!=B) is true</td>
</tr>
<tr>
<td width="234">&gt;</td>
<td width="234">Checks if the value of the left operand is greater than the value of the right operand, if yes then the condition becomes true</td>
<td width="234">(A&gt;B) is not true</td>
</tr>
<tr>
<td width="234">&lt;</td>
<td width="234">Checks if the value of the left operand is greater than the value of the right operand, if yes then the condition becomes true</td>
<td width="234">(A&lt;B) is true</td>
</tr>
<tr>
<td width="234">&gt;=</td>
<td width="234">Checks if the value of the left operand is greater than or equal to the value of the right operand if yes then the condition becomes true</td>
<td width="234">(A&gt;=B) is not true</td>
</tr>
<tr>
<td width="234">&lt;=</td>
<td width="234">Checks if the value of the left operand is less than or equal to the value of the right operand if yes then the condition becomes true</td>
<td width="234">(A&lt;=B) is true</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</tbody>
</table>
&nbsp;
<h3>Logical Operators</h3>
There are following logical operators supported by javascript language Assume variable A holds 10 and variable B holds 20 then
<table style="height: 242px;" width="780">
<tbody>
<tr>
<td width="213">operator</td>
<td width="213">description</td>
<td width="213">Example</td>
</tr>
<tr>
<td width="213">&amp;&amp;</td>
<td width="213">Called logical AND operator, if both the operands are non zero then the condition becomes true</td>
<td width="213">(A&amp;&amp;B) is true</td>
</tr>
<tr>
<td width="213">||</td>
<td width="213">Called logical OR operator, if any of the 2 operands are non zero then the condition becomes true</td>
<td width="213">(A||B) is true</td>
</tr>
<tr>
<td width="213">!</td>
<td width="213">Called Logical NOT Operator. Use to reverses the logical state of its operand. if a condition is true logical NOT operator will make false</td>
<td width="213">!(A&amp;&amp;B) is false</td>
</tr>
</tbody>
</table>
&nbsp;
<h3>Bitwise Operators</h3>
There are following logical operators supported by javascript language Assume variable A holds 10 and variable B holds 20 then
<table style="height: 982px;" width="780">
<tbody>
<tr>
<td width="209">Operator</td>
<td width="209">description</td>
<td width="209">Example</td>
</tr>
<tr>
<td width="209">&amp;</td>
<td width="209">Called a bitwise operator. It performs a Boolean AND operation on each bit of its integer arguments</td>
<td width="209">(A&amp;B) is 2</td>
</tr>
<tr>
<td width="209">|</td>
<td width="209">Called a bitwise operator. It performs a Boolean OR operation on each bit of its integer arguments</td>
<td width="209">(A|B) is 3</td>
</tr>
<tr>
<td width="209">^</td>
<td width="209">Called bitwise XOR operator. It performs a Boolean exclusive OR operation on each bit of its integer arguments. Exclusive OR means that either operand one is true or operand 2 is true, but not both</td>
<td width="209">(A^B) is 1</td>
</tr>
<tr>
<td width="209">~</td>
<td width="209">Called bitwise NOT operator. It is a unary operator and operates by reversing all bits in the operand</td>
<td width="209">(~B) is 4</td>
</tr>
<tr>
<td width="209">&lt;&lt;</td>
<td width="209">Called bitwise shift left operator. It moves all bits in its 1st operand to the left by the number of places specified in the second operand. New bits are filled with 0 shifting a value left by one position is equivalent to multiplying by 2, shifting 2 positions is equivalent to multiply by 4, etc..</td>
<td width="209">(A&lt;&lt;1)is 4</td>
</tr>
<tr>
<td width="209">&gt;&gt;</td>
<td width="209">Called bitwise shift right with sign operator. It moves all bits in its 1st operand to the right by the no.of places specified in the 2nd operand. The bits filled in on the left depending on the sign bit of the original operand, in order to preserve the sign of the result. If the 1st operand is positive, the result has ones placed in the high bits. Shifting a value right one place is equalling to dividing by 2, shifting right 2 places is equivalent to integer division by 4, and so on.</td>
<td width="209">(A&gt;&gt;1) is 1</td>
</tr>
<tr>
<td width="209">&gt;&gt;&gt;</td>
<td width="209">Called Bitwise shift right with zero operators. This operator is just like the &gt;&gt; operator, except that the bits shifted in on the left are always zero</td>
<td width="209">(A&gt;&gt;&gt;1) is 1</td>
</tr>
</tbody>
</table>
&nbsp;
<h3>Assignment &nbsp;Operators</h3>
There are following arithmetic operators supported by JavaScript language Assume variable A holds 10 and variable B holds 20 then &nbsp;
<table style="height: 538px;" width="704">
<tbody>
<tr>
<td width="76">Operator</td>
<td width="200">&nbsp;&nbsp; Description</td>
<td width="200">Example</td>
</tr>
<tr>
<td width="76">=</td>
<td width="200">Simple assignment operator, Assign values from right side operands to left side operand</td>
<td width="200">C=A+B will assign the value of A+B into C</td>
</tr>
<tr>
<td width="76">+=</td>
<td width="200">Add AND assignment operator, it adds the right operand to the left operand and assigns the result to the left operand</td>
<td width="200">C+=A is equivalent to C = C+A</td>
</tr>
<tr>
<td width="76">-=</td>
<td width="200">Subtract AND assignment operator, it subtracts the right operand from the left operand and assigns the result to the left operand</td>
<td width="200">C-=A is equivalent to C=c-A</td>
</tr>
<tr>
<td width="76">*=</td>
<td width="200">Multiply AND assignment operator, It multiplies the right operand with the left operand and assigns the result to the left operand</td>
<td width="200">C*=A is equivalent to C=C*A</td>
</tr>
<tr>
<td width="76">/=</td>
<td width="200">Divide AND assignment operator, It divides the left operand with the right operand and assigns the result to the left operand</td>
<td width="200">C/=A is equivalent to C=C/A</td>
</tr>
<tr>
<td width="76">%=</td>
<td width="200">Modulus AND assignment operator, it takes modulus using two operands and assign the result to the left operand</td>
<td width="200">C%=A is equivalent to C=C%A</td>
</tr>
</tbody>
</table>
&nbsp; Note: Same logic applies to the Bitwise operator so they will become like &lt;&lt;=,&gt;&gt;=,&gt;&gt;=&amp;=!= and ^= &nbsp;
 Miscellaneous Operator The Conditional Operator (? :) 
There is an operator called a conditional operator. This first evaluates an expression for a true or false value and then execute one of the two given statements depending upon the result of the evaluation. The conditional operator has this syntax: &nbsp;
<table>
<tbody>
<tr>
<td width="200">Operator</td>
<td width="200">Description</td>
<td width="200">Example</td>
</tr>
<tr>
<td width="200">?=</td>
<td width="200">Conditional Expression</td>
<td width="200">If the condition is true? Then value X: Otherwise value Y</td>
</tr>
</tbody>
</table>
&nbsp; The typeof Operator The typeof is a unary operator that is placed before its single operand, which can be of any type. its value is a string indicating the data type of the operand. The typeof operator evaluates to &ldquo;number&rdquo; , &ldquo;string&rdquo;, or &ldquo;boolean&rdquo; if its operand is a number, string, or boolean value and returns true or false based on the evaluation &nbsp; Here is the list of return values for the typeof Operator:
<table>
<tbody>
<tr>
<td width="301">&nbsp;&nbsp;&nbsp; Type</td>
<td width="301">string returned by typeof</td>
</tr>
<tr>
<td width="301">Number</td>
<td width="301">&ldquo;number&rdquo;</td>
</tr>
<tr>
<td width="301">String</td>
<td width="301">&ldquo;string&rdquo;</td>
</tr>
<tr>
<td width="301">Boolean</td>
<td width="301">&ldquo;boolean&rdquo;</td>
</tr>
<tr>
<td width="301">object</td>
<td width="301">&ldquo;object&rdquo;</td>
</tr>
<tr>
<td width="301">Function</td>
<td width="301">&ldquo;function&rdquo;</td>
</tr>
<tr>
<td width="301">Undefined</td>
<td width="301">&ldquo;undefined&rdquo;</td>
</tr>
<tr>
<td width="301">Null</td>
<td width="301">&ldquo;object&rdquo;</td>
</tr>
</tbody>
</table>

JavaScript Operators | JavaScript Guide | Tekslate

JavaScript Operators

javascript-operators

&nbsp;
<h2>JavaScript if&hellip;else Statements</h2>
While writing a program, there may be a situation when you need to adopt one path out of the given two paths. So you need to make use of conditional statements that allow your program to make the correct decisions and perform the right actions.
JavaScript supports conditional statements that are used to perform different actions based on different conditions. Here we will explain if&hellip; else statement JavaScript supports the following forms of if&hellip;else statement:
<ul>
<li>if statement</li>
<li>if&hellip; else statement</li>
<li>if&hellip;.. else if&hellip;.. statement</li>
</ul>
<blockquote>Learn JavaScript by Tekslate - Fastest growing sector in the industry. Explore Online "<a style="color: #e03e2d;" href="javascript-training" target="_blank" rel="noopener">JavaScript Training</a>" and course is aligned with industry needs &amp; developed by industry veterans. Tekslate will turn you into JavaScript Expert.</blockquote>
<h3>&nbsp; If statement </h3>
The if statement if the fundamental control statement that allows JavaScript to make decisions and execute statements conditionally.
Syntax
if(expression)
{ statement(s) to be executed if expression is true }
Here JavaScript expression is evaluated. If the resulting value is true, a given statement(s) are executed. If the expression is false then no statement would be not executed. Most of the times you will use comparison while making decisions
&nbsp; Example
<pre class="language-javascript"><code>&lt;script type=&rdquo;text/javascript&rdquo;&gt;

&lt;!&mdash; var age=20; if(age&gt;18)

{ document.write(&ldquo;&lt;b&gt;Qualifies for driving &lt;/b&gt;&rdquo;); }

//-- &gt;

&lt;/script&gt;

</code></pre>
This will produce the following result: Qualifies for driving
<h3>&nbsp; if&hellip;.else statement </h3>
The if&hellip;else statement is the next form of control statement that allows JavaScript to execute statements in a more controlled way.
Syntax
if&nbsp; (expression)
{ statement(s) to be executed if expression is true }
else
{ statement(s) to be executed if expression is false }
Here JavaScript expression is evaluated, if the resulting value is true, given statement(s) in the if block, are executed. If expression is false then given stement(s) in the else block, are executed.
&nbsp;
<a style="background-color: #e94350; color: #ffffff; padding: 10px 20px;" href="javascript-tutorials" target="_blank" rel="noopener">Check Out JavaScript Tutorial</a>
&nbsp; Example
<pre class="language-javascript"><code>&lt;script type=&rdquo;text/javascript&rdquo;&gt;

&lt;!&mdash; var age= 15; if(age&gt;18)

{ document.write(&ldquo;&lt;b&gt; Qualifies for dividing&lt;/b&gt;&rdquo;); }

else { document.wirte(&ldquo;&lt;b&gt; Does not qualify for driving &lt;/b&gt;&rdquo;); }

//- - &gt;

&lt;/script&gt;</code></pre>
This will produce the following result &nbsp;
<h3> Does not qualify for driving if&hellip;else if &hellip; statement</h3>
The if&hellip;. else if&hellip; statement is the one level advance form of control statement that allows JavaScript to make correct decisions out of several conditions. &nbsp;
Syntax
If&nbsp; (expression 1)
{ statement(s) to be executed if expression 1 is true }
else if (expression 2)
{ statement(s) to be executed if expression 2 is true }
else if (expression 3)
{ Statement(s) to be executed if expression 3 is true }
else { Statement(s) to be executed if no expression is true }
There is nothing special about this code. It is just a series of if statements, where each if is part of the else clause of the previous statement. Statement(s) is executed based on the true condition, if none of the condition is true then else block executed.
&nbsp; Example&nbsp;
<pre class="language-javascript"><code>&lt;script type=&rdquo;text/javascript&rdquo;&gt;

&lt;!&mdash; var book=&rdquo;maths&rdquo;; if(book == &ldquo;history&rdquo;)

{ document.wirte(&ldquo;&lt;b&gt;History Book&lt;/b&gt;&rdquo;); }

else if(book== &ldquo;economics&rdquo;)

{ document.write(&ldquo;&lt;b&gt;Economics Book&lt;/b&gt;&rdquo;); }

else { document.write(&ldquo;&lt;b&gt;Unknown Book&lt;/b&gt;&rdquo;); }

// - - &gt;

&lt;/script&gt;</code></pre>
This will produce the following result: Maths Book

If Statements in javaScript with Examples - Tekslate

If Statements in JavaScript

if-statements-in-javascript-with-examples

&nbsp;
<h2>JavaScript while Loops</h2>
While writing a program, there may be a situation when you need to perform some action over and over again, In such a situation, you would need to write loop statements to reduce the number of lines. JavaScript supports all the necessary loops to help you with all steps of programming.
<h3>While Loop</h3>
The most basic loop in JavaScript is the while loop which would be discussed in this tutorial.&nbsp;
Syntax&nbsp;
While (expression)
statement(s) to be executed if the expression is true }
The purpose of a while loop is to execute a statement or code block repeatedly as long as the expression is true. Once the expression becomes false, the loop will be exited.
Example
The following example illustrates a basic while loop
<pre class="language-javascript"><code>&lt;script type=&rdquo;text/javascript&rdquo;&gt;

&lt;!&mdash; var count=0; document.write(&ldquo;starting Loop&rdquo; + &ldquo;&lt;br /&rdquo;);

while (count&lt;10) { document.write(&ldquo;Loop stopped&rdquo;); // -- &gt;

&lt;/script&gt; </code></pre>
<blockquote>
Learn JavaScript by Tekslate - Fastest growing sector in the industry. Explore Online "<a style="color: #e03e2d;" href="javascript-training" target="_blank" rel="noopener">JavaScript Training</a>" and course is aligned with industry needs &amp; developed by industry veterans. Tekslate will turn you into JavaScript Expert.&nbsp;
</blockquote>
<h3>do&hellip; While Loop</h3>
The do&hellip;while loop is similar to the while loop except that the condition check happens at the end of the loop. This means that the loop will always be executed at least once, even if the condition is false.
Syntax&nbsp;
do
{ Statement(s) to be executed; }
while (expression);
Note the semicolon used at the end of the do&hellip;while loop
Example
Let us write the above example in terms of do&hellip; while loop.
<pre class="language-javascript"><code>&lt;script type=&rdquo;text/javascript&rdquo;&gt;

&lt;!&mdash;

var count=0;

document.write(&ldquo;starting Loop&rdquo; + &ldquo;&lt;br/&gt;&rdquo;);

count++;

}

while(count&lt;0); document.write(&ldquo;Loop stopped:&rdquo;); // - - &gt;

&lt;/script&gt; 

</code></pre>
<h3>JavaScript for Loops</h3>
We have seen different variants of a while loop. This chapter will explain another popular loop called for a loop.
<h3>For Loop</h3>
The for loop is the most compact form of looping and includes the following three important parts: The loop initialization where we initialize our counter to a starting value. The initialization statement is executed before the loop begins. The test statement which will test if the given condition is true or not. If the condition is true then code given inside the loop will be executed otherwise the loop will come out. The iteration statement where you can increase or decrease your computer. You can put all the three parts in a single line separated by a semicolon.
Syntax&nbsp;
for(initialization; test condition; iteration statement)
{ statement(s) to be executed if the test condition is true }
&nbsp; Example
The following example illustrates a basic for loop:
<pre class="language-javascript"><code>&lt;script type=&rdquo;text/javasscript&rdquo;&gt;

&lt;!&mdash; var count; document.write(&ldquo;starting Loop&rdquo; + &ldquo;&lt;br /&gt;&rdquo;);

for(count=0; count&lt;10;count++)

{ 
document.write(&ldquo;Current count :&rdquo; + count);

document.write(&ldquo;&lt;br/&gt;&rdquo;);
 }
 document.write(&ldquo;Loop stopped&rdquo;);

//- - &gt;

&lt;/script&gt; 

</code></pre>
<h3>JavaScript for&hellip; in the loop</h3>
There is one more loop supported by javascript. It is called a for..in loop. This loop is used to loop through object properties. Because we have not discussed objects yet, So you may not feel comfortable with this loop. But once you will have an understanding of JavaScript objects then you will find this loop very useful.
Syntax
for(variable name in object)
{ statement or block to execute }
In each iteration, one property from connecting is assigned to a variable name and this loop continues till all the properties of the object are exhausted.
Example
Here is the following example that pri out the properties of web browser&rsquo;s Navigator object:
<pre class="language-javascript"><code>&lt;script type=&rdquo;text/javascript&rdquo;&gt;

&lt;!&mdash; varapropery; document.write(&ldquo;Navigation object propertoies&lt;br/&gt;&rdquo;);

for(aproperty in navigator) { document.write(aproperty);

document.write(&ldquo;&lt;br/&gt;&rdquo;);

}

document.write(&ldquo;Exiting from for loop!&rdquo;);

//- - &gt;

&lt;/script&gt;</code></pre>
<h3>JavaScript Loop Control</h3>
JavaScript provides you full control to handle your loops and switch statement. There may be a situation when you need to come out of a loop without reaching its bottom. There may also be a situation when you want to skip a part of your code block and want to start the next iteration of any loop respectively.
<h3>The break statement</h3>
The break statement, which was introduced with the switch statement, is used to exit a loop early, breaking out of the enclosing curly braces.
Example&nbsp;
The example illustrates the use of break statement with a while loop. Notice how the loop breaks out early once X reaches 5 and reaches the document. while(..) statement just below to closing curly brace.
<pre class="language-javascript"><code>&lt;script type=&rdquo;text/javascript&rdquo;&gt;

&lt;!&mdash; var x=1; document.write(&ldquo;Enterning the loop&lt;br/&gt;&rdquo;);

while(x&lt;20) { if (x==5)

{ break; 

 // breaks out a loop completely

}

x=x+1;

document.write(x+ &ldquo;&lt;br/&gt;); document.write(&ldquo;Existing the loop!&lt;br/&gt;&rdquo;);

// - - &gt;

&lt;/script&gt;. </code></pre>
<h3>The Continue statement</h3>
The continued statement tells the interpreter to immediately start the next iteration of the loop and skip the remaining code block. When a continued statement is encountered, program flow will move to the loop check expression immediately and if the condition remains true then it starts the next iteration otherwise control comes out of the loop.
Example&nbsp;
This example illustrates the use of a continue statement with a while loop. Notice how the continue statement is used to skip printing when the index held in variable x reaches 5:
<pre class="language-javascript"><code>&lt;script type=&rdquo;text/javascript&rdquo;&gt;

&lt;!&mdash;

var x=1;

document.write(&ldquo;Entering the loop&lt;br/&gt;&rdquo;);

while(x&lt;10)

{

x=x+1;

if(x==5)

{

continue; 

// skill rest of the loop body

}

document.write(x+&rdquo;&lt;br/&gt;&rdquo;);

}

document.write(&ldquo;Existing the loop!&lt;br/&gt;&rdquo;);

//- - &gt;

&lt;/script&gt; 

</code></pre>
Using labels to control the flow&nbsp;
Starting from JavaScript 1.2, a label can be used with a break and continue to control the flow more precisely. A label is simply an identifier followed by a colon that is applied to a statement or block of code. We will see two different examples to understand labels with break and continue. &nbsp;
Note&nbsp; Line breaks are not allowed between the continue or break statement and its label name. Also, there should not be any other statement in between a label name and associated loop.
&nbsp; Example 1
<pre class="language-markup"><code>&lt;script type=&rdquo;text/javascript&rdquo;&gt;

&lt;!&mdash;

document.write(&ldquo;Entering the loop!&lt;br/&gt;&rdquo;);

outerloop:

//This is the label name

For (vari=0; i&lt;5;i++)

{

document.write(&ldquo;outerloop:&rdquo; + i+ &ldquo;&lt;br/&gt;&rdquo;);

innerloop: for(var j=0;j&lt;5;J++)

{

if(j&gt;3) break; 

 // Quit the innermost loop if(i==2) break innerloop; 

 // Do the same thing if(i==4) break outerloop; 

 // Quit the outer loop document.wirte(&ldquo;Exiting the loop!&lt;br/&gt;&rdquo;);

// - -&gt;

&lt;/script&gt;

</code></pre>
Example 2
<pre class="language-markup"><code>&lt;script type=&rdquo;text/javascript&rdquo;&gt;

&lt;!&mdash;

document.write(&ldquo;Entering the loop! &lt;br/&gt;&rdquo;);

outerloop: 

// This is the label name

for(vari=0;i&lt;3;i++)

{

if(j==3)

continueouterloop;

}

document.write(&ldquo;innerloop : &rdquo; + j + &ldquo;&lt;br/&gt;&rdquo;);

}

}

document.write(&ldquo;Existing the loop!&lt;br/&gt;&rdquo;);

//

&lt;/script&gt;</code></pre>

Loops in JavaScript with Examples - Tekslate

Loops in JavaScript

loops-in-javascript-with-examples

&nbsp;
<h2>JavaScript&nbsp;Dialog Boxes</h2>
<a href="javascript-tutorials" target="_blank" rel="noopener">JavaScript</a> has three kinds of popup boxes: Alert box, Confirm box, and Prompt box. &nbsp;
<h3>Alert Box</h3>
An alert box is often used if you want to make sure information comes through to the user. When an alert box pops up, the user will have to click &ldquo;ok&rdquo; to proceed. 
Syntax 
 alert(&ldquo;some text&rdquo;); &nbsp;
<blockquote>Learn JavaScript by Tekslate - Fastest growing sector in the industry. Explore Online "<a style="color: #e03e2d;" href="javascript-training" target="_blank" rel="noopener">JavaScript Training</a>" and course is aligned with industry needs &amp; developed by industry veterans. Tekslate will turn you into JavaScript Expert.</blockquote>
&nbsp;
Example 
<pre class="language-javascript"><code>&lt;html&gt;

&lt;head&gt;

&lt;script type=&rdquo;text/javascript&rdquo;&gt;

functionshow_alert() { alert(&ldquo;I am an alert box :&rdquo;) ;

}

&lt;/script&gt;

&lt;/head&gt;

&lt;body&gt;

&lt;input type=&rdquo;button&rdquo; onclick=&rdquo;show_alert()&rdquo; value=&rdquo;show alert box&rdquo; /&gt;

&lt;/body&gt;

&lt;/html&gt; 

</code></pre>
<h3>Confirm Box</h3>
A confirm box is often used if you want the user to verify or accept something. When a confirm box pops up, the user will have to click either &ldquo;OK&rdquo; or &ldquo;cancel&rdquo; to proceed. If the user clicks &ldquo;OK&rdquo;, the box returns true. If the user clicks &ldquo;Cancel&rdquo;, the box returns false. 
Syntax 
 confirm(&ldquo;some text&rdquo;);&nbsp;
 Example
<pre class="language-javascript"><code>&lt;html&gt;

&lt;head&gt;

&lt;script type=&rdquo;text/javascript&rdquo;&gt;

functionshow_confirm()

{

var r=confirm(&ldquo;Press a button&rdquo;);

if (r==true)

{

alert(&ldquo;you pressed OK!&rdquo;);

}

else

{

alert(&ldquo;you pressed cancel!&rdquo;);

}

}

&lt;/script&gt;

&lt;/head&gt;

&lt;body&gt;

&lt;input type=&rdquo;button&rdquo; onclick=&rdquo;show_confirm()&rdquo; value=&rdquo;show confirm box&rdquo; /&gt;

&lt;/body&gt;

&lt;/html&gt; 

</code></pre>
<h3>Prompt Box</h3>
A prompt box is often used if you want the user to input a value before entering a page. When a prompt box pops up, the user will have to click either &ldquo;OK&rdquo; or &ldquo;Cancel&rdquo; to proceed after entering an input value. If the user clicks &ldquo;OK&rdquo; the box returns the input value. If the user clicks &ldquo;Cancel&rdquo; the box returns null. 
Syntax
 prompt(&ldquo;sometext&rdquo;,&rdquo;defaultvalue&rdquo;); &nbsp;
 Example 
<pre class="language-markup"><code>&lt;html&gt;

&lt;head&gt;

&lt;script type=&rdquo;text/javascript&rdquo;&gt;

functionshow_prompt()

{

var name=prompt(&ldquo;Please enter your name&rdquo;,&rdquo;Harry potter&rdquo;);

if (name!=null &amp;&amp; name!=&rdquo;&rdquo;)

{

document.write(&ldquo;Hello &rdquo; + name + &ldquo; ! How are you today?&rdquo;);

}

}

&lt;/script&gt;

&lt;/head&gt;

&lt;body&gt;

&lt;input type=&rdquo;button&rdquo; onclick=&rdquo;show_confirm()&rdquo; value=&rdquo;show prompt box&rdquo; /&gt;

&lt;/body&gt;

&lt;/html&gt;</code></pre>

Dialog Boxes in JavaScript | Study Guide | Tekslate

Dialog Boxes in JavaScript

dialog-boxes-explination-javascript

&nbsp;
<h2>JavaScript Functions</h2>
A function is a group of reusable code which can be called anywhere in your program. This eliminates the need of writing the same code again and again. This will help programmers to write modular code. You can divide your big program into a number of small and manageable functions.
Like any other advanced programming language. JavaScript also supports all the features necessary to write modular code using functions.
You must have seen functions like alert() and write() in previous chapters. We are using these functions again and again but they have been written in core JavaScript only once.
JavaScript allows us to write our own functions as well. This section will explain to you how to write your own functions in JavaScript.
&nbsp;
<blockquote>If you want to enrich your career and become a professional in JavaScript, then visit Tekslate - a global online training platform: "<a style="color: #e03e2d;" href="javascript-training" target="_blank" rel="noopener">JavaScript Training</a>"&nbsp; &nbsp;This course will help you to achieve excellence in this domain.</blockquote>
<h3>Function Definition</h3>
Before we use a function we need to define that function. The most common way to defines a function in JavaScript is by using the function keyword. followed by a unique function name, a list of programmers(that might be empty), and a statement surrounded by curly braces. The basic syntax is shown here:
<pre class="language-javascript"><code>&lt;script type=&rdquo;text/javascript&rdquo;&gt;

&lt;!&mdash;

functionfuncitonname (parameter-list)

{

statements

}

//- - &gt;

&lt;/script&gt;</code></pre>
Example&nbsp;
A simple function that takes no parameters called sayHello is defined here:
<pre class="language-javascript"><code>&lt;script type=&rdquo;text/javascript&rdquo;&gt;

&lt;!&mdash;

functionsayHello()

{

alert(&ldquo;Hello there&rdquo;);

}

//- - &gt;

&lt;/script&gt;</code></pre>
Calling a function&nbsp;
To invoke a function somewhere later in the script, you would simply need to write the name of that function as follows:
<pre class="language-javascript"><code>&lt;script type=&rdquo;text/javascript&rdquo;&gt;

&lt;!&mdash;

sayHello();

// - -&gt;

&lt;/script&gt;

</code></pre>
<h3 style="text-align: justify;">Function Parameters&nbsp;</h3>
Till now we have seen function without parameters. But there is a facility to pass different parameters while calling a function. These passed parameters can be captured inside the function and any manipulation can be done over those parameters.
A function can take multiple parameters separated by a comma.
Example&nbsp;
Let us do a bit of modification in our sayHello function. This time it will take two parameters.
<pre class="language-javascript"><code>&lt;script type=&rdquo;text/javascript&rdquo;&gt;

&lt;!&mdash;

functionsayHello(name,age)

{

alert(name + &ldquo;is&rdquo; + age + &ldquo;years old.&rdquo;);

}

// - -&gt;

&lt;/script&gt;</code></pre>
Note
&nbsp;We are using + operator to concatenate string and number string and number altogether. JavaScript does not mind adding numbers into strings.
Now we can call this function as follows :
<pre class="language-javascript"><code>&lt;script type=&rdquo;text/javascript&rdquo;&gt;

&lt;!&mdash;

sayHello(&lsquo;Zara&rsquo;,7);

// - -&gt;

&lt;/script&gt;</code></pre>
<h3>The return statement</h3>
A <a href="javascript-tutorials" target="_blank" rel="noopener">JavaScript</a> function can have an optional return statement. This is required if you want to return a value from a function. This statement should be the last statement in a function.
For example, you can pass two numbers in a function, and then you can expect from the function to return their multiplication in your calling program.
Example
This function takes two parameters and concatenates them and return resultant in the calling program:
<pre class="language-javascript"><code>&lt;script type=&rdquo;text/javascript&rdquo;&gt;

&lt;!&mdash;

function concatenate(first, last)

{

var full ;

full =first + last;

return full ;

}

// - - &gt;

&lt;/script&gt;</code></pre>
Now we can call this function as follows&nbsp;
<pre class="language-javascript"><code>&lt;script type = &ldquo;text/java script&rdquo;&gt;

&lt;!- -

var result;

result=concatenate(&lsquo;Zara&rsquo;,&rsquo;Ali&rsquo;);

alert(result);

// -- &gt;

&lt;/script&gt; fukk=first+last;

return full;

}

// - - &gt;

&lt;/script&gt;

 

</code></pre>
Now we can call this function as follows&nbsp;
<pre class="language-javascript"><code>&lt;script type = &ldquo;text/java script&rdquo;&gt;

&lt;!- -

var result;

result=concatenate(&lsquo;Zara&rsquo;,&rsquo;Ali&rsquo;);

alert(result);

// -- &gt;

&lt;/script&gt; fukk=first+last;

return full;

}

// - - &gt;

&lt;/script&gt;

 

</code></pre>
JavaScript special characters
In JavaScript, you can add special characters to a text string by using the backslash sign.
Insert special characters
The backslash(/) is used to insert apostrophes, new lines, quotes, and other special characters into a text string.
Look at the following JavaScript code:
Var txt=&rdquo; We are the so-called &rdquo; Vikings &ldquo; from the north;
document.write(txt);
In JavaScript, a string is started and stopped with either single or double-quotes. This means that the string above will be chopped too: We are the so-called.
To solve this problem, you must place a backslash (/) before each double quote in &ldquo;Viking&rdquo;. This turns each double quote into a string literal.
Var txt=&rdquo; We are the so-called&nbsp; &rdquo; Viking&rdquo; from the north&rdquo;;
document.write(txt);
JavaScript will now output the proper text string: We are the so-called &ldquo;Vikings&rdquo; from the north
The table below lists other special characters that can be added to a text string with the backslash sign:
<table>
<tbody>
<tr>
<td width="301">Code</td>
<td width="301">Outputs</td>
</tr>
<tr>
<td width="301">&nbsp;</td>
<td width="301">single Quote</td>
</tr>
<tr>
<td width="301">&rdquo;</td>
<td width="301">double quote</td>
</tr>
<tr>
<td width="301">&nbsp;</td>
<td width="301">Backslash</td>
</tr>
<tr>
<td width="301">n</td>
<td width="301">new line</td>
</tr>
<tr>
<td width="301">r</td>
<td width="301">Carriage return</td>
</tr>
<tr>
<td width="301">t</td>
<td width="301">Tab</td>
</tr>
<tr>
<td width="301">b</td>
<td width="301">Backspace</td>
</tr>
<tr>
<td width="301">f</td>
<td width="301">form feed.</td>
</tr>
</tbody>
</table>

Functions in JavaScript | JavaScript Study Guide | Tekslate

Functions in JavaScript

functions-javascript

&nbsp;
<h2>JavaScript Events</h2>
&nbsp; What is an Event?
 JavaScript&rsquo;s interaction with HTML is handled through events that occur when the user or browser manipulates a page. 
When the page loads, that is an event. When the user clicks a button, that a click, too, is an event. Another example of events is like pressing any key, closing window, resizing the window, etc. 
Developers can use these events to execute JavaScript coded responses, which cause buttons to close windows, messages to be displayed to users, data to be validated, and virtually any other type of responses imaginable to occur. 
Events are a part of the Document Object Model(DOM) Level 3 and every <a href="https://tekslate.com/mvc-html-helper-class-controllers" target="_blank" rel="noopener">HTML</a> element has a certain set of events that can trigger JavaScript code. &nbsp;
<blockquote>Learn JavaScript by Tekslate - Fastest growing sector in the industry. Explore Online "<a style="color: #e03e2d;" href="javascript-training" target="_blank" rel="noopener">JavaScript Training</a>" and course is aligned with industry needs &amp; developed by industry veterans. Tekslate will turn you into JavaScript Expert.</blockquote>
&nbsp;
 On click Event Type&nbsp; 
This is the most frequently used event type that occurs when a user clicks the mouse left button. You can put your validation, warning, etc against this event type. 
&nbsp; Example
<pre class="language-javascript"><code>&lt;html&gt;

&lt;head&gt;

&lt;script type=&rdquo;text/javascript&rdquo;&gt;

&lt;!&mdash; functionsayHello() { alert(&ldquo;Hello World&rdquo;) // - - &gt;

&lt;/script&gt;

&lt;/head&gt;

&lt;body&gt;

&lt;input type=&rdquo;button&rdquo; onclick=&rdquo;sayHello()&rdquo; value = &ldquo;Say Hello&rdquo; /&gt;

&lt;/body&gt;

&lt;/html&gt; </code></pre>
Onsubmit event type 
Another most important event type is onsubmit. This event occurs when you try to submit a form. So you can put your form validation against this event type. 
Here is a simple example showing its usage. Here we calling a validate() function before submitting a form data to the webserver. 
If validate() function returns true the form will be submitted otherwise it will not submit the data. 
Example 
<pre class="language-javascript"><code>&lt;html&gt;

&lt;head&gt;

&lt;script type=&rdquo;text/javascript&rdquo;&gt;

&lt;!&mdash; functionvalidation() { all validation goes here &hellip;&hellip;&hellip;&hellip;&hellip;. return either true or false } // - - &gt;

&lt;/script&gt;

&lt;/head&gt;

&lt;body&gt;

&lt;form method=&rdquo;Post&rdquo; action =&rdquo;t.cgi&rdquo; onsubmit=&rdquo;return validate()&rdquo;&gt; &hellip;&hellip;&hellip;&hellip;&hellip;&hellip;&hellip;&hellip;

&lt;input type=&rdquo;submit&rdquo; value=&rdquo;Submit&rdquo; /&gt;

&lt;/body&gt;

&lt;/html&gt; </code></pre>
 Onmouseover and onmouseout 
These two event types will help you to create nice effects with images or even with text as well. 
The onmouseover event occurs when you bring your mouse over any element and the onmouseout occurs when you bring your mouse over any element and the onmouseout occurs when you take your mouse out from the element. &nbsp;
 Example&nbsp;
 Following example shows how a division reacts when we bring our mouse in that division : 
<pre class="language-javascript"><code>&lt;html&gt;

&lt;head&gt;

&lt;script type=&rdquo;text/javascript&rdquo;&gt;

&lt;!&mdash; functionover() { alert(&ldquo;Mouse over&rdquo;); }

function out() { alert(&ldquo;Mouse out&rdquo;);

&lt;/script&gt;

&lt;/head&gt;

&lt;body&gt;

&lt;div onmouseover=&rdquo;over()&rdquo; onmouseout=&rdquo;out()&rdquo;&gt;

&lt;h2&gt;This is inside the division

&lt;/h2&gt;

&lt;/body&gt;

&lt;/html&gt;</code></pre>
150 complete(4pages) 155 You can change different images using these two event types or you create a help balloon to help your users. &nbsp; 
HTML 4 standard Events 
The standard HTML 4 events are listed here for your reference. Here script indicates a <a href="javascript-tutorials" target="_blank" rel="noopener">Javascript</a> function to be executed. &nbsp;
<table style="width: 791px; height: 986px;" border="1" cellspacing="1" cellpadding="1">
<tbody>
<tr>
<td>Event</td>
<td>Value</td>
<td>Description</td>
</tr>
<tr>
<td>onchange</td>
<td>script</td>
<td>Script runs when the element changes</td>
</tr>
<tr>
<td>onsubmit</td>
<td>script</td>
<td>script runs when the form is submitted</td>
</tr>
<tr>
<td>onreset</td>
<td>script</td>
<td>script runs when the form is reset</td>
</tr>
<tr>
<td>onselect</td>
<td>script</td>
<td>Script runs when the element is selected</td>
</tr>
<tr>
<td>onselect</td>
<td>script</td>
<td>script runs when the element is selected</td>
</tr>
<tr>
<td>onblur</td>
<td>script</td>
<td>script runs when the element loses focus</td>
</tr>
<tr>
<td>onfocus</td>
<td>script</td>
<td>script runs when the element gets focus</td>
</tr>
<tr>
<td>onkeydown</td>
<td>script</td>
<td>script runs when key is pressed</td>
</tr>
<tr>
<td>onkeypress</td>
<td>script</td>
<td>script runs when key is pressed and released</td>
</tr>
<tr>
<td>onekeyup</td>
<td>script</td>
<td>script runs when key is relased</td>
</tr>
<tr>
<td>onclick</td>
<td>script</td>
<td>script runs when a mouse click</td>
</tr>
<tr>
<td>ondbclick</td>
<td>script</td>
<td>script runs when a mouse double-click</td>
</tr>
<tr>
<td>onmousedown</td>
<td>script</td>
<td>script runs when mouse button is pressed</td>
</tr>
<tr>
<td>onmousemove</td>
<td>script</td>
<td>script runs when mouse pointer moves</td>
</tr>
<tr>
<td>onmouseout</td>
<td>script</td>
<td>script runs when mouse pointer moves out of an element</td>
</tr>
<tr>
<td>onmouseover</td>
<td>script</td>
<td>script runs when mouse pointer moves over an element</td>
</tr>
<tr>
<td>onmouseup</td>
<td>script</td>
<td>script runs when mouse button is released</td>
</tr>
</tbody>
</table>
&nbsp; &nbsp; onblur Even
<pre class="language-javascript"><code>&lt;html&gt;

&lt;head&gt;

&lt;script type=&rdquo;text/javascript&rdquo;&gt;

function uppercase()

{ var x=document.getElementByID(&ldquo;fname&rdquo;).value document.getElementById(&ldquo;fname&rdquo;).value document.getElemetnById(&ldquo;fname&rdquo;).value=x.touppercase() }

&lt;/script&gt;

&lt;/head&gt;

&lt;body&gt;

Enter your name:&lt;input type=&rdquo;text&rdquo; id=&rdquo;fname&rdquo; onblur=&rdquo;uppercase()&rdquo;&gt;

&lt;/body&gt;

&lt;/html&gt; </code></pre>
Onchange Event 
<pre class="language-javascript"><code>&lt;html&gt;

&lt;head&gt;

&lt;script type=&rdquo;text/javascript&rdquo;&gt;

function uppercase(x)

{ var y=document.getElementById(x).value document.getElementById(x).value=y.toUppercase() }

&lt;/script&gt;

&lt;/head&gt;

&lt;body&gt;

Enter your name : &lt;input type=&rdquo;text&rdquo; id=&rdquo;fname&rdquo; onchange=&rdquo;uppercase(this.id)&rdquo;&gt;

&lt;/body&gt;

&lt;/html&gt; </code></pre>
Onclick Event 
<pre class="language-javascript"><code>&lt;html&gt;

&lt;body&gt;

Field1 : &lt;input type=&rdquo;text&rdquo; id=&rdquo;field1&rdquo; value=&rdquo;Hello World!&rdquo;&gt;

&lt;br/&gt; Field2: &lt;input type=&rdquo;text&rdquo; id=&rdquo;field2&rdquo;&gt;

&lt;br/&gt;&lt;br/&gt;

click the button below to copy the content of Field1 to Field2

&lt;br/&gt;

&lt;button onclick=&rdquo;document.getElementById(&lsquo;field2&rsquo;).value=document.getElementById(&lsquo;field1&rsquo;).value&rdquo;&gt;

Copy Text&lt;/button&gt;

&lt;/body&gt;

&lt;/html&gt;</code></pre>
&nbsp; Ondbclick Event 
<pre class="language-javascript"><code>&lt;html&gt;

&lt;body&gt;

Field1: &lt;input type=&rdquo;text&rdquo; id =&rdquo;field1&rdquo; value=&rdquo;Hello World!&rdquo;&gt;

&lt;br/&gt;

&lt;button ondbclick=&rdquo;document.getElementById(&lsquo;field2&rsquo;).value=document.getElementByID(&lsquo;field1&rsquo;).value&rdquo;&gt;

Copy Text

&lt;/button&gt;

&lt;/body&gt;

&lt;/html&gt;</code></pre>
&nbsp; Onerror Event 
&lt;img src=&rdquo;image.gif&rdquo; onerror=&rdquo;alert(&lsquo;The image could not be loaded.&rsquo;) &ldquo;&gt; 
Onfocus Event 
<pre class="language-javascript"><code>&lt;html&gt;

&lt;head&gt;

&lt;script type=&rdquo;text/javascript&rdquo;&gt;

function setStyle(x)

{ document.getElementByid(x).style.background=&rdquo;yellow&rdquo; }

&lt;/script&gt;

&lt;/head&gt;

&lt;body&gt;

First name : &lt;input type=&rdquo;text&rdquo; onfocus=setstyle(this.id)&rdquo; id=&rdquo;fname&rdquo;&gt;

&lt;br/&gt;

Last name=&lt;Input type=&rdquo;text&rdquo; onfocus=&rdquo;setstyle(this.id)&rdquo; id=&rdquo;lname&rdquo;&gt;

&lt;/body&gt;

&lt;/html&gt;</code></pre>
&nbsp; Onkeydown Event 
<pre class="language-javascript"><code>&lt;html&gt;

&lt;body&gt;

&lt;script type=&rdquo;text/javascript&rdquo;&gt;

function noNumbers( e )

{ var keynum var keychar var numcheck if(window.event) //IE

{ keynum=e.keycode } else if(e.which) // Netscape / Firefox/Opera

{ Keynum=e.which }

keychar=string.fromcharcode(keynum) numcheck=String.fromcharcode(keynum) numcheck=/d/ return !numcheck.test(keychar) }

&lt;/script&gt;

&lt;form&gt;

&lt;input type=&rdquo;text&rdquo; on keypress=&rdquo;return noNumbers(event)&rdquo;/&gt;

&lt;/form&gt;

&lt;/body&gt;

&lt;/html&gt;</code></pre>
&nbsp; on Key Up Event 
<pre class="language-javascript"><code>&lt;html&gt;

&lt;head&gt;

&lt;script type =&rdquo;text/javascript&rdquo;&gt;

function uppercase(X)

{ var y= document .getElementById(x).value docment.getElementby Id(x).value= y.to Uppercase(); }

&lt;/script&gt;

&lt;/head&gt;

&lt;body&gt;

Enter your name:&lt;input type=&rdquo;text&rdquo; id=&rdquo;fname&rdquo; on keyup=&rdquo;uppercase(this.id)&rdquo;&gt;

&lt;/body&gt;

&lt;/html&gt;</code></pre>
&nbsp; Onload Event 
<pre class="language-markup"><code>&lt;html&gt;

&lt;head&gt;

&lt;script type=&rdquo;text/javascript&rdquo;&gt;

function load()

{ alert(&ldquo;page is loaded&rdquo;); }

&lt;/script&gt;

&lt;/head&gt;

&lt;body onload=&rdquo;load()&rdquo;&gt;

&lt;h1&gt; Hello World!&lt;/h1&gt;

&lt;/body&gt;

&lt;/html&gt;</code></pre>
 &nbsp; onmousedown Event
<pre class="language-javascript"><code>&lt;html&gt;

&lt;head&gt;

&lt;script type=&rdquo;text/javascript&rdquo;&gt;

function whichElement (e)

{ var targ if (!e) var e =window.event if (e.target) targ=e.target

else 

if (e.srcElement) targ =e .srcElement if (targ.nodeType ==3)

//defeat Safari bug targ=targ.parentNode var tname tname=targ.tagName alert(&ldquo;You clicked on a&rdquo; + tname + &ldquo;element.&rdquo;) }

&lt;/script&gt;

&lt;/head&gt;

&lt;body onmousedown=&rdquo;whichElement(event)&rdquo;&gt;

&lt;h2&gt; This is a header&lt;/h2&gt;

&lt;p&gt; This is a paragraph&lt;/p&gt;

&lt;img border=&rdquo;0&rdquo; src=&rdquo;ball16.gif&rdquo; alt=&rdquo;Ball&rdquo;&gt;

&lt;/body&gt;

&lt;/html&gt;

onmousemove Event

&lt;img src=&rdquo;image_w3default.gif&rdquo; alt =&rdquo;W3schools&rdquo; onmousemove=&rdquo;alert(&lsquo;Visit W3schools!&rsquo;)&rdquo;/&gt;</code></pre>
&nbsp; onmouseoutEvent 
<pre class="language-javascript"><code>&lt;html&gt;

&lt;head&gt;

&lt;script type=&rdquo;text/javascript&rdquo;&gt;

function mouseOver()

{ document .getelementbyId(&ldquo;b1&rdquo;).src=&rdquo;b_blue.gif&rdquo; }

function mouseOut()

{ document.getElementById (&ldquo;bi&rdquo;).src=&rdquo;b_pink.gif&rdquo; }

&lt;/script&gt;

&lt;/head&gt;

&lt;body&gt;

&lt;a href=http://www.w3schools.com target=_&rdquo;blank&rdquo; onmouseover=&rdquo;mouseOver()&rdquo; onmouseout=&rdquo;mouseOut()&rdquo;&gt;

&lt;img border=&rdquo;0&rdquo; alt =&rdquo;visit W3schools!&rdquo;src=&rdquo;b_pink.gif&rdquo; id=&rdquo;b1&rdquo;/&gt;&lt;/a&gt;

&lt;/body&gt;

&lt;/html&gt; </code></pre>
onmouseover Event 
<pre class="language-javascript"><code>&lt;html&gt;

&lt;head&gt;

&lt;script type =&rdquo;text/javascript&rdquo;&gt;

function mouseover()

{ document.getElementByID(&ldquo;b1&rdquo;).src=&rdquo;b_blue.gif&rdquo; }

function mouseOut()

{ document.getElementById(&ldquo;b1&rdquo;).src=&rdquo;b_pink.gif&rdquo; }

&lt;/script&gt;

&lt;/head&gt;

&lt;body&gt;

&lt;a href=http://www.w3schools.com target=&rdquo;_blank&rdquo; onmouseover=&rdquo;mouseOver()&rdquo; onmouseout=mouseOut()&rdquo;&gt;

&lt;img border=&rdquo;0&rdquo; alt=&rdquo;Visit W3 Schools!&rdquo; src=&rdquo;b_pink.gif&rdquo; id=&rdquo;b1&rdquo;/&gt;

&lt;/a&gt;

&lt;/body&gt;

&lt;/html&gt; 

</code></pre>
onmouseup Event 
<pre class="language-javascript"><code>&lt;html&gt;

&lt;head&gt;

&lt;script type=&rdquo;text/javascript&rdquo;&gt;

function whichElement(e)

{ var targ if(!e) var e =window.event if(e.target) targ =e.target else is (e.srcElement) targ=e.srcElement if (targ.nodeType ==3)

// defear safari bug targ=targ.parentNode var tname tname= targ.tagName alert(&ldquo;you clcike on a &ldquo; + tname + &ldquo;element.&rdquo;) }

&lt;/script&gt;

&lt;body onmouseup=&rdquo;whichElement(event)&rdquo;&gt;

&lt;h2&gt; This is a header&lt;/h2&gt;

&lt;p&gt; This is a paragraph&lt;/p2&gt;

&lt;img border=&rdquo;0&rdquo; src=&rdquo;ball16.gif&rdquo; alt=&rdquo;Ball&rdquo;&gt;

&lt;/body&gt;

&lt;/html&gt; </code></pre>
 Onresize Event 
<pre class="language-markup"><code>&lt;body onresize=&rdquo;alert (&lsquo;you have changed the size of the window&rsquo;)&rdquo;&gt;

&lt;/body&gt; </code></pre>
 onselect Event 
<pre class="language-markup"><code>&lt;form &gt;

Select text: &lt;input type=&rdquo;text&rdquo; value =&rdquo;Hello World!&rdquo; onselect =&rdquo;alert(&lsquo;you have selected some of the text.&rsquo;)&rdquo;&gt;

&lt;/form&gt; </code></pre>
 Onunload Event
<pre class="language-markup"><code>&lt;body onunload=&rdquo;alert(&lsquo;The onunload event was triggered&rsquo;)&rdquo;&gt;

&lt;/body&gt;</code></pre>
 &nbsp;

Events in JavaScript with Examples | JavaScript Tutorials

Events in JavaScript with Examples

events-in-javascript-with-examples

&nbsp;
<h2 style="text-align: justify;">Javascript Page Printing</h2>
Many times you would like to give a button at your webpage to print out the content of that webpage via an actual printer.
<a href="javascript-tutorials" target="_blank" rel="noopener">Javascript </a>helps you to implement this functionality using the print function of a window object.
The javascript print function window.print() will print the current webpage when execute. You can call this function directly using on click event as follows:
<pre class="language-javascript"><code>&lt;head&gt;

&lt;script type=&rdquo;text/javascript&rdquo;&gt;

&lt;!- -

//-- &gt;

&lt;/script&gt;

&lt;/head&gt;

&lt;body&gt;

&lt;form&gt;

&lt;input type=&rdquo;button value=&rdquo;print &ldquo; onclick =&rdquo;window.print():/&gt;

&lt;/form&gt;

&lt;/body&gt;

</code></pre>
<blockquote>If you want to enrich your career and become a professional in JavaScript, then visit Tekslate - a global online training platform: "<a style="color: #e03e2d;" href="javascript-training" target="_blank" rel="noopener">JavaScript Training</a>"&nbsp; &nbsp;This course will help you to achieve excellence in this domain.</blockquote>
<h3 style="text-align: justify;">How to print a page:</h3>
If someone is providing none of the above facilities then you can use browsers standard tool bar to get tht webpages printed out. Follow the link as follows:
File &nbsp; <img class="alignnone size-full wp-image-9386" src="https://newtekslateassets.s3.us-west-2.amazonaws.com/wp-content/uploads/2014/12/220.png" alt="2" width="30" height="12" />&nbsp;print &nbsp;&nbsp;<img class="alignnone size-full wp-image-9386" src="https://newtekslateassets.s3.us-west-2.amazonaws.com/wp-content/uploads/2014/12/220.png" alt="2" width="30" height="12" />&nbsp;Click OK button.
JavaScript-Page Redirection 
When you click a URL to reach a page X but internally you are directed to another page Y that simply happens because of page re-direction.
<pre class="language-javascript"><code>&lt;head&gt;

&lt;script type=&rdquo;text/javascrpit&rdquo;&gt;

function fun1(){

window location =http://www.newlocation.com;

}

&lt;/script&gt;

&lt;/head&gt;</code></pre>

Page Printing in JavaScrpit | JavaScrpit Guide | Tekslate

Page Printing in JavaScrpit

page-printing-javascrpit

<h2>JavaScript and Cookies</h2>
<h2>What are Cookies?</h2>
Web browser and server use the HTTP protocol to communicate and HTTP is a stateless protocol. But for a commercial website, it is required to maintain session information among different pages. For example, one user registration ends after completing many pages. But how to maintain user&rsquo;s session information across all the WebPages. In many situations, using cookies is the most efficient method of remembering and tracking preferences, purchases, commissions, and other information required for better visitor experience or site statistics. &nbsp;
<h3>How does it work?</h3>
Your serve sends some data to the visitor's browser in the form or a cookie. The browser may accept the cookie. If it does, it is stored as a plain text record on the visitor&rsquo;s hard drive. Now, when the visitor arrives at the nether page on your site, the browser sends the same cookie to the server for retrieval. Once retrieved, your server knows/remembers what was stored earlier. &nbsp; Cookies are a plain text data record of 5 variables &ndash;length fields
<table style="border-collapse: collapse; width: 100.017%; height: 44.0374px; background-color: #ecf0f1;" border="1px" cellpadding="10">
<tbody>
<tr style="height: 44.0374px;">
<td style="width: 98.3494%; height: 44.0374px;">If you want to enrich your career and become a professional in JavaScript, then visit Tekslate - a global online training platform: "<a style="color: #236fa1;" href="javascript-training" target="_blank" rel="noopener">JavaScript Training</a>"&nbsp; &nbsp;This course will help you to achieve excellence in this domain.</td>
</tr>
</tbody>
</table>
 Expires: The date the cookie will expire. If this is blank, the cookie will expire when the visitor quits the browser. 
Domain: The domain name of your site. 
Path: The path to the directory or webpage that set the cookie. This may be blank if you want to retrieve the cookie from any directory or page. 
Secure: If this field contains the word &rdquo;secure&rdquo; then the cookie may only be retrieved with a secure server. If this field is blank, no suck restriction exits.
 Name=Value: Cookies are set and retrieved in the form of key and value pairs. &nbsp; Cookies were originally designed for CGI programming and cookies data is automatically transmitted between the web browser and webserver, so CGI scripts on the server can read and write cookies that are stored on the client. JavaScript can also manipulate cookies using the cookie property of the Document object. JavaScript can read, create, modify, and delete the cookie or cookies that apply to the current webpage. &nbsp;
<h3>Storing Cookies</h3>
The simplest way to create a cookie is to assign a string value to the document .cookie object, which looks like this &nbsp; 
Syntax:
document.cookie=&rdquo; key1=value1;kay2=value2;expires=date&rdquo;; Here expires attribute is option .If you provide this attribute with a valid date or time then the cookie will expire at the given date or time and after that cookies value will not be accessible. &nbsp; 
Note:
 Cookie values may not include semicolons, commas, or whitespace,. For this reason, you may want to use the Javascript escape() function to encode the value before storing it in the cookie. If you do this, you will also have to use the corresponding unescape () function when you read the cookie value. 
&nbsp; Example
 Following is the example to set a customer name in the input cookie. 
<pre class="language-javascript"><code>&lt;html&gt;

&lt;head&gt;

&lt;script type=&rdquo;text/javascript&rdquo;&gt;

&lt;!&mdash;

Function WriteCookie ( )

{

If{document.myform.customer.value==&rdquo;&rdquo;}

{ Alert{&ldquo;Enter some value!&rdquo;}; Return; }

Ccokievalue=escape{document.myform.customer.value} + &ldquo;;&rdquo; Document.cookie=&rdquo;name&rdquo;+cookievalue);

}

//--&gt;

&lt;/script&gt;

&lt;/head&gt;

&lt;body&gt;

&lt;form name =&rdquo;myform&rdquo; action=&rdquo;&rdquo;&gt;

Enter name:&lt;input type=&rdquo;text&rdquo; name=&rdquo;customer&rdquo;/&gt;

&lt;input type=&rdquo;button&rdquo; value=&rdquo;Set Cookie&rdquo; onclick=&rdquo;WriteCookie();&rdquo;/&gt;

&lt;/form&gt;

&lt;/body&gt;

&lt;/html&gt;

</code></pre>
Now your machine has a cookie called name. You can set multiple cookies using multiple key=value pairs separated by a comma. You will learn how to read this cookie in the next section.&nbsp;&nbsp;
<h3>Reading Cookies</h3>
Reading a cookie is just as simple as writing one because the value of the document .cookie object is the cookie. So you can use this string whenever you want to access the cookie. 
The document cookie string will keep a list of name=value pairs separated by semicolons, where name is the name of a cookie and value is its string value. You can use strings&rsquo;spli() function to break the string into key and values as follows. &nbsp;
<table style="border-collapse: collapse; width: 100.012%; height: 42.0374px; background-color: #ecf0f1;" border="1px" cellpadding="10">
<tbody>
<tr style="height: 42.0374px;">
<td style="width: 98.4238%; text-align: center; height: 42.0374px;"><span data-sheets-value="{&quot;1&quot;:2,&quot;2&quot;:&quot;Also, Check out our blog to learn about Salesforce Automation System!&quot;}" data-sheets-userformat="{&quot;2&quot;:513,&quot;3&quot;:{&quot;1&quot;:0},&quot;12&quot;:0}">Also, Check out our new blog on <a style="color: #236fa1;" href="https://tekslate.com/javascript-tutorials" target="_blank">JavaScript Tutorial</a></td>
</tr>
</tbody>
</table>
Example 
Following is the example to get the cookies set in the previous section. 
<pre class="language-javascript"><code>&lt;html&gt;

&lt;head&gt;

&lt;script type=&rdquo;text/javascript&rdquo;&gt;

&lt;!&mdash;

Function Read Cookie{}

{

Var allcookies=document.cookie;

// Get all the cookies pairs in an array Cookiearray=allcookies.split(&lsquo;;&rsquo;);

//Now take key-value pair out of this array

For {var i=0; i&lt;cookiearray.lenght; i++}

{

Name = cookiearray[i].split{&ldquo;=&rdquo;} [0];

Value= cookiearray[i].split{&ldquo;=&rdquo;} [1];

Alert{key is :&rdquo; + name +&rdquo; and Value is :&rdquo;+ value};

}

}

//--&gt;

&lt;/script&gt;

&lt;/head&gt;

&lt;body&gt;

&lt;form name =&rdquo;myform&rdquo; action=&rdquo;&rdquo;&gt;

&lt;input type=&rdquo;button&rdquo; value=&rdquo;Set Cookie&rdquo; onclick=&rdquo;ReadCookie();&rdquo;/&gt;

&lt;/form&gt;

&lt;/body&gt;

&lt;/html&gt; </code></pre>
Note: Here length is a method of Array class that returns the length of an array.&nbsp;
 Note: There may be some other cookies already set on your machine. So above code will show you all the cookies set at your machine &nbsp;
<h3>Setting the Cookies Expiration Date</h3>
You can extend the life of a cookie beyond the current browser session by setting an expiration date and saving the expiration date within the cookie. This can be done by setting the expires attribute to a date and time. &nbsp; 
Example
 The following is the example illustrates how to set a cookie expiration date after 1 month
<pre class="language-javascript"><code>&lt;html&gt;

&lt;head&gt;

&lt;script type=&rdquo;text/javascript&rdquo;&gt;

&lt;!&mdash;

Function WriteCookie ( ) Var now=new Date{};

Now.setMonth{ now.getMonth{}+1};

Document.cookie=&rdquo;name=&rdquo;+cookievalue;

Document.cookie=&rdquo;expires=&rdquo;+now.getGMTString{}+&rdquo;;&rdquo; Alert{Setting Cookies :&rdquo; +&rdquo;name=&rdquo;+ cookievalue };

&lt;/script&gt;

&lt;/head&gt;

&lt;body&gt;

&lt;form name =&rdquo;formname&rdquo; action=&rdquo;&rdquo;&gt;

Enter name:&lt;input type=&rdquo;text&rdquo; name=&rdquo;customer&rdquo;/&gt;

&lt;input type=&rdquo;button&rdquo; value=&rdquo;Set Cookie&rdquo; onclick=&rdquo;WriteCookie();&rdquo;/&gt;

&lt;/form&gt;

&lt;/body&gt;

&lt;/html&gt; </code></pre>
<h3>Deleting a Cookie</h3>
Sometimes you will want to delete a cookie by setting expiration date one Month in past: 
<pre class="language-javascript"><code>&lt;html&gt;

&lt;head&gt;

&lt;script type=&rdquo;text/javascript&rdquo;&gt;

&lt;!&mdash;

Function WriteCookie ( ) Var now=new Date{};

Now.setMonth{ now.getMonth{} -1};

Cookievalue=escape{document.myform.customer.value}+&rdquo;;&rdquo;

Document.cookie=&rdquo;name=&rdquo;+cookievalue;

Document.cookie=&rdquo;expires=&rdquo;+now.getGMTString{}+&rdquo;;&rdquo; Alert{Setting Cookies :&rdquo; +&rdquo;name=&rdquo;+ cookievalue };

}

//--&gt;

&lt;/script&gt;

&lt;/head&gt;

&lt;body&gt;

&lt;form name =&rdquo;formname&rdquo; action=&rdquo;&rdquo;&gt;

Enter name:&lt;input type=&rdquo;text&rdquo; name=&rdquo;customer&rdquo;/&gt;

&lt;input type=&rdquo;button&rdquo; value=&rdquo;Set Cookie&rdquo; onclick=&rdquo;WriteCookie();&rdquo;/&gt;

&lt;/form&gt;

&lt;/body&gt;

&lt;/html&gt;</code></pre>
Instead of setting a date, you can see a new time using the Time() function.

Cookies in JavaScript | What are Cookies | Tekslate

Cookies in JavaScript

cookies-javascript

&nbsp;
<h2 style="text-align: justify;">JavaScript Objects Overview</h2>
JavaScript is an Object-Oriented Programming(OOP) language. A programming language can be called object-oriented if it provides four basic capabilities to developers:
Encapsulation, the capability to store related information, whether data or methods, together in an object
Aggregation, the capability to store one object inside another object.
The capability of a class to rely upon another class(or number of classes) for some of its properties and methods
The capability to write one function or method that works in a variety of different ways.
Objects are composed of attributes. If an attribute contains a function, it is considered to be a method of the object otherwise, the attribute is considered a property.
<blockquote>Learn JavaScript by Tekslate - Fastest growing sector in the industry. Explore Online "<a style="color: #e67e23;" href="javascript-training" target="_blank" rel="noopener">JavaScript Training</a>" and course is aligned with industry needs &amp; developed by industry veterans. Tekslate will turn you into JavaScript Expert.</blockquote>
&nbsp;
<h2 style="text-align: justify;">JavaScript Object Properties</h2>
JavaScript Object&nbsp; Properties can be any of the three primitive data types or any of the abstract data types, such as another object. JavaScript Object properties are usually variables that are used internally in the object's methods but can also be globally visible variables that are used internally in the object's methods but can also be globally visible variables that are used throughout the page.
The syntax for adding a property to an object is
ObjectName.objectProperty=propertyValue;
Example
Following is a simple example to show how to get a document title using the &ldquo;title&rdquo; property of the document object:
Var str=document.title;
JavaScript Object Methods
The methods are functions that let the object to do something be done to it. There is little difference between a function and a method, except that a function is a standalone unit of statements, and a method is attached to an object and can be referenced by this keyword.
Methods are useful for everything from displaying the contents of the object to the screen to performing complex mathematical operations on a group of local properties and parameters.
Example
Following is an example to show how to use the write() method of the document object to write any content on the document:
Document. write{&ldquo;This is a test&rdquo;};
User-Defined Objects
All user-defined objects and built-in objects are descendants of an object called Object.
The new Operator
The new operator is used to create an instance of an object. To create an object, the new operator is followed by the constructor method.
In the following example,the constructor methods are Object{},Array{} and Date{}.These construcots are built-in JavaScript functions.
Var employees=new Object{};
Var books=new Array{&ldquo;C++&rdquo;,&rdquo;Perl&rdquo;,&rdquo;Java&rdquo;};
Var day=new Date{August 15,1947&rdquo;};
The Object() Constructor&nbsp;
A constructor is a function that creates and initializes an object.Java Script provides a special constructor function called object() to build the object. The return value of the Object() constructor is assigned to a variable.
The variable contains a reference to the new object. The properties assigned to the object are not variables and are not defined with the var keyword.
&nbsp;
<a style="background-color: #e94350; color: #ffffff; padding: 10px 20px;" href="javascript-tutorials" target="_blank" rel="noopener">Check Out JavaScript Tutorial</a>
Example 1
This example demonstrates how to create an object: &lt;html&gt;
<pre class="language-javascript"><code>&lt;head&gt;

&lt;title&gt;User-define objects&lt;/title&gt;

&lt;script type=&rdquo;text/javascript&rdquo;&gt;

Var book=new Object{}; //Create the object

Book.subject=;Perl&rdquo;;//Assign properties to the object

Book.author =&rdquo;Mohtashim&rdquo;;

&lt;/script&gt;

&lt;/head&gt;

&lt;body&gt;

&lt;script type=&rdquo;text/javascript&rsquo;&gt;

Document.write{&ldquo;Book name is: &ldquo;+book.subject+&rdquo;,br&gt;&rdquo;};

Document.write{Book author is:&rdquo;book.author +&rdquo;&lt;br&gt;&rdquo;}&rsquo;

&lt;/script&gt;

&lt;/body&gt;

&lt;/html&gt; 

</code></pre>
Example 2
This example demonstrates how to create an object with a User-Defined Function. Here this keyword is used to refer to the object that has been passed to a function:
<pre class="language-javascript"><code>&lt;html&gt;

&lt;head&gt;

&lt;title&gt;User-define objects&lt;/title&gt;

&lt;script type=&rdquo;text/javascript&rdquo;&gt;

Var myBook=new book{&ldquo;Perl&rdquo;, &ldquo;Mchtashim&rdquo;};

Document.write{&lsquo;Book title is :&rdquo;+myBook.title+&rdquo;&lt;br&gt;&rdquo;};

Document.write{&lsquo;Book author is :&rdquo;+myBook.author+&rdquo;&lt;br&gt;&rdquo;};

&lt;/script&gt;

&lt;body&gt;

&lt;/html&gt;

</code></pre>
Defining Methods for an Object in JavaScript
The previous example demonstrates how the constructor creates the object and assigns properties. But we need to complete the definition of an object by assigning methods to it.&nbsp;
<pre class="language-javascript"><code>&lt;html&gt;

&lt;head&gt;

&lt;title&gt;User-define objects&lt;/title&gt;

&lt;script type=&rdquo;text/javascript&rdquo;&gt;

// Define a function which will work as a method

Function add Price{amount}

This.price=amount;

Function book{title,author}{

This.title=title;

This.auhtor=author;

This.addPrice=addPrice;//Assign that method as property.

&lt;/script&gt;

&lt;/head&gt;

&lt;body&gt;

&lt;script type=&rdquo;text/javascrpit&rdquo;&gt;

var myBook= new book(&ldquo;Perl&rdquo;,&rdquo;Mohtashim&rdquo;);

myBook.addprice(100);

document.write(&ldquo;Book title is : &ldquo; + myBook.title + &ldquo;&lt;br&gt;);

document.write(&ldquo;Book author is : &ldquo; + myBook.author + &ldquo;&lt;br&gt;);

document.write(&ldquo;Book price is : &ldquo; + myBook.price + &ldquo;&lt;br&gt;);

&lt;/script&gt;

&lt;/body&gt;

&lt;/html&gt;

</code></pre>
The with Keyword
The keyword is used as a kind of shorthand d for referring the properties or methods of an object.
The object specified as an argument to becomes the default object for the duration of the block that follows. The properties and methods for the object can be used without naming the object.
Syntax
with (object){
properties used without the object name and dot.
}
Example
<pre class="language-javascript"><code>&lt;html&gt;

&lt;head&gt;

&lt;title&gt;User-defined objects &lt;/title&gt;

&lt;script type=&rdquo;text/javascript&rdquo;&gt;

//Define a function which will work as a method

function add price(amount)

with(this){

price=amount;

}

}

function book(title, author){

this.title=title;

this.author=author;

this.price=0;

this.addprice=addprice; //Assign that method as property.

}

&lt;/script&gt;

&lt;/head&gt;

&lt;body&gt;

&lt;script type=&rdquo;text/javascrpit&rdquo;&gt;

var myBook= new book(&ldquo;Perl&rdquo;,&rdquo;Mohtashim&rdquo;);

myBook.addprice(100);

document.write(&ldquo;Book title is : &ldquo; + myBook.title + &ldquo;&lt;br&gt;);

document.write(&ldquo;Book author is : &ldquo; + myBook.author + &ldquo;&lt;br&gt;);

document.write(&ldquo;Book price is : &ldquo; + myBook.price + &ldquo;&lt;br&gt;);

&lt;/script&gt;

&lt;/body&gt;

&lt;/html&gt;

</code></pre>
JavaScript Native Objects
JavaScript has several built-in or native objects. These objects are accessible anywhere in your program and will work the same way in any browser running in any operating system.
Here is the list of all important JavaScript Native Objects
JavaScript Number object
JavaScript Boolean object
JavaScript String object
JavaScript Array object
JavaScript Date object
JavaScript Math object
JavaScript RegExp object
<h3 style="text-align: justify;">JavaScript &ndash;The string Object</h3>
The String object lets you work with a series of characters and wraps Javascript's string primitive data type with a number of helper methods.
Because Javascript automatically converts between string primitives and String objects, you can call any of the helper methods of the String object on a string primitive.
Syntax
Creating a String object
var val =new string(string)
The string parameter is a series of characters that have been properly encoded.
String Properties
Here is a list of each property and its description.
<table style="width: 718px; height: 173px;" border="1" cellspacing="1" cellpadding="1">
<tbody>
<tr>
<td>&nbsp;Property</td>
<td>Description</td>
</tr>
<tr>
<td>Constructor</td>
<td>Returns a reference to the String function that created the object.</td>
</tr>
<tr>
<td>length</td>
<td>Returns the length of the string</td>
</tr>
<tr>
<td>prototype</td>
<td>The prototype property allows you to add properties and methods to an object.</td>
</tr>
</tbody>
</table>
String Methods
Here is a list of each method and its description.
<table style="width: 726px; height: 617px;" border="1" cellspacing="1" cellpadding="1">
<tbody>
<tr>
<td>&nbsp;Method</td>
<td>Description</td>
</tr>
<tr>
<td>charAt()</td>
<td>Returns the character at the specified index.</td>
</tr>
<tr>
<td>charCodeAt()</td>
<td>Returns a number indicating the Unicode value of the character at the given index.</td>
</tr>
<tr>
<td>concat()</td>
<td>Combines the text of two strings and returns a new string.</td>
</tr>
<tr>
<td>indexOf()</td>
<td>Returns the index within the calling String object of the first occurrence of the specified value, or -1 if not found.</td>
</tr>
<tr>
<td>lastIndexOf()</td>
<td>Returns the index within the calling String object of the last occurrence of the specified value, or -1 if not found.</td>
</tr>
<tr>
<td>localeCompare()</td>
<td>Returns a number indicating whether a reference string comes before or after or is the same as the given string in sort order.</td>
</tr>
<tr>
<td>match()</td>
<td>Used to match a regular expression against a string.</td>
</tr>
<tr>
<td>replace()</td>
<td>Used to find a match between a regular expression and a string, and to replace the matched substring with a new substring.</td>
</tr>
<tr>
<td>search()</td>
<td>Execute the search for a match between a regular expression and a specified string.</td>
</tr>
<tr>
<td>slice()</td>
<td>Extract a section of a string and returns a new string.</td>
</tr>
<tr>
<td>spilt()</td>
<td>Splits a string object into an array of the string by separating the string into substrings.</td>
</tr>
</tbody>
</table>

JavaScript Objects and Properties | Study Guide | TekSlate 

JavaScript Objects & Properties

javascript-objects-properties

&nbsp;
<h2>JavaScript Switch Case</h2>
You can use multiple if&hellip; else if statement, as in the previous chapter, to perform a multi-way branch. However, this is not always the best solution, especially when all of the branches depend on the value of a single variable. 
Starting with JavaScript 1.2, you can use a SWITCH statement that handles exactly this situation, and it does so more efficiently than repeated if..else if statements. &nbsp;
 Syntax&nbsp;
 The basic syntax of the switch statement is to give expression to evaluate and several different statements to execute based on the value of the expression. The interpreter checks each case against the value of the expression until a match is found, if nothing matches, a default condition will be used. &nbsp;
<pre class="language-javascript"><code>Switch(expression)

{ case condition 1 : statement(s) break;

Case condition 2: statement(s) break;

&hellip; Case condition n: statement(s) break;

default: statement(s) 

</code></pre>
<blockquote>Learn JavaScript by Tekslate - Fastest growing sector in the industry. Explore Online " <a style="color: #e67e23;" href="javascript-training" target="_blank" rel="noopener">JavaScript Training</a> " and course is aligned with industry needs &amp; developed by industry veterans. Tekslate will turn you into JavaScript Expert.</blockquote>
&nbsp;
break&nbsp;
statements indicate to the interpreter the end of that particular case. If they were omitted, the interpreter would continue executing each statement in each of the following cases We will explain the break statements in the LOOP Control chapter. &nbsp; 
<a style="background-color: #e94350; color: #ffffff; padding: 10px 20px;" href="javascript-tutorials" target="_blank" rel="noopener">Check Out JavaScript Tutorial</a>
Example Following example illustrates a basic while loop: 
<pre class="language-javascript"><code>&lt;script type=&rdquo;text/javascript&rdquo;&gt;

&lt;!&mdash; var grade=&rsquo;A&rsquo;; document.write(&ldquo;Entering switch block &lt;br/&gt;&rdquo;);

switch(grade) { case &lsquo;A&rsquo; : document.write(&ldquo;Good job&lt;br /&gt;&rdquo;);

break; Case &lsquo;B&rsquo; :doucument.write(&ldquo;Pretty good &lt;br/&gt;&rdquo;);

break; case &lsquo;C&rsquo;: document.write(&ldquo;Passed&lt;br /&gt;&rdquo;);

break; Case &lsquo;D&rsquo; :document.write(&ldquo;Not So good &lt;br/&gt;&rdquo;);

break; Case &lsquo;F&rsquo; :documenet.write(&ldquo;Failed &lt;br/&gt;&rdquo;);

break; default :document.write(&ldquo;Unknown grade&lt;br/&gt;&rdquo;) break;

} document.write(&ldquo;Existing switch block&rdquo;); //-- &gt;

&lt;/script&gt;</code></pre>
&nbsp; Example
Consider a case if you do not use break statement: 
<pre class="language-javascript"><code>&lt;script type=&rdquo;text/javascript&rdquo;&gt;

&lt;!&mdash; var grade=&rsquo;A&rsquo;; document.write(&ldquo;Entering switch block&lt;br/&gt;&rdquo;);

switch(grade) { Case &lsquo;A&rsquo; :document.write(&ldquo;Good job &lt;br /&gt;&rdquo;);

Case &lsquo;B&rsquo; :document.write(&ldquo;Pretty good &lt;br /&gt;&rdquo;);

Case &lsquo;C&rsquo; :document.write(&ldquo;Passed&lt;br/&gt;&rdquo;);

Case &lsquo;D&rsquo; :document.write(&ldquo;Not So good &lt;br /&gt;&rdquo;);

Case &lsquo;F&rsquo; :document.write(&ldquo;Failed &lt;br /&gt;&rdquo;);

default: document.write(&ldquo;Unknown grade&lt;br/&gt;&rdquo;); }

document.write(&ldquo;Existing switch block&rdquo;); //-- &gt;

&lt;/script&gt;</code></pre>

JavaScript Switch Case with Examples - Tekslate

JavaScript Switch Case

javascript-switch-case

If you are looking for some best Next.js interview questions, then you are in the right place. We have compiled a list of the best Next.js interview Questions, that will surely help you crack the interview. Read on and All the Best!
<table style="border-collapse: collapse; width: 100%; height: 120px;" border="1px" cellpadding="10">
<tbody>
<tr>
<td style="width: 98.3496%;">
<h3>Most frequently asked Next.js Interview Questions</h3>
<ul>
<li><a style="color: #236fa1;" href="#features-of-next-js">Mention a few features of Next.js</a></li>
<li><a style="color: #236fa1;" href="#why-next-js">Why should anyone choose Next.js?</a></li>
<li><a style="color: #236fa1;" href="#amp-vertification-in-next-js">How can AMP be verified in Next.js?</a></li>
<li><a style="color: #236fa1;" href="#next-js-data-fetching">What is the suggested approach for Next.js data fetching?</a></li>
<li><a style="color: #236fa1;" href="#advantages-of-next-js">List a few advantages of Next.js</a></li>
<li><a style="color: #236fa1;" href="#is-static-cdn-supported-by-next-js">Is static CDN supported by Next.js?</a></li>
<li><a style="color: #236fa1;" href="#is-js-difficult-than-react">Is JS more difficult than React?</a></li>
<li><a style="color: #236fa1;" href="#next-js-without-react">Is it possible to learn Next.js without React?</a></li>
</ul>
</td>
</tr>
</tbody>
</table>
<h2>Next.js Interview Questions</h2>
<div class="jss41">
<h3>Q1) What exactly is Next.js?</h3>
</div>
Ans: An open-source, compact React.js framework called Next.js makes it easier for programmers to create static and server-side rendering web applications. Zeit came up with it. We can quickly create server-rendered React apps thanks to the Next.js framework, which is built on React, Webpack, and Babel. Your next feature-rich web application can be built with just npm run dev start and without any webpack settings.
<h3><a id="features-of-next-js"></a>Q2) Mention a few features of Next.js</h3>
Ans:&nbsp;
<ul>
<li style="font-weight: 400;" aria-level="1">JS offers simple server rendering by default.</li>
<li style="font-weight: 400;" aria-level="1">Static exporting is supported in JS.</li>
<li style="font-weight: 400;" aria-level="1">It offers a Webpack-based development environment that facilitates the use of hot module replacement (HMR)</li>
<li style="font-weight: 400;" aria-level="1">Automatic code-splitting is supported for quicker page loading.</li>
<li style="font-weight: 400;" aria-level="1">It supports straightforward file system-based routing as well as client-side routing (page-based).</li>
<li style="font-weight: 400;" aria-level="1">It offers total control over Webpack and Babel.</li>
<li style="font-weight: 400;" aria-level="1">It offers a more efficient and quick development compilation.</li>
<li style="font-weight: 400;" aria-level="1">You can use Express or another Node.js HTTP server to implement it.</li>
<li style="font-weight: 400;" aria-level="1">With your own Babel and Webpack configurations, you may quickly change it.</li>
<li style="font-weight: 400;" aria-level="1">It allows for instant code reloading.</li>
</ul>
<h3>Q3) What categories of websites utilize Next.js the most?</h3>
Ans: The most common uses for Next.js, a <a style="color: #236fa1;" title="React JS Interview Questions" href="https://tekslate.com/reactjs-interview-questions" target="_blank">React JS</a> framework, are to create the following apps and websites:
<ul>
<li style="font-weight: 400;" aria-level="1">Static Websites</li>
<li style="font-weight: 400;" aria-level="1">PC-based websites</li>
<li style="font-weight: 400;" aria-level="1">SEO-friendly websites</li>
<li style="font-weight: 400;" aria-level="1">Server Rendered Apps</li>
</ul>
<table style="border-collapse: collapse; width: 100%; height: 60px; background-color: #ecf0f1; border-color: #CED4D9; border-style: solid;" border="1px" cellpadding="5">
<tbody>
<tr style="height: 38px;">
<td style="width: 98.2759%; height: 38px; text-align: center;">Want to acquire industry skills and gain complete knowledge of React JS? Enroll in Instructor-Led live <a style="color: #236fa1;" href="https://tekslate.com/reactjs-training" target="_blank">ReactJS Training</a> to become Job Ready!</td>
</tr>
</tbody>
</table>
<h3><a id="why-next-js"></a>Q4) Why should anyone choose Next.js?</h3>
Ans:
<ul>
<li>&nbsp;Zero Setup:&nbsp;Routing based on filesystems, hot code reloading, and universal rendering are all automatic.</li>
<li style="font-weight: 400;" aria-level="1">Completely customizable: Total command over Webpack and Babel. Server, routing, and next-plugin customization options.</li>
<li style="font-weight: 400;" aria-level="1">Production-Ready: Reduced build size optimization, quicker dev compilation, and other enhancements.</li>
</ul>
<h3>Q5) Does Create React App do the same function as Next.js?</h3>
Ans: In essence, Create-React-App is React with a built-in build system. So it serves as a useful boilerplate. Just to run React, we don't need to worry about setting up Webpack, Babel, or other dependent packages. Other than that, we must build packages on top of Create-React-App if we need additional functions like routing, server-side rendering, and so forth.
A whole stack React framework is Next.js. It is pre-loaded with useful features including effective routing, build system, API routing, server-side rendering, and many others that perform well in a production context.
<h3><a id="amp-vertification-in-next-js"></a>Q6) How can AMP be verified in Next.js?</h3>
Ans: 'amp HTML-validator' is used during development to validate your AMP pages. When Next.js is launched, a terminal will show any warnings and fatal errors. The "next export" process validates AMP pages as well, and if improper AMP validation is present, errors will be reported in the terminal and the "next export" will fail.
<h3>Q7) How may AMP be enabled in Next.js?</h3>
Ans: There are two methods for turning on AMP in Next.js.
<ul>
<li>AMP &ndash; First Pages: Both the website's regular visitors and search engine visitors are given access to these. To implement AMP-first pages, the following syntax must be used.</li>
<li>Hybrid AMP Pages: In order for search engines to quickly display the AMP version of the page in various mobile search results, hybrid AMP pages let users have an AMP version of a standard page alongside it.</li>
</ul>
<h3><a id="next-js-data-fetching"></a>Q8) What is the suggested approach for Next.js data fetching?</h3>
Ans: There are many ways to fetch data in Next.js but the framework itself suggests using the async function getInitialProps to fetch data from any location. The context object that getInitialProps obtains when we use it to retrieve data has the features shown below:
<ul>
<li>Pathname: This identifies the URL's path portion.</li>
<li style="font-weight: 400;" aria-level="1">Query: It is used to define the URL query string portion of an object-parsed URL.</li>
<li style="font-weight: 400;" aria-level="1">asPath: This defines the string that represents the actual path that the browser displays, along with the query.</li>
<li style="font-weight: 400;" aria-level="1">Req: The HTTP request object (server only) is specified using the word "req.&rdquo;</li>
<li style="font-weight: 400;" aria-level="1">Res: The HTTP response object (server only) is specified by the prefix res.</li>
<li style="font-weight: 400;" aria-level="1">Err: If a rendering error occurs, the word "err" is used to specify the error object.</li>
</ul>
<h3>Q9) What does Next.js's code splitting mean, in your opinion?</h3>
Ans: In general, code splitting is one of Webpack's most alluring features. This feature makes it easier for us to divide our code into different bundles that can only be loaded in parallel or on demand. This primarily serves to create smaller bundles and makes it easier to manage resource load prioritization, both of which have a significant impact on load time.
Code splitting primarily uses three methods:
<ul>
<li>Entry Points: Manual entry configuration is used to separate code.</li>
<li style="font-weight: 400;" aria-level="1">Eliminate Duplication: Deduplication and chunk splitting are done using Entry dependencies or SplitChunksPlugin.</li>
<li style="font-weight: 400;" aria-level="1">Adaptive Imports: Using inline function calls within modules, it divides the code using dynamic imports.</li>
</ul>
It is primarily used to allow unneeded code to load on pages that can never do so.
<h3><a id="advantages-of-next-js"></a>Q10) List a few advantages of Next.js</h3>
Ans: 
<ul>
<li style="font-weight: 400;" aria-level="1">Simple project creation, modification, and needed package discovery.</li>
<li style="font-weight: 400;" aria-level="1">Optimum application performance because automatic code-splitting is available.</li>
<li style="font-weight: 400;" aria-level="1">With the use of prefetching, Next.js enables efficient code bundles to be loaded slowly in the background.</li>
<li style="font-weight: 400;" aria-level="1">It enables SSR, or server-side rendering, in application code, providing SEO-friendly flexibility, an initial render to application view, and doing away with the need to download code.</li>
<li style="font-weight: 400;" aria-level="1">Hot-Module Replacement that works with robust error reporting.</li>
</ul>
<h3>Q11) What does Next.js's Styled JSX mean?</h3>
Ans: It is a library for writing scoped and encapsulated CSS that is used by developers to style Next.js components. Developers can add, remove, and modify styles without being concerned about unintended consequences thanks to Styled JSX, which prevents styles from being introduced to one component from affecting other components.
<h3>Q12) What are the advantages of utilizing Serverless mode, and how do you utilize it?</h3>
Ans: By dividing an application into smaller, more manageable pieces known as lambdas, Serverless mode implementation greatly enhances a program's scalability and readability. A "pay for what you use" philosophy, also encourages affordability.
Next.js's Serverless mode must be enabled by adding the "serverless" build target to next.config.js.
<h3><a id="is-static-cdn-supported-by-next-js"></a>Q13) Is static CDN supported by Next.js?</h3>
Ans: Yes, static CDN is supported by Next.js 5 and higher. Next.JS now seamlessly loads assets from CDN thanks to the assets prefix.
<h3><a id="is-js-difficult-than-react"></a>Q14) Is JS more difficult than React?</h3>
Ans: It's simple to code; Next. js takes less code than React and other React-compatible frameworks. Less code, greater readability, and better project management are all benefits of this approach, which only requires developers to create the page and link to the component in the header.
<h3>Q15) What kind of framework&mdash;frontend or backend&mdash;is Next.js?</h3>
Ans: By going one step further, Next.js eliminates the necessity for a backend framework. You can make React applications that are entirely server-rendered thanks to it. This means that a whole <a style="color: #236fa1;" title="Style Sheets in HTML" href="https://tekslate.com/style-sheets-html" target="_blank">HTML </a>page with all required resources, such as <a style="color: #236fa1;" title="JavaScript Switch Case" href="https://tekslate.com/javascript-switch-case" target="_blank">JavaScript</a> files, CSS files, and graphics, will be downloaded to the user's browser.
<h3><a id="next-js-without-react"></a>Q16) Is it possible to learn Next.js without React?</h3>
Ans: Studying React is a prerequisite for learning Next.js because Next.js is based on React. React is a JavaScript package that enables the creation of reusable components and aids with coding structure.

Top 20 Next.js Interview Questions and Answers - (2023)

Next.js Interview Questions

nextjs-interview-questions

Top 50+ React Native Interview Questions (2023)

<ul>
<li style="font-weight: 400;" aria-level="1"><a style="color: #000000;" href="#freshers">Basic React Native Interview Questions for Freshers</a></li>
<li style="font-weight: 400;" aria-level="1"><a style="color: #000000;" href="#experienced">React Native Interview Questions for Experienced</a></li>
<li><a style="color: #000000;" href="#coding">React Native Coding Questions</a></li>
<li><a style="color: #000000;" href="#conclusion">Conclusion</a></li>
</ul>