CS-371 Web
Application
Development
(JAVASCRIPT-PART 1)
1
Why we study
Javascript?
JavaScript is one of the 3 languages all web developers
must learn:
1. HTML to define the content of web pages
2. CSS to specify the layout of web pages
3. JavaScript to program the behavior of web pages
2
1. JavaScript
Client-side scripting language
Designed to add interactivity to HTML pages
Used in millions of Web pages to:
improve design
validate forms
detect browsers
create & read cookies
and much more
3
1. JavaScript….
The most popular scripting language on the internet
Works in all major browsers, e.g. IE, Firefox, Chrome, etc.
JavaScript is an interpreted language
scripts executes without preliminary compilation
Usually embedded directly into HTML pages
Everyone can use JavaScript without purchasing a license
4
1.1 JavaScript: Common uses
Gives HTML designers a programming tool
Can react to events
Can read and write HTML elements
Can be used to validate data
Can be used to detect the visitor's browser
Can be used to create cookies
5
2. Embedding JavaScript in HTML
Two methods to embed JavaScript in to HTML code
◦ Internal Script: directly written in HTML code
◦ External Script: written in separate file
<script> tag is used to tell the browser that a script follows
6
2.1 Internal Scripts
The <SCRIPT> tag is used to embed JavaScript code in HTML
documents
<SCRIPT LANGUAGE="JavaScript">
[JavaScript Statements...]
</SCRIPT>
JavaScript can be placed anywhere between <HTML> and </HTML>
tags
two possibilities
◦ the <HEAD>…</HEAD> portion
◦ the <BODY>…</BODY> portion
7
2.1 Internal Scripts…
<HTML>
<HEAD><TITLE>Using Multiple scripts</TITLE>
<SCRIPT LANGUAGE="JavaScript">
[JavaScript statements...]
</SCRIPT>
</HEAD>
<BODY>
<H1>This is another script</H1>
<SCRIPT LANGUAGE="JavaScript">
[JavaScript statements...]
</SCRIPT>
</BODY>
</HTML>
8
2.2 External Script
We place script in a separate file and include this in HTML code
SRC attribute of the <SCRIPT> is used to include the external
JavaScript file in HTML
<script src="myscripts.js"> </script>
Useful when you have lengthy scripts
Improve the readability
9
3. JavaScript Conventions
Using the Semicolon (3 ways)
document.write("Hello"); alert("Good bye")
document.write("Hello")
alert("Good bye")
document.write("Hello"); This is the recommended way to write JavaScript code.
alert("Good bye");
Case Sensitivity
Comments:
◦ single line //
◦ Multiple lines /* */
10
3. JavaScript Conventions…
• Using Quotes
◦ document.write(“<font color=“red”>Hello World</font>”)
◦ document.write(“<font color=‘red’>Hello World</font>”)
11
4. Writing JavaScript
Start of JS script
Writing on webpage HTML code in JS
End of JS script
12
4. Writing JavaScript…
Out put of the JS code
13
4.1 Variables in JavaScript
Name of a memory location which holds the data of a certain type (data
types)
Four common data types in JavaScript
numbers, strings, Boolean, null values
JavaScript is a loosely typed language
Don't have to specify type of information to be stored in a variable in advance.
Automatically types a variable based on kind of information stored in it.
14
4.1 Variables in JavaScript…
The word “var” is used to declare a variable
◦ var LastName = “Smith”
◦ var AccountNumber = 1111
• Variable Naming
◦ First character can not be a digit
◦ Other characters may be digits, letters or underscore
◦ Reserved words can not be used
◦ Case sensitive
15
4.1 Variables in JavaScript…
• Variable Initialization
◦ var variableName = initialValue
◦ var variableName1 = initialValue1, variableName2 = initialValue2, …
16
5. JavaScript Operators
An operator is simply a symbol that tells the compiler (or interpreter) to
perform a certain action
Assignment Operator: =
Arithmetic Operators: +, - , *, /, %, ++, --
Logical Operators: &&, ||, !
Comparison Operators: ==, ===, !=, !==, <, >, <=, >=
17
6. Input/Output in JavaScript
write(); is used to write on browser
◦ document.write(“hello world”)
◦ document.write(a)
prompt(); is used to take input from users
◦ var num = prompt(“Please Enter a Number”, 0)
18
6. Input Output in JavaScript…
Start of JS code
User input
Writing on browser
End of Script
19
7. JavaScript Function
User defined functions
Predefined functions
20
7. JavaScript Function…
Functions are defined using the keyword function, followed by the name of
the function and list of parameters
function functionName([parameters])
{
[statements]
}
21
7. JavaScript Function…
Calling a function
◦ The syntax of a function call is:
functionName([arguments])
22
Java Script Functions
23
7. JavaScript Function…
Start of the function
Asks user to
enter name
Writes name on
the webpage
Calling a function
24
7. JavaScript Function…
Common events
onClick
onDblClick
onChange
onFocus
onMouseOver
onMouseOut
onSubmit
onload
25
Example to add two numbers
26
7. JavaScript Function…
• Some common predefined math functions
◦ Math.sqrt
◦ Math.pow
◦ Math.abs
◦ Math.max
◦ Math.min
◦ Math.floor
◦ Math.ceil
◦ Math.round
◦ Math.random
27
8. Conditional Statements
If statement
◦ if (condition)
statement
◦ if(condition)
{ statements }
If-else statement
◦ if(condition)
{statements}
else
{statements}
28
8. Conditional Statements…
Random number is generated
User’s Input
If condition
29
8. Conditional Statements…
text
On click event
30
9. Loops
For loop
for(var i=1; i<10; i++)
{
Document.write(“hello world”)
}
While loop
While(condition)
{
//statements
}
31
9. Loops
For loop
Do-while loop
32
9. Loops
Output of for loop
Output of do-while loop
33
10. DOM Manipulation
DOM (Document Object Model) manipulation refers to the process
of dynamically changing the structure, content, or style of a web
page using JavaScript. This is achieved by interacting with the
Document Object Model (DOM).
Why Manipulate the DOM?
◦ Change content dynamically
◦ Update styles and classes
◦ Add/remove elements
◦ React to user actions (e.g., clicks, inputs)
34
10. DOM Manipulation
Selecting Elements (Selecting by ID)
<p id="demo">Hello World</p>
const para = document.getElementById("demo");
Returns a single element
Fastest selection method
35
10. DOM Manipulation
Selecting Elements (Selecting by Class)
<p class="text">Hello</p>
<p class="text">World</p>
const items = document.getElementsByClassName("text");
Returns HTMLCollection
Use loop to access each element
36
10. DOM Manipulation
Selecting Elements (Selecting by Tag Name)
<p>One</p>
<p>Two</p>
const paras = document.getElementsByTagName("p");
Selects all <p> tags
Also returns an HTMLCollection
37
10. DOM Manipulation
Selecting Elements (querySelector & querySelectorAll)
<div class="container">
<p class="info">Text</p> </div>
document.querySelector(".container .info"); // first match
document.querySelectorAll(".info"); // all matches
Uses CSS selectors
querySelector: single element
querySelectorAll: NodeList
38
10. DOM Manipulation
Modifying Elements(Changing Text Content)
<p id="para">Old Text</p>
document.getElementById("para").textContent = "New Text";
Changes visible content
.textContent vs .innerText (innerText respects styling)
39
10. DOM Manipulation
Modifying Elements(Changing HTML Content)
<p id="myPara"></p>
document.getElementById("myPara").innerHTML = "<strong>Bold
Text</strong>";
Use .innerHTML to insert HTML
40
10. DOM Manipulation
Modifying Elements(Changing Styles)
document.querySelector("p").style.color = "blue";
document.querySelector("p").style.fontSize = "18px";
Access styles via .style property
Only inline styles are changed
41
10. DOM Manipulation
Modifying Elements(Setting Attributes)
const img = document.querySelector("img");
img.setAttribute("alt", "A sample image");
img.src = "new-image.png";
Modify or set attributes directly or with .setAttribute()
42
Summary
What is JavaScript?
Embedding JavaScript with HTML
JavaScript conventions
Variables in JavaScript
JavaScript operators
Input output in JavaScript
JavaScript functions
Conditional Statements
Looping Statements
DOM Manipulation
43
