Schools Summits-American-school Courses Computer-110 Materials 2023 May Week-4 Now-1684821321676 63225-Trimester 3 Material Grade 10

ICT Grade 10
Third Trimester Material
WE PROVIDE THE BEST
ICT Department
ICT Department
Grade 10
Calling A Code In JavaScript
Calling java script code by using Button command:
To execute java script statements inside <script></script>
when an event happens as. Clicking on the Button command,
First you need to know FUNCTIONS.
FUNCTION:
It’s a set of commands that will be executed when you call it.
But the function name should refer to its job.
Creating a function:
To create a function you should follow the following steps:
1.Write the function and then write its name that should refer to its job.
2.Write the code between { } that will be executed when the
function will be called.

Function function name()
{
Function code
}
ICT Department
Grade 10
Activity
Design a web page and create a function when you call it .
It will display a message box "Arabic public of Egypt" by following
these steps:
 open Notepad file.
 Create new html file.
 Write the code in notepad and save it with the extension .html
 Open the file in the web browser.
<html>
<head><title>call function</title></head>
<body>
<input type="button" onclick="country()" value="click me">
<script>
function country()
{
alert("Arabic public of Egypt");
}
</script>
</body>
</html>
ICT Department
Grade 10
N.B:When click event happens the function country () will be called
to display message box "Arabic public of Egypt".
Dealing with text in text box:
In the next figure:
1. The text box and the button
command "click me" will be
displayed after writing text
inside the box.
2. When click on the button command "click me".
3. The message box will display the text that was written in the text
box.
Activity
Design a web page like the previous figure and do the following:
ICT Department
Grade 10
 Create new word pad file.
 Write the code and save it with the extension .html
 Open the file in the web browser.
<html>
<body>
<form name="form1">
<input type="text" name="t1">
<input type="button" onclick="country()" value="click me">
</form>
<script>
function country()
{
alert (form1.t1.value);
}
</script>
</body>
</html>
N.B:
ICT Department
Grade 10
 Give the name form1 to the form <form> by using the name
property.
 Give the name t1 to the text box by using the name property.
 The text in the text box accessed by command form1.t1.value
(Through value property of the text box t1 in the form form1).

ICT Department
Grade 10
Remember that:
 FUNCTION: It’s a set of commands that will be executed when you
call it and the function name should refer to its job.
 To execute java script statements that written in the command
<script></script> when the event happens like clicking on the button
command, You need to use the function.

ICT Department
Grade 10
Branching using If Statement
Some codes depends on conditions to be executed Condition may
be come true and may be Condition Comes false
We will use the If statement (expression):
{
If (condition)
Code (that will executed if condition come true)
}
Conditional expression that must be tested.
 Code written between two brackets { }, in case of condition come
true the code that written between the two brackets will be
executed, and in case of condition not true code will not executed.
ICT Department
Grade 10
Activity:
Design a webpage contains a form, and in the form there will be:
1- Text box
2- Command button "sum", that enter total degrees in the textbox.
3- When click on "sum" button if the total degrees greater than or

equal 50, the word "success" will be printed.
And to work on this code you must first
- Create a NotePad file.

- Type the code and save it with extension .html.
- Open the saved file using web browser
ICT Department
Grade 10
Code:
<html>
<body>
<form name="form1">
<input type="text" name="t1">
<<input type="button", value="sum", onclick="country()"
</form>
<script>
function country()
{
if (form1.t1.value>=50)
{
Alert("success");
}
</script>
</body></html>
ICT Department
Grade 10
Data Types
Data type’s example
Numbers:
All JavaScript numbers are stored in the computer memory ,Numbers can be
written with, or without decimals:
Example:
// With decimals:
let x1 = 7.5;
ICT Department
Grade 10
// Without decimals:
let x2 = 16;
Strings: A string (or a text string) is a series of characters like "John Doe".
Strings are written with quotes. You can use single or double quotations
Example
let carName1 = "BM";

let color = "Yellow";
let lastName = "Johnson";
let car = ""; // The value is "", the type of is "string"
Booleans: Booleans can only have two values: true or false.
Booleans are often used in conditional testing.
Example
let x = 5;
let y = 5;
let z = 6;
(x == y) // Returns true
(x == z) // Returns false
ICT Department
Grade 10
Undefined
let car; // Value is undefined, type is undefined .
An empty value has nothing to do with undefined.
BigInt
› All JavaScript numbers are stored in a a 64-bit floating-point format.
› JavaScript BigInt is a new data type (ES2020) that can be used to store
integer values that are too big to be represented by a normal JavaScript
Number.
› Example:
› let x = BigInt("123456789012345678901234567890");
› Object:
const person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

ICT Department
Grade 10
JavaScript Comparison Operators:
== equal to
!= not equal
> greater than
< less than
greater than or equal

>=
to
<= less than or equal to

ICT Department
Grade 10
Logical operators
Logical operators are used to determine the logic between variables or
values.
for example: x = 6 and y = 3, the table below explains the logical
operators
Operator Description Example
(x < 10 && y > 1)

&& And
is true
(x == 5 || y == 5)
|| or
is false
! not !(x == y) is true

ICT Department
Grade 10
ICT Department
Grade 10
HTML5
It is a new version of HTML this version contains improvements in
tools that make designing a websites easier.
 It saved with extension .htm
Some of these tools:
o Color box "color".
o Date box "date".
o Number box "number".
o And property "required" assigned to text box "text".
Note: The web browsers used to view the saved document must be
determined.
Color :
Enable user to add color box to webpage using the following
code: <input type="color"

ICT Department
Grade 10
This code will be viewed using Google Chrome, and saved with
extension .htm .
<html>
<body>
<form>
choose your color
<br>
<input type="color">
</form>
</body>
</html>
Date:
Enable user to enter date in calendar window.
To add date box to t webpage use the following code:
<html>
<body>
<form>
choose your Birthday date
<br>
<input type="date">
</form>
</body>
</html>
ICT Department
Grade 10
Number:
Enable user to add number box to webpage using the following

code:
<input type="number">
This code will be viewed using Google Chrome and Firefox, and
saved with extension .htm .
Activity: design a form that contains a number box to be used in
enter numeric values from 1: 20
Code:
<html>
<body>
<form>
enter value between 1 to 20
<br>
<input type="number" min="1" max="20">
<input type="submit">
</form>
</body>
ICT Department
Grade 10
</html>
Notes:
o The value typed in the number box, then click "submit query"
button.
o The browser tests the entered value, if it is not numeric, a message
appears "not allowed"
o In case of entering numeric value the browser tests if the value is
between min value and max value.
HTML audio tag is used to define sounds such as music and other
audio clips.
<audio controls>
<source src="koyal.mp3" type="audio">
Your browser does not support the html audio tag.
</audio>
There is given a list of HTML audio tag attributes.

ICT Department
Grade 10
<audio controls autoplay loop>
<source src="koyal.mp3" type="audio/mpeg"></audio>
Attribute Description
controls It defines the audio controls which is displayed

with play/pause buttons.
autoplay It specifies that the audio will start playing as

soon as it is ready.
Loop It specifies that the audio file will start over again,
every time when it is completed.
muted It is used to mute the audio output.
Src It specifies the source URL of the audio file.
HTML Video Tag

HTML 5 supports <video> tag also. The HTML video tag is used for
streaming video files such as a movie clip, song clip on the web page.
HTML video tag.

ICT Department
Grade 10
<video controls>
<source src="movie.mp4" type="video/mp4">
Your browser does not support the html video tag.
</video>
Attributes of HTML Video Tag
List of HTML 5 video tag attributes.
Attribute Description
controls It defines the video controls which is

displayed with play/pause buttons.
height It is used to set the height of the video player.
Width It is used to set the width of the video player.
autoplay It specifies that the video will start playing as

soon as it is ready.
Loop It specifies that the video file will start over

again, every time when it is completed.
muted It is used to mute the video output.
Src It specifies the source URL of the video file.

ICT Department
Grade 10
HTML Video Tag Attribute Example

example of video tag in HTML where are using height, width, autoplay,
controls and loop attributes.
<video width="320" height="240" controls autoplay loop>

<source src="movie.mp4" type="video/mp4">
Your browser does not support the html video tag.
</video>

Schools Summits-American-school Courses Computer-110 Materials 2023 May Week-4 Now-1684821321676 63225-Trimester 3 Material Grade 10

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Schools Summits-American-school Courses Computer-110 Materials 2023 May Week-4 Now-1684821321676 63225-Trimester 3 Material Grade 10

Uploaded by

Copyright:

Available Formats

ICT Grade 10

Third Trimester Material

WE PROVIDE THE BEST

when an event happens as. Clicking on the Button command,

First you need to know FUNCTIONS.

But the function name should refer to its job.

To create a function you should follow the following steps:

2.Write the code between { } that will be executed when the

function will be called.

 open Notepad file.

 Create new html file.

 Open the file in the web browser.

N.B:When click event happens the function country () will be called

to display message box "Arabic public of Egypt".

Dealing with text in text box:

In the next figure:

1. The text box and the button

command "click me" will be

displayed after writing text

inside the box.

2. When click on the button command "click me".

 Write the code and save it with the extension .html

 Open the file in the web browser.

 The text in the text box accessed by command form1.t1.value

(Through value property of the text box t1 in the form form1).

 FUNCTION: It’s a set of commands that will be executed when you

call it and the function name should refer to its job.

 To execute java script statements that written in the command

<script></script> when the event happens like clicking on the button

command, You need to use the function.

Branching using If Statement

Some codes depends on conditions to be executed Condition may

be come true and may be Condition Comes false

We will use the If statement (expression):

Conditional expression that must be tested.

 Code written between two brackets { }, in case of condition come

2- Command button "sum", that enter total degrees in the textbox.

3- When click on "sum" button if the total degrees greater than or

And to work on this code you must first

- Create a NotePad file.

Data type’s example

written with, or without decimals:

let carName1 = "BM";

Booleans are often used in conditional testing.

let car; // Value is undefined, type is undefined .

An empty value has nothing to do with undefined.

› All JavaScript numbers are stored in a a 64-bit floating-point format.

integer values that are too big to be represented by a normal JavaScript

const person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

JavaScript Comparison Operators:

> greater than

< less than

greater than or equal

<= less than or equal to

Logical operators are used to determine the logic between variables or

for example: x = 6 and y = 3, the table below explains the logical

Operator Description Example

(x < 10 && y > 1)

! not !(x == y) is true

It is a new version of HTML this version contains improvements in

tools that make designing a websites easier.

 It saved with extension .htm

Some of these tools: