Scribd
Upload
74 views

CS1315: Introduction To Media Computation

The document discusses JavaScript syntax and how to embed JavaScript code in HTML documents. It explains that JavaScript code can be used to add interactivity to web pages by responding to user events like clicks or key presses. Interactive elements like buttons or images can be assigned "onClick" event handlers that trigger JavaScript functions displaying dialog boxes or other responses when clicked. This allows capturing user interactions to provide feedback rather than just loading scripts on page load.

Uploaded by

satyanarayana
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
74 views

CS1315: Introduction To Media Computation

The document discusses JavaScript syntax and how to embed JavaScript code in HTML documents. It explains that JavaScript code can be used to add interactivity to web pages by responding to user events like clicks or key presses. Interactive elements like buttons or images can be assigned "onClick" event handlers that trigger JavaScript functions displaying dialog boxes or other responses when clicked. This allows capturing user interactions to provide feedback rather than just loading scripts on page load.

Uploaded by

satyanarayana
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 26

CS1315:

Introduction to
Media Computation
“What do other languages look like?
How hard is it to do Web
programming?”:
JavaScript
What do other languages look like?
 We call the language “look” its syntax
 Python is a fairly traditional language in terms of
syntax.
 Languages like Scheme and Squeak are
significantly different.
 Major 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 meant for non-professional
programmers to solve 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.
 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, 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 “;”
 (But lines 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 not unlike
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 sits inside of 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, where the scripts are actually
executed.
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>
<h1>A Simple Heading</h1>
<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>
<h1>A Simple Heading</h1>
<p>This is a very simple web page.</p>
<p><image src="mediasources/barbara.jpg" /> Here we 
<script> test() </script></p> execute the 
function.
Can also insert HTML
<script>
function insertHead()
{
document.writeln("<h1>This is a test</h1>");
}
</script>
</head>
<body>
<h1>A Simple Heading</h1>
<p>This is a very simple web page.</p>
<p><image src="mediasources/barbara.jpg" />
</p>
<script> insertHead() </script>
</body>
</html>
Using loops
<html>
<head>
<title>The Simplest Possible Web Page</title>
<script>
function countToTen()
{
document.write("<ul>");
for (i=1; i<= 10; i++)
{
document.write("<li>Item number: ",i);
}
document.write("</ul>");
}
</script>
</head>
<body>
<h1>A Simple Heading</h1>
<p>This is a very simple web page.</p>
<p><image src="mediasources/barbara.jpg" />
</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 builtin 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.jpg
" />
</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 important 
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 on 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
 onClick
 onDblClick
 onMouseOver
 onMouseOut
 onMouseMove
Catching an event
 In the anchor or image tag, assign the event to
some JavaScript code in a string.
Example Event Code
<body>
<h1>A Simple Heading</h1>
<p>This is a very simple web
page.</p>
<p><image
src="mediasources/barbara.jpg
" onClick='alert("You clicked
me!")' />
</p>

</body>

You might also like