Internet Programming
(JavaScript for Beginners)
Lecture 1
Dr. Hanaa Hamza
Code of conduct
JavaScript
Outline
• What is a Programming Language?
• Server-side vs. Client-side
• About JavaScript
• A Tour of JavaScript
• Setting Up Environment And Tools
• Getting Started
What is a Programming Language?
• A programming language is a set of codes that we can use to give a computer
instructions to follow.
• Traditionally, programming languages have been used to write “stand-alone”
applications. Things like Microsoft Word, and Lotus Notes are all examples of such
applications. Once installed on a PC, these applications run without necessarily
requiring any other software to be installed alongside them.
What is a Programming Language?
• Web Applications differ from these traditional applications in many respects, but
the most striking is that they all run inside your web browser. Examples of popular web
applications are things like Google, Hotmail, Flickr, Gmail and any of the vast array of
“weblogging” systems.
• These applications are also written using programming languages, but as a rule
they are built using multiple, interdependent technologies. These technologies are
easily (though not completely) broken down into two categories: server-side and client-
side.
Server-side vs. Client-side
• For most users, the web starts and ends with their choice of web browser.
-
The browser is said to define the client-side of the web, with the browser, the computer
--
- -
it is running on, and the user surfing the web being collectively referred to as the client.
• Consider a client who has decided to visit the web site at [Link].
-
-
The first thing that happens is that the client will make a request to Google’s web server
-
for the default page of that web site.
• The web server is an application running on a computer owned by Google. Like the
=>
client, the server application and the computer on which it runs define the server-side
----
of the web, and are collectively referred to as the server.
>
Server-side vs. Client-side
• When the server receives the request from the client for a particular page, its job is
-
-
-
to retrieve the page from the computer’s files and serve it back to the client.
=>
• In many cases, this operation is a very simple procedure involving little or no work on
the part of the server.
• However, using a programming language like PHP, Perl or Java, we can cause the
---
-
server -
to either modify the -
page it finds before it passes it back to the client, or even to
-
generate the page entirely from scratch. This is referred to as a server-side application.
The page passed back to the client looks (to the client) exactly the same as any other
-----
>
page that has not been modified.
Server-side vs. Client-side
• --
Once the client has received the page from the server, it displays the page and waits
for the user to request another page. As soon as the page reaches this state, it has
=
moved beyond the control of the server. No server-side application can now alter the
-
contents of the page without the client having to make another trip back to the server
to get a new (and possibly updated) copy of the page.
-
Server-side vs. Client-side
In short, the two technologies each have their strengths and weaknesses:
• Client-side scripts allow the developer to alter pages dynamically, and to respond to
-
user actions immediately rather than having to wait for the server to create a new
-
- -
version of the page. However, there are security and cross-browser compatibility issues
- - - -
to be aware of, and these are often nontrivial.
-
Server-side vs. Client-side
In short, the two technologies each have their strengths and weaknesses:
• &
Server-side applications allow the developer to keep her code secure and secret,
thus allowing for more powerful applications to be created. In addition, since the server
----
running the code is always a known quantity, applications that run successfully in one
- - -
mean
browser will run successfully in all browsers. However, despite all this power, there is no
-
direct way for a server-side application -
to alter a page without -
having to force the client-
- -
side to load another page.
-
This makes it completely impractical for things like drop-down menus, pre-submission
form checking, warning alerts and so forth.
About JavaScript
• JavaScript is an interpreted, client-side, event-based, object oriented scripting
language that you can use to add dynamic interactivity to your web pages.
• Interpreted refers to the fact that JavaScript code is executed (acted on) as it is
loaded into the browser. This is a change of pace from compiled languages like Java, which
check your program thoroughly before running a single line of code.
About JavaScript
• JavaScript is an interpreted, client-side, event-based, object oriented scripting
language that you can use to add dynamic interactivity to your web pages.
• client-side is a program that is processed within the client browser.
(This has been defined already before)
About JavaScript
• JavaScript is an interpreted, client-side, event-based, object oriented scripting
language that you can use to add dynamic interactivity to your web pages.
• Event-based refers to JavaScript’s ability to run certain bits of code only when
a specified event occurs. An event could be the page being loaded, a form
being submitted, a link being clicked, or an image being pointed at by a mouse
pointer.
About JavaScript
• JavaScript is an interpreted, client-side, event-based, object oriented scripting
language that you can use to add dynamic interactivity to your web pages.
• Object-oriented signals that JavaScript’s power to exert control over an HTML
page is based on manipulating objects within that page.
About JavaScript
• JavaScript scripts are written in plain text, like HTML, XML, Java, PHP and just about
any other modern computer code. In this code, we will use Windows NotePad to create and
edit our JavaScript code, but there are a large number of alternatives available (Visual Studio
Code – Brackets – Atom - Komodo Edit).
Visual Studio Code is chosen.
About JavaScript
You can use JavaScript to achieve any of the following:
• Create special effects with images that give the impression that a button is either
highlighted or depressed whenever the mouse pointer is hovered over it.
• Validate information that users enter into your web forms
• Open pages in new windows, and customize the appearance of those new windows.
• Detect the capabilities of the user’s browser and alter your page’s content appropriately.
• And much more…
About JavaScript
• JavaScript is not Java.
• Different web browsers will run your JavaScript.
• One final note: While JavaScript is a programming language, HTML (the language of the
World Wide Web) is not. HTML is a Markup Language, which means that it can be used to
mark areas of a document as having special characteristics like headers, paragraphs,
images, forms and so on, but it cannot perform any logical processing on its own. So while
JavaScript is often written alongside HTML, the rules of one do not necessarily have any
bearing on the other.
A Tour of JavaScript
First Project
• Our JavaScript is all going to be written
using NotePad.
• Open NotePad and save the resulting
empty document in your user drive as
chapter_4.html.
• Save your new webpage, and view it in
your web browser. For the moment, use
Internet Explorer to view this page.
Getting Started
#1: Creating [Link] file
Where to add javascript
In the header
Inside the body
In external file
Questions?