Starting Out With JavaScript
 Due dates are listed on the ‘Schedule’ web page
 Assignment #1 is due on Tuesday, April 19 Thursday, April 21st at the start of class
 I may or may not keep announcing this – you need to be proactive in tracking your
due dates & deadlines!
2
 Quiz
 Bootstrap
 Start JavaScript (recognizing regions: HTML, CSS, JavaScript)
 jQuery (today or next lecture )
3
 "Bootstrap is a free and open-source collection of tools for
creating websites and web applications. It contains HTMLand CSS-based design templates for typography, forms,
buttons, navigation and other interface components, as well as
optional JavaScript extensions. It aims to ease
thedevelopment of dynamic websites and web applications.
Image from Wikipedia
 Bootstrap is a front end framework, that is, an interface for the
user, unlike the server-side code which resides on the "back
end" or server."
-- Wikipedia
4
CDN
C
D
N
 Bootstrap is made of CSS and JavaScript.
 Lots of people use Bootstrap
 If everyone stored their own copy of Bootstrap on their own web server:
1. Each web site visitor would need to download that copy each time they visit each website
2. You need to pay for the bandwidth each time it's downloaded
 Content Delivery Network stores a single copy that all websites can use
1. Can be cached by individual browsers
2. CDN companies work hard to ensure high availability & high speed download
 For example, by physically locating the files in multiple computers & downloading from the nearest
one
 We're going to use CDN's to dynamically download Bootstrap
5
CDN
Advantages:
+ The single largest advantage of using a CDN, like
Google’s, is that its distributed network almost always
uses servers closest to the website visitor to deliver the
jQuery library.
+ Once the library from a CDN is cached by the browser,
it doesn’t have to be downloaded again (as long as the
browser cache isn’t cleared), which makes site loading
faster.
•
Because most people use Google they will probably
already have jQuery cached before accessing your web
pages, which means jQuery doesn't even have to be
downloaded again!
Disadvantages:
—The largest disadvantage is that you’ll have to rely on
a third party to be available when your site is
requested by a first-time visitor.
Download your own copy
Advantages
+You’ll be in control. If someone can reach
your site, they can get all of the files
needed to use your site.
+Once it’s cached from your site, returning
visitors gain the same advantage they’d
get if you were using a CDN.
Disadvantages:
—Some browsers limit the number of
simultaneous connections they can make
to a server, so getting everything
downloaded quickly may be difficult.
6
 Part 1: Take an existing web page and add Bootstrap to it
 Notice how everything changes without you having to change the HTML itself
 Part 2: Apply a Bootstrap class to your page
 Part 3: Add a Bootstrap-specific element to your page
7
Document Structure
Document
Appearance
Interactivity
8
JavaScript Background / Overview
9
JavaScript is a popular general-purpose scripting language used to put
energy and pizzaz into otherwise static web pages by allowing a page to
interact with users and respond to events that occur on the page.
JavaScript allows for dynamic interaction between the web page and the
end-user.
It would be a hard task to find a commercial web page, or almost any web
page, that does not contain some JavaScript code.
10
JavaScript is a client-side language designed to work in the browser on your
computer, not the server.
It is built directly into the browser (although not restricted to browsers), Mozilla
Firefox, Google Chrome, and Microsoft Internet Explorer being the most
common browsers.
In syntax, JavaScript is similar to C, Perl, and Java; for example, if statements
and while and for loops are almost identical.
JavaScript is an interpreted language, not a compiled language.
11
Not
JavaScript is not Java!
A newsgroup wit once quipped that “Java is to JavaScript what Car is to Carpet.”
Java is a strongly typed language with strict guidelines, whereas
JavaScript is loosely typed and flexible.
Java data types must be declared. In
JavaScript variables, parameters, and function return types do not have to be declared.
Java programs are compiled.
JavaScript programs are interpreted by a JavaScript engine that lives in the browser.
JavaScript is not HTML, but JavaScript code can be embedded in an HTML document and is
contained within HTML tags.
12
Not
JavaScript has its own syntax rules and expects statements to be written in a
certain way.
JavaScript doesn’t understand HTML, but it can contain HTML content within its
statements.
All of this will become clear as we proceed.
13
Locating JavaScript in a Web Page
14
JavaScript in a Web Page
Web browsers are built to understand HTML and CSS and convert those languages into a
visual display on the screen. The part of the web browser that understands HTML and
CSS is called the layout or rendering engine. But most browsers also have something
called a JavaScript interpreter. That’s the part of the browser that understands JavaScript
and can execute the steps of a JavaScript program. Since the web browser is usually
expecting HTML, you must specifically tell the browser when JavaScript is coming by
using the <script> tag.
The <script> tag is regular HTML. It acts like a switch that in effect says “Hey, web
browser, here comes some JavaScript code; you don’t know what to do with it, so hand
it off to the JavaScript interpreter.” The closing </script> tag the web browser that it’s
reached the end of the JavaScript program and can get back to its normal HTML duties.
15
Accessing JavaScript in a Web Page
JavaScript can appear in several places:
• Inline (JavaScript inside an HTML tag)
• Internal (JavaScript in a <script> tag, inside the same HTML file)
• External (JavaScript in a separate file with a .js extension)
These are somewhat similar to CSS
Right now we’re going to focus on identifying which parts of an
HTML page are HTML vs. CSS vs. JavaScript. Don’t worry about
understanding the JavaScript code itself!
It’s interesting to look at, you might pick some JS up, but
don’t worry about it yet
16
Inline JavaScript
The following inline example demonstrate a single line of JavaScript code—the alert()
function—which displays a message in a modal dialog box.
Inline JavaScript can be useful for certain specific tasks, but inline should be your third choice.
External JavaScript files should be your first choice, internal JavaScript your second.
17
Inline
JavaScript
<!DOCTYPE html>
FILE: helloworld1.html
<html>
<head>
<title>Hello World 1</title>
</head>
<body>
<form>
<input type="button" value="Hello World" onClick="alert('Hello Yourself!')">
</form>
<p><a href="#" onclick="alert('Hello Yourself!')">Hello World</a></p>
</body>
</html>
Inline JavaScript appears inside an individual tag.
The JavaScript commonly appears inside a event attribute such as
onClick
Notice how the a tag has two attributes (properties) with special values:
• href attribute is "#" although it might also be empty " ", or contain "javascript:; "
- this disables normal link behavior
• onclick attribute is alert('Some Message');
- onclick is an event — the JavaScript runs when the event happens, in this case
when the link receives a click
18
Internal JavaScript
19
Internal JavaScript
Internal JavaScript appears inside a <script> tag, like this:
<!DOCTYPE html>
FILE: helloworld4.html
<html>
<head>
<title>Hello World 4</title>
</head>
<body>
<h2>Hello World</h2>
<script>
// JavaScript goes here, between the opening and closing <script> tags.
// Notice use of "//" comment style while in between the <script> tags.
alert('Hello Yourself!');
</script>
</body>
</html>
20
Internal JavaScript
<!DOCTYPE html>
FILE: helloworld6.html
<html>
<head>
<script>
function popUp() {
alert("Hello Yourself!") // note missing ; - this is ok
}
</script>
</head>
<body>
<input type="button" onClick="popUp()" value="Hello World">
</body>
</html>
21
External JavaScript File
22
FILES:
helloworld9.html
helloworld.js
External JavaScript File
To use an external JavaScript file in a web page, use the <script> tag with the src attribute pointing to the
JavaScript file.
Example:
<script src="somejavascript.js"></script>
When using the <script> tag to load an external JavaScript file, do not use the tag as a container for internal
JavaScript — that is, do
not put JavaScript (or anything thing else) between the
opening tag and the closing tag.
•
•
•
•
External JavaScript files are text files containing JavaScript, and nothing else.
• Specifically, you do NOT need the <script> tag at the start – the file is already in “JavaScript mode”
Edit using any text editor. Serious JavaScript developers typically edit files using an Integrated Development
Environment (IDE) such as Dreamweaver or Brackets.io.
Do not use the <script> tag in an external JavaScript file itself — the <script> tag goes in the web page.
When using two or more script tags on a page, the order of the tags can be significant, in terms of
JavaScript processing.
23
 Exercise #4
 This is an important skill
 It’s also fairly ‘rote’ – once you understand the rules you can
always do this
 This can be confusing when you first start
 Let’s practice this now!
 When you get done, move on to the next two exercises
(#5 and #6)
24