Lecture 9:

Introduction to JavaScript

Sukrit Shakya
[email protected]

Friday, July 16, 2021 CC4057 INTRODUCTION TO INFORMATION SYSTEMS 1

 Contents
• JavaScript Basics
• Variables and Data types
• Loops and Conditionals
• Functions

Friday, July 16, 2021 CC4057 INTRODUCTION TO INFORMATION SYSTEMS 2

 What is JavaScript?
• a lightweight programming language
 used to make web pages interactive
 insert dynamic text into HTML (ex: user name)
 react to events (ex: page loads, user clicks)
 get information about a user's computer (ex: browser type)
 perform tasks on user's computer (ex: form validation)
• a web standard (but not supported identically by all browsers)
• NOT related to Java other than by name and some syntactic
similarities

Friday, July 16, 2021 CC4057 INTRODUCTION TO INFORMATION SYSTEMS 3

 Language Features
• interpreted, not compiled
• relaxed syntax and rules
 variables don't need to be declared with a specific type (dynamically
typed)
 errors often silent (few exceptions)
• is case-sensitive
• JS code runs in the browser
• contained within a web page and integrates with its HTML/CSS content
• can easily change the content of HTML elements and their CSS properties

Friday, July 16, 2021 CC4057 INTRODUCTION TO INFORMATION SYSTEMS 4

 Variables
• variables are declared with the var keyword
• types are not specified while declaring variables
• primitive data types are
 number, string, boolean

var clientName = "Connie Client"; semicolons need to be

var age = 32; added at the end of
every JS statement
var weight = 127.4;

Friday, July 16, 2021 CC4057 INTRODUCTION TO INFORMATION SYSTEMS 5

 Type conversion
var x = Number("3.14");
var y = Number("100"); integers and real numbers are
represented by the same type
var z = String(9.89);
var a = String(7);

var hh = String(true);
will convert a boolean to a string

Friday, July 16, 2021 CC4057 INTRODUCTION TO INFORMATION SYSTEMS 6

 Comments
• JS code can be commented in 2 ways

// single-line comment
/* this is a
multi-line comment */

Friday, July 16, 2021 CC4057 INTRODUCTION TO INFORMATION SYSTEMS 7

 Arithmetic Operators
• JavaScript arithmetic operators
Operator Meaning
+ Addition
- Subtraction
/ Division
* Multiplication
% Modulus - remainder of division
** Exponent - raise a number to the power of another number

Friday, July 16, 2021 CC4057 INTRODUCTION TO INFORMATION SYSTEMS 8

 Arithmetic operations in JS
var x = (2 + 2) - 2; // x = 2
var y = 5 * 2; // y = 10
var z = 10 / 2; // z = 5
var a = 5 % 2; // a = 1
var b = 10 ** 2; // b = 100

Friday, July 16, 2021 CC4057 INTRODUCTION TO INFORMATION SYSTEMS 9

 Comparison and Logical Operators
Operator Description Operator Description
== equality (equal to) && and
!= inequality (not equal to) || or
> greater than ! not
< less than
>= greater than or equal to
<= less than or equal to
=== Equal value and equal type

Friday, July 16, 2021 CC4057 INTRODUCTION TO INFORMATION SYSTEMS 10

 JS is loosely typed
• “loosely typed” means a language does not bother with types too much, and
does conversions automatically while computing expressions, i.e. you can
easily add string to an integer and get the result as a string (or even as an
integer in some languages as Perl)
• whereas in a strongly typed language such as python, adding a string with an
integer would result in an error

var a = 1 + "1"; //a = "11"

var b = "5" == 5; //b = true
var c = "5" === 5; //c = false

Friday, July 16, 2021 CC4057 INTRODUCTION TO INFORMATION SYSTEMS 11

 if/else statement
if (condition) {
statements;
} else if (condition) {
statements;
} else {
statements;
}

Friday, July 16, 2021 CC4057 INTRODUCTION TO INFORMATION SYSTEMS 12

 if/else statement
var greeting;

if (hour < 10) {
    greeting = "Good morning";
} else if (hour < 20) {
    greeting = "Good day";
} else {
    greeting = "Good evening";
}

Friday, July 16, 2021 CC4057 INTRODUCTION TO INFORMATION SYSTEMS 13

 for loop
var sum = 0;
for (var i = 0; i < 10; i++) {
sum = sum + i;
}
• initial value of counter i is 0
• counter gets incremented by 1
everytime
• loops runs until value of i is less
than 10

Friday, July 16, 2021 CC4057 INTRODUCTION TO INFORMATION SYSTEMS 14

 while loop
while (condition) { • while loop runs the loop as long as
the condition is true
statements; • do while loop will execute the code
} block once, before checking if the
condition is true, then it will repeat
the loop as long as the condition is
true
do { • in do while, the loop will always be
    statements; executed at least once, even if the
} condition is false
while (condition);

Friday, July 16, 2021 CC4057 INTRODUCTION TO INFORMATION SYSTEMS 15

 while loop
while (condition) {
statements;
}

do {
    statements;
}
while (condition);

Friday, July 16, 2021 CC4057 INTRODUCTION TO INFORMATION SYSTEMS 16

 while loop
var i = 0; var i = 0;
var s = 0; var s = 0;
while (i<10){ do {
s = s + i; s = s + i;
i = i + 1; i = i + 1;
} } while (i<10);

Friday, July 16, 2021 CC4057 INTRODUCTION TO INFORMATION SYSTEMS 17

 Where to put JS code
• In HTML, JavaScript code is put inside the <script></script> tags
• You can use any number of scripts in a HTML document
• Scripts can be placed in the <body>, or in the <head> or in both
• JS code can also be put in external files and then be linked into HTML
files
• JavaScript files are saved with a .js extension

Friday, July 16, 2021 CC4057 INTRODUCTION TO INFORMATION SYSTEMS 18

 Internal JavaScript
<!DOCTYPE html>
<html>
<body> 
the <script> tag can be put
<h1>A Web Page</h1> anywhere inside the head or
<p id="demo">A Paragraph</p> body tags

<script>
/* JavaScript code goes here. */
</script>

</body>
</html>

Friday, July 16, 2021 CC4057 INTRODUCTION TO INFORMATION SYSTEMS 19

 External JavaScript
myScript.js index.html
/* JavaScript code */ <!DOCTYPE html>
<html>
/* JavaScript code */ <head> link to external JS file
/* JavaScript code */ <script src="myScript.js"></script>
</head>
<script> tags are not required in <body> 
external JS files
<h1>A Web Page</h1>
<p id="demo">A Paragraph</p>

</body>
</html>

Friday, July 16, 2021 CC4057 INTRODUCTION TO INFORMATION SYSTEMS 20

 Writing content to a HTML document

Friday, July 16, 2021 CC4057 INTRODUCTION TO INFORMATION SYSTEMS 21

 Asking for user input with prompt

Friday, July 16, 2021 CC4057 INTRODUCTION TO INFORMATION SYSTEMS 22

 Displaying pop-up boxes with alert

Friday, July 16, 2021 CC4057 INTRODUCTION TO INFORMATION SYSTEMS 23

 Functions
• syntax for writing functions
function name(parameters) {
    code to be executed
}
• example
function add(a,b){
takes a and b as parameters and
return a + b; returns their sum
}

Friday, July 16, 2021 CC4057 INTRODUCTION TO INFORMATION SYSTEMS 24

 Functions

Friday, July 16, 2021 CC4057 INTRODUCTION TO INFORMATION SYSTEMS 25

 Functions

Friday, July 16, 2021 CC4057 INTRODUCTION TO INFORMATION SYSTEMS 26

 Event Handlers
• JavaScript functions can be set as event handlers
 when you interact with the element, the function will execute
• onclick is just one of many event HTML attributes we can use

<button onclick="myFunction()">Click me!</button>

when the button is clicked, the

function will be executed

Friday, July 16, 2021 CC4057 INTRODUCTION TO INFORMATION SYSTEMS 27

 Changing content & style of HTML elements
• HTML elements can be accessed in JS using their corresponding ids
• then the style and content of the element can be easily changed
• getElementById will
grab the element with
the particular id
• content of the element
can be changed by
setting the innerHTML
property
• different styles can be
applied by adding
various styles
properties, color is one
of them

Friday, July 16, 2021 CC4057 INTRODUCTION TO INFORMATION SYSTEMS 28

 Changing content & style of HTML elements

Friday, July 16, 2021 CC4057 INTRODUCTION TO INFORMATION SYSTEMS 29

 Using an external JS file

script1.js

js_demo.html

Friday, July 16, 2021 CC4057 INTRODUCTION TO INFORMATION SYSTEMS 30

 End of Lecture 18

Friday, July 16, 2021 CC4057 INTRODUCTION TO INFORMATION SYSTEMS 31

 Thank you !
Any questions ?

Friday, July 16, 2021 CC4057 INTRODUCTION TO INFORMATION SYSTEMS 32