Scribd
Upload
80 views

CS1315: Introduction To Media Computation

This document discusses JavaScript syntax and how to incorporate JavaScript into HTML documents. It covers: - JavaScript syntax is similar to Python but with some differences like requiring variable declaration and using semicolons. Blocks are defined with curly braces. - JavaScript can be added to HTML pages within <script> tags in the head or body. Functions can be defined to manipulate the document, like writing text. - Loops and conditional statements like for loops and if/else work similarly to other languages. Built-in functions provide access to things like the date or pop-up dialog boxes. - Events allow JavaScript to respond to user actions like clicks instead of just running on page load. This provides a

Uploaded by

satyanarayana
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPT or read online on Scribd
80 views

CS1315: Introduction To Media Computation

This document discusses JavaScript syntax and how to incorporate JavaScript into HTML documents. It covers: - JavaScript syntax is similar to Python but with some differences like requiring variable declaration and using semicolons. Blocks are defined with curly braces. - JavaScript can be added to HTML pages within <script> tags in the head or body. Functions can be defined to manipulate the document, like writing text. - Loops and conditional statements like for loops and if/else work similarly to other languages. Built-in functions provide access to things like the date or pop-up dialog boxes. - Events allow JavaScript to respond to user actions like clicks instead of just running on page load. This provides a

Uploaded by

satyanarayana
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPT or read online on Scribd
You are on page 1/ 22

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
Can we display anything useful?

 Sure!
 Anything you can compute.
 Anything that you can get from builtin functions.
 You don’t have to have a function either.
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

You might also like