Scribd
Upload
10 views49 pages

html

HTML, or Hyper Text Markup Language, is the standard markup language for creating web pages, consisting of elements that structure the content. A simple HTML document includes essential components like the <html>, <head>, and <body> tags, with the <head> containing metadata and the <body> displaying the content. Additionally, HTML forms allow user input through various controls, and the document outline enhances accessibility and search engine optimization.

Uploaded by

pavithra arivu
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
10 views49 pages

html

HTML, or Hyper Text Markup Language, is the standard markup language for creating web pages, consisting of elements that structure the content. A simple HTML document includes essential components like the <html>, <head>, and <body> tags, with the <head> containing metadata and the <body> displaying the content. Additionally, HTML forms allow user input through various controls, and the document outline enhances accessibility and search engine optimization.

Uploaded by

pavithra arivu
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 49

HTML

 HTML stands for Hyper Text Markup Language


 HTML is the standard markup language for creating Web pages
 HTML describes the structure of a Web page
 HTML consists of a series of elements
 HTML elements tell the browser how to display the content
 HTML elements label pieces of content such as "this is a heading", "this
is a paragraph", "this is a link", etc.

A Simple HTML Document


<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

Output:

This is a Heading

This is a paragraph.

Example Explained

 The <!DOCTYPE html> declaration defines that this document is an


HTML5 document
 The <html> element is the root element of an HTML page
 The <head> element contains meta information about the HTML page
 The <title> element specifies a title for the HTML page (which is shown
in the browser's title bar or in the page's tab)
 The <body> element defines the document's body, and is a container
for all the visible contents, such as headings, paragraphs, images,
hyperlinks, tables, lists, etc.
 The <h1> element defines a large heading
 The <p> element defines a paragraph

What is an HTML Element?

An HTML element is defined by a start tag, some content, and an end tag:
<tag name> Content goes here... </tag name>

The HTML element is everything from the start tag to the end tag:

<h1>My First Heading</h1>

<p>My first paragraph</p>

Start tag Element content End tag

<h1> My First Heading </h1>

<p> My first paragraph. </p>

<br> none none

Note: Some HTML elements have no content (like the <br> element). These
elements are called empty elements. Empty elements do not have an end
tag!

HTML Page Structure


Below is a visualization of an HTML page structure:

<html>

<head>

<title>Page title</title>

</head>

<body>

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

<p>This is another paragraph.</p>

</body>
</html>

Note: The content inside the <body> section will be displayed in a browser.
The content inside the <title> element will be shown in the browser's title
bar or in the page's tab.

HTML Document Outline


HTML document outline is a hierarchy of headings (h1-h6) inside a webpage
which describes the structure of that page. Each heading creates a level in
the outline. A heading represents a section of a webpage and leads the texts
that follow it. The HTML document outline begins with the highest ranking of
heading and it goes downward and it may include sub headings.
The outline of a web page is like the table of content of that page, though it
is not visible in the web page directly.
The following image is a sample HTML document outline-

Learn Web Development

1. Client side language


1. HTML
2. CSS
3. JavaScript
4. jQuery

Server side language

5. Programming language: PHP


6. Database: My SQL

Why HTML document outline is important?

HTML document outline has some benefits-

 Screen reader and other accessible tools use this outline to obtain the
structure of a web page and provide this information to the visually impaired
users to navigate the web page easily.
 Search engines use outline of a page to understand its structure better.
 Properly outlined webpage is easy to navigate from one section to other
using keyboard.
 Using HTML document outline allows you to use more than six levels of
headings, actually as many as you want.
Rules of outlining an HTML document?

When outlining a webpage using, remember the following points (it includes
HTML outline algorithm’s rules)-

 Heading elements (h1 to h6) and sectioning elements (section, article, nav,
and aside) are used to outline a webpage.
 Each sectioning element demarcates a separate section.
 Separated sectioning elements create same level in the document outline no
matter which heading elements are used inside the sectioning elements. See
the (a) diagram in the following image-

 Nested section creates a sub level under its parent. See the (b) diagram in
the above image.
 Each sectioning element has its own scope of heading (h1 – h6). That means
a webpage may have more than one h1 or other heading elements.
 Body element is the root section which comprises all the remaining sections.
 The first heading which is outside of any sectioning element is the heading
of the body root section.
 Any sectioning element inside the body element or the other sectioning
elements is the nested section of the body or other sectioning elements
respectively.
 If there is more than one heading in a section, the first one is the heading of
that section.
How to view an outline of a web page

You can use the following online based HTML5 outliner tool to view outline of
your web page. Simply paste the url of the page or paste the HTML source
code in the box- http://gsnedders.html5.org/outliner/
Example of outlining an HTML document
At first look at the following HTML which is valid codes for both HTML5 and
the previous versions.
1 <body>

2 <h1>Learn Web Development</h1>

3 <h2>Client side language</h2>

4 <h3>HTML</h3>

5 <h3>CSS</h3>

6 <h3>JavaScript</h3>

7 <h3>jQuery</h3>

9 <h2>Server side language</h2>

10 <h3>Programming language: PHP</h3>

11 <h3>Database: MySQL</h3>

12 </body>

HTML Head
The HTML <head> element is used as a container for metadata (data about
data). It is used between <html> tag and <body> tag.

The head of an HTML document is a part whose content is not displayed in


the browser on page loading. It just contains metadata about the HTML
document which specifies data about the HTML document.

An HTML head can contain lots of metadata information or can have very
less or no information, it depends on our requirement. But head part has a
crucial role an HTML document while creating a website.
Metadata defines the document title, character set, styles, links, scripts, and
other meta information.

Following is a list of tags used in metadata:

o <title>
o <style>
o <meta>
o <link>
o <script>
o <base>

HTML <title> Element

The HTML <title> element is used to define the title of the document. It is
used in all HTML/XHTML documents. The <title> element must be placed
between <head> element, and one document can only have one title
element.

What does <title> element do?

1. It defines a title in the browser tab.


2. It provides a title for the page when it is added to favorites.
3. It displays a title for the page in search engine results.

Example:

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>This Page Title</title>
5. </head>
6. <body>
7. <p>The body's content is displayed in the browser window.</p>
8. <p>The content of the title element is displayed in the browser tab, in favori
tes and in search engine results.</p>
9. </body>
10. </html>
HTML <style> Element

The HTML <style> element is used to style the HTML page. The <style>
element can have CSS properties for that HTML page only. If we want to
apply CSS for multiple pages then we should use separate CSS file.
Example:

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>This is Page Title</title>
5. <style>
6. body {background-color: pink;}
7. h1 {color: red;}
8. p {color: blue;}
9. </style>
10. </head>
11. <body>
12. <h1>This is a Heading</h1>
13. <p>This is a paragraph.</p>
14. </body>
15. </html>
HTML <link> Element

The HTML <link> element is used to link an external style sheet to your
webpage. The <link> element contains main two attributes which are "rel"
and "href". The rel attribute indicates that it is a stylesheet, and href gives
the path to that external file.

Example:

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>This is title</title>
5. <link rel="stylesheet" href="style.css">
6. </head>
7. <body>
8. <h2>Web-page with external CSS</h2>
9. <p>This is looking a cool page</p>
10. </body>
11. </html>
HTML <meta> Element

The HTML <meta> element is used to specify the character set, page
description, keywords, authors and other metadata on the webpage.
Metadata is mainly used by browsers, search engines, and other web
services to rank your webpage better.

Let's see how to use metadata:

To define a character set:

<meta charset="UTF-8">

The charset attribute specifies the character encoding. In this example we


have set it to "UTF-8" which means it can handle to display any language.

Example:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="UTF-8">
5. </head>
6. <body>
7. <p>This is written in English language<span style="color: blue"> My friend'
s name is.......</span></p>
8. <p>This is Chinese language <span style="color: red">Wǒ de péngyǒu jiào
</span></p>
9. </body>
10. </html>

HTML <body> tag


HTML <body> tag defines the main content of an HTML document which
displays on the browser. It can contain text content, paragraphs, headings,
images, tables, links, videos, etc.

The <body> must be the second element after the <head> tag or it should
be placed between </head> and </html> tags. This tag is required for every
HTML document and should only use once in the whole HTML document.

Syntax

<body> Place your Content here........</body>

Following are some specifications about the <body> tag


Display Inline

Start tag/End tag Both start and End tag

Usage Structural

Example
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>Body Tag</title>
5. </head>
6. <body>
7. <h2>Example of body tag</h2>
8. <p>This paragraph is written between the body tag</p>
9. </body>
10. </html>

Output:

Attribute :Tag specific Attributes

Attribut Valu Description


e e

Alink color It defines the color of the active link in a document.


(Not supported in HTML5)

backgroun URL It determines the background image for the


d document. (Not supported in HTML5)

Bgcolor color It determines the background color of the content.


(Not supported in HTML5)

Link color It determines the color of the unvisited link. (Not


supported in HTML5)

Text color It determines the color of the text in the document.


(Not supported in HTML5)

Vlink color It determines the color of the visited link. (Not


supported in HTML5)

Onload Function call on page loading

Onunload Function call when user leaves the page

Onfocus Function call when document receives focus by


user.

Onblur Function call when document loses focus by user.

Global Attribute

The <body> attribute supports global attribute in HTML.

Event Attribute

The <body> attribute supports Event attributes in HTML.

HTML Form

An HTML form is a section of a document which contains controls such as


text fields, password fields, checkboxes, radio buttons, submit button,
menus etc.
An HTML form facilitates the user to enter data that is to be sent to the
server for processing such as name, email address, password, phone
number, etc. .

Why use HTML Form

HTML forms are required if you want to collect some data from of the site
visitor.

For example: If a user want to purchase some items on internet, he/she must
fill the form such as shipping address and credit/debit card details so that
item can be sent to the given address.

HTML Form Syntax


1. <form action="server url" method="get|post">
2. //input controls e.g. textfield, textarea, radiobutton, button
3. </form>

HTML Form Tags

Let's see the list of HTML 5 form tags.

Tag Description

<form> It defines an HTML form to enter inputs by the used side.

<input> It defines an input control.

<textarea> It defines a multi-line input control.

<label> It defines a label for an input element.

<fieldset> It groups the related element in a form.

<legend> It defines a caption for a <fieldset> element.

<select> It defines a drop-down list.

<optgroup> It defines a group of related options in a drop-down list.


<option> It defines an option in a drop-down list.

<button> It defines a clickable button.

HTML 5 Form Tags

Let's see the list of HTML 5 form tags.

Tag Description

<datalist> It specifies a list of pre-defined options for input control.

<keygen> It defines a key-pair generator field for forms.

<output> It defines the result of a calculation.

HTML <form> element

The HTML <form> element provide a document section to take input from
user. It provides various interactive controls for submitting information to
web server such as text field, text area, password field, etc.

Note: The <form> element does not itself create a form but it is container to
contain all required form elements, such as <input>, <label>, etc.

Syntax:

1. <form>
2. //Form elements
3. </form>

HTML <input> element

The HTML <input> element is fundamental form element. It is used to create


form fields, to take input from user. We can apply different input filed to
gather different information form user. Following is the example to show the
simple text input.

Example:
1. <body>
2. <form>
3. Enter your name <br>
4. <input type="text" name="username">
5. </form>
6. </body>

Output:

ADVERTISEMENT

HTML TextField Control

The type="text" attribute of input tag creates textfield control also known as
single line textfield control. The name attribute is optional, but it is required
for the server side component such as JSP, ASP, PHP etc.

1. <form>
2. First Name: <input type="text" name="firstname"/> <br/>
3. Last Name: <input type="text" name="lastname"/> <br/>
4. </form>

Output:

Note: If you will omit 'name' attribute then the text filed input will not be
submitted to server.
HTML <textarea> tag in form

The <textarea> tag in HTML is used to insert multiple-line text in a form.


The size of <textarea> can be specify either using "rows" or "cols" attribute
or by CSS.

Example:

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>Form in HTML</title>
5. </head>
6. <body>
7. <form>
8. Enter your address:<br>
9. <textarea rows="2" cols="20"></textarea>
10. </form>
11. </body>
12. </html>

Output:

Label Tag in Form

It is considered better to have label in form. As it makes the code


parser/browser/user friendly.

If you click on the label tag, it will focus on the text control. To do so, you
need to have for attribute in label tag that must be same as id attribute of
input tag.
NOTE: It is good to use <label> tag with form, although it is optional but if
you will use it, then it will provide a focus when you tap or click on label tag.
It is more worthy with touchscreens.
1. <form>
2. <label for="firstname">First Name: </label> <br/>
3. <input type="text" id="firstname" name="firstname"/> <br/>
4. <label for="lastname">Last Name: </label>
5. <input type="text" id="lastname" name="lastname"/> <br/>
6. </form>

Output:

HTML Password Field Control

The password is not visible to the user in password field control.

1. <form>
2. <label for="password">Password: </label>
3. <input type="password" id="password" name="password"/>
<br/>
4. </form>

Output:
HTML 5 Email Field Control

The email field in new in HTML 5. It validates the text for correct email
address. You must use @ and . in this field.

1. <form>
2. <label for="email">Email: </label>
3. <input type="email" id="email" name="email"/> <br/>
4. </form>

It will display in browser like below:

Note: If we will not enter the correct email, it will display error like:

Radio Button Control

The radio button is used to select one option from multiple options. It is used
for selection of gender, quiz questions etc.

If you use one name for all the radio buttons, only one radio button can be
selected at a time.

Using radio buttons for multiple options, you can only choose a single option
at a time.

1. <form>
2. <label for="gender">Gender: </label>
3. <input type="radio" id="gender" name="gender" value="male"/
>Male
4. <input type="radio" id="gender" name="gender" value="female"/
>Female <br/>
5. </form>

Checkbox Control

The checkbox control is used to check multiple options from given


checkboxes.

1. <form>
2. Hobby:<br>
3. <input type="checkbox" id="cricket" name="cricket" value="crick
et"/>
4. <label for="cricket">Cricket</label> <br>
5. <input type="checkbox" id="football" name="football" value="foo
tball"/>
6. <label for="football">Football</label> <br>
7. <input type="checkbox" id="hockey" name="hockey" value="hoc
key"/>
8. <label for="hockey">Hockey</label>
9. </form>
Note: These are similar to radio button except it can choose multiple options
at a time and radio button can select one button at a time, and its display.

Output:
Submit button control

HTML <input type="submit"> are used to add a submit button on web


page. When user clicks on submit button, then form get submit to the server.

Syntax:

1. <input type="submit" value="submit">

The type = submit , specifying that it is a submit button

The value attribute can be anything which we write on button on web page.

The name attribute can be omit here.

Example:

1. <form>
2. <label for="name">Enter name</label><br>
3. <input type="text" id="name" name="name"><br>
4. <label for="pass">Enter Password</label><br>
5. <input type="Password" id="pass" name="pass"><br>
6. <input type="submit" value="submit">
7. </form>

Output:
HTML <fieldset> element:

The <fieldset> element in HTML is used to group the related information of a


form. This element is used with <legend> element which provide caption for
the grouped elements.

Example:

1. <form>
2. <fieldset>
3. <legend>User Information:</legend>
4. <label for="name">Enter name</label><br>
5. <input type="text" id="name" name="name"><br>
6. <label for="pass">Enter Password</label><br>
7. <input type="Password" id="pass" name="pass"><br>
8. <input type="submit" value="submit">
9. </fieldset>
10. </form>

Output:

HTML Form Example

Following is the example for a simple form of registration.

1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>Form in HTML</title>
5. </head>
6. <body>
7. <h2>Registration form</h2>
8. <form>
9. <fieldset>
10. <legend>User personal information</legend>
11. <label>Enter your full name</label><br>
12. <input type="text" name="name"><br>
13. <label>Enter your email</label><br>
14. <input type="email" name="email"><br>
15. <label>Enter your password</label><br>
16. <input type="password" name="pass"><br>
17. <label>confirm your password</label><br>
18. <input type="password" name="pass"><br>
19. <br><label>Enter your gender</label><br>
20. <input type="radio" id="gender" name="gender" value="male"/
>Male <br>
21. <input type="radio" id="gender" name="gender" value="female
"/>Female <br/>
22. <input type="radio" id="gender" name="gender" value="others
"/>others <br/>
23. <br>Enter your Address:<br>
24. <textarea></textarea><br>
25. <input type="submit" value="sign-up">
26. </fieldset>
27. </form>
28. </body>
29. </html>

Output:

HTML Form Example

Let's see a simple example of creating HTML form.

1. <form action="#">
2. <table>
3. <tr>
4. <td class="tdLabel"><label for="register_name" class="label">Enter na
me:</label></td>
5. <td><input type="text" name="name" value="" id="register_name" sty
le="width:160px"/></td>
6. </tr>
7. <tr>
8. <td class="tdLabel"><label for="register_password" class="label">Ente
r password:</label></td>
9. <td><input type="password" name="password" id="register_password"
style="width:160px"/></td>
10. </tr>
11. <tr>
12. <td class="tdLabel"><label for="register_email" class="label">Ent
er Email:</label></td>
13. <td
14. ><input type="email" name="email" value="" id="register_email" sty
le="width:160px"/></td>
15. </tr>
16. <tr>
17. <td class="tdLabel"><label for="register_gender" class="label">E
nter Gender:</label></td>
18. <td>
19. <input type="radio" name="gender" id="register_gendermale" value
="male"/>
20. <label for="register_gendermale">male</label>
21. <input type="radio" name="gender" id="register_genderfemale" valu
e="female"/>
22. <label for="register_genderfemale">female</label>
23. </td>
24. </tr>
25. <tr>
26. <td class="tdLabel"><label for="register_country" class="label">S
elect Country:</label></td>
27. <td><select name="country" id="register_country" style="width:1
60px">
28. <option value="india">india</option>
29. <option value="pakistan">pakistan</option>
30. <option value="africa">africa</option>
31. <option value="china">china</option>
32. <option value="other">other</option>
33. </select>
34. </td>
35. </tr>
36. <tr>
37. <td colspan="2"><div align="right"><input type="submit" id="re
gister_0" value="register"/>
38. </div></td>
39. </tr>
40. </table>
41. </form>

Chapter 2
What is JavaScript
JavaScript (js) is a light-weight object-oriented programming language which
is used by several websites for scripting the webpages. It is an interpreted,
full-fledged programming language that enables dynamic interactivity on
websites when applied to an HTML document.

It was introduced in the year 1995 for adding programs to the webpages in
the Netscape Navigator browser. Since then, it has been adopted by all other
graphical web browsers. With JavaScript, users can build modern web
applications to interact directly without reloading the page every time. The
traditional website uses js to provide several forms of interactivity and
simplicity.

Although, JavaScript has no connectivity with Java programming language.


The name was suggested and provided in the times when Java was gaining
popularity in the market. In addition to web browsers, databases such as
CouchDB and MongoDB uses JavaScript as their scripting and query
language.

Features of JavaScript
There are following features of JavaScript:

1. All popular web browsers support JavaScript as they provide built-in


execution environments.
2. JavaScript follows the syntax and structure of the C programming
language. Thus, it is a structured programming language.
3. JavaScript is a weakly typed language, where certain types are
implicitly cast (depending on the operation).
4. JavaScript is an object-oriented programming language that uses
prototypes rather than using classes for inheritance.
5. It is a light-weighted and interpreted language.
6. It is a case-sensitive language.
7. JavaScript is supportable in several operating systems including,
Windows, macOS, etc.
8. It provides good control to the users over the web browsers.

History of JavaScript
In 1993, Mosaic, the first popular web browser, came into existence. In
the year 1994, Netscape was founded by Marc Andreessen. He realized
that the web needed to become more dynamic. Thus, a 'glue language' was
believed to be provided to HTML to make web designing easy for designers
and part-time programmers. Consequently, in 1995, the company
recruited Brendan Eich intending to implement and embed Scheme
programming language to the browser. But, before Brendan could start, the
company merged with Sun Microsystems for adding Java into its Navigator
so that it could compete with Microsoft over the web technologies and
platforms. Now, two languages were there: Java and the scripting language.

Further, Netscape decided to give a similar name to the scripting


language as Java's. It led to 'Javascript'. Finally, in May 1995, Marc
Andreessen coined the first code of Javascript named 'Mocha'. Later, the
marketing team replaced the name with 'LiveScript'. But, due to trademark
reasons and certain other reasons, in December 1995, the language was
finally renamed to 'JavaScript'. From then, JavaScript came into existence.

Application of JavaScript
JavaScript is used to create interactive websites. It is mainly used for:

o Client-side validation,
o Dynamic drop-down menus,
o Displaying date and time,
o Displaying pop-up windows and dialog boxes (like an alert dialog box,
confirm dialog box and prompt dialog box),
o Displaying clocks etc.
JavaScript Example
1. <script>
2. document.write("Hello JavaScript by JavaScript");
3. </script>

JavaScript™ language elements


(JavaScript)
The JavaScript™ language elements are based on the ECMAScript Language
Specification Standard ECMA-262 (see
http://www.ecma-international.org/publications/standards/Ecma-262.htm).
The JavaScript™ described here applies to the server-side interpreter. Client-
side scripts are interpreted by the browser.

Statements (JavaScript)

JavaScript™ statements consist of keywords and syntax.

 A single statement may span multiple lines.


 Multiple statements may occur on one line separated by semicolons.
 A semicolon may optionally terminate the last statement on a line.

import (implementation-specific) is supported to import code from a


script library. See import (JavaScript).

export (implementation-specific and not in the ECMA standard) is not


supported.

label (not considered good programming) is not supported.

 import (JavaScript)
Imports code from a script library.

Operators (JavaScript)

Operators fall into the following categories:


This is a 2-column table. The first column has links to topics about operators. The
lists the operators described in the topic in the first column.
Operators Description

Assignment operators = += -= *= /= %=&= |= ^= <<= >>= >>>=


(JavaScript)

Comparison operators == != === !== > >=< <=


(JavaScript)

Arithmetic operators + - * / % ++ (post-increment) ++ (pre-increment) -- (post-


(JavaScript) e-decrement) - (negation) + (unary plus)

Bitwise operators & | ~ ^ << >> >>>


(JavaScript)

Logical operators && || !


(JavaScript)

String operators + +=
(JavaScript)

List operators +-*/


(JavaScript)

Special operators ?: , delete function new this typeof void . []


(JavaScript)

The following table lists operator precedence and associativity. Operators


with lower precedence evaluate first left-to-right or right-to-left as listed.
Parentheses can be used to change the order of evaluation; parenthesized
expressions are evaluated first inner to outer.
This is a 3-column table with precedence in the first column, the operators of that
the second column, and associativity in the third column.
Precedence Operator

1 . [] le

new rig

2 () le

3 ++ -- no

4 ! ~ - (negation) + (unary plus) typeof void delete rig


This is a 3-column table with precedence in the first column, the operators of that
the second column, and associativity in the third column.
Precedence Operator

5 */% le

6 +- le

7 << >> >>> le

8 > >=< <= le

9 == != === !== le

10 & le

11 ^ le

12 | le

13 && le

14 || le

15 ?: rig

16 = += -= *= /= %=&= |= ^= <<= >>= >>>= rig

17 , le

 Assignment operators (JavaScript)


An assignment operator assigns a value to its left operand based on the
value of its right operand. The basic assignment operator is equal (=). The
other assignment operators are shorthand for another operation plus the
assignment.

 Comparison operators (JavaScript)


Comparison operators compare two values and yield a logical (boolean)
result.

 Arithmetic operators (JavaScript)


Arithmetic operators perform basic arithmetic operations.

 Bitwise operators (JavaScript)


Bitwise operators perform bit-by-bit logical operations.

 Logical operators (JavaScript)


 String operators (JavaScript)
String operators concatenate values.

 List operators (JavaScript)


Lists can be processed as entities by certain operators.

 Special operators (JavaScript)


A number of special operators are available

Top-level functions (JavaScript)

Top-level functions are not associated with an object. In the ECMA


specification, these functions are properties and methods of the global
object.

The following table summarizes the top-level functions.


Top Level Function Description

print Prints a string to the log file.

_dump Prints the string representation of an object to the log file

eval Evaluates an expression or statements.

isNaN Evaluates an argument to determine if it is not a number

parseFloat Parses a string argument and returns a floating-point num

parseInt Parses a string argument and returns an integer.

 _dump (JavaScript)
Prints a string representation of an object to the log file.

 eval (JavaScript)
Evaluates an expression or statements.

 isNaN (JavaScript)
Determines whether the result of a string parsed by parseInt or parseFloat is
a valid number.

 parseFloat (JavaScript)
Parses a string and returns a floating point number.

 parseInt (JavaScript)
Parses a string and returns an integer of the specified radix or base.

 print (JavaScript)
Prints a string to the log file.
@Functions (JavaScript)

@Functions emulate their counterparts in Notes®.

The syntax differs as follows:

 Names must be in exact case.


 Parameters are separated by commas not semicolons.

 @Abs (JavaScript)
Returns the absolute (unsigned) value of a number.

 @Abstract (JavaScript)
Abbreviates the content of fields.

 @Adjust (JavaScript)
Adjusts a time and date by years, months, days, hours, minutes, and/or
seconds.

 @AttachmentLengths (JavaScript)
Returns the lengths in bytes of the files attached to the current document.

 @AttachmentModifiedTimes (JavaScript)
Returns the modification dates and times of the files attached to the current
document.

 @AttachmentNames (JavaScript)
Returns the names of the files attached to the current document.

 @Attachments (JavaScript)
Returns the number of files attached to the current document.

 @Author (JavaScript)
Returns the names of the authors of the current document.

 @Begins (JavaScript)
Determines whether a string begins with a substring.

 @Char (JavaScript)
Returns a character that corresponds to a Unicode value.

 @ClientType (JavaScript)
Returns a text string to differentiate Notes® clients and Web browsers.

 @Contains (JavaScript)
Determines whether a string contains a substring.

 @Count (JavaScript)
Returns the number of entries in a list.
 @Created (JavaScript)
Returns the creation date and time of the current document.

 @Date (JavaScript)
Creates a date and time.

 @Day (JavaScript)
Returns the day from a date and time.

 @DbColumn (JavaScript)
Returns the values of a view column.

 @DbLookup (JavaScript)
Returns view column or field values that correspond to matched keys in a
sorted view column.

 @DbName (JavaScript)
Returns the server name and the database name of the current database.

 @DbTitle (JavaScript)
Returns the label of the current database.

 @Do (JavaScript)
Evaluates a series of @function statements.

 @Element (JavaScript)
Returns an element of a list.

 @Elements (JavaScript)
Returns the number of entries in a list.

 @Ends (JavaScript)
Determines whether a string ends with a substring.

 @Error (JavaScript)
Assigns an error condition to a value.

 @Explode (JavaScript)
Parses a string into elements in a list using specified separators.

 @Failure (JavaScript)
Returns a message.

 @False (JavaScript)
Returns the number 0.

 @GetField (JavaScript)
Returns the value of a document item associated with the current page.

 @Hour (JavaScript)
Returns the hour from a date and time.

 @If (JavaScript)
Executes a statement based on a conditional test.

 @Implode (JavaScript)
Concatenates elements of a text list into a string.

 @Integer (JavaScript)
Truncates a number to an integer.

 @IsAvailable (JavaScript)
Indicates whether an item exists in the current document.

 @IsDocBeingLoaded (JavaScript)
Returns 1 if the current document is being loaded.

 @IsDocBeingSaved (JavaScript)
Returns 1 if the current document is being saved.

 @IsError (JavaScript)
Indicates if a value is an error condition.

 @IsMember (JavaScript)
Indicates if a list contains a string or strings.

 @IsNewDoc (JavaScript)
Indicates if the current document is a new document.

 @IsNotMember (JavaScript)
Indicates if a list does not contain a string or strings.

 @IsNull (JavaScript)
Indicates if a value is an empty string or list of empty strings.

 @IsNumber (JavaScript)
Indicates if a value is a number.

 @IsResponseDoc (JavaScript)
Indicates if the current document is a response document.

 @IsText (JavaScript)
Indicates if a value is a string.

 @IsTime (JavaScript)
Indicates if a value is a date and time.

 @IsUnavailable (JavaScript)
Indicates whether an item exists in the current document.
 @Left (JavaScript)
Returns the leftmost characters of a string for the number of characters
specified, or up to and excluding a substring.

 @LeftBack (JavaScript)
Returns the leftmost characters of a string minus the number of characters
specified, or up to and excluding the last occurrence of a substring.

 @Length (JavaScript)
Returns the number of characters in a string.

 @List (JavaScript)
Creates a list.

 @LowerCase (JavaScript)
Converts a string to lowercase.

 @Max (JavaScript)
Returns the largest number in a group of numbers.

 @Member (JavaScript)
Returns the position of the first occurrence of a value in a string list.

 @Middle (JavaScript)
Returns characters of a string, starting at an offset from the beginning or
after a substring, for the number of characters specified or up to and
excluding a substring.

 @MiddleBack (JavaScript)
Returns characters of a string, starting at an offset from the end or before
the last occurrence of a substring, back to and excluding the last occurrence
of a substring or for the negative number of characters specified.

 @Min (JavaScript)
Returns the smallest number in a group of numbers.

 @Minute (JavaScript)
Returns the minute from a date and time.

 @Modified (JavaScript)
Returns a time-date value indicating when the document was modified
initially.

 @Modulo (JavaScript)
Returns the remainder of a division operation.

 @Month (JavaScript)
Returns the month from a date and time.
 @Name (JavaScript)
Returns a component of or reformats a hierarchical name.

 @NewLine (JavaScript)
Returns the newline character.

 @No (JavaScript)
Returns the number 0.

 @Now (JavaScript)
Returns the server date and time.

 @Null (JavaScript)
Returns an empty string.

 @ProperCase (JavaScript)
Converts a string to propercase.

 @Random (JavaScript)
Returns a random number greater than or equal to 0.0 and less than 1.0.

 @Repeat (JavaScript)
Repeats a string.

 @Replace (JavaScript)
Replaces strings in a list.

 @ReplaceSubstring (JavaScript)
Replaces substrings in a list.

 @ReplicaID (JavaScript)
Returns the replica ID of the current database.

 @Return (JavaScript)
Returns execution to the calling function or the user interface.

 @Right (JavaScript)
Returns the rightmost characters of a string for the number of characters
specified, or starting after a substring.

 @RightBack (JavaScript)
Returns the rightmost characters of a string minus the number of characters
specified, or back to and excluding the last occurrence of a substring.

 @Round (JavaScript)
Rounds a number.

 @Second (JavaScript)
Returns the second from a date and time.
 @Select (JavaScript)
Returns a value from a parameter list.

 @SetField (JavaScript)
Sets a document item associated with the current page to a value.

 @Subset (JavaScript)
Subsets a list from left to right.

 @Success (JavaScript)
Returns 1 (true).

 @Sum (JavaScript)
Sums numbers.

 @Text (JavaScript)
Converts a value to a string.

 @TextToNumber (JavaScript)
Converts a string to a number.

 @TextToTime (JavaScript)
Converts a string to a date and time.

 @Time (JavaScript)
Creates a date and time.

 @Today (JavaScript)
Returns today's date.

 @Tomorrow (JavaScript)
Returns tomorrow's date.

 @Trim (JavaScript)
Removes leading and trailing spaces from a string.

 @True (JavaScript)
Returns the number 1.

 @Unique (JavaScript)
Returns a random, unique text value (no parameter), or removes duplicate
values from a list (parameter).

 @UpperCase (JavaScript)
Converts a string to uppercase.

 @UserId (JavaScript)
Returns the user ID object for a given user in the ID Vault.

 @UserName (JavaScript)
Returns the distinguished name of the current user.

 @UserSecretKeys (JavaScript)
Returns the secret keys stored in a user's ID file in the ID Vault.

 @Weekday (JavaScript)
Returns the day of the week where Sunday is 1.

 @Word (JavaScript)
Returns a word from a string.

 @Year (JavaScript)
Returns the year from a date and time.

 @Yes (JavaScript)
Returns the value 1.

 @Yesterday (JavaScript)
Returns yesterday's date.

Implied variable typing (JavaScript)

You can associate a variable with a data type to document your code and
direct content assist.

The syntax for variable typing is as follows:


variablename:datatype
The following code from a computed field implies that db is
a NotesDatabase object:
var db:NotesDatabase = session.getCurrentDatabase();
return db.getFileName()
The implied data type has no effect at run time. If your code
states db:Foo or db:NotesStream, db is still treated as
a NotesDatabase object at run time. The return value
of session.getCurrentDatabase() determines the type.
If no data type association is provided, content assist determines a type
from the context, if possible. If a data type association is provided, content
assist uses the specified type. In most cases, content assist works the same
whether or not an association is provided. Occasionally, specification of the
data type provides necessary direction.

mbedding Java™ in JavaScript™

Java™ code can be embedded directly into JavaScript™ code.

 Java classes
Java™ classes can be accessed from JavaScript™ code by specifying the fully
qualified name, for example, java.lang.Class or java.util.Random. The
package containing the class must be available as a shared library on the
server. The standard Java™ packages are available on all servers; other
packages must be installed.

 User classes
User Java™ classes can be created in an application using
the Domino® or Java™ perspective, and called in JavaScript™ by specifying
the fully qualified name. The class must belong to a package (not the default
package).

 Java arrays
Java™ arrays can be embedded in the JavaScript™ code without prior
declarations or inclusions. This provides the ability to create multi-dimension
arrays and to pass them as parameters to Java™ methods included in
the JavaScript™ code.

 JavaScript objects
A JavaScript™ object (when created with new Object()) is automatically
converted to a map of properties when used as an argument to
a Java™ method. A map is a Java™ interface that provides a list of
name/value pairs. For example, you should pass a map when you call an
XML adapter.

 Parameter conversion
JavaScript™ parameters are passed by value (JavaScript™ arrays and objects
used as parameters are not modified by the Java™ code).

 JavaScript keywords and Java methods


You cannot use JavaScript™ keywords in Java™ syntax even if the word is
legal in Java™.

JavaScript Objects
A javaScript object is an entity having state and behavior (properties and
method). For example: car, pen, bike, chair, glass, keyboard, monitor etc.

JavaScript is an object-based language. Everything is an object in JavaScript.

JavaScript is template based not class based. Here, we don't create class to
get the object. But, we direct create objects.
Creating Objects in JavaScript

There are 3 ways to create objects.

1. By object literal
2. By creating instance of Object directly (using new keyword)
3. By using an object constructor (using new keyword)

1) JavaScript Object by object literal

The syntax of creating object using object literal is given below:

object={property1:value1,property2:value2.....propertyN:valueN}

As you can see, property and value is separated by : (colon).

Let’s see the simple example of creating object in JavaScript.

1. <script>
2. emp={id:102,name:"Shyam Kumar",salary:40000}
3. document.write(emp.id+" "+emp.name+" "+emp.salary);
4. </script>
Output o the above example
102 Shyam Kumar 40000

2) By creating instance of Object

The syntax of creating object directly is given below:

var objectname=new Object();

Here, new keyword is used to create object.

Let’s see the example of creating object directly.

1. <script>
2. var emp=new Object();
3. emp.id=101;
4. emp.name="Ravi Malik";
5. emp.salary=50000;
6. document.write(emp.id+" "+emp.name+" "+emp.salary);
7. </script>
Output of the above example
101 Ravi 50000

3) By using an Object constructor

Here, you need to create function with arguments. Each argument value can
be assigned in the current object by using this keyword.

The this keyword refers to the current object.

The example of creating object by object constructor is given below.

1. <script>
2. function emp(id,name,salary){
3. this.id=id;
4. this.name=name;
5. this.salary=salary;
6. }
7. e=new emp(103,"Vimal Jaiswal",30000);
8.
9. document.write(e.id+" "+e.name+" "+e.salary);
10. </script>
Output of the above example
103 Vimal Jaiswal 30000

Defining method in JavaScript Object

We can define method in JavaScript object. But before defining method, we


need to add property in the function with same name as method.

The example of defining method in object is given below.

1. <script>
2. function emp(id,name,salary){
3. this.id=id;
4. this.name=name;
5. this.salary=salary;
6.
7. this.changeSalary=changeSalary;
8. function changeSalary(otherSalary){
9. this.salary=otherSalary;
10. }
11. }
12. e=new emp(103,"Sonoo Jaiswal",30000);
13. document.write(e.id+" "+e.name+" "+e.salary);
14. e.changeSalary(45000);
15. document.write("<br>"+e.id+" "+e.name+" "+e.salary);
16. </script>

Output of the above example


103 Sonoo Jaiswal 30000
103 Sonoo Jaiswal 45000

JavaScript Object Methods

The various methods of Object are as follows:

S.N Methods Description


o

1 Object.assign() This method is used to copy


enumerable and own properties
from a source object to a target
object

2 Object.create() This method is used to create a


new object with the specified
prototype object and
properties.

3 Object.defineProperty() This method is used to describe


some behavioral attributes of
the property.

4 Object.defineProperties() This method is used to create


or configure multiple object
properties.

5 Object.entries() This method returns an array


with arrays of the key, value
pairs.
6 Object.freeze() This method prevents existing
properties from being removed.

7 Object.getOwnPropertyDescript This method returns a property


or() descriptor for the specified
property of the specified object.

8 Object.getOwnPropertyDescript This method returns all own


ors() property descriptors of a given
object.

9 Object.getOwnPropertyNames() This method returns an array of


all properties (enumerable or
not) found.

10 Object.getOwnPropertySymbols This method returns an array of


() all own symbol key properties.

11 Object.getPrototypeOf() This method returns the


prototype of the specified
object.

12 Object.is() This method determines


whether two values are the
same value.

13 Object.isExtensible() This method determines if an


object is extensible

14 Object.isFrozen() This method determines if an


object was frozen.

15 Object.isSealed() This method determines if an


object is sealed.

16 Object.keys() This method returns an array of


a given object's own property
names.

17 Object.preventExtensions() This method is used to prevent


any extensions of an object.

18 Object.seal() This method prevents new


properties from being added
and marks all existing
properties as non-configurable.

19 Object.setPrototypeOf() This method sets the prototype


of a specified object to another
object.

20 Object.values() This method returns an array of


values.

JavaScript Objects
Real Life Objects

In real life, objects are things like: houses, cars, people, animals, or any
other subjects.

Here is a car object example:

Car Object Properties Methods

car.name = Fiat car.start()

car.model = 500 car.drive()

car.weight = 850kg car.brake()

car.color = white car.stop()


Object Properties

A real life car has properties like weight and color:

car.name = Fiat, car.model = 500, car.weight = 850kg, car.color = white.

Car objects have the same properties, but the values differ from car to car.

Object Methods

A real life car has methods like start and stop:

car.start(), car.drive(), car.brake(), car.stop().

Car objects have the same methods, but the methods are performed at
different times.

JavaScript Variables

JavaScript variables are containers for data values.

This code assigns a simple value (Fiat) to a variable named car:

Example
let car = "Fiat";

Try it Yourself »

JavaScript Objects

Objects are variables too. But objects can contain many values.

This code assigns many values (Fiat, 500, white) to an object named car:

Example
const car = {type:"Fiat", model:"500", color:"white"};

JavaScript Object Properties


❮ PreviousNext ❯

An Object is an Unordered Collection of Properties

Properties are the most important part of JavaScript objects.

Properties can be changed, added, deleted, and some are read only.

Accessing JavaScript Properties

The syntax for accessing the property of an object is:

// objectName.property
let age = person.age;

or

//objectName["property"]
let age = person["age"];

or

//objectName[expression]
let age = person[x];

Examples
person.firstname + " is " + person.age + " years old.";

Try it Yourself »

person["firstname"] + " is " + person["age"] + " years old.";

Try it Yourself »

person["firstname"] + " is " + person["age"] + " years old.";

Try it Yourself »

Adding New Properties

You can add new properties to an existing object by simply giving it a value:
Example
person.nationality = "English";

Try it Yourself »

Deleting Properties

The delete keyword deletes a property from an object:

Example
const person = {
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor: "blue"
};

delete person.age;

Try it Yourself »

or delete person["age"];

Example
const person = {
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor: "blue"
};

delete person["age"];

Try it Yourself »

Note:

The delete keyword deletes both the value of the property and the property
itself.

After deletion, the property cannot be used before it is added back again.
Nested Objects

Property values in an object can be other objects:

Example
myObj = {
name:"John",
age:30,
myCars: {
car1:"Ford",
car2:"BMW",
car3:"Fiat"
}
}

You can access nested objects using the dot notation or the bracket
notation:

Examples
myObj.myCars.car2;

Try it Yourself »

myObj.myCars["car2"];

Try it Yourself »

myObj["myCars"]["car2"];

let p1 = "myCars";
let p2 = "car2";
myObj[p1][p2];

JavaScript Array
JavaScript array is an object that represents a collection of similar type of
elements.

There are 3 ways to construct array in JavaScript

1. By array literal
2. By creating instance of Array directly (using new keyword)
3. By using an Array constructor (using new keyword)

1) JavaScript array literal

The syntax of creating array using array literal is given below:

var arrayname=[value1,value2.....valueN];

As you can see, values are contained inside [ ] and separated by , (comma).

Let's see the simple example of creating and using array in JavaScript.

1. <script>
2. var emp=["Sonoo","Vimal","Ratan"];
3. for (i=0;i<emp.length;i++){
4. document.write(emp[i] + "<br/>");
5. }
6. </script>

The .length property returns the length of an array.

Output of the above example

Sonoo
Vimal
Ratan
2) JavaScript Array directly (new keyword)

The syntax of creating array directly is given below:

var arrayname=new Array();

Here, new keyword is used to create instance of array.

Let's see the example of creating array directly.

1. <script>
2. var i;
3. var emp = new Array();
4. emp[0] = "Arun";
5. emp[1] = "Varun";
6. emp[2] = "John";
7.
8. for (i=0;i<emp.length;i++){
9. document.write(emp[i] + "<br>");
10. }
11. </script>

Output of the above example

Arun
Varun
John
3) JavaScript array constructor (new keyword)

Here, you need to create instance of array by passing arguments in


constructor so that we don't have to provide value explicitly.

The example of creating object by array constructor is given below.

1. <script>
2. var emp=new Array("Jai","Vijay","Smith");
3. for (i=0;i<emp.length;i++){
4. document.write(emp[i] + "<br>");
5. }
6. </script>
Output of the above example
Jai
Vijay
Smith

JavaScript Array Methods

Let's see the list of JavaScript array methods with their description.

Methods Description

concat() It returns a new array object that contains two or


more merged arrays.

copywithin() It copies the part of the given array with its own
elements and returns the modified array.
entries() It creates an iterator object and a loop that iterates
over each key/value pair.

every() It determines whether all the elements of an array


are satisfying the provided function conditions.

flat() It creates a new array carrying sub-array elements


concatenated recursively till the specified depth.

flatMap() It maps all array elements via mapping function,


then flattens the result into a new array.

fill() It fills elements into an array with static values.

from() It creates a new array carrying the exact copy of


another array element.

filter() It returns the new array containing the elements that


pass the provided function conditions.

find() It returns the value of the first element in the given


array that satisfies the specified condition.

findIndex() It returns the index value of the first element in the


given array that satisfies the specified condition.

forEach() It invokes the provided function once for each


element of an array.

includes() It checks whether the given array contains the


specified element.

indexOf() It searches the specified element in the given array


and returns the index of the first match.

isArray() It tests if the passed value ia an array.


join() It joins the elements of an array as a string.

keys() It creates an iterator object that contains only the


keys of the array, then loops through these keys.

lastIndexOf() It searches the specified element in the given array


and returns the index of the last match.

map() It calls the specified function for every array element


and returns the new array

of() It creates a new array from a variable number of


arguments, holding any type of argument.

pop() It removes and returns the last element of an array.

push() It adds one or more elements to the end of an array.

reverse() It reverses the elements of given array.

reduce(function, It executes a provided function for each value from


initial) left to right and reduces the array to a single value.

reduceRight() It executes a provided function for each value from


right to left and reduces the array to a single value.

some() It determines if any element of the array passes the


test of the implemented function.

shift() It removes and returns the first element of an array.

slice() It returns a new array containing the copy of the part


of the given array.

sort() It returns the element of the given array in a sorted


order.
splice() It add/remove elements to/from the given array.

toLocaleString() It returns a string containing all the elements of a


specified array.

toString() It converts the elements of a specified array into


string form, without affecting the original array.

unshift() It adds one or more elements in the beginning of the


given array.

values() It creates a new iterator object carrying values for


each index in the array.

You might also like