Download as docx, pdf, or txt
Download as docx, pdf, or txt
You are on page 1of 15

Ministry Of Higher Education And Scientific Research

University Of Administrative Techniques


Administreative Information System Department
Second Stage / Morning
Group :- A

Report to
{JavaScript}

Prepard by :

❖ Eman Fariq Mahmuod

 Zina Hazhar Muhhamed

Supervisor by :

❖ Rahad Abdulstar Fars

Page | 1
What is JavaScript?
JavaScript is a text-based programming language used both on the client-
side and server-side that allows you to make web pages interactive. Where
HTML and CSS are languages that give structure and style to web pages,
JavaScript gives web pages interactive elements that engage a user.
Common examples of JavaScript that you might use every day include the
search box on Amazon, a news recap video embedded on The New York
Times, or refreshing your Twitter feed.  Incorporating JavaScript
improves the user experience of the web page by converting it from a
static page into an interactive one. To recap, JavaScript adds behavior to
web pages.

Page | 2
JavaScript / ECMAScript:
JavaScript was invented by Brendan Eich in 1995.It was developed
for Netscape 2, and became the ECMA-262 standard in 1997.After
Netscape handed JavaScript over to ECMA, the Mozilla foundation
continued to develop JavaScript for the Firefox browser. Mozilla's latest
version was 1.8.5. (Identical to ES5).Internet Explorer (IE4) was the
first browser to support ECMA-262 Edition 1 (ES1)

What is JavaScript used for?


JavaScript is mainly used for web-based applications and web browsers.
But JavaScript is also used beyond the Web in software, servers and
embedded hardware controls. Here are some basic things JavaScript is
used for:

1- Adding interactive behavior to web pages:


JavaScript allows users to interact with web pages. There are almost no
limits to the things you can do with JavaScript on a web page – these are
just a few examples:

 Show or hide more information with the click of a button


 Change the color of a button when the mouse hovers over it
 Slide through a carousel of images on the homepage
 Zooming in or zooming out on an image
 Displaying a timer or count-down on a website
 Playing audio and video in a web page

Page | 3
 Displaying animations
 Using a drop-down hamburger menu

2- Creating web and mobile apps:


Developers can use various JavaScript frameworks for developing and
building web and mobile apps. JavaScript frameworks are collections of
JavaScript code libraries that provide developers with pre-written code to
use for routine programming features and tasks—literally a framework to
build websites or web applications around. 

3-Building web servers and developing server applications:

Beyond websites and apps, developers can also use JavaScript to build
simple web servers and develop the back-end infrastructure using
Node.js.

4-Game development:
Of course, you can also use JavaScript to create browser games. These are
a great way for beginning developers to practice their JavaScript skills.

Page | 4
How do I write a JavaScript?
Once you have the software in place, you can begin writing JavaScript
code. To add JavaScript code to an HTML file, create or open an HTML
file with your text/HTML editor. A basic HTML file has a docType and
some basic HTML tags, such as <html>, <head> and <body>. For
example, a basic HTML5 file might look something like what is shown
below.

<!DOCType HTML>
<html>
<head>
<title>Testing JavaScript</title>
</head>
<body>
[Content goes here]
</body>
</html>

When you see JavaScript code on the Web, you will sometimes see some
JavaScript code between the <head></head> tags. Or, you may see it in
the <body></body> tags (or even in both places). To separate JavaScript
code from HTML code, you need to enclose it within a set of

Page | 5
<script></script> tags. The opening <script> tag has one
required attribute and one optional attribute. The required attribute is the
type attribute, while the optional attribute is src (which allows you to
point to an external script file, covered later in this answer). The value of
the type attribute is set to text/javascript, as shown below.
<script type="text/javascript">
Your JavaScript code goes here.
</script>

As you can see, your JavaScript code is placed between the opening and
closing script tags. As an example script, you could write a simple string of
text directly on the web page, as shown below (placed between the
<body> and </body> tags).
<script type="text/javascript">
document.write("Text written using JavaScript code!");
</script>

In the example above, the standard JavaScript function displays text


between the quotation marks on the page. It would look like the example
below.

Text written using JavaScript code!

Another option for including JavaScript on a page is creating the script in


an external text file. Save that file with a .js extension, making it a
JavaScript file. The .js file is then included in the page using
the src attribute of the opening script tag. For example, to use the script
above, place the JavaScript code (without script tags) into a new text file,
as shown below.

document.write("Text written using JavaScript code!");

Page | 6
You would then save the file with a .js extension. For instance, you could
save it as write.js. Once the file is saved, you can call it from the HTML
code via the src attribute of the opening script tag, as shown below for
write.js.

<script type="text/javascript" src="write.js"></script>

The procedure above has the same effect as writing the code between the
script tags, but won't clutter the HTML code with JavaScript. Another
advantage is that the same script can be included in multiple pages, and
editing the script file updates the script in every page that uses the
external script file. Editing the script file is helpful as it can be done in one
place, rather than editing the code on each page containing the script.

Page | 7
JavaScript Variables

Variable means anything that can vary. In JavaScript, a variable stores


the data value that can be changed later on.

Syntax:

var <variable-name>;

var <variable-name> = <value>;

Example: Variable Initialization

Page | 8
<html>
<body>
<h1>Demo: JavaScript Variables </h1>
<script>
var msg;
msg = "Hello JavaScript!"; // assigned a string
value
alert(msg); // access a variable
//the following declares and assign a numeric value
var num = 100;
var hundred = num; // assigned a variable to
varible
alert(num); // access a variable
alert(hundred); // access a variable
</script>
</body>
</html>

In the above example, the msg variable is declared first and then


assigned a string value in the next statement. The num variable is
declared and initialized with a numeric value in the same statement.
Finally, the hundred variable is declared and initialized with another
variable's value.

Javascript Operators :

JavaScript includes operators same as other languages. An operator


performs some operation on single or multiple operands (data value)
and produces a result. For example, in 1+2, the + sign is an operator
and 1 is left side operand and 2 is right side operand. The + operator
performs the addition of two numeric values and returns a result.

Syntax:

Page | 9
<Left operand> operator <right operand>
<Left operand> operator

Arithmetic Operators:
Arithmetic operators are used to perform mathematical operations
between numeric operands.

Operator Description
+ Adds two numeric operands.

- Subtract right operand from left operand

* Multiply two numeric operands.

/ Divide left operand by right operand.

% Modulus operator. Returns remainder of two operands.

++ Increment operator. Increase operand value by one.

-- Decrement operator. Decrease value by one.

The following example demonstrates how arithmetic operators perform


different tasks on operands.

Example: Arithmeti

var x = 5, y = 10;
var z = x + y; //performs addition and returns 15
z = y - x; //performs subtraction and returns 5
z = x * y; //performs multiplication and returns 50
z = y / x; //performs division and returns 2
z = x % 2; //returns division remainder 1

The ++ and -- operators are unary operators. It works with either left or
right operand only. When used with the left operand, e.g., x++ , it will

Page | 10
increase the value of x when the program control goes to the next
statement. In the same way, when it is used with the right operand, e.g.,
++x, it will increase the value of x there only. Therefore, x++ is called
post-increment, and ++x is called pre-increment.

String Concatenation :
The + operator performs concatenation operation when one of the
operands is of string type. The following example demonstrates string
concatenation even if one of the operands is a string.

Example: + Operator with String

var a = 5, b = "Hello ", c = "World!", d = 10;


a + b; //returns "5Hello "
b + c; //returns "Hello World!"
a + d; //returns 15
b + true; //returns "Hello true"
c - b; //returns NaN; - operator can only used with
numbers

Comparison Operators:
JavaScript provides comparison operators that compare two operands
and return a boolean value true or false.

Page | 11
Operators Description
Compares the equality of two operands without
==
considering type.
=== Compares equality of two operands with type.
!= Compares inequality of two operands.
> Returns a boolean value true if the left-side value is
greater than the right-side value; otherwise, returns false.
Returns a boolean value true if the left-side value is less
<
than the right-side value; otherwise, returns false.
Returns a boolean value true if the left-side value is
>= greater than or equal to the right-side value; otherwise,
returns false.
Returns a boolean value true if the left-side value is less
<= than or equal to the right-side value; otherwise, returns
false.

The following example demonstrates the comparison operators.

Example: JavaScript Comparison Operators

var a = 5, b = 10, c = "5";


var x = a;
a == c; // returns true
a === c; // returns false
a == x; // returns true
a != b; // returns true
a > b; // returns false
a < b; // returns true
a >= b; // returns false
a <= b; // returns true

JavaScript Data Types


JavaScript includes data types similar to other programming languages
like Java or C#. JavaScript is dynamic and loosely typed language. It
means you don't require to specify a type of a variable. A variable in

Page | 12
JavaScript can be assigned any type of value, as shown in the following
example.

Example: Loosely Typed Variables

var myvariable = 1; // numeric value

myvariable = 'one'; // string value

myvariable = 1.1; // decimal value

myvariable = true; // Boolean value

myvariable = null; // null value

In the above example, different types of values are assigned to the same
variable to demonstrate loosely typed characteristics of JavaScript.
Different values 1,’one’, 1.1, true are examples of different data
types.JavaScript includes primitive and non-primitive data types as per
latest ECMAScript 5.1.

Primitive Data Types :


The primitive data types are the lowest level of the data value in
JavaScript. The typeof operator can be used with primitive data types to
know the type of a value.

The followings are primitive data types in JavaScript:

Page | 13
Data Type Description
String is a textual content wrapped inside ' ' or " " or `
String ` (tick sign).
Example: 'Hello World!', "This is a string", etc.
Number Number is a numeric value.
Example: 100, 4521983, etc.
BigInt is a numeric value in the arbitrary precision
BigInt format.
Example: 453889879865131n, 200n, etc.
Boolean is a logical data type that has only two values,
Boolean true or false.
Null A null value denotes an absense of value.
Example: var str = null;
undefined is the default value of a variable that has
not been assigned any value.
Undefined Example: In the variable declaration, var str;, there is
no value assigned to str. So, the type of str can be
check using typeof(str) which will return undefined.

Structural Data Types:


The structural data types contain some kind of structure with primitive
data.

Data Type Description

An object holds multiple values in terms of properties and methods.


Example:
var person = { firstName: "James", lastName: "Bond",
Object age: 15 };

Date object represents date & time including days, months, years,
Date hours, minutes, seconds and milliseconds.
Example: var today = new Date("25 July 2021");

An array stores multiple values using special syntax.


Array Example: var nums = [1, 2, 3, 4];

Page | 14
Reference:

https://www.hackreactor.com/blog/what-is-javascript-used-for
https://www.tutorialsteacher.com/javascript/javascript-variable
https://www.tutorialsteacher.com/javascript/javascript-operators
https://www.tutorialsteacher.com/javascript/javascript-data-types
https://www.w3schools.com/js/js_history.asp
https://www.computerhope.com/issues/ch001344.htm
https://www.programiz.com/javascript/examples
https://www.freecodecamp.org/news/javascript-example

Page | 15

You might also like