1
|
- Week 5
- LBSC 690
- Information Technology
|
2
|
- Programming
- Javascript
- SMIL
|
3
|
- Software models aspects of reality
- Input and output represent the state of the world
- Software describes how the two are related
- Examples
- Ballistic computations
- Google
- Microsoft Word
|
4
|
- 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 Vista)
- Manages display, CPU, memory, disk, tape,
- Embedded program (e.g., TiVO)
- Permanent software inside some device
|
5
|
- Used to specify every detail of the model
- Special purpose
- Able to specify an entire class of models
- Spreadsheets (Excel, ...)
- Databases (Access, Oracle, ...)
- General purpose
- Able to specify any possible model
- JavaScript, Java, Perl, C, C++, ...
|
6
|
- Machine language
- Language that machine can understand
- Assembly language
- Assembler changes names to machine code
- High-level languages
- Compiler/Interpreter translates to machine language
- FORTRAN, COBOL, C, C++, Javascript
- Visual programming language
- Visually arrange the interface components
- Visual Basic, …
|
7
|
|
8
|
- Everything is a binary number
- For instance
- 00001000 ADD
- 00010101 first number (21)
- 01010110 second number (86)
|
9
|
- Symbolic instruction codes and addresses
- Symbolic instruction code “ADD”
- Symbolic address “SUM1”
- For instance
|
10
|
- Procedural (modular) Programming
- Group instructions into meaningful abstractions
- C, Pascal, Perl
- Object oriented programming
- Group “data” and “methods” into
“objects”
- Naturally represents the world around us
- C++, Java, JavaScript
|
11
|
- PHP [Server side]
- Forms encode field values into a URL
- Web server passes field values to a PHP 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
- Web browser runs the program
|
12
|
- Data types
- Boolean: true, false
- Number: 5, 9, 3.1415926
- String: “Hello World”
- A “variable” holds a value of a specific data type
- Represented as symbols: x, celsius
- In JavaScript, var “declares” a variable
- var b =3D true; create a boolean b and set it to true
- var n =3D 1; create a number n and set it to 1
- var s =3D “hello”; create a string s and set it to
“hello”
|
13
|
- -x reverse the sign of x (negation)
- 6+5 Add 6 and 5 (nu=
meric)
- “Hello” + “World” Concatenate two strings<=
/li>
- 2.1 * 3 Multiply two values
- x++ increase value of x by 1
- x =3D 5 set the value of x to be 5
- x +=3D y x =3D x + y
- x *=3D 5 x =3D x * 5
|
14
|
- In JavaScript, instructions end with a semicolon
- If missing at end of line, it is automatically inserted
- Simple assignment statements
- celsius =3D 5/9 * (f-32);
- Statements that invoke a method
- Temperature.toCelsius(104);
- Return a value from a method
|
15
|
- Reusable code for complex “statements”
- Takes one or more values as “parameters”
- Returns at most one value as the “result”
|
16
|
- A sequence of well-defined instructions designed to accomplish a cer=
tain
task
- Derived from the name of the Persian mathematician Al-Khwarizmi
|
17
|
- Sequential
- Perform instructions one after another
- Conditional
- Perform instructions contingent on something
- Repetition
- Repeat instructions until a condition is met
|
18
|
|
19
|
- if (gender =3D=3D “male”) {
- greeting =3D “Hello, Sir”
- }
- else {
- greeting =3D “Hello, Madam”
- }
|
20
|
- x =3D=3D y true if x and y are equal
- x !=3D y true if x a=
nd y are
not equal
- x > y true if x is greater than y
- x <=3D y true
if x is smaller than or equal
to y
- x && y true if both x and y are true
- x || y true if either x or y is true
- !x true if x is false
|
21
|
|
22
|
- A set of elements
- 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 repetitions work naturally together
|
23
|
- <HTML>
- <HEAD>
- <TITLE>My first script</TITLE>
- </HEAD>
- <BODY BGCOLOR=3DWHITE>
- <H1>
- <SCRIPT LANGUAGE=3DJAVASCRIPT TYPE=3D"TEXT/JAVASCRIPT"=
>
- document.write("Hello, world!")
- </SCRIPT>
- </H1>
- </BODY></HTML>
- Try it at
http://www.umiacs.umd.edu/~oard/teaching/690/spring08/notes/5/firsts=
cript.html
|
24
|
- JavaScript is usually in the <head> section
|
25
|
- Events:
- Actions that users perform while visiting a page
- Use event handlers to response events
- Event handlers triggered by events
- Examples of event handlers in Javascript
- onMouseover: the mouse moved over an object
- onMouseout: the mouse moved off an object
- onClick: the user clicked on an object
|
26
|
- Accept input and display output for JavaScript
|
27
|
- Launch a Web browser
- http://www.umiacs.umd.edu/~oard/teaching/690/spring08/hw/hw5/select=
or.htm
- 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
|
28
|
- Attention to detail!
- Careful where you place that comma, semi-colon, etc.
- Write a little bit of code at a time
- Add some functionality, make sure it works, move on
- Don’t try to write a large program all at once
- Debug by viewing the “state” of your program
- Print values of variables using document.write
- Is the value what you expected?
|
29
|
- Google “javascript”
- Tutorials: to learn to write programs
- Code: to do things you want to do
- Engineering and Physical Sciences Library
|
30
|
- Scripting Languages
- Synchronized Multimedia Integration Language (SMIL)
- Custom applications
- Content representation standards
|
31
|
- W3C standard
- Player-specific extensions are common
- XML, with a structure similar to HTML
- <smil>
- <head> … </head>
- <body> … </body>
- </smil>
|
32
|
- Window controls (in <head>)
- Controlling layout: <region>, <root-layout>
- Timeline controls (in <body>)
- Sequence control: <seq>, <excl>, <par>
- Timing control: <begin>, <end>, <dur>
- Content types (in <body>)
- <audio>, <video>, <img>, <ref>
|
33
|
- Implemented in RealOne Player
- Example:
- http://www.umiacs.umd.edu/~oard/teaching/690/fall05/notes/4/media.ht=
ml
- First, run the executable
- Then, view .smil file
|
34
|
- For images?
- For text?
- For sound?
- For video?
|
35
|
- On a sheet of paper (no names), answer the following question:
- What was the muddiest point in today’s class?
|