Scribd
Upload
24 views

WEB Manual

This document provides an overview of the HTML head element and common tags used within it. The head element contains metadata about an HTML document and is placed between the <html> and <body> tags. It typically includes the <title>, <style>, <meta>, <link>, and <script> tags, which define the page title, stylesheets, metadata, linked resources, and embedded or linked scripts, respectively. The head does not contain visible page content and is not displayed in the browser window.

Uploaded by

mekideszekarias
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
24 views

WEB Manual

This document provides an overview of the HTML head element and common tags used within it. The head element contains metadata about an HTML document and is placed between the <html> and <body> tags. It typically includes the <title>, <style>, <meta>, <link>, and <script> tags, which define the page title, stylesheets, metadata, linked resources, and embedded or linked scripts, respectively. The head does not contain visible page content and is not displayed in the browser window.

Uploaded by

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

LABORATORY MANUAL

Web Development Laboratory

Department of Health informatics


Medical and Health Science College
Samara University

1
Contents
1 Introduction ............................................................................................................................. 3
2 HTML5 Skeleton ...................................................................................................................... 5
3 HTML Head............................................................................................................................. 7
4 HTML body ............................................................................................................................. 9
5 HTML formatting ................................................................................................................... 11
6 HTML list ................................................................................................................................13
7 HTML table ............................................................................................................................ 15
8 HTML form ............................................................................................................................. 17
9 CSS Introduction.....................................................................................................................21
10 CSS Selectors ....................................................................Error! Bookmark not defined.
11 CSS Padding and Margin ...................................................................................................... 24
12 CSS Positions ........................................................................................................................ 26
13 CSS animations .................................................................................................................... 28
14 JavaScript Introduction and Output .................................................................................... 30
15 JavaScript Array ................................................................................................................... 32

2
1 Introduction

HTML
HTML (HyperText Markup Language) is the most basic building
block of the Web. It defines the meaning and structure of web
content. Other technologies besides HTML are generally used to
describe a web page’s appearance/presentation (CSS) or
functionality/behavior (JavaScript).
"Hypertext" refers to links that connect web pages to one another,
either within a single website or between websites. Links are a
fundamental aspect of the Web. By uploading content to the Internet
and linking it to pages created by other people, you become an
active participant in the World Wide Web.
HTML uses "markup" to annotate text, images, and other
content for display in a Web browser. HTML markup includes
special "elements" such as <head>, <title>, <body>, <header>,
<footer>, <article>, <section>,
<p>, <div>, <span>, <img>, <aside>, <audio>,
<canvas>, <datalist>,<details>, <embed>, <nav>,
<output>, <progress>, <video>, <ul>,<ol>, <li>
and many others.
An HTML element is set off from other text in a document by
"tags", which consist of the element name surrounded by "<" and
">". The name of an element inside a tag is case insensitive. That is,
it can be written in uppercase, lowercase, or a mixture. For
example, the <title> tag can be written as <Title>, <TITLE>, or in
any other way.

CSS

CSS stands for Cascading Style Sheets. CSS describes how HTML elements
are to be displayed on screen, paper, or in other media. CSS saves a lot of
work. It can control the layout of multiple web pages all at once. External
stylesheets are stored in CSS files.
HTML was NEVER intended to contain tags for formatting a web page.
HTML was created to describe the content of a web page, like:

3
<h1>This is a heading</h1>
<p>This is a paragraph.</p>

When tags like <font>, and color attributes were added to the HTML
3.2 specification, it started a nightmare for web developers. Development of
large websites, where fonts and color information were added to every single
page, became a long and expensive process.
To solve this problem, the World Wide Web Consortium (W3C) created
CSS. CSS removed the style formatting from the HTML page.

JavaScript
JavaScript), often abbreviated as JS, is a programming language that con-
forms to the ECMAScript specification. JavaScript is high-level, often just-
in-time compiled, and multi-paradigm. It has curly-bracket syntax, dynamic
typing, prototype-based object-orientation, and first-class functions.
Alongside HTML and CSS, JavaScript is one of the core technologies
of the World Wide Web. JavaScript enables interactive web pages and is
an essential part of web applications. The vast majority of websites use it
for client-side page behavior, and all major web browsers have a dedicated
JavaScript engine to execute it.
As a multi-paradigm language, JavaScript supports event-driven, func-
tional, and imperative programming styles. It has application programming
interfaces (APIs) for working with text, dates, regular expressions, standard
data structures, and the Document Object Model (DOM). However, the
language itself does not include any input/output (I/O), such as network-
ing, storage, or graphics facilities, as the host environment (usually a web
browser) provides those APIs.
Originally used only in web browsers, JavaScript engines are also now
embedded in server-side website deployments and non-browser applications.
Although there are similarities between JavaScript and Java, including
language name, syntax, and respective standard libraries, the two languages
are distinct and differ greatly in design.

4
2 HTML5 Skeleton

Objective
To understand HTML tags to create a skeleton page

Introduction
The basic HTML skeleton is the set of tags required of every HTML
web page you build. The tags that make up the skeleton tell
browsers what kind of file it is reading, and without the skeleton
HTML files will not be rendered correctly in web browsers.

The Four Skeleton Tags There are four tags that need to be
included in the skeleton. These are the structure tags, so called
because they provide browsers with the basic strucure of HTML
documents. The four structure tags are:
The <html> tag starts an HTML file and tells browsers what
kind of file this is.
The <head> tag includes information about the document such
as the name of the file and other technical information like meat
tags and style tags, which will be covered later in the tutorial.
The <title> tag is where you place the title of the web page. The
title tag goes inside the head, between the opening and closing
head tags.
The <body> is where you place all the information that will
actually show up on the web page once it is online and opened in a
browser. Whatever goes in the body of the HTML file is the content
your readers will see when they visit your site.
There can be only one head, title, and body in an HTML document.

Code
1 <! DOC TYPE html>

5
2 < html>
3 <head>
4 <! -- Single line comment -->
5 <t it le > Page Title </ t it le >
6 </head>
7 <body >
8 <! --
9 Multi- line comment
10 -->
11 <h1 >This is a Heading </h1>
12 <p >This is a paragraph. </p>
13 </body>
14 </ htm l>

Explanation
• The <!DOCTYPE html> declaration defines this document to
beHTML5
• The <html> element is the root element of an HTML page

• The <head> element contains meta information about the document

• The <title> element specifies a title for the document

• The <body> element contains the visible page content

• The <h1> element defines a large heading

• The <p> element defines a paragraph

6
3 HTML Head

Objective
To understand HTML tags for a HTML head.

Introduction
The <head> element is a container for metadata (data about data)
and is placed between the <html> tag and the <body> tag.
HTML metadata is data about the HTML document. Metadata
is not displayed. Metadata typically define the document title,
character set, styles, scripts, and other meta information.
The following tags describe metadata: <title>, <style>, <meta>,
<link>,<script>, and <base>.

Code

1 <head>
2 <t it le > Page Title </ t it le >
3 <meta c h ar set = " UTF-8 " >
4 <meta na me= " d e s c r i p t i o n " c o n t e n t = " Free Web
tutorials " >
5 <meta na me= " k e y w o r d s " c o n t en t = " HTML , CSS , XML ,
Java Script " >
6 <meta na me= " au tho r " c o n te n t = " John Doe " >
7 <st yle >
8 h1 {
9 color: red;
10 }
11 </s t yle >
12 <link rel= " stylesheet " href= " mystyle. css " >
13 <sc r ipt >
14 f u n ct io n m y F u n c t i o n {
15 alert (" Hello JEC !");

7
16 }
17 </s c r ipt >
18 <script src= " my Script. js " >< / script>
19 </head>

Explanation
• The <title> element

– defines a title in the browser tab


– provides a title for the page when it is added to favorites
– displays a title for the page in search engine results

• The meta charset define the character set used

• The meta description define a description of your web page for


search engine, social media
• The meta keywords define keywords for search engines

• The meta author define the author of a page

• The <style> element is used to define style information for a


single HTML page
• The <link> element is used to link to external style sheets

• The <script> element is used to define client-side JavaScripts

– either by writing directly in the head


– or by referencing to an external JavaScript file.

8
4 HTML body

Objective
To understand HTML tags for a HTML body

Introduction
All HTML documents must start with a document type declaration:
<!DOC- TYPE html>. The HTML document itself begins with
<html> and ends with </html>. The visible part of the HTML
document is between <body> and </body>.

Code

1 <body >
2 <h1 >This is heading 1 </h1>
3 <h2 >This is heading 2 </h2>
4 <h3 >This is heading 3 </h3>
5 <p >This is a paragraph. </p>
6 <p >This is another paragraph. </p>
7 <a hr ef= " ht tps : // j e c a s s a m . a c . i n / " >Thi s is a link
</a>
8 <br >
9 <img src= " https: // j e c a s s a m . a c . i n /
j e c - d r o n e - v i e w . j p g " alt= " Bird 's v i e w J E C "
width = " 452 " h e igh t = " 190 " >
10 </body>

Explanation
• HTML headings are defined with the <h1> to <h6> tags. <h1>
defines the most important heading. <h6> defines the least
important heading.

9
• HTML paragraphs are defined with the <p> tag

• HTML links are defined with the <a> tag

• The <br> tag inserts a single line break.

• HTML images are defined with the <img> tag. The source file
(src), alternative text (alt), width, and height are provided as
attributes

10
5 HTML formatting

Objective
To understand HTML tags to format text in body

Introduction
HTML defines special elements for defining text with a special
meaning. HTML uses elements like <b> and <i> for formatting
output, like bold or italic text.

Code

1 <body >
2 <p >T he<str ong>st rong< / strong> sounding topic of
the page will be w ri t t e n in < b > b o l d < / b>. The
< e m > e m p h a s i s e d < / em> text will be w r i t ten in
<i>italics< / i>. Texts which are <u>underlined<
/ u> might sometimes be written <del>wrongly< /
del> <ins>incorrectly< / ins>. </p>
3 <p >H<sub> 2 < / sub>O is water. </p>
4 <p >a<sup> 2 < / sup> + b<sup>2< / sup>=c<sup> 2 < / sup> is
the Pythagoras theorem , where c is the longest
side of the triangle , and a & b are the other
two sides
5 <p >We can ins ert s y m b o l s and s m i le y s in our page
using HTML. </p>
6 </body>

Explanation
• <strong> - Important text

• <b> - Bold text

11
• <em> - Emphasized text

• <i> - Italic text

• <del> - Deleted text

• <ins> - Inserted text

• <sub> - Subscript text

• <sup> - Superscript text

12
6 HTML list

Objective
To understand HTML tags for ordered, unordered, and description list.

Introduction
HTML offers web authors three ways for specifying lists of
information. All lists must contain one or more list elements.

Code

1 <body >
2 <p >Unordered list </p>
3 <p >Type 1 </p>
4 <ul >
5 <li> Item 1 </li>
6 <li> Item 2 </li>
7 <li> Item 3 </li>
8 </u l>
9 <p >Type 2 </p>
10 <ul sty le= " l i s t - s t y l e - t y p e : s q u a r e ; " >
11 <li> C of fee </li>
12 <li> Tea </li>
13 <li> Milk </li>
14 </u l>
15 <p >Ordered list </p>
16 <p >Type 1 </p>
17 <ol>
18 <li> Item 1 </li>
19 <ol>
20 <li> S u b I t e m 1.1 </li>
21 <li> S u b I t e m 1.2 </li>
22 <li> S u b I t e m 1.3 </li>
23 </o l>

13
24 <li> Item 2 </li>
25 <li> Item 3 </li>
26 </o l>
27 <dl>
28 <dt> Coffee </dt>
29 <dd> - black hot drink </dd>
30 <dt> Milk </dt>
31 <dd> - white cold drink </dd>
32 </d l>
33 </body>

Explanation
• An unordered list starts with the <ul> tag. Each list item starts
with the <li> tag.
• The CSS list-style-type property is used to define the style of
the list item marker
– disc Sets the list item marker to a bullet (default)
– circle Sets the list item marker to a circle
– square Sets the list item marker to a square
– none The list items will not be marked

• An ordered list starts with the <ol> tag. Each list item starts
with the <li> tag.
• HTML also supports description lists. The <dl> tag defines the
de- scription list, the <dt> tag defines the term (name), and
the <dd> tag describes each term

14
7 HTML table
Objective
To understand HTML tags for a HTML table

Introduction
An HTML table is defined with the <table> tag. Each table row is
defined with the <tr> tag. A table header is defined with the <th>
tag. By default, table headings are bold and centered. A table
data/cell is defined with the
<td> tag.

Code

1 <body >
2 <p >Table 1 </p>
3 <tab le st yle = " w i d t h : 1 0 0 % " >
4 <tr>
5 <th> Firstname </th>
6 <th> Lastname </th>
7 <th> Age </th>
8 </tr>
9 <tr>
10 <td> Jill </td>
11 <td> Smith </td>
12 <td> 50 </td>
13 </tr>
14 <tr>
15 <td> Eve </td>
16 <td> Jackson </td>
17 <td> 94 </td>
18 </tr>
19 </tab le >
20 <p >Table 2 </p>
21 <tab le st yle = " w i d t h : 1 0 0 % " >

13

15
22 <tr>
23 <th> Name </th>
24 <th colspan= " 2 " >Telephone </th>
25 </tr>
26 <tr>
27 <td> Bill Gates </td>
28 <td> 55577854 </td>
29 <td> 55577855 </td>
30 </tr>
31 </tab le >
32 <p >Table 3 </p>
33 <tab le st yle = " w i d t h : 1 0 0 % " >
34 <tr>
35 <th> Name: </th>
36 <td> Bill Gates </td>
37 </tr>
38 <tr>
39 <th rowspan= " 2 " >Telephone: </th>
40 <td> 55577854 </td>
41 </tr>
42 <tr>
43 <td> 55577855 </td>
44 </tr>
45 </tab le >
46 </body>

Explanation
• Each table row is defined with the <tr> tag. A table header is
defined with the <th> tag. By default, table headings are bold
and centered. A table data/cell is defined with the <td> tag.
• The <td> elements are the data containers of the table. They
can contain all sorts of HTML elements; text, images, lists,
other tables, etc.
• Use the colspan attribute to make a cell span many columns

• Use the rowspan attribute to make a cell span many rows.

16
8 HTML form

Objective
To understand HTML tags for HTML forms

Introduction
An HTML form contains form elements. Form elements are different
types of input elements, like: text fields, checkboxes, radio buttons,
submit buttons, and more.

Code

1 <body >
2 <form a c t i o n = " n e x t _ p a g e . p h p " m e t h o d = " GET " >
3 <input name = " fname " typ e= " text " >
4 <input name = " lname " typ e= " text " value= " Smi th "
>
5 <input name = " email " typ e= " emai l " p l a c e h o l d e r =
" Your email id" required />
6 <input name = " p a s s w or d " typ e= " p a s s w o r d "
placeholder= " Password " required />
7 <se le c t name= " cars " >
8 <o p t io n value= " tata " >Tata </o p t io n >
9 <o p t io n value= " m aru ti " > M a r u t i </opt io n >
10 <o p t io n value= " fiat " >Fiat </o p t io n >
11 <o p t io n value= " m a h i n d r a " s e l e c t e d > M a h i n d r a
</o p t io n >
12 </se le c t >
13 <hr />
14 <textarea name= " address " rows= " 4 " cols= " 30 "
>Your address </text area>
15 <hr />
16 <input type = " radio " nam e= " gen der " va lue = " male
" > Male <br />

15

17
17 <input type = " radio " nam e= " gen der " va lue = "
female " checked> Female <br />
18 <hr />
19 <input type = " c h e c k bo x " nam e= " v e h i c l e _ b i k e "
value= " Bike " > I want a bike <br />
20 <input type = " c h e c k bo x " nam e= " v e h i c l e _ c a r "
value= " Car " > I want a car <br />
21 R a t i n g : <inp ut type= " number " nam e= " q u a n t i t y "
min= " 1 " max= " 5 " > <br />
22 S i g n a t u r e : <in put type= " file " name = " my File " >
23 <input type = " reset " >< br />
24 <input type = " subm it " value = " Sub mi t " >
25 </body>

Explanation
• The HTML <form> element defines a form that is used to
collect user input
• The form-handler is typically a server page with a script for
processing input data. The form-handler is specified in the
form’s action attribute
• The method attribute specifies the HTTP method (GET or
POST) to be used when submitting the form data
• <input type="text"> defines a one-line text input field

• The value attribute specifies the initial value for an input field

• The placeholder attribute specifies a hint that describes the


expected value of an input field (a sample value or a short
description of the format). The hint is displayed in the input field
before the user enters a value. The placeholder attribute works
with the following input types: text, search, url, tel, email, and
password.
• The required attribute specifies that an input field must be
filled out before submitting the form. The required attribute
works with the following input types: text, search, url, tel,
email, password, date pickers, number, checkbox, radio, and
file.
• <input type="password"> defines a password field. The
characters in a password field are masked (shown as asterisks
or circles).
• <input type="radio"> defines a radio button. Radio buttons let
a user select ONE of a limited number of choices

18
• The <select> element defines a drop-down list

19
• The <option> elements defines an option that can be selected.
By default, the first item in the drop-down list is selected. To
define a pre-selected option, add the selected attribute to the
option
• The <textarea> element defines a multi-line input field (a text area)

• <input type="checkbox"> defines a checkbox. Checkboxes let


a user select ZERO or MORE options of a limited number of
choices
• The <input type="file"> defines a file-select field and a
"Browse" but-ton for file uploads
• <input type="reset"> defines a reset button that will reset all
form values to their default values
• <input type="submit"> defines a button for submitting form
data to a form-handler.

20
9 CSS Introduction
Objective
To understand CSS attributes for inline CSS

Introduction
CSS is a language that describes the style of an HTML
document. CSSdescribes how HTML elements should be
displayed.

Code

1 <body style= " ba ckgrou nd - color: pow derblue; " >


2 <h1 style= " color: blue; " >This is a heading </h1>
3 <p style= " color: red; " >>This is a paragraph. </p>
4 <p style= " font- family: impact; " >This is a
paragraph. </p>
5 <p style= " font- family: courier; " >This is a
paragraph. </p>
6 <p style= " font- size: 48 px; " >This is a paragraph.
</p>
7 <p style= " text- align: center; " >Centered paragraph.
</p>
8 </body>

Explanation
• The CSS background-color property defines the background
color foran HTML element.
• The CSS color property defines the text color for an HTML element

• The CSS font-family property defines the font to be used for an


HTML element

• The CSS font-size property defines the text size for an HTML element

• The CSS text-align property defines the horizontal text alignment for
an HTML element.

21
10 CSS Selectors

Objective
To understand CSS selectors elements

Introduction
CSS selectors are used to "find" (or select) the HTML elements you
want to style. We can divide CSS selectors into five categories:
Simple selectors (select elements based on name, id, class),
Combinator selectors (select ele- ments based on a specific relationship
between them), Pseudo-class selectors (select elements based on a
certain state), Pseudo-elements selectors (select and style a part of an
element), Attribute selectors (select elements based on an attribute
or attribute value).

Code

1 <head>
2 <st yle >
3 body {
4 background- image: url (" image. jpg ");
5 }
6 h1 {
7 color: red;
8 text- align: center;
9 }
10 p {
11 color: blue;
12 }
13 # myID {
14 border- style: solid;
15 border- width: 1 px;
16 border- color: tomato;
17 color: # ff6347;

22
18 }
19 . class_1 {
20 color: rgb (255 , 99 , 71) ;
21 }
22 . class_2 {
23 color: rgba (255 , 99 , 71 , 0.5) ;
24 }
25 </st yle >
26 </head>
27 <body >
28 <h1 >This is a heading </h1>
29 <p >This is a paragraph. </p>
30 <p id= " myID " >This is a p a r a g r a p h . </p>
31 <p class= " class_1 " >This is a paragraph. </p>
32 <p class= " class_1 " >This is a paragraph. </p>
33 <p class= " class_2 " >This is a paragraph. </p>
34 <p class= " class_2 " >This is a paragraph. </p>
35 </body>

Explanation
• The body is given an background image

• The h1 element will be colored red,and center-aligned.

• All p elements will be colored blue, unless overwritten.

• The id selector uses the id attribute of an HTML element to


select a specific element. The id of an element is unique within
a page, so the id selector is used to select one unique element.
To select an element with a specific id, write a hash (#)
character, followed by the id of theelement.
• The class selector selects HTML elements with a specific class
at- tribute. To select elements with a specific class, write a
period (.) character, followed by the class name.

23
11 CSS Padding and Margin

Objective
To understand CSS tags for padding and margin

Introduction
The CSS margin properties are used to create space around elements,
outside of any defined borders. The CSS padding properties are
used to generate space around an element’s content, inside of any
defined borders. With CSS, you have full control over the margins
and padding. There are properties for setting the margin and
padding for each side of an element (top, right, bottom, and left).

Code

1 <head>
2 <st yle >
3 . class_1 {
4 background: red;
5 padding- top: 100 px;
6 padding- left: 50 px;
7 }
8 . class_2 {
9 background: blue;
10 margin- top: 100 px;
11 margin- left: 50 px;
12 }
13 </st yle >
14 </head>
15 <body >
16 <p class= " class_1 " >This is a paragraph. </p>
17 <p class= " class_2 " >This is a paragraph. </p>
18 </body>

24
Explanation
• The CSS padding properties are used to generate space
around anelement’s content, inside of any defined borders.
• The CSS margin properties are used to create space around
elements, outside of any defined borders.

25
12 CSS Positions

Objective
To understand CSS tags to position elements in a page

Introduction
The position property specifies the type of positioning method used
for anelement (static, relative, fixed, absolute or sticky).

Code

1 <head>
2 <st yle >
3 . fixed_header {
4 position: fixed;
5 height: 100 px;
6 }
7 . class_2 {
8 position: absolute;
9 top: 500 px;
10 left: 0 px;
11 width: 100 px;
12 }
13 </st yle >
14 </head>
15 <body >
16 <header class= " fixed_header " >This is a fixed
header. </header>
17 <a side c las s= " s h a r e _ b u t t o n " >S ha re on F a c e b o o k
</asid e >
18 </body>

26
Explanation
• An element with position: fixed; is positioned relative to the
view- port, which means it always stays in the same place even
if the page is scrolled. The top, right, bottom, and left
properties are used to position the element. A fixed element
does not leave a gap in the page where it would normally have
been located.
• An element with position: absolute; is positioned relative to the
near- est positioned ancestor (instead of positioned relative to the
view-port, like fixed). However; if an absolute positioned
element has no posi- tioned ancestors, it uses the document
body, and moves along with page scrolling.

27
13 CSS animations

Objective
To understand CSS tags for animation

Introduction
CSS allows animation of HTML elements without using JavaScript or Flash!
An animation lets an element gradually change from one style to another.
You can change as many CSS properties you want, as many times you want.

Code

1 <head>
2 <st yle >
3 div {
4 width: 100 px;
5 height: 100 px;
6 background- color: red;
7 position: relative;
8 animation - name: example;
9 animation- duration: 4 s;
10 an imatio n - ite ration - count: 2;
11 animation - direction: alternate;
12 }
13 @ keyframes example {
14 0% { background - color: red; left: 0 px;
top: 0 px; }
15 25% { bac kgroun d - color: yellow;
left: 200 px; top: 0 px; }
16 50% { background- color: blue; left: 200 px;
top: 200 px; }
17 75% { background- color: green; left: 0 px;
top: 200 px; }

28
18 100% { background - color: red; left: 0 px;
top: 0 px; }
19 }
20 </st yle >
21 </head>
22 <body >
23 <div > </d iv>
24 </body>

Explanation
• When you specify CSS styles inside the @keyframes rule, the
animation will gradually change from the current style to the
new style at certain times. To get an animation to work, you
must bind the animation to an element.
• Specifies the name of the keyframe you want to bind to the selector.

• The animation-duration property defines how long time an


animation should take to complete. If the animation-duration
property is not specified, no animation will occur, because the
default value is 0s (0 seconds). In the example above we have
specified when the style will change by using the keywords
"from" and "to" (which represents 0% (start) and 100%
(complete)).

• The animation-iteration-count property specifies the number of


times an animation should run.
• The animation-direction property specifies whether an animation
should be played forwards, backwards or in alternate cycles.

29
14 JavaScript Introduction and Output

Objective
To understand JavaScript function to display output

Introduction
JavaScript is the programming language of HTML and the Web.
JavaScript can "display" data in different ways: Writing into an
HTML element, us- ing innerHTML; Writing into the HTML output
using document.write(); Writing into an alert box, using
window.alert(); Writing into the browser console, using
console.log().

Code

1 <head>
2 <sc r ipt >
3 f u n ct io n m y F u n c t i o n {
4 alert (" Hello JEC !");
5 document. get Element By Id (" myID "). inner HTML = "
This text goes in myID ";
6 console. log (" Finished displaying alert and
inner HTML ");
7 }
8 </s c r ipt >
9 </head>
10 <body >
11 <p id= " myID " >< / p>
12 <button onclick= " my Function ()" >Click Here </button>
13 </body>

30
Explanation
• You can use an alert box to display data

• To access an HTML element, JavaScript can use the


document.getElementById(id) method. The id attribute defines the HTML
element. The innerHTML property defines the HTML content.

• For debugging purposes, you can use the console.log() method


to dis- play data.

31
15 JavaScript Array

Objective
To understand arrays and related methods in JavaScript

Introduction
JavaScript arrays are used to store multiple values in a single
variable. An array can hold many values under a single name, and
you can access the values by referring to an index number.

Code

1 <head>
2 <sc r ipt >
3 var fruits = [" Mango ", " Apple ", " Grapes "];
4 console. log (" The first element is " + fruits [0]) ;
5 fruits [0] = " Banana ";
6 console. log (" The first element is changed to " +
fruits [0]) ;
7 var popped = fruits. pop ();
8 console. log (" The last element i.e. " + popped +" was
popped from the array. ");
9 fruits. push (" Kiwi ");
10 console. log (" The length of the array is " +
fruits. length );
11 fruits. sort ();
12 console. log (" Sorted: " + fruits );
13 fruits. reverse ();
14 console. log (" Reversed: " + fruits );
15 var points = [40 , 100 , 1 , 5 , 25 , 10];
16 p o i n t s . s o r t ( fu n c t io n (a , b ) { return a - b }) ;
17 </s c r ipt >
18 </head>

32
Explanation
• Using an array literal is the easiest way to create a JavaScript
Array. Spaces and line breaks are not important. A declaration
can span multiple lines.
• You access an array element by referring to the index number.
Array indexes start with 0. [0] is the first element. [1] is the
second element.
• The value of an index can be changed after declaration.

• The pop() method removes the last element from an array. The
pop() method returns the value that was "popped out".
• The push() method adds a new element to an array (at the end).

• The length property of an array returns the length of an array


(the number of array elements).
• The sort() method sorts an array alphabetically. However, if
numbers are sorted as strings, "25" is bigger than "100",
because "2" is bigger than "1".
• The reverse() method reverses the elements in an array. You
can useit to sort an array in descending order
• The sort() method will produce incorrect result when sorting
numbers. You can fix this by providing a compare function.

33
34

You might also like