PHP & JS FRAMEWORK 1

21CSI504-PHP & JS FRAMEWORK

Module :II
Module name :Java Script Fundamentals
Topic :Introduction
Faculty : Dr. S. Karthikeyini AP/M.Tech CSE
PHP & JS FRAMEWORK 2
 PHP & JS FRAMEWORK 3

AN INTRODUCTION TO JAVASCRIPT
 JavaScript is a very powerful client-side scripting
language, introduced to “make webpages alive”.
 JavaScript is used to create client-side dynamic pages.
 JavaScript is an object-based scripting language which is
lightweight and cross-platform.
 JavaScript is not a compiled language, but it is a
translated language.
 The JavaScript Translator (embedded in the browser) is
responsible for translating the JavaScript code for the
web browser.
 PHP & JS FRAMEWORK 4

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.
 JavaScript helps the users to build modern web
applications to interact directly without reloading the page
every time.
 JavaScript is commonly used to dynamically
modify HTML and CSS to update a user interface by the
DOM API.
 It is mainly used in web applications.
 PHP & JS FRAMEWORK 5

JAVASCRIPT
 PHP & JS FRAMEWORK 6

HISTORY
 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.
 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.
 PHP & JS FRAMEWORK 7

HISTORY
 PHP & JS FRAMEWORK 8

JAVA VS JAVASCRIPT
 PHP & JS FRAMEWORK 9

WHY JAVASCRIPT
 Most applications work due to an interaction between a
client (user’s device) and a remote server.
 The client requests data from the server.
 The server receives the request, processes it and then
responds accordingly.
 The response sent back is in a user-readable format and
is thus acceptable by the client.
 But this process takes time as well as resources.
 PHP & JS FRAMEWORK 10

WHY JAVASCRIPT
• JavaScript allows the validation of forms without the input of
the server, reducing traffic.
• It provides wonderful tools for a more interactive and user-
friendly website. Some of the basic functions of JavaScript
are:
• Auto complete: The search box gives suggestions, based
on what the user has already typed.
• Form validation: If the users make a mistake while filling a
form, JavaScript immediately informs them of the error,
avoiding to fill it all again.
• Fixes layout issues to avoid the overlapping of elements
on the page.
• Adds animation to the page to make it more attractive.
 PHP & JS FRAMEWORK 11

FEATURES
• All popular web browsers support JavaScript as they provide built-in
execution environments.
• JavaScript follows the syntax and structure of the C programming
language. Thus, it is a structured programming language.
• Java Script is a weakly typed language, where certain types are
implicitly cast (depending on the operation).
• JavaScript is an object-oriented programming language that uses
prototypes rather than using classes for inheritance.
• It is a light-weighted and interpreted language.
• It is a case-sensitive language.
• JavaScript is supportable in several operating systems including,
Windows, macOS, etc.
• It provides good control to the users over the web browsers.
• Allows the use of functions with or without any name. A function
without a name is an anonymous function.
 PHP & JS FRAMEWORK 12

APPLICATIONS OF JAVASCRIPT
• Web Development

Web Development is a standalone language for creating web pages.

It also supports external applications like PDF documents, running
widgets, etc. This also adds various special effects to the page like
graphics.
 PHP & JS FRAMEWORK 13

APPLICATIONS OF JAVASCRIPT
• Web Applications

 it is very easy to create interactive pages.

 It saves the amount of time and effort required by the developer to
build a web application.
 PHP & JS FRAMEWORK 14

APPLICATIONS OF JAVASCRIPT
Presentations
 JavaScript provides user-friendly libraries and
frameworks for presentations.
 PHP & JS FRAMEWORK 15

APPLICATIONS OF JAVASCRIPT
Server Applications
 Javascript is also very useful for building server
applications and is faster than other server-side
languages.
 NodeJS is an open-source and free server environment
used to achieve this. It allows the generation of dynamic
web content, modify a database, collect form data, etc.
 PHP & JS FRAMEWORK 16

APPLICATIONS OF JAVASCRIPT
WEB SERVERS
 NodeJS has a built-in module (a set of functions) that
allows the creation of an HTTP server.
 Though starting as a client-side script, JavaScript is now
fully capable of server-side scripting as well.
 PHP & JS FRAMEWORK 17

APPLICATIONS OF JAVASCRIPT
GAMES
 Along with HTML5, JavaScript helps in game
development.
 EaselJS library provides simple solutions for working
with rich graphics.
 It also has a familiar API many developers prefer.
 PHP & JS FRAMEWORK 18

APPLICATIONS OF JAVASCRIPT
✔ART
✔Using JavaScript, drawing graphics with HTML has
become easier in a web page.
✔ A canvas is present without any border or content so that
the users can create their own art.
✔It has equipped the user with a medium for different
digital art projects.
 PHP & JS FRAMEWORK 19

APPLICATIONS OF JAVASCRIPT
SMART WATCH APPLICATIONS
 JavaScript contains a library PebbleJS which provides
simple solutions for working with rich graphics.
 The developer has access to many features for the
application built for smartwatches.
 PHP & JS FRAMEWORK 20

APPLICATIONS OF JAVASCRIPT
MOBILE APPLICATIONS
 JavaScript provides a framework called PhoneGap that
supports mobile applications.
 React Native is also serving the same purpose these
days.
 With a decent knowledge of HTML, CSS, and
JavaScript, we can build wonderful applications.
 PHP & JS FRAMEWORK 21

APPLICATIONS OF JAVASCRIPT
MACHINE LEARNING
 Javascript has introduced machine learning along with all
the previous features.
 Various frameworks like Keras.js, BrainJS, Compromise,
and WebDNN improve the functionality of JavaScript in
the field of AI.
 PHP & JS FRAMEWORK 22

WHERE TO USE JAVASCRIPT

In HTML, JavaScript code is inserted
between <script> and </script> tags.
 You can place any number of scripts in an HTML
document.
 Scripts can be placed in the <body>, or in
the <head> section of an HTML page, or in both.
 23

<!DOCTYPE html>
<html lang="en">

<head>
<title>
Basic Example to Describe JavaScript
</title>
</head>

<body>

<!-- JavaScript code can be embedded inside

head section or body section -->
<script>
console.log("Welcome to GeeksforGeeks"); // Java Script code
</script>
</body>

</html>
 PHP & JS FRAMEWORK 24

JAVASCRIPT OUTPUT

 JavaScript can "display" data in different ways:

 Writing into an HTML element, using 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().
 PHP & JS FRAMEWORK 25

INNER HTML
 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:
 PHP & JS FRAMEWORK 26

USING INNER HTML

 27

Cont.,
28
 PHP & JS FRAMEWORK 29

USING DOCUMENT.WRITE
 For testing purposes, it is convenient to
use document.write():
 PHP & JS FRAMEWORK 30

USING DOCUMENT.WRITE
 PHP & JS FRAMEWORK 31

USING WINDOW ALERT

 PHP & JS FRAMEWORK 32

USING CONSOLE.LOG
 For debugging purposes, you can call
the console.log() method in the browser to display data.
 PHP & JS FRAMEWORK 33

JAVASCRIPT STATEMENTS
 JavaScript statements are composed of:
 Values, Operators, Expressions, Keywords, and
Comments.
 This statement tells the browser to write "Hello Dolly."
inside an HTML element with id="demo":
 Most JavaScript programs contain many JavaScript
statements.
 The statements are executed, one by one, in the same
order as they are written.
 Semicolons separate JavaScript statements.
 PHP & JS FRAMEWORK 34

EXAMPLE
 PHP & JS FRAMEWORK 35

EXAMPLE
 PHP & JS FRAMEWORK 36

JAVASCRIPT WHITESPACES
 JavaScript ignores multiple spaces. You can add white
space to your script to make it more readable.
 PHP & JS FRAMEWORK 37

JAVASCRIPT KEYWORDS
• JavaScript statements often start with a keyword to
identify the JavaScript action to be performed.
• Our Reserved Words Reference lists all JavaScript
keywords.
 PHP & JS FRAMEWORK 38

KEYWORDS
 PHP & JS FRAMEWORK 39

JAVASCRIPT SYNTAX
 JavaScript syntax is the set of rules, how JavaScript
programs are constructed:
 PHP & JS FRAMEWORK 40

SINGLE LINE COMMENTS

 Single line comments start with //.
 Any text between // and the end of the line will be
ignored by JavaScript (will not be executed).
 PHP & JS FRAMEWORK 41

MULTI LLINE COMMNETS

• Multi-line comments start with /* and end with */.
• Any text between /* and */ will be ignored by JavaScript.
 PHP & JS FRAMEWORK 42

VARIABLE
 PHP & JS FRAMEWORK 43

EXAMPLE
 PHP & JS FRAMEWORK 44

EXAMPLE
 PHP & JS FRAMEWORK 45

JS LET
 Variables defined with let cannot be Redeclared.
 Variables defined with let must be Declared before use.
 Variables defined with let have Block Scope.
 You cannot accidentally redeclare a variable.
 Two keywords LET AND CONST provide Block Scope in
JavaScript.
 Variables declared inside a { } block cannot be accessed from
outside the block
 Variables declared with the var keyword can NOT have block scope.
 Variables declared inside a { } block can be accessed from outside
the block
46
 PHP & JS FRAMEWORK 47

EXAMPLE
 PHP & JS FRAMEWORK 48

CONSTANT
 Variables defined with const cannot be Redeclared.
 Variables defined with const cannot be Reassigned.
 Variables defined with const have Block Scope.
 JavaScript const variables must be assigned a value
when they are declared
49