اظهارالوقت و التاريخ

الهدف للتعليم الرقمي

<!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>