Download Understanding Client-Side and Server-Side Scripting with JavaScript and more Lecture notes Web Design and Development in PDF only on Docsity!

Client Side Concepts

Using JavaScript -

January 13, 2020

Internet Programming

(CoSc3031)

Outline

1. Introduction

2. Basic Language Features: variables,

expressions, operators, statements

3. Javascript: Basic syntax and flow control

statements

4. Javascript : Forms and Functions

5. Javascript : Arrays and Objects

6. Javascript :Error and Event Handling

7. Javascript :Document Object Model (DOM)

8. Advanced concepts of Client-side scripting

Internet Programming

Internet Programming

Unit Objectives

 To explain the necessity and type of Scripting language: client and server side concepts  To explain writing client side scripting using JavaScript  (^) To discuss about the in-built and user defined objects and functions of client side Scripting  (^) To explain how to validate web forms,

handling event, maintaining state

information using JavaScript

3

Internet Programming

Introduction to Scripting

 (^) Scripting Languages are mainly used to build the programming environment in HTML document  (^) Make Web pages dynamic and interactive.  (^) Some languages are : VBScript, JavaScript, Jscript, PHP, Python, Active Server Page(ASP), Java Server Page(JSP), Java Server Face(JSF), Common Gateway Interface(CGI), Perl , Java Servlets, etc.  (^) Browser Includes Scripting Interpreter  (^) Choosing a Scripting Language  (^) Browser compatibility  (^) Programmer familiarity  (^) Scripts can be executed on client or the server.

Introduction to scripting &

classification

1. Client-Side Scripting  (^) Client-side scripting enables interaction within a webpage. The code required to process user-input is downloaded and compiled by the browser or plug-in. 

It is a language that runs on a local browser (on

the client tier) instead of on a Web server (on

the processing tier)

 (^) An example of a client-side interaction is a rollover (typically triggered when choosing a navigation option).  (^) Web site  Static Web site, limited interactivity Internet Programming

Introduction to scripting classification

2. Server-Side Scripting  (^) Refers to a scripting language that is executed from a Web server  (^) Used to develop more interactive Web sites  (^) Is easy to learn  (^) Includes object-oriented programming capabilities  (^) Supports many types of databases (MySQL, Oracle, Sybase, ODBC- compliant  (^) Exists and executes solely on a Web server, where it performs various types of processing or accesses databases or resources  (^) Web Site  Dynamic Web Site, distributed interactivity Internet Programming

Internet Programming

Scripting language :Comparison

Client Side Scripting Server Side Scripting Runs on the user’s computer i.e. Browser interprets the script. Runs on the Web server Source code is visible to the user. Source code is not visible to the user because the output of server side program is an HTML page. Used for validations and functionality for the user events. Used for business logic and data access from the database. The pages are created dynamically. Depends on the browser and version. E.g.. JavaScript , VBscript etc Not depend on the client, any server side technology can be used. E.g. PHP , Python, Ruby, JSP, Perl etc 7

Client-Side Programming

 (^) Client-side scripts are placed within an HTML document in the user’s web browser rather than the web server to allow greater interactivity in a document. For example – client-side scripting could check the user’s form for errors before submitting it  (^) Enables web pages to change content according to user input and other variables, including the time of day. Can also be stored in a separate file that is referenced to the documents that use it.  (^) HTML is good for developing static pages(static web sites)  (^) can specify text/image layout, presentation, links, …  (^) Web page looks the same each time it is accessed  (^) in order to develop interactive/reactive pages, must integrate programming in some form or another Internet Programming

Client Based Processing

User’s Input Server Processing Client (browser) Server JavaScript Processing Internet Programming

Applications of Client-Side Scripting

 Web page responds to or reacts directly with user interaction through HTML Form elements , eg, input fields, text areas, buttons, radio buttons, etc.  Distributing a small amount of database information directly from the Web page  (^) You need to control the Web page appearance based on user selections  (^) You want to preprocess data before submission to the server. Internet Programming

Server-Side Programs  (^) a user must be connected to the Web server to run the server-side script  (^) only the programmer can create or alter the script  (^) the system administrator has to be concerned about users continually accessing the server and potentially overloading the system  (^) A server-side language is one that runs on the Web server. Examples: PHP, Python, JSP, ASP, CGI, Perl, … Internet Programming

Server Based Processing

User’s Input Server Processing Client (browser) Server Internet Programming

Introduction to JavaScript

 (^) A client-side scripting language that allows Web page authors to develop interactive Web pages and sites  JavaScript is considered a scripting language because it is interpreted by the browser at runtime (when the web page is actually opened) rather than compiled and stored on your computer.  It provides a computational capability in web documents.  (^) It is used in creating, accessing, modifying a document.  (^) Used in most Web browsers including Firefox and Internet Explorer Internet Programming

Introduction to JavaScript …

 JavaScript scripting language  (^) Easy Program development  (^) Easy Program control structure  (^) Client-side scripting enhances functionality and appearance  (^) Makes pages more dynamic and interactive  (^) Pages can produce immediate response without contacting a server  (^) Customization is possible on the basis of users’ explicit and implicit input  (^) Browser has to have a built-in (JavaScript) interpreter Internet Programming

Introduction to JavaScript …

 (^) JavaScript is an interpreted programming or script language from Netscape.

 Created by Netscape

 (^) Originally called Mocha, LiveWire then LiveScript, now JavaScript  (^) JavaScript is used in Web site development to such things as:

 automatically change a formatted date on a Web

page  (^) cause a linked-to-page to appear in a popup window  (^) cause text or a graphic image to change during a mouse rollover Internet Programming

What can JavaScript do?  Giving the user more control over the browser  (^) Detecting the user's browser, OS, screen size, etc.  (^) Performing simple computations on the client side  Validating the user's input  (^) Handling Events, Errors and exceptions  (^) Generating HTML pages on-the-fly without accessing the Web server. Internet Programming

Client-side Script can’t ...

 Set or retrieve browser preferences  (^) launch an application on client computer  (^) read or write files on client computer  (^) Extract text content from HTML page  Do much of anything on server computer including accessing a database Internet Programming

How Does It Work?

 Embedded within HTML page  (^) View source  Executes on client  (^) Fast, no connection needed once loaded  (^) Simple programming statements combined with HTML tags  Interpreted (not compiled)  (^) No special tools required Internet Programming

Internet Programming

Features of JavaScript

 (^) Designed for programming user events JavaScript is a lightweight, interpreted language  (^) Embedded within HTML, Complementary to and integrated with HTML.  (^) Minimal Syntax- Easy to learn  (^) Mainly used for client side scripting because it is supported by all the browsers.  (^) Open source-free  (^) Platform Independence/ Architecture Neutral

Internet Programming

JavaScript – lexical structure

 JavaScript is object based, action-oriented, &object orientation.  (^) JavaScript is case sensitive.  (^) A semicolon ends a JavaScript statement  (^) C-based language developed by Netscape  Comments  (^) Supports single line comments using //  (^) and multi line comments using /…../

JavaScript – lexical structure …  The Web browser runs a JavaScript program when the Web page is first loaded, or in response to an event.  (^) JavaScript programs can either be placed directly into the HTML file or they can be saved in external files.  (^) placing a program in an external file allows you to hide the program code from the user  (^) source code placed directly in the HTML file can be viewed by anyone Internet Programming

JavaScript – lexical structure …  A JavaScript program can be placed anywhere within the HTML file.  (^) Many programmers favor placing their programs between tags in order to separate the programming code from the Web page content and layout.  (^) Some programmers prefer placing programs within the body of the Web page at the location where the program output is generated and displayed. Internet Programming

Using the  (^) To access an external script, use: <script src=“ url ” type=“text/javascript”> script commands and comments **

** Internet Programming

JavaScript as a referenced file

 (^) 3 Ways of Using JavaScript in HTML  (^) Embedded  (^) External file  (^) Inline  (^) Embedded  (^) Embedding JavaScript code into an html page using tag -->** Inline JavaScript  (^) Scripts are included inside the HTML tag. **

Inline JavaScript

** Internet Programming 25