Scribd
Upload
5 views

2.1. Introduction to JavaScript

This document provides an introduction to JavaScript, covering its role in both client-side and server-side scripting, along with its features and techniques. It outlines the course outcomes and compares client-side and server-side scripting, emphasizing JavaScript's importance in creating interactive web pages. Additionally, it discusses how JavaScript can be included in HTML and references various textbooks and resources for further learning.

Uploaded by

ithachiuchiya20
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
5 views

2.1. Introduction to JavaScript

This document provides an introduction to JavaScript, covering its role in both client-side and server-side scripting, along with its features and techniques. It outlines the course outcomes and compares client-side and server-side scripting, emphasizing JavaScript's importance in creating interactive web pages. Additionally, it discusses how JavaScript can be included in HTML and references various textbooks and resources for further learning.

Uploaded by

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

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

You might also like