AL mi

I ii«
•L
J.

Jnfcnndici]T(

¥' 3- .'.'S'
]
V '"1.
M

V Vi - " ;"

Preparator
Second Ten

. uUlreiUVU ja\s

CompUeci b
 Topic Topics I Page
Unit one: Web Sites.

Topic 1 HTML - Form - Form Tools. 3

Topic 2 HTML - More Form Tools. 13

Topic 3 Project. 23

Tests of the first unit(1),(2),(3). 33

Unit two:Introdiiclion to Java Sczipt.

Topic 1 Basic concepts of Java Script. 35

General Revision. March.(1),(2),(3). 42

Topic 2 Recall JavaScript code. 4Z

Topic 3 IF statement. 52

General Revision. Apirl.(1),(2),(3). 65

Topic 4 Validate data in a web page. 70

Validate data in a web page. 77

Topic 5
Continue ]
Topic 6 Project. 90

Topic 7 [informative]HTML. 93

Tests of the second unit(1),(2),(3). 102

Unit three:fnteznet Secnzity.

Topic Internet Security. 107

General Revision. May. (1),(2),(3). 119

Practical tests. 124

129
- Unsolved general test.
- The Night before the Exam 131
^^^By^he^en^his^^it, the^udents are expected to be able to:
(1) Recognize some basic scientific concepts and terminology
of information technology(Website - Webpage.)
(2) Practice Basic processes for dealing with information and
communication technology applications.
(3) Discusses the impact of the usage of modern information
technology services to the different academic and life fields.

¥
0) 0

HTML language
OBJECTIVES:

By the end of this topic, studente should be able to:

(1) Explain HTML tags.
(2) Employs HTML tags in order to create an interactive
Webpage.
(3) Perform some HTML operations ( add data field / add
a radio button)
(4) Participates his school mates in the learning activities.
Topic 1 - V, *, ¥.8 /yfc.- '>>i>.
•2 AiFaez

HTML language
Form - some form input controls
Preface
- Dear students; We have finished in the first semester designing
a number of my school site pages, which displays information
about the school, to visit her, and wander inside only, without
the possibility of holding any processing through you or through
the visitors (Static webpage).

- We will in this chapter create interactive webpage through

which you can enter your personal data through a From data
input elements as following:
-s

Registration from
Nbims

password |
Confirm password
¥MSB- (numarle) |
iSBwdr

' Mala '' Female

Preflelency language
7. Bngllsh FrenoH Q Sermany,

I Sow Ww; J

- Discuss the importance of using the Html language.

4
AlFaez 2S£ mtmm. Topic 1

Form

¥O' To create a form use<form> .... </fomi> tag.

¥=> Through the Form we add a group of elements to a webpage
such as buttons and fields, which used to enter data, into
interactive webpage using the HTML language in order to
send to the website to storing.

Add Name field

- Text data field, allows to the user to enter a string or text data,
using keyboard.
- Jo add a textbox for enter a student name 11-HTML language |
to a webpage, use the following tag: Text box

< input type = =text=>

¥rtw'
ictivit
- To add a textbox, follow the following steps:
(1) Create a new text file, using Notepad program.
ijjj' Untitfed - Wcftepadi ; jj fgH3' M '1
Fie fsmat jftg*
o

(2) Write the following HTML tags.

<form> &
Name:

< input type = =text=>

</form>

5
Topic 2 AiFaez

(3)Save the text file with .htm extension.

He m *em Hl»

Cfpe - ”Ccaa*>
<iribnn>

(4)Open the HTML doeument in the Internet browser, webpage

will be shown as follows.

Name:[

Text field

¥ Note: After adding a text field, you can type your name
or any text within it.

Add Password field

- The password field, use to enter the password to a webpage

via keyboard.
- Shows the symbol (*) when you type a password in order to
hide the true password components.
Password field

- To add a password field to the webpage use the following tag:

< input type = "password">

6
 yyy'y
y y

AlFaez 2
mr Topic
/¥/

m
m etivit
- The following steps to add a password field:
(1) Create a new text file.
(2) Write the following HTML tags.

<fonTi>
Password:

< inpat type = **password=>

</form>

(3) Save the text file with .htm extension.

(4) Open the HTML document in the Internet browser, webpage
will be shown as follows.

Password: [

; Password field

¥ Note: After adding a password field, you can type any

secure text within it.

¥ Note: You can add the confirm password field, by follow

the above steps to create the password field.

Add Age Text Field

- Follow the previous steps to add a data field in order to you can
type your age.

7
/# 2 AiFaez

Add a radio button field

- A radio button, by which the user ean seleet one of a limited

number of options such as your gender(male / female).

© ¥
Radio buttons

- To add a radio button to the webpage, use the following tag:

< input tjfpe = 'Vadio=>

k
LCtivit m

- To add the radio buttons, use the following steps:

(1) Create a new text file.
(2) Write the following HTML tags.
<form>

male < input type = 9*radio=>

female < input type = =radio=>
</form>

(3) Save the text file with .htm extension.

(4) Open the HTML document in the Internet browser, webpage
will be shown as follows.
Male: O
Female; 0

Radio button

¥ Note: After adding the radio buttons, you still can choose
select all available options, and this a problem.

8
AlFaez 2 -Topic 1

¥ Note

f You can select the two radio buttons (male / female) at the
same time.
- How can you prevent the user from selecting all available options?
-To prevent the user from choosing all available options, use the
attribute "name=.

- Add name attribute to all available radio buttons with the same
value.

- Give the mame, such as "a"* for all available radio buttons.

<form>

male < Input type = "radio= name = "a">

female < Input type = "radio" name = "a">
</form>

- Open the HTML document in the Internet browser, webpage

" 3
will be shown as follows.
m male
© fen»le

f Form: with a Form element you can add a group of other elements
to a webpage such as buttons and fields, used for data entry in
order to send this data to storing.
* Text input field: which gives ability to the user to enter a string or
text data via keyboard.
- To add a text input field on the web page, use the following tag:
< input type = '9text'9>
 2£Faez
•Password input field
- The (*)symbol will be displayed instead of characters to secure
a password key.
- To add a password field to enter password we use the following tag;
< iiqmt type =""passwonl"^

•Radio input field: © m

- By which the user can select only one of a limited number of
options such as your gender(male / female).
- To add a radio button on the web page, use the following tag:
male < input type ="ladio"^
female < input type ="ladio"^
- The attribute "name" used for selecting names of radio buttons:
* In order to prevent the user from selecting all available options
at the same time, write the following code,
male < input type = "radio"' name ="a">
female < input type ="radio" name ="a">

^ First; Complete the following steps to add a text input field:

O Create a new ,using Notepad program.
© Type the following tags within the
0 <form>
O Name:
© < type = "text">
© < >

© Save the text file in extension

@ Open the text file in the
10
AlFaez 2 £
^ Second: Put(^)for right answer and(x)for wrong answer:
O Create static webpage through which you can enter your personal
data through a From data input elements. ( )
0To create a new text file, use Photoshop program. ( )
©We must save the text file with .htm extension. ( )
O We use <head> <;diead> tag to create a Form. ( )
© Text input field which gives ability to the user to enter a string or
text data via keyboard. ( )
© Radio input field, which gives ability to the user to enter text data,
by the keyboard. ( )
©To add a radio button to the webpage, type the following tag
within the <form>. < Input type = ""passwwd"^ . ( )
© The(*)symbol will be displayed instead of characters to secure
a password key. ( )
©To create a password field to inter a password data, type the
following tag within the <form>. <lnput type = ""texfb> ( )
©You can not add the age field to the webpage. ( )

^ Third: Write scientific coiicept for each of the following

sentences:

O Placed upon some of the elements such as buttons and fields,

used to enter data, in order to send to the Web site to storing..
© Allows visitor of the web page to enter string or text data, inside it
via keyboard.
© Code, which is used to create a text field on the form.
O The language used in the data entry into interactive web page.
© Code, which is used to create a radio button on a webpage.
 /#
^ Topic 1^- am 2 AiFaez
s
?
* First: Write the scientific term to the following statements:
O Used with button and data fields to enter data and sending it to the
webpage.
O Give ability to ehoose or seleet only one option from many
options.
® In which you can type any text via keyboard on a webpage.
* Second: Complete the following sentences:
O To create an interactive webpage for register a student data you
add used to input data.
© To add a student name input field, you can add to a webpage.
© (*)symbol will be displayed instead of original text to secure
O To choose your gender you can add to a webpage.
* Third: Select from(B)column that matches with(A)column:
Column (A) Column (B)
1 <input type = ”password"> A Add a textbox field.

2 <mput type = "radio”> B Add a password field

3 <input type = "text"> C Add a radio button field.

* Fourth: Put(^)or(x)in front of the following:

O In a webpage the from element doesn't require sending the entered
data to the web server. ( )
© To prevent the user from choosing or selecting more than one
option or choice, you can add name attribute to radio input field.
()
© To add a textbox field in order the user can enter his name, you
add radio field. ( )

^ Preparatory question for the next topic; J

Aftef^6u’9e'created a webpage with a Form and many input fields.
How yotPOgfli add^another fields to can (clear or save) entered data?

m
 ¥

ro o n 0 0 0:

HTML tanauage

Form elements input fields Continued

OBJECTIVES:

By the end of this topic, students will be able to :

«1) Explain some of the HTML input elements (eheckbox - button
- submit - reset).
(2)Type some of HTML tags correctly.
(3) Remind the largest possible number of ideas for using HTML
Tags.
(4) Show a positive trend towards the importance of HTML
language.

13
n
Topic 2 ^ * a>a;w..a. ia«>: AiFaez

HTML language
Form elements input fields Continued
Preface

-We will add checkboxes, to give ability to the user that he can
select more than one box at the same time.

Checkbox field

-To select your proficiency language(s):

-You can add checkbox input field by which you can select more
than one choice.

- To add a checkbox field to a webpage,use the following tag:

< input type = =clieckbox=> ¥ IZl IZl

checkboxs

m
Note: You can repeat the previous command to add more
than the selection of the webpage fund.

LCtivit
- To add a checkbox, follow the following steps:
(1) Create a new text file, using Notepad program.
(2) Write the following HTML tags.

14
AlFaez 2

<form>
Select your proficiency languages<br>
4¿ Arabic < input f^pc = **cIiecklMix**>
^ English< input type = =checkbox"'>
French< input l^fpc = **clicckbox**>
</fonn>

- Repeat the command number of choices (alternatives) available.

(3) Save the text file with .htm extension.
(4) Open the HTML document in the Internet browser, webpage
will be shown as follows.
- C
1
I Htoervaumrai

0 amhic

2 .nriliH:
Checkbox fields | ¥

Button input field

- Button is used to performs a speeific task.
- The user can click on it to achieve or execute JavaScript
function such as clear or save entered data within the form.

[ Ok
1
a button
- To add a button to a webpage, use the following tags:

< input type = **button">

15
//
Topic 2 — 2AiFaez

\s \

- To add a butaon,Ibllow the following stqjs:

(1) Create a new text file.
(2) Write the following HTML tags.

<form>
ft
<input type = ”buttoii” value ok” >

</form>

(3) Save the text file with .htm extension.

(4) Open the HTML document in the Internet browser, webpage
will be shown as follows.

I ok'
5

A button

2 Notc>
- In the previous code, we've used attribute "value" to assign
caption to a button "ok”.

- There are three types of buttons, that can be added to the from
as follows:

(1) Button; used to performs a specific task.|okj

(2) Submit; used to send data, i :
(3) R^t; used to delete data. J
AlFaez 2

Submit button

- It is used to send the form data, which you have entered using
the form elements to another webpage, assigned by action
attribute value of the form. Submit Query
Submit button

- To add a submit button to a webpage,use the following tags:

<input type = '’submit">

mLctivit
- To add a submit button, follow the following steps;
(1) Create a new text file.
(2) Write the following HTML tags.
<html>
<form>

<form action = "process.php >

<input type = "subniit">

</form>
\
Webpage that
</html> will receive data

(3) Save the text file with .htm extension.

(4) Open the HTML document in the n

Internet browser, webpage will

look like.
Submit Query |
Submit button

17
 //
^ Topic 2 ^ 2 AiFaez
¥ Note:

- In the previous HTML tags, after clicked submit button, all data
send to a webpage named "process.php" in order to processing
via PHP statements. We will teach PHP language next years.

user clast

name

password

I sign In I
new user

Reset button

- It is used to clear all data fields, which you have entered and
a return to the default values of the controls.

-To add a reset button to a webpage, use the following tags:

<input type = '9reset">

mictivlt
- To add a reset button, follow the following steps:
(1) Create a new text file.
(2) Write the following HTML tags.
<form>

<input type = "reset">

</form>

(3) Save the text file with .htm extension.

18
 AlFaez 2

(4) Open the HTML document in the Internet browser, webpage

will be shown as follows.

Reset
Reset button

- Checkbox field give ability to the user that he can select more
than one box at the same time.
- To add a checkbox field to a webpage, use the following tags:
< Input type = "checkbox">
- Repeat the previous command number of choices (alternatives)
available.

* Button input field: It is used to performs a specific task, the user

can click on it to achieve or execute JavaScript function
such as clear or save entered data within the form.
- To add a button on the webpage, use the following tags:
<input type = "button">
<input type = "button" value ="ok" >
- In the previous code, we've used attribute "value" to assign caption
to a button "ok".

- There are three types of buttons, that can be added to the from as follows:
(1) Button: used to perform a certain task.
(2) Submit: used to send data.
(3) Reset: used to delete data.
* Submit button: The user click this to submit the form data to
another webpage assigned by action attribute value of the Form.
-To add a submit button, use the following tags:
<input type = "submit''>

19
 I, M ll,, l.ir 111 II ill! ¥" ¥
2 AiFaez
* Reset button: The user click it to clear all data fields to return to
its original state.
- To add a reset button to a webpage, use the following tag:
<input type = "reset">

lOmMCaK
^ First: Put (^) for right answer and (x) for wrong answer:

O Checkbox input field by which you can select more than one
choice at the same time. ( )
@ A radio button field by which you can select more than one
choice at the same time. ( )

© To add a checkbox to the web page, use the following tags:

<Input type = "checkbox"> ( )
O There are only one type of buttons, that can be added to a from.
( )
0 When pressing on button, can performed many functions, such as
load a function, or store your data, or delete your data. ( )
0 To choose which language you learned, or more than one language
use text field. ( )
0 Submit button is used to send your data, which you have entered
using the form elements. ( )
© Reset button is used to delete your data, which you have entered
and a return to the default values of the tools. ( )
0 You can repeat the following command to add more than
choosing box on the web page. <Input type = "reset"> ( )
We can use an attribute "value" to add text that appears on the
button. ( )

20
AlFaez 2 ^ Topic 2^

^ second: Choose the correct answer from between the brackets:

o allows you to choose an alternative or more at the same
time.
(Button - Checkbox - Submit)
© When pressing on , can perform many functions, such as
load a function, or store your data, or delete your data,
(button - Reset - Submit)
© We ean use a attribute "..." to add text that appears on the button.
(Reset - Submit - value)
o button is used to send your data, whieh you have entered
using the form elements.
(Submit- Check box - Reset)
© button is used to delete your data, which you have entered
and a return to the default values of the tools.

(Submit- Check box - Reset)

^Third: Matching from column(A)for column (B):
Column (A) Column (B)
1 A Used to performs a speeific
<Input type="checkbox"> task.

2 Reset button B Used to send all form data.

3 button C Used to clear all form data.

To select an alternative or
4 .Submit button D
more at the same time.

To add a cheekbox on the

5 Checkbox E
web page.

Fourth: Write scientific concept for each of the following:

O When pressing on it, can perform many functions, such as load
a function, or store your data, or delete your data.

21
/# ' • V
2 AiFaez

© A language is used to ereate a text file with htm extinetion.

® Used the attribute to add a text that appears on the button.
O Allows you to ehoose an alternative or more at the same time.
© Tag is used in addition fund ehoice.
0A button is used to send all form data to other webpage.

* First: Put{/)or(x)in front of the following sentence:

O To seleet your profieieney language(s), you can add checkbox
input field to a webpage. ( )
© Name attribute used for display a text on the button. ( )
® Submit used to clear input fields from any previous data. ( )

* Second: Complete the following statements:

o used to execute task or call JavaScript function,
© used to send all Form data to other webpage,
© used to clear all previous data form all input fields.
* Third: Select from(B)that matches with other(A):
Column (A) Column (B)
1 <input type = "checkbox"> A Add a submit or send button.

2 <input type = "button"> B Add a reset or clear button.

3 <input type = "submit''> C Add a checkbox.

4 <input type = "reset"> D Add a button.

r Preparatory question for the next topic: ^

- After you’ve known Form and its data field which required to register
your data. How can you create a webpage with a registration Form?

22
Design a Webpage with a registration data Form
OBJECTIVES:

By the end of this lesson, students will be able to:

(1) Design an interactive web page to register his data.

(2) Type a HTML tags to register data correctly.
(3) Appreciate the importance of HTML language for create an
interactive webpage.

:SHTML^

23
 2 AiFaez

Design a Webpage with a registration data Form

- Design an interactive webpage.
- Using the previous Form and data fields, create an interactive
webpage as in the following;
->

Registration from

Name

password

Confirm password

Age (numeric)

Gender ^ Male © Female

i

Proficiency language

¥ English ¥ French O Germany

t Save 1 New

*
Execution:

- The following codes of the webpage:

24
AlFaez 2
ms
<html>
Rogjstration from (?)
<head> 3^®*
<title> </title> ^ j pAMword
</head>
Confirm paxword
Q®
«o> (numorle)

jH¿<body dir = =ltr"> (^Conkr e Mate C damala

<center> @ jjku, 3 ^Ij3 Proflctaney L®
(9)tlEn^fti CFrancfi DOarmany
J); registration from|<br><br><br> i
(1^ 3lia>JgLaj(l j)
r^<form action="pro.php'9>

^ name<input type="text"><br><br><br>
password <input type="password"><br><br><br>
M confirm password<input type="password"><br><br><br>
^ age(numeric)<input type="text"><br><br><br>
2gender<input type="radio" male<input type="radio">female
8) <br><br><br> O Mai* O F*mal*

^proficiency language

<input type="checkbox"> English O English

1 <input type="checkbox"> French IS French

'-<input type="checkbox"> German Q Germany

I <br><br><br> | 31'?
^ <input type="submit'9 value="save"> 1 Save 1
D^ &nbsp &nbsp &nbsp 31'?
. ) <input type="reset= value==new"> New

</center>
</form>

¿ </body>
</html>

25
 H
^^Topic^^ 2£Faez

¥ Note: In the previous codes:

-To add a text field for enter a student name to a webpage, use
the following tags:

Name <Input type==text=>

- To add a password field to the webpage use the following tags:

password <Input type=" password 9*>

-To add the confirm password field, type the following tags:
confirm password <Input type='* password ">

- To add an age (numeric field), type the following tag:

Age <Input type="number=>

-To add a radio button field for male, type the following tags:
Male <Input type==radio=>

- To add a checkbox for German language, type the following

tags: German <Input type="checkbox=>

- To add a submit "button to send your data", type the following

tags:

<input type="submit" value=9'Submit Register">

- To add a reset "button to delete your data", type the following

tags: <input type="reset" value="New*9>

26
AlFaez 2

QDCfinlCfLnD^Cr^ Some form input controls

Control Code Action

Through the Form we add a

group of elements to the web
Form <form> ... </form> page, used to enter data, in
order to send to the Web site
to storing.

Gives ability to the user to

Textbox <input type="text"> enter a string or text data via
keyboard.
As the same as text field but
(*)symbol will be displayed
Password <input type="password"> instead of characters to
secure a password key.

Number <mput type="number"> To input numeric data.

Used to select only one

Radio button
option (alternative) from a
<input type="radio"> limited number of options
such as (male/female).
Used to select one or more
option (alternative) from a
Checkbox <input type="checkbox">
limited number of options at
the same time.

Used performs a specific task

such as load a function, or
Button <input type="button"> store your data, or delete
your data.

Used to send your data,

Submit which you have entered
button
<input type="submit"> using the form elements to
another webpage.
Used to clear all data fields
Reset button <input type="reset"> to its original state.

27
 2 AiFaez

^ First: Matching from column(A)for column (B):

Column (A) Column (B)
1 <Input type = "radio"> A To add a clear button.

2 <Input type = "submit"> B To add a checkbox.

3 <Input type = "button"> C To add a send button.

4 <Input type = "text"> D To add a button.

5 <Input type = "reset"> E To add a radio button.

6 <Input type = "checkbox"> F To add a text box.

^ Second: Put(^)for right answer and (x)for wrong answer:

O Submit button is used to sent your data, which you have entered
and return to the default values of the controls. ( )

© Checkbox allows you to choose only one alternative from several

alternatives. ( )

® Reset button is used to send your data, which you have entered
using word document ( )

O We has been used property "OK" to add text that appears on the
button. ( )

0 Create interactive webpage through which you can enter your

personal data through a From data input elements. ( )

0 To create a new text file, use Notepad program. ( )

© We must save the text file with .doe extension. ( )
0 We use <form> </form> tag to create a Form. ( )
Q Text input field which gives ability to the user to enter a string or
text data via keyboard. ( )

28
AlFaez 2__ Questions

I First Unit Ml
*? ^S-v.v-,
n
^ First: Choose the correct answer from between the brackets:
o allows you to choose an alternative or more at the same time.
(Button - Checkbox - Submit)
© We use a property ' "to add text that appears on the button.
(Reset - Submit - value)
© button is used to send your data, whieh you have entered
using the form elements. (Submit - Check box - Reset)
O When pressing on ,can performed many funetions, sueh as
load a function, or store your data, or delete your data.
(button - Radio button - Submit button)
0 field, whieh gives ability to the user to seleet only one option,
(button - Radio button - Submit button)
^ Second: Place each number on the following form in front of
its own code: IgWof-^M

Registration from
Nm

pntwom [
i
3®
Confimi(MSfwonl [
(numiic) [
Gender

OFcnute
Prctkiencf Umgiag^
f'] Eitfltfich Q Fnneh O Otnmmy 2

»«»» I

( )<Input type = "eheekbox">

( )<Input type = "text">
( )<Input type = "reset">
( )<Input type = "submit">
( )<Input type = "radio">

29
 /#
^ Questions^ t,
2 AiFaez
^ Third: Write scientific concept for each of the following
sentences:

O Allows you to choose an alternative or more at the same time.

© To display a Form that was created.
® Through it, we add a group of elements to the webpage such as
buttons and fields, used to enter data, in order to send to the web
site to storing.
O Gives ability to the user to enter a string or text data via keyboard.
0 Tags, which is used to add a text input field on the web page.
^ Fourth: What is the result after executing the following code:
O <Input type ="checkbox">
© <Input type = "radio">
0 <Input type = "submit'’>
O <Input type = "text">
0 <Input type = "button">

I First Unit 2
^ First: Select the type of box or button to use the following:
O We can determine the sex of student(male / female) by
button.

©A used to determine the hobbies or the languages

that you prefer.
©A used for entering the student name.
o ... field used to type your password,
0 when pressing on it can performed many functions,
such as load a function, or store your data, or delete your data.

30
 AlFa 2
ez
Ilk Questions

^ Second: Write scientific concept for each of the following

sentences:

O Code, which is used to create a password field on the web page.

@ A property is used to prevent the user from choosing all available
radio buttons.

@ It is used to select only one option (alternative)from more options

(alternatives).

O The property is used to add text that appears on the button.

0 The tag that is used to add a control to a webpage.
^ Third: Correct the underlined in the following codes:
O To add a text field, <Input type = "button">
© To add a button. <form type = "text">
0 To add a radio button, <Input type = submit">
O To add a reset button, <Input type = "checkbox">
0 To add a checkbox. <Input type = "checkbox">
^ Fourth: Put(v^)for right answer and (x)for wrong answer:
O We must save the web file with doc extension. ( )

0 Password field use to enter the password to a webpage via

keyboard. ( )
© We use <form>....</form> tag to create a Submit button.( )

O The interactive webpage through which you can enter your

personal data through a From data input elements. ( )

© The property "value" used to prevent the user from choosing

more than one option. ( )

31
 Questions^ 2 AiFaez

I First Unit JJ
'? 3
* First: Select from (B)that matches with other from (A):
Column (B)

2 <input type = "reset"> B © #

3 <input type = "text"> C

4 <input type = "submit"> D 11-HTML language|

5 E Submit Query
<input type = "radio">

^ Second: Select the type of box or button to use the following:

O The property " used to prevent the user from choosing
more than one option.
©To display the form which was created, we use
© Using language, we create a form, in order to enter
data into interactive web page.
o is used to send your data, which you have entered using
the elements to another webpage.
0 is used to delete your data, which you have entered and
return to the default values of the controls.

Third: Choose the correct answers from between the brackets:

O The symbol appears when you type the password to

hide the real password components.

© A program used to create a text file with htm extinction.

(Notepad - paint - Photoshop)

32
AlFaez mt^. ^
iSis
Questions

Used the property to add a text on the button,

(value - name - OK)
o Allows you to ehoose an alternative or more at the same time.
(Submit button - Checkbox - Radio button)
® It is used to elear all your data, which you have entered using the
form elements.

(Reset button - Checkbox - Radio button)

©We must save the text file with or extension.

(html- htm - All of the previous)

^ Fourth: Put(v^) for right answer and (x)for wrong answer:

O When pressing on Textbox, ean perform many functions, such as
load a function, or store your data, or delete your data. ( )
© A eheckbox is used to send all form data to other webpage.( )

© There are three types of buttons, that can be added to the from.
( )
© Reset button is used to send the form data, which you have
entered using the form elements to another webpage.( )

© To add a submit button use the tag: <lnput type = "submit">

( )

^ Preparatory question for the next topic: ^

-To develop your data registration page projeet so that it beeomes
Interaetive page, we will need to add some JavaScript language
statements for that reason

- How can you use JavaScript language in HTML document?

- What are its basic concepts?

33
 >

,v

^
¥i
By the end this unit, the students are expected to be abie to
*
!
¥'--<5 A'-.

9 (1) Discuss the effect of using the serviees of the modem

information teehniques on academie and different life fields.
' (2) Reeognize some produetion tools of information pages and
Internet services.
(3) Produce relatively ereative projeets using JavaSeript language,
i (4) Use technologieal produetion tools for support and develop
! his learning.
(5) Employs teehnologieal eommunieation tools in order to
communieate, internet and eooperate with others to support
I learning.

it
&

-i !)
If, I-

i:

By the end of this topic, students should be able to:

(1) Reeognize some of the basie JavaScript concepts.
(2) Reeognize the basic mles for creating a webpage using
JavaScript statements.
(3) Write a JavaScript language code aceurately.
(4) Aceept to learn the JavaScript language.

34

k.
AlFaez 2

Basics Concepts of
JavaScript Language
introduction

* Dear student:

To develop an interactive webpage project to register your

data, and confirm that the entry data is correct; you will need
to add a JavaScript statements to your webpage document.
* HTML language isn’t enough to make a confirmation to the
data entry.

* The next some of the basics of programming with JavaScript.

JavaScript fundamentals

(1) JavaScript commands and instructions are called Statements.

(2) JavaScript commands and instructions (Statements) are
written within HTML tags.
(3) JavaScript statements are written inside <script> </script>
tag.

(4) Each statement must end with a semi-colon (;) character.

(5)JavaScript language is case-sensitive, so the letter case
(small or capital letter) must be considered while writing
JavaScript statements.

35
r
Topic 1 2 AiFaez

Places of written java script inside HTML file|

<html>
At the head of web page
<head>

<script></script>

</head>

In the body of web page

<body>

<script></script>
<script></script>

</body>

</html>

Document sections in which JavaScript will be written as HTML.

alert() statement

- alert() statement used for displaying a message via a

dialogue box.
-To display the message box, use the following command;
alert("The message");
3 Notice;
- The message must written within double high quotations(" ").
36
AlFaez 2 Topic 1^

mLctivit
- Create a webpage that displays a dialogue box with message
"welcome" when loading by the following steps:
Execution:

(1) Create a new text file.

(2) Write the following HTML tags.

< body>
< script>
alert ("welcome");
</ script>
</body>

(3) Save the text file with .htm extension.

(4) Open the HTML document in an available internet browser,
webpage will be shown as follows.

I Message from webpage EK*

A Welcome

OK

alert message box

V.

37
 2 AiFaez

Document .write(...) statement

- Document.write statement is used for displaying text within a

webpage contents.

- Create a webpage displays "computer and information

technology subject" text as its content, by the following steps.
Execution:

(1)Create a new text file.

(2)Write the following HTML tags.

< body>
< script>
document.write ("computer and information technology subject");
</ script>
</body>

(3) Save the text file with .htm extension.

(4) Open the HTML document in an available internet browser.

- alert() statement: used for displaying a dialogue box with message

to the user.
- document.write() statement: used for displaying a text within the
webpage contents, on the web page itself

38
AlFaez 2 Topic 1^

MHsliMwae
^ First; Put(v^) for right answer and (x)for wrong answer:
O JavaScript orders and instructions are statements. ( )
@ HTML statements are written inside <text> </text> tag. ( )
® JavaScript commands and instmctions (Statements) are written
within HTML tags. ( )
O To develop an interactive webpage project to register your data,
and confirm that the entry data is eorrect; you will need to add a
HTML statements to your webpage document. ( )
0HTML language is case-sensitive, so you must pay attention
to the case of(small or capital letters) when writing statements.
( )
© JavaScript statements are written inside <script> </script>( )
© Alert()statement used for displaying text within a webpage
contents. ( )
© HTML commands and instructions (Statements) are written
within JavaScript tags. ( )
© Each HTML statement must end with a semi-colon (;) character.
( )
© Document.write statement used for displaying a message via a
dialogue box. ( )

+ Second; Write scientific concept for each of the following

sentences;

O The language is used to create and design an interactive webpage.

© Statement used for displaying a message via a dialogue box.
® JavaScript must end with a certain tag.

39
^iBfewib^Jbpic 1 AiFaez

O The language is used to create and design static webpage.

0 Statement used for displaying text within a webpage contents.

^ Third: Choose the correct answer from between the brackets:

O JavaScript statements are written inside tag.

(<from></form> - <script></script> - <html></html>)
©To develop an interactive webpage project to register your data,
and confirm that the entry data is correct; you will need to add
a statements to your webpage document.
(HTML -PHP - JavaScript)
0 language isn’t enough to make a confirmation to the
data entry.
(Statements- java script -HTML)
O JavaScript commands and instructions are called'Statements
(Statements - Alert-java script)
0 are places of written java script inside HTML file,
(head of webpage -in the body of webpage - All of the previous)
© statement used for displaying text within a webpage contents,
(document.write()- alert()-java script)
© statement used for displaying a message via a dialogue box.
(document.write()- HTML- alert())

0 There isn’t any different between using small and capital letter
while writing statements.

(Statements - java script - HTML)

0 JavaScript statements are end with character.

({;)- (*)-(/))

40
AlFaez 2 ^ Topic 1 ^

^ Fourth: Complete the following tags:

O To design a webpage that displays a dialogue box v/ith message
"welcome" when loading.
<Script> Welcome
("welcome");
< >

©To design a webpage displays "computer and information

technology subject" text as its content.
< >

("computer and information technology subject");

</Script>
J

1 ■

UM 9 ?
^ First: Write the scientific term to the following statements:
O The language used to make your registration webpage to
interactive.

® Used for displaying a dialogue box with message to the user.

® Used for displaying a text within the webpage contents.
Second: Put(v^) in front of the correct sentence and (X)in
front of the wrong one:
O HTML language isn’t enough to make a confirmation to the data
entry. ( )
® Each statement must end with a semi-colon (;) character. ( )
© There isn’t any different between using small and capital letter
while writing JavaScript statements. ( )

^ Preparatory question for the next topic; ^

- When displaying the web page we note that the code is
implemented automatically.
- Can you implement the code only when you need it?

41
 ##
■ Questions 2 AiFaez

I General Revision rch

^ First; Put(^)for right answer and (x)for wrong answer:

O JavaScript statements are written inside <scripts> </script>( )
© HTML language isn’t enough to make a eonfirmation to the data
entry. ( )
© HTML commands and instructions (Statements) are written
within JavaScript tags. ( )
O Each HTML statement must end with a semi-colon (;) character.
( )
0 document.write statement used for displaying a message via a
dialogue box. ( )
^ Second; Choose the correct answer from between the brackets:

o statement used for displaying a message via a

dialogue box.
(Statements - JavaScript - alert())
© commands and instmctions (Statements) are written
within HTML tags.
(Statements - JavaScript - HTML)
0 language isn’t enough to make a confirmation to the
data entry.
(HTML - JavaScript - Document.write())
O Each statement must end with
tf ff
(Brackets {} - semi-colon (;) - quotation marks )
0 statement used for displaying a message written on
the web page itself. (Statements - JavaScript - Document.write())

42
AlFaes32 Questions
^ Third; Write scientific concept for each of the following
sentences:

O It is used to select one option or more from all available options.

0 The property is used to add text that appears on the button.
0A program used to create a text file with htm extinction.
O A property is used to prevent the user from choosing all available
radio buttons.

0 It is used detenuine the sex of student(male / female).

^ Fourth: Matching from column(A)for column (B):
Column (A) Column (B)
1 The(*)symbol A To input numeric data.
Used to clear all data fields to its
2 Textbox B
original state.
will be displayed instead of
3 <form> ... </form> C characters to secure a password
key.

4 Gives ability to the user to enter a

<input type="number"> D
string or text data via keyboard.
5 Reset button E To add a form to a webpage.

J General Revision dig

4c First: Put(v^)for right answer and (x)for wrong answer:
O To display the message box, use the command:
Document.write ("message"); ( )
© The message must written between quotations marks ("").( )
O We used property "value" to add a text on the button. ( )
43
Xvv
##
¥V •

'v X \

Questions ES^BEb^S < AiFaez

® Reset button is used to send your data, which you have entered
using word document ( )

0 There are only one type of buttons, that can be added to the from.
( )

0 JavaScript statements are written inside <html> </html> ( )

0 HTML language is enough to make a confirmation to the data

entry. ( )

© HTML commands and instructions (Statements) are written

within JavaScript tags. ( )
© Each HTML statement must end with a semi-colon (;) character.
( )

® Through the Form we add a group of elements to a webpage

such as buttons and fields.. ( )

^ Second; Complete the following from between the brackets;

(button - Reset - Checkbox - Submit - value)
o allows you to choose an alternative or more at the same
time.

@ When pressing on , can perform many functions, such as

load a function, or store your data, or delete your data.
© We can use a property "..." to add text that appears on the button.
o button is used to send your data, which you have entered
using the form elements.
0 button is used to clear your data, which you have entered
and a return to the default values of the tools.

® We must save the text file with or extension.

44
AlFaez 2 Questions
n

I General Revision liflfH ch

* First: Put(v') or(x)in front of the following:

o To add a textbox field in order the user can enter his name, you
add radio field. ( )
© To add a student name input field, you can add Text input field to a
webpage. ( )
© (&)symbol will be displayed instead of original text to secure a
password key. ( )
O To select your proficiency language(s), you can add checkbox
input field to a webpage. ( )
@ In a webpage the from element doesn't require sending the entered
data to the web server. ( )
©To prevent the user from choosing or selecting more than one
option or choice, you can add value attribute to radio input field.
( )
* Second: Write the scientific term to the following statements:
O Used to clear input fields from any previous data.
© Used with button and data fields to enter data and sending it to the
webpage.
© An attribute used for display a text on the button.
O Give ability to choose or select only one option from many
options.
© Used to execute task or call JavaScript function.
© Used to send all Form data to other webpage.
© Used to clear all previous data form all input fields.
45
Questions > 2 AiFaez
^ Third: Choose the correct answer:

o language used to make your registration webpage to

interactive.
(HTML - Java Script - Form - Alert)
used for displaying a dialogue box with message to the user.
(HTML - document.write()- Form - Alert())
© Used for displaying a text within the webpage contents.
(HTML - document.write()- statement- Alert())
o language isn’t enough to make a confirmation to the data
entry.
(HTML - document.write()- Form - Alert())
© Each Java Script must end with a semi-colon (;) character.
(different - document.write()- statement - Alert())
© There is between using small and capital letter while
writing JavaScript statements.
(Difference - similarity - Paint- Notepad)
© a program is used to create a text file with htm extinction.
(Difference - similarity - Paint - Notepad)
Fourth: Select from (B)column that matches with(A)column:

Column (A) Column (B)

1 <input type = "password"> A Add a textbox field.

2 <input type = "radio"> B Add a password field.

3 <input type = "text"> C Add a radio button field.

4 Value D To add a text on the button.

5 <input type = "reset"> E To add a text on the button.

46
 Calling JavaScript code i

OBJECTIVES:
By the end of this topic, students shouid be able to:

(1)Recognize how to call JavaScript code using a button.

(2) Recognize the function structure.
i

(3) Write JavaScript statement for calling a function.

(4)Employ JavaScript tools in his interactive project..
(5)Participate with his schoolmates in the learning activities

47
u
Topic 2 i ^2 AiFaez

Calling Java Script code

JavaScript statement for calling a function

* All JavaScript statement within <script>...</script> tag

implemented automatically.
* If you want the JavaScript statement within script>...</script>
tag to be implemented when an event occurs (such as button
click), you should use a function.

Functions

- Function is JavaScript statements grouped together in named

block and performed according to call it, and we should give it
a suitable name refer to its job.

¥ Note Jwe will learn to:

* Create a JavaScript function contains a group of statements.
* Call the function according to occurrence of a button click.

Function Creation
,!J

- Next steps to create a function:

(1) Write word function and followed with its suitable name.
(2) Write a group of JavaScript statements between { } curly
brackets as shown in the following rectangle.
AlFae!32jn

function function-name(){
Code to be exeeuted
}

ctivit
- Create a function that displays "Arab Republic of Egypt" via
a message box. Execution:
[1] Create a new text file.
[2] Write the following HTML tags.

- <body>
<seript>
function country()
{
alert("Arab Republic of Egypt");
}
¥¿</script>
4¿ </body>

[3] Save the text file with htm extension.

14] Open the document in the Internet browser.

0 Note:

- In the previous code, the country( ) function was not called.

- So when opening the HTML document in an available internet
browser, an empty webpage will be shown.

* To implement any function, first you must call it: ^

49
 2 AiFaez

Function call

- Next steps to call any function;

[1] Write an HTML tag for displaying a button within webpage.
<input type="button">
[2] Write an 'onclick' attribute to this button.
H If
<input type="button" onclick= >

[3] Write a function name as the value of that attribute (onclick).

O Q e
<input type="button" onclick="function name you need to call">

i
LCtivit
aw

^2
- Change the previous activity so that the country()function can
be executed when a button clicked. Execution:

(1) Open the previous HTML document.

(2) Change the contents so it will be shown as the following:
<body>
<input type="button" onclick="country()" value="click me">
f

I <script> I
j function country(){ |j
I alert ("Arab republic of Egypt") I \
}
</script>
</body>
[3] Save the modifications to the file.
[4] Open the document in the Internet browser.

50
 AlFaez 2 - Topic 2^

E3 Note:

- Function will be called and executed only when a button

clicked and message box eontains "Arab republic of Egypt
appears.

[ Textbox content manipulation ^

- In the following figure, we will find:

(1) A textbox and button is displayed, write any text within the
textbox.

(2) When a button clicked, an alert box will be displayed in

which the content of the textbox can be seen.

[°1b)1 a

mohammeq iiJ dick me button(D

T
Text box Message from webpageT^M^

mohammed

(D
OK

alert box

Activifr;!i-3
- Design a web page as shown in pervious shape by executing the
following:

51
 2 AiFaez
[1] Create a new text file.
[2] Write the following HTML tags, JavaScript statements.

<body>
<form name="form 1">

<input type="text" name="tl">

<input type ="button" onclick="printTextContent()" value="click me">
</form>

i <script> j
function printTextContent()
{
alert(forml .tl.value);
}

</script>
</body>

[3] save the file with .htm extension.

[4] Open the document in the Internet browser.

¥ Note:

- In the previous HTML document, to use and manipulate the

textbox;

(1) Give a name forml to the <form> element (name='9forml=)

(2) Give a name tl to the textbox (name='9tr')
(3) We can use the value of the textbox through forml .tl .value
statement

52
AlFae* 2

* All JavaScript statement within <script>...</script> tag

implemented automatieally.
* Function is JavaScript statements grouped together in a named block
and perform according to calling it, and we should give it a suitable
name refer to its job.
* If you want JavaScript statements within <script>...</script> tag to
be implemented when an event occurs(such as button click), you
should use a function.

^ First: Put(v')for right answer and (x)for wrong answer:

O JavaScript statements which are written inside <script> </script>
tag are automatically executed. . ( )

© JavaScript is a set of orders that will be executed when we calling

it, and we should give it a suitable name refer to its job. ( )
0 We can not creating function contains JavaScript statements.( )

O To create a function, write the command "function" then write

a suitable name. ( )

0 We can create a function without writing a term "function".( )

0 The function code must written within double high quotations("").
( )
0 We can call the function in order to execute its order by pressing
on the button command. ^ ( )
© You can create a function without selecting its name. ( )

53
wm
.V'
"N

mjopic 12£Faez
^ Second; Complete the following code to create a function,
when calling it appears a message box contains "Arab
republic of Egypt".

<Body>
<Script>
o country()
{
("Arab republic of Egypt");
0
}
</Script>
</body>

^ Third; Arrange the following steps to call a function;

( )Write a function name as the value of that attribute
(onclick).
( )Write an HTML tag for displaying a button within
webpage.
( )Write following code:
<input type="button" onclick="country()" value="click me">
( )Write an 'onclick' attribute to this button.

^ Fourth Choose the correct answer from between the brackets;

O The JavaScript statement within <script>...</script> tag

implemented
(Manual- Automatically - Function)
0 is JavaScript statements grouped together in named
block and performed according to call it.
(Manual- Automatically - Function)

54
 AlFaez 2
■

® The JavaScript statements of the function must written between

(#...# • ••• • y

O Adding a attribute to the button element for is called a

function.
(onclick - value- name)
0 We call any function in order to execute its commands when we
pressing on
(Textbox - Checkbox — Command button)
0 To create a function must begin with the temi
(Form - Java Script - Function)
0 To create a function, write function function (){
(onclick - value- name)

^ Fifth; Create a function called country that displays "Egypt"

via a message box.

0 Create a new text file. Write the following tags, and save the text
file with extension.

r© < .>

<Script>
0 country()
{
o ("Egypt");
}
0 < >

</body>

0 Open the document in the Internet browser.

55
Topic 2 —- 2 AiFaez
^ Sixth: Re-Arrange the following code to create a function
called "printTextContent":
( ) Codes

( ) Function printTextContent()
( ) {
( ) }

^ First: Complete the following statements:

O If you want JavaScript statements to be implemented when an
event occurs (such as button click), you should use a
0 is JavaScript statements grouped together in a named
block and performed according to call it.
3k Second: Put(v^)in front of the correct sentence and (X)in
front of the wrong one:
O Adding a value attribute to the button element for is called a
function. ( )
© We use a onclick” attribute for writing a text on a button.( )

© For reading a textbox content using JavaScript language, you

should give a name to the <form> element and give a name to the
textbox. ( )
O'JavaScript statement is written inside <scriptx/script>. ( )

r Preparatory question for the next topic: T

- After you have learnt the function creation and calling,
- Is there any way to execute the code according to condition result?

56
 Topic
>

4
R avaScript

H
Branching “IF statement
1 r
OBJECTIVES: I!
By the end of this topic, students should be able to:

(1) Use some of JavaScript statement to ereate a webpage.

(2) Solve some examples using branehing IF statement.
(3) Participate his schoolmates in the learning activities.

57
 2AiFaez

Branching
" In the previous two topics, we have noticed that, JavaScript
statements are being executed one by one.
" But sometimes we may need to execute or non-execute some
of these statements according to condition expression result
as in the following shape:

Is

Yes ^ the total of^ No

your degrees greater than
I ^or equal to 50 >
{^.degree?/^
Print

Conditional expression

¥ Example:

- If the condition result lead to true (total >=50), "success" word

will be printed.
-To check the condition expression, we will use IF statement as
the following:

The general formula of condition expression.

If (Conditional expression)
{ Statements to be executed if the result of the expression is true}

sa
AlFaez

- Condition: is expression that must be evaluated first and lead

to true or false.

- Statements to be executed if the result lead to true found

between {} curly brackets.
- If the result lead to false these statements will not be executed.

the result lead to tri If the result lead to false.

Yes
wr the total of^i No
^your degrees greater thatv
I V or equal to 50j >
Print
Success'
Conditional expression

•'A,
1

- Create a webpage that contains a Form element with:

(1) Textbox in which we can type a total of degrees.
(2) Button on which we can click.
(3)If the condition result lead to true, an alert box with
"success" will be displayed as shown in figure.

60 X total button(2)
t Message from webpage
Text box

success

(D
t]
K - OK

alert box

59
 * Execution:

[11 Create a new text file.

[2] Write the following HTML tags,JavaScript statements.

<body>
(J) <formname ="formO
y <input type = "text" name = "tl'*>
^ <input type ="button" value ="click me" onclick='’total()">
</form>

<scripts
0 function tota]()
{
0 if (forml.tl.value>=50)
{
alert ("successful");
}
}
</script>
</body>

[3] Save the text file with .htm extension.

[4] Open the document in the Internet browser.
- Explanation:
(1) Give anameforml to the<form> element(name="forml")
(2) Give anamett to the textbox (name=”tl").
(3) Add a button to a webpage;<input type ="button">
- We've used attribute "value" to assign caption to a button "click
me"(value ="click me")

60
 AlFaez 2 Topic 3
- The onclick event occurs when the user clicks on a button.

- Specifies the function name (here the function is total())to be

executed. onclick="total()"
(4)To create total()function that will be called or executed on
button clicked, Function total(){
(5)We use the value of the textbox through (forml.tl.value)
- To check the content of textbox that is found in the Form
form! through the value attribute, if(forml.tl.value >=50)
(6)If the condition result lead to true, an alert box with ’"success”
will be displayed, alert ("successful");

* Branching is execute or non-execute some of JavaScript statements

according to condition expression result.
* To check the condition expression, we will use IF statement

Branching IF statement is written as the following:

if(condition expression)
{ Statements to be executed if the condition result lead to tme }

- Condition: is expression that must be.evaluated first and lead to

tme or false.

- Ifthe result of the expression is false, the statements between {}

curly brackets will not be executed.
- Ifthe result of the expression is tme, the statements between {}
curly brackets will be executed.

61
H
Topic 3 ^ ; V^..- v .-¥"tv/
-2 AiFaez

UM i ^ ^

^ First: Complete the general formula of conditional expression:

o (condition expression)
© { Statements to be executed if the condition result lead to true.
0

* Second: Put (v^) for right answer and (x) for wrong answer:
O Branching: mean JavaScript statements are being executed one
by one. ( )

@ If the result of the expression is false, the statements between {}

curly brackets will be executed. ( )
0 To check the condition expression, we will use Function. ( )

O If (total = 50) then the result of (total >=50) expression leads to

true. ( )
0 We are using Text box element, to enter the total degrees. ( )

0 To check the condition expression, we will use IF statement.

( )
© Condition is expression that must be evaluated first and lead to
true or false. ( )
0 If (total = 200) then the result of (total < 200) expression leads to
true. ( )

© Branching is execute or non-execute some of JavaScript

statements according to condition expression result. ( )
© All JavaScript statement within <head>.. .</head> tag
implemented automatically. ( )

62
 !A1 Faez 2

^ Third; Complete the following sentences from a, b,c, or d:

o
IS execute or non-execute some of JavaScript statements
according to condition expression result,
[a] IF [b] Branching [c] True [dj Condition
@ If the result of the expression is ,the statements between
curly brackets will be executed.
[a] IF [bj Condition [c] true [d]false
e is expression that must be evaluated first and lead to
true or false,

[a] IF [bJ Condition [c] true [d] false

O We will use statement to check the condition expression,
[a] IF [b] Condition [c] true [d] false
© If the result of the expression is false, the statements between
curly brackets will not be executed.
[a] /..../ [b] #.... # [c] * .... * [d]{....}
© If(total = 50)then the result of(total <= 20) expression leads to:
[a] IF [b] Condition [c] true [d]false

^ Fourth; Write scientific concept for each of the following

sentences;

O Is execute
or non-execute some of JavaScript statements according
to conditional expression result.
©To check the condition expression.
® Expression that must be evaluated first and lead to true or false.
O Execute or non-execute statements according to specific result.

63
%Jopic 3^ 2 AiFaez
^ Fifth: Complete the next steps to call any function:
O Write an HTML tag for displaying a button within webpage.
< type="button">
© Write an 'onclick' attribute to this button.
— It tt
>
<mput type="button"
e Write a function name as the value of that attribute (onclick).
<input type="button" ="function name you need to call">
0Function can be executed when a button clicked.
.="click me">
<input type="button'' onclick="cormtry()"

^ First: Write the scientific term to the following statements:

O Execute or non-execute some of JavaScript statements according
to condition expression result.
© A statement will be used to check the condition expression.

3k Second: Put(v^)in front of the correct sentence and(x)in

front of the wrong one:

O If the condition result lead to false, the statements within {} will

be executed.

© If total = 100 then the result of(total >= 100) expression leads to
true.

Preparatory question for the next topic: J

- When you enter a data in the Form Field,
- How can you check if this field leaved empty?

64
AlFaez 2 Questions.

I General Revision I Mi r M

^ First: Re-Arrange the following steps to add a Text data field:

( )Save the text file in extension .htm.
( ) <Input type = ’'text">
( ) Create a new text file, using Notepad program.
( )Open the file in the Internet browser.
( )Type the following tags within the <form>
^ Second: Matching from column(A)for column (B):
Column(A) Column(B)
1 <Input type = "radio"> A To add a text box.

2 <lnputtype = '’submit"> B To add a Checkbox.

3 <lnput type = "button"> C To add a send button.

4 <lnput type = "text"> D To add a button.

5 <Input type = "checkbox"> E To add a Radio button.

^ Third: Put(v^)for right answer and (x)for wrong answer:

O Each HTML statement must end with "Semi-colon" (;). ( )

To prevent the user from choosing all available options, use the
attribute "name". ( )
® Reset button is used to send the form data, which you have entered
using the form elements to another webpage. ( )
O document.write() statement used for displaying a message via a
dialogue box. ( )

® Shows the symbol(*) when you type a password in order to hide

the true password components. ( )

65
Questions 2 AiFaez
^ Fourth: Write scientific concept for each of the following
sentences:

O Statement used for displaying a message via a dialogue box.

© A language isn’t enough to make a confirmation to the data entry.
® An attribute used to add a text on the button.
0 Is JavaScript statements grouped together in named block and
performed according to call it.
0 Each JavaScript statement must end with it..

i General Revision ^rilg

^ First: Complete the next steps to create a webpage displays
"computer my favorite subject" text as its content:
O Create a new file.

© Write the following tags,

0 ("computer my favorite subject");
O Save the text file with extension.

0 Open the HTML document in an available

* Second: Write scientific concept for each of the following

statements:

O Statement is used for displaying text within a webpage contents.

© It is used to clear all data fields, which you have entered and
a return to the default values of the controls.

0 A language is used to make a confirmation to the data entry.

O Is execute or non-execute some of JavaScript statements according
to condition expression result.

66
Questions
*6—
Questions
© All JavaScript statement within tag implemented automatically.
^ Third: Complete the following statements from between the
brackets:

O Submit Button is used to send the form data, which you have
entered using the form elements to another webpage, assigned by
attribute value of the form.

(A radio button - action -function - The password)

© field, use to enter the password to a webpage via
keyboard. (The password - Button - function - action)
® The user can click on to achieve or execute JavaScript
function such as clear or save entered data within the form,

(function - action -Button - The password)

O If you want JavaScript statements within <script>...</script> tag
to be implemented when an event occurs (such as button click), you
should use a

(function - action - A radio button - Button)

© ..., by which the user can select one of a limited number
of options such as your gender(male / female),
(function - action - Button - A radio button)
^ Fourth: Put(v^)for right answer and (x)for wrong answer:
O JavaScript commands and instructions (Statements) are
written within HTML tags. ( )
© The letter case must be considered while writing JavaScript
statements. ( )
© Through the Textbox element, we add a group of elements to a
webpage such as buttons and fields. ( )
O To check the condition expression, we will use IF statement.( )
©To create a function, write word IF and followed with its suitable
name.
( )

67
Questions 2 AiFaez

I Genera
^First: Choose the correct answer from between the brackets:

o We use <form> .... </form> tag to create ■

(form - Interactive - Text Box - Static)
0 .. use to enter the password to a webpage via keyboard.
(Text Box - form - Interactive - Password field)
® We must save the text file with extension.

(Jav - htm - doc - txt)

O A statement will be used to check the condition expression.
(Branching - Interactive - Text Box - If statement)
® Create webpage through which you can enter your
personal data through a Form data input elements.
(Password field - form - Interactive - Static)
@ Execute or non-execute some of JavaScript statements according
to condition expression result.
(Branching - Interactive - Text Box - statement)

* Second: Select from(B)that matches with other from (A):

Column (A) Column (B)

1 <input type = "reset"> A

2 <input type = "radio"> B Submit Queiy

3 <input type = "submit"> C Value

4 <input type = "checkbox"> D Reset

5 To add a text on the button E

© ¥
68
AlFaez 2 Questions.
^ Third: Put(v^)in front of the correct sentence and (x)in
front of the wrong one:
O JavaScript commands and instructions (Statements) are written
within <seript></script> tags. ( )
© HTML language is enough to make a confirmation to the data
entry. ( )
® If the condition result lead to false, the statements within {} will
not be executed. ( )
O Each JavaScript statement must end with a semi-colon (;)
character. ( )
© Document.write statement used for displaying a message via a
dialogue box. ( )
0 If total = 50 then the result of(total <50)expression leads to
Fale. ( )
© Radio button Allows you to choose an alternative or more at the
same time. ( )

© Photoshop program is used to create a text file with htm

extinction. ( )
^ Fourth: Complete the following sentences:
O The attribute " used to prevent the user from choosing
more than one option.
© allows visitors of the web page to enter password data,
via keyboard.
© used to select only one of a limited number of options
such as your gender(male / female).
O Through the Form we add a group of elements to a
such as buttons and fields.

69
 Topic
Si:-
0

s. <i
aa ijL w. ?

SCRIP avaScript

Validate data entered into web page

OBJECTIVES:

By the end of this topic, students should be able to:

(1)Discuss validation of the data to be entered into a webpage.

(2)Enter data into a webpage form fields.
(3)Participate his schoolmates in entering data to an interactive
webpage.

70
 AlFaez 2

Validate data entered

into web page
- After you’ve finished learning basics of JavaScript language,
you will use JavaScript language to set an interactive webpage
that validates your entered data.

Data validation

- Validates entered data is controlling entered data.

m
- In the pervious activities you created a lot of controls to input
your data.
- Discuss with your colleagues that after Form submitted, can
you:

(1)Leave the data field empty.

(2) Type any number of characters in textbox.
(3)Type a different password in the textbox.
(4) Type any data type in data field.
- You can observe that these data fields accept data without any
validation.

- There are ways to avoid these defects.

- You can avoid these defects as following:

71
^Topic 4^^ 2 AiFaez

First: Required Field

m
- Create a webpage in whieh we can see a Form with these
elements:

(1) Textbox to enter student name.

(2)Submit button and set value attribute to be "send" to submit
the Form data to get this:
(3) If submit button clicked without typing student name, an
alert box will be displayed to inform us that this field is
required.

ss

© P- c

O
student name Textbox

send
Message from w^ipage ^SSSSSS9

Submit button
.1 required field

0 OK

72
AlFaez 2 ^Topic 4^

Execution:

<form name="forml action="data.php">

Student name

<inputtype="text" name="textl"> <brxbr>

<input type="submit" value="send" onclick="return fl( )">
^</form>
<script>
function fl(){ i
if(fbrml.textl.value==*'"){
alert ("required field");
I return false; I j
}
}
</script>

¥ Explanation:
(1) To add a Form element to webpage, you can use the
following tag;
i <form name="forml action="requiredl,htm"> j
- The name attribute specifies a name used to identify the form.
<form name="formT'

- The action attribute defines the action to be performed when the

form is submitted. Normally, the form data is send to a webpage
on the server when the user clicks on the submit button.
action= "required 1 .htm">

73
 n
Topic 4 2 AiFaez
(2)To add a textbox to webpage, you can use the following tag:
i <input type="texf name="textT'>

- The name attribute specifies a name used to identify the

textbox. name="textT'>

(3)To add a submit button to webpage, you can use the

following fag:
/

i <input type="submif value="send' onclick="retum fl()">

- Where:

- The value attribute specifies the caption for a button.

value="send"
- The onclick event occurs when the user clicks on a button.

- Specifies the JavaScript statements or function name (here the

function is fl()) to be executed. onclick="return fl()";

(4) To create fl()function that will be called or executed on

button clicked, we use the following code.
I function fl(){
t..... ...*

(5) To check the content of textbox that is found in the Form

\

|
fbrml through the value attribute.|(f()rml.textl.value==””)
-To check that the field was not left empty, we use the following
condition:

i if(fbrml.textl.value==’"'){ I
i J

(6)To display the alert box with "required field":

2

I alert("required field");
(7) To return false if the textbox was left empty:
I return false; I

74
 AlFaez 2

- JavaScript language is used to validation of the data to be entered

into a webpage.
- Data validation is the process of ensuring that user input was
checked.

- Ensuring that the user didn’t leave the field empty is one of the data
validation methods.

-To check that the field is not left empty, we use the following
condition; if(forml.textl.value==""){

^ First: Put(y)for right answer and (x)for wrong answer:

O Data validation is the process of ensuring that user input was
checked. ( )
@ HTML language is used to validation of the data to be entered
into a webpage. ( )
©You can Leave the required data field empty. ( )
O To return false if the textbox was left empty: Return true;( )
© Submit button is used to enter student name. ( )
© We are entering data into a webpage form fields. ( )

'¥ Second: Write the function of each of the following codes:

O Function fl(){
© <input type="texf' name="textl">
© <onclick="retum fl();"> ...
O alert ("Successful");
© <input type="button" value=""sum">
75
 U2eQ
^ Third; Matching from column(A)for column (B):
Column (A) Colunnn (B)
To return false if the textbox
1 function fl() A
was left empty.
Defines the action to be
2 B performed when the form is
if(forml.textl.value==""){
submitted.

C
To display the alert box with
3 return false;
"required field".
will be called and executed
4 alert("required field"); D
when command button clicked
To check that the field was not
5 action="requiredl.htm' E
left empty.

^ Fourth; Complete the general formula of conditional sentence

from between the brackets;

o to enter student name,

(verification - onclick - static - textbox)

© value="send": the value attribute specifies the for a button.

(textbox - caption - submit button - reset button)

© We can not leave the empty.
(interactive field - static field - input field - required field)
O Data is the process of ensuring that user input was
checked.

(validation - dynamic - input - return)

0 To check the content oftextbox that is found in the Form forml
through the attribute,

(input - type - value - text1)

[Preparatory question for the next topic;
- When you enter data into the form fields.
- How can you make the data field receive only numerical data?

76
 avaScript

Continued to validate data entered into web page

OBJECTIVES:
By the end of this topic, students should be able to:

(1)Discuss validation of the data to be entered into a webpage.

(2)Enter data into a webpage form fields.
(3)Participate his schoolmates in entering data to an interactive
webpage.
^ Topic 5^ 2 AiFaez

Continued to validate data

entered into web page
Data valiciation J')
Second

Define the minimum allowed length for the input

mLctivifr
- Create a webpage in which we can see a Form with the
following elements:

(1)Textbox for password input.

(2)Submit button for form data submission.
- An alert box will be displayed on submit button clicked, if the
entered data was less than the minimum allowed length (8
characters).
a

a ax fi -C &
-tev^ i col-

password send

(f
Message from webpage
(D
1, minhntiin length 8 character

(3) OK

78
 y

AlFaez 2

<html>

<head>

</head>

O I
<body dir ="rtl">
e ¿<form name="forml action = "data.php">
© I <input type="password id ="textl">

<input type="submit" value="send" onclick="retum fl( )">

¿ </form>

¿ <script>

© function fl ( ) {
I
© I I if (forml.textl.value.length<8) {
O I
alert ("minimum allowed length 8 characters");
© I return false;
}
}
</script>
</body>
<html>

# Notice: The similarities and differences between this code

and the code of the pervious example.
¥ Explanation:
(1) To set the direction of the webpage content from right to left.
<body dir ="rtl">

79
 AiFaez

(2) To add a Form element to webpage, you can use next tags:
<form name="forml action = "data.php">
- The name attribute specifies a name used to identify the form.
<form name="formr'

- The action attribute defines the action to be performed when the

form is submitted. Normally, the form data is send to a webpage
on the server when the user clicks on the submit button.
action=" data.php">
(3) To add a textbox to webpage to enter password, you can use
the following tag:|<input type=’'password"
- The id attribute specifies a name used to identify the textbox.
id="textl'’> I
(4) To add a submit button to webpage, you can use the next tag:
<input type="submit"
- The value attribute specifies the caption for a button.|value="send
- The onclick event occurs when the user clicks on a button.
- Specifies the JavaScript statements or function name(here the
function is fl()) to be executed. onclick="retum fl( )">

(5) To create fl() function that will be called or executed on

button clicked, we use the following code, function fl(){
(6) To verification if the entered data was less than the minimum
allowed length (8 characters), we use the following tags:
if(forml.textl.value.Iength<8){
(7) To display the alert box with
alert("minimum allowed length 8 characters");
(8) To return false if the entered data was less than the length
8 characters: Return false;

SO
AlFaez 2

Data validation
Third: Matching the data entered in the two fieids

m etivifr
- Create a webpage in which we can see a Form with the
following elements:
(1) Textbox for password input "enter password".
(2) Textbox for re-enter password input "re-enter password".
(3) Submit button for form data submission.
- Comparing the content of the two fields, in the case of
mismatch the contents show a warning message "The two
values do not match".

_ ¥

^<k\ P- C 3

password
(i> send

f-typ* pjwword j """

Message tcom weOpage

J Ttw two values do not match !

@
OK

81
 2 AiFaez

^¿<bodydir="rtr>
e f'<form name="forml action = "data.php >

password
© <input type="password" id="textr'>

re-enter password
<input type="password" icl="text2">
<br>

© <input type="submit" value="send" onclick="retum fl( )">

¿ </form>

¿ <script>

© function fl (){

© if (fornil.textl.value!==forml. Text2. value) {

© alert ("The two value do not match");

© return false;
}
}
</script>
</body>

# Notice: The similarities and differences between this code

and the code of the pervious example.
¥ Explanation:
(1) To set the direction of the webpage content from right to left.
<body dir ="rtl">

82
 AlFaez 2 ^ Topic 5^
(2) To add a Form element to webpage:
<form name="forml" action = "data,php'’>
- The name attribute specifies a name used to identify the form.
<form name="forml"

- The action attribute defines the action to be performed when the

form is submitted, action = "data.php">
(3) To add a textbox to webpage to enter password, you can use
the following tag; <input type="password"
- The id attribute specifies a name used to identify the textbox.
id=’'textl^^

(4) To finishing the current line and start a new line:|<br>

(5) To add a submit button to webpage, you can use the next tag:
<input type="submit"
- The value attribute specifies the caption for a button. value="send'
- The onclick event occurs when the user clicks on a button.

- Specifies the JavaScript statements or function name (here the

function is fl())to be executed. onclick="return fl()">
(6) To create fl() function that will be called or executed on
button clicked, we use the following code.|function fl(){
(7)To comparing the content of the two fields, in the case of
mismatch the contents show a warning message, you can use
the following tag:
if(forml.textl.value!==forml. Text2. value){
(8) To display the alert box with "The two value do not match":
alert("The two value do not match");
(9) To return falsejn the case of mismatch the contents of the
two fields: Return false;

83
 AiFaez

Data validation

Fourth p Prevent the user from entering type

- To prevent the user from entering type of data that

different of field data type:

- Create a webpage in which we can see a Form with these

elements:

(1) Textbox for data entry.

(2) Submit button for form data submission.
(3)Check data type of data entry, in the case of enter non
numeric data show a warning message "enter a numeric value'

degree computer send

Message fto«n webpage

I,
enter e numeric value

OK

84
 <body dir ="rtl">
<form name="forml action = "data.php">
<input type="text id="textl">

<input type="submit" value="send" onclick="retum fl( )">

</forai>

<script>

function fl(){

if(isNaN(form1.text1.value)){

alert("enter a numeric value");

return false;
}

</script>
</body>

# Notice; The similarities and differences between this code

and the code of the pervious example.

- Data validation methods:

(1) Defining the minimum allowed length for the input field.
(2) Matching the data entered in the two fields.
(3) Prevent the user from entering type of data that different of field
data type.

85
 Topic 5 s i2. AiFaez
s €t
* First; Put(v^) for right-answer and (x)for wrong answer:
O To check the data entered, use the html language. ( )

® <body dir="rtl"> tag, is used to determine the direction of the

webpage contents from right to the left. ( )

@ From cases of data validation, leave the data field empty. ( )

O We used fl(){tag to delete fl()function. ( )

0Defining the minimum allowed length for the input field from
cases of data validation. ( )

0 Submit button is using for form data submission. ( )

©To verification if the length of data entered within a textbox is less
than or equal to 8 characters, we use the following command:
if(forml.textl.value!==forml.Text2.value){ ( )

^ Second; Choose the correct answer from a, b, c, or d:

O The length of data entered within a textbox is less than or equal to

8 characters:

(a)if(forml.textl.value!==forml.text2.value)
(b)if(isNaN(forml.textLvalue)
(c)if(forml.textl.value.length<=8)
(d)if(fonnl.textl.value=="")
© Prevent the user from leave the field empty:
(a)if(forml.textl.value!==forml.text2.value)
(b)if(isNaN(forml.textLvalue)
(c) if(formLtextLvalue.length<=8)
(d) if(formLtextLvalue=="")

86
® Prevent the user from enter a non-numeric data:
(a)if(forml.textl.value!==forml.text2.value)
(b)if(isNaN(forml.textLvalue)
(c)if(formLtextl.value.length<=8)
(d)if(forml.textl.value=="")
O To match the password values, we can use the condition:
(a)if(forml.textl.value!==forml.text2.value)
(b)if(isNaN(forml.textl.value)
(c) return false;
(d) if(formLtextLvalue=="")
® To return false as a function returned value in the case the textbox
is leaved empty, we used return false;
(a)if(formLtextl.value!==forml.text2.value)
(b)if(isNaN(formLtextLvalue)
(c)return false;
(d)if(forml.textLvalue)
^ Third: Matching from column(A)for column (B):
Column (A) Column (B)
Prevent the user from enter a
1 Function fl(){ A
non-numeric data.

To specify the webpage to

2 isNaN(forml.textl.value) B which the submitted data will
be sent.

3 </body> C Add a password field.

4 <input type="password"> D The end of the webpage

content.

5 action= "data.php E Create a function named FI.

87
^Topic 5^ 2 AiFaez
^ Fourth: Complete the followingsentences from between the
brackets:

(Text Box - value - Name - Reset Button - Radio buttn

- Reset Button)
o The attribute" used to prevent the user from choosing
more than one option.
e allows visitors of the web page to enter password data,
via keyboard.
0 used to select only one of a limited number of
options such as your gender(male / female).
o is used to clear all your data, which you have entered
using the form elements.
0 Used the attribute to add a text on the button.

0 When pressing on , can perform many functions, such as load

a function, or store your data, or delete your data.
^ Fifth: Matching from column(A)for column (B):
Column (A) Column (B)

1 Checkbox A
A language is used to create a
text file with htm extension.

2 Value B
To select your proficiency
language(s).
An attribute is used to add a text
3 HTML C
on the button.

A button is used to send all form

4 <input type="password"> D
data to other webpage.

5 Submit button E
To add a password field to the
webpage

88
AlFaez 2

s
M
^ First: Complete the following sentences:
Cases of data validation are:

O Leave the data field empty.

e
e
o

^ Second: Put(O in front of the correct sentence and(x)in

front of the wrong one:
O To match the password values, we can use the folowing condition;
form 1.text1.value=="" ( )
® We add action attribute to <form> element for specify the
webpage to which the submitted data will be sent. ( )
® To create fl()function, we used fl(){ ( )
O To return false as a function returned value in the case the textbox
is leaved empty, we used return false; ( )
©To verification if the length of data entered was less than or equal
to 8 characters: form 1 .textl.value.length<=8 ( )
©To check that the field was not left empty, we can use the
following tags: forml.textl.value!==fomil.t§xt2.value ( )
©To check if the user entered a non-numeric data, we can use the
following tags: isNaN(forml.textl.value) ( )

[ Preparatory question for the next topic: ^

- When we create a webpage:
- How can you validate the form da ta?

89
 :>

P avaScript

OBJECTIVES:

By the end of this topic, students should be able to:

(1) Create an interactive webpage.
(2) Develop an interactive webpage.
(3) Compare between the static and interactive webpage.
(4) Appreciate the importance of markup language HTML and
JavaScript language in creation of an interactive webpage.

90
 AlFaez 2

Project
Data validation in the registration webpage ^
- After you have learnt how to validate input data, complete your
previous project(my school) and add a registration webpage.
1^ Enter Student Data C3

Enter Student Date

Name Fathy AboZed

Enter

Re enter p^word

Age 28

Gender

#) Male © Female

Language

(21 German [21 Englisti !Q French

Register New

- The validation process can include:

(1)Prevent user from leave textbox empty (required field).
(2)The minimum length allowed for the password field is 8
characters.

(3)Matching the data of the two password fields.

(4)Prevent user from enter a non-numeric data into the age field.

91
^Toplc6^ 2^aez
Enter Student Oats

Enter Student Data

Name Fathy Abo Zed

JjJe.
Enter Pass<Aiord

Re enter password

^V! Age

Gender
«a1S
'» Male O Female
Language
1
3] German U English Q French

I Register...! New

My School
V&M A photos About sctiool Home

* 1^

I
Vision & Mission A photo album About school

f. • :Ai«>uh jjiaTi ^

m
4-

The final illustration of my school website pages

¥ Note:

- After save button is clicked, data validation process is done.

- Then it will be saved and returned to login webpage (which we
will learn later on) for finishing registration and enter the home
webpage using the name and password that were last be saved.

92
 HTML5

HTIVII.5
- What's New in HTML5? 1
I I

i ¥_

r</>^
i i

93
 2 AiFaez

HTML5
HTML5

- It is a new version of the HTML language.

- It appeared in 2014 and has many improvements that are
evident through the use of a range of new tools to facilitate the
idea of designing a webpage.
- The Internet browser programs such as (google chrome, internet
explorer, Firefox) do not fully support the implementation of
the new tags of HTML5.
- So the browser required for the implementation of each tag will
be determined.

- There are many new Form tools used for input data such as:
(1) Color input field.
(2) Date input field.
(3) Number input field.
(4) Required attribute of text input field.

Color Input Field

- Through color input filed, the user can select a color as his
input data from a color picker.
- To add a color picker as an input field to the webpage, you can
use the following tag:
<input type="color">

94
AlFaez 2

k
LCtIvit'
- Do the following:
(1) Create a new text file.
(2) Write the following HTML tags.
— <form>

Choose your favorite color

<br>

^<input type="coloi^
</form>

(3) Save the file with .htm extension,

¥ Note:this input type is supported in Google Chrome.

(4) Open the HTML document in Google Chrome browser, and
the webpage will be shown.
J
a
j

t; / X c
(-1
l i ✩ ©DO I

¥i M
I
I choose your favorite color
!

¥:y-.
.1
m M
r' 8a«eecle(».

: mr
fl

i
PE ar
i
d CiMamcekan:

P i
1:

0^-

Cancal MiHtiCiMCdM

95
//
^Toplc 7^ 2 AiFaez

Date input field

- Date input field: by which the user can select a date value from
date picker (calendar).
-To add a date picker as an input field, you can use the following
tag: <input type="date'’>

A
iCtivii
-To appear a date box within the web page to choose the
required date do the following:
(1) Create a new text file.
(2) Write the following HTML tags. O

X c

: (POO

— <form>
Birth Date
birthdate
3 ImaiN-

<br> NSoo ItM >A'«4 riu Fh Sun

I

^<input type="date">) i

>0
r
i

11
w
i:
1}
u
»
6
11
;i
s

i;

</form> y a ;* a » 7^

31

(3) Save the file with .htm extension,

¥ Note: this input type is supported in Google Chrome.

(4) Open the HTML document in Google Chrome browser, and
the webpage will be shown.

%
AlFae:32

Number Input Field

- By creating a numeric input field, you can also set restrictions

on what numbers are accepted to a certain range.
- To add a number as an input field, you can use the following
tag: <input type="submit">

AI®:

- Appear the number tool inside the web page for use in the
introduction of numerical values, between 1 and 20.
(1) Create a new text file.
(2) Write the following HTML tags.

<form>

* Enter a number from 1 to 20

<br>

<input type="number" min='T max="20"> 1

<input type""submit">
</form>

(3) Save the file with .htm extension,

n Note: this input type is supported in Google Chrome or

Firefox.

(4) Open the HTML document in Google Chrome browser, and

the webpage will be shown.

97
/# 2 AiFaez

¥ Note:

(1) You can type a number or click arrows button to increase or

decrease a value.

(2) After you9ve typed a number, submit the form data through
the <submit button= in order that the browser checks an

entered value, if it was a non-numeric value, a warning

message will be displayed to inform you that you must enter a
numeric value.

(3) If an entered value isn9t in an available range, a warning

message will be displayed to inform you that the value must
be in an available range.
- On opening the HTML document in an available internet
browser, the webpage will be shown as follows:
a

X^ +
\f

Enter a number from 1 to 20

«

: 55 -r'l; Submit Query

Please select a value that is no more than 20.

X +

f Enter a number from 1 to 20

li pbc -Sj Submit Query

Please enter a number.

98
AlFaez 2- - ^. Topic 7 ^

Required Attribute

- If required attribute is added to any input field such as (text,

password, date, number, checkbox, radio, ... etc.).
- The browser forces the user to input this field because it is a
required field and the form submission is not completed.

Activity h‘-kj

(1) Create a new text file.

(2) Write the following HTML tags.

^<form>
¥{
I <input type="text required">
\ <input type="submit">
^</form>
(3) Save the file with .htm extension.

Note: this input type is supported in Internet Explorer.

D
(4) Open the HTML document
;r P
I
in Internet Explorer browser, I t File Edit View Favorites Too ls ^

and the webpage will be shown. I | 1

This is a required field

99
 ^o
^aez
¥ Notice:

- After you9ve elieked on submit button without entering any

data in a required text field, a warning message will be
displayed to inform you that this field is required field.

- HTML5: It is a new version of the HTML language; it appeared in

2014 and has many improvements that are evident through the use of
a range of new tools that facilitates the idea of designing a web
page.

- There are many new Form tools used for input data such as:
(1) Color input field.
(2) Date input field.
(3) Number input field.
(4) Required attribute of text input field.

m
^ First: Complete the following steps to add a date picker as
an input field to the web page:
O Create a new
© Write the following tags.
< >

birthdate

O <input type = "... '>

</form>

© Save the file with extension,

© the HTML document in Google Chrome browser.

too
AlFaez 2 ^Topic 7

^ Second: Re-Arrange the following sentences to add a color box

(color) inside the web page.
( ) Save the file with .htm extension.
( ) Open the HTML document in the Google Chrome.
( )write the following HTML tags within <form>.
( )<input type = "color">
( ) Create a new text file.

^ First: Write the scientific term to the following statements:

O A new version ofHTML language that has new elements for
web design.
0 An attribute that if added to any input field made this field
required.
® An input field was added to a webpage to enable user to enter
a numerie value in a range.
^ Second: Select from(B)column that matches with other from
(A)column

Column (A) Column (B)

1 <input type="date"> (a) Add a color picker to webpage.
2 <input type="number"> (b) Add a date picker to webpage.
3 <input type="color"> (c) Add a number input field.

^ Preparatory question for the next topic: 1

- When your interactions with Web sites online:
- How do you use the Internet sites and services in?

101
^ Questions^ 2 AiFaez

I Second Unit -1
^ First; Put for right answer and (x)for wrong answer:
O HTML commands and instructions are called Statements.( )

0If the result of the expression is false, the statements between

[....] curly brackets will not be executed. ( )

© Condition is expression that must be evaluated first and lead to

true or false. ( )
O If(total = 70)then the result of(total = 70) expression leads to
false. ( )
@ The message text must written within double high quotations [""].
( )
^ Second; Arrange the following steps to call a function:
( )Write a function name as the value of that attribute onclick.
( )Write an HTML tag for displaying a button within
webpage.
( )Write following code:
<input type="button" onclick="eountry()" value="elick me'>
( )Write an onclick attribute to this button.

^ Third; Write the scientific term to the following statements:

O Used for displaying a text within the webpage contents.
© The language used to make your registration webpage to
interactive.

© It is JavaScript statements grouped together in a named block and

performed according to call it.
O Used for displaying a dialogue box with message to the user.
© It is used to check the condition expression.
102
AlFaez 2 -'J Questions

^ Fourth; Matching from column(A)for column (B):

Column (A) Column (B)
1 To check that the field was not
alert("required field"); A
left empty.
2 To comparing the content of
if(forml.textl.value==""){ B
the two fields

3 return false; C To display the alert box with

"required field".
4
To return false if the textbox
action="required 1.htm' D
was left empty.
Defines the action to be
5
if(forml.text1.value!==for
E performed when the form is
ml.text2.value){
submitted.

^1 Second Unit i-
2 ¥; t'

^ First; Choose the correct answer from between the brackets;

O We use a = attribute for writing a text on a button ,
(onclick - Function name - name - value)
© The fonn name is given form through the attribute ..
(onclick - Function name - name - value)
® Adding a attribute to the button element for is called a
function.

(onclick - Function name - name - value)

O Onclick attribute value iI S required invoked.
(onclick - textbox - name - value)
©For reading a Content using JavaScript language, you
should give a name to .the <form> element and give a name to the
textbox. (onclick - textbox - name - value)

103
 H
^ Questions^ 2 AiFaez
^ Second: Put(^)for right answer and (x)for wrong answer:
O We will use Function to check the condition expression. ( )
e Branching is execute or non-execute some of JavaScript
statements according to condition expression result. ( )

©JavaScript commands and instructions (Statements) are written

within HTML tags. ( )

O alert() statement is used for displaying text within a webpage

contents. ( )

0JavaScript statements are written inside <html> </html> tag.( )

^ Third: Matching from column(A)for column (B):

Column (A) Column (B)
To check if the user entered
1 function fl() A
a non-numeric data.

will be called and executed

2 JavaScript language B when command button
clicked.

C
used for displaying text
3 if(isNaN(forml.textl.value)) within a webpage contents.
used to validation of the data
4 A radio button D
to be entered into a webpage
by which the user can select
5 Document.write() statement E one of a limited number of
options.

^ Fourth: Arrange the following steps to create a webpage that

displays a dialogue box with message "welcome” when loading:
( )Save the text file with .htm extension.
( )Create a new text fde.
( )Open the HTML document in an available internet browser.
( )Write the following HTML tags, alert ("welcome");

104
AlFaez 2_ Questions ^

I Second UnitKjm§ii@ 3
^ First: Put(v^) for right answer and (x)for wrong answer:
O alert() statement used for displaying a message via a dialogue
box. ( )

© If(total = 100)then the result of(total < 50) expression leads to

True. ( )

© If the result of the expression is false, the statements between

curly brackets will be executed. ( )
O Each statement must end with a semi-colon (;) character. ( )

© JavaScript language is case-sensitive, so the letter case (small or

capital letter) must be considered while writing JavaScript
statements. ( )
^ Second: Choose the correct answer from between the brackets:

O The textbox name is given textbox through the attribute

(name - forml.tl.value - JavaScript - <script></script>)
© JavaScript statement is written inside
(name - forml.tl.value - JavaScript - <script></script>)
© If you want statements to be implemented when .:n
event occurs(such as button click), you should use a function,
(name - forml.tl.value - JavaScript - <script></script>)
O We can use the value of the textbox through
Statement.

(Function - forml.tl.value - JavaScript - <script></script>)

© is JavaScript statements grouped together in a named
block and performed aecording to call it.
(Function - forml.tl.value - JavaScript - <script></script>)
105
 Questions^ ~ ' -
2 AiFaez
^ Third: Arrange the following steps to create a webpage
ft
displays "computer and information technology subject
text as its content:

( )document.write ("computer and information technology

subject");
( )Save the text file with .htm extension.
( )Create a new text file.
( )Open the HTML document in an available internet browser.
( )Write the following HTML tags.

^ Fourth: Matching from column(A)for column (B):

Column (A) Column (B)
The length of data
entered within a textbox
1 <input type="color"> A
is less than or equal to 8
characters.

A new version of HTML

2 if(form 1.textl.value.length<=8) B
language.

3 C
Add a color picker to
<input type="date">
webpage.

4 HTML5 D
Add a number input
field.

5
Add a date picker to
<input type="number"> E
webpage.

106
 '1.- i ■

After completing this unit, it is expected that the r--

student shou[d be able to:

(1) Identify the internet Safety coneepts.

(2) Identify the different information teehnology Safety eoneepts.
(3) Identify the intellectual Safety sides, cultural, ethical, social
and religious, concerning the usage of information technology
and communication.

I m
OBJECTIVES:

By the end of this topic, students should be able to:

(1) Identify the common idioms used on the internet (identity
theft - malware - spyware).
(2) Mention as amnay ideas as possible concerning
the users of the internet.

(3)Design a digital image about malusage of internet.

(4)Explain the instructions of internet Safety.
(5) Appreciate the importance of internet Safety in our life.

107
•WKiWfelnternet^ 2 AiFaez

Internet safety
* The internet is one of the most important means of
communication in all fields. It is important to focus on the
dangers that result from this usage.
* There are vary dangers such as virus infection, which destroy
the system data, attack to spoil the user files or harm or,
blackmail deploy identity or personal data theft and other types
of dangers.
* Many people do not know that some information which may be
considered useless are so important for others.

-Next:

- How to deal with some of the situations that may appear during
internet usage?
- Some common idioms used on the internet.

- Dear Student: define the following:

I «
(1) Malware

(2)Identity theft j

(3) Spyware

14
(4) Virus

(5) Secret codes

108
 y

II
.

// y'

L¥ Ji
AlFaez 2 i
r 1
Internet Safety
IDentity
THEPT

Identity theft
t

- It is the impersonate of someone or /

V
using his name or any information
concerning him for stealing him or theft of others.

Malware

- It is parasite programs that sneaks to backdoor computer \

systems. f _5
% .
- The name is derived from Malicious Software. 9\

-To protect your system against them, use antivirus i

m rrJ

programs and update them continually.

Spyware

- It is computer programs that collect personal

information of the users without their consent.

-To protect your computer, you must use anti-spyware programs

that detect programs like spyware, adware and files that control
your internet browser.

Virus

- It is a small program that can spread itself to

infect the computer and programs. -'.m

109
.lawiiiii^lnternet m 2[gFaez

Secret codes

- They are all the personal data that must not

be shown to everyone on the internet like;
username, password or mobile phone number.

1
• •
tional Activit
- Search on the internet for programs to protect your
computer and download them.

- A student(X)was on Facebook and was talking to unknown

person(Y ), during the talk ,X sent personal information as
phone number, personal image and home address. Discuss this
situation. - Discuss this situation:

110
 AlFaez 2 Internet ^

How to deal with some of the situations that may happen

to you or to one of your colleagues during internet usage?

First situation

- Sometimes the registration is done by the your Facebook user

name and password to sign up for an application.
- The user is exposed to stealing his account especially when
these applications are hacked.

- How to deai with this situation?

- It is better not to sign up for these applications because the

main objective behind them is not known, especially if the
registration is to done using the password of your account.
- If this happened, go and change your password at once.

Second situation

- Some users publish their personal and family photos on social

media sites.

Problem that may occur:

- The user may be exposed to blackmail or defame or deal with
these photos in an unsuitable way through using image-editing
programs like Photoshop or so.

- How to deal with it?

- Do not publish your personal photos, and when you do make

sure that you assigned the viewers to your closest friends.
Ill
^ Internet 2 AiFaez

Third situation

- Publishing personal phone number or personal information like

home address or work place when signing up for a forum or
creating personal account on social media sites.

Possible Problem:

- The user can be exposed to house robbery or kidnapping

especially young people, when registering uncontrolled.
- How to deal with this?

- DO NOT publish your personal information or any information

concerning the user.
- It is better to hide this information and control young people
signing up, not allowing them to publish personal information.

Fourth situation

- Talking to strangers for acquaintance and exchange opinions or

culture in Facebook.

Possible Problem:

- They may be some deceit especially when the others are unreal
persons.

- This may lead to dangerous life problems especially when

publishing family information.

m
AlFaez 2 Internet ^
- How to deal with this?

- Use the social media sites to increase social relationships but

you have to make sure about the person you talk to and his real
identity.
- It is better NOT to deal with strangers using fake names.

Fifth situation

- Signing up for job online filling in forms with personal details.

The Problem:

- There may be deceit by unreal companies through advertising

unreal job vacancies to just collect personal information and
building up a database with this, then using the distinguished
people for certain purposes.

- How to deal with this?

- Online application has be well known but you have to take care
to apply only for authorized companies and make sure they are
real through knowing their real places.
- It is better to apply only for official or governmental job
vacancies online.

113
 £Faez

Important direction for internet safety

- The following are some of the important guideline to better

internet Safety:

(1)Keep your username and password secret.

(2)Think well before publishing your personal photo or sending
text or sound files or videos on the internet.

(3)Before publishing anything ask the person before publishing

his photo or sending their phone number or email address to
other people online.
(4)Do not reply to unknown messages or from unknown people.
(5)Do not add people you do not know to your friend list.
(6)Do not send messages when angry.
(7)Not taking any step towards illegal operation is kind of hiding
the wrong doer.
- So tell an adult directly of anything you doubt.
(8)Learn how to ban people from reaching chat box and print or
screenshot them to be easy for parents to take the right step
against them.
(9)Learn how to ban disturbing messages.
(10)Know well that online chat is not personal, some others may
be recording or printing these chats and (publish them later
on).

The following idioms are key words for internet search for
more information about this lesson:

114
AlFaez 2 ^ Internet

Some of the most important idioms used in internet safety

Term Meaning Term Meaning

Acceptable
Cyber bullying
use policy

Asking for Firewall

help

Web blog Contempt fljjjV)

Bluetooth Identity theft "iSijm

Chat room Lan "ijlbtAiSjM

Computer
User name ftitirlffitl flMt
network

Wan Password

Malware SjLa Q4tjJ Malicious •••

(^1 JJ4M
Moblog Virus

(gL JitijuJl uiit

Netiquette Web cam ujyi IjmIS
uj>jVl

Pop menu Secret codes

liljMtl uU^U
Spam JiLj Atm

Phishing Contempt
Social
interactive Happy slapping
television

Contempt Spyware

115
 /#
- Internet^ 2 AiFaez

- Internet Safety has many topics like:

(1) Malware.
(2) Identity theft.
(3) Spyware.
(4) Virus.
(5) Secret codes.

- In the situations that may happen to you or your

colleagues take care of the following:
(l)It is better not to sign up for some applications whose goal
is not known.

(2)Do not publish personal photos and when you do make

sure they are secret.
(3)Do not publish personal information either in social sites
or forums and there should be adult control at home.

(4) Make sure of the real identity of the people you talk to.
(5) When applying for a job online, make sure of the real
information of the companies and it is better to apply for
official or governmental job vacancies online.
;'9

mejs ?
^ First: Put(v^)for right answer and (x)for wrong answer:
O Internet network of the most important means of eommunication
in various fields. ( )

© Malware is a web page on the Facebook site. ( )

116
AlFaez 2 %Jnternet^
® Vims is small harmful programs that can spread and harm
computer and programs. ( )
O Must reply to unknown messages or from unknown people.
( )
0 Bluetooth is parasite programs are programs that backdoor
computer systems. ( )
0 Web blog, means all the personal data that belong to anyone deals
with the means of information and communication technology.
( )
© To protect your system against Malware, use antivirus programs
and update them continually. ( )
0 Spying: the name is derived from Malicious Software. ( )

^Second: Choose the correct answer from between the brackets:

©For internet safety, keep your and secret.

(username - password - all of the previous - Facebook)

© is a small program that can spread itself to infect the
computer and programs.
(Virus - Malware - Spying - Identity theft)
0 For do not reply to unknown messages or from unknown
people.
(Malware - Identity theft - Virus - internet safety)
o is computer programs that collect personal information
of the users without their consent.

(Identity theft - Spying - Secret codes - Malware)

0 For Internet safety, do not send messages when
(angry - happy - Secret codes - Malware)

117
6- Internet ^
^ ^ ^
2 AiFaez

^ First: Complete the following:

O Impersonation of someone or using the personal information of
someone or stealing them is called
e are computer programs that collect information about
users to control or watch them.

0 are small harmful programs that can spread and harm

computer and programs.
O Secret codes are the personal infonnation for technology users
which must not be shown to anyone like

0 Weblog is
^ Second: What will you do when:
O Talk to a stranger to exchange opinions or culture through social
media programs.

0 Applying for job online and providing personal information.

^ Third: Put(v^)for right answer and (x)for wrong answer:
O You can publish photos of others or show their phone number
online. ( )

0 When online do not answer any unknown messages. ( )

0 Not taking any step against any harm on the internet is kind of
hiding wrong doers. ( )

O Online talk or chat are protected and cannot be copied or printed.

( )

118
 ¥Viv-

jjy Faez 2 Questions

I General Revision
^ First: Write scientific concept for each of the following:
O Allows visitors of the web page to enter text data, using the
keyboard.
® They are all the personal data that must not be shown to everyone
on the internet like: username, password or mobile phone number.
® A language which used to make a confirmation to the data entry.
O An attribute used to add a text on the button.
® By which the user can select one of a limited number of options
such as your gender (male / female).
^ Second: Matching from column (A) for column (B):
Column (A) Column (B)
1 <lnput type = "checkbox "> A To add a Password input
field.
2 If(form 1 .text 1 .value!==) B Semi-colon" (;).
To check that the field was
3 <lnput type = "password "> C
not left empty
4 Keep your username and D To add a Checkbox input
password secret field.

Each HTML statement must

5 E
end with From internet Safety

^ Third: Put for right answer and (x) for wrong answer:
O Textbox in which we can type a total of degrees, ( )
@ Alret( ) statement is used for displaying text within a webpage
contents.
( )
e
To add a button to the webpage, we can use the following tags:
<Input type = "button"> ( )

119
-Questions 2 AiFaez

O Submit button is used to clear all data fields, which you have
entered and a return to the default values of the controls. ( )

© Virus is computer programs that collect personal information of

the users without their consent. ( )

^ Fourth: Complete the following from between the brackets:

("Semi-colon"(;)- Identity theft- onclick - false - Function)
o is JavaScript statements grouped together in named block
and performed according to call it.
0 is the impersonate of someone or using his name or any
information concerning him for stealing him or theft of others.
® Each JavaScript statement must end with
O If the result of the expression is .... ,the statements between {}
curly brackets will not be executed.
0 The function is called by the attribute.

I General Revision
^ First; Re-Arrange the following steps to add a Submit button:
( ) Open the file in the Internet browser.
( ) Type the following tags within the <form>.
( ) Save the text file in extension .htm.
( ) Create a new text file, using Notepad program.
( )<Input type = "submit">
^ Second: Put(v^) for right answer and (x)for wrong answer:
O To create a fonn use <form>....</form> tag. ( )
0 To add a textbox for enter a student name to a webpage, use the
following tag; <input type = "password"> ( )

120
AlFaez 2 Questions ^
©You can prevent the user from choosing all available options,
using the value attribute. ( )
O The password field, use to enter the password to a webpage via
keyboard. ( )
© Need branching if the execution or non-execution of orders based
on a certain condition. ( )
^ Third: Matching from column(A)for column (B):
Column(A) Column(B)
Used to select one or more
1 Reset A option from a limited number of
options at the same time.

2 Checkbox B Comparing the content of the

two fields.

3 Form C are called Statements.

if(form 1.text1.value!== Through it we add a group of

4 D
forml.Text2.value) elements to the web page.
JavaScript commands Used to clear all data fields to its
5 E
and instructions original state.

4^ Fourth: Complete the following sentences:

o refer to software or spammed or disturbing sneaks a hidden
computer system.
© statement used for displaying a message via a dialogue box.
© Attribute( )used to determine the number of characters
within the text field.

o language isn’t enough to make a confirmation to the data

entry.
© It is computer programs that collect personal information of the
users without their consent.

121
Questions 2 AiFaez

General Revision
^ First; Matching from column(A)for column(B):
Column (A) Column (B)
To add a send button to the
1 <lnput type = "text"> A
webpage.
To add a Radio button to the
2 <Input type = "reset"> B
webpage.
To add a delete button to the
3 If(forml.textl.value==" "){ C
webpage.

4 <Input type = "radio"> D To add a text box input field

to the webpage.
To check that the field was
5 <Input type = ”submit"> E
not left empty.
^ Second; Put(^)for right answer and (x)for wrong answer;
® In a webpage the from element doesn't require sending the entered
data to the web server. ( )
® symbol will be displayed instead of original text. ( )
6 To prevent the user from choosing or selecting more than one
option or choice, you can add name attribute to radio input field.
( )
O document.write statement is used to display the alert box with
"message". ( )
® To add a text box field in order the user can enter his name, you
add checkbox field. ( )
4c Third; Write scientific concept for each of the following;
® It is the impersonate of someone or using his name or any
information concerning him for stealing him or theft of others.

122
 AlFaez 2 Questions ^
© A language is used to ereate a text file with htm extinction.
® An attribute is used to add a text on the button.
O It is parasite programs that sneaks to backdoor computer systems.
0 JavaScript statements are written inside it.
^ Fourth: Choose the correct answer from [a],[b],[c], or [dl:
O If the condition result lead to , the statements within {} will
be executed,

[a]false [b] true

[c] function [d] value

0 If you want JavaScript statements to be implemented when an

event occurs (such as button click), you should use a
[a] function [b]false
[c] true [d] value
0 They are all the personal data that must not be shown to everyone
on the internet like; username, password or mobile phone number,
[a]name [b]false
[c] Secret codes [d]function
o is JavaScript statements grouped together in a named
block and performed according to call it.
[a] name [b] false
[c] Secret codes [d]function
0 To comparing the content of the two fields:
[a] if(forml.textl.value!=-forml.text2.value){
[b] if(forml.textl.value.length<=8)
[c] if(form 1.textl.value.length==" ")
[d] if(forml.textl.value!==)

123
124
 isl

AlFaez 2 Practical tests ^

^ Answer the following questions:
f
(1) Write steps to add a Checkbox to a webpage English [ I
[The answer ^ French|
|
Germany|
I
(1)Create a new text file, using Notepad program.
(2)Write the following HTML tags within the <fonn>.
<form>

Select your proficiency languages <br>

English <Input type = "checkbox">
(3)Save the text file with .htm extension.
(4)Open the HTML document in the Internet browser.

(2) Write steps to add a Button to the webpage:

[ The answer ^ - a

(1) Create a new text file.

(2)Write the following HTML tags. ok
<form>

<input type = "button" value ="ok">

</form>
(3)Save the text file with .htm extension.
(4)Open the HTML document in the Internet browser.

(3) Write steps to add a Text input field - o

Name:[
to a webpage:
[ The answer ^
''
(1)Create a new text file, using Notepad program.
(2) Write the following HTML tags within the <form>.
<form>
Name:
<lnput type = "text">
</form>
(3) Save the text file with .htm extension.
(4)Open the HTML document in the Internet browser.

125
 Practical tests^ 2 AiFaez
(4) Write steps to add a Password field to the webpage:
r The answer j r-
Password; I »f»»f»

(1) Create a new text file, using Notepad program.

(2) Write the following HTML tags within the <form>.
<form>
Password:
<Input type = "password' '>
</form>

(3) Save the text file with .htm extension.

(4) Open the HTML document in the Internet browser.

(5) Write steps to add a send button "Submit", to the webpage:

a

, The answer j
(1) Create a new text file.
;[ Sutoit Query I
(2) Write the following HTML tags.
<form>
<form action = "process.php">
<input type = "submit" value="Submit Query">
</form>

(3) Save the text file with .htm extension.

(4) Open the HTML document in the Internet browser.
. B

(6) Add a Radio Button to the webpage:

Male: O
[ The answer ^
Female: %
(1) Create a new text file, using Notepad program.
(2) Type the following code within the <form>.
<form>

male <Input type="radio" name = "a">

female <Input type="radio" name = "a">
</form>

(3) Save the text file with ,htm extension.

(4) Open the HTML document in the Internet browser.
126
 A1 Faez 2 " Practical tests
(7) Add a reset button to a webpage: P

,The answer 1
(1)Create a new text file, using Notepad program.
(2) Write the following HTML tags within the <form>.
<form>

<input type = "reset" value="Reset">

</form>

(3)Save the text file with .htm extension.

(4)Open the HTML document in the Internet browser.

(8) Determine places of written JavaScript inside HTML file.

<html>

(1)
<head>

(2)
</head>
(3)
<body>
(4)
</body>
</html>

(9) Create a webpage that displays a dialogue box with message

"welcome" when loading.
Meutg« from
^ The answer ^
/K Welcome
(1)Create a new text file, using Notepad program.
(2)Write the following HTML tags.
< Script> :
alert("welcome");
</ Script>
(3)Save the text file with .htm extension.
(4)Open the HTML document in the Internet browser.

127
 '-¥2:1

^actical te^s 2 AiFaez

(10) Create a webpage displays "Computer subject is my favorite
text as its content.

r The answer 1
(1) Create a new text file, using Notepad program.
(2) Write the following HTML tags.
< Body>
< Script>
Document.Write ("Computer is my favorite");
</ Script>
</ Body>
(3) Save the text file with .htm extension.
(4) Open the HTML document in the Internet browser.

(11) Write the general formula to create a function named "FI":

. The answer 1
function fl() {
Code to be executed

(12) To test conditional expression, we use if statements, write the

general formula of condition expression:

The answer J
If (Conditional expression)
{ Statements to be executed if the result of the expression is true }

128
AlFaez 2. luestions

^ First: Write scientific concept for each of the following:

O It is computer programs that collect personal information of the
users without their consent.

© A language isn’t enough to make a confirmation to the data entry.

® It is a small program that can spread itself to infect the computer
and programs.

O Used for displaying a dialogue box with message to the user.

© By which the user can select one of a limited number of options.
^ Second: Matching from column(A)for column (B):
Column (A) Column (B)

A
used for displaying text
1 <Input type = "checkbox">
within a webpage contents.

To add a Checkbox to the

2 <Input type = "password"> B
webpage.

To check if the user entered

3 <Input type = "button"> C
a non-numeric data.

To add a button to the

4 Documentwrite D
webpage.

To add a Password input

5 if(isNaN(forml.textLvalue)) E
field to the webpage.

4^ Third: Put(>^)for right answer and (x)for wrong answer:

O If total = 300 then the result of(total >= 300) expression leads to
true. ( )

129
© Adding a value attribute to the button element for is called a
function. ( )
© We use a onclick” attribute for writing a text on a button.(
a

O For reading a textbox content using JavaScript language, you

should give a name to the <form> element and give a name to the
textbox. ( )
0 JavaScript statement is written inside <scriptx/script>. ( )
^ Fourth: Choose the correct answer from [a],[b],[c], or [d]:

O Each HTML statement must end with

[a]onclick [b]{ }
[c]"Semi-colon”(;) [d] JavaScript

© A language which used to make a confirmation to the data entry,

[a] onclick [b]{ }
[c]"Semi-colon"(;) [d] JavaScript

© The function is called by the attribute.

[a] onclick [b] Textbox input field

[c]"Semi-colon"(;) [d] JavaScript
O Allows visitors of the web page to enter text data, using the
keyboard,
[a] Length [b] Textbox input field
[c] password input field [d]JavaScript
© Attribute" used to detemiine the number of characters

within the text field,

[a] Length [b] Textbox input field

[c]"Semi-colon"(;) [d] JavaScript

130
 ft ■■
Text
ir
II II
Password
<form>
¥I II
Radio

II
<iiiput Type = Checkbox"! Name="aname" Value = "atext"
II II
Button
The name alftyle specifies The value attribute
</form> a name used to identify the spedfies the caption for
II II
Submit a button

II II
Reset /A 'S
Exam Night 2 AiFaez
II

*The First unit*

- Create interaetive webpage through whieh you can enter your

personal data through a From data input elements.
Form: To create a form use <form> .... </form> tag.
- Through the Form we add a group of elements to the webpage
such as buttons and fields, which used to enter data, into interactive
webpage using the HTML language in order to send to the website
to storing.
jAI Faez in computer!
Add Name field
- Text data field, allows to the user to enter a string or text data, using
keyboard.
- To add a textbox for enter a student name to a webpage, use the
following tag: < input type = "text">

* The following steps for adding a textbox to a webpage:

(1)Create a new text file, using Notepad program.
(2) Write the following HTML tags.
<form>
Name:
<input type = "text">
</form>

(3) Save the text file with .htm extension.

(4)Open the HTML document in the Internet browser, webpage will
be shown.

Add Password field ♦

I
- The password field, use to enter the password to a webpage via
keyboard.

132
- Shows the symbol(*) when you type a password in order to hide the
true password components.
- To add a password field to the webpage use the following tag:
<input type = "password">
- You can add the confirm password field, by follow the above steps
to create the password field.
Add a Radio Button field O ®
- A radio button, by which the user can select one of a limited number
of options such as your gender(male / female).
- To add a radio button to the webpage, use the following tag:
< input type = "radio">
# Note: There is a problem, you can select the two radio buttons
(male / female) at the same time, and this a wrong .
- You can prevent the user from choosing all available options, using
the name attribute.

- Add name attribute to all available radio buttons with the same value

- Give the name, such as "a" for all available radio buttons.
<input type = "radio" name = "a">

'k Subject (2):

Add a checkbox input field ¥ IZl [Z1
- A checkbox input field by which the user can select more than one
choice.

- To select your proficiency language(s), use a checkbox.

-To add a checkbox to the webpage, use the following tag:
<Input type ="checkbox">
Add a button input field
- A button is used to performs a specific task. The user can click on it
to achieve or execute JavaScript function such as clear or
save entered data within a form.

133
Exam Night 2^aez
- To add a button to a webpage, use the following tags:
< Input type = ’'button">
- In the following code, we will used attribute "value" to assign
caption to a button "ok". E Ok 1
<input type = "button" value ="ok">
- There are three types of buttons, that can be add to a from;
(1)Button: used to perform a specific task.
(2)Submit: used to send data.
(3)Reset: used to clear data.
- Submit button: is used to send form data, which you have
entered using the form elements to another webpage, assigned by
action attribute value of the Form.

Submit button: The user click this to submit the form data to
another webpage assigned by action attribute value of the Form.
- To add a Submit button to a webpage, use the following tags:
<input type = "submit"> I SubmilQuety
- Reset button: is used to clear all data fields, which you have
entered and a return to the default values of the controls.

-To add a reset button to a webpage, use the following tags:

reset
<input type = "reset">
-k Subject (3):
Control Code Action

Through the Form we add a

group of elements to the web
Form <form> ... </form> page, used to enter data, in
order to send to the Web site
to storing.

Gives ability to the user to

Textbox <input type="text"> enter a string or text data via
keyboard.

134
 Control Action

As the same as text field but

Password <input (*)symbol will be displayed

type="password"> instead of characters to
secure a password key.
Number <input type="number”> To input numeric data.

Used to select only one

Radio button option (alternative) from a
<input type="radio"> limited number of options
such as (male/female).
Used to select one or more

Checkbox <input option (alternative) from a

type="checkbox"> limited number of options at
the same time.

Used performs a specific task

Button
such as load a function, or
<input type="button"> store your data, or delete
your data.

Used to send your data,

Submit which you have entered
<input type=”subniit"> using the form elements to
another webpage.
Used to clear all data fields
Reset <input type="reset"> to its original state.

* The Second unit *

•k Subject (1):
- To confirm that the entry data is correct; you will need to add a
JavaScript statements to your webpage document.
* HTML language isn’t enough to make a confirmation to the data
entry.

JavaScript fundamentals:
(1)JavaScript commands and instructions are called Statements.

135
 Exam Night 2 AiFaez
(2)JavaScript commands and instructions (Statements) are written
within HTML tags.
(3)JavaScript statements are written inside <script> </script> tag.
(4) Each statement must end with a semi-colon (;) character.
(5) JavaScript language is case-sensitive, so the letter case (smaller
capital letter) must be considered while writing JavaScript
statements.

Places of written JavaScript inside HTML file, at the head of

webpage and in the body of webpage
Alert()statement
- Alert statement used to display a message within a message box to
pay attention for reading. Or alert statement used for displaying a
message via a dialogue box.
-To display the message box, we use the following command:
alert ("the message");
- The message must written within quotations marks (" ").
- Next steps to create a webpage that displays a dialogue box with
message "welcome" when loading.
(1) Create a new text file, using Notepad program.
(2) Write the following HTML tags.
< body>
< script>
alert ("welcome");
</ script>
</body>
(3) Save the text file with .htm extension.
(4) Open the HTML document in an available internet browser.

Document. Write(...) statement

- Document.Write statement is used for displaying text within a
webpage contents, on the web page itself

136
 AlFaez 22 »y»;:
Exam Night

- The following steps to create a webpage displays "computer and

information technology subject" text as its content.
(1) Create a new text file, using Notepad program.
(2) Write the following HTML tags.
<body>
<scnpt>
document.Write ("computer and information technology subject");
</script>
</body>
(3) Save the text file with .htm extension.
(4) Open the HTML document in an available internet browser.

» Subject (2):

* All JavaScript statement within <script>...</script> tag

implemented automatically.
*
If you want JavaScript statements within <script>...</script> tag to
be implemented when an event occurs(such as button click), you
should use a function.

* Function is JavaScript statements grouped together in a named block

and perform according to calling it, and we should give it a suitable
name refer to its job.
- Next steps to create a function;
(1) Write word function and followed with its suitable name.
(2) Write a group ofJavaScript statements between curly
brackets as shown in the following:
function function-name(){
Code to be executed
}
(3) To implement any function, first you must call it.

137
H
Exam Night 2 AiFaez
- Next steps to call any function:
[1] Write an HTML tag for displaying a button within webpage.
<input type="button'>
[2] Write an 'onclick' attribute to this button.
<input type=’'button" onclick= >
[3] Write a funetion name as the value of that attribute (onclick).
<input type=''button" onelick="function name you need to caH">
[4] Funetion can be executed when a button clieked.
<input type="button" onclick='’country( )" value="cliek me">

★ Subject (3):
* JavaScript statements are being exeeuted one by one.
* Branehing is exeeute or non-exeeute some of JavaScript statements
aeeording to eondition expression result.
* To eheek the eondition expression, we will use IF statement.
Branching IF statement is written as the following:
if(condition expression)
{ Statements to be executed if the eondition result lead to true }
- Condition: is expression that must be evaluated first and lead to
true or false.

- If the result of the expression is false, the statements between {}

curly brackets will not be executed.
- If the result of the expression is true, the statements between {}
eurly braekets will be exeeuted.

★ Subject (4):
- We use JavaScript language to set an interaetive webpage that
validates your entered data.

138
 AlFaez
fiBSfiS
i'tjpMfciit.;.

Operator Description
Equal to.
I
Not equal.
I
Not equal value or not equal type.
> Greater than.
>=
Greater than or equal to.
< Lass than.
<=
Lass than or equal to.
- Data validation methods:

* Second: Defining the minimum allowed length for the input field.
* Third: Matching the data entered in the two fields.
* Fourth: Prevent the user from entering type ofdata that different of
field data type.
* First: Required Field(Do not leave empty field):
- If submit button clicked without typing student name, an alert box
will be is played to inform us that this field is required.
(1)To add a Form element to webpage, you can use the following tag;
<form name="form1 action="required1.htm">
- The name attribute specifies a name used to identify the form.
<form name="form1

- The action attribute defines the action to be perfoimed when the

form is submitted. Normally, the form data is send to a webpage on

the server when the user clicks on the submit button.

action="required1.htm">

(2)To add a textbox to webpage, you can use the following tag:
<input tvpe="text name="text1">

- The name attribute specifies a name used to identify the textbox.

hame="text1">

139
ti
Exam NigHt 2 AiFaez
(3) To add a submit button to webpage, you can use the following tags
<input type=''submit" value="send onclick-'return f1

- Where:
- The value attribute specifies the caption for a button.h/alue="send"
- The onclick event occurs when the user clicks on a button.
- Specifies the JavaScript statements or function name(here the
function is fl()) to be executed. onclick-’return f1()";

(4) To create fl() function that will be called or executed on button

clicked, we use the following code. [function f1(){
(5) To check the content oftextbox that is found in the Form forml
through the value attribute.
(forml.text1 ¥value=="")l
- To check that the field was not left empty, we use the following
condition; if (forml.text1.value==" "){
(6) To display the alert box with "required field";
alert ("required field");
return false;
(7) To return false if the textbox was left empty.

(1) To verification if the entered data was less than the minimum
allowed length (8 characters), we use the following tags;
if (forml .text1 .value.Iength<8 [{

(2) To comparing the content of the two fields, in the case of

mismatch the contents show a warning message, we use the
following tags;
if (forml.text1.value!==form1. Text2. value
(3) To prevent the user from entering type of data that different of
field data type we use the following tags;
if (isNaN(form1 .text1 .value

14a
 AlFa 2
ez

- Verification process of data entered can include:

(1)Prevent user from leave textbox empty (required field).
(2)The minimum length allowed for the password field is 8 characters
(3)Matching the data of the two password fields.
(4)Prevent user from enter a non-numeric data into the age field.

- It is a new version of the HTML language, appeared in 2014 and has

many improvements that are evident through the use of a range of
new tools to facilitate the idea of designing a webpage.
- The Internet browser programs such as (google chrome,internet
explorer, Firefox) do not fully support the implementation of the
new tags of HTML5.
- There are many new Form tools used for input data such as:
(1)Color input field.
(2)Date input field.
(3)Number input field.
(4)Required attribute of text input field.
(1)Through color input filed, the user can select a color as his input
data from a color picker.
- To add a color picker as an input field to the webpage, you can use
the following tag: <input t3q)e = "color">
(2) Date input field by which the user can select a date value from
date picker (calendar).
- To add a date picker as an input field, you can use the following
tag: <input type="date">

(3)By creating a numeric input field, you can also set restrictions
on what numbers are accepted to a certain range.

141
S,

/
Exam Night ^aez
- To add a number as an input field, you ean use the following tag:
<input type=''subtnir>
(4) If required attribute is added to any input field such as (text,
password, date, number, checkbox, radio, ... etc.),
- The browser forces the user to input this field because it is a
required field and the form submission is not completed.
- To add a required attribute to an input field, you can use the next tag
<mput type="text required">
<input type="submit">
* The Third unit *

* The internet is one of the most important means of communication

in all fields.

* It is important to focus on the dangers that result from this usage.

* There are vary dangers such as virus infection, which destroy the
system data, attack to spoil the user files or harm or blackmail,
deploy identity of personal data theft and other types of dangers.
* Many people do not know that some information which may be
considered useless are so important for others.
- Some common idioms used on the internet:
(1)Identity theft:
- It is the impersonate of someone or using his name or any
information concerning him for stealing him or theft of others.
(2) Malware:
- It is parasite programs that sneaks to backdoor computer systems.
- The name is derived from Malicious Software.
- To protect your system against them, use antivirus programs and
update them continually.
(3) Spyware:
- It is computer programs that collect personal information of the users
without their consent.

142
 AlFaez 2
u
Exam PsTight

- To protect your computer, you must use anti-spyware programs that

detect programs like spyware, adware and files that control your
internet browser.

(4) Virus;
- It is a small program that can spread itself to infect the computer and
programs.

(5) Secret codes;

- They are all the personal data that must not be shown to everyone on
the internet like: username, password or mobile phone number.
- Some of the important guideline to better internet Safety;
(1)Keep your username and password secret.
(2) Think well before publishing your personal photo or sending text
or sound files or videos on the internet.
(3) Before publishing anything ask the person before publishing his
photo or sending their phone number or email address to other
people online.
(4) Do not reply to unknown messages or from unknown people.
(5) Do not add people you do not know to your friend list.
(6)Do not send messages when angry.
(7)Not taking any step towards illegal operation is kind of hiding the
wrong doer.
(8)Learn how to ban people from reaching chat box and print or
screenshot them to be easy for parents to take the right step against
them.

(9)Learn how to ban disturbing messages.

(10)Know well that online chat is not personal, some others may be
recording or printing these chats and (publish them later on).
With the best wishes for success
Al Faez

143
 v9-ai
1
i
1 u J MJ

uter
JnfcFinalicn Teclinclctfy and ccmmanicoficn
r#ei!
9
'VI;

ilii
—,V^, .- .MB* ^ ^

Preparatory
Second Term

uUS^I 54 UIm
<]
CompUect by
Exam Models
School Tests

r
r

J
'\ ^

j
ri
 iiiiKpAlFaez
iiiiij

Exam model djiiAii sjiji

First: Put the suitable concept in it's place:

htm - Function -<script></script> -
Java script - <input type ="text">
O To add student name field, write code.

0 extension is used to save a webpage with html code.

0 is a set of orders that will be executed when we call

it, and we should give it a suitable name refer to its job.

O statements are written inside <script> </script>.
0 Java script statements which are written inside are

automatically executed.
^ Second: Put or(x):
O From the steps of creating function, type the command
function then write a suitable name. ( )
0 Java script statements which are written inside <form>
</form> are automatically executed. ( )
0 To create a function, type the code that will be executed
between(## ). ( )
O HTML statements which are written inside <script> </script>
are automatically executed. ( )
0 We call the function in order to execute its order when we
press on the button command. ( )
0 Shows the symbol(@)when you type a password in order
to hide the true password components. ( )
0 Property value added to the button to call a function by
pressing the command button. ( )
«
2 t
AlFaezill

^ Third: Choose from column(B)what suitable column (A):

Column (A) Column (B)
1 To add checkbox field A If
2 If statement, begin with B <input type =”checkbox”>
3 We use text box tool C conditional expression
Execute or not execute
4 D is controlling input data.
orders or statements
5 Verification of data entered E to enter the degrees.

^ Fourth: Write the scientific term for the following sentences:

O They are all the personal data that must not be shown to
everyone on the internet like; username, password or mobile
phone number.

© To comparing the content of the two fields.

© It is the impersonate of someone or using his name or any
information concerning him for stealing him or theft of others.

2 1
Exam model Jp 5jlij'

3k First: Put(^)or (x):

O You can create a function without writing a term "function'^ )
© Save the text file which written HTML language with txt
extension. ( )
© If statement, begin with “function”. ( )
O In the case of(X < 20)the conditional (X > 20) will be verify
and the result of condition is true. ( )
© To open an information page we use Internet Explorer
program. ( )

d}
 iAlFaez
^ Second: Choose the correct answer between the brackets:

O The attribute represents an event that makes the button

respond when a mouse clicks and executes a specific code,
(function - onclick - name - False)
© A language used to develop interactive web page to register
data in it is (java script- html - php - all of the above)
® The statement used to display a message inside a window
IS (alert - document.write -java script - html)
O Input field used to execute task or call JavaScript function. ^
(Text - Reset- Submit - Button)
0 If you want JavaScript statements to be implemented when
an event occurs (such as button click), you should use a ....
(function - onclick - Spyware - False)
^ Third: Write the scientific term for the following sentences:
O Input field used to select more than one choice.
0 Button used to send data that have been entered into the
form to a specified webpage.
0 Input field in which you can type any text via keyboard on
a webpage.
O Attribute used for display a text on the button.
0 Statement which used to display a message within the webpage.
5k Fourth: Type I agree or disagree in front of the following
sentences:

o You can publish photos of others or show their phone number.

© When online do not answer any unknown messages.
0 Not taking any step against any harm on the internet is kind
of hiding wrong doers.
«
D
 General Tests

Exam model (jMrU jjft ftjljj

^ First: Choose from column(B) what suitable column (A):

Column (A) Column (B)
1 The function is called by the A action.
property
by use antivirus
2 The form name is given form B programs and update
through the property
them continually.
3 Property you send the entered C by use anti-spyware
data to another Web page. programs.
4 Malware can be avoided D name.

5 You can make up for spyware E onclick.

^ Second: Put the suitable concept in it’s place:

true - False - conditional expression - function name - function
o is a set of commands executed when calling it and
must be given an appropriate name.
@ If(X = 18: N = 14)the output of the following conditional
expression (if X < > N) is
® If(X = 18)the output of the following conditional expression
(if X> 20) is
O Onclick property value is required invoked,
e is part of the statement configuration (if) and his
output either Yes or no (true or false).
^ Third: Put (v^) or (x):
O If you want JavaScript statements to be implemented when
an event occurs (such as button click), you should use a text
box. ( )
D— —
QD—
 iAlFaez
@ Select the text inside the text box by property name.( )
® The secret codes is a person iirpersonates someone else's
name for stealing or stealing others. ( )
O isNaN property specifies the number of characters entered
in the text box. ( )
0 return property' '
»
sed to receive the value due to

implement the fui.-^iion. ( )

^ Fourth:(a)Mention two cases of data validation cases entered
into webpage:
O 0
(b)Write the scientific term for the following sentences:
O Property that is used to write the word on the button.
0 Sentence is used to test for a certain condition.
0 Programs are hostile or spammed that sneaks into your
computer software systems.

4 Exam model y

^ First: Complete the following from between the brackets:

(checkbox - button - Text data field -*- Form)
O Through the we add a group of elements to the
webpage such as buttons and fields,
0 allows to the user to enter a string or text data
using keyboard.
0 Shows the symbol( )when you type a password in
order to hide the true password components.
0 To select your proficiency language(s), use a ..
0A is used to performs a specific task.
AlFaezi

^ Second: Put(v^) or (x);

O There are three types of buttons, that can be add to a from.
( )
@ We use value attribute to send the entered data to another
webpage. ( )
© Considered Malware computer software that collects
personal information from users without their consent.( )
O Statement alert(), is used to test the conditional
expression. ( )
© JavaScript commands and instructions (Statements) are
written within HTML tags. ( )
^ Third:(a) Write the scientific term for the following sentences:
O It is a small program that can spread itself to infect the
computer and programs.
© Computer software that collects personal information from
users without their consent.

© Refer to software or spammed or disturbing sneaks a hidden

computer system.
O Intended personal data belonging to any individual who
deals with information and communication technologies,
such as a user name and password,
(b)Re-arrange next steps to add a radio field to the webpage:
( )Create a new text file.
( )Save the text file with .htm extension.
( )Open the HTML document in the Internet browser.
( )Write the HTML tag: <input type = "radio">

7l «
 AlFaez

Exam model 5 JUi SjU!

^ First: Put(^)or (x):
O Text box used to clear all previous data from all input fields.
( )
0 Secret codes are computer programs that collect information
about users to control or watch them. ( )
® If you want JavaScript statements tc be implemented when
an event occurs (such as button click), you should use if
statement. ( )
O Through radio button field the user can select one of a
limited number of options. ( )
0 To add checkbox field to a webpage use tag:
<input type = "checkbox"> ( )
^ Second: Choose the correct answer from between the brackets:

o used to execute task or call JavaScript function,

(submit - resert - button - text box)
0 are small harmful programs that can spread and
harm computer and programs.
(Identity theft - malware - spyware - Virus)
0 To create a form use tag.
(<form> - <html> - <script> - <body>)
o will be added which give ability to the user to enter a
string or text data via keyboard.
(text box - radio - checkbox - number)
0 Secret codes are the personal information for technology
users which must not be shown to anyone like
(Password - User name and password - Username - Virus)

8
AlFaezIS
^ Third: Put the suitable concept from the table in it’s place:
function Identity theft radio button form submit

O To choose your gender you can add to a webpage,

o used to send all form data to other webpage.
e is JavaScript statements grouped together in a named
block and performed according to call it
O Impersonation of someone or using the personal information
of someone or stealing them is called
0Through you can add a group of other elements to a
webpage such as buttons and fields used for data entry in
order to send these data to storing.
^ Fourth: Write scientific concept for each of the following:
O Used to test the conditional expression.
0A language used to verification of data entered.
0statement used for displaying a dialogue box with message
to the user.

O Execution or non-execution of orders based on a certain

condition.

0Statement used for displaying a text within the webpage

contents.

¿ Exam model 1jiu »jjjj

^ First: Complete the following sentences:

O Through button user click it to submit the form data
to another webpage assigned by action attribute value of the
Form.

© The ... name should preferably indicate its function or content.

Q
i AlFaez

@ Of photo data verification , ,

O .. is used to receive the value due to implement the function.
© Property given the name of the form to deal with from within
code

^ Second: Put(^)or(x):
O Through reset button user click it to clear all data fields to its
original state. ( )
O Function is a set of commands that executes without having
to be called. ( )
® JavaScript commands and instructions (Statements) are
written within HTML tags. ( )
O To add Submit button to a webpage use <input type = "">
tag. ( )
0 Onclick property used to write the text that appears on the
button. ( )
^ Third:(a) Write the necessary codes to do the following:
O Declaring a function as (school).
0Call the function (msg)to show the text welcome message
box when you press the button show.

© Make sure the number of characters in a text box (text1)

password so that not less than the number of characters
entered for the six characters (6 characters),
(b) What is the result of the implementation of the following
codes?

O document.writeC'My School")}
© Alert("l love my school")}
#
OD
AlFaez^ General

Exam model Sj|j|

^ First: Put the suitable concept in it’s place:

(Virus - action - branching - JavaScript - name )
O Need if the execution or non-execution of orders based
on a certain condition.

® .... is a small program that can spread itself to infect the

computer and programs.
® The form name is given form through the attribute
Owe use attribute to send the entered data to another
webpage.
O Using .... statements, we can verification of data entered.
^ Second: Write the function of the following commands:
O alert ("welcome");
O <input type="password">
® lf(form1.textbox.value=="");
O function f1(){
O return false;
^ Third: Put or (x):
O The check if the entered data was less than the minimum
allowed characters, from data validation methods. ( )
O We add a text data field for enter a student name to a
webpage. ( )
® Submit button is used to delete all data fields, which you have
entered and a return to the default values of the controls.( )
O To check if the user entered type of data that different of
field data type, we can use the HTML tags. ( )
©To check that the field is not left empty, we can use the
following condition: if (form1.text1.value=="") ( )

Gi
 General Tests iAlFaez
8 . Exam model Lijla djlJj

First: Put(^)or (x):

O A function is a set of commands that are executed without
having to be called. ( )
O Online talk or chat are protected and cannot be copied or
printed. ( )
® Not taking any step towards illegal operation is kind of hiding
the wrong doer. ( )
O In Java Script language do not allow the user to leave empty
fields. ( )
0 Spyware: is a small program that can spread itself to infect
the computer. ( )
^ Second: Choose the correct answer from brackets:

O Attribute used to type text appears on the button.

(Name - Type - Value - Action)
0 Placed to show the end of statement in Java Script.
(Comma (,)- Semicolon (;)- Quotation mark("")- Nothing
from the previous)
0 Means the execute or non-execute of Java Script
statements according to the condition.
(value - alert -function - branching)
O Function used to test the contents of a text box, whether
numeric or non-numeric:

(alert - isNaN - if - function)

0 From data validation forms: (Do not leave empty field -
Match password - Specify password length - all of the above)
^ Third: Complete the following sentences:
O Attribute .... is sending data entered into another webpage.

12}
AlFaez m General Tests

@ Malware can be avoided by

© If the(X = 18 )is the result of the condition expression
(lfX>20)is
O The name of the form is given by attribute
© Secret codes are the personal information for technology
users which must not be shown to anyone like
5k Fourth: Write the scientific term:

O A statement will be used to check the condition expression.

© It is computer program that collect personal information of
the users without their consent.

© It is command used to receive feedback value from the

implementation of the function.
O Someone impersonates another person's name for stealing
or stealing others.
© Extension is used to save a webpage with html code.

9 ¿ Exam model
5k First: Choose from column (B) what suitable column (A):

Column (A) Column (B)

1 To add text box A

JavaScript statement is written
inside.

2 Static websites B <input type ="text">

To add password C
3
field Written using HTML language.

4 If statement D <input type ="password">

A statement will be used to check
5 <script> </script> E
the condition expression.

»
13j
 2J AlFaez
^ Second: Put (v^) or (x):
O You can publish photos of others or show their phone
number online. ( )
® When online do not answer any unknown messages.( )
©To match the password values, we can use the condition
form1.text1.value=="". ( )
© We add action attribute to <form> element for specify the
webpage to which the submitted data will be sent. ( )
©To create f1()function, we used: function f1(){ ( )
^ Third: Put the suitable concept in it's place:
Name - Java Script Language - true - Action - Form
O Attribute determines the process that will be executed when
you press the submit button
© Property used to prevent the user from choosing or selecting
more than one option in the radio field
© is used to create an interactive websites in which the
user can enter data.

O With a element, you can add a group of other elements

to a webpage such as buttons and fields used for data entry
in order to send these data to storing.
© If (total = 100)then the result of (total > = 100)expression
leads to

^ Fourth: Re-arrange the following steps to add textbox to

the webpage:
'( )Save the file with .html extension.
( )Create a new text file.
( )Open the file using internet browser.
( )Write: <input type ="text"> inside the <form> tag.

[J4
AlFaez il
I
Exam model:
^ First: Choose the correct answer between brackets:

O Property used to prevent the user from choosing or selecting

more than one option in the radio field.
(onclick - name - value - text)
© The attribute represents an event that makes the button
respond when a mouse clicks and executes a specific code.
(onclick - name - value - text)
© field is as the same as text field but (•) symbol will be
displayed instead of characters to secure a password key.
(Text box - Radio - Password - Submit)
O Execute or non-execute some of JavaScript statements
according to condition expression result.
(If- Function - Condition expression - Branching)
0 It is not enough to use language to verify the validity of
the data entered into Web pages.
(html -java script - text - All of the above)
^ Second: Put(v^) or (x): ‘
O Not taking any step against any harm on the internet is kind
of hiding wrong doers. ( )
0 Online talk or chat are protected and cannot be copied or
printed. ( )
© Prevent the user from leave the field empty, we use
form1.text1.value!==form1.text2.value. ( )
O To return false as a function returned value in the case the
textbox is leaved empty, we used return false; ( )
© In the language of java script there is no difference between
the case of a large or small letters when writing statement
( )

15
General Tests i AlFaez
^ Third:(A)What are the validate data entered into webpage:
o e
6 o
(B): Put the suitable concept in it’s place:
Function -(;)- Reset - htm - alert - <input type ="text">
O To add student name field, write code.

© extension is used to save a webpage with html code.

© The java script statement must be ended with
O If you want JavaScript statements to be implemented when
an event occurs (such as button click), you should use a ....
© used to display a message in a box, which attracts
attention of the user to read it.
© button used to clear input fields from any previous data.

11 Exam model djUl

+ First: Choose the correct answer from between the brackets:

o is a small program that can spread itself to infect the

computer and programs.
(Spyware - Virus - onclick - Length)
© Java Script commands and instructions are called
(Statements - function - Sentences - Secret Codes)
© If(X = 15)the output of the following conditional expression
(ifX> 15) is
(function - onclick - name - False)
O if the condition result lead to , the statements within {}
will be executed. (True - False - All of the above)
©To match the password values, we can use the condition:
((formi.textl .value!==form1 .text2.value)-
(form1.textl.valueJength<8)-(formi.password.value!=-"'))

GD
AlFaez i General Tests
^ Second: Matching from column(A)for column (B):
Column (A) Column(B)
To add a clear button to
1 <lnput type="password"> A
the webpage.

2 B
To add a password input
DocumentWrite("Salah");
field to the webpage.

3 C Check if the password is

<lnput type="checkbox"> less than 8 letters or not.

4
lf(form1.password.value. D
To add a checkbox field to
Iength<8); a webpage.

U E Display "Salah" inside the

<lnput type="reset">
webpage.

Third: Wriite iiiic scieuliffic teritn of the following sentences:

Ol) Field is used so that the user can select one of a limited
number of options such as his gender (male/femaie).
© Attribute used for display a text on the button.
© Button used to send all form data to other webpage.
' To prevent the user from choosing or selecting more than
one option or choice, you can add attribute to radio input field
Input field in which you can type any text via keyboard on a
webpage.
^ Fourth: Put(y^) or (x):
O For reading a textbox content using JavaScript language,
you should give a name to the form element and give a
name to the textbox. ( )
© JavaScript statement is written inside <script>. ( )
© We use a “onclick” attribute for writing a text on a button( )
O The java script statement must be ended with (""). ( )
C '
 I
Fourth:
¥H-TheFirs^ni^ll^l (1) Button (2) HTM L
- Tlte Answer of topic One ¥ (3) Value (4) Checkbox
First:
(5) <Input type="checkbox">
(1) text file/ file (6) Submit
(2) <form> ( 5)Input
(6) /form (7) htm - Answers of school questiong -
(8) Internet browser First:
Second: (l)^(2)x(3)x
(1)x(2)x(3)V(4)x(5)V(6)x Second:
(7)x(8) f (9)x(10)x (1) A button (2) Su bmit button
Third:
(3) Reset button
(1) Form (2) Text box Third:
(3) <input type="text' '> (4) htm l (1)C(2)D(3)A(4)B
(5) <input type="radio">
- Answers of school questions -
- The Answer of topic Three -
First:
First:
(1) Form (1)E(2)C(3)D(4)F(5)A(6)B
Second:
(2) Radio button (3) Textbox
Second: (1)V(2)x(3)x(4)x(5)V(6)V
(1) Text input field, Password input (7)x(8)V(9)/
field - Answer of the First Unit (1 I
(2) Text input field First:
(3) a password key
(1)Checkbox (2) value
(4) Radio input field
Third:
(3) Submit (4) button
(5) Radio button
(1)B(2)C(3)A Second:
Fourth.
(4),(1),(2),(5),(3)
(1)x(2)V(3)x Third:
(1) Checkbox (2) Internet browser
- The Answer of topic Two -
(3) The form (4) Textbox
First:
(5) <input type="text">
(1)>^(2)x(3)V(4)x(5)V(6)x Fourth:
(7) V(8) V(9)x(10) V (1) Add a checkbox field to the
Second:
webpage.
(1)Checkbox (2) button (2) Add a radio button to the
(3) value (4) Submit (5) Reset webpage.
Third:
(3) Add a submit button to the
(1)E(2)C(3)A(4)B(5)D webpage.

«
iD
AlFaez 2
(4) Add a Text data field to the (4)HTML (5) Document.Write()
webpage. Third:
(5) Add a button to the webpage. (1)<scripts> </script>
(2) JavaScript (3) HTML
- Answers of the First Unit(2) ■
(4) Statements
First: (5) All of the previous
(1) Radio (2)Checkbox (6) document.write()
(3)textbox (4)Password (7) alert()
(5)button (8)HTML (9);
Second:
Fourth:(0
(1) <input type="password"> <Script>
(2)Name (3) Radio button alert ("welcome");
(4)value (5)input </Script >
Third:
(2)
(l)text (2)Input <Script>
(3)radio (4) reset (5)type Document.write("computer and
Fourth: information technology subject");
(1)x(2)'4(3)x(4)>4(5)x </Script>
- Answer of the First Unit(31 - Answers of school questions -
First:
First:
(1)C(2)A(3)D(4)E(5)B (1) JavaScript (2) alertC)
Second: (l)name (3)document.write()
(2) Internet Browser Second:
(3)HTML (l)^(2)^(3)x
(4)Submit button (5) Reset button
(6) All of the previous - General revision (March)(1) -
Third: First:
(1)* (2) Notepad (3) value (l)/(2)>4(3)x(4)x(5)x
(4) Checkbox (5) Reset button Second:
Fourth:
(l)alert() (2) JavaScript
(l)x(2)x(3)^(4)x(5)^ (3)HTML (4) semi-colon (;)
(5) Document.write))
- The Seqond Unit • Third:

- Answers of topic One ■ (1)checkbox (2) value

(3)Notepad (4)name
First: (l)^(2)x(3)^(4)x(5)x
(5) Radio button
(6)^a)x(8)x(9)x(10)x Fourth:
Second: (1)JavaScript
(2)Alert)) (3) Semi-colon (;) (1)C(2)D(3)E(4)A(5)B

iD
 2 AlFaez
- General revision (March)(2) - (4) alertC'Egypt") (5) </Script>
First: Sixth:(3),(1),(2),(4)
(l)^(2)^(3)^(4)x (5)x - Answers of school questions -
(6) X (7) X (8) X (9)X (10)^ First:
Second:
(1)function (2)function
(1) Checkbox (2) button
Second:
(3) value (4)Submit
(5) Reset (6) html - htm (l)x(2)x(3)^(4)^

- General revision (March)(3) - - The Answer of topic Three ■

First:
First:
(l)If (3)}
(1)x(2)'4(3)x(4)'4(5)x(6)x
Second:
Second:
(l)x(2)x(3)x(4)^(5)^(6)^
(1) Reset button (2) Fonn
(7) ^(8)x(9)^(10)x
(3)name (4) Radio button
Third:
(5) Button (6) Submit button
(7) Reset button (1)B(2)C(3)B(4)A(5)D(6)D
Third: Fourth:(1) Branching
(1) Java Script (2) alert() (2)IF statement (3) Condition
(3) document.write() (4)condition expression
Fifth:
(4) HTML (5) statement
(6) Difference (7)Notepad (1)Input (2) value ="click me"
(3)onclick (4) value
Fourth:(l)b(2)c(3)a(4)e(5)d
- Answers of school questions -
- The Answer of topic Two ■ First:
First: (l)i^(2)x (1) Branching (2)If statement
(3)x(4)^(5)x(6)x(7)^(8)x Second:(1) x (2)^
Second:
- General revision (April)(1) -
(1) Function (2) Alert (3) </script>
Third:(3),(1),(4),(2) First:(4),(3),(1),(5),(2)
Fourth: Second:

(1) Automatically (2)Function (1)E(2)C(3)D(4)A(5)B

(3){...} (4)onclick Third:
(5)Command button (l)x(2)^(3)x(4)x(5)^
(6)Function (7)name Fourth:(1) alert()
Fifth:
(2) html (3) value (4) Function
(1).htm (2) <body> (3)function (5)"Semi-colon"(;)

ID
 Answer of All Questions
AlFaez 2
- General revision (April)(2) - (3) The onclick event oeeurs when
the user clicks on a button, and
First:(1)text
specifies the function name(fl())
(2)HTML (3)Document.write to be executed.
(4).htm (5) internet browser
(4)To display the alert box with
Second:(1) document.write() "Successful".
(2)reset button (5) To add a command button to
(3) JavaScript language webpage, and the value attribute
(4) Branching specifies the caption for a button.
(5) <script>...</script>
Third:
Third:(1) action (1)D(2)E(3)A(4)C(5)B
(2) The password (3)Button
Fourth: (1)textbox
(4)function (5) A radio button
(2)caption (3) required field
Fourth:
(4) validation (5) value
(l)^(2)^(3)x(4)^(5)x
- The Answer of topic Five ■
- General revision (April)(3) -
First: (l)x
First: (2)/(3)^(4) X (5)^(6)^(7) X
(l)fonu (2)Password field Second:
(3)htm (4)If statement (1)C(2)D(3)B(4)A(5)C
(5)Interactive (6) Branching Third: (1)E(2)A(3)D(4)C(5)B
Second:
Fourth:
(1)D(2)E(3)B(4)A(5)C
(1) Name (2) Text Box
Third:(1)^(2) x
(3) X (4) (5) X (6) X (7)X (8) x (3)Radio button (4) Reset Button
(5)value (6) button
Fourth:
(1) name (2) Text box Fifth: (1)B(2)C(3)A(4)E(5)D
(3) radio button (4) webpage
- Answers of school questions -
- The Answer of topic Four ■ First:

(2) Defining the minimum allowed

First:
length for the input field.
(l)^(2)x(3)x(4)x(5)x(6)>^ (3) Matching the data entered in the
Second: (1)To create fl() function two fields.
that will be called or executed on (4)Prevent the user from entering
button clicked. type of data that different of field
(2) To add a textbox to webpage, data type.
and the name attribute specifies a Second:(1) x
name used to identify the textbox. (2)^(3)^(4)^(5)/(6)x(7)>4

ID
 12 AlFaez
- The Answer of topic Seven ■ - Unit Three A
First: - The Answer of questions ■
(1)text file (2)HTML (3)<fomi> First:(1) (2) x
(4) date (5) htm (6) Open (3)^(4) X (5)X (6)X (7)^(8)x
Second:(4),(5),(2),(3),(1) Second:(1) All of the previous
- Answers of school questions - (2) Virus (3)internet safety
First: (4) Spyware (5) angry
(1)HTML5 (2)required - Answers of school questions -
(3)a number input field First:(1) Identity theft.
Second:(1)b (2) c(3)a (2) Spyware. (3) Virus.
(4) User name and Password
Enswer of the Second Unit(1) (5) A discussion or informational
First:(l)x(2)x(3) V(4)x(5) V website published on the World
Second:(3),(1),(4),(2) Wide Web.
Third:
Third:(l)x(2) V(3) V(4)x
(1)Document.write statement
(2) JavaScript (3)Function - General revision (May)(1) -
(4) Alert statement (5)If statement First:(1) Text input field
Fourth:
(2) Secret codes (3) JavaScript
(1)C(2)A(3)D(4)E(5)B (4) value (5)A radio button
Second:
Answer of the Second Unit (2) (1)D(2)C(3)A(4)E(5)B
First:
Third:(1) V (2) x (3) V (4) x (5)x
(1) value (2) name (3) onclick Fourth:(1)Function
(4) Function name (5)textbox (2) Identity theft (3)"Semi-colon"(;)
Second:
(4)false (5)onclick
(1)x(2)V(3)V(4)x(5)x
Third:(1)B (2) D(3)A(4)E(5) C - General revision (May)(2) -
Fourth:(3),(1),(4),(2) First:(5),(2),(4),(1),(3)
Second:(1)V (2)x (3) x (4)V (5)V
E nswer of the Second Unit (3) Third:(1) E(2) A (3)D (4)B(5)C
First:
Fourth:(1) Malware (2) alert()
(1)V(2)x(3)x(4)V(5)V
Second:
(3)Length (4) html (5) Spyware
(1) name (2) <script></script> - General revision (May)(3) -
(3) JavaScript First:(1)d (2) c(3)e(4) b (5) a
(4)form 1.tl.value (5) Function Second:(1) x (2) x (3) V (4) x (5) x
Third:(3),(4),(1),(5), (2) Third:(1)Identity theft
Fourth:(1)C(2) A (3)E(4)B (5) D (2)HTML (3) Value

22
jAlFaez A
(4) Malware (5) <script></script> [B](1) value
Fourth:(1) b(2) a(3)c (4) d (5)a (2) if statement (3) Malware
*&*
- (4) 4jUI (p396 6)-
* Answer of the Model Exams * First: (1)Fomi (2) Text data field
(3)* (4)checkbox (5) button
Second: (l)'^ (2) x (3) x (4) x (5)^
First: (1) <input type ="text"> Third: [a] (1) Virus (2) Spyware
(2) htm (3)Function (4) Java script (3) Malware (4) Secret cods
(5) <script></script> [b] (1),(3),(4),(2)
Second: (1) V (2) x (3) x (4) x
(5) V (6) X (7)X
- (5) 4 jita 4ji4i (page 8)-
Ttiird: (1)B(2) A(3)E(4)C(5)D First: (1) X (2) X (3) X (4) (5)
Fourth: (1) Secret codes Second: (1) button (2) Vims
(2) (3) <form> (4)text box
if(form1.textl.value!==form1.Text2.value){ (5) User name and password
(3) Identity theft Third: (1) radio button (2)submit
IK> (3)flinction (4) Identity theft (5) Form
Fourth: (1) If Statement
First: (1) x (2)x (3) x (4) x (5) V (2) JavaScript (3) alert();
Second: (l)onclick (2)java script (4)branching (5) dociimi at.write
(3) alert (4) Button (5)function
Tlord: (1) Checkbox (2) Submit (6) I 4jij( (page 9) —
(3) Text data field (4) value Firrst: (1) submit (2)function
(5) document.write (3)- Do not leave empty field.
Fourth: - matching Password.
(1) disagree (2)agree (3) agree - Specifies the password length.
(4)return (5) Property(name)
- (3) j?* 4^141 (page 5)^ Second: (1)^(2) x (3)^(4) x (5) x
First: (1)E(2)D(3)A(4)B(5)C Third: [a] (1)function School( ){
Second: (1)function (2)tme (2) <script>
(3) False (4)function name
<body>
(5)conditional expression
<input type="button" onclick="msg()'
Third: (l)x(2)x(3)x(4) V(5) V
name="show">
Fourth:
lAI Cases of data validation are: function msg(){
(1) Leave the data field empty. alert("Welcome"):}
(2) Define the minimum allowed </script>
length for the input field. </body>

» 23
 AnsweriftfAII Questions 2 AlFaez
(3)if(form1.text1 .value.Iength<6)
- (9) (page 13)-
[b](I)Show the text "My School"
within the webpage. First;(i)B(2)C(3)D(4)E(5) A
(2)Show text ("I love my school") Second;(1) x (2)^(3) x (4)^(5)^
inside the text box within a Third:(i) Action (2) Name
message. (3) Java Script Language
(4) Form (5)tmc
- (7) (page 11)- Fourth:(3),(1),(4),(2)
First:
- (10) (page 15) -
(1) branching
First:
(2) Virus (3) name (1) name (2)onclick
(4) action (5) JavaScript (3)Password (4) Branching (5) html
Second;(i)/(2)x(3)x(4)^(5)X
Second:(i) Displays a dialogue box Third:
with message "welcome".
1^1 Cases of data validation are;
(2)To add a password input field to
(1) Leave the data field empty.
the webpage. (2) Define the minimum allowed length
(3) Check if the textbox content for the input field.
empty or not. (3) Matching the data entered in the
(4)To create a function named fl() two fields.
that will be called or executed on (4) Prevent the user from entering type
button clicked. of data that different of field data type.
(5) To return false if the textbox [B](1) <input type ="texf'>
was left empty. (2) htm (3)(;) (4)Function
Third; (5) alert (6)Reset
(1)V(2)V(3)x(4)x(5) V
- (11) (page 16) -
- (8) (page 12)-
First:(1) Vims
First:
(l)x(2)x(3) V (4)^(5) X (2) Statements (3) False (4)Tme
Secon
(5)
(1) Value (2) Semicolon (;) formt .textt.value!==form1.text2.value
(3) branching (4)isNaN Second;(i) B (2)E(3) D(4) C(5) A
all of the above Third:
bird:
(1) Action (1) Radio button (2) Value
(2) use antivims programs and update (3)Submit(4) Name(5)Text data field
them continually. (3) False Fourth: {[)^(2)^(3) x (4) X
(4) Name
(5) Username and Password
Fourth: With the best wishes for success

(l)If statement (2) Spyware A1 Faez

(3) Return (4)Identity theft (5)htm