JavaScript - Getting Started.pptx

JavaScript
GETTING STARTED WITH
JAVASCRIPT

INTRODUCTION OF
PROGRAMMING
BASIC JAVASCRIPT CONCEPT
AND PROGRAMMING
WRITING YOUR FIRST
JAVASCRIPT CODE
Writing your first JavaScript Program

Introduction
For a lot of people, the term “computer programming” conjures up visions of
super-intelligent nerds hunched over keyboards, typing nearly unintelligible
gibberish for hours on end. And, honestly, some programming is like that.
Programming can seem like complex magic that’s well beyond the average
mortal. But many programming concepts aren’t difficult to grasp, and as
programming languages go, JavaScript is relatively friendly to nonprogrammers.
Still, JavaScript is more complex than either HTML or CSS, and programming
often is a foreign world to web designers; so one goal of this book is to help you
think more like a programmer. Throughout this book, you’ll learn fundamental
programming concepts that apply whether you’re writing JavaScript,
ActionScript, or even writing a desktop program using C++. More importantly,
you’ll learn how to approach a programming task, so you’ll know exactly what
you want to do before you start adding JavaScript to a web page.
Many web designers are immediately struck by the strange symbols and words
used in JavaScript. An average JavaScript program is sprinkled with symbols ({ } [ ]
; , () and full of unfamiliar words (var, null, else if). It’s like staring at a foreign
language, and in many ways, learning a programming language is a lot like
learning another language. You need to learn new words, new punctuation, and
understand how to put them together so you can communicate successfully..

What is JavaScript?
JavaScript is a programming language that lets you
supercharge your HTML with animation, interactivity, and
dynamic visual effects. JavaScript can make web pages more
useful by supplying immediate feedback. For example, a
JavaScript-powered shopping cart page can instantly display
a total cost, with tax and shipping, the moment a visitor
selects a product to buy. JavaScript can produce an error
message immediately after someone attempts to submit a
web form that’s missing necessary information.

How to add JavaScript to a 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 tag, it
knows it’s reached the end of the JavaScript program and
can get back to its normal duties.

Much of the time, you’ll add the <script> tag in the <head> portion of the web page like
this :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/
html4/strict.dtd">
<html>
<head>
<title>My Web Page</title>
<script type="text/javascript">
</script>
</head>
The <script> tag’s type attribute indicates the format and
the type of script that follows. In this case,
type=“text/javascript” means the script is regular text
(just like HTML) and that it’s written in JavaScript.

If you’re using HTML5, life is even simpler. You can skip the type attribute entirely:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script>
</script>
</head>
In fact, web browsers let you leave out the type attribute
in HTML 4.01 and XHTML 1.0 files as well—the script will
run the same; however, your page won’t validate
correctly without the type attribute This book uses
HTML5 for the doctype, but the JavaScript code will be
the same and work the same for HTML 4.01, and XHTML
1.

You then add your JavaScript code between the opening and closing <script> tags:
<!doctype html>
<html>
<head>
<head>
<script>
alert('hello world!');
</script>
</head>
You’ll find out what this JavaScript does in a moment. For
now, turn your attention to the opening and closing
<script> tags. To add a script to your page, start by
inserting these tags. In many cases, you’ll put the
<script> tags in the page’s <head> in order to keep your
JavaScript code neatly organized in one area of the web
page.

External JavaScript Files
Using the <script> tag as discussed in the previous section lets you add JavaScript to a single
page. But many times, you’ll create scripts that you want to share with all of the pages on your
site. For example, you might use a JavaScript program to add animated, drop-down navigation
menus to a web page. You’ll want that same fancy navigation bar on every page of your site but
copying and pasting the same JavaScript code into each page of your site is a bad idea for several
reasons.
First, it’s a lot of work copying and pasting the same code repeatedly, especially if you have a site
with hundreds of pages. Second, if you ever decide to change or enhance the JavaScript code,
you’ll need to locate every page using that JavaScript and update the code. Finally, since all the
code for the JavaScript program would be in every web page, each page will be that much larger
and slower to download.

A better approach is to use an external JavaScript file. If you’ve used external CSS files for your
web pages, this technique should feel familiar. An external JavaScript file is simply a text file that
ends with the file extension .js—navigation.js, for example. The file only includes JavaScript code
and is linked to a web page using the <script> tag. For example, to add a JavaScript file named
navigation.js to your home page, you might write the following:
<!doctype html>
<html>
<head>
<script src="navigation.js"></script>
</head>

The src attribute of the <script> tag works just like the src attribute of an <img> tag, or an <a>
tag’s href attribute. In other words, it points to a file either in your website or on another
website.
<script >
alert('Hello world!');
</script>
Note: When adding the src attribute to link to
an external JavaScript file, don’t add any
JavaScript code between the opening and
closing <script> tags. If you want to link to an
external JavaScript file and add custom
JavaScript code to a page, use a second set of
<script> tags.

In addition, you can attach external JavaScript files and add a JavaScript program to the same page like this:
<!doctype html>
<html>
<head>
<script src="slideshow.js"></script>
<script>
alert('hello world!');
</script>
</head>
Just remember that you must use one set of opening and
closing <script> tags for each external JavaScript file.
Note: Sometimes the order in which you attach external
JavaScript files matters. As you’ll see later in this book,
sometimes scripts you write depend upon code that comes
from an external file. That’s often the case when using
JavaScript libraries (JavaScript code that simplifies complex
programming tasks).

Your First JavaScript Program
To write a JavaScript, you need a web browser and either a text editor or an HTML editor.
Once you have the software in place,
you can begin writing JavaScript code.
To add JavaScript code to an HTML file,
create or open an HTML file with your
text/HTML editor. A basic HTML file has
a docType and some basic HTML tags,
such as <html>, <head> and <body>.
For example, a basic HTML5 file might
look something like this
<!DOCType HTML>
<html>
<head>
<title>Testing JavaScript</title>
</head>
<body>
[Content goes here]
</body>
</html>

When you see JavaScript code on the Web, you will sometimes see some JavaScript code between
the <head></head> tags. Or you may see it in the <body></body> tags (or even in both places). To
separate JavaScript code from HTML code, you need to enclose it within a set of <script></script>
tags. The opening <script> tag has one required attribute and one optional attribute. The required
attribute is the type attribute, while the optional attribute is src (which allows you to point to an
external script file, covered later in this answer). The value of the type attribute is set to
text/javascript, as shown below.
Your JavaScript code goes here.
</script>

As you can see, your JavaScript code is placed between the opening and closing script tags. For
example, script, you could write a simple string of text directly on the web page, as shown below
(placed between the <body> and </body> tags). As you can see, your JavaScript code is placed
between the opening and closing script tags. For example, script, you could write a simple string of
text directly on the web page, as shown below (placed between the <body> and </body> tags).
In the example above, the standard JavaScript function displays text between the quotation marks on
the page. It would look like the example below.
document.write("Text written using
JavaScript code!");
</script>
document.write("Text written using
JavaScript code!");

Text written using JavaScript code!
Another option for including JavaScript on a page is creating the script in an external text file.
Save that file with a .js extension, making it a JavaScript file. The .js file is then included in the
page using the src attribute of the opening script tag. For example, to use the script above, place
the JavaScript code (without script tags) into a new text file, as shown below.
You would then save the file with a .js extension. For instance, you could save it as write.js. Once
the file is saved, you can call it from the HTML code via the src attribute of the opening script tag,
as shown below for write.js.
document.write("Text written using JavaScript code!");
<script type="text/javascript" src="write.js"></script>

The procedure above has the same effect as writing the code between the script tags but won't
clutter the HTML code with JavaScript. Another advantage is that the same script can be
included in multiple pages and editing the script file updates the script in every page that uses
the external script file. Editing the script file is helpful as it can be done in one place, rather than
editing the code on each page containing the script.

JavaScript - Getting Started.pptx

More Related Content

JavaScript - Getting Started.pptx