Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
4 views

HTML-CSS-JS

Uploaded by

ppp opp
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
4 views

HTML-CSS-JS

Uploaded by

ppp opp
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 35

Web Application Development.

Introduction to HTML, CSS and JS

Introduction to HTML
Definitions:
 WWW – World Wide Web.

 HTML – Hyper Text Markup Language – The Language of Web Pages on the
World Wide Web. HTML is a text formatting language, defines the semantic
of the page.

 XHTML – every HTML should be close.

 URL – Uniform Resource Locator.

 Browser – A software program which is used to show web pages.

 Tags: Codes enclosed in brackets, HTML Like XML syntax use specific tags to
describe page structure.

Basic HTML Document structure:

<HTML>

<HEAD>

<TITLE>Site Title</TITLE>

</HEAD>

<BODY>

This is what is displayed.

</BODY>

</HTML>

 The HEAD of your document point to above window part. The TITLE of your
document appears in the very top line of the user’s browser. If the user chooses

1 Teacher : Ahmed Omer Bakodah


Web Application Development. Introduction to HTML, CSS and JS

to “Bookmark” your page or save as a “Favorite”; it is the TITLE that is added to


the list.

 The text in your TITLE should be as descriptive as possible because this is what
many search engines, on the internet, use for indexing your site.

 Head Tag contains one or more <meta> tags, meta tags use to describe the page
content, author, character set, ..etc. this also help search engines to classify the
page.

 The BODY tag is most important tag in the page because it is contain the visible
pat of the page, body tag contain some attribute to control the design of entire
page like text=#RRGGBB, background image, background color, but it is good
practice to leave all design stuff to CSS.

2 Teacher : Ahmed Omer Bakodah


Web Application Development. Introduction to HTML, CSS and JS

Headings, Paragraphs, Breaks & Horizontal Rules


Headings <Hx></Hx>:

Inside the BODY element, heading elements H1 through H6 are generally used for
major divisions of the document. Headings are permitted to appear in any order, but
you will obtain the best results when your documents are displayed in a browser if
you follow these guidelines:

1. H1: should be used as the highest level of heading, H2 as the next highest, and so
forth.

2. You should not skip heading levels: e.g., an H3 should not appear after an H1,
unless there is an H2 between them.

3. Headings are block display by default.

Paragraphs <p></p>:

Paragraphs allow you to add text to a document in such a way that it will automatically
adjust the end of line to suite the window size of the browser in which it is being
displayed. Each line of text will stretch the entire length of the window.

Example of <hx> and <p>

<P> Paragraph 1, ….</P>

<H2> Heading 2 </H2>

<P> Paragraph 2, ….</P>

<H3> Heading 3 </H3>

<P> Paragraph 3, ….</P>

<H4> Heading 4 </H4>

<P> Paragraph 4, ….</P>

3 Teacher : Ahmed Omer Bakodah


Web Application Development. Introduction to HTML, CSS and JS

<H5> Heading 5 </H5>

<P> Paragraph 5, ….</P>

<H6> Heading 6</H6>

<P> Paragraph 6, ….</P>

Output

Heading 1
Paragraph 1,….

Heading 2
Paragraph 2,….

Heading 3
Paragraph 3,….
Heading 4
Paragraph 4,….
Heading 5
Paragraph 5,….
Heading 6
Paragraph 6,….

4 Teacher : Ahmed Omer Bakodah


Web Application Development. Introduction to HTML, CSS and JS

Break, <BR>

 Line breaks allow you to decide where the text will break on a line or continue to
the end of the window.

 A <BR> is an empty Element, meaning that it may contain attributes but it does
not contain content.

 The <BR> element does not have a closing tag.

 In XHTML breaks should be self-closing.

Horizontal Rule, <HR>

 The <HR> element causes the browser to display a horizontal line (rule) in your
document.

 In XHTML Horizontal Rules should be self-closing.

Special Characters & Symbols


 These Characters are recognized in HTML as they begin with an ampersand and
end with a semi-colon e.g. &value; the value will either be an entity name or a
standard ASCII character number. They are called escape sequences.

 The next table represents some of the more commonly used special characters. For
a comprehensive listing, visit the W3C’s section on special characters.

Special Character Entity Name Special Character Entity Name

Ampersand &amp; & Greater-than sign &gt; >

Asterisk &lowast; ∗∗ Less-than sign &lt; <

5 Teacher : Ahmed Omer Bakodah


Web Application Development. Introduction to HTML, CSS and JS

Cent sign &cent; ¢ Non-breaking space &nbsp;

Copyright &copy; © Quotation mark &quot; "

Fraction one qtr &frac14; ¼ Registration mark &reg; ®

Fraction one half &frac12; ½ Trademark sign &trade; ™

Lists:
 HTML supplies several list elements. Most list elements are composed of one or
more <LI> (List Item) elements.

Unordered List <ul>: Items in this list start with a list mark such as a bullet.
Browsers will usually change the list mark in nested lists.

 You have the choice of three bullet types: disc(default), circle, square.

 These are controlled in Netscape Navigator by the “TYPE” attribute for the <UL>
element.

<UL TYPE=“square”>

<LI> List item …</LI>

<LI> List item …</LI>

<LI> List item …</LI>

</UL>

 List item …

 List item …

 List item …

6 Teacher : Ahmed Omer Bakodah


Web Application Development. Introduction to HTML, CSS and JS

Ordered List <ol>: Items in this list are numbered automatically by the browser.

 You have the choice of setting the TYPE Attribute to one of five numbering styles.

TYPE Numbering Styles

1 Arabic numbers 1,2,3, ……

a Lower alpha a, b, c, ……

A Upper alpha A, B, C, ……

i Lower roman i, ii, iii, ……

I Upper roman I, II, III, ……

<OL TYPE=“i” START=“3”>

<LI> List item …</LI>

<LI> List item …</LI>

<LI> List item …</LI>

</OL>

Image <img>: This element defines a graphic image on the page.

 Image File (SRC:source): This value will be a URL (location of the image) E.g.
http://www.domain.com/dir/file.ext

 Alternate Text (ALT): This is a text field that describes an image or acts as a label.
It is displayed when they position the cursor over a graphic image.

7 Teacher : Ahmed Omer Bakodah


Web Application Development. Introduction to HTML, CSS and JS

Anchor <a>:

 The tags used to produce links are the <A> and </A>. The <A> tells where the link
should start and the </A> indicates where the link ends. Everything between these
two will work as a link.
 The example below shows how to make the word Here work as a link to yahoo.
Click <A HREF="http://www.yahoo.com">here</A> to go to yahoo.

Tables <table></table>:

 The <TABLE></TABLE> element has mainly three sub-elements:

1. Table Row<TR></TR>.

2. Table Header <TH></TH>.

3. Table Data <TD></TD>.

 The table row elements usually contain table header elements or table data
elements
 Table Data cells are represented by the TD element. Cells can also be TH (Table
Header) elements which results in the contents of the table header cells appearing
centered and in bold text.

Table Data and Table Header Attributes:

 Colspan: Specifies how many cell columns of the table this cell should span.

 Rowspan: Specifies how many cell rows of the table this cell should span.

8 Teacher : Ahmed Omer Bakodah


Web Application Development. Introduction to HTML, CSS and JS

<Table border=1 cellpadding =2>


<tr>
<th> Column 1 Header</th>
<th> Column 2 Header</th>
</tr>
<tr>
<td colspan=2> Row 1 Col 1</td>
</tr>
<tr>
<td rowspan=2>Row 2 Col 1</td>
<td> Row 2 Col2</td>
</tr>
<tr>
<td> Row 3 Col2</td>
</tr>
</table>

Column 1 Header Column 2 Header

Row 1 Col 1

Row 2 Col 1 Row 2 Col 2

Row 3 Col 2

9 Teacher : Ahmed Omer Bakodah


Web Application Development. Introduction to HTML, CSS and JS

Forms:

Forms add the ability to web pages to not only provide the person viewing the
document with dynamic information but also to obtain information from the person
viewing it, and process the information.

 Forms work in all browsers.

 Forms are Platform Independent.

 To insert a form we use the <FORM></FORM> tags. The rest of the form
elements must be inserted in between the form tags.

<HTML>

<HEAD>

<TITLE> Sample Form</TITLE>

</HEAD>

<BODY BGCOLOR=“FFFFFF”>

<FORM ACTION = http://www.xnu.com/formtest.asp>

<P> First Name: <INPUT TYPE=“TEXT” NAME=“fname”


MAXLENGTH=“50”> </P>

<P> <INPUT TYPE=“SUBMIT” NAME=“fsubmit1” VALUE=“Send


Info”> </P>

</FORM>

</BODY>

</HTML>

10 Teacher : Ahmed Omer Bakodah


Web Application Development. Introduction to HTML, CSS and JS

Form Attribute:

 ACTION: is the URL of the CGI (Common Gateway Interface) program that is going
to accept the data from the form, process it, and send a response back to the
browser.

 METHOD: GET (default) or POST specifies which HTTP method will be used to
send the form’s contents to the web server. The CGI application should be written
to accept the data from either method.

 NAME: is a form name used by VBScript or JavaScripts.

Form Elements:

 Form elements have properties: Text boxes, Password boxes, Checkboxes,


Option(Radio) buttons, Submit, Reset, File, Hidden and Image.

 The properties are specified in the TYPE Attribute of the HTML element
<INPUT></INPUT>.

Input Element Properties:

 TYPE= Type of INPUT entry field.

 NAME = Variable name passed in HTTP Request

 VALUE= The data associated with the variable name to be passed to the THHP
Request

Text boxes: Used to provide input fields for text, phone numbers, dates, etc.

<INPUT TYPE= " TEXT " >

Textboxes use the following attributes:

 TYPE: text.

 SIZE: determines the size of the textbox in characters. Default=20 characters.

11 Teacher : Ahmed Omer Bakodah


Web Application Development. Introduction to HTML, CSS and JS

 MAXLENGHT : determines the maximum number of characters that the field will
accept.

Password: Used to allow entry of passwords.

<INPUT TYPE= " PASSWORD " >

Text typed in a password box is starred out in the browser display.

Password boxes use the following attributes:

 TYPE: password.

 SIZE: determines the size of the textbox in characters.

 MAXLENGHT: determines the maximum size of the password in characters.

Hidden: Used to send data to the CGI application that you don’t want the web surfer to
see, change or have to enter but is necessary for the application to process the form
correctly.

<INPUT TYPE=“HIDDEN”>

Nothing is displayed in the browser.

Hidden inputs have the following attributes:

 TYPE: hidden.

 NAME: is the name of the variable to be sent to the CGI application.

 VALUE: is usually set a value expected by the CGI application.

Check Box: Check boxes allow the users to select more than one option.

<INPUT TYPE=“CHECKBOX”>

Checkboxes have the following attributes:

 TYPE: checkbox.

 CHECKED: is blank or CHECKED as the initial status.

12 Teacher : Ahmed Omer Bakodah


Web Application Development. Introduction to HTML, CSS and JS

Radio Button: Radio buttons allow the users to select only one option.

<INPUT TYPE=“RADIO”>

Radio buttons have the following attributes:

 TYPE: radio.

 CHECKED: is blank or CHECKED as the initial status. Only one radio button can be
checked

Push Button: This element would be used with JavaScript to cause an action to take
place.

<INPUT TYPE=“BUTTON”>

Push Button has the following attributes:

 TYPE: button.

 NAME: is the name of the button to be used in scripting.

 VALUE: determines the text label on the button.

Submit: Every set of Form tags requires a Submit button. This is the element causes the
browser to send the names and values of the other elements to the CGI Application
specified by the ACTION attribute of the FORM element.

<INPUT TYPE=“SUBMIT”>

Submit has the following attributes:

 TYPE: submit.

 NAME: value send with the HTTP.

 VALUE: determines the text label on the button, usually Submit Query.

13 Teacher : Ahmed Omer Bakodah


Web Application Development. Introduction to HTML, CSS and JS

Reset: It is a good idea to include one of these for each form where users are entering
data. It allows the surfer to clear all the input in the form.

<INPUT TYPE=“RESET”>

Reset buttons have the following attributes:

• TYPE: reset.

• VALUE: determines the text label on the button, usually Reset.

File Upload: You can use a file upload to allow surfers to upload files to your web
server.

<INPUT TYPE=“FILE”>

File Upload has the following attributes:

• TYPE: file.

<TEXTAREA></TEXTAREA>: is an element that allows for free form text entry.

Browser will display

Text area has the following attributes:

 NAME: is the name of the variable to be sent to the CGI application.

 ROWS: the number of rows to the textbox.

 COLS: the number of columns to the textbox.

<SELECT></SELECT> elements,

 NAME: is the name of the variable to be sent with HTTP request.


 MULTIPLE: the presence of this attribute signifies that the user can make multiple
selections. By default only one selection is allowed.

14 Teacher : Ahmed Omer Bakodah


Web Application Development. Introduction to HTML, CSS and JS

HTML 5 semantic Tags


HTML5 <header> Element

The <header> element specifies a header for a document or section.

The <header> element should be used as a container for introductory content.

You can have several <header> elements in one document.

HTML5 <footer> Element

The <footer> element specifies a footer for a document or section.

A <footer> element should contain information about its containing element.

A footer typically contains the author of the document, copyright information,


links to terms of use, contact information, etc.

HTML5 <section> Element

The <section> element defines a section in a document.

According to W3C's HTML5 documentation: "A section is a thematic grouping of


content, typically with a heading."

A home page could normally be split into sections for introduction, content, and
contact information.

15 Teacher : Ahmed Omer Bakodah


Web Application Development. Introduction to HTML, CSS and JS

HTML5 <article> Element

The <article> element specifies independent, self-contained content.

An article should make sense on its own, and it should be possible to read it
independently from the rest of the web site.

Examples of where an <article> element can be used:

 Forum post
 Blog post
 Newspaper article

HTML5 <nav> Element

The <nav> element defines a set of navigation links.

Notice that NOT all links of a document should be inside a <nav> element. The <nav>
element is intended only for major block of navigation links.

HTML5 <aside> Element

The <aside> element defines some content aside from the content it is placed in (like a
sidebar).

The aside content should be related to the surrounding content.

16 Teacher : Ahmed Omer Bakodah


Web Application Development. Introduction to HTML, CSS and JS

Html5 Forms input


1. Color :
a. <input type="color" name="color" />
2. Date :

a. <input type="date" name="date" required />


3. Time :
a. <input type="time" />
4. Email :
a. <input type="email" />
5. URL :
a. <input type="Url" />
6. Number :
a. <input type="number" />
7. Range :
a. <input type="range" />
8. Week :
a. <input type="Week" />

Form Validation Attributes:

1. Required.
2. Max.
3. Min.

17 Teacher : Ahmed Omer Bakodah


Web Application Development. Introduction to HTML, CSS and JS

Introduction to CSS
Creating Style Sheets

Like HTML, CSS is an interpreted language. When a Web page request is processed by a
Web server, the server’s response can include style sheets, which are simply collections
of CSS instructions. The style sheets can be included in the servers’ response in three
different ways: through external style sheet files, internal style sheets embedded
directly in the Web page, or inline styles sheets.

 External Style Sheets


External Style Sheets are collections of CSS styles stored outside of the Web pages that
will use them —generally files using the .css extension. And usually put in <head> tag via
<link href="SampleStyles.css" rel="stylesheet" type="text/css" />.

 Internal Style Sheets


Internal style sheets are collections of CSS styles that are stored internally in a single
Web page. The styles are located inside of the HTML <style> tag, which is generally
located in the <head> section of the Web page.

 Inline Styles
Inline styles are CSS styles that are applied directly to an individual HTML element using
the element’s Style attribute which is available on most HTML elements.

18 Teacher : Ahmed Omer Bakodah


Web Application Development. Introduction to HTML, CSS and JS

 CSS Syntax

Css Syntax consists of Selector and properties with its value. This is called CSS Rule.

19 Teacher : Ahmed Omer Bakodah


Web Application Development. Introduction to HTML, CSS and JS

Css Selectors

The Selector is the portion of the rule that dictates exactly how the Web browser should
select the elements to apply the style to. CSS includes a variety of types of selectors,
each of which defines a different element selection technique.

 Universal Selectors
The Universal Selector indicates that the style should apply to any element in the Web
page. The sample that follows shows a Universal Selector, which would change the font
of any element that supports the font-family property to Arial.

*{

font-family : Arial;

 Type Selectors
The Type Selector allows you to create a style that applies to a specific type of HTML
element. The style will then be applied to all elements of that type in the Web page. The
following sample shows a Type Selector configured for the HTM paragraph tag, which
will change the font family of all <p> tags in the Web page to Arial.

P{

font-family: Arial;

20 Teacher : Ahmed Omer Bakodah


Web Application Development. Introduction to HTML, CSS and JS

 Descendant Selectors
Descendant Selectors allow you to create styles that target HTML elements that are
descendants of a specific type of element. The following sample demonstrates a style
that will be applied to any <span> tag that is a descendant of a <div>.

div span {

font-family: Arial;

 Child Selectors
The Child Selector is similar to the Descendant Selector except unlike the Descendant
Selector, which searches the entire descendant hierarchy of an element, the Child
Selector restricts its element search to only those elements who are direct children of
the parent element. The following code shows a modification of the Descendant
Selector, making it a Child Selector.

div > span {

font-family: Arial;

 Attribute Selectors
An Attribute Selector allows you to define a style that is applied to elements based on
the existence of element attributes rather than the actual element name. For example,
the following sample creates a style that is applied to any element in the Web page that
has the href attribute set.

21 Teacher : Ahmed Omer Bakodah


Web Application Development. Introduction to HTML, CSS and JS

*[href] {

font-family: Arial;

 Class Selectors
Class Selectors are a special type of CSS selector that allows you to apply a style to any
element with a specific Class name. The Class name is defined in HTML using the Class
attribute, which is present on almost every element. Class Selectors are distinguished
from other Selector types by prefixing them with a single period (.).

.title{

font-size: larger;

font-weight: bold;

 ID Selectors
ID Selectors are another special type of CSS Selector that allows you to create styles that
target elements with specific ID values. ID Selectors are distinguished from other
Selector types by prefixing them with a hash mark (#).

#title {

font-size: larger;

font-weight: bold;

22 Teacher : Ahmed Omer Bakodah


Web Application Development. Introduction to HTML, CSS and JS

Pseudo Classes

CSS also includes a series of pseudo class selectors that give you additional options in
creating Style rules. Pseudo classes can be added to other selectors to allow you to
create more complex rules.

Dynamic Pseudo Classes

The dynamic pseudo classes are special CSS classes that are applied by the browser
based on actions performed by the end user such as hovering over an element,
activating an element, or giving an element focus.

a:hover{

color: Maroon;

a:active{

color: Silver;

a:focus{

color: Olive;

23 Teacher : Ahmed Omer Bakodah


Web Application Development. Introduction to HTML, CSS and JS

Selector Grouping

When creating CSS rules, CSS allows you group several selectors together into a single
rule. The following sample demonstrates a single rule that combines three type
selectors:

h1, h2, h3

color: Maroon;

24 Teacher : Ahmed Omer Bakodah


Web Application Development. Introduction to HTML, CSS and JS

CSS - Backgrounds

This chapter teaches you how to set backgrounds of various HTML elements. You can
set the following background properties of an element −

 The background-color property is used to set the background color of an element.

 The background-image property is used to set the background image of an


element.

 The background-repeat property is used to control the repetition of an image in


the background.

 The background-position property is used to control the position of an image in


the background.

 The background-attachment property is used to control the scrolling of an image


in the background.

 The background property is used as a shorthand to specify a number of other


background properties.

25 Teacher : Ahmed Omer Bakodah


Web Application Development. Introduction to HTML, CSS and JS

CSS - Fonts

This chapter teaches you how to set fonts of a content, available in an HTML element.
You can set following font properties of an element −

 The font-family property is used to change the face of a font.

 The font-style property is used to make a font italic or oblique.

 The font-variant property is used to create a small-caps effect.

 The font-weight property is used to increase or decrease how bold or light a font
appears. The font-weight property provides the functionality to specify how bold a font is. Possible
values could be normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, and 900 .

 The font-size property is used to increase or decrease the size of a font. The font-size
property is used to control the size of fonts. Possible values could be xx-small, x-small, small, medium,
large, x-large, xx-large, smaller, larger, size in pixels or in %.

 The font property is used as shorthand to specify a number of other font


properties.

26 Teacher : Ahmed Omer Bakodah


Web Application Development. Introduction to HTML, CSS and JS

CSS - Text

 The color property is used to set the color of a text.

 The direction property is used to set the text direction.

 The letter-spacing property is used to add or subtract space between the letters
that make up a word.

 The word-spacing property is used to add or subtract space between the words of
a sentence.

 The text-indent property is used to indent the text of a paragraph.

 The text-align property is used to align the text of a document.

 The text-decoration property is used to underline, overline, and strikethrough


text. The following example demonstrates how to decorate a text. Possible values are none, underline,
overline, line-through, blink.

 The text-transform property is used to capitalize text or convert text to uppercase


or lowercase letters. The following example demonstrates how to set the cases for a text. Possible
values are none, capitalize, uppercase, lowercase.

 The white-space property is used to control the flow and formatting of text.

 The text-shadow property is used to set the text shadow around a text.

27 Teacher : Ahmed Omer Bakodah


Web Application Development. Introduction to HTML, CSS and JS

CSS - Links

 The :link signifies unvisited hyperlinks.

 The :visited signifies visited hyperlinks.

 The :hover signifies an element that currently has the user's mouse pointer
hovering over it.

 The :active signifies an element on which the user is currently clicking.

28 Teacher : Ahmed Omer Bakodah


Web Application Development. Introduction to HTML, CSS and JS

CSS - Tables

 The border-collapse specifies whether the browser should control the


appearance of the adjacent borders that touch each other or whether each cell
should maintain its style.

 The border-spacing specifies the width that should appear between table cells.

 The caption-side captions are presented in the <caption> element. By default,


these are rendered above the table in the document. You use the caption-side
property to control the placement of the table caption.

 The empty-cells specifies whether the border should be shown if a cell is empty.

29 Teacher : Ahmed Omer Bakodah


Web Application Development. Introduction to HTML, CSS and JS

CSS - Lists

 The list-style-type allows you to control the shape or appearance of the marker.

 The list-style-position specifies whether a long point that wraps to a second line
should align with the first line or start underneath the start of the marker.

 The list-style-image specifies an image for the marker rather than a bullet point
or number.

 The list-style serves as shorthand for the preceding properties.

 The marker-offset specifies the distance between a marker and the text in the
list.

CSS - Visibility

30 Teacher : Ahmed Omer Bakodah


Web Application Development. Introduction to HTML, CSS and JS

Element Layout and Positioning

CSS is useful not only for styling elements in a page, but also for positioning elements as
well. CSS actually gives you a much more flexible system for positioning elements than
HTML itself. CSS bases the positioning of elements in a Web page on something called
the box model. Once an element’s box behavior has been determined, it can be
positioned using several different techniques.

The CSS Box Model:

A core element of positioning in CSS is the box model. The box model defines how every
element in HTML is treated by the browser as a rectangular box. The box comprises
different parts, including margins, padding, borders, and content. Figure 18-7 shows
how all of these elements are combined to form the box.

31 Teacher : Ahmed Omer Bakodah


Web Application Development. Introduction to HTML, CSS and JS

Positioning CSS Elements:

CSS provides you with three primary positioning mechanisms: Normal, Absolute, and
Relative. Each type offers a different behavior you can use to lay out the elements in your
page. To specify the type of layout behavior you want an element use, you can set the
CSS position property. Each element can have its own position property set, allowing
you to use multiple positioning schemes within the same Web page.

Normal Positioning

Using Normal positioning, block items flow vertically, and inline items flow horizontally,
left to right. This is the default behavior, and is used when no other value is provided for
the position property.

Relative Positioning

Using Relative positioning, elements are initially positioned using Normal layout. The
surrounding boxes are positioned and then the box is moved based on its offset
properties: top, bottom, left, and right.

Absolute Positioning

Absolute positioning works much like relative positioning, except instead of an element
calculating its offset position based on its position in the normal positioning scheme, the
offsets are calculated based on the position of its closest absolutely positioned ancestor. If
no element exists, then the ancestor is the browser window itself.

32 Teacher : Ahmed Omer Bakodah


Web Application Development. Introduction to HTML, CSS and JS

Floating Elements

Another option for controlling the position of elements using CSS is the float property.
The float property allows you to float an element to the left or right side of a block. The
floating block is positioned vertically as it would normally be in normal position, but
horizontally shifted as far left or right as possible.

33 Teacher : Ahmed Omer Bakodah


Web Application Development. Introduction to HTML, CSS and JS

Introduction to JavaScript

Understanding JavaScript

JavaScript is not related to Java, although it is a curly-brace language like Java, C#, C++,
and many other programming languages.

JavaScript is untyped, which means that when you create a variable, you don’t need to
specify its type. This might seem like a feature because you declare a variable with the
var keyword and assign a string to the variable, and later, you can assign a number to
the same variable.

Using variables

One way to store the results of an expression is to assign the results to a variable. A
variable is a named reference to a location in memory for storing data. To create a
variable, use the JavaScript keyword var, as in the following example:

var totalCost = 3 * 21.15;

In this example, a variable named totalCost is created, and the result of 3 * 21.15 is
assigned to the totalCost variable. After this variable is created, it can be an operand in
other expressions, such as the following:

var totalCost = 3 * 21.15;

var tax = totalCost * .05;

34 Teacher : Ahmed Omer Bakodah


Web Application Development. Introduction to HTML, CSS and JS

Using function declarations

A function can be declared by using the function keyword and then providing a name
(also known as an identifier), the optional list of parameters enclosed in parentheses, and
a set of curly braces with the grouping of statements, as follows:

function Add(x, y) {

return x + y;

Introducing jQuery

jQuery is a library of helper functions that are cross browser–compatible. If you feel
comfortable working with JavaScript, you might think that you don’t need jQuery, but
you do. You can minimize the amount of browser-specific code you must write by using
jQuery, an opensource add-in that provides an easy, browser-agnostic means for writing
JavaScript.

jQuery is written in JavaScript, so it is JavaScript. You can read the jQuery source code
to understand how jQuery works. Probably millions of developers use jQuery. It’s easy to
use, it’s stable, it’s fully documented, and it works well with other frameworks.

35 Teacher : Ahmed Omer Bakodah

You might also like