Scribd
Upload
66 views26 pages

Integ 3 A

This document provides an introduction to JavaScript. It begins by listing the objectives of understanding the meaning of JavaScript, learning JavaScript syntax, and structuring different scripts on a page. It then discusses key features of JavaScript like being lightweight, interpreted, and integrated with HTML. It provides examples of using JavaScript to write "Hello World" and discusses advantages like less server interaction and immediate feedback. It also covers limitations like not allowing file reading/writing and lack of multi-threading. Finally, it discusses JavaScript syntax, using <script> tags and examples of basic code structure.

Uploaded by

annahsenem
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
66 views26 pages

Integ 3 A

This document provides an introduction to JavaScript. It begins by listing the objectives of understanding the meaning of JavaScript, learning JavaScript syntax, and structuring different scripts on a page. It then discusses key features of JavaScript like being lightweight, interpreted, and integrated with HTML. It provides examples of using JavaScript to write "Hello World" and discusses advantages like less server interaction and immediate feedback. It also covers limitations like not allowing file reading/writing and lack of multi-threading. Finally, it discusses JavaScript syntax, using <script> tags and examples of basic code structure.

Uploaded by

annahsenem
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 26

MODULE 2

INTEGRATIVE PROGRAMMING
AND TECHNOLOGIES I
BSIT 2A

INTRODUCTION OBJECTIVES
JavaScript is a lightweight, By the end of this module the students
interpreted programming language. It is will be able to:
designed for creating network-centric
• Understand the meaning of JavaScript
applications. It is complimentary to and
integrated with Java. JavaScript is very • Learn about JS Syntaxes.
easy to implement because it is • Structure a different scripts in a
integrated with HTML. It is open and page
cross-platform.

KEYWORDS
HTML, CSS, Web Pages, mark-up, element,
scrips, variables, programming, coding

SORSOGON STATE COLLEGE


Bulan Campus
Bulan, Sorsogon
INTEGRATIVE PROGRAMMING AND TECHNOLOGIES I
MODULE 2: Linking CSS, Scripts, Meta datas

JavaScript is a MUST for students and working professionals to become a great Software Engineer
specially when they are working in Web Development Domain. We will list down some of the key
advantages of learning JavaScript:

 JavaScript is the most popular programming language in the world and that makes it a
programmer’s great choice. Once you learnt JavaScript, it helps you developing great
front-end as well as back-end softwares using different JavaScript based frameworks
like jQuery, Node.JS etc.

 JavaScript is everywhere, it comes installed on every modern web browser and so to


learn JavaScript you really do not need any special environment setup. For example
Chrome, Mozilla Firefox , Safari and every browser you know as of today, supports
JavaScript.

 JavaScript helps you create really beautiful and crazy fast websites. You can develop
your website with a console like look and feel and give your users the best Graphical
User Experience.

 JavaScript usage has now extended to mobile app development, desktop app development,
and game development. This opens many opportunities for you as JavaScript Programmer.

 Due to high demand, there is tons of job growth and high pay for those who know
JavaScript. You can navigate over to different job sites to see what having JavaScript
skills looks like in the job market.

 Great thing about JavaScript is that you will find tons of frameworks and Libraries
already developed which can be used directly in your software development to reduce
your time to market.

HELLO WORLD IN JS

Just a little preview of how to run “Hello World” with JavaScript

<html>
<body>
<script language = "javascript" type = "text/javascript">
<!--
document.write("Hello World!")
//-->
</script>
</body>
</html>

And take note, JavaScript is different from JAVA.

JavaScript is a Scripting language where its code is all-text based while JAVA is
compiled, JS is run on browsers only and Java creates app that runs in virtual machines
or browser, JS is specifically an OOP Scripting language while JAVA is an OOP language.

Page 2 of 26
INTEGRATIVE PROGRAMMING AND TECHNOLOGIES I
MODULE 2: Linking CSS, Scripts, Meta datas

WHAT IS JAVASCRIPT

JavaScript is a dynamic computer programming language. It is lightweight and most


commonly used as a part of web pages, whose implementations allow client-side script to
interact with the user and make dynamic pages. It is an interpreted programming language
with object-oriented capabilities.

JavaScript was first known as LiveScript, but Netscape changed its name to JavaScript,
possibly because of the excitement being generated by Java. JavaScript made its first
appearance in Netscape 2.0 in 1995 with the name LiveScript. The general-purpose core of
the language has been embedded in Netscape, Internet Explorer, and other web browsers.

The ECMA-262 Specification defined a standard version of the core JavaScript language.

• JavaScript is a lightweight, interpreted programming language.

• Designed for creating network-centric applications.

• Complementary to and integrated with Java.

• Complementary to and integrated with HTML.

• Open and cross-platform

CLIENT-SIDE JAVASCRIPT

Client-side JavaScript is the most common form


of the language. The script should be included
in or referenced by an HTML document for the
code to be interpreted by the browser.
It means that a web page need not be a static
HTML, but can include programs that interact
with the user, control the browser, and
dynamically create HTML content.

The JavaScript client-side mechanism provides


many advantages over traditional CGI server-side
scripts. For example, you might use JavaScript
to check if the user has entered a valid e-mail
address in a form field.

The JavaScript code is executed when the user


submits the form, and only if all the entries
are valid, they would be submitted to the Web
Server.
JavaScript can be used to trap user-initiated
events such as button clicks, link navigation,
and other actions that the user initiates
explicitly or implicitly.

Page 3 of 26
INTEGRATIVE PROGRAMMING AND TECHNOLOGIES I
MODULE 2: Linking CSS, Scripts, Meta datas

ADVANTAGES OF JAVASCRIPT

The merits of using JavaScript are:

• Less server interaction − You can validate user input before sending the page
off to the server. This saves server traffic, which means less load on your
server.

• Immediate feedback to the visitors − They don't have to wait for a page reload
to see if they have forgotten to enter something.

• Increased interactivity − You can create interfaces that react when the user
hovers over them with a mouse or activates them via the keyboard.

• Richer interfaces − You can use JavaScript to include such items as drag-and-
drop components and sliders to give a Rich Interface to your site visitors.

LIMITATIONS OF JAVASCRIPT

We cannot treat JavaScript as a full-fledged programming language. It lacks the


following important features:

• Client-side JavaScript does not allow the reading or writing of files. This has
been kept for security reason.

• JavaScript cannot be used for networking applications because there is no such


support available.

• JavaScript doesn't have any multi-threading or multiprocessor capabilities.

JAVASCRIPT - SYNTAX

JavaScript can be implemented using JavaScript statements that are placed within
the <script>... </script> HTML tags in a web page.
You can place the <script> tags, containing your JavaScript, anywhere within your web
page, but it is normally recommended that you should keep it within the <head> tags.

The <script> tag alerts the browser program to start interpreting all the text between
these tags as a script. A simple syntax of your JavaScript will appear as follows.

<script ...>
JavaScript code
</script>

The script tag takes two important attributes:

• Language − This attribute specifies what scripting language you are using.
Typically, its value will be JavaScript. Although recent versions of HTML (and
XHTML, its successor) have phased out the use of this attribute.

• Type − This attribute is what is now recommended to indicate the scripting


language in use and its value should be set to "text/javascript".

Page 4 of 26
INTEGRATIVE PROGRAMMING AND TECHNOLOGIES I
MODULE 2: Linking CSS, Scripts, Meta datas

JAVASCRIPT - SYNTAX

So your JavaScript segment will look like:

<script language = "javascript" type = "text/javascript">


JavaScript code
</script>

Let us take a sample example to print out "Hello World". We added an optional HTML
comment that surrounds our JavaScript code. This is to save our code from a browser that
does not support JavaScript. The comment ends with a "//-->". Here "//" signifies a
comment in JavaScript, so we add that to prevent a browser from reading the end of the
HTML comment as a piece of JavaScript code. Next, we call a
function document.write which writes a string into our HTML document.
This function can be used to write text, HTML, or both. Take a look at the following
code.
<html>
<body>
<script language = "javascript" type = "text/javascript">
<!--
document.write("Hello World!")
//-->
</script>
</body>
</html>

Whitespace and Line Breaks, Semicolons

JavaScript ignores spaces, tabs, and newlines that appear in JavaScript programs. You
can use spaces, tabs, and newlines freely in your program and you are free to format and
indent your programs in a neat and consistent way that makes the code easy to read and
understand.

Simple statements in JavaScript are generally followed by a semicolon character, just as


they are in C, C++, and Java. JavaScript, however, allows you to omit this semicolon if
each of your statements are placed on a separate line. For example, the following code
could be written without semicolons.

<script language = "javascript" type = "text/javascript">


<!--
var1 = 10
var2 = 20
//-->
</script>

But when formatted in a single line as follows, you must use semicolons −

<script language = "javascript" type = "text/javascript">


<!--
var1 = 10; var2 = 20;
//-->
</script>

Page 5 of 26
INTEGRATIVE PROGRAMMING AND TECHNOLOGIES I
MODULE 2: Linking CSS, Scripts, Meta datas

Case Sensitivity and Comments in JS

JavaScript is a case-sensitive language. This means that the language keywords, variables,
function names, and any other identifiers must always be typed with a consistent
capitalization of letters.
So the identifiers Time and TIME will convey different meanings in JavaScript.

NOTE − Care should be taken while writing variable and function names in JavaScript.

JavaScript supports both C-style and C++-style comments, Thus:

• Any text between a // and the end of a line is treated as a comment and is
ignored by JavaScript.

• Any text between the characters /* and */ is treated as a comment. This may span
multiple lines.

• JavaScript also recognizes the HTML comment opening sequence <!--. JavaScript
treats this as a single-line comment, just as it does the // comment.

• The HTML comment closing sequence --> is not recognized by JavaScript so it


should be written as //-->.

<script language = "javascript" type = "text/javascript">


<!--
// This is a comment. It is similar to comments in C++

/*
* This is a multi-line comment in JavaScript
* It is very similar to comments in C Programming
*/
//-->
</script>

JAVASCRIPT - PLACEMENT IN HTML FILE

There is a flexibility given to include JavaScript code anywhere in an HTML document.


However the most preferred ways to include JavaScript in an HTML file are as follows:

• Script in <head>...</head> section.


• Script in <body>...</body> section.
• Script in <body>...</body> and <head>...</head> sections.
• Script in an external file and then include in <head>...</head> section.

Page 6 of 26
INTEGRATIVE PROGRAMMING AND TECHNOLOGIES I
MODULE 2: Linking CSS, Scripts, Meta datas

JavaScript in <head>...</head> section


If you want to have a script run on some event, such as when a user clicks somewhere, then
you will place that script in the head as follows:

<html>
<head>
<script type = "text/javascript">
function sayHello() {
alert("Hello World")
}
</script>
</head>

<body>
<input type = "button" onclick = "sayHello()" value = "Say Hello" />
</body>
</html>

JavaScript in <body>...</body> section

If you need a script to run as the page loads so that the script generates content in the
page, then the script goes in the <body> portion of the document. In this case, you would
not have any function defined using JavaScript. Take a look at the following code.
<html>
<head>
</head>

<body>
<script type = "text/javascript">
document.write("Hello World")
</script>

<p>This is web page body </p>


</body>
</html>

JavaScript in <body> and <head> Sections

You can put your JavaScript code in <head> and <body> section altogether as follows:

<html>
<head>
<script type = "text/javascript">
function sayHello() {
alert("Hello World")
}
</script>
</head>
<body>
<script type = "text/javascript">
document.write("Hello World")
</script>
<input type = "button" onclick = "sayHello()" value = "Say Hello" />
</body>
</html>

Page 7 of 26
INTEGRATIVE PROGRAMMING AND TECHNOLOGIES I
MODULE 2: Linking CSS, Scripts, Meta datas

JavaScript in External File

As you begin to work more extensively with JavaScript, you will be likely to find that
there are cases where you are reusing identical JavaScript code on multiple pages of a
site.
You are not restricted to be maintaining identical code in multiple HTML files.
The script tag provides a mechanism to allow you to store JavaScript in an external file
and then include it into your HTML files.
Here is an example to show how you can include an external JavaScript file in your HTML
code using script tag and its src attribute.

<html>
<head>
<script type = "text/javascript" src = "filename.js" ></script>
</head>

<body>
.......
</body>
</html>

To use JavaScript from an external file source, you need to write all your JavaScript
source code in a simple text file with the extension ".js" and then include that file as
shown above.
For example, you can keep the following content in filename.js file and then you can
use sayHello function in your HTML file after including the filename.js file.

function sayHello() {
alert("Hello World")
}

JAVASCRIPT - VARIABLES

JavaScript Datatypes

One of the most fundamental characteristics of a programming language is the set of data
types it supports. These are the type of values that can be represented and manipulated in
a programming language.
JavaScript allows you to work with three primitive data types:

• Numbers, eg. 123, 120.50 etc.

• Strings of text e.g. "This text string" etc.

• Boolean e.g. true or false.


JavaScript also defines two trivial data types, null and undefined, each of which defines
only a single value. In addition to these primitive data types, JavaScript supports a
composite data type known as object.

Page 8 of 26
INTEGRATIVE PROGRAMMING AND TECHNOLOGIES I
MODULE 2: Linking CSS, Scripts, Meta datas

Like many other programming languages, JavaScript has variables. Variables can be thought
of as named containers. You can place data into these containers and then refer to the data
simply by naming the container.
Before you use a variable in a JavaScript program, you must declare it. Variables are
declared with the var keyword as follows.

<script type = "text/javascript">


var money;
var name;
var name2, money2;
</script>

Storing a value in a variable is called variable initialization. You can do variable


initialization at the time of variable creation or at a later point in time when you need
that variable.
For instance, you might create a variable named money and assign the value 2000.50 to it
later. For another variable, you can assign a value at the time of initialization as
follows.
<script type = "text/javascript">
var name = "Ali";
var money;
money = 2000.50;
</script>

JavaScript is untyped language. This means that a JavaScript variable can hold a value of
any data type. Unlike many other languages, you don't have to tell JavaScript during
variable declaration what type of value the variable will hold. The value type of a
variable can change during the execution of a program and JavaScript takes care of it
automatically.

JavaScript Variable Scope

The scope of a variable is the region of your program in which it is defined. JavaScript
variables have only two scopes.

• Global Variables − A global variable has global scope which means it can be
defined anywhere in your JavaScript code.

• Local Variables − A local variable will be visible only within a function where
it is defined. Function parameters are always local to that function.

Within the body of a function, a local variable takes precedence over a global variable
with the same name. If you declare a local variable or function parameter with the same
name as a global variable, you effectively hide the global variable. Take a look into the
following example.

Page 9 of 26
INTEGRATIVE PROGRAMMING AND TECHNOLOGIES I
MODULE 2: Linking CSS, Scripts, Meta datas

<html>
<body onload = checkscope();>
<script type = "text/javascript">
<!--
var myVar = "global"; // Declare a global variable
function checkscope( ) {
var myVar = "local"; // Declare a local variable
document.write(myVar);
}
//-->
</script>
</body>
</html>

JavaScript Variable Names

While naming your variables in JavaScript, keep the following rules in mind.

• You should not use any of the JavaScript reserved keywords as a variable name.
These keywords are mentioned in the next section. For
example, break or boolean variable names are not valid.

• JavaScript variable names should not start with a numeral (0-9). They must begin
with a letter or an underscore character. For example, 123test is an invalid
variable name but _123test is a valid one.

• JavaScript variable names are case-sensitive. For example, Pogi and pogi are two
different variables.

JavaScript Reserved Words

A list of all the


reserved words in
JavaScript are given
in the following
table. They cannot be
used as JavaScript
variables, functions,
methods, loop labels,
or any object names.

Page 10 of 26
INTEGRATIVE PROGRAMMING AND TECHNOLOGIES I
MODULE 2: Linking CSS, Scripts, Meta datas

JAVASCRIPT - OPERATORS

Let us take a simple expression 4 + 5 is equal to 9. Here 4 and 5 are called operands and
‘+’ is called the operator. JavaScript supports the following types of operators.

• Arithmetic Operators

• Comparison Operators

• Logical (or Relational) Operators

• Assignment Operators

• Conditional (or ternary) Operators

Arithmetic Operators

JavaScript supports the following var a = 33;


arithmetic operators: var b = 10;
var c = "Test";
Assume variable A holds 10 and var linebreak = "<br />";
variable B holds 20, then:
document.write("a + b = ");
+ (Addition) result = a + b;
Adds two operands document.write(result);
Ex: A + B will give 30 document.write(linebreak);

document.write("a - b = ");
- (Subtraction)
result = a - b;
Subtracts the second operand
document.write(result);
from the first
document.write(linebreak);
Ex: A - B will give -10
document.write("a / b = ");
* (Multiplication) result = a / b;
Multiply both operands document.write(result);
Ex: A * B will give 200 document.write(linebreak);
/ (Division) document.write("a % b = ");
Divide the numerator by the result = a % b;
denominator document.write(result);
Ex: B / A will give 2 document.write(linebreak);

% (Modulus) document.write("a + b + c = ");


Outputs the remainder of an result = a + b + c;
integer division document.write(result);
Ex: B % A will give 0 document.write(linebreak);

++ (Increment) a = ++a;
Increases an integer value document.write("++a = ");
by one result = ++a;
Ex: A++ will give 11 document.write(result);
document.write(linebreak);
-- (Decrement)
Decreases an integer value b = --b;
by one document.write("--b = ");
Ex: A-- will give 9 result = --b;
document.write(result);
document.write(linebreak);

Page 11 of 26
INTEGRATIVE PROGRAMMING AND TECHNOLOGIES I
MODULE 2: Linking CSS, Scripts, Meta datas

Comparison Operators

JavaScript supports the following


comparison operators −

Assume variable A holds 10 and


variable B holds 20, then −

= = (Equal)
Checks if the value of two operands
are equal or not, if yes, then the
condition becomes true.
Ex: (A == B) is not true. var a = 10;
var b = 20;
var linebreak = "<br />";
!= (Not Equal)
Checks if the value of two operands document.write("(a == b) => ");
are equal or not, if the values are result = (a == b);
not equal, then the condition becomes document.write(result);
true. document.write(linebreak);
Ex: (A != B) is true.
document.write("(a < b) => ");
result = (a < b);
document.write(result);
> (Greater than)
document.write(linebreak);
Checks if the value of the left
operand is greater than the value of document.write("(a > b) => ");
the right operand, if yes, then the result = (a > b);
condition becomes true. document.write(result);
Ex: (A > B) is not true. document.write(linebreak);

document.write("(a != b) => ");


< (Less than) result = (a != b);
Checks if the value of the left document.write(result);
operand is less than the value of the document.write(linebreak);
right operand, if yes, then the
condition becomes true. document.write("(a >= b) => ");
Ex: (A < B) is true. result = (a >= b);
document.write(result);
document.write(linebreak);
>= (Greater than or Equal to)
Checks if the value of the left document.write("(a <= b) => ");
operand is greater than or equal to result = (a <= b);
the value of the right operand, if document.write(result);
yes, then the condition becomes true. document.write(linebreak);
Ex: (A >= B) is not true.

<= (Less than or Equal to)


Checks if the value of the left
operand is less than or equal to the
value of the right operand, if yes,
then the condition becomes true.
Ex: (A <= B) is true.

Page 12 of 26
INTEGRATIVE PROGRAMMING AND TECHNOLOGIES I
MODULE 2: Linking CSS, Scripts, Meta datas

Logical Operators

JavaScript supports the following logical operators

Assume variable A holds 10 and variable B holds 20, then:


var a = true;
&& (Logical AND) var b = false;
If both the operands are non-zero, var linebreak = "<br />";
then the condition becomes true.
Ex: (A && B) is true. document.write("(a && b) => ");
result = (a && b);
|| (Logical OR) document.write(result);
If any of the two operands are non- document.write(linebreak);
zero, then the condition becomes true.
Ex: (A || B) is true. document.write("(a || b) => ");
result = (a || b);
! (Logical NOT) document.write(result);
Reverses the logical state of its document.write(linebreak);
operand. If a condition is true, then
the Logical NOT operator will make it document.write("!(a && b) => ");
false. result = (!(a && b));
Ex: ! (A && B) is false. document.write(result);
document.write(linebreak);

Assignment Operators

JavaScript supports the following assignment operators −


= (Simple Assignment )
Assigns values from the right side var a = 33;
operand to the left side operand var b = 10;
Ex: C = A + B will assign the value of var linebreak = "<br />";
A + B into C
document.write("Value of a => (a = b) => ");
+= (Add and Assignment) result = (a = b);
It adds the right operand to the left document.write(result);
operand and assigns the result to the document.write(linebreak);
left operand.
document.write("Value of a => (a += b) => ");
Ex: C += A is equivalent to C = C + A
result = (a += b);
document.write(result);
−= (Subtract and Assignment)
document.write(linebreak);
It subtracts the right operand from
the left operand and assigns the document.write("Value of a => (a -= b) => ");
result to the left operand. result = (a -= b);
Ex: C -= A is equivalent to C = C - A document.write(result);
document.write(linebreak);
*= (Multiply and Assignment)
It multiplies the right operand with document.write("Value of a => (a *= b) => ");
the left operand and assigns the result = (a *= b);
result to the left operand. document.write(result);
Ex: C *= A is equivalent to C = C * A document.write(linebreak);

/= (Divide and Assignment) document.write("Value of a => (a /= b) => ");


It divides the left operand with the result = (a /= b);
right operand and assigns the result document.write(result);
to the left operand. document.write(linebreak);
Ex: C /= A is equivalent to C = C / A

Page 13 of 26
INTEGRATIVE PROGRAMMING AND TECHNOLOGIES I
MODULE 2: Linking CSS, Scripts, Meta datas

JAVASCRIPT - IF...ELSE STATEMENT

While writing a program, there may be a situation when you need to adopt one out of a
given set of paths. In such cases, you need to use conditional statements that allow your
program to make correct decisions and perform right actions.
JavaScript supports conditional statements which are used to perform different actions
based on different conditions. Here we will explain the if..else statement.

The if statement is the fundamental control statement that allows JavaScript to make
decisions and execute statements conditionally.

If...else and else if... Syntax

//if syntax
if (expression) {
Statement(s) to be executed if expression is true
}

//if else syntax


if (expression) {
Statement(s) to be executed if expression is true
} else {
Statement(s) to be executed if expression is false
}

//if else if syntax


if (expression 1) {
Statement(s) to be executed if expression 1 is true
} else if (expression 2) {
Statement(s) to be executed if expression 2 is true
} else if (expression 3) {
Statement(s) to be executed if expression 3 is true
} else {
Statement(s) to be executed if no expression is true
}

<html>
It is just a series <body>
of if statements, <script type = "text/javascript">
where each if is a <!--
var book = "maths";
part of
if( book == "history" ) {
the else clause of document.write("<b>History Book</b>");
the previous } else if( book == "maths" ) {
statement. Statement document.write("<b>Maths Book</b>");
} else if( book == "economics" ) {
(s) are executed
document.write("<b>Economics Book</b>");
based on the true } else {
condition, if none document.write("<b>Unknown Book</b>");
of the conditions is }
true, then //-->
</script>
the else block is <p>Set the variable to different value and then try...</p>
executed. </body>
<html>

Page 14 of 26
INTEGRATIVE PROGRAMMING AND TECHNOLOGIES I
MODULE 2: Linking CSS, Scripts, Meta datas

JAVASCRIPT - SWITCH CASE

You can use multiple if...else…if statements, as in the previous chapter, to perform a
multiway branch. However, this is not always the best solution, especially when all of the
branches depend on the value of a single variable.
You can use a switch statement which handles exactly this situation, and it does so more
efficiently than repeated if...else if statements.

Syntax

switch (expression) {
case condition 1: statement(s)
break;

case condition 2: statement(s)


break;
...

case condition n: statement(s)


break;

default: statement(s)
}

<html>
<body>
The objective of <script type = "text/javascript">
a switch statement is to <!--
give an expression to var grade = 'A';
evaluate and several document.write("Entering switch block<br />");
switch (grade) {
different statements to
case 'A': document.write("Good job<br />");
execute based on the value break;
of the expression. The
interpreter checks case 'B': document.write("Pretty good<br />");
break;
each case against the value
of the expression until a case 'C': document.write("Passed<br />");
match is found. If nothing break;
matches, a default condition
will be used. case 'D': document.write("Not so good<br />");
break;
The break statements
indicate the end of a case 'F': document.write("Failed<br />");
break;
particular case. If they
were omitted, the default: document.write("Unknown grade<br />")
interpreter would continue }
executing each statement in document.write("Exiting switch block");
//-->
each of the following cases.
</script>
Try the code to see its <p>Set the variable to different value and then try...</p>
</body>
output
</html>

Page 15 of 26
INTEGRATIVE PROGRAMMING AND TECHNOLOGIES I
MODULE 2: Linking CSS, Scripts, Meta datas

JAVASCRIPT - DO WHILE & WHILE LOOPS

The most basic loop in JavaScript is the while loop. The purpose of a while loop is to
execute a statement or code block repeatedly as long as an expression is true. Once the
expression becomes false, the loop terminates.

Syntax
while (expression) {
Statement(s) to be executed if expression is true
}

<html>
<body>

<script type = "text/javascript">


var count = 0;
document.write("Starting Loop ");

while (count < 10) {


document.write("Current Count : " + count + "<br />");
count++;
}
document.write("Loop stopped!");
</script>

<p>Set the variable to different value and then try...</p>


</body>
</html>

The do...while loop is similar to the while loop except that the condition check happens
at the end of the loop. This means that the loop will always be executed at least once,
even if the condition is false.

Syntax
do {
Statement(s) to be executed;
} while (expression);

<html>
<body>
<script type = "text/javascript">
var count = 0;

document.write("Starting Loop" + "<br />");


do {
document.write("Current Count : " + count + "<br />");
count++;
}
while (count < 5);
document.write ("Loop stopped!");
</script>
<p>Set the variable to different value and then try...</p>
</body>
</html>

Page 16 of 26
INTEGRATIVE PROGRAMMING AND TECHNOLOGIES I
MODULE 2: Linking CSS, Scripts, Meta datas

JAVASCRIPT - FOR LOOP

The 'for' loop is the most compact form of looping. It includes the following three
important parts:

• The loop initialization where we initialize our counter to a starting value. The
initialization statement is executed before the loop begins.

• The test statement which will test if a given condition is true or not. If the
condition is true, then the code given inside the loop will be executed,
otherwise the control will come out of the loop.

• The iteration statement where you can increase or decrease your counter.

Syntax

for (initialization; test condition; iteration statement) {


Statement(s) to be executed if test condition is true
}

<html>
<body>
<script type = "text/javascript">
<!--
var count;
document.write("Starting Loop" + "<br />");

for(count = 0; count < 10; count++) {


document.write("Current Count : " + count );
document.write("<br />");
}
document.write("Loop stopped!");
//-->
</script>
<p>Set the variable to different value and then try...</p>
</body>
</html>

JAVASCRIPT - FUNCTIONS

A function is a group of reusable code which can be called anywhere in your program. This
eliminates the need of writing the same code again and again. It helps programmers in
writing modular codes. Functions allow a programmer to divide a big program into a number
of small and manageable functions.

Like any other advanced programming language, JavaScript also supports all the features
necessary to write modular code using functions. You must have seen functions like alert
() and write() in the earlier chapters. We were using these functions again and again, but
they had been written in core JavaScript only once.

JavaScript allows us to write our own functions as well. This section explains how to
write your own functions in JavaScript.

Page 17 of 26
INTEGRATIVE PROGRAMMING AND TECHNOLOGIES I
MODULE 2: Linking CSS, Scripts, Meta datas

Syntax

<script type = "text/javascript">


function functionname(parameter-list) {
statements
}
</script>

<script type = "text/javascript">


<!--
function sayHello() {
alert("Hello there");
}
//-->
</script>

Calling a Function

To invoke a function somewhere later in the script, you would simply need to write the
name of that function as shown in the following code.
<html>
<head>
<script type = "text/javascript">
function sayHello() {
document.write ("Hello there!");
}
</script>
</head>

<body>
<p>Click the following button to call the function</p>
<form>
<input type = "button" onclick = "sayHello()" value = "Say Hello">
</form>
<p>Use different text in write method and then try...</p>
</body>
</html>

<html>
Function Parameters <head>
<script type = "text/javascript">
Till now, we have seen function sayHello(name, age) {
document.write (name + " is " + age + "
functions without years old.");
parameters. But there is a }
facility to pass different </script>
</head>
parameters while calling a
function. These passed <body>
parameters can be captured <p>Click the button to call the function</p>
<form>
inside the function and any <input type = "button" onclick = "sayHello
manipulation can be done ('Zara', 7)" value = "Say Hello">
</form>
over those parameters. A <p>Use different parameters inside the function
function can take multiple and then try...</p>
parameters separated by </body>
</html>
comma.

Page 18 of 26
INTEGRATIVE PROGRAMMING AND TECHNOLOGIES I
MODULE 2: Linking CSS, Scripts, Meta datas

The return Statement

A JavaScript function can have an optional return statement. This is required if you want
to return a value from a function. This statement should be the last statement in a
function.
For example, you can pass two numbers in a function and then you can expect the function
to return their multiplication in your calling program.

<html>
<head>
<script type = "text/javascript">
function concatenate(first, last) {
var full;
full = first + last;
return full;
}
function secondFunction() {
var result;
result = concatenate('Zara', 'Ali');
document.write (result );
}
</script>
</head>

<body>
<p>Click the following button to call the function</p>
<form>
<input type = "button" onclick = "secondFunction()" value = "Call Function">
</form>
<p>Use different parameters inside the function and then try...</p>
</body>
</html>

JAVASCRIPT - EVENTS

JavaScript's interaction with HTML is handled through events that occur when the user or
the browser manipulates a page.

When the page loads, it is called an event. When the user clicks a button, that click too
is an event. Other examples include events like pressing any key, closing a window,
resizing a window, etc.

Developers can use these events to execute JavaScript coded responses, which cause buttons
to close windows, messages to be displayed to users, data to be validated, and virtually
any other type of response imaginable.

Events are a part of the Document Object Model (DOM) Level 3 and every HTML element
contains a set of events which can trigger JavaScript Code.

Page 19 of 26
INTEGRATIVE PROGRAMMING AND TECHNOLOGIES I
MODULE 2: Linking CSS, Scripts, Meta datas

onclick Event Type

This is the most frequently used event type which occurs when a user clicks the left
button of his mouse. You can put your validation, warning etc., against this event type.

<html>
<head>
<script type = "text/javascript">
<!--
function sayHello() {
alert("Hello World")
}
//-->
</script>
</head>

<body>
<p>Click the following button and see result</p>
<form>
<input type = "button" onclick = "sayHello()" value = "Say Hello" />
</form>
</body>
</html>

onsubmit Event Type

onsubmit is an event that occurs when you try to submit a form. You can put your form
validation against this event type.

The following example shows how to use onsubmit. Here we are calling a validate() function
before submitting a form data to the webserver. If validate() function returns true, the
form will be submitted, otherwise it will not submit the data.

<html>
<head>
<script type = "text/javascript">
<!--
function validation() {
all validation goes here
.........
return either true or false
}
//-->
</script>
</head>

<body>
<form method = "POST" action = "t.cgi" onsubmit = "return validate()">
.......
<input type = "submit" value = "Submit" />
</form>
</body>
</html>

Page 20 of 26
INTEGRATIVE PROGRAMMING AND TECHNOLOGIES I
MODULE 2: Linking CSS, Scripts, Meta datas

onmouseover and onmouseout

These two event types will help you create nice effects with images or even with text as
well. The onmouseover event triggers when you bring your mouse over any element and
the onmouseout triggers when you move your mouse out from that element. Try the following
example.
<html>
<head>
<script type = "text/javascript">
<!--
function over() {
document.write ("Mouse Over");
}
function out() {
document.write ("Mouse Out");
}
//-->
</script>
</head>

<body>
<p>Bring your mouse inside the div to see the result:</p>
<div onmouseover = "over()" onmouseout = "out()">
<h2> This is inside the div </h2>
</div>
</body>
</html>

Check on the end of this module for the list of different events you may try.

JAVASCRIPT - OUTPUTS

JavaScript can "display" data in different ways:

• Writing into an HTML element, using innerHTML.

• Writing into the HTML output using document.write().

• Writing into an alert box, using window.alert().

• Writing into the browser console, using console.log().

innerHTML

To access an HTML element, JavaScript can use the document.getElementById(id) method.

The id attribute defines the HTML element. The innerHTML property defines the HTML
content:
//check on the next page

Page 21 of 26
INTEGRATIVE PROGRAMMING AND TECHNOLOGIES I
MODULE 2: Linking CSS, Scripts, Meta datas

innerHTML

<html>
<body>
<h1>My First Web Page</h1>
<p>My First Paragraph</p>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = 5 + 6;
</script>
</body>
</html>

document.write()

<html>
<body>
<h1>My First Web Page</h1>
<p>My First Paragraph</p>

<script>
document.write(5 + 6);
</script>
</body>
</html>

window.alert()

<html>
<body>
<h1>My First Web Page</h1>
<p>My First Paragraph</p>

<script>
window.alert(5 + 6);
alert(5 + 6);
//both alert can be used
</script>
</body>
</html>

console.log()

<html>
<body>
<h1>My First Web Page</h1>
<p>My First Paragraph</p>

<script>
Console.log(5 + 6);
</script>
</body>
</html>

Page 22 of 26
INTEGRATIVE PROGRAMMING AND TECHNOLOGIES I
MODULE 2: Linking CSS, Scripts, Meta datas

EVENTS

Attribute Value Description

Offline script Triggers when the document goes offline

Onabort script Triggers on an abort event

onafterprint script Triggers after the document is printed

onbeforeonload script Triggers before the document loads

onbeforeprint script Triggers before the document is printed

onblur script Triggers when the window loses focus

Triggers when media can start play, but might has to stop for
oncanplay script
buffering

Triggers when media can be played to the end, without stopping


oncanplaythrough script
for buffering

onchange script Triggers when an element changes

onclick script Triggers on a mouse click

oncontextmenu script Triggers when a context menu is triggered

ondblclick script Triggers on a mouse double-click

ondrag script Triggers when an element is dragged

ondragend script Triggers at the end of a drag operation

Triggers when an element has been dragged to a valid drop tar-


ondragenter script
get

Triggers when an element is being dragged over a valid drop


ondragleave script
target

ondragover script Triggers at the start of a drag operation

ondragstart script Triggers at the start of a drag operation

ondrop script Triggers when dragged element is being dropped

ondurationchange script Triggers when the length of the media is changed

onemptied script Triggers when a media resource element suddenly becomes empty.

onended script Triggers when media has reach the end

onerror script Triggers when an error occur

onfocus script Triggers when the window gets focus

onformchange script Triggers when a form changes

Page 23 of 26
INTEGRATIVE PROGRAMMING AND TECHNOLOGIES I
MODULE 2: Linking CSS, Scripts, Meta datas

EVENTS

Attribute Value Description

onforminput script Triggers when a form gets user input

onhaschange script Triggers when the document has change

oninput script Triggers when an element gets user input

oninvalid script Triggers when an element is invalid

onkeydown script Triggers when a key is pressed

onkeypress script Triggers when a key is pressed and released

onkeyup script Triggers when a key is released

onload script Triggers when the document loads

onloadeddata script Triggers when media data is loaded

Triggers when the duration and other media data of a media


onloadedmetadata script
element is loaded

onloadstart script Triggers when the browser starts to load the media data

onmessage script Triggers when the message is triggered

onmousedown script Triggers when a mouse button is pressed

onmousemove script Triggers when the mouse pointer moves

onmouseout script Triggers when the mouse pointer moves out of an element

onmouseover script Triggers when the mouse pointer moves over an element

onmouseup script Triggers when a mouse button is released

onmousewheel script Triggers when the mouse wheel is being rotated

onoffline script Triggers when the document goes offline

onoine script Triggers when the document comes online

ononline script Triggers when the document comes online

onpagehide script Triggers when the window is hidden

onpageshow script Triggers when the window becomes visible

onpause script Triggers when media data is paused

onplay script Triggers when media data is going to start playing

onplaying script Triggers when media data has start playing

Page 24 of 26
INTEGRATIVE PROGRAMMING AND TECHNOLOGIES I
MODULE 2: Linking CSS, Scripts, Meta datas

EVENTS

Attribute Value Description

onpopstate script Triggers when the window's history changes

onprogress script Triggers when the browser is fetching the media data

onratechange script Triggers when the media data's playing rate has changed

onreadystatechange script Triggers when the ready-state changes

onredo script Triggers when the document performs a redo

onresize script Triggers when the window is resized

onscroll script Triggers when an element's scrollbar is being scrolled

Triggers when a media element's seeking attribute is no longer


onseeked script
true, and the seeking has ended

Triggers when a media element's seeking attribute is true, and


onseeking script
the seeking has begun

onselect script Triggers when an element is selected

onstalled script Triggers when there is an error in fetching media data

onstorage script Triggers when a document loads

onsubmit script Triggers when a form is submitted

Triggers when the browser has been fetching media data, but
onsuspend script
stopped before the entire media file was fetched

ontimeupdate script Triggers when media changes its playing position

onundo script Triggers when a document performs an undo

onunload script Triggers when the user leaves the document

Triggers when media changes the volume, also when volume is


onvolumechange script
set to "mute"

Triggers when media has stopped playing, but is expected to


onwaiting script
resume

Page 25 of 26
INTEGRATIVE PROGRAMMING AND TECHNOLOGIES I
MODULE 1: Introduction to HTML

Activity

 Create a web page where the user can input their personal information: name(first, last,
middle), course(use select tag, your choice of list), address, birthdate (use date tag),
email (use type = “email”), nationality, sex, civil status, fathers name, mothers name and
with a button named submit and will show a new page showing the records of what you input.

 Use External styles, do not use internal styles or inline and name it mystyle.css.

 You may use external or internal JavaScript.

For PC: https://notepad-plus-plus.org/downloads/v7.8.8/

For Android: https://play.google.com/store/apps/details?id=com.ansm.anwriter&hl=en

For iOS: https://apps.apple.com/us/app/html-html5-editor/id1071644161

For MAC: http://brackets.io/

Submission:

1. Put your Web Page (index.html), your images (yourimage.jpg) and your CSS file in one folder
named as Lastname_Firstname_Activity3 and create a zip for it for you to be able to submit.

2. The final file that you’ll be submitting to me is a zip file named:


Lastname_Firstname_Activity3.zip

Note: as for the compression tool just use winrar. You can download it on the web.

MILAN E. BAUSA, MIT


Instructor I
Sorsogon State College – Bulan Campus
Bulan, Sorsogon

great_lhan@yahoo.com / testlhan@gmail.com
+63 909 6267 670 / +63 966 1466 481
https://www.facebook.com/Ferbilicious

NEXT LESSON: Scripting Languages and Database

Page 26 of 26

You might also like