JavaScript Input Techniques
1. prompt(): It is similar to alert or configure, but it can allow user to input a
value.[string input]
Syntax:
prompt("Your Message","Default Value");//default value is optional
Click OK without value : return empty string ""
Click OK with value : return value
Click Cancel : returns "null"
Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<title>prompt</title>
<script>
function CreateClick(){
flag = prompt("Enter Folder Name","New Folder");
if(flag == null){
alert("You Cancelled..");
}
else if(flag == ""){
alert("please enter folder name : ");
}
else{
document.querySelector("p").innerHTML += "Folder Created : " + flag+"<br>";
}
}
</script>
</head>
<body>
<button onclick="CreateClick()">Create Folder</button>
<p></p>
</body>
</html>
2. Form input elements
- You can use HTML form elements for input
a) TextBox
b) CheckBox
c) Radio
d) ListBox etc
JavaScript Language Basics
--------------------------
1. Variables
- Variables are storage locations in memory where you can store the value and use
it as a part of any expression.
- Variable Configuration comprises of 3 phases
a) Declaration
b) Assignment
c) Initialization
- JavaScript variables can be used directly without declaring if strict mode is
OFF.
- JavaScript variables can be declared by using
a) var
- It defines a function scope variable.
- You can access from any location [block] in function.
- You can declare in any block and can access from another block.
- It supports all declaring, assigning and initialising.
Ex:
<script>
function f1(){
var x;
x = 10;
if(x == 10){
var y = 20;
}
document.write("x : "+x+"<br>"+"y : "+y);
}
f1();
</script>
- It supports shadowing.[technique where you re-declare the same name identifier]
Ex:
<script>
function f1(){
var x; //declaring
x = 10; //assigning
if(x == 10){
var y = 20; //initializing
y = 30;
var y = 50; //shadowing
}
document.write("x : "+x+"<br>"+"y : "+y);
}
f1();
</script>
- It supports hoisting.
Ex:
<script>
function f1(){
"use strict";
x = 10;
document.write("x : "+x);
var x; //hoisting
}
f1();
</script>
b) let
- It defines block scope variable.
- It is accessible to the same block and its inner blocks.
- It is not accessible to outer block.
- It will support declaring, assigning, initialization.
- It will not support shadowing.
- It will not support hoisting.
c) const
- It is also block scope variable.
- It will not allow declaring and assigning.
- It will allow only initialisation.
- It will not allow shadowing and hoisting.
- Global Scope for variable.
- If you declare a variable outside function then it is global.
var, let , const
Ex:
<script>
var x = 10;
let y = 20;
const z = 30;
function f1(){
document.write("f1 : x, y, z : " + x + "," + y + "," + z + "<br>");
}
function f2(){
document.write("f2 : x, y, z : " + x + "," + y + "," + z + "<br>");
}
f1();
f2();
</script>
FAQ: Can we declare a variable inside function and make it global?
Ans: By using JavaScript "window"
Ex:
<script>
var x = 10;
let y = 20;
const z = 30;
function f1(){
window.msg = "Hello!";
document.write("f1 : x, y, z : " + x + "," + y + "," + z + "<br>");
document.write("f1 Message : " + msg + "<br>")
}
function f2(){
document.write("f2 : x, y, z : " + x + "," + y + "," + z + "<br>");
document.write("f2 Message : " + msg + "<br>")
}
f1();
f2();
</script>
Variable Naming
- Name must start with alphabet or _
- Name can have numbers and special chars
- Can't start with number or other special chars.
- No spaces or no periods[.]
- Length must be max 255 chars
2. Data Types
- Data Type defines the data structure.
- It specifies the type of data and range of data.
- The data types are implicitly typed for JavaScript.
- JavaScript is not strongly typed but it can handle various data types which are
classified into 2 groups
a) Primitive Types
- They are immutable types.
- Structure will not change.
- We have fixed range for values.
- JavaScript primitive types are
a) number
- It is used to configure a numeric value which can be
signed integer -10
unsigned integer 10
floating point 34.42
double 452.34,56.543
decimal 4560.33,34.4442[29 places]
exponent 1e9
binary 0b1010
hexa 0f356
octa 0o734
- The min and max range of number is
Min : -9007199254740991
Max : 9007199254740991
- Every input from HTML is considered as string.
- You have to convert string into number to handle manipulations
of number.
- JavaScript provides following methods for converting a string
into number namely parseInt() and parseFloat()
Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Number Type</title>
<script>
function ClickSubmit(){
var age = parseFloat(document.getElementById("txtAge").value);
document.write("You will be " + (age + 1) + " Next Year")
}
</script>
</head>
<body>
Age: <input type = "text" id="txtAge"> <button
onclick="ClickSubmit()">Submit</button>
</body>
</html>
- JavaScript parsing method can parse any value starting with
number, even if it contains a string expression[it can read upto the numeric
occurance].
a = 20AB;
b = 40;
parseInt(a) + b = 60;
a = AB20;
b = 40;
parseInt(a) + b = NaN; [Not a Number]
- You can verify and allow only number as input by using the
method "isNaN()" [boolean true if value is not a number]
Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Number Type</title>
<script>
function ClickSubmit(){
var age = parseFloat(document.getElementById("txtAge").value);
if(isNaN(age)){
document.write("Age must be a number");
}else{
document.write("You will be " + (age + 1) + " Next Year");
}
}
</script>
</head>
<body>
Age: <input type = "text" id="txtAge"> <button
onclick="ClickSubmit()">Submit</button>
</body>
</html>
FAQ: How to know the data type is number or not?
Ans: You can use
a) isNaN()
b) typeof [operator]
b) string
- String is a literal with group of chars enclosed in " "[Double
Quotes],' '[Single Quotes], ` `[Back Tick].
- Double and Single Quotes are used to switch between inner and
outer string. They will not allow embedded expressions.
Ex:
<script>
var link = "<a href='home.html'>Home</a>";
var newlink = '<a href="about.html">About</a>';
document.write(link + "<br>" + newlink);
</script>
- JavaScript ES5+ version allows embedded expression using "${}".
- You can use JavaScript embedded expression only in BackTick.
Ex:
<script>
var username = "John";
var age = 20;
var msg1 = "Hello!" +" "+ username + " " + "You will be"+ " " + (age + 1) + " " +
"Next Year";
var msg2 = `Hello! ${username} You will be ${age + 1} Next Year`;
document.write(msg1 + "<br>");
document.write(msg2);
</script>
Question: How we can configure the string?
Ex:
<script>
var title = "Login";
var login = `
<h2>${title}</h2>
<dl>
<dt>User Name</dt>
<dd><input type="text"></dd>
<dt>Password</dt>
<dd><input type="password"></dd>
</dl>
<button>${title}</button>
`;
document.write(login);
</script>
Note: String as per ECMA can be max 2GB.
- JavaScript String Manipulations [Methods]
c) boolean
d) null
e) undefined
- Primitive types are stored in memory stack.
b) Non-Primitive Types
- Data Type is determined according to the value assigned.
3. Operators
4. Statements
5. Functions
