Module II: Introduction to JavaScript
U23CS381 - ADD Session by
Dr. S. Sampath Kumar, AP/CSE
31-10-2023 Introduction to JavaScript 1
2 31-10-2023
Agenda
Server-Side Scripting
Client-Side Scripting
Client-side vs Server-side Scripting
What is JavaScript?
Features of JavaScript
JavaScript including Techniques
Introduction to JavaScript
3 31-10-2023
Module II: Interactive Web Design using JavaScript
Introduction - JavaScript including Techniques -
Variables and Operators - Conditional and Control
Statements - Data Types and Functions – Events - Form
Validation -Page Redirect - Java Script Exception
Handling - Document Object Model (DOM)
Introduction to JavaScript
4 31-10-2023
Course Outcomes:
CO. Outcome K Level
CO1 (Apply) Understand and apply HTML and CSS concepts K3
(Apply) Understand and apply JavaScript concepts for dynamic web page
CO2 K3
design
CO3 (Apply) Understand and apply shell commands and GIT workflow K2
CO4 (Apply) Design and develop mobile applications K3
CO5 (Apply) Design and develop mobile applications K2
Introduction to JavaScript
5 31-10-2023
Challenge time:
➢ HTML
➢ CSS
➢ Bootstrap
➢ Tailwind CSS
Introduction to JavaScript
6 31-10-2023
Server-Side Scripting:
➢ The execution of several programs on the back-end, or servers,
is said to be Server-side scripting.
➢ Programming Languages for Server-side scripting
❖ PHP
❖ Node.js
❖ C#
❖ Ruby
❖ Python
❖ JavaScript
Introduction to JavaScript
7 31-10-2023
Client-Side Scripting:
➢ The execution of several programs on the front-end or Client, is
said to be Client-side scripting.
➢ Many functionalities are added in the web application for
better user experience with the help of the programs that run
on the front-end.
➢ Programming Languages for Server-side scripting
❖ HTML
❖ CSS
❖ JavaScript
Introduction to JavaScript
8 31-10-2023
Client-side Vs Server-side Scripting:
Client-Side Scripting Server-side Scripting
It is executed on the client side i.e. Front- It is executed on the server side i.e.
end. Back-end
It is visible to the user It is not visible to the user
It can be used to collect the input given It can be used to process the input
by the user given by the user
It is not preferred for performing It is preferred for performing complex
complex computations and transactions computations and transactions
It is generally less secure It is generally more secure
HTML, CSS and JavaScript are used for Node.js, PHP, Python and Java are used
Client-side programming for Server-side programming
Introduction to JavaScript
9 31-10-2023
What is JavaScript?
➢ In a web page, HTML is used to structure the page, and CSS is
used to add style like colours, fonts, etc., but a web page with
only HTML and CSS is static.
➢ JavaScript is a cross-platform, interpreted, object-oriented, just-
in-time compiled scripting language. It is used to make web
pages interactive and dynamic.
➢ JavaScript has a standard library of objects, such as Array,
Date, and Math, and a fundamental set of language elements,
such as operators, control structures, and statements.
➢ JavaScript can be used for both client and server-side
programming.
Introduction to JavaScript
10 31-10-2023
Features of JavaScript:
Introduction to JavaScript
11 31-10-2023
The <script>:
➢In HTML, JavaScript code is inserted between <script>
and </script> tags.
<script>
document.getElementById("demo").innerHTML = "My
First JavaScript";
</script>
Introduction to JavaScript
12 31-10-2023
JavaScript Functions and Events:
➢ A JavaScript function is a block of JavaScript code that can be
executed when "called" for.
➢ For example, a function can be called when an event occurs,
like when the user clicks a button.
Introduction to JavaScript
13 31-10-2023
JavaScript in <head> or <body>:
➢ You can place any number of scripts in an HTML document.
➢ Scripts can be placed in the <body> or in <head> section, or
both.
➢ Placing scripts at the bottom of the <body> element improves
the display speed because script interpretation slows down the
display.
Introduction to JavaScript
14 31-10-2023
JavaScript including Techniques:
➢ JavaScript can be included in your HTML file in two ways:
❖ Internal JS
❖ External JS
Introduction to JavaScript
15 31-10-2023
1. Internal JS:
➢ The JavaScript code is written in the HTML file.
➢ It is done by writing the JS code inside <script> tag and placing
this in either the<head> or <body> tag as per the requirement.
➢ Syntax:
<script>
//JS code
</script>
Introduction to JavaScript
16 31-10-2023
2. External JS:
➢ JavaScript code is written in another file with the .js extension.
➢ A link to this JS file is added to the HTML file.
➢ We can do so by using the <script> tag and adding two
attributes, type and src; the type attribute has the value
“text/javascript", and the src attribute has the path to the JS file.
➢ This is the preferred way as it promotes code readability and
reusability.
➢ Syntax:
<script type="text/javascript" src="script.js">
</script>
Introduction to JavaScript
17 31-10-2023
Summary:
➢ Javascript is a cross-platform, interpreted, object-oriented
scripting language. It is used to make webpages interactive.
➢ Javascript is the most popular and commonly used
programming language in the world
➢ Javascript is used for client-side (in the browser) and server side
development(in a Node.js environment).
➢ Javascript can be added to HTML in two ways: Internal JS and
external JS
➢ There are many frameworks based on Javascript (React,
Angular, Vue, React Native, etc.) help us build complex
interfaces efficiently.
Introduction to JavaScript
18 31-10-2023
Text Books & References
TEXT BOOKS:
➢ Internet & World Wide Web How to Program, 5th edition, by Paul Deitel Harvey
Deitel, Abbey Deitel, Pearson Publication, 2018.
➢ App Inventor 2: Create Your Own Android Apps 2nd Edition by David Wolber,
Hal Abelson, Ellen Spertus, Liz Looney, 2014.
REFERENCES:
➢ CS50's Web Programming with Python and JavaScript -
https://cs50.harvard.edu/web/2020
➢ “Get Coding! Learn HTML, CSS & JavaScript & Build a Website, App & Game”
by Young Rewired State, Walker Books, 2016.
➢ Version Control with Git, by Jon Loeliger, Matthew McCullough, 2nd Edition,
2012.
➢ Ultimate web design course: https://university.webflow.com/courses/ultimate-
web-design-course . Introduction to JavaScript
19 31-10-2023
Introduction to JavaScript
20 31-10-2023
Introduction to JavaScript
