Merge pull request #23 from AzharAli-github/master

AzharAli-github · web-flow · commit ceafb426e6b9 · 2023-01-09T12:21:37.000+05:00
Update to Advance
diff --git a/JavaScript/Advance/Async/1.Callbacks/images/js-logo.png b/JavaScript/Advance/Async/1.Callbacks/images/js-logo.png
diff --git a/JavaScript/Advance/Async/1.Callbacks/index.html b/JavaScript/Advance/Async/1.Callbacks/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Async-Callbacks</title>
+    <link rel="shortcut icon" href="images/js-logo.png" type="image/x-icon">
+</head>
+
+<body>
+    <h3 id="textOne"></h3>
+    <h3 id="textTwo"></h3>
+    <input id="inpOne" value="12">
+    <button onclick="Disp()">Click</button>
+    <p id="paraText"></p>
+    <script src="script.js"></script>
+</body>
+
+</html>
diff --git a/JavaScript/Advance/Async/1.Callbacks/script.js b/JavaScript/Advance/Async/1.Callbacks/script.js
@@ -0,0 +1,34 @@
+/* This is a Simple Example of Function that are called upon each other
+ It also includes Callback functionality but we cannot control the result 
+*/
+function DisplayOne(dispOne) {
+    document.getElementById('textOne').innerHTML = dispOne;
+}
+
+function Sum(num1, num2) {
+    let sum = num1 + num2;
+    return "Sum of " + num1 + " and " + num2 + " = " + sum;
+}
+let result = Sum(99, 2);
+DisplayOne(result);
+
+/*
+To getting control over the function we use the following Example Below
+Actual function of Callback()--Below
+ */
+
+function DisplayTwo(dispTwo) {
+    document.getElementById('textTwo').innerHTML = dispTwo;
+}
+
+function Mult(num3, num4, callBack) {
+    let mult = num3 * num4;
+    callBack("The Multiplication of " + num3 + " and " + num4 + " = " + mult);
+}
+Mult(12, 2, DisplayTwo);
+
+
+function Disp() {
+    var inpValue = document.getElementById('inpOne').value;
+    document.getElementById('paraText').innerHTML = inpValue;
+}
diff --git a/JavaScript/Advance/Async/2.Asynchhronous/images/js-logo.png b/JavaScript/Advance/Async/2.Asynchhronous/images/js-logo.png
diff --git a/JavaScript/Advance/Async/2.Asynchhronous/index.html b/JavaScript/Advance/Async/2.Asynchhronous/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Asynchronous</title>
+    <link rel="shortcut icon" href="images/js-logo.png" type="image/x-icon">
+</head>
+
+<body>
+    <h2 id="textOne"></h2>
+    <h2 id="textTwo"></h2>
+    <script src="script.js"></script>
+</body>
+
+</html>
diff --git a/JavaScript/Advance/Async/2.Asynchhronous/script.js b/JavaScript/Advance/Async/2.Asynchhronous/script.js
@@ -0,0 +1,25 @@
+/* 
+     In Asynchronous functions run parallel to each other which are called Asynchronous 
+     Best example is setTimeOut()
+     and setInterval()
+*/
+
+//  Example of setTimeOut
+
+function DisplayOne() {
+    let text = "Hey There!";
+    document.getElementById('textOne').innerHTML = text;
+}
+
+setTimeout(DisplayOne, 2000); //Here we have called a function and also defined after how many miliseconds will the function load
+
+
+//  Example of setInterval()
+
+function DispTwo() {
+    let x = new Date();
+    let time = x.getHours() + " : " + x.getMinutes() + " : " + x.getSeconds();
+    document.getElementById('textTwo').innerHTML = time;
+}
+
+setInterval(DispTwo, 1000);
