Documenti di Didattica
Documenti di Professioni
Documenti di Cultura
� The Java platform differs from most other platforms in that it's a
software-only platform that runs on top of other hardware-based
platforms.
The Java platform has two components:
•The Java Virtual Machine the base for the Java platform and is
ported onto various hardware-based platforms
•The Java Application Programming Interface (API) � a large
collection of ready-made software components that provide many
useful capabilities. It is grouped into libraries of related classes and
interfaces; these libraries are known as packages
Ioana Dogaru - Programming Technologies for Internet
The API and Java Virtual Machine insulate the program from the
underlying hardware.
https://docs.oracle.com/javase/tutorial
In the real world, you'll often find many individual objects all of the
same kind. There may be thousands of other bicycles in existence,
all of the same make and model.
Each bicycle was built from the same set of blueprints and therefore
contains the same components.
In object-oriented terms, we say that your bicycle is an
instance of the class of objects known as bicycles.
The first (left-most) modifier used lets you control what other
classes have access to a member field. For the moment, consider
only public and private. Other access modifiers will be discussed
later.
Overloading Methods
The Java programming language supports overloading methods,
and Java can distinguish between methods with different method
signatures. This means that methods within a class can have the
same name if they have different parameter lists.
Ioana Dogaru - Programming Technologies for Internet
Creating Objects
As you know, a class provides the blueprint for objects; you create
an object from a class. Example: creates an object and assigns it
to a variable:
Point originOne = new Point(23, 94);
Rectangle rectOne = new Rectangle(originOne, 100, 200);
Rectangle rectTwo = new Rectangle(50, 100);
The first line creates an object of the Point class, and the second
and third lines each create an object of the Rectangle class.
Each of these statements has three parts
�Declaration: The code set in bold are all variable declarations
that associate a variable name with an object type.
Instantiation: The new keyword is a Java operator that creates
the object.
Initialization: The new operator is followed by a call to a
constructor, which initializes the new object.
A class may be declared with the modifier public, that class is visible
to all classes everywhere.
Methods form the object's interface with the outside world; the
buttons on the front of your television set, for example, are the
interface between you and the electrical wiring on the other side
of its plastic casing. You press the "power" button to turn the
television on and off.
At the top of the hierarchy, Object is the most general of all classes.
Classes near the bottom of the hierarchy provide more specialized
behavior.
Ioana Dogaru - Programming Technologies for Internet
Polymorphism
The dictionary definition of polymorphism refers to a principle in
biology in which an organism or species can have many different
forms or stages. This principle can also be applied to object-oriented
programming and languages like the Java language. Subclasses of
a class can define their own unique behaviors and yet share some
of the same functionality of the parent class.
Class Members
An abstract class may have static fields and static methods. You can
use these static members with a class reference (for example,
AbstractClass.staticMethod()) as you would with any other class.
Ioana Dogaru - Programming Technologies for Internet
Java has strong support for web development.
Overview of the various choices available
Applets could run entirely client side in the browser, or connect back
to the server it was downloaded from to send and receive data.
CGI Scripts were programs that were executed on the web server
when a request arrived which was to be handled by that CGI script.
The servlet container is running all the time, so are the servlets. In
other words, when a request arrives for a given servlet, that servlet
is already loaded into memory, and ready to process the request.
No starting up of CGI scripts or Java processes.
Tomcat Jetty
Jetty it is small and easy to work with. It also starts and stops very
quickly. Quick restarts can be handy during development.
This wasn't always that easy to do, since HTML generating code
was interleaved with domain logic code. JSP was also a reaction to
the then new web technologies ASP (Active Server Pages) from
Microsoft, and PHP, which were / are both technologies similar to
JSP.
In JSP the roles are reversed. In a JSP you write you HTML as you
would in a standard HTML page. Then you can insert "scriplets"
(little pieces of Java code) inside the HTML. For instance, you can
repeat a piece of HTML, or choose between two pieces of HTML.
Servlet
A servlet is a Java class which extends "HttpServlet" and answers
a HTTP request within a web container.
JavaServer Page
JavaServer Pages (JSP) are files which contain HTML and Java
code. The web container compiles the JSP into a servlet at the first
time the JSP is accessed.
• client-side script: code runs in browser after page is sent back from
server often this code manipulates the page or responds to user actions
• contained within a web page and integrates with its HTML/CSS content
Comments in JavaScript
JavaScript supports both C-style and C++-style comments
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 //-->.
Number type
• integers and real numbers are the same type (no int vs. double)
• same operators: + - * / % ++ -- = += -= *= /= %=
• similar precedence to Java
• many operators auto-convert types: "2" * 3 is 6
Addition operator (+) works for Numeric as well as Strings. e.g. "a"
+ 10 will give "a10".
Ioana Dogaru - Programming Technologies for Internet
Comparison Operators
if (condition) {
statements;
} else if (condition) {
statements;
} else {
statements;
} JS
while (condition) {
statements;
} JS
do {
statements;
} while (condition); JS
• break and continue keywords also behave as in Java but do not use
them in this class!
•
button's text appears inside tag; can also contain images
•
To make a responsive button or other UI control:
1. choose the control (e.g. button) and event (e.g. mouse click) of interest
2. write a JavaScript function to run when the event occurs
3. attach the function to the event on the control
output
<input>
<!-- 'q' happens to be the name of Google's required parameter -->
<input type="text" name="q" value="Colbert Report" />
<input type="submit" value="Booyah!" /> HTML
output
•
input element is used to create many UI controls
•
an inline element that MUST be self-closed
•
name attribute specifies name of query parameter to pass to server
•
type can be button, checkbox, file, hidden, password, radio, reset,
submit, text, ...
•
value attribute specifies control's initial text
output
•
input attributes: disabled, maxlength, readonly, size, value
•
size attribute controls onscreen width of text field
•
maxlength limits how many characters user is able to type into field
output
•
initial text is placed inside textarea tag (optional)
•
required rows and cols attributes specify height/width in characters
•
optional readonly attribute means text cannot be modified
The object
myGameArea
The function
startGame()
invokes the
method start()
of the
myGameArea
object.
The start()
method
creates a
<canvas>
element and
inserts it as the
first childnode
of the <body>
element.
Ioana Dogaru - Programming Technologies for Internet
Understanding JavaScript Constructors
Unlike many other languages, JavaScript doesn't support
classes, but it has constructors to bring similar functionality to
JavaScript.
Constructors are like regular functions, but we use them with
the "new" keyword.
There are two types of constructors:
�native (aka built-in) constructors like Array and Object,
which are available automatically in the execution
environment at runtime;
��and custom constructors, which define properties and
methods for your own type of object.
https://css-tricks.com/understanding-javascript-constructors/
All objects
inherit a
constructor
property
from their
prototype:
Object.defineProperty Function
The Object.defineProperty() can be used inside of a constructor to
help perform all necessary property setup. Consider the following
constructor:
Ioana Dogaru - Programming Technologies for Internet
Ioana Dogaru - Programming Technologies for Internet
In this code we used accessor properties inside the
Object.defineProperty().
Document header
related tags
Document body
related tags
Horizontal Lines
Horizontal lines are used to visually break up sections of a
document. The <hr>tag creates a line from the current position in
the document to the right margin and breaks the line accordingly.
�Again <hr /> tag is an example of the empty element, where you
do not need opening and closing tags, as there is nothing to go in
between them.
� The <hr /> element has a space between the characters hr and
the forward slash. If you omit this space, older browsers will have
trouble rendering the horizontal line, while if you miss the forward
slash character and just use <hr> it is not valid in XHTML
•id
•title
•class
•style
The id Attribute
�The id attribute of an HTML tag can be used to uniquely identify
any element within an HTML page.
Example
Emphasized Text
Anything that appears within <em>...</em> element is displayed as
emphasized text.
Marked Text
Anything that appears with-in <mark>...</mark> element, is
displayed as marked with yellow ink.
Strong Text
Anything that appears within <strong>...</strong> element is
displayed as important text.
Text Abbreviation
You can abbreviate a text by putting it inside opening <abbr> and
closing </abbr> tags. If present, the title attribute must contain this
full description and nothing else.
Text Direction
The <bdo>...</bdo> element stands for Bi-Directional Override
and it is used to override the current text direction.
Ioana Dogaru - Programming Technologies for Internet
Example:
This tag is an empty element and so does not have a closing tag
but it carries information within its attributes.
You can include one or more meta tags in your document based on
what information you want to keep in your document but in general,
meta tags do not impact physical appearance of the document so
from appearance point of view, it does not matter if you include
them or not.
Ioana Dogaru - Programming Technologies for Internet
Adding Meta Tags to Your Documents
You can add metadata to your web pages by placing <meta> tags
inside the header of the document which is represented by <head>
and </head> tags. A meta tag can have following attributes in
addition to core attributes:
Comments do not nest which means a comment can not be put inside
another comment.
You can comment multiple lines by the special beginning tag <!-- and
ending tag --> placed before the first line and end of the last line as
shown in the given example below.
CSS is since 1994 and maintained through a group of people within the
W3C called the CSS Working Group. The CSS Working Group creates
documents called specifications. When a specification has been
discussed and officially ratified by W3C members, it becomes a
recommendation. The World Wide Web Consortium, or W3C is a
group that makes recommendations about how the Internet works
and how it should evolve.
•Selectors
•Box Model
•Backgrounds and Borders
•Image Values and Replaced Content
•Text Effects
•2D/3D Transformations
•Animations
•Multiple Column Layout
•User Interface
h1 {
color: #36CFFF;
}
The Universal Selectors
*{
color: #000000;
}
� This rule renders the content of every element in our document in
black.
Ioana Dogaru - Programming Technologies for Internet
The Descendant Selectors
ul em {
color: #000000;
}
You can apply more than one class selectors to given element.
Example:
#black {
color: #000000;
}
�This rule renders the content in black for every element with id
attribute set to black in our document.
h1#black {
color: #000000;
}
� This rule renders the content in black for only <h1> elements with
id attribute set to black.
input[type = "text"]{
color: #000000;
}
The advantage to this method is that the <input type = "submit" />
element is unaffected, and the color applied only to the desired text
fields.
h1 {
color: #36C;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase;
}
h1, h2, h3 {
color: #36C;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase;
}
The order of the list is irrelevant. All the elements in the selector will
have the corresponding declarations applied to them
Example:
� CSS rules into an
HTML document using the
<style> element.
View in browser
Google Chrome or
Mozilla Firefox
Generic syntax:
View in browser:
Generic syntax:
or:
CSS plays a good role to control image display. You can set the
following image properties using CSS.
� The border property is used to set the width of an image border.
� The height property is used to set the height of an image.
� The width property is used to set the width of an image.
� The -moz-opacity property is used to set the opacity of an
image.
Usually, all these properties are kept in the header part of the HTML
document. Remember a:hover MUST come after a:link and a:visited in
the CSS definition in order to be effective. Also, a:active MUST come
after a:hover in the CSS definition as follows
Mouse
over link!
It will change its color to pink when the user clicks it.