Prepared by Mr. Renato L.

Adriano II, CICT

WHAT IS JAVASCRIPT?

JavaScript was invented by Brendan Eich.

JavaScript is the programming language used with
HTML in web development. It is easy to learn and
provides functions that makes computers do what
you want them to do. JavaScript is one of the most
popular and in demand skills in the web industry.
WHY LEARN JAVASCRIPT?

To be able to develop interactive websites

JavaScript needs to embed with HTML (content)
and CSS (layout) in order to program the behavior
of the webpages.
 JAVASCRIPT CAPABILITIES
Retrieve and
Retrieve and change HTML contents.
change

Alter Alter HTML attributes.

Modify Modify HTML Styles (CSS).

Hide / Show Hide / Show HTML Elements.

Respond Respond to an event.

Identify Identify the visitor’s browser.

Validate Validate Forms before passing to the server.

Serve as a foundation for other programming languages such as

Serve AJAX, DOM and JQuery.
 JAVA VS JAVASCRIPT

Both Java and JavaScript are Object Oriented Programming languages and many
of their programming structures are similar. However, These two are totally
different languages. Java can stand on its own while JavaScript must be placed on
an HTML document to function. Java is also more complicated language that
creates “standalone” applications (which must be compiled before it can be run
on the web) while JavaScript contains a much smaller and simpler set of
commands run through a browser.
I N S E R T I N G J AVA C R I P T S
HEAD SECTION
BODY SECTION
E X T E R N A L JAVA S C R I P T
J AVA S C R I P T O U T P U T
 JAVASCRIPT OUTPUT

▪ JavaScript can modify the contents of the webpage however; JavaScript

doesn’t contain any built-in print or display methods.

▪ The following are different ways to display contents using JavaScript which is
writing into:

▪ The HTML output using “document.write()”.

▪ An alert box, using “alert()” function.
▪ An HTML element, using “.innerHTML”.
document.write()
alert()
innerHTML()
MORE INFO…
J AVA S C R I P T VA R I A B L E S
 JAVASCRIPT VARIABLES

▪ JavaScript variables hold values or expression. These are case sensitive and
must begin with a letter or underscore, the value may be changed during the
script execution.

DECLARATION
▪ Use the var keyword plus the name of the variable. A value may
immediately be assigned to the variable, use quotes around the string
values. If a variable that is not yet been declared is assigned a value, the
variable will implicitly be declared.
VARIABLE DECLARATION
D ATA T Y P E S
 DATA TYPES

JavaScript variables can hold many data types: numbers, strings, arrays, objects
and more.
 DATA TYPES
▪ The JavaScript variables can hold different data types.

▪ In this case, the same variable name can hold different data types.
 JAVASCRIPT COMMENTS

▪ JavaScript comments are used to make the code look readable as well as to
explain codes. It can also be used to prevent the code from running while
testing alternative codes. It is not executed and ignored by the browser.

▪ For single line comment use // before the comment.

▪ For multi line comment use /* for the start and */ for the end.
J A V A S C R I P T O P E R AT O R S
ARITHMETIC OPERATORS
SPECIAL OPERATOR
ASSIGNMENT OPERATORS
COMPARISON OPERATORS
LOGICAL OPERATORS
J AVA S C R I P T E V E N T S
 WHAT ARE JAVASCRIPT EVENTS?

▪ These are things that the browser or user does. When events are detected, you
may want to do something, and JavaScript events allows you to execute codes
when something happens.

Example of JavaScript Events

▪ A button was clicked.
▪ A page was loaded.
▪ Keyboard was pressed.
▪ Mouse over and Mouse out.
▪ An input element was changed.
INTERFACE EVENT HANDLERS
onload – The webpage was successfully
loaded.

onunload – The user leaves the page

onBlur – An object loses input focus by

clicking outside or pressing the tab key.

onFocus – An object gets input focus.

onResize – An element was resized.

onScroll – The window was scrolled

with scrollbar or mousewheel.
 KEY EVENT HANDLERS

onKeyPress - The user presses or holds down a key.

onKeyDown – The user presses a key.

onKeyUp – The user releases a key.

onHelp – The user presses the F1.

 MOUSE EVENT HANDLERS
onClick – The mouse was clicked.

onDblClick – The mouse was double clicked.

onMouseDown – The mouse button was clicked.

onMouseUp – The mouse button was released.

onMouseOut – The user moves the mouse away from the

object.

onMouseMove – The mouse was moved.

onMouseOver – The user moves the mouse over the

object.
FORM EVENT HANDLERS
onChange - The content of the
textbox/text area were changed or
when a new item is selected in a list
box.

onReset - The user clicks the reset

button.

onSelect - An element was selected.

onSubmit – The user clicks the submit

button.
S TA N D A R D P O P U P
BOXES
ALERT BOX
C O N F I R M AT I O N B O X
MORE INFO…
PROMPT BOX
MORE INFO…
 TRY THIS!
Ask for a complete name using prompt and display it on an alert box following
this format.
CONTROL FLOW
IF STATEMENT
 I F S TAT E M E N T W I T H
HTML INPUT ELEMENTS
CONTROL FLOW
SAMPLE # 1
SAMPLE CODE #1
SAMPLE CODE #1 OUTPUT
 TRY THIS!
Create a program that will determine whether a user input an even number, an
odd number or a nonnumeric value.
CONTROL FLOW
SAMPLE # 2
SAMPLE CODE #2
SAMPLE CODE #2 OUTPUT
 TRY THIS!
Using the previous sample code, add lines for it to determine whether the
difference is a positive number or a negative number.
CONTROL FLOW
SAMPLE # 3
SAMPLE CODE #3
SAMPLE CODE #3 OUTPUT
CONTROL FLOW
SAMPLE # 4
SAMPLE CODE #4
SAMPLE CODE #4 OUTPUT
L O O P I N G S TAT E M E N T S
FOR LOOP
FOR LOOP SYNTAX
FOR LOOP SAMPLE
 TRY THIS!
Using the previous for loop sample as reference, create a program that will
produce an output like the image below.
DO WHILE LOOP
DO WHILE SYNTAX
DO WHILE SAMPLE
WHILE LOOP
WHILE LOOP SYNTAX
WHILE LOOP SAMPLE
COMBINING LOOP & IF
LOOP AND IF SAMPLE
LOOP AND IF SAMPLE OUTPUT
NESTED LOOP
NESTED LOOP SAMPLE
 TRY THIS!
Using the previous nested loop sample as reference, create a program that will
produce an output like the image below.
BREAK & CONTINUE
BREAK SAMPLE
BREAK SAMPLE OUTPUT
CONTINUE SAMPLE
CONTINUE SAMPLE OUTPUT
S W I T C H S TAT E M E N T
SWITCH SYNTAX
SWITCH SAMPLE
FUNCTIONS
 FUNCTIONS

Functions are one of the fundamental building blocks in JavaScript. A function is

a JavaScript procedure - a set of statements that performs a task or calculates a
value. To use a function, you must define it somewhere in the scope from which
you want to call it.
USER-DEFINED
FUNCTIONS
USER-DEFINED FUNCTION
MORE INFO…
MORE INFO…
MORE INFO… OUTPUT
PRE-DEFINED
FUNCTIONS
PRE-DEFINED FUNCTIONS
STRING FUNCTIONS
STRING FUNCTIONS
J AVA S C R I P T C O U N T E R
setTimeout();
clearTimeout();
J A V A S C R I P T D AT E
JAVASCRIPT DATE
JAVASCRIPT DATE
HIDE/SHOW ELEMENTS
style.display
style.display OUTPUT
style.visibility
style.visibility OUTPUT
END OF
L E S S O NE N D O F
CHAPTER
Prepared by Mr. Renato L. Adriano II, CICT
WHAT IS A DATABASE?

a usually large collection of data

organized especially for rapid search
and retrieval (as by a computer).
WHAT IS A DBMS?

• A database management system

(DBMS) is system software for
creating and managing databases.
The DBMS provides users and
programmers with a systematic way
to create, retrieve, update and
manage data.

• Microsoft Access
• MySQL
• SQL Server
• Oracle
WHAT IS SQL?

SQL (pronounced "ess-que-el")

stands for Structured Query
Language. SQL is used to
communicate with a database.
According to ANSI (American
National Standards Institute), it is
the standard language for relational
database management systems.
DATABASE, DBMS & PROGRAM
 WHAT IS XAMPP?

X means Cross Platform

A means Apache

M means MariaDB

P means PHP

P means Perl
SEARCH XAMPP Control Panel
CLICK ON THE TWO START
CLICK ON ADMIN IN MYSQL
MYSQL ADMIN PAGE
1 . D ATA B A S E
1 . 1 C R E AT I N G D ATA B A S E
CREATE DATABASE
CREATE DATABASE
1 . 2 D E L E T I N G D ATA B A S E
DROP DATABASE
DROP DATABASE
2 . TA B L E
CREATE TABLE
CREATE TABLE
TYPE THEN CLICK SAVE…
2 . 1 A LT E R TA B L E
ADD COLUMN
TO ADD COLUMN
TYPE THEN CLICK SAVE…
UPDATE COLUMN
TO UPDATE COLUMN
TYPE THEN CLICK SAVE…
DROP COLUMN
TO DROP COLUMN
DROP TABLE
TO DROP TABLE
TO ADD PRIMARY KEY
CREATED STUDENTS’ TABLE
3. RECORDS
3.1 MANAGING RECORDS
INSERT RECORD
TO INSERT RECORD
INSERT FOLLOWING RECORDS
UPDATE RECORD
TO UPDATE RECORD
UPDATED RECORD
DELETE RECORD
TO DELETE RECORD
3.2 SELECTING RECORDS
SELECT ALL RECORD
SELECT BY COLUMN
SELECT DISTINCT RECORD
SQL ALIASES
CONCAT + ALIAS
SELECTING RECORDS
WITH CONDITIONS
WHERE CLAUSE
EQUAL (=) AND NOT EQUAL (!=)
GREATER (>) & LESS (<)
AND OPERATOR
OR OPERATOR
NOT OPERATOR
IN OPERATOR
BETWEEN OPERATOR
COUNT OPERATOR
AVG & ROUND OPERATOR
MIN & MAX OPERATOR
SUB QUERIES
SUB QUERIES
ORDER BY (ASC OR DESC)
END OF
L E S S O NE N D O F
CHAPTER
Prepared by Mr. Renato L. Adriano II, CICT
 HISTORY OF PHP
In 1994, an incredibly forward-
thinking man named Rasmus Lerdorf
developed a set of tools that used a
parsing engine to interpret a few
macros here and there. He
eventually combined these tools
with a form interpretation (FI)
package he had written, added some
database support, and released what
was known as PHP/FI.
 WHAT IS PHP?
• Its official name is PHP Hypertext Preprocessor and
it’s a server-side scripting language.
• It is like JavaScript in that it allows to embed little
programs (scripts) into the HTML code of a web
page.
• The key difference between JavaScript and PHP is
the stage of loading the web page at which these
embedded programs are executed. Server-side
language like PHP are run by the web server,
before ending the web page to the browser while
Client-side language like JavaScript uses browsers
to processes the code instead of the web server.
 WHAT IS PHP? Cont.
• PHP can be used on all major operating
systems.
• PHP is open source, which means it’s FREE! It
is very fast, with no hidden cost.
• It is an OOP language and MySQL makes it
cooler plus the language is closer to
Java/C/C++.
PHP SYNTAX
SAMPLE PHP CODE
CONCATENATE
P H P O P E R AT O R S
ARITHMETIC OPERATORS
ASSIGNMENT OPERATORS
COMPARISON OPERATORS
INCREMENT/DECREMENT
LOGICAL OPERATORS
STRING OPERATORS
PHP VARIABLES
VARIABLE DECLARATIONS
P H P VA R I A B L E S C O P ES
GLOBAL SCOPE
LOCAL SCOPE
STATIC SCOPE
GLOBAL KEYWORD
GLOBAL KEYWORD
RETURN KEYWORD
RETURN KEYWORD
$_GET & $_POST
STEP #1 CREATE register.php
STEP #1 CREATE register.php
STEP #2 CREATE register2.php
OUTPUT
 $_SESSION
Session variables hold information about one single user and
are available to all pages in one application.
STEP #1 CREATE session.php
STEP #2 CREATE session2.php
OUTPUT
P H P I F S TAT E M E N T
IF…ELSEIF…ELSE
P H P L O O P I N G S TAT E M E N T
FOR LOOP
WHILE LOOP
DO WHILE LOOP
PHP FUNCTIONS
USER-DEFINED FUNCTION
P H P D AT E & T I M E
GETTING A SIMPLE TIME
GETTING A SIMPLE DATE
PHP STRING FUNCTIONS
PHP STRING FUNCTIONS
PHP HEADER()
STEP #1 CREATE redirect.php
 STEP #2 CREATE redirect2.php

NOTE: Open your browser and try to access redirect.php. You must always be redirected
in the Second page and will not see First page.
OUTPUT
MORE INFO…
 STEP #1 CREATE redirect3.php

NOTE: Open your browser and try to access redirect3.php. You are able to access
the First page and after 3 seconds will be redirected to Second page.
OUTPUT
PHP EMPTY()
PHP empty()
PHP ISSET()
PHP isset()
 PHP INCLUDE
It is possible to insert the content of one PHP file into another PHP file
(before the server executes it), with the include or require statement.
STEP #1 CREATE main.php
 STEP #2 CREATE aboutus.php

NOTE: Open your browser and access main.php. You will see main.php and aboutus.php
contents together in one page.
OUTPUT
PHP & SQL
SAMPLE LOG-IN FORM
 STEP #1
C R E AT E D ATA B A S E
1.1 CREATE DB (project)
1.2 CREATE Table (login)

1.3 INSERT records.

 STEP #2
C R E AT E C O N N E C T. P H P
 STEP #3
C R E AT E L O G I N . P H P
 STEP #4
C R E AT E T O L O G I N . P H P
 STEP #5
C R E AT E M E N U . P H P
 STEP #6
C R E AT E T O L O G O U T. P H P
ADD / INSERT RECORDS
I N S I D E D ATA B A S E
 STEP #1
C R E AT E A D D . P H P
 STEP #2
C R E AT E T O A D D . P H P
 E D I T / U P D AT E
RECORDS INSIDE
D ATA B A S E
 STEP #1
C R E AT E E D I T. P H P
 STEP #2:
C R E AT E T O E D I T. P H P
 DROP / DELETE
RECORDS INSIDE
D ATA B A S E
 STEP #1
C R E AT E D E L E T E . P H P
 STEP #2
C R E AT E T O D E L E T E . P H P
T H E D I S P L AY R E C O R D S
F R O M D ATA B A S E
C R E AT E D I S P L AY. P H P
C R E AT E D I S P L AY 2 . P H P
END OF
L E S S O NE N D O F
CHAPTER