1. WEB DESIGN AND PROGRAMMING Introduction to Javascript

2. WEB DESIGN AND PROGRAMMING Outline 1. Introduction 2. Simple Program: Printing a Line of Text in a Web Page 3. Data types 4. Obtaining User Input with prompt Dialogs 5. Memory Concepts 6. Arithmetic 7. Decision Making: Equality and Relational Operators 8. Web Resources

3. WEB DESIGN AND PROGRAMMING Objectives In this lesson, you will learn: – To be able to write simple JavaScript programs. – To be able to use input and output statements. – To understand basic memory concepts. – To be able to use arithmetic operators. – To understand the precedence of arithmetic operators. – To be able to write decision-making statements. – To be able to use relational and equality operators.

4. WEB DESIGN AND PROGRAMMING 1 Introduction JavaScript scripting language – Enhances functionality and appearance – Client-side scripting Makes pages more dynamic and interactive – Foundation for complex server-side scripting – Allows us to develop webpages that act as programs – Gives us more control than normal HTML/CSS

5. WEB DESIGN AND PROGRAMMING 1 Introduction JavaScript is the backbone of Web 2.0 Web 2.0 is more than just visual style The second generation of internet – Communities and information sharing – User centred design to facilitate creativity – A lot more control given to users Examples include wikis, blogs and social networking sites Often highly customisable with a widget based approach.

6. WEB DESIGN AND PROGRAMMING 2 Simple Program: Printing a Line of Text in a Web Page Inline scripting – Written in the of a document – tag Indicate that the text is part of a script type attribute – Specifies the type of file and the scripting language use writeln method – Write a line in the document Escape character ( \ )‏ – Indicates “special” character is used in the string alert method – Dialog box

7. WEB DESIGN AND PROGRAMMING welcome.html (1 of 1)‏

8. WEB DESIGN AND PROGRAMMING welcome2.html (1 of 1)‏

9. WEB DESIGN AND PROGRAMMING welcome3.html 1 of 1

10. WEB DESIGN AND PROGRAMMING welcome4.html 1 of 1

11. WEB DESIGN AND PROGRAMMING

12. 2 Simple Program: Printing a Line of Text in a Web Page

13. WEB DESIGN AND PROGRAMMING Data types Numbers - refers to numerical values Strings - refers to one or more characters of text Booleans – True or false values Undefined or null - variables or object properties that are either undefined or do not exist

14. WEB DESIGN AND PROGRAMMING Numbers As the name implies, a number type refers to numerical values. Numbers can be divided into two groups: floating-point — are fractional numbers such as 2.45, -3.58, and.97 Integers — are whole numbers such as 245, - 480, and 3.

15. WEB DESIGN AND PROGRAMMING Strings string is enclosed inside single or double quotes. Examples of strings: – “University of Sydney", 'HTML', 'JavaScript', and “2007", are all examples of strings.

16. WEB DESIGN AND PROGRAMMING Boolean A Boolean value is a truth value, either 'true' or 'false', often coded 1 and 0, respectively.truth value Boolean logic allows your program to make decisions. A Boolean logic statement consists of a condition that evaluates to either true or false.

17. WEB DESIGN AND PROGRAMMING Undefined and Null Values The undefined type refers to those variables or object properties that are either undefined or do not exist. When a variable, for example, is declared without assigning a value to it, it is of undefined type. (eg var x;)‏ The null type indicates an empty value. When a variable is assigned the value null, its type becomes null. – var x = null;

18. WEB DESIGN AND PROGRAMMING 3.1 Dynamic Welcome Page A script can adapt the content based on input from the user or other variables

19. WEB DESIGN AND PROGRAMMING welcome5.html (1 of 2)‏

20. WEB DESIGN AND PROGRAMMING welcome5.html (2 of 2)‏

21. WEB DESIGN AND PROGRAMMING 3.1 Dynamic Welcome Page Fig. 7.7Prompt dialog displayed by the window object’s prompt method. This is the prompt to the user. This is the default value that appears when the dialog opens. This is the text field in which the user types the value. When the user clicks OK, the value typed by the user is returned to the program as a string.

22. WEB DESIGN AND PROGRAMMING 3.2 Adding Integers Prompt user for two integers and calculate the sum (Fig. 7.8)‏ NaN (not a number)‏ parseInt – Converts its string argument to an integer

23. WEB DESIGN AND PROGRAMMING Addition.html (1 of 2)‏

24. WEB DESIGN AND PROGRAMMING Addition.html (2 of 2)‏

25. WEB DESIGN AND PROGRAMMING

26. 4 Memory Concepts Variable names correspond to locations in the computer’s memory Every variable has a name, a type, and a value Read value from a memory location – nondestructive

27. WEB DESIGN AND PROGRAMMING 4 Memory Concepts number145 Fig. 7.9Memory location showing the name and value of variable number1.

28. WEB DESIGN AND PROGRAMMING 4 Memory Concepts number145 number272 Fig. 7.10Memory locations after values for variables number1 and number2 have been input.

29. WEB DESIGN AND PROGRAMMING 4 Memory Concepts number145 number272 sum117 Fig. 7.11Memory locations after calculating the sum of number1 and number2.

30. WEB DESIGN AND PROGRAMMING 5 Arithmetic Many scripts perform arithmetic calculations – Expressions in JavaScript must be written in straight- line form

31. WEB DESIGN AND PROGRAMMING 5 Arithmetic

32. WEB DESIGN AND PROGRAMMING 5 Arithmetic y = 2 * 5 * 5 + 3 * 5 + 7; 2 * 5 is 10 (Leftmost multiplication)‏ y = 10 * 5 + 3 * 5 + 7; 10 * 5 is 50 (Leftmost multiplication)‏ y = 50 + 3 * 5 + 7; 3 * 5 is 15 (Multiplication before addition)‏ y = 50 + 15 + 7; 50 + 15 is 65 (Leftmost addition)‏ y = 65 + 7; 65 + 7 is 72 (Last addition)‏ y = 72; (Last operation—place 72 into y )‏ Step 1. Step 2. Step 5. Step 3. Step 4. Step 6. Fig. 7.14Order in which a second-degree polynomial is evaluated.

33. WEB DESIGN AND PROGRAMMING 6 Decision Making: Equality and Relational Operators Decision based on the truth or falsity of a condition – Equality operators – Relational operators

34. WEB DESIGN AND PROGRAMMING 6 Decision Making: Equality and Relational Operators  

35. WEB DESIGN AND PROGRAMMING welcome6.html (1 of 3)‏

36. WEB DESIGN AND PROGRAMMING welcome6.html (2 of 3)‏

37. WEB DESIGN AND PROGRAMMING welcome6.html (3 of 3)‏

38. WEB DESIGN AND PROGRAMMING 6 Decision Making: Equality and Relational Operators

39. WEB DESIGN AND PROGRAMMING Recommended Reading W3schools - http://www.w3schools.com/js/default.asp http://www.w3schools.com/js/default.asp ScriptMaster - http://www.scriptingmaster.com/javascript/scripti ng-javascript.asp HTML Goodies, JavaScript Basics http://www.htmlgoodies.com/primers/jsp/article.p hp/3586411l http://www.htmlgoodies.com/primers/jsp/article.p hp/3586411l