Iraq

University of Anbar
College of Computer Science and
Information Technology

JavaScript in Web Development

Submitted by: Supervised by:

Ali Mahmoud Ali Asst.Teacher: Sudad H. Abed

Saad Thabit Zgetun

Albara Asaad Mahmoud

Abstract:
JavaScript is a programming language that adds interactivity to your website. This
happens in games, in the behavior of responses when buttons are pressed or with
data entry on forms; with dynamic styling; with animation, etc. This article helps
you get started with JavaScript and furthers your understanding of what is possible.
[1]

Introduction:
JavaScript is a dynamic computer programming language. It is lightweight and
most commonly used as a part of web pages, whose implementations allow

client-side script to interact with the user and make dynamic pages.

It is an interpreted programming language with object-oriented capabilities.

JavaScript was first known as LiveScript, but Netscape changed its name to

JavaScript, possibly because of the excitement being generated by Java.[1]

JavaScript made its first appearance in Netscape 2.0 in 1995 with the name
LiveScript. The general-purpose core of the language has been embedded in
Netscape, Internet Explorer, and other web browsers.

The ECMA-262 Specification defined a standard version of the core JavaScript[2]

language.

 JavaScript is a lightweight, interpreted programming language.

 Designed for creating network-centric applications.
 Complementary to and integrated with Java.
 Complementary to and integrated with HTML.
 Open and cross-platform.
Client-Side JavaScript:
Client-side JavaScript is the most common form of the language. The script should
be included in or referenced by an HTML document for the code to be interpreted
by the browser.

It means that a web page need not be a static HTML, but can include programs that
interact with the user, control the browser, and dynamically create HTML content.

The JavaScript client-side mechanism provides many advantages over traditional

CGI server-side scripts. For example, you might use JavaScript to check if the user
has entered a valid e-mail address in a form field.

The JavaScript code is executed when the user submits the form, and only if all the
entries are valid, they would be submitted to the Web Server. JavaScript can be
used to trap user-initiated events such as button clicks, link navigation, and other
actions that the user initiates explicitly or implicitly[1]

Server-side versus client-side code :

You might also hear the terms server-side and client-side code, especially in the
context of web development. Client-side code is code that is run on the user's
computer when a web page is viewed, the page's client-side code is downloaded,
then run and displayed by the browser. In this module we are explicitly talking
about client-side JavaScript.

Server-side code on the other hand is run on the server, then its results are
downloaded and displayed in the browser. Examples of popular server-side web
languages include PHP, Python, Ruby, ASP.NET and... JavaScript! JavaScript can
also be used as a server-side language, for example in the popular Node.js
environment you can find out more about server-side JavaScript in our Dynamic
Websites.[2]
The tasks you perform:
The core client-side JavaScript language consists of some common programming
features that allow you to do things like:

Store useful values inside variables. In the above example for instance, we ask for
a new name to be entered then store that name in a variable called name.

Operations on pieces of text (known as "strings" in programming). In the above

example we take the string "Player 1: " and join it to the name variable to create
the complete text label, e.g. ''Player 1: Chris".

Running code in response to certain events occurring on a web page. We used a

click event in our example above to detect when the button is clicked and then run
the code that updates the text label. And much more!

What is even more exciting however is the functionality built on top of the client-
side JavaScript language. So-called Application Programming Interfaces (APIs)
provide you with extra superpowers to use in your JavaScript code.[2]

Interpreted versus compiled code

You might hear the terms interpreted and compiled in the context of programming.
In interpreted languages, the code is run from top to bottom and the result of
running the code is immediately returned. You don't have to transform the code
into a different form before the browser runs it. The code is received in its
programmer-friendly text form and processed directly from that.

Compiled languages on the other hand are transformed (compiled) into another
form before they are run by the computer. For example, C/C++ are compiled into
machine code that is then run by the computer. The program is executed from a
binary format, which was generated from the original program source code.
JavaScript is a lightweight interpreted programming language. The web browser
receives the JavaScript code in its original text form and runs the script from that.
From a technical standpoint, most modern JavaScript interpreters actually use a
technique called just-in-time compiling to improve performance; the JavaScript
source code gets compiled into a faster, binary format while the script is being
used, so that it can be run as quickly as possible. However, JavaScript is still
considered an interpreted language, since the compilation is handled at run time,
rather than ahead of time.[2]

*There are advantages to both types of language, but we won't discuss them right
now.

Advantages of JavaScript:
The merits of using JavaScript are:

 Less server interaction: You can validate user input before sending the page
off to the server. This saves server traffic, which means less load on your
server.
 Immediate feedback to the visitors: They don't have to wait for a page
reload to see if they have forgotten to enter something.
 Increased interactivity: You can create interfaces that react when the user
hovers over them with a mouse or activates them via the keyboard.
 Richer interfaces: You can use JavaScript to include such items as

drag-and-drop components and sliders to give a Rich Interface to your site

visitors.[2]
Limitations of JavaScript
We cannot treat JavaScript as a full-fledged programming language. It lacks the

following important features:

 Client-side JavaScript does not allow the reading or writing of files. This has
been kept for security reason.
 JavaScript cannot be used for networking applications because there is no
such support available.
 JavaScript doesn't have any multithreading or multiprocessor capabilities.

Once again, JavaScript is a lightweight, interpreted programming language that

allows you to build interactivity into otherwise static HTML pages. [2]

JavaScript Development Tools

One of major strengths of JavaScript is that it does not require expensive
development tools. You can start with a simple text editor such as Notepad. Since
it is an interpreted language inside the context of a web browser, you don't even
need to buy a compiler. To make our life simpler, various vendors have come up
with very nice JavaScript editing tools. Some of them are listed here:[2]

 Microsoft FrontPage: Microsoft has developed a popular HTML editor

called FrontPage. FrontPage also provides web developers with a number
of JavaScript tools to assist in the creation of interactive websites.
 Macromedia Dreamweaver MX: Macromedia Dreamweaver MX is a very
popular HTML and JavaScript editor in the professional web development
crowd. It provides several handy prebuilt JavaScript components, integrates
well with databases, and conforms to new standards such as XHTML and
XML.
 Macromedia HomeSite 5: HomeSite 5 is a well-liked HTML and JavaScript
editor from Macromedia that can be used to manage personal websites
effectively.
JAVASCRIPT – SYNTAX:
JavaScript can be implemented using JavaScript statements that are placed within

the <script>... </script> HTML tags in a web page.

You can place the <script> tags, containing your JavaScript, anywhere within you

web page, but it is normally recommended that you should keep it within the
<head>

tags.

The <script> tag alerts the browser program to start interpreting all the text
between

these tags as a script. A simple syntax of your JavaScript will appear as follows.

<script ...>

JavaScript code

</script>
The script tag takes two important attributes:
 Language: This attribute specifies what scripting language you are using.
Typically, its value will be javascript. Although recent versions of HTML
(and
XHTML, its successor) have phased out the use of this attribute.
 Type: This attribute is what is now recommended to indicate the scripting
language in use and its value should be set to "text/javascript".

So your JavaScript syntax will look as follows. [2]

<script language="javascript" type="text/javascript">

JavaScript code

</script>
JavaScript is the world’s most popular programming language:
It’s no news to anyone that JavaScript is incredibly popular these days. Stack
Overflow’s 2018 developer survey has JavaScript as the most popular
programming language (with fellow web languages HTML and CSS). GitHub’s
most recent Octoverse infographic ranks languages by the number of pull requests
received, and JavaScript is the top there, too.

The total number of JavaScript developers is hard to estimate. Slashdata’s 2018

survey suggests there were 9.7M by the end of 2017 and growing quickly, meaning
there are well over 10M at this point. npm’s own estimates suggest there are over
10M npm users, and we see similarly rapid growth. There are JavaScript
developers who do not yet use npm, but as a percentage of all JavaScript
developers they are quite small, possibly fewer than 10%.[3]
How to add JavaScript to your page:
There are three ways to add JavaScript:

1-Internal JavaScript

First of all, make a local copy of our example file apply-javascript.html. Save it in
a directory somewhere sensible.

Open the file in your web browser and in your text editor. You'll see that the
HTML creates a simple web page containing a clickable button.

Next, go to your text editor and add the following in your head — just before your
closing </head> tag:

<script>

// JavaScript goes here

</script>

2-External JavaScript

This works great, but what if we wanted to put our JavaScript in an external file?
Let's explore this now.

1.First, create a new file in the same directory as your sample HTML file. Call it
script.js — make sure it has that .js filename extension, as that's how it is
recognized as JavaScript.

2. Replace your current <script> element with the following:

<script src="script.js" defer></script>

3. Inside script.js, add the your script.

4.Save and refresh your browser, and you should see the same thing! It works just
the same, but now we've got our JavaScript in an external file. This is generally a
good thing in terms of organizing your code and making it reusable across multiple
 HTML files. Plus, the HTML is easier to read without huge chunks of script
dumped in it.[2]

External JavaScript Advantages

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[4]

3-Inline JavaScript handlers

Note that sometimes you'll come across bits of actual JavaScript code living inside
HTML. It might look something like this:

function createParagraph() {

let para = document.createElement('p');

para.textContent = 'You clicked the button!';

document.body.appendChild(para);

<button onclick="createParagraph()">Click me!</button>

the same functionality as in the previous two sections, except that the <button>
element includes an inline onclick handler to make the function run when the
button is pressed.[4]
Conclusion:
JavaScript is a scripting or programming language that allows you to implement
complex features on web pages every time a web page does more than just sit there
and display static information for you to look at displaying timely content updates,
interactive maps, animated 2D/3D graphics, scrolling video jukeboxes, etc. you
can bet that JavaScript is probably involved. It is the third layer of the layer cake of
standard web technologies, two of which (HTML and CSS) we have covered in
much more detail in other parts of the Learning Area.[2]
References:
1-https://www.tutorialspoint.com/javascript/

2-https://developer.mozilla.org/en-
US/docs/Learn/JavaScript/First_steps/What_is_JavaScript

3-https://medium.com/npm-inc/this-year-in-javascript-2018-in-review-and-npms-
predictions-for-2019-3a3d7e5298ef

4-https://www.w3schools.com/js/js_whereto.asp