اظهارالوقت و التاريخ
الهدف للتعليم الرقمي
<!DOCTYPE html>
<html>
<body>
<h2>الهدف للتعليم الرقمي</h2>
<button type=”button”
onclick=”document.getElementById(‘ex1’).innerHTML = Date()”>
اظهار الوقت و التاريخ</button>
<p id=”ex1″></p>
</body>
</html>
تغيير المحتوى عن طريق الضغط على الزر
Digital learning Goal
<!DOCTYPE html>
<html>
<body>
<p id=”ex2″>Digital learning Goal</p>
<button type=”button” onclick=’document.getElementById(“ex2”).innerHTML = “الهدف للتعليم الرقمي”‘>click me</button>
</body>
</html>
ملحوظة
JavaScript accepts both double and single quotes:
*document.getElementById(“demo”).innerHTML = “Hello JavaScript”;
*document.getElementById(‘demo’).innerHTML = ‘Hello JavaScript’;
JavaScriptعن طريق HTMLتغيير قيمة

<!DOCTYPE html>
<html>
<body>
<button onclick=”document.getElementById(‘myImage’).src=’https://en.dlg-learning.com/wp-content/uploads/2022/05/ONbulb.jpg“>Turn on the light</button>
<img id=”myImage” src=”https://en.dlg-learning.com/wp-content/uploads/2022/05/pic_bulboff.gif” style=”width:100px”>
<button onclick=”document.getElementById(‘myImage’).src=’https://en.dlg-learning.com/wp-content/uploads/2022/05/pic_bulboff.gif‘”>Turn off the light</button>
</body>
</html>
HTML Styles (CSS)تغيير
الهدف للتعليم الرقمي
<!DOCTYPE html>
<html>
<body>
<p id=”ex4″>الهدف للتعليم الرقمي</p>
<button type=”button” onclick=”document.getElementById(‘ex4’).style.fontSize=’35px'”>Click Me!</button>
</body>
</html>
(display)
اخفاء الكلام عن طريق الضغط على الزر
الهدف للتعليم الرقمي
<!DOCTYPE html>
<html>
<body>
<p id=”ex5″>الهدف للتعليم الرقمي</p>
<button type=”button” onclick=”document.getElementById(‘ex5’).style.display=’none'”>Click Me!</button>
</body>
</html>
يمكن أيضًا إظهار عناصر HTML المخفية عن طريق تغيير نمط العرض
Digital learning Goal
<!DOCTYPE html>
<html>
<body>
<p>Digital learning Goal</p>
<p id=”ex6″ style=”display:none”>الهدف للتعليم الرقمي</p>
<button type=”button” onclick=”document.getElementById(‘ex6’).style.display=’block'”>Click Me!</button>
</body>
</html>
JavaScript Where To
1
The <script> Tag
<script> و < / script> يتم إدراج شفرة جافا سكريبت بين علامات
The output
Digital Learning Goal
<!DOCTYPE html>
<html>
<body>
<h3>Digital Learning Goal</h3>
<p id=”ex7″></p>
<script>
document.getElementById(“ex7″).innerHTML = ” الهدف للتعليم الرقمي “;
</script>
</body>
</html>
2
JavaScript in <head> or <body>
JavaScript in <head>
The output
Digital Learning Goal
DLG.
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
document.getElementById(“ex8”).innerHTML = “الهدف لتعليم الرقمي”;
}
</script>
</head>
<body>
<h3>Digital Learning Goal</h3>
<p id=”ex8″>DLG.</p>
<button type=”button” onclick=”myFunction()”>
changed</button>
</body>
</html>
2.1
JavaScript in <body>
The output
Digital Learning Goal
DLG.
<!DOCTYPE html>
<html>
<body>
<h3>Digital Learning Goal</h3>
<p id=”ex9″>DLG.</p>
<button type=”button” onclick=”myFunction()”>changed</button>
<script>
function myFunction() {
document.getElementById(“ex9”).innerHTML = “الهدف لتعليم الرقمي”;
}
</script>
</body>
</html>
3
External file JavaScript
External file: DLG.js
The output
Digital Learning Goal
DLG.
This example links to "DLG.js.
(change is stored in "DLG.js")
<!DOCTYPE html>
<html>
<body>
<h3>Digital Learning Goal</h3>
<p id=”ex10″>DLG.</p>
<button type=”button” onclick=”change()”>changed</button>
<p>This example links to “DLG.js”.</p>
<p>(change is stored in “DLG.js”)</p>
<script src=”DLG.js”></script>
</body>
</html>
<script>
function myFunction() {
document.getElementById(“ex10”).innerHTML = “الهدف لتعليم الرقمي”;
}
</script>
4
External References
example uses a full URL to link to DLG.js:
The output
Digital Learning Goal
DLG.
This example uses a full web URL to link to "DLG.js".
(myFunction is stored in "DLG.js")
<!DOCTYPE html>
<html>
<body>
<h3>Digital Learning Goal</h3>
<p id=”ex11″>DLG.</p>
<button type=”button” onclick=”myFunction()”>changed</button>
<script>
function myFunction() {
document.getElementById(“ex11”).innerHTML = “الهدف لتعليم الرقمي”;
}
</script>
<p>This example uses a full web URL to link to “DLG.js”.</p>
<p>(myFunction is stored in “DLG.js”)</p>
<script src=”https://dlg-learning.com//js/DLG.js”></script>
</body>
</html>
JavaScript OutPut
JavaScript Display Possibilities
1
using innerHTML
The output
Digital Learning Goal
الهدف لتعليم الرقمي
<!DOCTYPE html>
<html>
<body>
<h3>Digital Learning Goal</h3>
<p>الهدف لتعليم الرقمي </p>
<p id=”ex12″></p>
<script>
document.getElementById(“ex12”).innerHTML = 7+7;
</script>
</body>
</html>
2
Using document.write()
The output
Digital Learning Goal
الهدف لتعليم الرقمي
<!DOCTYPE html>
<html>
<body>
<h3>Digital Learning Goal</h3>
<p>الهدف لتعليم الرقمي </p>
بعد انتهاء من تحميل المستند سيتم الكتابة فوق المستند بأكمله document.write لا تتصل أبدا
<script>
document.write(7+7);
</script>
</body>
</html>
2.1
HTML بعد تحميل مستند document.write() سيؤدي استخدام
:الموجودة HTML الى حذف كافة
The output
Digital Learning Goal
الهدف لتعليم الرقمي
<!DOCTYPE html>
<html>
<body>
<h3>Digital Learning Goal</h3>
<p>الهدف لتعليم الرقمي </p>
<button type=”button” onclick=”document.write(7+7)”>changed</button>
</body>
</html>
3
Using window.alert()
You can use an alert box to display data:
The output
Digital Learning Goal
الهدف لتعليم الرقمي
<html>
<body>
<h3>Digital Learning Goal</h3>
<p>الهدف لتعليم الرقمي </p>
<button type=”button” onclick=”window.alert(7+7)”>Show</button>
</body>
</html>
4
JavaScript Print
method in the browser to print the content
The output
Digital Learning Goal
الهدف لتعليم الرقمي
<!DOCTYPE html>
<html>
<body>
<h3>Digital Learning Goal</h3>
<p>الهدف لتعليم الرقمي</p>
<button onclick=”window.print()”>Print</button>
</body>
</html>
JavaScript Statements
The output
A Digital Learning Goal is a company that provides educational and electronic services.
<!DOCTYPE html>
<html>
<body>
<p>A <b>Digital Learning Goal</b> is a company that<b> provides educational and electronic services</b>.</p>
<p id=”st1″></p>
<script>
let x, y, z; // Statement 1
x = 5; // Statement 2
y = 6; // Statement 3
z = x + y; // Statement 4
document.getElementById(“st1”).innerHTML =
“The value of z is ” + z + “.”;
</script>
</body>
</html>
*JavaScript statements are composed of:
Values, Operators, Expressions, Keywords, and Comments.
This statement tells the browser to write “Digital learning goal” inside an HTML element with id=”st2″
The output
In HTML, JavaScript statements are executed by the browser.
<!DOCTYPE html>
<html>
<body>
<p>In HTML, JavaScript statements are executed by the browser.</p>
<p id=”st2″></p>
<script>
document.getElementById(“st2”).innerHTML = “Digital Learning Goal”;
</script>
</body>
</html>
Semicolons separate JavaScript statements.
Add a semicolon at the end of each executable statement:
let a, b, c; // Declare 3 variables
a = 5; // Assign the value 5 to a
b = 6; // Assign the value 6 to b
c = a + b; // Assign the sum of a and b to c
JavaScript code blocks are written between { and }
The output
<!DOCTYPE html>
<html>
<body>
<button type=”button” onclick=”myFunction()”>Click Me!</button>
<p id=”st3″></p>
<p id=”st4″></p>
<script>
function myFunction() {
document.getElementById(“st3”).innerHTML = “Digital learning goal”;
document.getElementById(“st4”).innerHTML = “الهدف للتعليم الرقمي”;
}
</script>
</body>
</html>
JavaScript Keywords
keywords |
Description |
var | Declares a variable |
let | Declares a block variable |
const | Declares a block constant |
if | Marks a block of statements to be executed on a condition |
switch | Marks a block of statements to be executed in different cases |
for | Marks a block of statements to be executed in a loop |
function | Declares a function |
return | Exits a function |
try | Implements error handling to a block of statements |
JavaScript Syntax
JavaScript syntax is the set of rules, how JavaScript programs are constructed:
// How to create variables:
var x;
let y;
// How to use variables:
x = 5;
y = 6;
let z = x + y;
JavaScript Literals
The output
JavaScript Numbers
Number can be written with or without decimals.
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Numbers</h2>
<p>Number can be written with or without decimals.</p>
<p id=”st5″></p>
<script>
document.getElementById(“st5”).innerHTML = 10.50;
</script>
</body>
</html>
Strings are text, written within double or single quotes:
The output
<!DOCTYPE html>
<html>
<body>
<p id=”st6″></p>
<script>
document.getElementById(“st6”).innerHTML = ‘waleed’;
</script>
</body>
</html>
JavaScript Variables
The output
In this example, x is defined as a variable. Then, x is assigned the value of 6:
<!DOCTYPE html>
<html>
<body>
<p>In this example, x is defined as a variable.
Then, x is assigned the value of 6:</p>
<p id=”st7″></p>
<script>
x = 6;
document.getElementById(“st7”).innerHTML = x;
</script>
</body>
</html>
JavaScript Operators
The output
JavaScript uses arithmetic operators to compute values (just like algebra).
<!DOCTYPE html>
<html>
<body>
<p>JavaScript uses arithmetic operators to compute values (just like algebra).</p>
<p id=”st8″></p>
<script>
document.getElementById(“st8”).innerHTML = (5 + 6) * 10;
</script>
</body>
</html>
The output
In JavaScript the = operator is used to assign values to variables.
<!DOCTYPE html>
<html>
<body>
<p>In JavaScript the = operator is used to assign values to variables.</p>
<p id=”st9″></p>
<script>
x = 5;
y = 6;
document.getElementById(“st9”).innerHTML = x + y;
</script>
</body>
</html>
JavaScript Expressions
The output
Expressions compute to values.
<!DOCTYPE html>
<html>
<body>
<p>Expressions compute to values.</p>
<p id=”st10″></p>
<script>
document.getElementById(“st10”).innerHTML = 5 * 10;
</script>
</body>
</html>
The output
Expressions compute to values.
<!DOCTYPE html>
<html>
<body>
<p>Expressions compute to values.</p>
<p id=”st11″></p>
<script>
x = 5;
document.getElementById(“st11”).innerHTML = x * 10;
</script>
</body>
</html>
The output
Expressions compute to values.
<!DOCTYPE html>
<html>
<body>
<p>Expressions compute to values.</p>
<p id=”st12″></p>
<script>
document.getElementById(“st12”).innerHTML = “Digital” + ” ” + “Learning”;
</script>
</body>
</html>
JavaScript Keywords
The output
The let Keyword Creates Variables
<!DOCTYPE html>
<html>
<body>
<h2>The <b>let</b> Keyword Creates Variables</h2>
<p id=”st13″></p>
<script>
x = 5 + 6;
y = x * 10;
document.getElementById(“st13”).innerHTML = y;
</script>
</body>
</html>
The output
The var Keyword Creates Variables
<!DOCTYPE html>
<html>
<body>
<h2>The var Keyword Creates Variables</h2>
<p id=”st14″></p>
<script>
x = 5 + 6;
y = x * 10;
document.getElementById(“st14”).innerHTML = y;
</script>
</body>
</html>
JavaScript Comments
The output
JavaScript Comments are NOT Executed
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Comments are NOT Executed</h2>
<p id=”st15″></p>
<script>
let x2=5;
// x2 = 6; I will not be executed
document.getElementById(“st15”).innerHTML = x;
</script>
</body>
</html>
JavaScript Identifiers / Names
A JavaScript name must begin with:
- A letter (A-Z or a-z)
- A dollar sign ($)
- Or an underscore (_)
Note
Numbers are not allowed as the first character in names.
This way JavaScript can easily distinguish identifiers from numbers.
JavaScript is Case Sensitive
The output
JavaScript Strings
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Strings</h2>
<p id=”st16″></p>
<script>
let answer1 = “Digital”;
let answer2 = “Learning”;
let answer3 = ‘Goal’;
document.getElementById(“st16”).innerHTML =
answer1 + “<br>” + answer2 + “<br>” + answer3;
</script>
</body>
</html>
JavaScript Comments
1
Single Line Comments
The output
<!DOCTYPE html>
<html>
<body>
<h1 id=”ex17″></h1>
<p id=”ex18″></p>
<script>
//تغيير العنوان
document.getElementById(“ex17”).innerHTML = “Digital Learning Goal Comments”;
// تغيير الفقرة
document.getElementById(“ex18”).innerHTML = “DLG”;
</script>
</body>
</html>
2
Multi-line Comments
The output
<!DOCTYPE html>
<html>
<body>
<h1 id=”ex19″></h1>
<p id=”ex20″></p>
<script>
/*
يتغير الرمز
العنوان مع
id = “ex19”
الفقرة مع
id = “ex20”
*/
document.getElementById(“ex19”).innerHTML = “Digital Learning Goal Comments”;
document.getElementById(“ex20”).innerHTML = “DLG”;
</script>
</body>
</html>
JavaScript Variables
1
Variables
storing data values
The output
Digital Learning Goal
x, y, z are variables.
<!DOCTYPE html>
<html>
<body>
<h1>Digital Learning Goal</h1>
<p> x, y, z are variables.</p>
<p id=”ex21″></p>
<script>
var x = 8;
var y = 6;
var z = x + y;
document.getElementById(“ex21”).innerHTML =
“The resulting is = ” + z;
</script>
</body>
</html>
2
Using let
The output
Digital Learning Goal
x, y, z are variables.
<!DOCTYPE html>
<html>
<body>
<h2>Digital Learning Goal</h2>
<p>x, y, z are variables.</p>
<p id=”ex22″></p>
<script>
let x = 7;
let y = 12;
let z = x + y;
document.getElementById(“ex22”).innerHTML =
“The resulting is = ” + z;
</script>
</body>
</html>
3
Using const
use If you want a general rule
The output
Digital Learning Goal
x, y, z are variables.
<!DOCTYPE html>
<html>
<body>
<h1>Digital Learning Goal</h1>
<p>x, y, z are variables.</p>
<p id=”ex23″></p>
<script>
const x = 6;
const y = 14;
let z = x + y;
document.getElementById(“ex23”).innerHTML =
“The resulting is =” + z;
</script>
</body>
</html>
JavaScript Arithmetic
Arithmetic Operators
The output
Digital Learning Goal
Arithmetic
<!DOCTYPE html>
<html>
<body>
<h2>Digital Learning Goal</h2>
<p>Arithmetic</p>
<p id=”ex24″></p>
<script>
x = 70 + 120;
/*The modulus operator */
m = 70 % 120;
/*1- exponentiation operator */
o = 6
o ** 2
/*2- exponentiation operator */
p=Math.pow(x,2)
document.getElementById(“ex24”).innerHTML = “The resulting is =” + x + “<br>” + “The resulting is =” + m + “<br>” + “The resulting is =” + o + “<br>” + “The resulting is =” + p;
</script>
</body>
</html>
JavaScript Functions
The output
DLG Functions
Digital Learning Goal
<!DOCTYPE html>
<html>
<body>
<h2>DLG Functions</h2>
<p>Digital Learning Goal</p>
<p id=”ex25″></p>
<script>
function myFunction(f1, f2) {
return f1 * f2;
}
document.getElementById(“ex25”).innerHTML = myFunction(8, 12);
</script>
</body>
</html>
Function Return
The output
DLG Functions
Digital Learning Goal
<!DOCTYPE html>
<html>
<body>
<h2>DLG Functions</h2>
<p>Digital Learning Goal</p>
<p id=”ex25″></p>
<script>
var x = myFunction(6, 14);
document.getElementById(“ex25”).innerHTML = x;
function myFunction(f1, f2) {
return f1 * f2;
}
</script>
</body>
</html>
JavaScript Strings
The output
DLG
<!DOCTYPE html>
<html>
<body>
<h2>DLG</h2>
<p id=”ex27″></p>
<script>
text = “Digital Learning Goal”;
y = “Goal”;
/*are equal (text==y) */
document.getElementById(“ex27”).innerHTML = text + “<br>” +”The length ” + text.length + “<br>” + (text==y) ;
</script>
</body>
</html>
JavaScript String Methods
The output
Digital Learning Goal
<!DOCTYPE html>
<html>
<body>
<h2>Digital Learning Goal</h2>
<p id=”ex28″></p>
<script>
let str = “Digital, Learning, Goal”;
document.getElementById(“ex28″).innerHTML =”String slice =” + str.slice(2,7) + “<br>” +
“String substring =” + str.substring(7,17) + “<br>” + “String substr =” + str.substr(-7);
</script>
</body>
</html>
The output
DLG
Digital Learning Goal
<!DOCTYPE html>
<html>
<body>
<h2>DLG</h2>
/* ToLowerCase*/
<button onclick=”myFunction()”>switch</button>
<p id=”ex29″>Digital Learning Goal</p>
<script>
function myFunction() {
let text = document.getElementById(“ex29”).innerHTML;
document.getElementById(“ex29”).innerHTML =
text.toUpperCase();
}
</script>
</body>
</html>
JavaScript Search Methods
1)indexOf():method returns the index of (the position of) the first
occurrence of a specified text in a string.
2)lastIndexOf():method returns the index of the last occurrence of a specified text in a string.
3)search():method searches a string for a specified value and returns the position of the match
4)match():method searches a string for a match against a regular expression, and returns the matches, as an Array object
5)includes():method returns true if a string contains a specified value.
6)startsWith():method returns true
if a string begins with a specified value, otherwise false
8)endsWith(): method returns true
if a string ends with a specified value, otherwise false
The output
<!DOCTYPE html>
<html>
<body>
<p id=”sr1″></p>
<p id=”sr2″></p>
<p id=”sr3″></p>
<p id=”sr4″></p>
<p id=”sr5″></p>
<p id=”sr6″></p>
<p id=”sr7″></p>
<p id=”sr8″></p>
<p id=”sr9″></p>
<p id=”sr10″></p>
<script>
let str1 = “Please locate where ‘locate’ occurs!”;
document.getElementById(“sr1”).innerHTML = str1.indexOf(“locate”);
document.getElementById(“sr2”).innerHTML = str1.lastIndexOf(“locate”);
//Both indexOf(), and lastIndexOf() return -1 if the text is not found:
document.getElementById(“sr3”).innerHTML = str1.indexOf(“John”);
//The lastIndexOf() methods searches backwards (from the end to the beginning), meaning: if the second parameter is 15, the search starts at position 15, and searches to the beginning of the string.
document.getElementById(“sr4”).innerHTML = str1.lastIndexOf(“locate”, 15);
document.getElementById(“sr5”).innerHTML = str1.search(“locate”);
let text1 = “The rain in SPAIN stays mainly in the plain”;
document.getElementById(“sr6”).innerHTML = text1.match(/ain/g);
document.getElementById(“sr7”).innerHTML = text1.match(/ain/gi);
let text2 = “Hello world, welcome to the universe.”;
document.getElementById(“sr8”).innerHTML = text2.includes(“world”);
document.getElementById(“sr9”).innerHTML = text2.startsWith(“Hello”);
document.getElementById(“sr10”).innerHTML = text2.endsWith(“world”, 11);
</script>
</body>
</html>
JavaScript Template Literals
The output
<!DOCTYPE html>
<html>
<body>
<p id=”tmp1″></p>
<p id=”tmp2″></p>
<p id=”tmp3″></p>
<p id=”tmp4″></p>
<script>
//Template literals are not supported in Internet Explorer.
let text3 = `Hello world!`;
document.getElementById(“tmp1”).innerHTML = text3;
//With template literals, you can use both single and double quotes inside a string:
let text4 = `He’s often called “Johnny”`;
document.getElementById(“tmp2”).innerHTML = text4;
let firstName2 = “John”;
let lastName2 = “Doe”;
let text5 = `Welcome ${firstName2}, ${lastName2}!`;
document.getElementById(“tmp3”).innerHTML = text5;
let price1 = 10;
let VAT1 = 0.25;
let total1 = `Total: ${(price1 * (1 + VAT1)).toFixed(2)}`;
document.getElementById(“tmp4”).innerHTML = total1;
</script>
</body>
</html>
JavaScript Number Methods
The output
<!DOCTYPE html>
<html>
<body>
<p id=”nm1″></p>
<p id=”nm2″></p>
<p id=”nm3″></p>
<p id=”nm4″></p>
<p id=”nm5″></p>
<p id=”nm6″></p>
<p id=”nm7″></p>
<p id=”nm8″></p>
<p id=”nm9″></p>
<p id=”nm10″></p>
<script>
let xnm1 = 123;
//The toString() method returns a number as a string.
document.getElementById(“nm1”).innerHTML =
xnm1.toString();
//toExponential() returns a string, with a number rounded and written using exponential notation.
let xnm2 = 9.656;
document.getElementById(“nm2”).innerHTML =
xnm2.toExponential() + “<br>” +
xnm2.toExponential(2) + “<br>” +
xnm2.toExponential(4) ;
//toFixed() returns a string, with the number written with a specified number of decimals:
document.getElementById(“nm3”).innerHTML =
xnm2.toFixed(0) + “<br>” +
xnm2.toFixed(2) + “<br>” +
xnm2.toFixed(4) ;
//toPrecision() returns a string, with a number written with a specified length:
document.getElementById(“nm4”).innerHTML =
xnm2.toPrecision() + “<br>” +
xnm2.toPrecision(2) + “<br>” +
xnm2.toPrecision(4);
//valueOf() returns a number as a number.
document.getElementById(“nm5”).innerHTML =
xnm1.valueOf();
//Number() can be used to convert JavaScript variables to numbers:
document.getElementById(“nm6”).innerHTML =
Number(true) + “<br>” +
Number(false) + “<br>” +
Number(“10”) + “<br>” + Number(“10.33”) + “<br>” +
Number(“10,33”) + “<br>” +
Number(“10 33”) + “<br>” +
Number(“John”);
//parseInt() parses a string and returns a whole number. Spaces are allowed. Only the first number is returned:
document.getElementById(“nm7”).innerHTML =
parseInt(“-10”) + “<br>” +
parseInt(“-10.33”) + “<br>” +
parseInt(“10”) + “<br>” +
parseInt(“10.33”) + “<br>” +
parseInt(“10 6”) + “<br>” +
parseInt(“10 years”) + “<br>” +
parseInt(“years 10”);
//MAX_VALUE returns the largest possible number in JavaScript.
let xnm3 = Number.MAX_VALUE;
document.getElementById(“nm8”).innerHTML = xnm3;
//POSITIVE_INFINITY is returned on overflow:
let xnm4 = 1 / 0;
document.getElementById(“nm9”).innerHTML = xnm4;
//NaN is a JavaScript reserved word indicating that a number is not a legal number.
document.getElementById(“nm10”).innerHTML = 100 / “Apple”;
</script>
</body>
</html>
JavaScript Arrays
The output
<!DOCTYPE html>
<html>
<body>
<p id=”arr1″></p>
<p id=”arr2″></p>
<script>
const cars = [];
cars[0]= “Saab”;
cars[1]= “Volvo”;
cars[2]= “BMW”;
document.getElementById(“arr1”).innerHTML = cars;
//Using the JavaScript Keyword new
const cars2 = new Array(“Ford”, “mercedes”, “BMW”);
document.getElementById(“arr2”).innerHTML = cars2;
</script>
</body>
</html>
Arrays are Objects
The output
<!DOCTYPE html>
<html>
<body>
<p id=”arr3″></p>
<p id=”arr4″></p>
<p id=”arr5″></p>
<script>
// Arrays use numbers to access its “elements”. In this example, person[0] returns John:
const person1 = [“John”, “Doe”, 46];
document.getElementById(“arr3”).innerHTML = person1[0];
//Objects use names to access its “members”. In this example, person.firstName returns John:
const person2 = {firstName:”John”, lastName:”Doe”, age:46};
document.getElementById(“arr4”).innerHTML = person2.firstName;
//The length property of an array returns the length of an array (the number of array elements).
const fruits = [“Banana”, “Orange”, “Apple”, “Mango”];
document.getElementById(“arr5”).innerHTML = fruits.length;
</script>
</body>
</html>
How to Recognize an Array
The output
<!DOCTYPE html>
<html>
<body>
<p id=”arr6″></p>
<p id=”arr7″></p>
<p id=”arr8″></p>
<script>
//The problem is that the JavaScript operator typeof returns “object”:
const fruits2 = [“Banana”, “Orange”, “Apple”, “Mango”];
document.getElementById(“arr6”).innerHTML = typeof fruits2;
//To solve this problem ECMAScript 5 (JavaScript 2009) defined a new method Array.isArray():
document.getElementById(“arr7”).innerHTML = Array.isArray(fruits2);
//The instanceof operator returns true if an object is created by a given constructor:
document.getElementById(“arr8”).innerHTML = fruits2 instanceof Array;
</script>
</body>
</html>
JavaScript Array Methods
Converting Arrays to Strings
The output
<!DOCTYPE html>
<html>
<body>
<p id=”arr9″></p>
<p id=”arr10″></p>
<script>
const fm = [“Banana”, “Orange”, “Apple”, “Mango”];
document.getElementById(“arr9”).innerHTML = fm.toString();
document.getElementById(“arr10″).innerHTML = fm.join(” * “);
</script>
</body>
</html>
Popping and Pushing
The output
<!DOCTYPE html>
<html>
<body>
<p id=”arr11″></p>
<p id=”arr12″></p>
<p id=”arr13″></p>
<p id=”arr14″></p>
<script>
const frpop = [“Banana”, “Orange”, “Apple”, “Mango”];
document.getElementById(“arr11”).innerHTML = frpop;
frpop.pop();
document.getElementById(“arr12”).innerHTML = frpop;
const frpush = [“Banana”, “Orange”, “Apple”, “Mango”];
document.getElementById(“arr13”).innerHTML = frpush ;
frpush.push(“Kiwi”);
document.getElementById(“arr14”).innerHTML = frpush;
</script>
</body>
</html>
JavaScript Sorting Arrays
Sorting an Array
The output
<!DOCTYPE html>
<html>
<body>
<p id=”arr15″></p>
<p id=”arr16″></p>
<script>
const frsort = [“Banana”, “Orange”, “Apple”, “Mango”];
document.getElementById(“arr15”).innerHTML = frsort;
frsort.sort();
document.getElementById(“arr16”).innerHTML = frsort;
</script>
</body>
</html>
Numeric Sort
The output
JavaScript Array Sort
Sort the array in ascending order:
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Array Sort</h2>
<p>Sort the array in ascending order:</p>
<p id=”arr17″></p>
<p id=”arr18″></p>
<script>
const pointsSort = [40, 100, 1, 5, 25, 10];
document.getElementById(“demo1”).innerHTML = pointsSort;
pointsSort.sort(function(a, b){return a – b});
document.getElementById(“demo2”).innerHTML = pointsSort;
</script>
</body>
</html>
JavaScript Date Objects
The output
<!DOCTYPE html>
<html>
<body>
<p id=”do”></p>
<script>
//6 numbers specify year, month, day, hour, minute, second:
const d1 = new Date(2018, 11, 24, 10, 33, 30);
document.getElementById(“do”).innerHTML = d1;
</script>
</body>
</html>
The output
<!DOCTYPE html>
<html>
<body>
<p id=”do2″></p>
<p id=”do3″></p>
<p id=”do4″></p>
<script>
//The toUTCString() method converts a date to a UTC string (a date display standard).
const d2 = new Date();
document.getElementById(“do2”).innerHTML = d2.toUTCString();
//The toDateString() method converts a date to a more readable format:
const d3 = new Date();
document.getElementById(“do3”).innerHTML = d3.toDateString();
//The toISOString() method converts a Date object to a string, using the ISO standard format:
const d4 = new Date();
document.getElementById(“do4”).innerHTML = d4.toISOString();
</script>
</body>
</html>
JavaScript if, else, and else if
The output
<!DOCTYPE html>
<html>
<body>
<p id=”ifelse”></p>
<script>
const time10 = new Date().getHours();
let greeting;
if (time10 < 10) {
greeting = “Good morning”;
} else if (time10 < 20) {
greeting = “Good day”;
} else {
greeting = “Good evening”;
}
document.getElementById(“ifelse”).innerHTML = greeting;
</script>
</body>
</html>
JavaScript Switch Statement
The output
<!DOCTYPE html>
<html>
<body>
<p id=”sw”></p>
<script>
let textsw;
switch (new Date().getDay()) {
case 4:
case 5:
textsw = “Soon it is Weekend”;
break;
case 0:
case 6:
textsw = “It is Weekend”;
break;
default:
textsw = “Looking forward to the Weekend”;
}
document.getElementById(“sw”).innerHTML = textsw;
</script>
</body>
</html>
JavaScript For
The output
<!DOCTYPE html>
<html>
<body>
<p id=”forof”></p>
<script>
const carsfor = [“BMW”, “Volvo”, “Mini”];
let textfor = “”;
for (let s of carsfor) {
textfor += s + “<br>”;
}
document.getElementById(“forof”).innerHTML = textfor;
</script>
</body>
</html>
JavaScript While Loop
The output
<!DOCTYPE html>
<html>
<body>
<p id=”wloop”></p>
<script>
let textloop = “”;
let il = 0;
while (il < 10) {
textloop += “<br>The number is ” + il;
il++;
}
document.getElementById(“wloop”).innerHTML = textloop;
</script>
</body>
</html>
The Do While Loop
The output
<!DOCTYPE html>
<html>
<body>
<p id=”doloop”></p>
<script>
let textDo = “”
let iDo = 0;
do {
textDo += “<br>The number is ” + iDo;
iDo++;
}
while (iDo < 10);
document.getElementById(“doloop”).innerHTML = textDo;
</script>
</body>
</html>
Break and Continue
The output
Digital Learning Goal
A loop with a break .
A loop with a continue .
<!DOCTYPE html>
<html>
<body>
<h2>Digital Learning Goal</h2>
<p>A loop with a <b>break</b> .</p>
<p id=”ex30″></p>
<script>
let num = “”;
for (let i = 0; i < 10; i++) {
if (i === 4) { break; }
num += “The number is ” + i + “<br>”;
}
document.getElementById(“ex30”).innerHTML = num;
</script>
<p>A loop with a <b>continue</b> .</p>
<p id=”ex31″></p>
<script>
let num1 = “”;
for (let y = 0; y < 10; y++) {
if (y === 7) { continue; }
num1 += “The number is ” + y + “<br>”;
}
document.getElementById(“ex31”).innerHTML = num1;
</script>
</body>
</html>
For Of Loop
The output
Digital Learning Goal
For Of Loop
<!DOCTYPE html>
<html>
<body>
<h2>Digital Learning Goal</h2>
<p>For Of Loop</p>
<p id=”ex33″></p>
<script>
// Create a String
const word = “welcome”;
let name = “”
for (const i of word) {
name += i + “<br>”;
}
document.getElementById(“ex33”).innerHTML = name;
</script>
</body>
</html>
Sets
The output
Digital Learning Goal
Create a Set
add() Method
<!DOCTYPE html>
<html>
<body>
<h2>Digital Learning Goal</h2>
<p>Create a Set</p>
<p>add() Method</p>
<p id=”ex34″></p>
<script>
// step1: Create a Set
const letter = new Set([“D”,”L”,”G”]);
//step2:Add a new Element
letter.add(“j”);
letter.add(“o”);
// step3:letters.size
document.getElementById(“ex34”).innerHTML = “The size set =”+ letter.size;
</script>
</body>
</html>
set
forEach() Method
The output
Digital Learning Goal
forEach() calls a function for each element:
values() calls a function each element:
<!DOCTYPE html>
<html>
<body>
<h2>Digital Learning Goal</h2>
<p>forEach() calls a function for each element:</p>
<p id=”ex35″></p>
<script>
const letters1 = new Set([“D”,”L”,”G”]);
// step:forEach
let X = “”;
letters1.forEach (function(value) {
X += value + “<br>”;
})
document.getElementById(“ex35”).innerHTML = X;
</script>
<p> values() calls a function each element:</p>
<p id=”ex36″></p>
<script>
const letters2 = new Set([“D”,”L”,”G”]);
// step:values
let text = “”;
for (const x of letters2.values()) {
text += x + “<br>”;
}
document.getElementById(“ex36”).innerHTML = text;
</script>
</body>
</html>
typeof
The output
Digital Learning Goal
The typeof operator returns the type of a variable, object, function or expression.
<!DOCTYPE html>
<html>
<body>
<h3>Digital Learning Goal</h3>
<p>The typeof operator returns the type of a variable, object, function or expression.</p>
<p id=”ex37″></p>
<script>
document.getElementById(“ex37”).innerHTML =
“1- ” + typeof “Hello” + “<br>” +
“2- ” + typeof 8.16 + “<br>” +
“3- ” + typeof one + “<br>” +
“4- ” + typeof true + “<br>” +
“5- ” + typeof [1,1,2,2] + “<br>” +
“6- ” + typeof {name:’adam’, age:32} + “<br>” +
“7- ” + typeof new Date() + “<br>” +
“8- ” + typeof function () {} + “<br>” +
“9- ” + typeof mybook + “<br>” +
“10- ” + typeof null;
</script>
</body>
</html>
Bitwise Operations
The output
Digital Learning Goal
شركة الهدف لتعليم الرقمي
<!DOCTYPE html>
<html>
<body>
<h3>Digital Learning Goal</h3>
<p id=”ex38″>شركة الهدف لتعليم الرقمي </p>
<script>
// Bitwise AND (&)
x = 7 & 2;
// Bitwise OR (|)
y = 7 | 2;
// Bitwise XOR (^)
z = 7 ^ 2;
// Bitwise NOT (~)
e = ~ 7;
// Bitwise Left Shift (<<)
r = 7 << 2;
// Bitwise Right Shift (>>)
s = -7 >> 2;
// Right Shift (>>>)
d = 7 >>> 2;
document.getElementById(“ex38”).innerHTML = “AND = ” + x + “<br>” + “OR = ” + y + “<br>”+ “XOR = ” + z + “<br>” + “NOT = ” + e + “<br>” + “Zero fill left shift = ” + r + “<br>” + “Signed right shift = ” + s + “<br>” + “Zero fill right shift = ” + d ;
</script>
</body>
</html>
Error
The output
Digital Learning Goal
Error type:
<!DOCTYPE html>
<html>
<body>
<h2>Digital Learning Goal</h2>
<p> Error type:</p>
<p id=”ex39″></p>
<script>
try {
eval(“alert(‘DLG)”);
}
catch(err) {
document.getElementById(“ex39”).innerHTML = err.name;
}
</script>
</body>
</html>
Error
finally Statement
The output
Try Catch
Please input a number between 7 and 14:
<!DOCTYPE html>
<html>
<body>
<h2>Try Catch</h2>
<p>Please input a number between 7 and 14:</p>
<input id=”ex40″ type=”num”>
<button type=”button” onclick=”myFunction()”>Test </button>
<p id=”pA1″></p>
<script>
function myFunction() {
const message = document.getElementById(“pA1”);
message.innerHTML = “”;
let x = document.getElementById(“ex40”).value;
try {
if(x == “”) throw “empty”;
if(isNaN(x)) throw “not a number”;
x = Number(x);
if(x > 14) throw “is too high”;
if(x < 7) throw “is too low”;
}
catch(err) {
message.innerHTML = “Input ” + err;
}
finally {
document.getElementById(“ex40”).value = “”;
}
}
</script>
</body>
</html>
this Keyword
The output
Digital Learning Goal
firstName and lastName
<!DOCTYPE html>
<html>
<body>
<h2>Digital Learning Goal</h2>
<p>firstName and lastName </p>
<p id=”ex41″></p>
<script>
//step1: Create an object:
const data = {
firstName: “Rital”,
lastName: “Ahmad”,
id: 7722,
fullName : function() {
return this.firstName + ” ” + this.lastName;
}
};
//step2: Display data
document.getElementById(“ex41”).innerHTML = data.fullName();
</script>
</body>
</html>
Arrow Function
The output
Digital Learning Goal
Arrow Functionand how to use it.
<!DOCTYPE html>
<html>
<body>
<h2>Digital Learning Goal</h2>
<p>Arrow Functionand how to use it.</p>
<p id=”ex42″></p>
<script>
var DLG;
DLG = () => {
return “شركة الهدف لتعليم الرقمي “;
}
document.getElementById(“ex42”).innerHTML = DLG();
</script>
</body>
</html>
Using a Class
The output
DLG Class
How to use a Class.
<!DOCTYPE html>
<html>
<body>
<h2>DLG Class</h2>
<p>How to use a Class.</p>
<p id=”ex43″></p>
<script>
//step: create to class
class person {
constructor(firstName, id) {
this.firstName = firstName;
this.id = id;
}
}
const myperson = new person(“Rital”, 165346535);
document.getElementById(“ex43”).innerHTML =
myperson.firstName + ” ” + myperson.id;
</script>
</body>
</html>
Class Methods
constructor()
The output
DLG Class Method
How to define and use a Class method.
<!DOCTYPE html>
<html>
<body>
<h2>DLG Class Method</h2>
<p>How to define and use a Class method.</p>
<p id=”ex44″></p>
<script>
class Car {
constructor(name, year) {
this.name = name;
this.year = year;
}
age() {
let date = new Date();
return date.getFullYear() – this.year;
}
}
let myCar = new Car(“Ford”, 2014);
document.getElementById(“ex44”).innerHTML =
“My car is ” + myCar.age() + ” years old.”;
</script>
</body>
</html>
JSON
My name is Jesse, I am 40.
<!DOCTYPE html>
<html>
<body>
<p id=”djs”></p>
<script>
let textjss = ‘{“employees”:[‘ +
‘{“firstName”:”John”,”lastName”:”Doe” },’ +
‘{“firstName”:”Anna”,”lastName”:”Smith” },’ +
‘{“firstName”:”Peter”,”lastName”:”Jones” }]}’;
const obj1 = JSON.parse(textjss);
document.getElementById(“djs”).innerHTML =
obj.employees[1].firstName + ” ” + obj.employees[1].lastName;
</script>
</body>
</html>
JavaScript Best Practices
JavaScript Literal Constructors
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Literal Constructors</h2>
<p id=”bp1″></p>
<script>
let x1b = “”;
let x2b = 0;
let x3b = false;
const x4b = {};
const x5b = [];
const x6b = /()/;
const x7b = function(){};
document.getElementById(“bp1”).innerHTML =
“x1: ” + typeof x1b + “<br>” +
“x2: ” + typeof x2b + “<br>” +
“x3: ” + typeof x3b + “<br>” +
“x4: ” + typeof x4b + “<br>” +
“x5: ” + typeof x5b + “<br>” +
“x6: ” + typeof x6b + “<br>” +
“x7: ” + typeof x7b + “<br>”;
</script>
</body>
</html>
JavaScript Objects
object definition
Creating a JavaScript Object:
John is 50 years old.
<!DOCTYPE html>
<html>
<body>
<p>Creating a JavaScript Object:</p>
<p id=”obdef”></p>
<script>
const person = {};
person.firstName = “John”;
person.lastName = “Doe”;
person.age = 50;
person.eyeColor = “blue”;
document.getElementById(“obdef”).innerHTML =
person.firstName + ” is ” + person.age + ” years old.”;
</script>
</body>
</html>
Object Properties
Deleting object properties.
<!DOCTYPE html>
<html>
<body>
<p>Deleting object properties.</p>
<p id=”prop”></p>
<script>
const personProp = {
firstnamepr: “John”,
lastnamepr: “Doe”,
agepr: 50,
eyecolorpr: “blue”
};
delete personProp[“agepr”];
document.getElementById(“prop”).innerHTML =
personProp.firstnamepr + ” is ” + personProp.agepr + ” years old.”;
</script>
</body>
</html>
Object Method
<!DOCTYPE html>
<html>
<body>
<p id=”meth”></p>
<script>
const personMth = {
firstNamemt: “John”,
lastNamemt: “Doe”,
idmt: 5566,
};
personMth.namemt = function() {
return (this.firstNamemt + ” ” + this.lastNamemt).toUpperCase();
};
document.getElementById(“meth”).innerHTML =
“My father is ” + personMth.namemt();
</script>
</body>
</html>
Object Constructor
<!DOCTYPE html>
<html>
<body>
<p id=”cons”></p>
<script>
// Constructor function for Person objects
function PersonCon(first, last, age, eye) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eye;
this.name = function() {
return this.firstName + ” ” + this.lastName
};
}
// Create a Person object
const myFatherCon = new PersonCon(“John”, “Doe”, 50, “blue”);
// Display full name
document.getElementById(“cons”).innerHTML =
“My father is ” + myFatherCon.name();
</script>
</body>
</html>
Object Iterable
10
20
30
40
50
60
70
80
90
<!DOCTYPE html>
<html>
<body>
<p id=”itr”></p>
<script>
myNumbersirt = {};
// Make it Iterable
myNumbersitr[Symbol.iterator] = function() {
let nitr = 0;
doneitr = false;
return {
next() {
nitr += 10;
if (nitr == 100) {doneitr = true}
return {value:nitr, doneitr:doneitr};
}
};
}
let textitr = “”
for (const num of myNumbers) {
textitr += num +”<br>”
}
document.getElementById(“itr”).innerHTML = textitr;
</script>
</body>
</html>
Object Sets
<!DOCTYPE html>
<html>
<body>
<p id=”set1″></p>
<p id=”set2″></p>
<p id=”set3″></p>
<script>
// Create a Set
const lettersSet = new Set([“a”,”b”,”c”]);
// Display set.size
document.getElementById(“set1”).innerHTML = letters.size;
const lettersSet2 = new Set([“a”,”b”,”c”]);
// Add a new Element
lettersSet2.add(“d”);
lettersSet2.add(“e”);
document.getElementById(“set2”).innerHTML = letters.size;
// List all Elements
let textSet = “”;
lettersSet2.forEach (function(value) {
textSet += value + “<br>”;
})
document.getElementById(“set3”).innerHTML = textSet;
</script>
</body>
</html>
Object Maps
The output
Digital Learning Goal
Map from an Array:
<html>
<body>
<h2>Digital Learning Goal</h2>
<p> Map from an Array:</p>
<p id=”EXB1″></p>
<script>
//step: Create a Map
const DLG = new Map([
[“Home “, 400],
[“About Us”, 200],
[“Learning”, 100]
]);
//Map.keys()
let num = “”;
for (const x of DLG.keys()) {
num += x + “<br>”;
}
document.getElementById(“EXB1”).innerHTML = num;
document.getElementById(“EXB1”).innerHTML = DLG.get(“Learning”);
//Map.size
document.getElementById(“EXB1”).innerHTML = DLG.size;
//Map.delete();
//Map.has();
//Map.clear()
</script>
</body>
</html>
Function Declarations
The output
Digital Learning Goal
returns the result =
<!DOCTYPE html>
<html>
<body>
<h2>Digital Learning Goal</h2>
<p> returns the result =</p>
<p id=”EXB2″></p>
<script>
const myDLG = function (x, y) {return x * y}
document.getElementById(“EXB2”).innerHTML = myDLG(7, 2);
</script>
</body>
</html>
Function Parameters
The output
Digital Learning Goal
The result Sum =
<!DOCTYPE html>
<html>
<body>
<h2>Digital Learning Goal</h2>
<p> The result Sum = </p>
<p id=”EXB3″></p>
<script>
function sumAll() {
let sum = 0;
for(let i = 0; i < arguments.length; i++) {
sum += arguments[i];
}
return sum;
}
document.getElementById(“EXB3”).innerHTML = sumAll(7, 100, 2, 70, 44);</script>
</body>
</html>
apply() Method
The output
Digital Learning Goal
the fulllName method of person :
<!DOCTYPE html>
<html>
<body>
<h2>Digital Learning Goal</h2>
<p> the fulllName method of person :</p>
<p id=”EXB4″></p>
<script>
const persons = {
Name: function() {
return this.FirstName + ” ” + this.LastName;
}
}
const per = {
FirstName:”Batool”,
LastName: “Emad”
}
document.getElementById(“EXB4”).innerHTML = persons.Name.apply(per);
</script>
</body>
</html>
Function Borrowing
The output
Digital Learning Goal
This example creates 2 objects
FullName :
<!DOCTYPE html>
<html>
<body>
<h2>Digital Learning Goal</h2>
<p>This example creates 2 objects </p>
<p>FullName :</p>
<p id=”EXB5″></p>
<script>
const Person1 = {
FirstName:”Batool”,
LastName: “Emad”,
FullName1: function() {
return this.FirstName + ” ” + this.LastName;
}
}
const Person2 = {
FirstName:”Lama”,
LastName: “Ahmed”,
}
let FullName1 = Person1.FullName1.bind(Person2);
document.getElementById(“EXB5”).innerHTML = FullName1();
</script>
</body>
</html>
Function closures
The output
Digital Learning Goal
A function can access variables defined inside the function:
<!DOCTYPE html>
<html>
<body>
<h2>Digital Learning Goal</h2>
<p>A function can access variables defined inside the function:</p>
<p id=”EXB6″></p>
<script>
myFunction();
function myFunction() {
let a = 2;
document.getElementById(“EXB6”).innerHTML = a * a;
}
</script>
</body>
</html>
Class Inheritance
JavaScript Class Inheritance
<!DOCTYPE html>
<html>
<body>
<h2>Digital Learning Goal Class </h2>
<h2>Getters and Setters </h2>
<p id=”EXB9″></p>
<script>
class Home {
constructor(brand) {
this.carname = brand;
}
get cnam() {
return this.carname;
}
set cnam(x) {
this.carname = x;
}
}
let myCars = new Car(“Ford”);
document.getElementById(“EXB9”).innerHTML = myCars.cnam;
</script>
</body>
</html>
Static Methods
The output
DLG Class Static Methods
<!DOCTYPE html>
<html>
<body>
<h2>DLG Class Static Methods</h2>
<p id=”EXB10″></p>
<script>
class names {
constructor(name) {
this.name = name;
}
static namef() {
return “الهدف للتعليم الرقمي “;
}
}
let myfun = new names(“Batool”);
document.getElementById(“EXB10”).innerHTML = names.namef();
</script>
</body>
</html>
Async Callbacks
The output
Digital Learning Goal
The result :
<!DOCTYPE html>
<html>
<body>
<h2>Digital Learning Goal</h2>
<p>The result : </p>
<p id=”EXB11″></p>
<script>
function myDisplayer(some) {
document.getElementById(“EXB11”).innerHTML = some;
}
function myFirst() {
myDisplayer(“الهدف للتعليم الرقمي “);
}
function mySecond() {
myDisplayer(“DLG”);
}
myFirst();
mySecond();
</script>
</body>
</html>
Asynchronous
The output
Digital Learning Goal
the result :
<!DOCTYPE html>
<html>
<body>
<h2>Digital Learning Goal</h2>
<p> the result : </p>
<p id=”EXB12″></p>
<script>
function myDisplayer(something) {
document.getElementById(“EXB12”).innerHTML = something;
}
function myCalculator(num1, num2, myCallback) {
let sum = num1 + num2;
myCallback(sum);
}
myCalculator(24,65, myDisplayer);
</script>
</body>
</html>
Window Screen
The output
Digital Learning Goal
<html>
<body>
<h2>Digital Learning Goal</h2>
<p id=”EXB13″></p>
<script>
/*
screen.width
screen.height
screen.availWidth
screen.availHeight
screen.colorDepth
screen.pixelDepth
*/
document.getElementById(“EXB13”).innerHTML =
“Screen width is ” + screen.width;
/*Window Location*/
document.getElementById(“EXB13”).innerHTML =
“The full URL of this page is:<br>” + window.location.href;
</script>
</body>
</html>
Web APIs
Digital Learning Goal
Enter a number and click Checke:
If the number is less than 70 or greater than 100, an error message will be displayed.
<!DOCTYPE html>
<html>
<body>
<h2>Digital Learning Goal</h2>
<p>Enter a number and click Checke:</p>
<input id=”id1″ type=”number” min=”70″ max=”100″ required>
<button onclick=”myFunction()”>Checke</button>
<p>If the number is less than 70 or greater than 100, an error message will be displayed.</p>
<p id=”EXB14″></p>
<script>
function myFunction() {
const inpObj = document.getElementById(“id1”);
if (!inpObj.checkValidity()) {
document.getElementById(“EXB14”).innerHTML = inpObj.validationMessage;
} else {
document.getElementById(“EXB14”).innerHTML = “Input OK”;
}
}
</script>
</body>
</html>