Multimedia Data Introduction to JavaScript and Scaleable Vector Graphics (SVG) Dr Sandra I. Woolley

Slides:



Advertisements
Similar presentations
Essentials for Design JavaScript Level One Michael Brooks
Advertisements

Internet Services and Web Authoring (CSET 226) Lecture # 5 HyperText Markup Language (HTML) 1.
JavaScript FaaDoOEngineers.com FaaDoOEngineers.com.
MMDE5011 – INTERACTIVE MEDIA PRACTICE 1 WEEK 1: INTRODUCTION TO HTML5
The Web Warrior Guide to Web Design Technologies
Chapter Concepts Review Markup Languages
CIS101 Introduction to Computing
Information Technology Center Hany Abdelwahab Computer Specialist.
CM143 - Web Week 2 Basic HTML. Links and Image Tags.
Multimedia Data Introduction to JavaScript and Scaleable Vector Graphics (SVG) Dr Mike Spann Electronic,
(CS1301) Introduction to Computer Programming City Univ of HK / Dept of CS / Helena Wong 1. Overview of Programming and JavaScript - 1
Developing a Basic Web Page with HTML
Chapter 2 Introduction to HTML5 Internet & World Wide Web How to Program, 5/e Copyright © Pearson, Inc All Rights Reserved.
Introduction to JavaScript. Aim To enable you to write you first JavaScript.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 14 Key Concepts 1 Copyright © Terry Felke-Morris.
HYPERTEXT MARKUP LANGUAGE (HTML)
E0262 – MIS – Multimedia Storage Techniques SMIL – Synchronized Multimedia Integration Language.
Javascript and the Web Whys and Hows of Javascript.
_______________________________________________________________________________________________________________ E-Commerce: Fundamentals and Applications1.
CS346 - Javascript 1, 21 Module 1 Introduction to JavaScript CS346.
JavaScript, Fifth Edition Chapter 1 Introduction to JavaScript.
HTML HyperText Markup Language Constantly evolving - extra facilities being added regularly Java applets and JavaScript used to increase functionality.
1 CS101 Introduction to Computing Lecture 18 Objects, Properties, Methods (Web Development Lecture 6)
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 Chapter 14 Key Concepts 1 Copyright © Terry Felke-Morris.
DHTML: Dynamic HTML Internet Technology1. What is DHTML? A collection of enhancements to HTML ► To create dynamic and interactive websites Combination.
CP2022 Multimedia Internet Communication1 HTML and Hypertext The workings of the web Lecture 7.
All Web pages are written with some form of HTML (HyperText Markup Language). HTML documents are saved as Text Only files so virtually any computer can.
1 CSC 121 Computers and Scientific Thinking David Reed Creighton University HTML and Web Pages.
Client Scripting1 Internet Systems Design. Client Scripting2 n “A scripting language is a programming language that is used to manipulate, customize,
Introduction to HTML. What is a HTML File?  HTML stands for Hyper Text Markup Language  An HTML file is a text file containing small markup tags  The.
Section 17.1 Add an audio file using HTML Create a form using HTML Add text boxes using HTML Add radio buttons and check boxes using HTML Add a pull-down.
Just Enough HTML How to Create Basic HTML Documents.
Lesson13. JavaScript JavaScript is an interpreted language, designed to function within a web browser. It can also be used on the server.
INTRODUCTION. What is HTML? HTML is a language for describing web pages. HTML stands for Hyper Text Markup Language HTML is not a programming language,
An Introduction to JavaScript Summarized from Chapter 6 of “Web Programming: Building Internet Applications”, 3 rd Edition.
Active Server Pages  In this chapter, you will learn:  How browsers and servers interacted on the Internet when the Internet first became popular 
HTML: Hyptertext Markup Language Doman’s Sections.
4 Chapter Four Introduction to HTML. 4 Chapter Objectives Learn basic HTML commands Discover how to display graphic image objects in Web pages Create.
JavaScript - A Web Script Language Fred Durao
Introducing the World Wide Web Internet- a structure made up of millions of interconnected computers whose users communicate with each other and share.
1 JavaScript
Cs332a_chapt10.ppt CS332A Advanced HTML Programming DHTML Dynamic Hypertext Markup Language A term describing a series of technologies Not a stand-a-lone.
Scott Marino MSMIS Summer Session Web Site Design and Authoring Session 8 Scott Marino.
CS 111 – Oct. 4 Web design –HTML –Javascript Commitment: –This week, read sections 4.3 – 4.5.
Introduction to JavaScript Objects, Properties, Methods.
By Tharith Sriv. To write a web page you use: HHTML (HyperText Markup Language), AASP (Active Server Page), PPHP (HyperText Preprocessor), JJavaScript,
JavaScript Introduction.  JavaScript is a scripting language  A scripting language is a lightweight programming language  A JavaScript can be inserted.
HTML Basics. HTML Coding HTML Hypertext markup language The code used to create web pages.
Copyright © Terry Felke-Morris WEB DEVELOPMENT & DESIGN FOUNDATIONS WITH HTML5 7 TH EDITION Chapter 14 Key Concepts 1 Copyright © Terry Felke-Morris.
Chapter 11 Adding Media and Interactivity. Chapter 11 Lessons Introduction 1.Add and modify Flash objects 2.Add rollover images 3.Add behaviors 4.Add.
HTML HYPER TEXT MARKUP LANGUAGE. INTRODUCTION Normal text” surrounded by bracketed tags that tell browsers how to display web pages Pages end with “.htm”
Web Programming Java Script-Introduction. What is Javascript? JavaScript is a scripting language using for the Web. JavaScript is a programming language.
Copyright © Terry Felke-Morris Web Development & Design Foundations with HTML5 8 th Edition CHAPTER 14 KEY CONCEPTS 1 Copyright.
Module 1 Introduction to JavaScript
Introduction to HTML.
Web Development & Design Foundations with HTML5
JavaScript is a programming language designed for Web pages.
Section 17.1 Section 17.2 Add an audio file using HTML
Web Development & Design Foundations with HTML5 7th Edition
Introduction to XHTML.
Prepared for Md. Zakir Hossain Lecturer, CSE, DUET Prepared by Miton Chandra Datta
Introduction to JavaScript
About Multimedia Files
Chapter 16 The World Wide Web.
Tutorial 10: Programming with javascript
JavaScript Basics What is JavaScript?
JavaScript is a scripting language designed for Web pages by Netscape.
An Introduction to HTML Pages
AN INTRODUCTION BY FAITH BRENNER
Presentation transcript:

Multimedia Data Introduction to JavaScript and Scaleable Vector Graphics (SVG) Dr Sandra I. Woolley Electronic, Electrical and Computer Engineering

Summary of Content  HTML (HyperText Markup Language) –An introduction –Examples of HTML tags  Introduction to JavaScript –Objects, properties, methods –Events –Values and variables, operators –Simple JavaScript examples  Alert boxes and rollovers  Introduction to SVG (Scaleable Vector Graphics) –Simple demonstration by example

HTML (HyperText Markup Language) HTML is the basic language of the web. It comprises a set of ‘tags’ which are instructions to web browsers, e.g., bold text appears as bold text applies bold until, similarly applies italics until for underline, for paragraph, for line break also and for positioning adding links:- Link text

A Simple HTML File test0.htm woolleysi web page woolleysi (S.I.WOOLLEY) test web page Link to my web page

JavaScript

Introduction to JavaScript  JavaScript is not Java –Java is a full-feature OO programming language developed by Sun Microsystems. It is a descendant of C and C++ and was designed to be cross-platform. Java is used to create web “applets” (small programs downloaded over the internet and run inside web browsers). –JavaScript - Netscape added a basic scripting ability to its Navigator web browser called “Livescript”... at a time when Java was new/exciting.... and renamed Livescript, JavaScript. JavaScript is a scripting* language which can manipulate simple webpage objects. (*A scripting language is a programming language that controls a software application. They enable the behaviour of the application to be adapted for the user.)

About JavaScript  JavaScript is an object-oriented scripting language.  Objects have properties e.g.,  cat has fur  computer has keyboard  bicycle has wheels  car has wheels  window has title  Changing a property of an object can modify the object. Objects can share properties. Properties can be objects, i.e., objects can have sub- objects.  The things objects do are called methods, e.g.,  cat purr  computer crash  JavaScript objects have methods, e.g.,  buttons click()  windows open()  text selected() (brackets indicate that we are referring to a method rather than a property.)  Objects and properties are separated by a “.”, e.g.  bicycle.wheels  cat.paws.front.left  referring to methods :-  cat.purr()

Events  Events are actions that a user (i.e., a viewer) performs whilst visiting your page.  JavaScript can react to events with event handlers.  In JavaScript, if the user clicks on a button the onClick event handler will take note of the action and perform the specified task.  When we write scripts we do not need to anticipate every possible event the user might take, we just encode the ones we want. E.g., pages load as normal without an onLoad event handler. EventWhat it handles onAbortUser aborts loading the page onBlurUser leaves the object onChangeUser changes the object onClickUser clicked on an object onErrorThe script encountered an error onFocusUser made an object active onLoadObject finished loading onMouseoverCursor moved over an object onMouseoutCursor moved off an object onSelectUser selects content of an object onSubmitUser submitted a form onUnloadUser left the window

Values, Variables and Operators and Script Tags  In JavaScript, pieces of information are values, e.g., numbers, strings, Booleans, nulls, objects, functions.  Variables contain values. E.g., myname = “sandra” (“=” can be read as “is set to”)  Notes –JavaScript is CaSEseNSiTivE! –Variable names should not start with numbers nor contain spaces.  As in other languages, operators are the symbols used to work with variables, e.g., +, -, *, / etc.  JavaScript must be enclosed in tags and can be inserted into the head or body of a web page.  A simple “HELLO WORLD” example: document.write(“HELLO WORLD”)  Hiding script from old browsers is easily achieved by enclosing the script in HTML comments.

What JavaScript Can Do?  The demonstration examples use a subset of JavaScript for simple client-side scripting - i.e., for processes performed on the users’ computer not on the server.  Simple examples of JavaScript functionality include:- –Reactions to user actions –Detection of browser type, version and plug-ins –Status bar messages –Date- and time-related messages –Alert boxes Alert box example: alert(“My JavaScript alert box”)

What JavaScript Can Do? Conditional alert box example if(confirm(“Is my alert box demo OK?”)) { alert(“You said OK... thanks!”) } else { alert(“You said Cancel (but must have clicked the wrong button)”) }

Simple Image “Rollovers” woolleysi rollover web page A simple rollover <img src ="images/cheetah.gif" width="460" height="300" border="10" name="mypicture" alt="Picture rollover demo - cheetah to animation and back" onMouseover="document.mypicture.src='images/test.gif'" onMouseout="document.mypicture.src='images/cheetah.gif'">

Scalable Vector Graphics (SVG)

An Introduction to SVG  SVG is short for Scalable Vector Graphics  It is a part of "XML" ; the "eXtensible Markup Language" XML –XML is a `metalanguage' — a language for describing other languages. –Unlike HTML which is a fixed format markup language, XML allows us to design our own customized markup languages for different types of documents (e.g. for representing music or hieroglyphs.) –See - the worldwide web consortium web pages for details.  SVG is the graphical component of XML - it allows the rendering of graphics in a web page.  It is a very useful, and much more efficient, alternative to bitmap images (i.e., an alternative to.gif and.jpeg images.) The scalability means that web browser graphics automatically resize according to the size of the browser window.

An Introduction to SVG  SVG can be used to create interactive functionality like JavaScript.  SVG authoring tools are available.  The most popular commercial multimedia graphics alternative is Adobe Flash©.  The following slides demonstrate some very basic capabilities of SVG by example. These and other demonstration files can be found on the course web page.

SVG Examples Simple Examples for Illustration – SVG code NOT assessed.

...and for synchronizing multimedia presentations...

SMIL  “Synchronized Multimedia Integration Language” is generally referred to as "SMIL" (pronounced "smile"). It is a standard that enables simple authoring of interactive multimedia presentations.  SMIL is also an application of XML.  It can schedule text, images, audio and video presentations either in parallel or in sequence.  MMS (Multimedia Messaging Service) is a video/picture subset of SMIL.  SMIL tutorial: An SMIL image slideshow example.

 This concludes our introduction to JavaScript and SVG.  All the demonstration files can be found on the course web page.  You will not be required to write any JavaScript or SVG code in the exam. But you may expect bookwork questions on the content of these slides, for example, about what these languages provide or about what objects, properties or events are.  You can find course information, including slides and supporting resources, on-line on the course web page at Thank You