JavaScript Advanced Concepts

Course Name: Front End Engineering-I
Session: 2023-2024
Course Code: 23CS002
Semester/Batch 1st /2023
Dr. Bhisham Sharma

CURIN
JavaScript
JavaScript Declarations are Hoisted
In JavaScript, a variable can be declared after it has been used.
In other words; a variable can be used before it has been declared.
<html>
<body>
<p id="d"></p>
<script>
x = 5; // Assign 5 to x
elem = document.getElementById("d"); // Find an element
elem.innerHTML = x; // Display x in the element
var x; // Declare x
</script> </body> </html>
Function within Function
<html> <body>
<p id="d"></p>
<script>
function add_two(a,b) {
let result =a+b;
function add_three(c) {
result = result+c; }
add_three(2);
return result; }
let answer = add_two(4,6);
document.getElementById("d").innerHTML = answer;
Closures, const and let
Variables declared with let have Block Scope
Variables declared with let must be Declared before use
Variables declared with let cannot be Redeclared in the same scope
{
let x = 2;
}
// x can NOT be used here
{
var x = 2;
}
// x CAN be used here
JavaScript Const
Variables defined with const cannot be Redeclared
Variables defined with const cannot be Reassigned
Variables defined with const have Block Scope
const PI = 3.141592653589793;
PI = 3.14; // This will give an error
PI = PI + 10; // This will also give an error
Closures
<html> <body>
<h2>JavaScript Functions</h2>
<p>Variables created without a declaration keyword (var, let, or
const) are always global, even if they are created
inside a function.:</p>
<p id="d"></p>
<script>
myFunction();
document.getElementById("d").innerHTML = a * a;
function myFunction() {
a = 4;
}
Arrow Functions
<html> <body>
<h1>JavaScript Functions</h1>
<h2>The Arrow Function</h2>
<p>This example shows the syntax of an Arrow Function, and how
to use it.</p>
<p id="d"></p>
<script>
let hello = "";
hello = () =>
{
return "Hello World!";
}
document.getElementById("d").innerHTML = hello();
JavaScript Classes
<html> <body>
<h1>JavaScript Classes</h1>
<p>Creating two car objects from a car class:</p>
<p id="d"></p>
<script>
class Car {
constructor(name, year) {
this.name = name;
this.year = year;
}}
const myCar1 = new Car("Ford", 2022);
const myCar2 = new Car("Audi", 2023);
document.getElementById("d").innerHTML =
myCar1.name + " " + myCar2.name;
What is export and import in JavaScript?
In a module, there can be classes, functions,

variables, and objects as well. To make all these
available in another file, we can use export and
import. The export and import are the keywords
used for exporting and importing one or more
members in a module.
JavaScript modules allow you to break up your code
into separate files.
This makes it easier to maintain a code-base.
Modules are imported from external files with the
import statement.
<html> <body>
<h1>JavaScript Modules</h1>
<p id="d"></p>
<script type="module">
import message from "./message.js";
document.getElementById("d").innerHTML = message();
Message.js
const message = () => {
const name = “Arun";
const age = 20;
return name + ' is ' + age + 'years old.';
};
export default message;
Data validation and constraint validation in
HTML forms
Validate the name and password. The name can’t
be empty and password can’t be less than 6
characters long. Here, we are validating the form
on form submit. The user will not be forwarded
to the next page until given values are correct.
<script>
function validateform(){
var name=document.myform.name.value;
var password=document.myform.password.value;
if (name==null || name==""){
alert("Name can't be blank");
return false;
}else if(password.length<6){
alert("Password must be at least 6 characters long.");
return false;
} }
</script> <body>
<form name="myform" method="post" action="abc.jsp" onsubmit="return
validateform()" > Name: <input type="text" name="name"><br/>
Password: <input type="password" name="password"><br/>
<input type="submit" value="register">
</form>
JavaScript Retype Password Validation
<script type="text/javascript">
function matchpass(){
var firstpassword=document.f1.password.value;
var secondpassword=document.f1.password2.value;
if(firstpassword==secondpassword){
return true;
}
else{
alert("password must be same!");
return false;
} }
</script>
<form name="f1" action="register.jsp" onsubmit="return matchpass()">
Password:<input type="password" name="password" /><br/>
Re-enter Password:<input type="password" name="password2"/><br/>
<input type="submit">
</form>
Let's validate the textfield for numeric value only. Here, we are using isNaN()
function.
<script>
function validate(){
var num=document.myform.num.value;
if (isNaN(num)){
document.getElementById("numloc").innerHTML="Enter Numeric value
only";
return false;
}else{
return true;
} }
</script>
<form name="myform" onsubmit="return validate()" >
Number: <input type="text" name="num"><span
id="numloc"></span><br/>
<input type="submit" value="submit">
</form>
Let’s see an interactive JavaScript form validation example that
displays correct and incorrect image if input is correct or
incorrect.
<script>
function validate(){
var name=document.f1.name.value;
var password=document.f1.password.value;
var status=false;
if(name.length<1){
document.getElementById("nameloc").innerHTML=
" <img src='unchecked.gif'/> Please enter your name";
status=false;
}else{
document.getElementById("nameloc").innerHTML=" <img
src='checked.gif'/>";
status=true;
}
if(password.length<6){
document.getElementById("passwordloc").innerHTML=
" <img src='unchecked.gif'/> Password must be at least 6 char long";
status=false;
}else{
document.getElementById("passwordloc").innerHTML=" <img
src='checked.gif'/>";
} return status;
} </script>
<form name="f1" action="" onsubmit="return validate()">
<table>
<tr><td>Enter Name:</td><td><input type="text" name="name"/>
<span id="nameloc"></span></td></tr>
<tr><td>Enter Password:</td><td><input type="password" name="password"/>
<span id="passwordloc"></span></td></tr>
<tr><td colspan="2"><input type="submit" value="register"/></td></tr>
</table>
</form>
JavaScript email validation
We can validate the email by the help of JavaScript.
There are many criteria that need to be follow to validate
the email id such as:
1. email id must contain the @ and . character
2. There must be at least one character before and after
the @.
3. There must be at least two characters after . (dot).
<script>
function validateemail()
{
var x=document.myform.email.value;
var atposition=x.indexOf("@");
var dotposition=x.lastIndexOf(".");
if (atposition<1 || dotposition<atposition+2){
alert("Please enter a valid
e- mail address \n atpostion:"+atposition+"\n dotposition:"+dotposition);
return false;
} }
</script>
<body>
<form name="myform" method="post" action="" onsubmit="return
validateemail();">
Email: <input type="text" name="email"><br/>
<input type="submit" value="register">
</form>
<html lang="en"><head>
<meta charset="utf-8">
<title>JavaScript Form Validation using a sample registration form</title>
</head>
<body onload="document.registration.userid.focus();">
<h1>Registration Form</h1>
Use tab keys to move from one input field to the next.
<form name='registration' onSubmit="return formValidation();">
<ul>
<li><label for="userid">User id:</label></li>
<li><input type="text" name="userid" size="12" /></li>
<li><label for="passid">Password:</label></li>
<li><input type="password" name="passid" size="12" /></li>
<li><label for="username">Name:</label></li>
<li><input type="text" name="username" size="50" /></li>
<li><label for="address">Address:</label></li>
<li><input type="text" name="address" size="50" /></li>
<li><label for="country">Country:</label></li>
<li><select name="country">
<option selected="" value="Default">(Please select a
country)</option>
<option value="AF">Australia</option>
<option value="AL">Canada</option>
<option value="DZ">India</option>
<option value="AS">Russia</option>
<option value="AD">USA</option>
</select></li>
<li><label for="zip">ZIP Code:</label></li>
<li><input type="text" name="zip" /></li>
<li><label for="email">Email:</label></li>
<li><input type="text" name="email" size="50" /></li>
<li><label id="gender">Sex:</label></li>
<li><input type="radio" name="msex" value="Male"
/><span>Male</span></li>
<li><input type="radio" name="fsex" value="Female"
/><span>Female</span></li>
<li><label>Language:</label></li>
<li><input type="checkbox" name="en" value="en" checked
/><span>English</span></li>
<li><input type="checkbox" name="nonen" value="noen"
/><span>Non English</span></li>
<li><label for="desc">About:</label></li>
<li><textarea name="desc" id="desc"></textarea></li>
<li><input type="submit" name="submit" value="Submit" /></li>
</ul>
</form> </body> </html>

JavaScript Advanced Concepts

Uploaded by

Copyright:

Available Formats

JavaScript Advanced Concepts

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

JavaScript Advanced Concepts

Uploaded by

Copyright:

Available Formats

Course Name: Front End Engineering-I

Dr. Bhisham Sharma

In a module, there can be classes, functions,

You might also like