COURSE 5: INTRODUCTION TO HTML, CSS, & JAVASCRIPT

Module 3: JavaScript Programming for Web Applications

IBM AI DEVELOPER PROFESSIONAL CERTIFICATE

Complete Coursera Study Guide

Enroll in Coursera IBM AI Developer Professional Certificate

Last updated:

August 2, 2024

TABLE OF CONTENT

Introduction
Practice Quiz
Graded Quiz
Conclusion

INTRODUCTION – JavaScript Programming for Web Applications

With a website or Cloud App already equipped with structure and content from HTML, and a consistent style provided by CSS, you may have a limited amount of interactivity for users. However, to truly enhance the user experience and create a real wow factor, JavaScript becomes indispensable. JavaScript allows you to make your web pages dynamic and engaging by incorporating features such as interactive forms, picture slideshows, and sophisticated menu systems. These dynamic elements not only improve usability but also make the website more appealing and functional, significantly elevating the overall user experience.

Learning Objectives

Describe the basic syntax of JavaScript.
Explain how to identify common DOM objects.
Describe how to control the flow of a JavaScript application with control statements.
Explain how to work with variables in JavaScript.
Demonstrate how to create a custom object.
Outline the use of functions and prototypes in JavaScript.
Explain the use of client-side JavaScript with HTML.
Describe how JavaScript integrates with the document object model (DOM).
List the common APIs used in JavaScript Applications.
Explain how to modify the inline style and attributes of an object.

PRACTICE QUIZ

1. True or False: 10car is a valid variable name in JavaScript.

True
False (CORRECT)

Correct: Variable names in JavaScript must begin with a letter, underscore (_), or dollar sign ($). They cannot begin with a number.

2. Which of the following statement is the correct way to define a function with no parameters in JavaScript?

function = myFunction() { }
function myFunction() { } (CORRECT)
function myFunction { }
function = new function(myfunction)

Correct: This is the proper syntax to define functions in JavaScript. All parameters must be listed inside the parentheses (), and the code must be written within the curly brackets {}

3. Which of the following statements is the correct way to include a script in an HTML?

<script name = “/source/script.js”> </script>
<include script = “/source/script.js”> </script>
<script src = “/source/script.js”> </script> (CORRECT)
<script ref= “/source/script.js”> </script>

Correct: This is the correct way as it enables one to include a script directly inside the HTML document.

4. How would you display a confirmation dialog box in a window?

window.alert(confirmation, “message”)
window.confirm(“message”) (CORRECT)
window.alert(“message”)
window.prompt(“message”)

Correct: The window.confirm() method takes one argument (the message to be displayed) and creates a confirmation dialog box with OK/Cancel buttons

5. Select all the following statements about errors which are true.

To create a new custom “InputError”, the correct code would be: throw new Error(“InputError”, “The input provided is invalid”)
Error instance objects contain one property which contains information about the error
RangeError is created when a numeric value or parameter is outside a valid range (CORRECT)
JavaScript has 6 core types of errors (CORRECT)

Correct: A RangeError is only created when values are outside a valid range

Correct: The 6 core types are: RangeError, TypeError, URIError, EvalError, ReferenceError, SyntaxError

GRADED QUIZ

1. In the following declaration, what is the type of the variable ‘pi’?

var pi = “3.14”;
number
string (CORRECT)
float
char

Correct: Variables in JavaScript assumes the data type from of a variable when it’s assigned, meaning in this case `pi` is the same type as “3.14”. Since “3.14” contains multiple characters in quotation marks, it is a string. Refer to the “JavaScript Language – Overview and Syntax” and “JavaScript Variables and Control Statements” videos for more information.

2. How do you define an array called array1 in JavaScript?

var array1 = [1,2,3] (CORRECT)
var array1 = new Array((1,2,3))
var array1 = new Array[1,2,3]
var array1 = (1,2,3)

Correct: Array literals are created by declaring array elements within square brackets, as shown above. Refer to the “JavaScript Language – Overview and Syntax” video for more information.

3. What does the following statement do?

var ndate = new Date() ;
Returns an error
Assigns the current Greenwich Mean Time to ndate
Assigns an empty string with the properties of dates to ndateAssigns the current local time to ndate (CORRECT)

Correct: Providing no arguments to the Date constructor returns the current local time based on your system settings. Refer to the “JavaScript Language – Overview and Syntax” video for more information.

4. Which DOM function returns a node object matching a div with an id value “example_id”?

document.getElementById(“example_id”) (CORRECT)
element.getNodeById(“example_id”)
div.getValueOf(“example_id”)
document.getElementById(div, “example_id”)

Correct: To get an object given a specified id, the document.getElementById() method should be used. This looks for a specific id, and does not differentiate between the different tags. Refer to the “JavaScript DOM Objects” video for more information.

5. How are numbers converted to strings?

(123).string
string(123)
(123).toString() (CORRECT)
toString(123)

Correct: Converting a value to a String requires calling the “toString” method on the object (in this case numbers) and providing no arguments. Refer to the “JavaScript Language – Overview and Syntax” video for more information.

6. What is the value of ‘total’ after the following statement is executed?

var total = 10 + 1 +” 3”;
This results in an error
“113” (CORRECT)
14
“1013”

Correct: JavaScript will execute this statement in order. 10 and 1 are both numbers and will be added as such (10 + 1 = 11). Then, this new value (11) will be concatenated with the string “3”, resulting in “113”. Refer to the “JavaScript – Browser Console” reading for more information.

7. What would the alert be, when the following code is executed?var a = new String(“Hello”);

var b = “Hello”;

if (a ===b){

alert(“Same”);

}else{

alert(“Different”);

}

Same
Different (CORRECT)
It would not give any alert as it is an error
None of the above

Correct: The “===” operation checks if the operand on the left is of equal value and equal type to the operand on right. Since Strings declared by the String wrapper object are different than the primitive string data type, `a` and `b` are different types, despite them being the same values. Refer to the “JavaScript Language – Overview and Syntax” video and the “JavaScript – Browser Console” reading for more information.

8. Which of the following is the proper way to create a `for` loop?

for (i < maxVal) { … }
loop (for i = minVal; i < maxVal; i++) { … }
for (var i = minVal; i < maxVal; i++) { … } (CORRECT)
for (var i = minVal; i++; i < maxVal) { … }

Correct: A for loop requires 3 expressions within the parentheses: an initial expression, a conditional expression, and an increment expression. The expressions must appear in the order listed, and must be separated by a semi-colon (;), as shown in this example. Refer to the “JavaScript Variables and Control Statements” video for more information.

9. Select all of the following which are properways to add a `color` property to a custom `Car` object.

Car.color = “Red”
Car.prototype(Color, “Red”)
Car.prototype.color = “Red” (CORRECT)
Modify the code of the Car object directly to add a `color` parameter in the constructor (CORRECT)

Correct: All objects have a corresponding prototype, which make it easy to add properties and methods to all current and future instances of that object. Above is the correct usage of adding a property to a prototype. Refer to the “JavaScript Functions and Prototypes” video for more information.

Correct: Modifying the object code directly is one way to add methods and properties to it. However, there are easier ways to do so. Refer to the “JavaScript Functions and Prototypes” video for more information.

10. Which of the following is not an event binder in JavaScript?

onmouseover
onhover (CORRECT)
onload
onclick

Correct: Onhover is not a valid event in JavaScript. A different event binder is used for when a user hovers over an element. Refer to the “Client-Side Javascript with HTML” video for more information.

CONCLUSION – JavaScript Programming for Web Applications

In conclusion, while HTML and CSS provide the essential structure and style for a website or Cloud App, integrating JavaScript is crucial for enhancing user experience and adding dynamic functionality. By utilizing JavaScript to create interactive forms, picture slideshows, and sophisticated menu systems, developers can transform static pages into engaging, user-friendly interfaces. This combination of technologies ensures a well-rounded and compelling web presence, ultimately delivering a superior experience for users.

Previous Module

Weekly Breakdown

Quiztudy Top Courses

Popular in Coursera

Liking our content? Then, don’t forget to ad us to your BOOKMARKS so you can find us easily!