WEB TECHNOLOGY II

Computer Science, XII

St. Xavier’s College
Table of Contents

01 Introduction

02 Server Side & Client Side Scripting

03 Introduction to Internet Technology

04 Server Side Scripting Using PHP
05 Introduction to PHP
INTRODUCTION

Computer Science
Web Technology

▪ Use of markup languages and

multimedia packages to interact
between computers over the
internet.
▪ Helps to establish communication
across the web to create, deliver
and manage web contents.
Sections of Web Technology
(Terminologies)
▪ World Wide Web (WWW)
▪ Web Browser
▪ Web Server
▪ Web Pages
World Wide Web (WWW)

▪ Collection of different websites around the world.

▪ Contains different information shared via
computers.
▪ Components:
○ Uniform Resource Locator (URL)
○ HyperText Transfer Protocol (HTTP)
○ HyperText Markup Language (HTML)
Web Browser

▪ Application software to
explore World Wide Web.
▪ Provides an interface
between server and client.
▪ Displays text, data, pictures,
animation and video on the
internet.
Web Server

▪ A program or infrastructure which processes the

network requests of the users.
▪ Serves the users with the files that create web
pages.
▪ This exchange takes place using Hypertext Transfer
Protocol (HTTP).
HyperText Transfer Protocol
(HTTP)
▪ Designed to enable communications between clients
and servers.
▪ Works as a request-response protocol between a
client and server.
HyperText Transfer Protocol
(HTTP)
Web Pages/Website

▪ A digital document that is linked to World Wide

Web.
▪ Viewable by anyone connected to the internet
through a web browser.
▪ Has its specific URL.
▪ Example: www.sxc.edu.np
Web Development

▪ Refers to building, creating and maintaining websites

and web applications.
▪ Includes aspects such as web design, web
programming and database management.
▪ Creation of application that works over the internet.
Web Development
Classification
▪ Frontend Development
○ Part of website a user interacts directly.
○ Also known as client side of the application.
▪ Backend Development
○ Server side of website.
○ User cannot see or interact.
○ Used to store and arrange data.
Languages Used For Web
Development
▪ Frontend Development
○ HTML, CSS, JavaScript
▪ Backend Development
○ PHP, Java, Python, SQL
What is a Scripting Language?

▪ Instructions written for a run time environment.

▪ Do not require compiler rather they are interpreted
by an interpreter.
▪ Designed for integrating and communicating with
other programming languages.
▪ “All scripting languages are programming languages,
all programming languages are not scripting
language”.
Two methods of Scripting

▪ Client-side Scripting Language

▪ Server-side Scripting Language
Client-side Scripting

▪ Client-side scripts are executed by the browser when

a page loads.
▪ Used to add frontend functionality to websites.
▪ Used for validations and event handling.
▪ Focuses on the interactive part of the website.
▪ These scripts cannot access file system or the server.
▪ Languages: Javascript, JQuery
Advantage of Client-side
Scripting
▪ Easy to learn and use.
▪ Lightweight and relatively easy to implement.
▪ Executes fast.
▪ Allow for more interactivity by immediately
responding to user’s actions.
▪ Can give developers more control over the look and
behavior of their web pages.
Disadvantage of Client-side
Scripting
▪ Less secure as code is visible to clients.
▪ Not all browsers support scripts the same way.
▪ Usually more limited in functionality.
Server-side Scripting

▪ Server-side scripting is performed by a web server

before sending the page back to the client.
▪ Used to add backend functionality to websites.
▪ Used to create dynamic web pages.
▪ Can access and interact with file system or the
server (database).
▪ Languages: PHP, Python, Ruby, Java
Application of Server-side
Scripting
▪ User authentication and authorization.
▪ The data submitted through an online application is
stored in the database of the server.
▪ Dynamically edit, add, remove or update the content
of web page at any moment.
▪ Can be used to customize a web page to make it
more useful for individual clients.
Advantages of Server-side
Scripting
▪ Server-side code is not visible to clients.
▪ Reduces load on the browser. Does not depend on
browser processing.
▪ Dynamic pages can be generated.
▪ Allows database interactivity with web pages.
▪ Increased security and privacy.
▪ Allows code reusability.
Disadvantages of Server-side
Scripting
▪ A high configuration server is needed.
▪ Possibly slows down the website if server processing
speed is not good.
▪ Server-side scripting is slower than client-side
scripting.
Homework:
Study the differences between
Client-side and Server-side scripting.
Difference between
Client-side and Server-side
Difference between
Client-side and Server-side
SERVER SIDE SCRIPTING WITH
PHP

Computer Science
PHP (Hypertext Preprocessor)

▪ Previously known as Personal Home Page.

▪ Hypertext: Texts which contains links to other texts.
(cross-reference of other text)
▪ Preprocessor: Program that processes its input data
to produce output which is used as input to another
program.
PHP (Hypertext Preprocessor)

▪ An open-source, free, server-side scripting language.

▪ It is interpreted and object oriented that can be
executed at the server.
▪ Created by Rasmus Lerdorf in 1994.
▪ Php 7.4 is the latest version. (Upcoming 8.2)
▪ Widely used in web development.
▪ Available on all major operating systems.
Features of PHP

▪ Simple: Simple and easy to use compared to other

scripting language.
▪ Interpreted: Compilation of code is not required.
▪ Performance: PHP script is executed faster by using
its own memory.
▪ Easy syntax: ‘C’ like easily understandable syntax.
Features of PHP

▪ Database support: Supports all the leading database

such as MySql, ODBC, SQlite, SQL Server.
▪ Web servers support: Compatible to almost all local
servers used today like Apache, Netscape, etc.
▪ Open Source: Available on free.
▪ Platform Independent: PHP code runs on any
platform with any operating system.
Features of PHP

▪ Case Sensitive: Only PHP variables are case sensitive.

▪ Error Reporting: Have some predefined error
reporting constants.
▪ Loosely Typed Language: Variables can be used
without declaring its data type.
▪ Beginner friendly language.
▪ Embedded in HTML.
Features of PHP

▪ Multi-function: Can create and customize

ecommerce sites, blogs, desktop apps, social media,
email services, etc.
▪ Support: PHP has a very large community.
Documentation and information for support and
guidance can be found online along with many
tutorials.
▪ Regular updates on versions.
Common Uses of PHP

▪ Form handling: gather data from forms and manage

data in a database.
▪ Create, Read, Update, Delete data in database
through PHP.
▪ User authentication in websites.
▪ Restrict users to access some pages of website.
▪ Data encryption.
Popular Applications of PHP
Prerequisites

▪ Basic knowledge of HTML and CSS is preferred.

▪ Knowledge of Javascript is a plus.
▪ HTML: Used to design static web page layouts.
▪ CSS: Used to make the webpage content effective
and attractive.
▪ Javascript: Used to design an interactive website.
System Requirements

▪ Operating System: Windows, Linux, MAC

▪ A PHP engine: PHP engine provided in XAMPP or
WAMP.
▪ A web server: Apache server provided in XAMPP or
WAMP.
▪ A database server: MySQL server provided in XAMPP
or WAMP.
▪ Browser.
BASIC SYNTAX IN PHP

Computer Science
Basic Syntax of PHP

▪ Extension of PHP file: .php

▪ HTML and PHP tags are commonly used.
▪ Different syntax on the basis of opening and closing
tags.
○ Default syntax
○ Short open tags
○ Omit PHP closing tag at end of file.
Basic Syntax of PHP
(Default)
▪ Starts with <?php
▪ Ends with ?>
▪ Example:
Basic Syntax of PHP
(Short Open Tags)
▪ Starts with <?
▪ Ends with ?>
▪ Example:
Basic Syntax of PHP
(Omit PHP closing tag)
▪ Starts with <?php
▪ Skip ?>
▪ Example:
Basic
Example
of PHP
with
HTML
COMMENTS IN PHP

Computer Science
Comments in PHP

▪ A line that is not executed as a part of the program.

▪ Only purpose is to be read by someone who is
looking at the code.
▪ Can be used to:
○ Let others understand your code.
○ Remind yourself of what you did.
Single Line Comments
Multi Line Comments
VARIABLES IN PHP

Computer Science
Variables in PHP
▪ Containers for storing data.
▪ Used to hold data in a computer program that may
be referenced and changed.
▪ A variable starts with the $ sign, followed by the
name of the variable.
▪ PHP has no command for declaring a variable. The
variable is created when a value is assigned to it.
Variables in PHP

▪ Put quotes around the

text values.
▪ No quotes for integer
values.
Rules for PHP Variables

▪ Starts with $ sign, followed by name of the variable.

▪ A variable name must start with a letter or
underscore.
▪ A variable name cannot start with a number.
▪ A variable name can only contain alpha-numeric
characters and underscores.
▪ Variable names are case sensitive.
▪ Keywords cannot be used as variable name.
Output Variables in PHP

▪ Echo statement is used to output the data to the

screen.
Output Variables in PHP

▪ Echo statement is used to output the data to the

screen.
▪ Dot is used to concat the statements.
Output Variables in PHP

▪ Echo statement is used to output the data to the

screen.
PHP is Loosely Typed Language

▪ It is not required to tell PHP which data type the

variable is.
▪ PHP automatically associates a data type to the
variable depending on its value.
PHP Variable Scopes

▪ Scope of a variable is part of the script where the

variable can be used.
▪ Variables can be declared anywhere in the script.
▪ Three different variable scopes:
○ Local
○ Global
PHP ECHO & PRINT STATEMENTS

Computer Science
Echo and Print

▪ Two basic ways to get output: “echo” and “print”.

▪ More or less the same. Both used to output data to
the screen.
▪ “echo” has no return value while “print” has a
return value of 1.
▪ “echo” is marginally faster than “print”.
Using Echo
Using Print
PHP DATA TYPES

Computer Science
Data Types in PHP
▪ Variables can store data of different types.
▪ Different data types can do different things.
▪ PHP supports following data types:
○ String ○ Array
○ Integer ○ Object
○ Float (also called double) ○ Null
○ Boolean ○ Resource
PHP String
▪ A string is a sequence of characters.
▪ Can be any text inside quotes.
PHP Integer
▪ A non-decimal number.
▪ 32 bit system: -2147483648 to
2147483647
▪ Must have at least one digit.
▪ Must not have a decimal point.
▪ Can be either positive or negative.
▪ var_dump() returns data type and
value.
PHP Float
▪ A number with a decimal point or a number in
exponential form.
▪ Floating point or Fractional number.
PHP Boolean

▪ Represents two possible states: TRUE or FALSE.

▪ Often used in conditional testing.
▪ $x = true;
▪ $x = false;
PHP Array

▪ Array stores multiple values in one single variable.

▪ array() function is used.
PHP Object

▪ Classes and objects are two main aspects of object-

oriented programming.
▪ A class is a template for objects.
▪ An object is an instance of a class.
PHP Null Value
▪ Special data type which can have only one value:
NULL
▪ A variable of data type NULL is a variable that has no
value assigned to it.
▪ If a variable is created without a value, it is
automatically assigned a value of NULL.
▪ Variable can also be emptied by setting the value to
NULL.
PHP Null Value
PHP Resource
▪ Resource type is not an actual data type.
▪ Storing of a reference to functions and resources.
▪ Example: Using the resource data type is a database
call.
CONSTANTS IN PHP

Computer Science
Constants

▪ Like variables except the value of constants cannot

be changed once they are defined.
▪ Automatically global across the entire script.
Declare Constants
▪ define() function is used.
▪ Syntax:
○ define(name, value, case-insensitive);
■ Name: specifies the name of the constant.
■ Value: specifies the value of the constant
■ Case-insensitive: specifies whether the constant
name should be case-insensitive. Default is
false.
Declare Constants
(case-sensitive)
Declare Constants
(case-insensitive)
OPERATORS IN PHP

Computer Science
Operators

▪ Used to perform operations on variables and values.

○ Arithmetic Operators
○ Assignment Operators
○ Comparison Operators
○ Increment/Decrement Operators
○ Logical Operators
○ String Operators
○ Array Operators
○ Conditional Assignment Operators
PHP Arithmetic Operators
PHP Assignment Operators
PHP Comparison Operators
PHP Comparison Operators
PHP Increment/Decrement
Operators
PHP Logical Operators
PHP String Operators
PHP Conditional Assignment
Operators
CONTROL STATEMENTS IN PHP

Computer Science
Control Statement
▪ Conditional statements that execute a block of
statements if the condition is correct.
▪ The statement inside the conditional block will not
execute unless the condition is satisfied.
○ If statement
○ Nested if statements
○ If…else statement
○ If…elseif…else statement
○ Switch statement
IF Statement
▪ Executes some code if one condition is true.
▪ Used to execute the block of code exist inside the if
statement only.
▪ Syntax:
IF Statement Example
Nested IF Statement
▪ Contains the ‘if’ block inside another ‘if’ block.
▪ The inner ‘if’ statement executes only when
specified condition in outer ‘if’ statement is true.
▪ Syntax: if (condition) {
//code to be executed if condition is true
if (condition) {
//code to be executed if condition is true
}
}
Nested IF Statement Example
IF…ELSE Statement
▪ Executed whether condition is true or false.
▪ Executes one block of code if the specified condition
is true and another block of code if the condition is
false.
▪ Syntax:
IF…ELSE Statement Example
IF…ELSEIF…ELSE Statement
▪ Executes different codes for more than two
conditions.
▪ Syntax:
IF…ELSEIF…ELSE Statement
Example
SWITCH Statement
▪ Used to perform different actions based on different
conditions.
▪ Selects one of many blocks of code to be executed.
▪ Syntax:
SWITCH Statement Example
ITERATIVE STATEMENTS IN PHP

Computer Science
Iterative Statement (Loops)

▪ Used to execute the same block of code again and

again, as long as a certain condition is true.
○ While
○ Do…while
○ For
○ foreach
FOR Loop
▪ Loops through a block of code for a specified
number of times.
▪ Used when times the script should run is known in
advance.
FOR Loop Syntax
▪ Syntax:
for(initialization; condition; increment/decrement){
//code to be executed
}

▪ Initialization: Initialize loop counter value.

▪ Condition: Evaluated for each loop. If true, loop
continues. If false, loop halts.
▪ Increment/Decrement: Increases/decreases loop
counter value.
FOR Loop Example
WHILE Loop
▪ Executes a block of code repeatedly until the
condition is true.
▪ Syntax:
WHILE Loop Example
DO…WHILE Loop
▪ Always execute the block of code once, check the
condition and repeat the loop while the specified
condition is true.
▪ Condition is checked at the end of the loop.
▪ Syntax:
DO…WHILE Loop Example
FOREACH Loop
▪ Loops through a block of code for each element in
an array.
▪ Works only on arrays and is used to loop through
each key/value pair in an array.
▪ Syntax:
FOREACH Loop Example
Break and Continue

▪ Break statement breaks the execution of the loop.

▪ Break statement can be used in all types of loops
and with switch case.
▪ Continue statement breaks one iteration, if a
specified condition occurs and continues with the
next iteration.
Break Example
Continue Example
FUNCTIONS IN PHP

Computer Science
Functions in PHP

▪ A block of statements that can be used repeatedly in

a program.
▪ A function will not execute automatically when a
page loads.
▪ Executed by a call to the function.
▪ Can take inputs as arguments, return some value.
▪ Two types: Library and User-defined.
User-Defined Functions in PHP

▪ A user-defined function declaration starts with the

word function.
▪ Syntax:
User-Defined Function Example
Functions Arguments in PHP

▪ Information passed to functions.

▪ Like a variable.
▪ Specified after function name inside parentheses.
▪ Number of arguments can be added separated by
comma.
Functions Arguments in PHP
PHP Variable Scopes

▪ Three different variable scopes:

○ Local
○ Global
○ Static
Local Scope

▪ A variable declared within a function has a Local

scope.
▪ Can only be accessed within that function.
Global Scope

▪ A variable declared outside a function has a Global

scope.
▪ Can be accessed outside a function.
Static Keyword

▪ When a function is
completed/executed, all of its
variables are deleted.
▪ Use static keyword for a local
variable not to be deleted.
Superglobals

▪ Predefined variables in PHP.

▪ Superglobals are always accessible, regardless of
scope.
○ $GLOBALS ○ $_FILES
○ $_SERVER ○ $_ENV
○ $_REQUEST ○ $_COOKIE
○ $_POST ○ $_SESSION
○ $_GET
ARRAYS IN PHP

Computer Science
Array in PHP
▪ A special variable which can hold more than one
value at a time.
▪ Stores multiple values in one single variable.
▪ array() function is used to create an array.
○ Indexed array: array with a numeric index
○ Associative array: array with named keys
○ Multidimensional array: array within an array
Length of Array in PHP
▪ count() function is used to return the length
(number of elements) of an array.
EXECUTE PHP WITH
XAMPP/WAMP

Computer Science
Execute PHP with XAMPP
▪ Requirements:
○ XAMPP, Notepad++, Browser
▪ Run the Apache and Mysql Services from XAMPP.
▪ Write your php script in Notepad++.
▪ Save your file inside the “htdocs” folder inside the
Xampp folder location.
▪ From your browser, use url according to your xampp
folder structure. Ex: localhost/folder/file.php
Execute PHP with WAMP
▪ Requirements:
○ WAMP, Notepad++, Browser
▪ Run the Apache and Mysql Services from WAMP.
▪ Write your php script in Notepad++.
▪ Save your file inside the “www” folder inside the
wamp folder location.
▪ From your browser, use url according to your wamp
folder structure. Ex: localhost/folder/file.php
FORM HANDLING

Computer Science
HTML Form

▪ An HTML Form is used to collect user input.

▪ The user input is sent to a server for processing.
▪ The user input might needed to be stored in the
database.
▪ Input Types:
○ Text, Number, Password, Radio, Checkbox,
Hidden, Button, Submit
HTML Form Example
Send Data to Server From
Browser (HTML to PHP)
▪ In HTTP protocol, GET and POST methods are used
to transfer data from client to server.
▪ PHP provides two methods for sending data to the
server from a client (browser).
○ GET method
○ POST method
GET Method in PHP

▪ The form is submitted by using GET method.

▪ Passes an array of variables to the current script via
the URL parameters.
▪ Superglobal $_GET is used to receive the data in PHP
script.
GET Method in PHP
GET Method in PHP
(homepage.php)
POST Method

▪ The form is submitted by using POST method.

▪ The data is passed by attaching to the body of HTTP
request.
▪ URL parameters is not required.
▪ Superglobal $_POST is used to receive the data in
PHP script.
POST Method
POST Method
(homepage.php)
When to use GET Method?

▪ Information sent from a form with GET method is

visible to everyone (displayed in URL).
▪ GET has limit on amount of information to send
(about 2000 characters).
▪ GET may be used for sending non-sensitive data.
▪ GET should never be used for sending passwords or
other sensitive information.
When to use POST Method?

▪ Information sent from a form with POST method is

invisible to others (names/values are embedded
within body of HTTP request).
▪ Much secured than the GET request as no one can
see the information submitted.
▪ Has no limits on the amount of information to send.
DATABASE CONNECTIVITY
WITH PHP

Computer Science
Database and PHP

▪ Database is required for a dynamic project as well as

for data management purpose.
▪ PHP supports various kinds of database connectivity.
▪ MySQL is one of them.
▪ After making connection of PHP-MySQL, insertion of
records, deletion of records and updating the
records can be done.
Requirement for Database
Connection
▪ Hostname
▪ Database Name
▪ Database Username
▪ Database Password
▪ Port (if applicable)
Basic Steps involved in
PHP & Database Connection
▪ Connect to a database server.
▪ Use right type of Database. (MySQL)
▪ Send SQL to the database.
▪ Get the results back.
▪ Do something with the results.
▪ Close the database connection.
Establishing Connection with
MYSQL and PHP
▪ Database is connected from PHP by MySQLi
extension.
▪ MySQLi extension only supports MySQL databases.
▪ Prepare a separate connection.php file.
Connection.php file
Credentials and Connection

▪ Connection requires four variables and their values.

○ $servername = “localhost”
○ $database = “database”
○ $username = “username” (default “root”)
○ $password = “password” (default empty)
▪ mysqli_connect() establishes a connection with the
specified database.
▪ mysqli_close() ends the connection.
MAKING SQL QUERIES WITH PHP

Computer Science
Create a Database using
MySQLi
▪ Connection to database server is made.
▪ CREATE DATABASE statement is used to create
database in MySQL.
▪ Execute SQL query by passing it to the PHP
mysqli_query() function. Returns false if failed.
Create a Database using MySQLi
Create a Database using MySQLi
Create a Table using MySQLi

▪ Connection to database server is made.

▪ CREATE TABLE statement is used to create table in
MySQL.
▪ Execute SQL query by passing it to the PHP
mysqli_query() function. Returns false if failed.
Create a Table using MySQLi
Create a Table using MySQLi
Insert Data into Table using
MySQLi
▪ Connection to database server is made.
▪ INSERT INTO statement is used to insert records in
table in MySQL.
▪ Execute SQL query by passing it to the PHP
mysqli_query() function. Returns false if failed.
Insert values in a Table using
MySQLi
Fetching Data from Table using
MySQLi
▪ Connection to database server is made.
▪ SELECT statement is used to fetch records from
table in MySQL.
▪ Execute SQL query by passing it to the PHP
mysqli_query() function. Returns false if failed.
Fetching Data from Table using
MySQLi
▪ Connection to database server is made.
▪ SELECT statement is used to fetch records from
table in MySQL.
▪ Execute SQL query by passing it to the PHP
mysqli_query() function. Returns false if failed.
Fetching
Data
from
Table
using
MySQLi
Fetching Data from Table using
MySQLi
Update Data in Table using
MySQLi
▪ Connection to database server is made.
▪ UPDATE statement is used to update records in
table in MySQL.
▪ Execute SQL query by passing it to the PHP
mysqli_query() function. Returns false if failed.
Update Data in Table using
MySQLi
Delete Data from Table using
MySQLi
▪ Connection to database server is made.
▪ DELETE statement is used to delete records from
table in MySQL.
▪ Execute SQL query by passing it to the PHP
mysqli_query() function. Returns false if failed.
Delete Data from Table using
MySQLi
PHP Require and Include

Computer Science
Require and Include in PHP

▪ include or require takes all the code that exists in

the specified file and copies it into the file that uses
the include or require statement.
▪ Including files is very useful to include same code on
multiple pages.
Require and Include in PHP

▪ Require will produce a fatal error and stop the

script.
▪ Include will only produce a warning and the script
will continue.
▪ Syntax:
○ include ‘filename’;
○ require ‘filename’;
CLIENT SIDE SCRIPTING
WITH JAVASCRIPT

Computer Science
Preface to JavaScript

▪ “Any application that can be written in JavaScript,

will eventually be written in JavaScript.”
-Jeff Atwood (creator of Stack Overflow)

▪ One of the most basic languages used in developing

websites, equally web and mobile applications.
Preface to JavaScript
▪ Invented by Brendan Eich in 1995.
▪ Initial intention was to design a universal
programming language that could serve as a
scripting companion to Java.
▪ Was only used to create interactive pages and was
limited only to the web browser.
▪ Became the pioneer of modern web development.
Introduction to JavaScript
▪ A text-based programming language that can be
used on both client and server side.
▪ Both synchronous and asynchronous programming
language.
○ HTML: structure
○ CSS: style
○ Javascript: responsible for interactive elements
that engage the user.
Introduction to JavaScript

▪ A lightweight, scripting language.

▪ Designed to add interactivity to HTML pages.
▪ Usually embedded directly into HTML pages.
▪ An interpreted language.
▪ Everyone can use JavaScript without purchasing a
license.
Features of JavaScript

▪ Weakly typed language.

▪ Object oriented programming language.
▪ Case sensitive language.
▪ Provides good control to the users over the
browsers.
Purpose of JavaScript
▪ Used to create modern web applications for direct
interaction without reloading the page each time.
▪ Commonly used to modify HTML and CSS
dynamically to update user interface.
▪ A powerful tool for developing mobile applications.
▪ Used to develop browser-based games.
Importance of JavaScript
▪ Compatibility with other languages.
▪ Easy to learn.
▪ Responsiveness.
▪ Programming without compilation.
▪ AJAX (Asynchronous JavaScript and XML).
▪ Large library base.
▪ Compatibility with other browsers.
Adding JavaScript in HTML
▪ JavaScript can be added in HTML by 2 ways:
○ Writing the code directly in HTML.
○ Including it as a link to an external file.
▪ <script> tag is used.
Adding JavaScript directly in
HTML.
Adding JavaScript to a Separate
FIle
How to run JavaScript?
▪ Requirements:
○ HTML
○ Any web browser
JavaScript Syntax
▪ Written inside <script> tag.
▪ Recommended to use <script> tag inside <head> tag.
▪ Ignores whitespaces and line breaks.
▪ Semicolons are optional.
▪ Case sensitivity.
JavaScript Comment
▪ There are two types of comments in JavaScript.
○ Single-line Comment (use //)
○ Multi-line Comment (use /* */)
JavaScript Data Types
JavaScript Data Types
Undefined and NULL
▪ Undefined:
○ A data type whose
variable is not
initialized.
▪ Null:
○ Denotes a null
value.
JavaScript Data Types
Arrays & Objects
▪ Arrays are a special
type of objects.
▪ Arrays use index to
access it “elements”.
▪ Objects use names to
access its “members”.
▪ person.firstname
returns John.
JavaScript Data Types
Arrays & Objects Properties
▪ length, sort(), push.
▪ person.length returns
number of elements.
▪ person.sort() sorts the
array.
▪ person.push(“Jenny”)
adds Jenny to the
array.
JavaScript Data Types
Arrays & Objects Usage
▪ JavaScript does not support associative
array.
▪ Use objects when you want the elements
names to be string.
▪ Use arrays when you want element names
to be numbers.
JavaScript Data Types
Creating Array with new Array()
▪ JavaScript has a built-in array constructor
new Array().
JavaScript Variables
▪ Ways to declare variables in JavaScript:
○ Using var
○ Using let
○ Using const
○ Using nothing
Difference between var and let

▪ Variables defined with

let cannot be
redeclared.
▪ Variables define with
let have block scope.
Const variable

▪ Variables defined with const cannot be redeclared.

▪ Variables defined with const cannot be reassigned.
▪ Variables defined with const have block scope.
▪ Constant can be arrays and objects as well.
Variable Scopes

▪ JavaScript has 3 types of scope:

○ Block scope
○ Function scope (local scope)
○ Global scope
JavaScript Functions

▪ Defined with the function keyword followed by a

name, followed by parentheses ( ).
▪ Parentheses may include parameter name
separated by commas. (parameter1, parameter2,...)
▪ The code to be executed by the function is placed
inside curly brackets: {}
JavaScript Functions Syntax
JavaScript Functions Invocation

▪ The code inside the function will execute when it is

invoked (called).
○ When an event occurs (when a user clicks a
button).
○ When it is invoked from JavaScript code.
○ Automatically (self invoked)
JavaScript Function Example
JavaScript Operators
▪ Self Study
○ Logical Operators
○ Arithmetic Operators
○ Comparison Operators
○ Assignment Operators
JavaScript Control Statements

▪ Self Study
○ IF
○ IF ELSE
○ IF ELSE IF
○ SWITCH
JavaScript Loops

▪ Self Study
○ FOR
○ WHILE
○ DO-WHILE
○ NESTED FOR
JavaScript Input

▪ Input in JavaScript can be taken in following ways:

○ From HTML using <input>, <p> tags etc.
○ From prompt() method.
Taking Input using <input> tag
▪ Use DOM element
document.getElementById(‘id’).value
Taking Input using prompt()
▪ Used to display a prompt box that prompts the user
for the input.
▪ Generally used to take the input from the user
before entering the page.
▪ Syntax: prompt(message, default)
○ Message: It is the text displays to the user.
○ default: An optional parameter. Used to display
the default string value displayed in the textbox.
Taking Input using prompt()
Using parseInt() method
▪ The parseInt method converts its first argument to a
string, parses that string, then returns an integer or
NaN.
▪ Ex:
JavaScript Output

▪ JavaScript can display data in different ways:

○ Writing into an alert box: window.alert()
○ Writing into the browser console: console.log()
○ Writing into HTML output: document.write()
○ Writing into HTML element: innerHTML
JS Output: window.alert()

▪ Use alert box to display output.

▪ Window keyword is optional.
○ Syntax: alert(“string”);
○ Syntax: alert(number);
○ Syntax: alert(variables);
JS Output: console.log()

▪ Use browser console to display the output.

▪ Used for debugging purposes.
▪ Syntax: console.log(“string”);
▪ Syntax: console.log(number);
▪ Syntax: console.log(variables);
JS Output: document.write()

▪ Used to load the HTML from write() method.

▪ Deletes all existing HTML when used on a loaded
document.
▪ Syntax: document.write(“string”);
▪ Syntax: document.write(number);
▪ Syntax: document.write(variables);
JS Output: innerHTML()

▪ Use document.getEelementById(‘id’) method.

▪ innerHTML defines the HTML content.
THE END

Computer Science