CS1315: Introduction To Media Computation

CS1315:
Introduction to
Media Computation
What do other languages look like?
How hard is it to do Web programming
in JavaScript?
JavaScript
What do other languages look like?
 We call the language “grammar” its syntax
 Python is a fairly traditional language in terms of
syntax.
 Languages like Scheme, Lisp and Squeak are
significantly different.
 Some points of difference:
 Whether or not variables have to be declared before
first use.
 Details of how individual lines are written.
 Details of how blocks are defined.
JavaScript
 JavaScript is meant to be a scripting language, like Python.
 Scripting languages are good at solving simple tasks.
 It’s designed to look like Java to ease the transition in
either way.
 JavaScript can be used by the web server (used on the
computer accessed via the Internet), or it can be used
within an HTML page.
 If it’s within the HTML page, it’s actually executed by the
user’s browser & computer.
 We call that client side JavaScript.
JavaScript syntax: Variables
 Variables must be declared before use.
 You can’t just say:
a = 12
 You can either say:
var a = 12;
 Or:
var a;
a = 12
 In other languages (like Java), you might also declare the
variable’s type
int a = 12;
JavaScript syntax: Blocks
 Blocks are delimited with curly braces.
function test()
{
document.writeln("This is a test");
}
JavaScript syntax: Individual
statements
 Lots of differences:
 func tion instead of def
 End lines with semicolons “;”
 (and statements can have returns in the middle of them.)
 The for statement is numeric (mostly) and has
different parts to it.
 You use write or writeln instead of pri nt
 But they’re mostly detail changes.
 The basic operation of JavaScript is similar to
Python.
JavaScript is all about objects
 Just about every function is actually a method.
 For example, there is no global print.
 There is a function write or writeln
 writeln adds a new line (‘\n’) at the end.
 But these aren’t global functions.
 To write into the document, you use
document. wri te()
 document. wri te() is a method on the HTML
document itself.
Embedding JavaScript inside HTML
 JavaScript can be inside HTML pages.
 You wrap <script> </script> tags around the
JavaScript.
 You can have <script> tags in two kinds of
places.
 Inside the <head></head> tags to define functions
used elsewhere.
 Inside the <body></body> tags to execute the
scripts.
Our Simple Web Page
<!DOCTYPE HTML PUBLIC "-
//W3C//DTD HTML 4.01
Transition//EN"
"http://wwww.w3.org/TR/html4/loo
se.dtd">
<html>
<head>
<title>The Simplest Possible Web
Page</title>
</head>
<body>
<h1>A Simple Heading</h1>
<p>This is a very simple web
page.</p>
<p><image
src="mediasources/barbara.jpg" />
</body>
</html>
Adding some simple JavaScript
<!DOCTYPE HTML PUBLIC "-//W3C//DTD
HTML 4.01 Transition//EN"
"http://wwww.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>The Simplest Possible Web Page</title>
<script>
function test()
{
document.writeln("This is a test");
}
</script>
</head>
<body>
<p>This is a very simple web page.</p>
<p><image src="mediasources/barbara.jpg" />
<script> test() </script> </p>
</body>
</html>
Going into detail on the function
<script>
function test()
{ Here’s a function
document.writeln("This is a test"); named “test” with
} no inputs, that only
</script> writes out a string.
</head>
<body>
<p><image src="mediasources/barbara.jpg" /> Here we
<script> test() </script></p> execute the
function.
Can also insert HTML
<script>
function insertHeading()
{
document.writeln("<h1>This is a test</h1>");
}
</script>
</head>
<body>
</p>
<script> insertHeading() </script>
</body>
</html>
Using loops
<html>
<head>
<script>
function countToTen()
{
document.write("<ul>");
for (i=1; i<= 10; i++)
{
document.write("<li>Item number: ",i);
}
document.write("</ul>");
}
</script>
</head>
<body>
</p>
<script> countToTen() </script>
</body>
</html>
Explaining that function
We can write
function countToTen()
out <ul> and
{
</ul>
document.write("<ul>");
for (i = 1; i <= 10; i++)
{
document.write("<li>Item number: ", i);
}
document.write("</ul>"); Creating an item for
} each value of i
Explaining that Loop
for (i=1; i<= 10; i++)  A for loop has three parts,
{ separated by semi-colons.
 What to do first.
document.write("<li>Item
number: ",i);
 For us, set i to 1
 When to stop
}  For us, i<=10
 What to do each time
through the loop
 i++ means to increment the
value of i by 1.
 It’s a notation that was
invented by the programming
language C and has been
adopted by many languages
Operators in JavaScript
 The same kind of operators you know in Python
 + - * /
 + even works for strings, as well as numbers
 < <= > >=
 == and !=
 ! for not
 Logical operators are a little weird
 && is AND
 || is OR
Can we display anything useful?
 Sure!
 Anything you can compute.
 Anything that you can get from built-in functions
(mostly methods).
 There are lots of them.
 You don’t have to have a function either.
 You can just put the script in-line
Displaying the date and time
<p>This is a very simple
web page.</p>
<p><image src =
"mediasources/barbara.jp
g" />
</p>
<p>This is being served to
you on
<script>
document.write(Date());
</script> </p>
Using dialogs in JavaScript
function check()
{
var agree = false;
agree = confirm('Do you enjoy CS?');
if (agree)
notes = prompt("Give me one good thing about CS:"); agree will be true or
if (! agree) false.
notes = prompt("Why don't you like CS?");
alert("You said:” + notes); ! agree is not agree.
}
…
<script> check() </script>
</body> Notice: We can indent or not
</html> indent as we want here.
Indentation is not required in
JavaScript (or most other
languages.)
What happens when this runs
Different kinds of dialogs
 Confirm:
Puts up a prompt, returns true or false.
 Alert:
Beeps and displays one thing with an OK button.
No return.
 Prompt:
Asks the user for a line of text. Returns that text.
Running when Loading the Page
 This program runs when the page loads.
 Is that what you really want to happen?
 The user sees nothing at all until they go to your
page and then these dialog boxes happen.
 Isn’t it more natural for dialog boxes to pop up
when you click on something?
Events: Key to responding to users
 The key to responding to users are events.

 Events are actions taken by the user that can be
caught by your program in JavaScript.
 Events are caused by the user typing a key,
moving the mouse, clicking the mouse.
Events in JavaScript
 onKeyPress  onMouseDown
 onKeyUp  onMouseUp
 onKeyDown  onChange (for text fields)
 onClick  onLoad
 onDblClick  And many, many more
 Some of them depend on
 onMouseOver the browser.
 onMouseOut
 onMouseMove
Catching an event
 On appropriate tags, assign the event to some
JavaScript code in a string.
 Most of these can be used with anchor or image
tags.
 onLoad can be used with the <body> tag.
 onChange can be used with text fields.
 We haven’t seen them yet.
Example Event Code
<body>
<p>This is a very simple web
page.</p>
<p><image src =
"mediasources/barbara.jpg"
onClick = 'alert("You clicked
me!")' />
</p>
</body>
Opening another Window
 To open another window, we use the function
open()
 Open can take up to three inputs:
 First input is the URL to open.
 Second is the name of the window
 Third is a string with a variety of inputs possible.
Popping up a window on a click
<html>
<head>
<script>
function goToHawaii()
{
var win = open('http://www.cc.gatech.edu/~mark.guzdial/hawaii/', 'Hawaii');
}
</script>
</head>
<body>
<p><image src = "mediasources/beach.jpg" onClick = "goToHawaii()" />
This page was created on <script> document.write(Date()); </script></p>
</body>
</html>
Popping up a Window
Changing the window’s
characteristics
<head>
<script>
function goToHawaii()
{
var win = open('http://www.cc.gatech.edu/~mark.guzdial/hawaii/', 'Hawaii',
"titlebar = no, width = 200");
}
</script>
</head>
Note: Even something this simple
doesn’t work on all browsers!
Changing the window’s
characteristics
Controlling colors with mouseOver
and mouseOut
<body>
<p>Pick any item...</p>
<ul>
<li onmouseover = "this.style.color='green'"
onmouseout = "this.style.color='black'">Pick me!</li>
<li onmouseover = "this.style.color='red'"
onmouseout = "this.style.color='yellow'">No, pick me!</li>
<li onmouseover = "this.style.color='magenta'"
onmouseout = "this.style.color='pink'">No, no -- I'm the one!</li>
</ul>
Fields and Buttons in HTML
 To create fields and buttons in HTML, we need a
form.
 Forms are delimited with <form> and </form>
 Examples of things we can have in forms.
 <input type = “text” name = “afield1”>
 <input type = “button” value = “Click me”>
 type = “textarea” is for more than one line of text.
 type = “radio” is for radio buttons.
Simple Form
<html>
<head>
<title>Simplest Form in HTML</title>
</head>
<body>
<form>
<input type = "text" name = "afield">
<input type = "button" value = "Click me">
</form>
</body>
</html>
Forms and CGI Scripts
 Forms can also point to particular URLs
 Form URLs are typically CGI Scripts
 CGI Scripts are programs (written in Perl or Python)
that will process the form, which will be passed in
as a parameter.
 We can also do processing of form input
completely from within JavaScript.
Inches/Centimeter Converter
<body>
<h1>Inches/Centimeter Converter</h1>
<h3>Enter and value and tab</h3>
<form>
<p>Centimeters:<input type = "text" name = "cm"
onchange = "this.form.inches.value = this.value / 2.54"></p>
<p>Inches:<input type="text" name="inches"

onchange = "this.form.cm.value = this.value * 2.54"></p>
</form>
</body>
Doing Multimedia in JavaScript
 It’s possible to do multimedia in JavaScript, but
it’s not like in Python.
 We can’t control pixels or samples.
 Most common way to do JavaScript is through
plugins.
 Like Apple QuickTime, RealVideo, Netscape
LiveAudio
 Can do some simple animations from JavaScript.
Animated Motion in JavaScript
 There is a setInterval() function that can make a
JavaScript function run at regular intervals.
 We use that to schedule motion to occur.
 Divisions (<div></div>) can be controlled with
styles, that can have positions.
 We then make a function to adjust the position of
the division.
Animated Motion in JavaScript
<html> </head>
<head> <body ONLOAD = "setInterval('drift()',
<title>The Simplest Possible Web 100)">
Page</title> <h1>A Simple Heading</h1>
<style> <p>This is a very simple web page.</p>
#barb { position: absolute; left:0; top: <div id = "barb">
0; } <p><image src =
</style> "mediasources/barbara.jpg" />
<script> </p>
function drift() </div>
{ <p>Here is some more text, just to make
var object = document.all.barb.style; the document larger and make
object.pixelTop = object.pixelTop + 5; it obvious where the picture is drifting.
object.pixelLeft = object.pixelLeft + 5; </body>
}
</script> </html>
Why JavaScript?
 To do simple processing from within HTML.
 To control plugins.
JavaScript vs. Python
 JavaScript’s syntax is much like other programming
languages.
 JavaScript can’t do everything that Python can.
 Python is a more full-featured programming language.
 But Python can’t be embedded inside of HTML.
 (Well, not cross-platform. It can on Windows with a
Python plugin for your browser.)
 Python can be used on the server side for web pages.
PSP or python server pages.

CS1315: Introduction To Media Computation

Uploaded by

Copyright:

Available Formats

CS1315: Introduction To Media Computation

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

CS1315: Introduction To Media Computation

Uploaded by

Copyright:

Available Formats

CS1315:

 The key to responding to users are events.

<p>Inches:<input type="text" name="inches"

You might also like