Week 5 LBSC 690 Information Technology

Slides:



Advertisements
Similar presentations
Introducing JavaScript
Advertisements

INFM 603: Information Technology and Organizational Context Jimmy Lin The iSchool University of Maryland Thursday, September 19, 2013 Session 3: JavaScript.
JavaScript FaaDoOEngineers.com FaaDoOEngineers.com.
Programming Class 9 LBSC 690 Information Technology.
Programming Week 9 LBSC 690 Information Technology.
CS 898N – Advanced World Wide Web Technologies Lecture 14: JavaScript Chin-Chih Chang
MSc. Publishing on WWW JavaScript. What is JavaScript? A scripting language devised by Netscape Adds functionality to web pages by: Embedding code into.
Working with JavaScript. 2 Objectives Introducing JavaScript Inserting JavaScript into a Web Page File Writing Output to the Web Page Working with Variables.
Web Infrastructure Week 3 INFM 603. The Key Ideas Questions Structured Programming Modular Programming Data Structures Object-Oriented Programming.
LBSC 690 Session #10 Programming, JavaScript Jimmy Lin The iSchool University of Maryland Wednesday, November 5, 2008 This work is licensed under a Creative.
Programming Week 5 LBSC 690 Information Technology.
Programming Week 5 LBSC 690 Information Technology.
XP 1 Working with JavaScript Creating a Programmable Web Page for North Pole Novelties Tutorial 10.
LBSC 690: Session 10 Programming, JavaScript Jimmy Lin College of Information Studies University of Maryland Monday, November 12, 2007.
Programming Week 6 LBSC 690 Information Technology.
2012 •••••••••••••••••••••••••••••••••• Summer WorkShop Mostafa Badr
CSE 1301 J Lecture 2 Intro to Java Programming Richard Gesick.
Web Programming Material From Greenlaw/Hepp, In-line/On-line: Fundamentals of the Internet and the World Wide Web 1 Introduction The JavaScript Programming.
Javascript and the Web Whys and Hows of Javascript.
FALL 2005CSI 4118 – UNIVERSITY OF OTTAWA1 Part 4 Web technologies: HTTP, CGI, PHP,Java applets)
JavaScript Defined DOM (Document Object Model) General Syntax Body vs. Head Variables Math & Logic Selection Functions & Events Loops Animation Getting.
COMPUTER PROGRAMMING Source: Computing Concepts (the I-series) by Haag, Cummings, and Rhea, McGraw-Hill/Irwin, 2002.
Generations of Programming Languages First generation  Machine Language Second Generation  Assembly Language Third Generation  Procedural language such.
Client Scripting1 Internet Systems Design. Client Scripting2 n “A scripting language is a programming language that is used to manipulate, customize,
What is Java Script? An extension to HTML. An extension to HTML. Allows authors to incorporate some functionality in their web pages. (without using CGI.
Lesson13. JavaScript JavaScript is an interpreted language, designed to function within a web browser. It can also be used on the server.
XP Tutorial 10New Perspectives on Creating Web Pages with HTML, XHTML, and XML 1 Working with JavaScript Creating a Programmable Web Page for North Pole.
Visual C++ Programming: Concepts and Projects
XP Tutorial 10New Perspectives on HTML and XHTML, Comprehensive 1 Working with JavaScript Creating a Programmable Web Page for North Pole Novelties Tutorial.
Introduction to JavaScript CS101 Introduction to Computing.
JavaScript Scripting language What is Scripting ? A scripting language, script language, or extension language is a programming language.
Scott Marino MSMIS Summer Session Web Site Design and Authoring Session 8 Scott Marino.
ECA 225 Applied Interactive Programming1 ECA 225 Applied Online Programming basics.
JavaScript Defined DOM (Document Object Model) General Syntax Body vs. Head Variables Math & Logic Selection Functions & Events Loops Animation Getting.
JavaScript 101 Introduction to Programming. Topics What is programming? The common elements found in most programming languages Introduction to JavaScript.
Web Programming Overview. Introduction HTML is limited - it cannot manipulate data How Web pages are extended (include): –Java: an object-oriented programming.
Programming Session 6 LBSC 690 Information Technology.
Javascript Basic Concepts Presentation By: Er. Sunny Chanday Lecturer CSE/IT RBIENT.
XP Tutorial 10New Perspectives on HTML, XHTML, and DHTML, Comprehensive 1 Working with JavaScript Creating a Programmable Web Page for North Pole Novelties.
Java Script Introduction. Java Script Introduction.
“Under the hood”: Angry Birds Maze
WWW and HTTP King Fahd University of Petroleum & Minerals
Tutorial 10 Programming with JavaScript
JavaScript is a programming language designed for Web pages.
Programming Mehdi Bukhari.
Introduction to Programming the WWW I
PHP / MySQL Introduction
JavaScript.
DHTML Javascript Internet Technology.
Software Programming J. Holvikivi 2014.
Exercises on JavaScript & Revision
Chapter 27 WWW and HTTP.
Use of Mathematics using Technology (Maltlab)
DHTML Javascript Internet Technology.
T. Jumana Abu Shmais – AOU - Riyadh
JavaScript.
Tutorial 10 Programming with JavaScript
“Under the hood”: Angry Birds Maze
Tonga Institute of Higher Education IT 141: Information Systems
JavaScript CS 4640 Programming Languages for Web Applications
Tutorial 10: Programming with javascript
JavaScript Basics What is JavaScript?
Tonga Institute of Higher Education IT 141: Information Systems
JavaScript is a scripting language designed for Web pages by Netscape.
An Introduction to JavaScript
Introduction to Programming and JavaScript
Class 5 LBSC 690 Information Technology
Introduction to JavaScript
Brief Look InTo JavaScript
JavaScript CS 4640 Programming Languages for Web Applications
Presentation transcript:

Week 5 LBSC 690 Information Technology Programming Week 5 LBSC 690 Information Technology

Software Software models aspects of reality Examples Input and output represent the state of the world Software describes how the two are related Examples Ballistic computations Alta Vista Microsoft Word

Types of Software Compilers and interpreters Application programs (e.g., Powerpoint) What you normally think of as a ``program’’ Compilers and interpreters Programs used to write other programs Operating system (e.g., Windows XP) Manages display, CPU, memory, disk, tape, Embedded program (e.g., BIOS) Permanent software inside some device

Discussion Point: The Mythical Person-Month If it would take one person three months, why does it take four people SIX months? The original estimate might have been too low Partitioning strategy led to a long “critical path” Training new people takes each some time More people means more communications

Training Time Simple Example Learning the specification takes time Full time person = 2,000 hours/year Part time person = 288 hours per year No training  7 part time people With training  10 part time people Learning the specification takes time Learning organizational “rules” takes longer!

Communications Sort of like continuous training Who needs to know what I just learned? Can be minimized by good partitioning Limit the number of interfaces Can be facilitated by computers Asynchronous communication techniques Email, private newsgroups, voice mail

Estimating Completion Time Rules of thumb 1/3 specification 1/6 coding 1/2 test planning, testing, and fixing! Add time for coding to learn as you go, but don’t take time away from the other parts! Reread the section on “gutless estimating” if you are tempted

Programming Languages Used to specify every detail of the model Special purpose Able to specify an entire class of models Spreadsheets (Excell, Quatro Pro, ...) Databases (Access, Paradox, Oracle, ...) General purpose Able to specify any possible model Pascal, C, Java, JavaScript, Perl, ...

History of Programming Machine language Language that machine can understand Machine dependent Zeroes and Ones Assembly language Assembler changes names to machine code High-level languages Compiler/Interpreter translates to machine language Machine independent FORTRAN, COBOL, C, C++, Javascript

Machine Language Everything is a binary number For instance Operations Data For instance 00001000 might represent “add” 00010101 first number to add 01010110 second number to add 00001000 00010101 01010110

Assembly Language Symbolic instruction codes and addresses Symbolic instruction code “ADD” Symbolic address “SUM1” For instance ADD 42, SUM1

High level Languages Procedural (modular) Programming Group instructions into meaningful abstractions C, Pascal, Perl Object oriented programming Group “data” and “methods” into “objects” Naturally represents responses to events C++, Java, JavaScript

Object Models Represent things in the world as “objects” Simplest objects are “variables” Represented with a name (n, teacher, …) May be assigned a value (n=4, teacher=“Daqing”, …) Represent actions with “methods” Simplest methods are “operations” Represented with a symbol (+, -, *, /, …) “Classes” group objects with methods Classes model how kinds of things behave Objects are instances of classes

Data Types Boolean: true/false Numbers: 5, 9, 3.1415926 Strings: “Hello World” Variables: Temperature, F, Celsius, Class: Temperature Instance: CollegeParkTemperature Method: toCelsius(F)

Arrays A set of elements Each element is assigned an index For example, the number of days in each month Each element is assigned an index A number used to refer to that element For example, x[4] is the fifth element - count from zero Arrays and loops work naturally togther

Operations and Assignments -x reverse the sign of x (negation) 6+5 Add 6 and 5 (numeric) “Hello” + “World” Concatenate two strings 2.1 * 3 Multiply two values x++ increase value of x by 1 x = 5 set the value of x to be 5 x += y x = x + y x *= 5 x = x * 5

Comparisons x == y returns true if x and y are equal x != y returns true if x and y are not equal x > y returns true if x is greater than y x <= y returns true if x is smaller than or equal to y x && y returns true if both x and y are true x || y returns true if either x or y is true !x returns true if x is false

toCelsius? Function toCelsius(F) { Celsius = 5/9 * (F-32) return Celsius }

Statements Simple assignment statements Celsius = 5/9 * (F-32) Statements that invoke a method Temperature.toCelsius(104) Return a value from a method return Celsius

Basic Control Structures Sequential Control Structure Conditional Selection Control Structure Repetition Control Structure

Sequential Control Structure b = 3 c = a * b

Conditional Selection Control Structure if (gender == “male”) { greeting = “Hello, Sir” } else { greeting = “Hello, Madam”

Repetition Control Structure Program Example 1: n = 1 while ( n <= 10) { document.writeln(n) n++ } Program 2: For (n = 1; n <= 10; n++) {

Programming for the Web Common Gateway Interface (CGI) [Server side] Forms encode field values into a URL CGI passes field values to a Perl program Program generates a web page as a response JavaScript [Client-side, interpreted] Human-readable “source code” sent to the browser Web browser runs the program Java applets [Client-side, compiled] Machine-readable “bytecode” sent to browser

What is JavaScript Embedded in html (interpreted), not compiled To make we pages more interactive Java Script is NOT Java Minimal data typing and modularity No graphics, no formal classes

JavaScript <HTML> <HEAD> <TITLE>My first script</TITLE> </HEAD> <BODY BGCOLOR=WHITE> <H1> <SCRIPT LANGUAGE=JAVASCRIPT TYPE="TEXT/JAVASCRIPT"> document.write("Hello, world!") </SCRIPT> </H1> </BODY></HTML> Try it at http://www.umiacs.umd.edu/~daqingd/Course/firstscript.html

Handling Events Events: Use event handlers to response events actions that users perform while visiting the page Use event handlers to response events Event handlers triggered by events Examples of event handlers onMouseover: the mouse moved over an object onMouseout: the mouse moved off an object onClick: the user clicked on an object

A Simple rollover.html Click rollover.html Move mouse over and away the arrow View source arrowRed, arrowBlue are variables (“new Image”) arrowRed.src specifies the value Event handlers “onMouseover” and “onMouseoff” Name of the image is defined by NAME = “arrow” <!– Hide script from old browsers … If (document.images) { … to test browser function

Using Function Repetitive tasks => functions Load multirollover1.html and multirollover2.html View sources of the two files Function chgImg handle changing images for all Program is shorter and clearer document.textField equal to document[“textField”]

Hands on Point: Adopt a JavaScript Program Launch a web browser Internet Explorer would be the best choice http://www.glue.umd.edu/~oard/690/select.html See how it behaves if you are 13 (or 65) View source and read the program Save a local copy Make some changes and see how it works

JavaScript and Cookies cookieName=cookieValue; expires=expirationDateGMT; path=URLpath; domain=siteDomain Combine cookie and javascript can do many things Set your user name Read your user name Use cookies as counters