Module 3: JavaScript Programming for Web Applications

Contents hide

1 INTRODUCTION – JavaScript Programming for Web Applications

4 CONCLUSION – JavaScript Programming for Web Applications

Spread the love

INTRODUCTION – JavaScript Programming for Web Applications

JavaScript, the add-on to the above, breathes life into websites. Not only does it provide user interactivity to what was limited to a few words or clicks, but it also requires the user to go through the motions such as submitting queries and seeing results without an ever-constant page refresh. With JavaScript, dynamic pages transform the static HTML forms into scrolling picture shows, complex menu systems, and interactive forms, enhancing the overall user-friendliness of the site while adding some glam factor.

Learning Objectives:

Basic Syntax: JavaScript- Understand the basic structure of JavaScript including how to write statements, use variables, and understand data types. Common DOM Object Identification: Know how to use the Document Object Model (DOM)-for Your Function: Control statements that:
Demonstrate how to use JavaScript to handle run-time decisions: With if/else statements and loops or switch cases managing the rules and flow of your code.
Explain how to perform operations using variables in JavaScript: Declare and use variables to store data based on different data types like strings, numbers, and booleans.
Demonstrate how to create a custom object: You will learn how to define and work with your custom objects in JavaScript that give you more effective data structuring in your applications.
Functions and prototypes in JavaScript: Understand how to write reusable functions and the issues surrounding prototypes that let you add properties or methods to objects.
Using Client-Side JavaScript with HTML: Understand how JavaScript works on the client side, interacting with HTML to change everything.

PRACTICE QUIZ

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

True
False (CORRECT)

Correct: An identifier or variable name in JavaScript must begin with a letter, an underscore (_), or a dollar sign ($). It must not start 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: Functions in JavaScript are defined with all their parameters enclosed within the parentheses () and the body contained 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: You can write a script directly on the HTML document, and that’s the right way to do it.

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: It has one parameter which is the message that is to be shown and creates a prompt with OK and 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 occurs when a value is not within its valid range or is inappropriate for the operation being performed.

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: An example of this is when the variable pi which contains 3.14 will automatically convert itself into a string. In this case, the variable has been assigned a value of 3.14 enclosed within quotation marks which signifies it as a string. You can read more about this in the videos named “JavaScript Language – Overview and Syntax” and “JavaScript Variables and Control Statements”.

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 in JavaScript are made by placing the elements in square brackets, as shown before. The video “JavaScript Language – Overview and Syntax” provides further elaboration.

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: With no arguments specified in the Date constructor, the current local time returns according to the system settings. For more details on what is to be followed, please refer to the “JavaScript Language – Overview and Syntax” video.

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: Get the object against a particular id should be accessed using the method, document.getElementById(). Using this method, an element can be searched for the specified id, and the tag differences are not factored in. Go to the video “JavaScript DOM Objects” for more information.

5. How are numbers converted to strings?

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

Correct: To transform a value of an object (here, a number) as a string, you call the toString() method without an argument. –See the “JavaScript Language Overview and Syntax” video.

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 executes statements sequentially. In this case, both 10 and 1 are numbers, so they will be added up (10 + 1 = 11). Finally, the number is concatenated with the string “3”, resulting in “113”. Check the reading “JavaScript – Browser Console” for further 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 reason === operator differs from == is that it unlike == checks not only the value of two operands but also the type. The String wrapper object declares a type that is considered different from primitive string, and so a and b are two different types that equal because they maintain the same value. For reference, see the video titled “JavaScript Language – Overview and Syntax” and reading titled “JavaScript – Browser Console”.

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: According to the example, it is to be noted that three expressions are needed in an for loop’s parentheses: initialization expressions, conditional expressions, and increment expressions. These expressions need to appear in the order mentioned above and should be separated by semicolons (;). For more information, refer to the “JavaScript Variables and Control Statements” video.

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: Every object in JavaScript possesses a respective prototype, making it very easy to insert properties and methods to both existing and future instances of an object. Adding a property to a prototype, as shown above. For more information, see “Functions and Prototypes in JavaScript” video.

Correct: One means of adding methods and properties is to modify directly the object code, but there are far easier and more efficient means to accomplish that. To learn more, see the video “JavaScript Functions and Prototypes”.

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

onmouseover
onhover (CORRECT)
onload
onclick

Correct: onhover does not stand as a JavaScript event. Rather, an alternative event binder: onmouseover or onmouseout, would be able to detect the presence of an element hovered over or exited by the user. Check up the video “Client-Side JavaScript with HTML” for more information.

CONCLUSION – JavaScript Programming for Web Applications

From the above, it can be concluded that HTML and CSS would take a step ahead in the static structure and styling of a website or cloud application and that integrating JavaScript would be critical to making that site interactive and dynamic. By using JavaScript in making forms, image slideshows, and complex menu systems dynamic, developers can indeed convert static pages into vibrant, user-friendly interfaces. Well-rounded technologies such as this one will ensure a complete and engaging web presence for providing a great user experience in the end.