Chapter 4 - Javascript

Chapter Three
Web application Requirement

engineering
Web application Requirement engineering
Group presentation

Where Do Requirements Come From?

Revision on Requirements Engineering Activities

Software Requirements with Relevance to the Web

Principles for RE of Web Applications

Adapting RE Methods to Web Application Development.













• Software Requirements with Relevance to the Web

JAVASCRIPT
Introduction
• JavaScript is a lightweight, interpreted programming language.

• Very easy to implement because it is integrated with HTML.
• It is open and cross-platform.
• Great for developing front-end as well as back-end softwares
using different JavaScript based frameworks like jQuery, React,
Express, Node.JS etc.
• It comes installed on every modern web browser
• Chrome, Firefox, Safari, …
• you really do not need any special environment setup.
• JavaScript engines were originally used only in web browsers
• now extended to mobile app development, desktop app
development, and game development.
Application of JavaScript
• Some of the applications of JavaScript

• Client side validation
• Verifying any user inputs before submitting to server
• Manipulating HTML Pages
• Adding and deleting any html tags, Change its look and
feel..
• User Notifications
• Back-end Data Loading
- Retrieve data from server using Ajax
• Presentations
• creating presentations with website look and feel with libraries like
RevealJS, BespokeJS
• Server Applications
• Build fast and scalable network applications including
webservers with Node JS
JavaScript Syntax
• You can place the <script> tags, anywhere in your page.

• In <Head> is Recommended.
• Language attribute specifies what scripting language you are using.
Type also tells the same thing and recommended in recent version of
HTML
• function document.write which writes a string or HTML (both) into our HTML
document.
• there is no main() function/method
JavaScript Syntax
• spaces, tabs, and newlines that appear in JavaScript programs are ignored.
• Semicolons are Optional (if each statement is on separate line).
• JavaScript is a
case-sensitive
language.
• Comments
Datatype
• Datatype - defines type of value and operation.

• JavaScript allows you to work with three primitive data types
• Numbers e.g. 123, 120.50, 123e5, 123e-5 etc.
− JavaScript does not make a distinction between integer values and floating-
point values.
− All numbers are represented as 64-bit floating-point values.
• Strings e.g “hello world" etc.
• You can use single or double quotes.
• Boolean e.g. true or false.
• JavaScript also defines two trivial data types,
• null and
• Undefined – a variable without a value
Datatype
• JavaScript supports a composite data type known as object.

• written with curly braces { }
• JavaScript arrays
• support numbered indexing
• are written with square brackets.
• Array items are separated by commas.
Identifiers and Reserved Words
• In JavaScript, the first character must be a letter, or an underscore (_), or a

dollar sign ($).
• Subsequent characters may be letters, digits, underscores, or dollar signs.
• Reserved words (like JavaScript keywords) cannot be used as names.
abstract else instanceof switch do

boolean enum int synchronized double
break export interface this import
byte extends long throw in
case false native throws static
catch final new transient super
char finally null true with
class float package try
const for private typeof
continue function protected var
debugger goto public void
default if return volatile
delete implements short while
Variables
• Variables are containers for storing data (values).

• There are 3 ways to declare a JavaScript variable: var, let, const.
• After the declaration, the variable has no value ( undefined )

• To assign a value to the variable, use the equal sign.
• You can also assign a value to the variable when you declare it.
• JS is untyped language. variable can hold a value of any data type
Variables
• var
• can be re-declared and updated
• You can use the variable before it is declared (called Hoisting)
• can NOT have block scope - Variables declared inside a { } block can be
accessed from outside the block
• let ( introduced in ES6 (2015) )

• can be updated but not re-declared
• must be Declared before use.
• have Block Scope - Variables declared inside a { } block cannot be
• const ( also introduced in ES6 (2015) )

• Can not be updated and re-declared
• have Block Scope - Variables declared inside a { } block cannot be
Operators
• Arithmetic Operators: +, -, *, /, %, **, ++, --

• Assignment Operators: =, +=, -=, /=, %=, **=
• Comparision Operators: ==, ===, !=, !==, >, >=, <, <=, ?
• Logical Operators: &&, ||, !
• Type Operators: typeof, instanceof
• Bitwise Operators: &, |, ~, ^, <<, >>, >>>
Operators
• + operator can also be used to add (concatenate) strings.
• Assignment operator += can also be used to concatenate strings
• Adding a number and string, the result will be string.
• The order of the operation also matters

Operators
• JavaScript will try to convert strings to numbers in all numeric operations.
• Trying to do arithmetic with a non-numeric string will result in NaN
• Operator Precedence.
Conditional Statements
• Perform different actions for different decisions using conditional statements

• If statement
• Switch statement
If Statements
• JavaScript supports the following forms of if..else statement −

• if statement
• if...else statement
• if...else if... statement.

switch Statements
• to perform a multiway branch

• especially when all of the branches depend on the value of a single variable
Loops
• JavaScript supports different kinds of loops:

• for - loops through a block of code a number of times
• for/in - loops through the properties of an object

- one property from object is assigned to variablename
- this loop continues till all the properties of the object are exhausted.
Loop …
• for/of - loops through the values of an iterable object (iterable data structures
such as Arrays, Strings, Maps, NodeLists)
Loop …
• while - loops through a block of code while a specified condition is true
• do/while - also loops through a block of code while a specified condition is

true
Function
• a block of code designed to perform a particular task

• executed when "something" invokes it or calls it.
• Declaration always begins with keyword function,
• no return type
Example Code
JavaScript's where to ?
• JavaScript code is inserted between <script> and </script> tags.

• JavaScript in
• <head>
• <body>
• External
• Placing scripts in external files has some advantages:

• It separates HTML and code
• It makes HTML and JavaScript easier to read and maintain
• Cached JavaScript files can speed up page loads

Chapter 4 - Javascript

Uploaded by

Chapter 4 - Javascript

Uploaded by

Chapter Three

Web application Requirement

• Software Requirements with Relevance to the Web

• JavaScript is a lightweight, interpreted programming language.

• Some of the applications of JavaScript

• You can place the <script> tags, anywhere in your page.

• Datatype - defines type of value and operation.

• JavaScript supports a composite data type known as object.

• In JavaScript, the first character must be a letter, or an underscore (_), or a

abstract else instanceof switch do

• Variables are containers for storing data (values).

• After the declaration, the variable has no value ( undefined )

• let ( introduced in ES6 (2015) )

• const ( also introduced in ES6 (2015) )

• Arithmetic Operators: +, -, *, /, %, **, ++, --

• + operator can also be used to add (concatenate) strings.

• Assignment operator += can also be used to concatenate strings

• Adding a number and string, the result will be string.

• The order of the operation also matters

• JavaScript will try to convert strings to numbers in all numeric operations.

• Trying to do arithmetic with a non-numeric string will result in NaN

• Perform different actions for different decisions using conditional statements

• JavaScript supports the following forms of if..else statement −

• if...else if... statement.

• to perform a multiway branch

• JavaScript supports different kinds of loops:

• for/in - loops through the properties of an object

• while - loops through a block of code while a specified condition is true

• do/while - also loops through a block of code while a specified condition is

• a block of code designed to perform a particular task

• JavaScript code is inserted between <script> and </script> tags.

• Placing scripts in external files has some advantages:

You might also like