1. JavaScript Programming Unit #1: Introduction

2. What is Programming?

3. 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.

4. What is JavaScript used for? 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

5. Javavs.JavaScript Java vs. JavaScript Are they the same? ….. NO! JavaJavaScript 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++.

6. HTMLContent CSS (Cascading Style Sheets)Presentation JavaScriptBehavior JavaScript works with HTML & CSS (Cascading Style Sheets) Content is separated from Presentation & Behavior

8. 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

9. Hello World! application Hello World This is normal HTML //hello world is the classic first program alert ("Hello, World!"); 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.

10. alert (“Hello, World!”); Message pops up in its own box Dialog Box alert (“Hello, World!”); semicolon semicolon (end of the alert statement) (end of the alert statement) most lines require the semicolon at the end

11. 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 calledVariables 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

12. 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

13. 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

14. 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!

15. 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

16. Hello, Class! application Hello Class Hello, Class! var greeting; greeting = "Hi there, Class!"; alert (greeting);

17. Hello User! application The computer asks the user their name and then uses that info in another statement

18. Hello User! application Concatenation Concatenation The combination of two or more text strings var username; username = prompt("What is your name?"); alert("Hello, welcome " + username + "!!");

19. Syntax Summary STATEMENT DESCRIPTION EXAMPLE var varNameCreate a variable called varNamevar userName; var varName = valueCreate a variable called varNamevar userName = “”; with a starting value of value alert(msg)Send the string msg to the useralert(“Hi there!”); in a dialog box varName = promptSend a dialog box with the stringuserName = (question)question and a text boxprompt (“What is then return the value to varNameyour name”); eval(string)Evaluate the string expression. If number = eval(“3”); it’s a number, return the number

20. 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

21. The Name Game The Name Game //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?"); The Name Game

22. Concatenating Strings  Combine two or more text strings  You concatenate strings by using the + sign alert ( "Hello, welcome " + fname + "!!");

23. 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);

24. Hello User Hello, User Hello User Hello, User <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

25. The Name Game Create your own version of the name game The Name Game The Name Game var firstName = ""; var lastName = ""; var numLetters = 0; finish this script

26. Working with Numbers Creating the AdderApplication o Take the cost of a meal o Add a 15% tip o Calculate the total bill <html><head><title>Adder</title></head><body> The Adder The Adder <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>

27. <html><head><title>BadAdd</title></head><body> The BadAdd The BadAdd <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

28. <html><head><title>GoodAdd</title></head><body> The GoodAdd The GoodAdd <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