2.1. Introduction to JavaScript
2.1. Introduction to JavaScript
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
Introduction to JavaScript
4 31-10-2023
Course Outcomes:
CO. Outcome K Level
(Apply) Understand and apply JavaScript concepts for dynamic web page
CO2 K3
design
CO3 (Apply) Understand and apply shell commands and GIT workflow 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
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
Introduction to JavaScript
13 31-10-2023
Introduction to JavaScript
14 31-10-2023
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
Introduction to JavaScript
20 31-10-2023
Introduction to JavaScript