Advanced Web Programming
Lecture 1
What is Web Programming?
• Web programming is used to build:
• web pages
• web sites
• web applications
What is Web Programming?
• Web Page
A document containing text and graphics created with HTML that is part of a
group of hypertext documents or resources that can be accessed through a web
browser on the internet.
What is Web Programming?
• Web Site
A collection of related web pages found at a single address.
A URL serves as the top-level address of a Web site and points to that Web
site's home page. That page serves as a reference point, containing pointers to
additional HTML pages or links to other Web sites.
What is Web Programming?
• Web Application
A web application is a set of web pages that are generated in response to user
requests.
The Internet has many different types of web applications, such as:
search engines
online stores
news sites
games, etc
Intro to Web Programming
• Hypertext Markup Language, or HTML, is the language that the web browser
converts into the web pages of a web application.
• Hypertext Transfer Protocol, or HTTP, is the protocol that web browsers and
web servers use to communicate.
Intro to Web Programming
Types of web pages:
• static web page
• dynamic web page
Intro to Web Programming
• Static Web Pages
A static web page is an HTML document that’s stored in a file and does not
change in response to user input. Static web pages have a filename with an
extension of .htm or .html
Intro to Web Programming
• Dynamic Web Pages
A dynamic web page is an HTML document that’s generated by a web
application. Often, the web page changes according to parameters that are
sent to the web application by the web browser.
Basic HTML
Defines the content and structure of information on a page
Not the same a presentation (appearance in the browser)
Surrounds text content with opening and closing tags
Each tag’s name represents an HTML element
Syntax: <tagname>Content goes here...</tagname>
Most whitespace is collapsed or ignored in HTML
We will use HTML5 syntax
18
Structure of HTML page
DOCTYPE tells browser to interpret <!DOCTYPE html>
code as HTML5 <html>
<head>
HTML page is save in a file with information about the page
</head>
extension .html
The header describes the page, and <body>
page contents
the body holds the page’s content </body>
</html>
19
Page title: <title>
Describes the title of the page <!DOCTYPE html>
Displayed in the Web browser’s <html>
<head>
title bar and when bookmarking a <title>Introduction to HTML </title>
</head>
page
<body>
page contents
</body>
</html>
20
Paragraph: <p>
Describes a paragraph of text <!DOCTYPE html>
(block element) <html>
<head>
This is placed within the body of <title>Introduction to HTML </title>
</head>
the page
<body>
Examples:
<p>This is a paragraph of text </p>
http://www.w3schools.com/tags/tryit.as </body>
p?filename=tryhtml_paragraphs2 </html>
21
Headings: <h1>, <h2>, … <h6>
<!DOCTYPE html>
Separate major areas of a page <html>
(block element) <head>
<title>Introduction to HTML </title>
This is placed within the body of </head>
the page
<body>
Examples: <p>This is a paragraph of text </p>
http://www.w3schools.com/tags/tryit.as <h1>University of Smart People</h1>
<h2>Department of Computer Science</h2>
p?filename=tryhtml_headers <h3>Sponsored by Big Rich Corporation</h3>
<h6>We teach the best stuff here!</h6>
</body>
</html>
29
Questions?
Introduction to
JavaScript
Lecture 2
Dr. Abeer Saber
Topics
What is JavaScript?
Why JavaScript?
Including JavaScript in HTML
Hello World Example Script
JavaScript Comments
JavaScript Statements
JavaScript Operator
Data types
Conditional Statements
2
What is JavaScript?
JavaScript is a dynamic programming
language that's used for web development, in
web applications, for game development, and
lots more. It allows you to implement dynamic
features on web pages that cannot be done
with only HTML and CSS.
3
What is JavaScript?
Many browsers use JavaScript as a scripting
language for doing dynamic things on the
web. Any time you see a click-to-show
dropdown menu, extra content added to a
page, and dynamically changing element
colors on a page, to name a few features,
you're seeing the effects of JavaScript.
What is JavaScript?
Created by Netscape
Originally called LiveWire then LiveScript
A client-side scripting language
Client-side refers to the fact that it is executed in
the client (software) that the viewer is using. In
the case of JavaScript, the client is the browser.
A server-side language is one that runs on the
Web server. Examples: PHP, Python
Interpreted on-the-fly by the client
Each line is processed as it loads in the browser
5
JavaScript is not Java
Completely different types of languages that
just happen to be similarly named
JavaScript - programs are interpreted in the
browser
Java - programs are compiled and can be run as
stand alone applications
Why JavaScript?
It’s easier to learn than most programming
languages
It allows you to make interactive Web pages
It can be fun!
7
Including JavaScript in HTML
Two ways to add JavaScript to Web pages
Use the <script>…</script> tag
Include the script in an external file -- more about
this later in the semester
Initially, we will only use the <script>…</script>
tag
Hello, World!
Typically, in any programming language, the
first example you learn displays “Hello,
World!”
We are going to take a look at a Hello World
example and then examine all of its parts.
9
Hello World in JavaScript
10
Hello World Screenshot
11
The <script>…</script> tag
The code for the script is contained in the
<script>…</script> tag
<script type="text/javascript">
.
.
.
</script>
12
Hiding JavaScript from Older
Browsers
Some older browsers do not support JavaScript
We need to tell those browsers to ignore what is in the
<script> tag
<script type="text/javascript">
<!--
some JavaScript code
//-->
</script>
13
Displaying text
The document.write() method writes a string
of text to the browser
<script type="text/javascript">
<!--
document.write("<h1>Hello, world!</h1>");
//-->
</script>
14
document.write()
Writing into the HTML output using document.write().
Ends in a semicolon
document.write("<h1>Hello,world!</h1>");
Enclosed in quotes --
denotes a "string"
15
Comments in JavaScript
Two types of comments
Single line
Uses two forward slashes (i.e. //)
Multiple line
Uses /* and */
16
Single Line Comment Example
<script type="text/javascript">
<!--
// This is my JavaScript comment
document.write("<h1>Hello!</h1>");
//-->
</script>
17
Multiple Line Comment
Example
<script type="text/javascript">
/* This is a multiple line comment.
* The star at the beginning of this line is optional.
* So is the star at the beginning of this line.
*/
document.write("<h1>Hello!</h1>");
</script>
18
Find the Bug!
<script type="text/javascript">
<!--
/* This is my JavaScript comment
* that spans more than 1 line.
*
document.write("<h1>Hello!</h1>");
//-->
</script> 19
How to use JavaScript?
• Inline
<button type="button"
onclick="document.getElementById('demo').style.display='none'
">Click Me!</button>
• Internal
<script>
document.getElementById("demo").innerHTML = "My
First JavaScript";
</script>
• External
<script src="myScript.js"></script>
• Writing into an alert box, using window.alert().
<script>window.alert(5 + 6);</script>
• Writing into the browser console,
using console.log().
<script>console.log(5 + 6);</script>
JavaScript Statements
JavaScript statements are composed of:
Expressions, Values, Operators, Keywords, and
Comments.
1. JavaScript variables are containers for storing data values. In
this example, x, y, and z, are variables:
var name = “CodersTrust”;
var age = 5;
var x = 10;
var y = 20;
var z = x + y ;
var person = "John Doe", carName = "Volvo", price = 200;
Naming Convention of Variable :
• Names can contain letters, digits, underscores, and dollar
signs.
• Names must begin with a letter
• Names can also begin with $ and _ (but we will not use it
in this tutorial)
• Names are case sensitive (y and Y are different variables)
• Reserved words (like JavaScript keywords) cannot be used
as names
JavaScript Arithmetic Operators
Operator Description
+ Addition
- Subtraction
* Multiplication
/ Division
% Modulus (Division Remainder)
++ Increment
-- Decrement
JavaScript Assignment Operators
Operator Example Same As
= x=y x=y
+= x += y x=x+y
-= x -= y x=x-y
*= x *= y x=x*y
/= x /= y x=x/y
%= x %= y x=x%y
JavaScript Logical Operators
Operator Description
&& logical and
|| logical or
! logical not
JavaScript Comparison Operators
Operator Description
== equal to
=== equal value and equal type
!= not equal
!== not equal value or not equal type
> greater than
< less than
>= greater than or equal to
<= less than or equal to
? ternary operator
Data types :
The latest ECMAScript standard defines seven data
types:
Six data types that are primitives:
• Boolean (E.g.) var x = true; var y = false;
• Null (E.g) var x = null;
• Undefined (E.g.) var x;
• Number (E.g.) var x = 10;
• String (E.g.) var x = “I want to learn JavaScript”;
• Object
Conditional Statements
<script>
var number= 10;
if (number%2 == 0){
document.write("Even Number");
}
else {
document.write("Odd Number");
}
</script>
<script type="text/javascript">
var marks = '60';
switch (marks)
{
case '80': document.write("A+");
break;
case '70': document.write("A");
break;
case '60': document.write("A-");
break;
default: document.write("Fail")
}
</script>
