Topic 7 JavaScript for Client-side Web Development Introduction This Topic explores the basics of JavaScript as a client-side scripting language. Unfortunately, you cannot use PHP for the client side development so learning JavaScript is a must. As this Topic is an introduction to programming with JavaScript, it is not expected that you will feel totally comfortable with the language after this topic. However, you should understand the structure of the language, recognise the language terminologies and syntax, know where and how to add script(s) to an HTML file. Ultimately you will be able to manage and manipulate scripts for use in your Web pages. The practical exercises for this Topic work through the code introduced in the theory. The exercise will allow you to incorporate JavaScript into your assignment. As always, the study guide only provides you the key points you should have learned in each topic. Reading the study guide material is not enough. It is essential that you practise your programming skills by completing all activities in the study guides. Objectives On completion of the Topic, you should be able to: Discuss the purpose of JavaScript as a client-side scripting language Explain the execution mechanism of JavaScript as a client-side scripting language Understand the structure and syntax of JavaScript Recognise and use JavaScript objects, properties and methods Use JavaScript to perform some simple tasks based on existing scripts JavaScript as a Client-side Scripting Language Overview of JavaScript JavaScript was developed by Netscape in partnership with Sun Microsystems in 1995. The programming language existed under another name, LiveScript, before this time and was owned exclusively by Netscape. A language standard for JavaScript was developed in the late 1990s by ECMA (European Computer Manufacturers Association), which was approved by the ISO (International Standards Organisation). JavaScript is a scripting language unlike HTML which is a mark-up language. JavaScript is designed to improve user interactivity and experience in using web-based information systems including web applications, which cannot be provided by HTML alone. Client-side JavaScript helps improving interactions with users via handling users input locally, manipulating HTML documents to reflect the communication context and providing instant feedback to users. JavaScript also smoothens the PROG2002
9
Embed
PROG2002 Topic 7 JavaScript for Client-side Web Development
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Topic 7
JavaScript for Client-side Web Development
Introduction
This Topic explores the basics of JavaScript as a client-side scripting language. Unfortunately, you
cannot use PHP for the client side development so learning JavaScript is a must. As this Topic is an
introduction to programming with JavaScript, it is not expected that you will feel totally comfortable
with the language after this topic. However, you should understand the structure of the language,
recognise the language terminologies and syntax, know where and how to add script(s) to an HTML
file. Ultimately you will be able to manage and manipulate scripts for use in your Web pages.
The practical exercises for this Topic work through the code introduced in the theory. The exercise
will allow you to incorporate JavaScript into your assignment.
As always, the study guide only provides you the key points you should have learned in each topic.
Reading the study guide material is not enough. It is essential that you practise your programming
skills by completing all activities in the study guides.
Objectives
On completion of the Topic, you should be able to:
Discuss the purpose of JavaScript as a client-side scripting language
Explain the execution mechanism of JavaScript as a client-side scripting language
Understand the structure and syntax of JavaScript
Recognise and use JavaScript objects, properties and methods
Use JavaScript to perform some simple tasks based on existing scripts
JavaScript as a Client-side Scripting Language
Overview of JavaScript
JavaScript was developed by Netscape in partnership with Sun Microsystems in 1995. The
programming language existed under another name, LiveScript, before this time and was owned
exclusively by Netscape. A language standard for JavaScript was developed in the late 1990s by
ECMA (European Computer Manufacturers Association), which was approved by the ISO
(International Standards Organisation).
JavaScript is a scripting language unlike HTML which is a mark-up language. JavaScript is designed
to improve user interactivity and experience in using web-based information systems including web
applications, which cannot be provided by HTML alone. Client-side JavaScript helps improving
interactions with users via handling users input locally, manipulating HTML documents to reflect
the communication context and providing instant feedback to users. JavaScript also smoothens the
PROG2002
CSC10217 Topic 7 - JavaScript for Client-side Web Development
Page 2
client-server interaction via a technology called AJAX (Asynchronous JavaScript And XML). The
technology enables asynchronous updates of client side web pages, which significantly improves the
user experience.
Client-side JavaScript is mainly used to create dynamic user interfaces, perform client-side input
validation and carry out simple computation tasks. Recently AJAX has been used in client-server
communication of modern web applications, which implement MVC design pattern.
JavaScript can be used as both client-side and server-side scripting language i.e. it can be used in
place of PHP at the server side. However, JavaScript is much more popular as a client-side language
mainly due to historical reasoning. Client-side JavaScript was developed in 1995 while the language
was first used as a server side language in 2009 with the introduction of NodeJS.
JavaScript Execution Mechanism
Like PHP, JavaScript is an interpreted language i.e. the code is executed top-down line-by-line by
an interpreter without compilation.
Server-side JavaScript code is executed on the server side by a server-side JavaScript interpreter.
The most popular JavaScript interpreter today is NodeJS. NodeJS was originally written by Ryan
Dahl in 2009. The initial release supported only Linux and Mac OS X but now can run on Windows
OS.
Client-side JavaScript code is embedded into an HTML page. Embedded can also mean placed in an
external file then linked into a HTML document. JavaScript code is interpreted and executed directly
by web browsers without an external JavaScript interpreter. For a browser to interpret JavaScript,
settings must be enabled in the browser options.
To embed JavaScript code in an HTML document use the pair of <script></script> tags:
JavaScript is flexible in that the JavaScript code can be included anywhere in an HTML document.
However the most preferred ways to include JavaScript in an HTML file are as follows −
Script in <head>...</head> section.
Script in <body>...</body> section.
Script in <body>...</body> and <head>...</head> sections.
Script in an external file and then included in <head>...</head> section.
Since HTML and JavaScript code is loaded and interpreted top-down, the location of the code does
affect the execution result. For example, the code may fail to execute if it refers to an HTML element,
PROG2002
gcole
Rectangle
CSC10217 Topic 7 - JavaScript for Client-side Web Development
Page 3
which has not been loaded at the time the code is executed. However, if the code needs to modify
the HTML code before the document is displayed, it has to be executed first.
In this case, if JavaScript code is shared by multiple documents, it is a good practice to place the
script in a dedicated file and load the file in the document head i.e. between <head></head> tags.
This is done using the src parameter of the <script> tag as in the following example:
Language Syntax and Structure
Basic Structure and Syntax
JavaScript likes any programming language has its own syntax, data types and operators. You will
need to familiarise yourself with JavaScript syntax, data types and operators. Use the following
online resource to study the language structure (the JavaScript Basics Tutorial section):