JavaScript
JavaScript & jQuery the missing manual
(Second Edition)
1
Objectives
You will be able to:
 Add simple client-side computing to a
web page using JavaScript.
 Understand and make use of each place
a JavaScript script can be added to a
web page.
 Get scripts executed as the page is
rendered and when events occur.
 Use a JavaScript function to respond to
a button click.
2
JavaScript

JavaScript is a scripting language






Interpretive. No compiler.
Loosely typed.
Used for client side programming.
Much more responsive than server side
programming.
Supported by all modern browsers.
No relation to the Java programming language

except for C-like syntax.
3
Hello, World!

In Visual Studio, create a new html file
named hello_javascript.html



Save on desktop.
No website or project needed
In Source view, add a title and text to
the template created by Visual Studio.


This is pure HTML.
Could use Notepad.

But Visual Studio saves us some typing.
4
Source View
5
Try it out


Save on your desktop as hello.html
Double click on the file’s icon to open it
in you default browser.
6
Try it out
7
Adding a Script



Now let's use a JavaScript script to do
the output.
We will replace the “Hello, world!” text
with a script that outputs the same text.
Still an html file.


Not aspx
This page could be on any web server.

Not necessarily a Microsoft IIS server
8
Adding a Script
9
Script Output

When the browser renders the page and
reaches a script in the body of page it
executes the script.



"document.write()" output is rendered to
the page as if the same text had appeared
at that location.
Can be any legal HTML.
Compare to <% Response.Write() %> in an
ASPX page.
10
Script in Action
Page in Chrome
11
Things to notice

There was no compile step.

JavaScript is an interpretative language.


Each statement is processed by the
interpreter as it is encountered.
A JavaScript interpreter is included in the
browser.

All modern browsers support JavaScript.
12
Page in Internet Explorer
13
Page in Internet Explorer
14
Page in Internet Explorer
15
Turning Off Protection from Scripts

In Internet Explorer,



Tools > Internet Options
“Advanced” tab
“Security” section


Allow active content to run in files on My Computer.
“Browsing” section

Uncheck Disable script debugging (Internet Explorer)


This will result in a lot of error messages from real web sites
such as Blackboard.
You will probably want to reset the property when not
working with Javascript.
16
Some Dynamic Content

Let's add some code to the script to
provide dynamic output.

Different each time the page is viewed.
<script language="JavaScript" type="text/javascript">
document.write("Hello, JavaScript!<br/>");
now = new Date();
document.write("It is now " + now + "<br />" );
</script>
17
Script in Action
18
Things to notice
<script language="JavaScript" type="text/javascript">
document.write("Hello, world!<br/>");
now = new Date();
document.write("It is now " + now + "<br />");
</script>
Variable assigned without
being declared.
Date concatenated to a string
JavaScript is a loosly typed language.
19
JavaScript Functions


Complex scripts embedded in a page
body make the page hard to read.
Define a JavaScript function.


Invoke the function where needed.
Functions can be defined in a script
within the page head.

Not executed until called.
20
A JavaScript Function
JavaScript Function in Action
22
Function Output in Context

Output from the function call is rendered at
the point of the call.
<body>
<div>
This line is before the script that calls the function.<br />
<script language="JavaScript" type="text/javascript">
say_hello();
</script>
This line is after the script that calls the function.<br />
</div>
</body>
23
Function Output in Context
24
Scripts in Separate Files

Scripts can be put into a separate file.




Avoid complicating the html file with extensive
script code.
Functions can be called from various pages.


Must be in the form of functions.
No <script> tags.
Each HTML page must identify any external script
files that it uses.
Compare to CSS.
25
Using an External Script File

In Visual Studio, create a new "JScript" file.
JScript is Microsoft's name for JavaScript.
26
Using an External Script File

Paste in the say_hello() function.

Save file on desktop as say_hello.js


Same directory as the html file.
Modify hello.html to refer to the external
script.
27
Using an External Script File
28
Identifying the External File
Note: the </script> tag is required.
/ in the <script > tag won't work.
29
External Script in Action
End of Section
30
Debugging JavaScript



We can use the Visual Studio debugger for JavaScript if
the script is used by an ASPX page.
 Same as debugging C# code!
Make Internet Explorer your default browser.
Enable script debugging.

In IE, Tools > Internet Options

Advanced tab

Browsing

Uncheck “Disable Script Debugging (Internet Explorer)”
31
Enable Script Debugging
32
Debugging JavaScript

Create new empty ASP.NET web site,
javascript_test
Add new Web Form, Default.aspx
33
Debugging JavaScript

Website -> Add Existing Item


Select All Files (*.*)
JScript Script File, say_hello.js
34
say_hello.js
function say_hello() {
document.write("This is a JavaScript function!<br/>");
now = new Date();
document.write("It is now " + now + "<br />");
document.write("End of JavaScript function<br />");
}
35
Default.aspx
Copy <div> from hello.html into Default.aspx
Inside <form> tags
Copy the script from the <head> into the
<head> of Default.aspx
36
default.aspx
Build and run.
37
Run the App
38
Set a JavaScript Breakpoint
Run the app again.
39
JavaScript Stopped at Breakpoint
Click here to single step.
Can also use the Debug menu or press F10.
40
Viewing a JavaScript Variable
Hover cursor over a variable to see its value as a tooltip.
41
Using QuickWatch
Right click on variable and select QuickWatch
42
QuickWatch
43
Script Finished
End of Section
44
A JavaScript Event Handler


JavaScript functions are often executed
when events occur on the browser.
Examples:




Page loaded by browser
Mouse click
Key pressed
Control gets the focus


... many more
Don't confuse these events with server-side events
which we handle with C# code on the server.
45
An Event Handler
Delete form contents
46
Event Handler in Action
47
Things to Notice
<body onload="say_hello();">

Following the =, in quotes, is
a JavaScript script.

Anything that can appear inside
<script></script> can appear here.


Typically just a single statement.
Often a function call.
48
Responding to a Click




Demonstrate responding to a user-initiated
event, mouse click.
Also demonstrate the JavaScript alert() function.
Delete "onload" from <body>
Add an HTML button to the page.
49
Add an HTML Button
50
The JavaScript alert() Function


alert is JavaScript's answer to printf.
Pops up a box and displays a message to the
user.


Nice debugging tool.
Notice the quotes.


JavaScript permits single quotes to be embedded in
double quotes, and vice versa.
Single quotes and double quotes can be used
interchangably.
51
Initial Page
Click on Say Hello
52
Responding to a Click
53
Learning JavaScript


There are many books on JavaScript.
Get an introductory level book

Or look up a JavaScript tutorial on the Internet.

Learn the fundamentals.

We will be looking at jQuery


A JavaScript Framework
Recommended as introduction to both
JavaScript and jQuery:



JavaScript & jQuery the missing manual (Second Edition)
David Sawyer McFarland
O'Reilly, 2011
54
Assignment
Before next class:

Do the examples from this presentation
for yourself if you have not already
done so in class.
End of Presentation
55