Embed Size (px)
Citation preview
JavaScriptJavaScript ProgrammingProgramming
Unit #1: Introduction
What is Programming?What is Programming?
What is JavaScript?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 What is JavaScript used for?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
JavaJava vs.vs. JavaScriptJavaScript
Are they the same? Are they the same? ….. ….. NO!NO!
JavaJava and JavaScriptJavaScript 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
ContentContent
CSS (Cascading
Style Sheets)
PresentationPresentation
JavaScript
BehaviorBehavior
JavaScript works with HTML & CSS (Cascading Style Sheets)
Content is separated from Presentation & Behavior
JavaScript Unit #1JavaScript Unit #1Objectives:o Examine how you can put code inside an
HTML documento Use dialog boxes to interact with the usero Learn how computers store data in
variableso Learn how to get data from the usero Perform basic operations on data
Hello World! Hello World! applicationapplication
<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 Why didn’t this text this text show up?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!”);alert (“Hello, World!”);Message pops up in its own box
Dialog Box
alert (“Hello, World!”); semicolonsemicolon
(end of the alert statement)(end of the alert statement)
most lines require the semicolon at the end
Using VariablesUsing 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
VariablesVariables
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 Using the varvar StatementStatement When you create a new variable you
need to give it a new name (label)
var greeting; greeting = "Hi there, Class!";
Name I give Name I give
the variablethe variable
Guidelines for Naming Guidelines for Naming VariablesVariables Make names descriptive Be CAREFUL with case
USERNAME / userName / usernameUSERNAME / userName / username Don’t use spaces or punctuation
X R V NO NO NO!!! Keep names short
greeting taxrate
Assigning a Value to a Assigning a Value to a VariableVariablegreeting = “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 Using the Contents of VariableVariablealert (greeting);
The user will not see the term greetingThe user sees: “Hi there, Class!”which is the content of the greeting
variable
Hello, Class! Hello, Class! applicationapplication
<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! applicationHello User! applicationThe computer asks the user their name and then uses that info in another statement
Hello User! applicationHello 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 SummarySyntax 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 valuealert(msg) Send the string msg to the user alert(“Hi there!”);
in a dialog boxvarName = prompt Send a dialog box with the string userName = (question) question and a text box prompt (“What
isthen 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 #1Exercise #11. 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 GameThe 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 StringsConcatenating Strings Combine two or more text strings
You concatenate strings by using the
+ sign
alert ( "Hello, welcome " + fname + "!!");
Joining Variables and Joining Variables and LiteralsLiteralsgreeting = “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><html><head><title>Hello User</title></head><body><h1>Hello, User</h1><script><script>
var fname;var fname;fname = prompt("What is your FIRST NAME?");fname = prompt("What is your FIRST NAME?");alert("Hello, welcome " + fname + "!!");alert("Hello, welcome " + fname + "!!");
var lname;var lname;var greeting;var greeting;lname = prompt("What is your LAST NAME?");lname = prompt("What is your LAST NAME?");greeting = "Hello, welcome " + lname + "!!";greeting = "Hello, welcome " + lname + "!!";alert (greeting);alert (greeting);
var username;var username;var greeting;var greeting;username = prompt("What is your FIRST and LAST NAME?");username = prompt("What is your FIRST and LAST NAME?");greeting = "Hello, welcome " + username + "!!";greeting = "Hello, welcome " + username + "!!";alert (greeting);alert (greeting);
</script></script></body></body></html></html>
javaex01.htmljavaex01.html
The Name GameThe Name GameCreate 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 scriptfinish this script
Working with NumbersWorking with NumbersCreating the Creating the
Adder Adder
ApplicationApplicationo Take the cost of a mealo Add a 15% tipo Calculate the total bill
<html><head><title>Adder</title></head><html><head><title>Adder</title></head><body><body><h1>The Adder</h1><h1>The Adder</h1>
<script><script>
var meal = 22.50;var meal = 22.50;var tip = meal * .15;var tip = meal * .15;var total = meal + tip;var total = meal + tip;
alert ("the meal is $" + meal);alert ("the meal is $" + meal);alert ("the tip is $" + tip);alert ("the tip is $" + tip);alert ("Total bill: $" + total);alert ("Total bill: $" + total);
</script></script></body></body></html></html>
<html><html><head><head><title>BadAdd</title><title>BadAdd</title></head></head><body><body><h1>The BadAdd</h1><h1>The BadAdd</h1><script><script>
//BadAdd Demonstrates a potential pitfall//BadAdd Demonstrates a potential pitfall
var meal;var meal;//get the cost of the meal from the user//get the cost of the meal from the usermeal = prompt("How much was the meal?");meal = prompt("How much was the meal?");var tip = meal * .15;var tip = meal * .15;var total = meal + tip;var total = meal + tip;alert ("the meal is $" + meal);alert ("the meal is $" + meal);alert ("the tip is $" + tip);alert ("the tip is $" + tip);alert ("Total bill: $" + total);alert ("Total bill: $" + total);
</script></script></body></body></html></html>
BadAdd Demonstrates BadAdd Demonstrates a potential pitfalla potential pitfall
<html><html><head><head><title>GoodAdd</title><title>GoodAdd</title></head></head><body><body><h1>The GoodAdd</h1><h1>The GoodAdd</h1><script><script>//GoodAdd demonstrates eval function//GoodAdd demonstrates eval functionvar meal;var meal;//get the cost of the meal from the user//get the cost of the meal from the usermeal = prompt("How much was the meal?");meal = prompt("How much was the meal?");//convert the value to a number//convert the value to a numbermeal = eval(meal);meal = eval(meal);var tip = meal * .15;var tip = meal * .15;var total = meal + tip;var total = meal + tip;alert ("the meal is $" + meal);alert ("the meal is $" + meal);alert ("the tip is $" + tip);alert ("the tip is $" + tip);alert ("Total bill: $" + total);alert ("Total bill: $" + total);</script></script></body></body></html></html>
GoodAdd demonstrates GoodAdd demonstrates eval functioneval function
