script - Technology

mewstennisSoftware and s/w Development

Nov 4, 2013 (4 years and 6 days ago)

69 views



JavaScript


Programming


Unit #1: Introduction


What is Programming?


What is JavaScript?


JavaScript is
THE

scripting language of the
Web.


JavaScript is used in millions of Web pages
to add functionality, validate forms,
detect browsers, and much more.


What is JavaScript used
for?


JavaScript was designed to add
interactivity

to HTML pages


JavaScript is a
scripting

language (a scripting
language is a
lightweight programming
language
)


A JavaScript consists of lines of
executable

computer code


A JavaScript is usually
embedded

directly into
HTML pages


JavaScript is an
interpreted

language


(means that scripts execute without
preliminary compilation)


Everyone can use JavaScript without
purchasing a license


Java

vs.

JavaScript

Are they the same? …..
NO!

Java

and
JavaScript

are two completely
different languages in both concept and
design!


Java (developed by Sun Microsystems) is a
powerful and much more complex
programming language
-

in the same
category as C and C++.



HTML


Content

CSS

(Cascading
Style Sheets)


Presentation


JavaScript


Behavior

JavaScript works with HTML & CSS (Cascading Style Sheets)

Content is separated from Presentation & Behavior

JavaScript Unit #1


Objectives
:

o
Examine how you can put code inside an
HTML document

o
Use dialog boxes to interact with the user

o
Learn how computers store data in
variables

o
Learn how to get data from the user

o
Perform basic operations on data

Hello World! application

<html>

<head><title>Hello World</title></head>


<body>

<h1>This is normal HTML</h1>


<script>

//hello world is the classic first program


alert ("Hello, World!");

</script>


</body>

</html>

Why didn’t
this text
show up?

The
//

characters denote a comment, the interpreter ignores anything
that shows up on a line that begins with these characters.

alert (“Hello, World!”);

Message pops up in its own box








Dialog
Box




alert (“Hello, World!”);




semicolon


(end of the alert statement)

most lines require the semicolon at the end

Using Variables


Data


the information that the computer collects
and manupilates.


For now data will be text


i.e names or phrases

Programming languages use something called

Variables


as a tool for managing data.

Variables hold information until
the computer needs to work with it.

Whenever you want the computer to have
some information, such as a user’s name,
a message, or a rate, you’ll need to use a
variable

Using the
var

Statement


When you create a new variable you
need to give it a new name (label)


var greeting;

greeting = "Hi there, Class!";


Name I give

the variable

Guidelines for Naming
Variables


Make names descriptive


Be CAREFUL with case


USERNAME / userName / username


Don’t use spaces or punctuation


X R V


NO NO NO!!!


Keep names short


greeting


taxrate


Assigning a Value to a
Variable

greeting = “Hi there, Class!”

this assigns the text to the variable greeting


Everything between the quotation marks
is called a
string literal



The = sign indicates assignment. Read the
above statement as:



greeting gets the string literal:







“Hi there,
Class!”


do not read it as greeting equals!

Using the Contents of
Variable

alert (greeting);


The user will not see the term
greeting

The user sees: “Hi there, Class!”

which is the content of the
greeting

variable

Hello, Class! application

<html>

<head>

<title>Hello Class</title>

</head>


<body>

<h1>Hello, Class!</h1>


<script>

var greeting; greeting = "Hi there, Class!"; alert (greeting);

</script>


</body>


</html>

Hello User! application


The computer asks the user their name
and then


uses that info in another
statement

Hello User! application

<html>

<head>

<title>Concatenation</title>

</head>

<body>


<h1>Concatenation</h1>

<br>

<h3>The combination of two or more text strings</h3>

<script>

var username;

username = prompt("What is your name?");

alert("Hello, welcome " + username + "!!");

</script>

</body>

</html>

Syntax Summary


STATEMENT



DESCRIPTION


EXAMPLE

var varName


Create a variable called varName

var userName;

var varName = value

Create a variable called varName

var userName = “”;





with a starting value of value

alert(msg)


Send the string msg to the user

alert(“Hi there!”);





in a dialog box


varName = prompt


Send a dialog box with the string

userName =

(question)



question and a text box


prompt
(“What is





then return the value to varName

your name”);

eval(string)


Evaluate the string expression. If

number = eval(“3”);





it’s a number, return the number

Exercise #1

1.
Write a JavaScript program that will ask
the user for his or her first name, last
name, and middle initial. Return them
back in the order of last name, first
name, and middle initial, then in the
opposite order.


Save as: “javaex01.html” in your
javaweb

folder

The Name Game

<html><head><title>The Name Game</title></head><body>

<center>

<h1>The Name Game</h1>

<script>

//nameGame

//plays around with user's name

//uses string methods


var firstName = "";

var lastName = "";

var numLetters = 0;


firstName = prompt("Hi, what's your first name?", "");

alert ("That's a nice name, " + firstName);

alert ("I think I'll shout it: " + firstName.toUpperCase());

lastName = prompt("So what's your last name, " + firstName + "?");

alert ("Oh. " + firstName + " " + lastName + ".");

alert ("Sometimes called " + lastName + ", " + firstName);

numLetters = firstName.length + lastName.length;

alert ("Did you know there are " + numLetters + " letters in your name?");


</script></body></html>

The Name Game

Concatenating Strings


Combine two or more text strings



You concatenate strings by using the

+

sign


alert ( "Hello, welcome " + fname + "!!");

Joining Variables and
Literals

greeting = “Hi, “ + username + “!!”;



Use string concatenation to make really
long, complex strings.

Example: (add this to your javaex01.html
file)



formgreet = "Hello Mr/Mrs " + lname +

" I hope you are feeling well today." + " May I call you " + fname + "?";


alert (formgreet);

<html><head><title>Hello User</title></head><body><h1>Hello, User</h1>

<script>


var fname;

fname = prompt("What is your FIRST NAME?");

alert("Hello, welcome " + fname + "!!");


var lname;

var greeting;

lname = prompt("What is your LAST NAME?");

greeting = "Hello, welcome " + lname + "!!";

alert (greeting);


var username;

var greeting;

username = prompt("What is your FIRST and LAST NAME?");

greeting = "Hello, welcome " + username + "!!";

alert (greeting);


</script>

</body>

</html>

javaex01.html

The Name Game

Create your own version of the name game

<html><head><title>The Name Game</title></head><body>

<center>

<h1>The Name Game</h1>


<script>


var firstName = "";

var lastName = "";

var numLetters = 0;


finish this script


Working with Numbers

Creating the

Adder

Application

o
Take the cost of a meal

o
Add a 15% tip

o
Calculate the total bill

<html><head><title>Adder</title></head>

<body>

<h1>The Adder</h1>


<script>


var meal = 22.50;

var tip = meal * .15;

var total = meal + tip;


alert ("the meal is $" + meal);

alert ("the tip is $" + tip);

alert ("Total bill: $" + total);


</script>

</body>

</html>

<html>

<head>

<title>BadAdd</title>

</head>

<body>

<h1>The BadAdd</h1>

<script>


//BadAdd Demonstrates a potential pitfall


var meal;

//get the cost of the meal from the user

meal = prompt("How much was the meal?");

var tip = meal * .15;

var total = meal + tip;

alert ("the meal is $" + meal);

alert ("the tip is $" + tip);

alert ("Total bill: $" + total);


</script>

</body>

</html>

BadAdd Demonstrates

a potential pitfall

<html>

<head>

<title>GoodAdd</title>

</head>

<body>

<h1>The GoodAdd</h1>

<script>

//GoodAdd demonstrates eval function

var meal;

//get the cost of the meal from the user

meal = prompt("How much was the meal?");

//convert the value to a number

meal = eval(meal);

var tip = meal * .15;

var total = meal + tip;

alert ("the meal is $" + meal);

alert ("the tip is $" + tip);

alert ("Total bill: $" + total);

</script>

</body>

</html>

GoodAdd demonstrates

eval function