Scribd
Upload
23 views35 pages

IT1100-IWT-Lecture 05

The document summarizes JavaScript concepts including strings, arrays, functions, the Document Object Model (DOM), and event handling. It discusses how JavaScript strings can store and manipulate text, and how arrays can hold multiple values. It also describes how functions are reusable blocks of code that can take parameters and return values. The document then explains how the DOM represents an HTML document as objects that can be manipulated, and how event handling allows responding to user interactions using events and event handlers.

Uploaded by

thedarkhell123
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
23 views35 pages

IT1100-IWT-Lecture 05

The document summarizes JavaScript concepts including strings, arrays, functions, the Document Object Model (DOM), and event handling. It discusses how JavaScript strings can store and manipulate text, and how arrays can hold multiple values. It also describes how functions are reusable blocks of code that can take parameters and return values. The document then explains how the DOM represents an HTML document as objects that can be manipulated, and how event handling allows responding to user interactions using events and event handlers.

Uploaded by

thedarkhell123
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/ 35

IT1100 - Internet and Web Technologies

Lecture 05
JavaScript – Part II

1
Content

• JavaScript Strings

• Arrays in JS

• DOM API

• Event handling

2
JavaScript Strings
JavaScript Strings
• JavaScript strings are used for storing and manipulating text.
• zero or more characters written inside quotes , using single or double quate.
• var Description=a“IWT";
var Description = ‘Lecture 05’
var Description = 'He is called “Mahela”’
• You can use quotes inside a string, as long as they don't match the quotes
surrounding the String
Length of a String
var txt = "lets watch legend playing";
var Length=txt.length;
Escape Character
• Since strings must be written within quotes, JavaScript will
misunderstand the following string:
var s1 = "IWT Lecture 05 “JavaScript” Part 2.”;
var s2 = "IWT Lecture 05 'JavaScript' Part 2”;
var s3 = "IWT Lecture 05 \JavaScript\ Part 2";

To avoid that problem, use the backslash escape character.

var s1 = "IWT Lecture 05 \"JavaScript\" Part 2";

var s2 = "IWT Lecture 05 \'JavaScript\' Part 2";

var s3 = "IWT Lecture 05 \\JavaScript\\ Part 2";


String Search Methods
• The indexOf() method returns the index (the position)
of the first occurrence
var text = "this lecture is JavaScript lecture";
text.indexOf("lecture")

• The lastIndexOf() method returns the index of the last


occurrence of a specified text in a string
var text = "this lecture is JavaScript lecture";
text.lastIndexOf("lecture")

Both methods return -1 if the text is not found


Converting Variables to Numbers
• The Number() method returns a number converted
from its argument.
Number(“10") // returns 10
Number(“IWT") // returns NaN

• The parseInt() parses a string and returns a


whole number.
parseInt("10"); // returns 10
parseInt("10.33"); // returns 10
Arrays in JS
JavaScript Arrays
• An array is a special variable, which can hold more
than one value at a time.
• var array_name = [item1, item2, ...];
• var cars = [“Toyota", "Volvo"];

How to insert new elements


• Cars[2]=“BMW”;

How to display element ant it’s value


• Document.write(Cars[0]);
9
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Arrays</h2>
<p>The best way to loop through an array is using a standard for loop:</p>
<p id="demo"></p>
<script>
var fruits, text, fLen, i;
fruits = ["Banana", "Orange", "Apple", "Mango"];
fLen = fruits.length;
output
for (i = 0; i < fLen; i++) {
document.write(fruits[i]+"</br>");
}
</script>
</body>
</html>

10
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Arrays</h2>
<p>The best way to loop through an array is using a standard for loop:</p>
<p id="demo"></p>
<script>
var fruits, text, fLen, i;
fruits = ["Banana", "Orange", "Apple", "Mango"];
fLen = fruits.length;
text = "<ul>"; output
for (i = 0; i < fLen; i++) {
text += "<li>" + fruits[i] + "</li>";
}
text += "</ul>";
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>

11
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript For/In Loop</h2>
<p>The for/in statement loops through the properties of an
object.</p>

<script>
var txt = "";
var person = ["John","Doe","James"];
output
var x;
for (x in person) {
txt = txt + person[x] + " ";
}
document.write(txt);
</script>
</body>
</html>
12
Functions in JS
Functions
• A function is a group of reusable code which can be called anywhere
in your program.

• This eliminates the need of writing the same code again and again.

• It helps programmers in writing modular codes.

• Functions allow a programmer to divide a big program into a number


of small and manageable functions.

14
Function Definition
• Before we use a function, we need to define it.
• The most common way to define a function in JavaScript is by using the
function keyword, followed by a unique function name, a list of parameters
(that might be empty), and a statement block surrounded by curly braces.

<script>
function function_name (parameter-list)
{
statement(s)
}
</script>

15
Calling a Function
• To invoke a function somewhere later in the script, you would simply need to
write the name of that function as shown in the code.
<html>
<head>
<script>
function sayHello()
{ output
document.write ("Hello there!");
}
</script>
</head>
<body>
<script>
sayHello();
</script>
</body>
</html>
16
Function Parameters

• Till now, we have seen functions without parameters.


• But there is a facility to pass different parameters while calling a
function.
• These passed parameters can be captured inside the function
• Any manipulation can be done over those parameters.
• A function can take multiple parameters separated by comma.

17
Function Parameters Example
<html>
<head>
<script type="text/javascript">
function sayHello(name, age)
{
document.write (name + " is " + age + " years old.");
} output
</script></script>
</head>
<body>
<script>
sayHello('Zara', 7);
</script>
</body>
</html>

18
The return Statement
• A JavaScript function can have an optional return statement.

• This is required if you want to return a value from a function.

• This statement should be the last statement in a function.

• For example, you can pass two numbers in a function and


then you can expect the function to return their
multiplication in your calling program.

19
<html>

The return
<head>
<script>

Statement
function concatenate(first, last)
{
var full;
full = first + last;
return full;
}
function secondFunction()
{ output
var result;
result = concatenate('Zara ', 'Ali Khan'); Zara Ali Khan
document.write (result );
}
</script>
</head>
<body>
<script>
secondFunction();
</script>
</body>
</html> 20
Document Object
Model
Document Object Model
When a web page is loaded, the browser creates a Document Object Model
of the page.

The HTML DOM model is constructed as a tree of Objects:

22
Document Object Model
In the DOM, all HTML elements are defined as objects.

The programming interface is the properties and methods of each object.

<p
<p id="para1"></p>
id="para1"></p>
<script>
<script>
document.getElementById("para1").innerHTML
document.getElementById("para1").innerHTML == "Hello
"Hello World!";
World!";
</script>
</script>

Method
Method Property
Property

23
DOM Methods

24
DOM API
<form>
<input type=“text” id=“txtName”>
<div id=“divOutput”></div>
</form>
--------------------------------------------------------
//Read the value
var name = document.getElementById("txtName ").value;

//Display output
document.getElementById("divOutput").innerHTML = “Hello “+name;

25
Event Handling
Event Handling
• Event handling is used to implement responses for the
user events
• Click, type, select, drag and drop, etc…

Ex:
• Read form values and validate before submitting the
form and display proper error messages

27
Event Handling
• Event handlers are used to handle the events, when
the events are triggered

• There 2 main ways of developing event handlers in JS

1. DOM level 0 inline event handlers

2. Event registration using the addEventListener() function

28
DOM level 0 inline event handlers
• DOM allows to assign events to HTML elements using
JavaScript:

• HTML event attributes are used.


• onclick, onload, etc…

<button onclick="alert('Hello');">Try it</button>

29
DOM level 0 inline event handlers
• If there is more code to write, it is good to implement a function and
call that function in the event handler

<button onclick="myFunction();">Try it</button>


<script>
function myFunction() {
alert("Do whatever needed in this function");
}
</script>

30
DOM level 0 inline event handlers
<html>
<head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = document.getElementById("inTxt").value;
}
</script>
</head>
<body>

<p id="demo"></p>

<input type="text" id="inTxt">

<button onclick="myFunction()">Click Me</button>


</body>
</html>

31
Event registration using addEventListener()

• It is good the separate the JS from HTML as much as


possible, towards increasing the modifiability.

• By using the addEventListener() function, we can


eliminate the HTML event attributes

32
Event registration using addEventListener()
<button id="btnTest">Try it</button>
<script>
var btn = document.getElementById("btnTest");
btn.addEventListener("click", function() {
alert("Do whatever needed in this function");
}
);
</script>

33
Event registration using addEventListener()
<html>
<head>
</head>
<body>
<input type="text" id="inTxt">

<button id="myBtn">Click Me</button>

<p id="demo"></p>
<script>
document.getElementById("myBtn").addEventListener("click", function(){
document.getElementById("demo").innerHTML = document.getElementById("inTxt").value;
});
</script>
</body>
</html>
34
Summary

• JavaScript Arrays

• String and Numerical methods

• DOM API

• Event handling

35

You might also like