Lesson 2: Working with Variables and Data in JavaScript · Lesson 2: Working with Variables and...
Transcript of Lesson 2: Working with Variables and Data in JavaScript · Lesson 2: Working with Variables and...
![Page 1: Lesson 2: Working with Variables and Data in JavaScript · Lesson 2: Working with Variables and Data in JavaScript. Objectives •Use attributes and methods to communicate with users,](https://reader030.fdocuments.us/reader030/viewer/2022040612/5edc824cad6a402d66673282/html5/thumbnails/1.jpg)
Lesson 2:Working with Variables
and Data in JavaScript
![Page 2: Lesson 2: Working with Variables and Data in JavaScript · Lesson 2: Working with Variables and Data in JavaScript. Objectives •Use attributes and methods to communicate with users,](https://reader030.fdocuments.us/reader030/viewer/2022040612/5edc824cad6a402d66673282/html5/thumbnails/2.jpg)
Objectives
• Use attributes and methods to communicate with users, including the type attribute, and the alert(), prompt() and confirm() methods
• Define variables
• Use data types, including null and undefined
• Obtain user input and store it in variables
• Report variable text to the client window
• Distinguish between concatenation and addition
• Use expressions
• Use operators, including string concatenation ( += ), strict comparison ( === , !==) and mathematical precedence
• Implement inline scripting
• Implement simple event handlers, including onload() and onunload()
• Define keywords and reserved words
![Page 3: Lesson 2: Working with Variables and Data in JavaScript · Lesson 2: Working with Variables and Data in JavaScript. Objectives •Use attributes and methods to communicate with users,](https://reader030.fdocuments.us/reader030/viewer/2022040612/5edc824cad6a402d66673282/html5/thumbnails/3.jpg)
Using JavaScriptto Communicate with the User
• Giving the user a message: The alert() method
• Using semicolons in JavaScript
• Getting data from the user: The prompt() method
• Concatenation
• Requesting confirmation: The confirm() method
• Writing X/HTML dynamically: The document.write()method
![Page 4: Lesson 2: Working with Variables and Data in JavaScript · Lesson 2: Working with Variables and Data in JavaScript. Objectives •Use attributes and methods to communicate with users,](https://reader030.fdocuments.us/reader030/viewer/2022040612/5edc824cad6a402d66673282/html5/thumbnails/4.jpg)
Using Data More Than Once: Variables
• What is a variable?
• Variable data types
• Literals
• Naming variables• Case-sensitivity in JavaScript
• Declaring variables
• Concatenating variables
• Working with variables
![Page 5: Lesson 2: Working with Variables and Data in JavaScript · Lesson 2: Working with Variables and Data in JavaScript. Objectives •Use attributes and methods to communicate with users,](https://reader030.fdocuments.us/reader030/viewer/2022040612/5edc824cad6a402d66673282/html5/thumbnails/5.jpg)
JavaScript Expressions
• Assignment
• Arithmetic
• String
• Logical
• Comparison
• Conditional
![Page 6: Lesson 2: Working with Variables and Data in JavaScript · Lesson 2: Working with Variables and Data in JavaScript. Objectives •Use attributes and methods to communicate with users,](https://reader030.fdocuments.us/reader030/viewer/2022040612/5edc824cad6a402d66673282/html5/thumbnails/6.jpg)
Operators
• The + operator
• The = and == operators
• The === and !== operators
• The ++ and -- operators
• Mathematical precedence
![Page 7: Lesson 2: Working with Variables and Data in JavaScript · Lesson 2: Working with Variables and Data in JavaScript. Objectives •Use attributes and methods to communicate with users,](https://reader030.fdocuments.us/reader030/viewer/2022040612/5edc824cad6a402d66673282/html5/thumbnails/7.jpg)
Inline Scripting, Simple User Events, and Basic Event Handlers
• Inline scripting • Placing JavaScript code within an X/HTML tag, rather
than between the file's <body> </body> tags
• The onunload event handler
• The onload event handler
![Page 8: Lesson 2: Working with Variables and Data in JavaScript · Lesson 2: Working with Variables and Data in JavaScript. Objectives •Use attributes and methods to communicate with users,](https://reader030.fdocuments.us/reader030/viewer/2022040612/5edc824cad6a402d66673282/html5/thumbnails/8.jpg)
Keywords and Reserved Words
• JavaScript keywords
• JavaScript reserved words
![Page 9: Lesson 2: Working with Variables and Data in JavaScript · Lesson 2: Working with Variables and Data in JavaScript. Objectives •Use attributes and methods to communicate with users,](https://reader030.fdocuments.us/reader030/viewer/2022040612/5edc824cad6a402d66673282/html5/thumbnails/9.jpg)
Summary
Use attributes and methods to communicate with users, including the typeattribute, and the alert(), prompt() and confirm() methods
Define variables
Use data types, including null and undefined
Obtain user input and store it in variables
Report variable text to the client window
Distinguish between concatenation and addition
Use expressions
Use operators, including string concatenation ( += ), strict comparison ( === , !==) and mathematical precedence
Implement inline scripting
Implement simple event handlers, including onload() and onunload()
Define keywords and reserved words
![Page 10: Lesson 2: Working with Variables and Data in JavaScript · Lesson 2: Working with Variables and Data in JavaScript. Objectives •Use attributes and methods to communicate with users,](https://reader030.fdocuments.us/reader030/viewer/2022040612/5edc824cad6a402d66673282/html5/thumbnails/10.jpg)
Lesson 2 Quiz
1. Which method is used to request and capture data from a user?
a. The prompt() method
b. The confirm() method
c. The alert() method
d. The open() method
![Page 11: Lesson 2: Working with Variables and Data in JavaScript · Lesson 2: Working with Variables and Data in JavaScript. Objectives •Use attributes and methods to communicate with users,](https://reader030.fdocuments.us/reader030/viewer/2022040612/5edc824cad6a402d66673282/html5/thumbnails/11.jpg)
Lesson 2 Quiz
1. Which method is used to request and capture data from a user?
a. The prompt() method
b. The confirm() method
c. The alert() method
d. The open() method
![Page 12: Lesson 2: Working with Variables and Data in JavaScript · Lesson 2: Working with Variables and Data in JavaScript. Objectives •Use attributes and methods to communicate with users,](https://reader030.fdocuments.us/reader030/viewer/2022040612/5edc824cad6a402d66673282/html5/thumbnails/12.jpg)
Lesson 2 Quiz
2. In JavaScript, which of the following items allows you to store user-entered or developer-defined data and use it more than once?
a. Keyword
b. Variable
c. Operator
d. Concatenation
![Page 13: Lesson 2: Working with Variables and Data in JavaScript · Lesson 2: Working with Variables and Data in JavaScript. Objectives •Use attributes and methods to communicate with users,](https://reader030.fdocuments.us/reader030/viewer/2022040612/5edc824cad6a402d66673282/html5/thumbnails/13.jpg)
Lesson 2 Quiz
2. In JavaScript, which of the following items allows you to store user-entered or developer-defined data and use it more than once?
a. Keyword
b. Variable
c. Operator
d. Concatenation
![Page 14: Lesson 2: Working with Variables and Data in JavaScript · Lesson 2: Working with Variables and Data in JavaScript. Objectives •Use attributes and methods to communicate with users,](https://reader030.fdocuments.us/reader030/viewer/2022040612/5edc824cad6a402d66673282/html5/thumbnails/14.jpg)
Lesson 2 Quiz
3. Which JavaScript variable data type can represent a series of alphanumeric
characters?
a. Object
b. String
c. Number
d. Boolean
![Page 15: Lesson 2: Working with Variables and Data in JavaScript · Lesson 2: Working with Variables and Data in JavaScript. Objectives •Use attributes and methods to communicate with users,](https://reader030.fdocuments.us/reader030/viewer/2022040612/5edc824cad6a402d66673282/html5/thumbnails/15.jpg)
Lesson 2 Quiz
3. Which JavaScript variable data type can represent a series of alphanumeric
characters?
a. Object
b. String
c. Number
d. Boolean
![Page 16: Lesson 2: Working with Variables and Data in JavaScript · Lesson 2: Working with Variables and Data in JavaScript. Objectives •Use attributes and methods to communicate with users,](https://reader030.fdocuments.us/reader030/viewer/2022040612/5edc824cad6a402d66673282/html5/thumbnails/16.jpg)
Lesson 2 Quiz
4. Which JavaScript operator indicates assignment?
a. =
b. ==
c. !
d. =>
![Page 17: Lesson 2: Working with Variables and Data in JavaScript · Lesson 2: Working with Variables and Data in JavaScript. Objectives •Use attributes and methods to communicate with users,](https://reader030.fdocuments.us/reader030/viewer/2022040612/5edc824cad6a402d66673282/html5/thumbnails/17.jpg)
Lesson 2 Quiz
4. Which JavaScript operator indicates assignment?
a. =
b. ==
c. !
d. =>
![Page 18: Lesson 2: Working with Variables and Data in JavaScript · Lesson 2: Working with Variables and Data in JavaScript. Objectives •Use attributes and methods to communicate with users,](https://reader030.fdocuments.us/reader030/viewer/2022040612/5edc824cad6a402d66673282/html5/thumbnails/18.jpg)
Lesson 2 Quiz
5. Which inline-scripted code will implement a simple event that takes place when
the user first loads the Web page?
a. <body onunload="alert('Hello!');">
b. <script type="text/javascript">alert("Hello!");</script>
c. <body onload="alert('Hello!');">
d. <script type="text/javascript">onload="alert('Hello!')";</script>
![Page 19: Lesson 2: Working with Variables and Data in JavaScript · Lesson 2: Working with Variables and Data in JavaScript. Objectives •Use attributes and methods to communicate with users,](https://reader030.fdocuments.us/reader030/viewer/2022040612/5edc824cad6a402d66673282/html5/thumbnails/19.jpg)
Lesson 2 Quiz
5. Which inline-scripted code will implement a simple event that takes place when
the user first loads the Web page?
a. <body onunload="alert('Hello!');">
b. <script type="text/javascript">alert("Hello!");</script>
c. <body onload="alert('Hello!');">
d. <script type="text/javascript">onload="alert('Hello!')";</script>