Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
250 views

ICT Literacy Training-JavaScript Module

This document provides an outline of topics for an introduction to programming and HTML course. It includes sections on HTML basics like document structure, text formatting, lists and links. It also covers JavaScript topics such as variables, operators, control flow and conditional statements. Sample coding activities are provided to reinforce lessons on manipulating text, accepting user input, performing calculations and controlling program flow.

Uploaded by

Jonas Reduta Cabacungan
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
250 views

ICT Literacy Training-JavaScript Module

This document provides an outline of topics for an introduction to programming and HTML course. It includes sections on HTML basics like document structure, text formatting, lists and links. It also covers JavaScript topics such as variables, operators, control flow and conditional statements. Sample coding activities are provided to reinforce lessons on manipulating text, accepting user input, performing calculations and controlling program flow.

Uploaded by

Jonas Reduta Cabacungan
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 10

Topic Outline

1. Introduction to Programming
2. Introduction to HTML
3. Document Organizer
4. Text Formatting
5. Using List
6. Image and Links
7. Tables
8. Introducing JavaScript
9. Displaying Messages
10.
HTML Tags & Escape Characters
11.
Data Types and Variables
12.
Expression and Operators
13.
Controlling the Program Flow
14.
Decision Making in JavaScript
15.
Using If/Else
16.
Using Nested If
17.
Switch Statement
18.
Using Loops

Introduction to HTML
The Web consists of a worldwide collection of electronic
documents. These electronic documents are called the web
pages. It can contain text, images, sounds, video and
hyperlinks.

Hyperlinks are also known as hypertext, are built-in


connection to another related web page.
A collection of related webpage that can be accessed is
called a Web site. Each site contain home page which is the
starting page for a Web site. The home page is similar to a
book cover or a table of content for the site.
HTML is the primary language used to create Web pages. It
stands for Hypertext Markup Language.
Mark up is the process of inserting formatting instruction to
the document. The markup process comes from the days
when book and magazine publishing people made special
marks on their authors manuscript to tell typesetters how to
format the text. This idea is similar in creating HTML
document wherein formatting instruction are inserted in
various parts of the document.
Types of HTML Command / Tags
Empty tag
Containers tag
Basic Structure of HTML document
<html>
<head>
<title> Title of the page </title>
</head>
<body>
</body>
</html>

Document Organizer
Information in the internet is displayed in different size to
identify the hierarchy of their importance.
Size
Paragraph

Text Formatting
The Web uses the RGB color model. Originally HTML uses
256 colors; however, there was a problem in consistency in
which these colors are displayed from one computer system
to another, from one monitor to another.
Web Safe Color
6 digit- Hexadecimal
#FF FF FF
Bold
Underline
Italic
Font
Using List
Order List
Start
Type
Under List
Type
Definition List
Definition Term
Definition Definition

Image and Links


Using Graphics
Horizontal Rule
Alignment
Width
Color
Size

Image
Source
Three Types of Link
Bookmark
Local link
External link

a href , a name

JavaScript
JavaScript is a programming language that you can
use to add interactivity to your Web pages. It lets you
create an active user interface, giving the user the
feedback as they navigate your web page. It can also
use to validate entries in your forms. JavaScript refers
to the programming languages that create programs
executed by an interpreter within the Web browser.

JavaScript is not Java. JavaScript and Java have almost


nothing to do with another. Java is a full-featured
programming language that can be used to create
program.
Displaying Messages
document.writeln()
document.write()
alert()
HTML Tags & Escape Characters
JavaScript code is usually embedded inside the HTML
document. Inside JavaScript, HTML tags are treated
as ordinary text. You need to enclose the tags in
quoatation marks. HTML tags could be inserted in
JavaScript
using
either
document.write()
and
document.writeln()

Data Types and Variables

String
Number
Boolean
Null

Variables

It is a container to which you assign a name for a


value held in the memory of the computer running
JavaScript.
Declaring Variable
Creating variable on a fly
Rules for Creating Variable Names
Variable names can contain uppercase characters,
lowercase character or a mixture of both.
Until initiazed, the value of a variable is undefined.
The first character cannot be a digit
Variable names cannot contain spaces and special
characters except for the underscore ().
JavaScript reserved words are not allowed to be used
as variables names.

Expression and Operators


An expression is any valid set of literals or values,
variables, and operators that evaluates to a single value;
the value can be a number, a string, or a logical value.
There are three common types of expression: arithmetic,
string and logical. You can use operands and operators to
create more complex expressions. Operands are variables
and literals contained in an expression. Operators are
symbols used in expression to manipulate operands.

Arithmetic Operators
Arithmetic operators are used to perform mathematical
calculations, such as addition, subtraction, multiplication
and division.

String operator
(+)
Data Conversion Commands
parseFloat()
parseInt()
toUpperCase()
toLowerCase()
Comparison Operators
Comparison Operators are used to compare two operands
for equality and to determine if one number value is
greater than the other. A Boolean value of true or false is
returned after two operands are compared.
Opera
tor

==
!=
>
<
>=
<=

Exampl
e
A=3,
B=8
A==B
A!=B
A>B
A<B
A>=B
A<=B

Result

False
True
False
True
False
True

Controlling the Program Flow

Controlling the flow of program execution is one of the


most important aspects in JavaScript programming.
Program control flow allows you to direct how the script
will perform the JavaScript commands in response to the
inputs of your program. Program control flow can be
represented into three control structures:
Sequetial Control Strucuture
Selection Control Structure
o If Then
o If Then Else
Repetition Control Structure
o Do Until
o While

ICT Literacy Training of Trainers

Activities:
1. Create s that will display your name and the grade
level handle and the document will have a red
background color.
2. Create an activity that will display and format the
name of your school wherein the text format must
bold, italic and underline
3. Using order list: create a document that will display
all the grade and sections that you handle. The listing
of the item will start at 5.
4. Create an html file that will display the image that
youve edited during your Photoshop training (Basic
Photoshop) alignment must be at the right side.
5. Using the prompt () function in JavaScript, create a
document that will accept the name of the user and
ask for the background color of the document.
6. Create a JavaScript program that will allow the user
to enter their name in any case, program will
automatically display it all in UPPERCASE.
7. Create a JavaScript document that will accept two
integer numbers and will display the following: SUM,
DIFFERENCE, PRODUCT and QUOTIENT.
8. Create a JavaScript document that will allow the user
to enter a number, the program will determine if the
entered value is ODD or EVEN. (If the entered number
is ODD number use alert function to display the result
else use document writeln().
9. Using the Do While statement, create a JavaScript
program will accept an integer value and will display
the number in a decrement way
10.
Create a program that will accept the grade of
student in every quarter and your program will
compute for the average and determine if the grade
is fail or pass.

You might also like