JAVASCRIPT
==========================D 1 (46)========================
JavaScript:
JavaScript is lightweight interpretted and JIT compiled programming language.
Light weight refers to less memory.
Interpretted indicates that the program is translated line-by-line.
Compiled specifies that all lines are translated simultaneously at the same time.
There are 2 types of compiling techniques
JIT
AOT
JIT- is "Just-in-Time", which compiles the code only when it is requested.
AOT is "Ahead-of-Time", which compiles the code before it is requested.
If JavaScript is used in browser then a JavaScript interpreter will translate the
code.
If it is used outside browser then a JavaScript compiler will traslate the code.
The popular JS compilers are V8, Babel, Node etc.
JavaScript is a language that supports various programming paradigms like
- Structural
- Functional
- Imperative
- Object Oriented etc..
Note: JavaScript is not OOP language, it supports only few features of OOP.
JavaScript is a language which is used in various implementations
a) Client Side
b) Server Side
c) Database
d) Animation etc.
JavaScript Client Side :
JavaScript is used client side to reduse burden on server.
It manages various interactions client side and saves round trip.
JavaScript is used client side for
a) DOM manipulaton
b) Browser Interactions
c) Validations
DOM Manipulations
- Data Binding
- Class Binding
- Style Binding
- Event Binding
Browser Interactions
- Window
- Location
- Navigator
- History
- Document
Validation
- Contradictory Data
- Unauthorized Data
Evolution of JavaScript:
-CERN labs introduced a script for browser by name "ECMA Script" in the early days
of internet.
-Netscape communications started a browser called "Netscape Navigator".
-NetScape appointed "Brendan Eich" to design a script for their browser.
-Brandan Eich designed a script by name "Mocha", later renamed as "Live Script".
-Netscape given the responsibility of Live Script to "Sun Microsystems".
-Sun Microsystem and Netscape togather renamed live script to "JavaScript".
-Netscape stopped its services in 2000 and given responsibility of JavaScript to
ECMA
-ECMA is evolving and maintaining JavaScript
-The popular JavaScript versions are
ECMA Script 2015 ES5
ECMA Script 2016 ES6
ECMA Script 2017 ES7
.... ...
Latest ESNext
-'='='='='='='='='='-'-='='='=
==================== D-2 (47) ========================================
in browser's console
navigator.appName
to check architecture of browser
Integrated JavaScript functions into HTML page:
1. Inline
2. Embeded
3. External File
Inline:
- You can configure JavaScript function for every element individually.
- Function is defined for specific event
- It is faster in interaction but can't reuse.
Syntax:
<button onclick="window.print()">Print</button>
Embedded:
- You can configure functions in a <script> container and embed in page.
- Script uses the MIME type "text/javascript".
- You can embed in head or body.
Syntax:
<script type="text/javascript">
function PrintPage()
{
window.print();
}
</script>
<button onclick="window.print()">Print</button>
-You can reuse the function across various elements in page.
Ex.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
function PrintPage(){
window.print();
}
</script>
</head>
<body>
<h2>Ticket</h2>
<button onclick="window.PrintPage()">Print</button>
</body>
</html>
External File:
- You can keep JS functions in a separate script file, so that you can access and
use from different pages.
- It increases the number of request and page load time.
Ex.
1. Add a new file into "Script" folder by name "ticket.js"
function PrintPage()
{
window.print();
}
2. Link to your HTML page
<script src="../Script/ticket.js" type="text/javascript"</script>
<button onclick="PrintPage()">Print</button>
Note: You can minify the JavaScript file to use in production environment.
FAQ: What are the issues with JavaScript?
Ans: It is not a strongly typed language.
It is not implicitly strictly typed.
It is not an OOP language.
Extensibility issues.
It can be blocked by browser.
FAQ: What is strictly typed?
Ans: It sets the standards for code. If developers writes code without standardes
then it will reports errors.
FAQ: How to turn on strict mode?
Ans: By adding "use strict" in your script area.
<script type="text/javascript">
"use strict";
// your functions
</script>
FAQ: What is difference between strongly typed and strictly typed?
Ans: Strongly typed is verifying data type of value.
Strictly typed is verifying standareds of code.
FAQ: How to check the status of JavaScript in browser?
Ans: By using <noscript> element.
Syntax:
<body>
<noscript>please enable JavaScript on your browser</noscript>
</body>
--------Accessing HTML elements-------------
1. JavaScript can access HTML elements by using DOM hierarchy.
- Elements are arrenged using DOM hierarchy.
- It refers to parent child nodes.
- Nodes collection is an array type which allows access using index number.
- It is the fastest way of interactions.
- It is the native method.
Syntax:
window.document.images[]
window.document.forms[].elements[]
- The major issue with DOM hierarchy is the change of the position for element in
page.
- Everytime you have to update its position in code, when ever design changes.
Ex.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" >
"use strict";
function bodyload(){
window.document.images[0].src="images/cat.png"
window.document.forms[0].elements[2].value = "Register";
window.document.forms[1].elements[1].value="Login";
}
</script>
</head>
<body onload="bodyload()">
<noscript>Please TurnOn JavaScript in your Browser.</noscript>
<div>
<img width="100" height="100">
</div>
<h4>Register</h4>
<div>
<form action="">
User Name : <input type="text"> Age : <input type="number"> <input
type="button">
</form>
</div>
<div>
<form action="">
Mobile : <input type="text"> <input type="button">
</form>
</div>
</body>
</html>
2. JavaScript can refer HTML elements by using a referance name
- Every Element in page can have a reference "name".
- JS can access element using the name.
<img name="pic">
<form name="frm"> <input type="button" name="btn" </form>
pic.src="";
frm.btn.value="";
- You can't access any child elements without refering to its generic parent.
- Name can be same for several elements in page, which leads to issues.
Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" >
"use strict";
function bodyload(){
pic.src="images/cat.png";
frmRegister.btnRegister.value = "Register";
frmLogin.btnLogin.value = "Login";
</script>
</head>
<body onload="bodyload()">
<noscript>Please TurnOn JavaScript in your Browser.</noscript>
<div>
<img width="100" height="100" name="pic">
</div>
<h4>Register</h4>
<div>
<form name="frmRegister">
User Name : <input type="text"> Age : <input type="number"> <input
name="btnRegister" type="button">
</form>
</div>
<div>
<form name="frmLogin">
Mobile : <input type="text"> <input name="btnLogin" type="button">
</form>
</div>
</body>
</html>
====================== D - 3 (48) =================================
1. Refer by DOM
2. Refer by Name
3. Javascript can refer HTML elements by using "Id"
- Every element can have a reference ID
- You can access by using the document method "getElementById()".
- It can access any element directly.
Syntax:
<img id="pic">
<input type="button" id="btn">
document.getElementById("pic").src="";
document.getElementById("btn").value="";
-ID is used as selector in CSS, where same ID can be defined for multiple elements.
Ex.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" >
"use strict";
function bodyload(){
document.getElementById("pic").src="images/cat.png";
document.getElementById("btnRegister").value="Register";
document.getElementById("btnLogin").value="Login";
</script>
</head>
<body onload="bodyload()">
<noscript>Please TurnOn JavaScript in your Browser.</noscript>
<div>
<img width="100" height="100" id="pic">
</div>
<h4>Register</h4>
<div>
<form name="frmRegister">
User Name : <input type="text"> Age : <input type="number"> <input
id="btnRegister" type="button">
</form>
</div>
<div>
<form name="frmLogin">
Mobile : <input type="text"> <input id="btnLogin" type="button">
</form>
</div>
</body>
</html>
4. JavaScript can refer HTML elements using CSS selectors
- CSS selectors include primary, rational, structural etc.
- JS provides a method "document.querySelector()" to access elements by CSS
references.
Syntax:
<img width="100" height="100">
<input type="button" id="btn">
<input type="button" class="btn-primary">
document.querySelector("img").src=""
document.querySelector("#btn").value=""
document.querySelector(".btn-primary").value=""
document.querySelector("nav+h1")
Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript" >
"use strict";
function bodyload(){
document.querySelector("img").src="images/cat.png";
document.querySelector("#btnRegister").value="Register";
document.querySelector(".btnLogin").value="Login";
</script>
</head>
<body onload="bodyload()">
<noscript>Please TurnOn JavaScript in your Browser.</noscript>
<div>
<img width="100" height="100" id="pic">
</div>
<h4>Register</h4>
<div>
<form name="frmRegister">
User Name : <input type="text"> Age : <input type="number"> <input
id="btnRegister" type="button">
</form>
</div>
<div>
<form name="frmLogin">
Mobile : <input type="text"> <input class="btnLogin" type="button">
</form>
</div>
</body>
</html>
Note: JavaScripts provides various methods to access multiple elements
a) getElementsByTagName()
b) getElemetnsByName()
c) getElementsByClassName()
JavaScript Output & Input Techniques
JavaScript Output Techniques:
- Output is the process of rendering and painting the result so that user can view
in UI.
- JavaScript have various output properties and methods
a) alert()
b) confirm()
c) document.write()
d) textContent()
e) innerText
f) innerHTML
g) outerHTML
h) console methods
1. alert()
- It is a window method that pops up message box.
- You can display any value or result of any expression.
- It will not allow complex formats or markup for presentation.
- It is RC data type.(RC means plain text)
- You can add line break using "\n".
- It will not allow to cancel.
Syntax:
alert("message"); // alert("Hello\nWelcome");
alert(value); // alert(30);
alert(expression); // alert(10+20);
alert("message" + expression) // alert("Addition = " + (10 + 20));
Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=<<device-width>>, initial-scale=1.0">
<title>Document</title>
<script>
function DeleteClick(){
alert((1+2)+"rd Record will be Deleted Successfully! \n Are You
Ok")
}
</script>
</head>
<body>
<button onclick="DeleteClick()">Delete</button>
</body>
</html>
2. confirm()
- It is similar to alert but allows to cancel.
- It is a boolean method.
- It return "true" on OK and "false" on cancel
Syntax:
confirm("message/value/expression");
Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=<<device-width>>, initial-scale=1.0">
<title>Document</title>
<script>
function DeleteClick(){
// alert((1+2)+"rd Record will be Deleted Successfully! \n Are You
Ok")
flag = confirm("Are you Ok");
if(flag == true){
alert("Deleted successfully.");
}else{
alert("Canceled...");
}
}
</script>
</head>
<body>
<button onclick="DeleteClick()">Delete</button>
</body>
</html>
3. document.write()
- It can renders to output on new screen of same page.
- It can render message, value, expression or markup.
Syntax:
document.write("Welcome");
document.write(19+20);
document.write(40);
document.write("<h2>Welcome</h2>");
Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=<<device-width>>, initial-scale=1.0">
<title>Document</title>
<script>
function DeleteClick(){
// alert((1+2)+"rd Record will be Deleted Successfully! \n Are You
Ok")
flag = confirm("Record will be Deleted \n Are you Ok");
if(flag == true){
document.write("<h2 style='color:red'>Deleted
successfully.</h2><a href='index.html'>Back</a>");
}else{
alert("Canceled...");
}
}
</script>
</head>
<body>
<button onclick="DeleteClick()">Delete</button>
</body>
</html>
4. textContent / innerText
- It allows to render output in any HTML container that can display text.
<div> <span> <p> <label> <dd> <dt> <td> <li> <header> <footer> ....
- It woil not allow complex formats or markup.
- It is only for plain text.
- textContent is a method that supports majority browsers.
Syntax:
document.querySelector("p").textContent = "message/value/expression";
document.querySelector("div").innerText="";
Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=<<device-width>>, initial-scale=1.0">
<title>Document</title>
<script>
function DeleteClick(){
// alert((1+2)+"rd Record will be Deleted Successfully! \n Are You
Ok")
flag = confirm("Record will be Deleted \n Are you Ok");
if(flag == true){
document.write("<h2 style='color:red'>Deleted
successfully.</h2><a href='index.html'>Back</a>");
}else{
document.getElementById("msg").textContent = "canceled..."
document.querySelector("p").innerText = "<b> Delete
Conceled...</b>"
}
}
</script>
</head>
<body>
<button onclick="DeleteClick()">Delete</button>
<p>Hello This is Paragraph</p>
<div id="msg" style="position: absolute; right: 50px; top: 50px;"></div>
</body>
</html>
5. innerHTML
- It is similar to innerText or textContent but supports formats and markup.
- It adds new markup into existing container.
Syntax:
document.querySelector("p").innerHTML = "<h2>Welcome</h2>";
<p>
<h2>Welcome</h2>
</p>
6. outerHTML
- It will replace the existing markup with new markup that you have configured.
Syntax:
document.querySelector("p").outerHTML = "<h2>Welcome</h2>";
<h2>Welcome</h2>
Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=<<device-width>>, initial-scale=1.0">
<title>Document</title>
<script>
function DeleteClick(){
// alert((1+2)+"rd Record will be Deleted Successfully! \n Are You
Ok")
flag = confirm("Record will be Deleted \n Are you Ok");
if(flag == true){
document.write("<h2 style='color:red'>Deleted
successfully.</h2><a href='index.html'>Back</a>");
}else{
document.getElementById("msg").textContent = "canceled..."
// document.querySelector("p").innerHTML = "<h2> Delete
Conceled...</h2>"
document.querySelector("p").outerHTML = "<h2> Delete
Conceled...</h2>"
}
}
</script>
</head>
<body>
<button onclick="DeleteClick()">Delete</button>
<p>Hello This is Paragraph</p>
<div id="msg" style="position: absolute; right: 50px; top: 50px;"></div>
</body>
</html>
7. console methods
- console is command line tool used by developers.
- It is a browser tool.
- You can display messages in console while designing and testing application.
- It provides various contextual methods.
log()
error()
debug()
info()
warn()
Syntax:
console.warn("message/value/expression");
================= D - 4 (49) =========================
JavaScript Input Techniques
- Input is the process of accessing data from user.
- JavaScript allows input using following techniques
1. Query String
2. Prompt
3. Form Input Elements
Query String:
- A query string is defined in the address bar of browser.
- It is appended into address bar by using "?" operator with URL.
http://127.0.0.1:5500/js-examples/index.html?key=value
- You can access the query string by using "location.search"
- You have to use string functions to extract and display on the value of query
string.
.slice() it gets the chars between specified index
.indexOf() it retuns the index number of a character in string.
location.serch.slice(location.search.indexOf("=")+1)
Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function bodyload(){
// document.getElementById("lblName").innerHTML = location.search;
// equalPosition = location.search.indexOf("=");
// val = location.search.slice(equalPosition + 1);
// document.getElementById("lblName").innerHTML = val;
document.getElementById("lblName").innerHTML =
location.search.slice(location.search.indexOf("=")+1);
}
</script>
</head>
<body onload="bodyload()">
<p>Hello ! <span id="lblName"></span></p>
</body>
</html>
Ex: Query string from form data
1. search.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div align="center">
<form action="result.html" method="get">
<h1>Google</h1>
<input type="text" name="search" size="40">
<br>
<br>
<button type="submit">Search</button>
</form>
</div>
</body>
</html>
2. result.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function bodyload(){
document.getElementById("lblValue").innerHTML =
location.search.slice(location.search.indexOf("=")+1);
}
</script>
</head>
<body onload="bodyload()">
<h3>Showing Result for <span id="lblValue"></span> </h3>
<a href="search.html">Back</a>
</body>
</html>
2. prompt()
- It is a method of javascript window object.
- It provides an input box that allows the user to input a value.
- It returns the following
a) Empty String
b) String
c) Null
