Scribd
Upload
3 views

To Become Familiar With JavaScript Basics for User Interaction

This document outlines a practical lab session for a Web Engineering course focused on JavaScript basics, including event handling and DOM manipulation. It covers JavaScript syntax, data types, functions, and regular expressions, along with their applications in creating dynamic web content. Additionally, it includes lab tasks for students to implement basic arithmetic operations and a To-Do List application using JavaScript and HTML forms.

Uploaded by

Tabish Memon
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
3 views

To Become Familiar With JavaScript Basics for User Interaction

This document outlines a practical lab session for a Web Engineering course focused on JavaScript basics, including event handling and DOM manipulation. It covers JavaScript syntax, data types, functions, and regular expressions, along with their applications in creating dynamic web content. Additionally, it includes lab tasks for students to implement basic arithmetic operations and a To-Do List application using JavaScript and HTML forms.

Uploaded by

Tabish Memon
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 7

Department of Software Engineering

Mehran University of Engineering and Technology, Jamshoro

Course: SW417– Web Engineering


Instructor Mr. Mansoor Samo Practical/Lab No. 03
Date CLOs CLO-1
Signature Assessment Score 1 Mark

Topic To become familiar with JavaScript basics for user interaction


Objectives - To become familiar with event handling in JavaScript using DOM

Lab Discussion: Theoretical concepts and Procedural steps

JavaScript
It is a lightweight, case sensitive, client-side scripting language that allows interactions
with the user and creation of dynamic webpages. JavaScript (JS) is a programming
language mostly used to dynamically script webpages on the client side, but it is also
often utilized on the server-side, using packages such as Node.js. It enables you to create
dynamically updating content, control multimedia, animate images, and a lot of other
things. It is an open and cross platform language.
Advantages
• Less server interaction
• Immediate feedback to the visitors
• Increased interactivity
• Richer interfaces
Syntax
<script language="javascript" type="text/javascript">
<!--JavaScript code-->
</script>
JavaScript can be implemented using JavaScript statements that are placed within the
<script>... </script> HTML tags in a web page. Placing scripts at the bottom of the
<body> element improves the display speed, because script interpretation slows down
the display.
Simple JS program

Ways of including javaScript in HTML


There are 3 ways of adding javaScript to your website:
External javaScript: External JavaScript file with .js extension linked with ‘src’ attribute
of <script> tag.
Internal javaScript: javaScript code defined within
<script>…</script> tags.
Inline javaScript: javaScript code on user interaction events.
(e.g. button click etc) Example: <button
onclick="alert('Clicked')">Click me!</button>

Data types in JavaScript

There are two types of Data types in JavaScript.


1. Primitive Data types: undefined, null, number, string, boolean.
2. Reference Data types: arrays and objects.

The HTML DOM (Document Object Model)


• The HTML DOM allows JavaScript to change the content of HTML elements.
• 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:
• The programming interface is the properties and methods of each object.
• A property is a value that you can get or set (like changing the
content of an HTML element).
• A method is an action you can do (like add or deleting an HTML element).
<script>
document.getElementById("demo").innerHTML = "Hello World!";
</script>
In the example above, getElementById is a method, while innerHTML is a property.

HTML EVENTS
• An HTML event can be something the browser does, or
something a user does.
• JavaScript can be used to provide response when such events
occur.Here are some examples of HTML events:
o An HTML web page has finished loading
o An HTML input field was changed
o An HTML button was clicked etc

Functions
Function is a block of code that performs some task. The functions are called in
response to some events (button click, mouse hover etc…).
SYNTAX
JavaScript function can be created as follows:
function function_name ( argument list if any) {
// JavaScript code
}

Javascript Variables
 Variables are named memory locations for storing values.
 Variables in Javascript are declared with the “var” keyword.
 JavaScript is untyped language.
JavaScript Regular Expressions:

A regular expression is a sequence of characters that form search pattern.


The user can define what needs to be searched in a text with the help of regular
expressions.
Regular expressions can be of any number of characters, be it alphabet,
digits or special characters.
These expressions are more commonly used for text search and text
replacement operations.
General Syntax of Regular Expressions:
/pattern/flag

Flags: There are several flags which are used to alter the behavior of a regular
expression. Flags may be appended to the end of a regex literal or they may be
specified as the second argument to the Regular expression.

Flag Description

g Global, Finds all matches instead of stopping after first.

i Ignore case. /[a-z]/i is equivalent to /[a-zA-Z]/

m Multiline. ^ and $ match the beginning and end of each


line respectively treating \n and \r as delimiters.

Patterns: Brackets are used to find the range of characters.

Pattern Description

[a-z] Find all characters from a to z (lower cases only)


[0-9] Finds any digits between 0 to 9
[a-z|0-9] Find any character of digits separated by “|”

Quantifiers: Quantifiers define the number of occurrences of a string.

Quantifiers Description

N+ + Indicates one or more occurrence of the


character n
N* * Indicates zero or more occurrences of the
character n
N? ? Indicates zero or one occurrence of character n
Brackets: They are used to find a particular range of characters.

Brackets Description

[abc] Find any characters between the brackets


[^abc] Finds any character NOT between the brackets
[0-9] Find any digit between brackets
[^0-9] Finds any non-digit NOT between the brackets

g modifier (Sample Code):

The output will return the “test” from string.

i modifier (Sample Code):

The output will return the “test” from string.


m modifier(Sample Code):

The function matching return “expression” string from pattern.

The function returns all characters except 123 from str.

Lab Task

Task 1: Create a JavaScript program that can perform the basic arithmetic
operations.

Task 2: Create a simple To-Do List application using HTML forms, JavaScript
DOM manipulation, and event handlers.
 This task creates a simple To-Do List application using HTML forms,
JavaScript DOM manipulation, and event handlers.
 The HTML structure contains an input field for entering tasks, a button to
add tasks, and an unordered list (<ul>) to display the tasks.
 The JavaScript file (todo.js) defines a function addTask() that adds a new
task to the list when the user clicks the "Add Task" button.
 The function first gets the task text from the input field, creates a new list
item (<li>) with the task text, appends it to the task list, and clears the input
field.
 If the user tries to add an empty task, an alert is displayed prompting them
to enter a task.

You might also like