Introduction to JAVA SCRIPT USING HTML and CSS

Overview of Java Script
• 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.

Continued...
• 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.

JavaScript Example
•Javascript example is easy to code.
•JavaScript provides 3 places to put the
JavaScript code:
1. Between the body tag of html
2. Between the head tag of html
3. In .js file (external javaScript)

Let’s create first JavaScript example
<script type="text/javascript">
document.write("JavaScript is a simple
language for javatpoint learners");
</script>
• The script tag specifies that we are using
JavaScript.
• The text/javascript is the content type that
provides information to the browser about the
data.
• The document.write() function is used to display
dynamic content through JavaScript.

1)Example : code between the body tag
• In the above example, we have displayed the
dynamic content using JavaScript.
• Let’s see the simple example of JavaScript that
displays alert dialog box.
alert("Hello Javatpoint");
</script>

Introduction to JAVA SCRIPT USING HTML and CSS

2) Example : code between the
head tag
• Let’s see the same example of displaying alert dialog
box of JavaScript that is contained inside the head tag.
• In this example, we are creating a function msg().
• To create function in JavaScript, you need to write
function with function_name as given below.
• To call function, you need to work on event. Here we
are using onclick event to call msg() function.

Continued...
<html>
<head>
function msg() {
alert("Hello Javatpoint"); }
</script>
</head>
<body>
<p>Welcome to JavaScript</p>
<form>
<input type="button" value="click" onclick="msg()"/>
</form>
</body>
</html>

External JavaScript file
• We can create external JavaScript file and embed it in
many html page.
• It provides code re usability because single JavaScript file
can be used in several html pages.
• An external JavaScript file must be saved by .js extension.
• It is recommended to embed all JavaScript files into a
single file. It increases the speed of the webpage.
• Let's create an external JavaScript file that prints Hello
Javatpoint in a alert dialog box.

Continued...
message.js
function msg(){
alert("Hello Javatpoint");
}
 Let's include the JavaScript file into html page.
It calls the JavaScript function on button click.

Example
// index.html
<html>
<head>
<script type="text/javascript" src="message.js"></script>
</head>
<body>
<p>Welcome to JavaScript</p>
<form>
<input type="button" value="click" onclick="msg()"/>
</form>
</body>
</html>

Javascript Data Types
• JavaScript provides different data types to hold
different types of values.
• There are two types of data types in JavaScript.
1. Primitive data type
2. Non-primitive (reference) data type

Continued...
• JavaScript is a dynamic type language, means you don't
need to specify type of the variable because it is
dynamically used by JavaScript engine.
• You need to use var here to specify the data type.
• It can hold any type of values such as numbers, strings
etc.
• For example:
var a=40;//holding number
var b="Nakul";//holding string

JavaScript primitive data types
• String : represents sequence of characters
e.g. "hello"
• Number : represents numeric values
e.g. 100
• Boolean : represents boolean value either false
or true
• Undefined : represents undefined value
• Null : represents null i.e. no value at all

JavaScript non-primitive data
types
• The non-primitive data types are as follows:
• Object: represents instance through which
we can access members
• Array : represents group of similar values
• RegExp : represents regular expression

JavaScript Operators
• JavaScript operators are symbols that are used to
perform operations on operands.
• For example: var sum=10+20;
• Here, + is the arithmetic operator and = is the
assignment operator.
• Types of operators in JavaScript.
1. Arithmetic Operators
2. Comparison (Relational) Operators
3. Bitwise Operators
4. Logical Operators
5. Assignment Operators
6. Special Operators

JavaScript Expressions
• JavaScript’s expression is a valid set of literals, variables,
operators, and expressions that evaluate a single value that
is an expression.
• This single value can be a number, a string, or a logical value
depending on the expression.

JavaScript Primary Expressions
Expressions Description
this keyword That defines the current line of code’s execution context
Async/Await Function Checks that we are not breaking the execution thread.
Object initializer
They have properties and methods attached to them and properties are in the
form of key-value pairs.
Grouping operator The Grouping operator consists of a pair of parentheses around an expression.
async function The async function is declared using the async keyword.
Regular Expressions The search pattern can be used for text search and text to replace operations.
function* Expression Define a generator function inside an expression
Function Expression Define a function inside an expression
class Expression The class name is used internally, but not outside of the class.

Introduction to JAVA SCRIPT USING HTML and CSS

More Related Content

Similar to Introduction to JAVA SCRIPT USING HTML and CSS (20)

Recently uploaded (20)

Introduction to JAVA SCRIPT USING HTML and CSS