Web Technology · Unit 4 · 9 hrs
Client Side Scripting with JavaScript
Exam-focused notes for Client Side Scripting with JavaScript (Web Technology, CSC329): what the TU syllabus asks and how it has actually been tested, with 16 solved past questions from this unit.
What this unit covers
- Structure of JavaScript Program
- Variables and Data Types
- Statements: Expression, Keyword, Block
- Operators
- Flow Controls
- Looping
- Functions
- Popup Boxes: Alert, Confirm, Prompt
- Objects and properties
- Constructors
- Arrays
- Built-in Objects: Window, String, Number, Boolean, Date, Math, RegExp, Form, DOM
- User Defined Objects
- Event Handling and Form Validation
- Error Handling
- Handling Cookies
- jQuery Syntax
- jQuery Selectors
- Events and Effects
- Introduction to JSON
jQuery Selectors
What are jQuery selectors? Explain jQuery callback and chaining effects with appropriate jQuery scripts.[10]
--- jQuery selectors allow us to select and manipulate HTML elements. They are used to "find" (or select) HTML elements based on their name, id, class, attributes, and more. All selectors in jQuery start with the dollar sign and parentheses: $() Selector De...
Full solved answer →How jQuery id selector can be used to select specific element? Write an example with jQuery that will hide a paragraph on clicking a button. [5]
The jQuery id selector uses the id attribute of an HTML tag to find and select a specific element. Since the id of an element is unique within a page, the id selector is used to select one unique element. Syntax: - The (hash) character is written followed b...
Full solved answer →Popup Boxes
Write an HTML script with proper JavaScript that will take an input from prompt box and display the input as output using the alert box. [5]
- Prompt box is used to fetch/take value from the user. - Syntax: prompt("message", "default value"); - Alert box is used to display a message to the browser. - Syntax: alert("message"); The task is to combine both: take input using prompt() and display tha...
Full solved answer →Built-in Objects
What is the use of alert box? Write a JavaScript program to show the use of RegExp object. [5]
An alert box is a built-in JavaScript dialog box used to display a message or information to the user. It shows a popup window with a message and an OK button. The user must click OK to proceed. Uses of Alert Box: - To display important information or warni...
Full solved answer →How HTML elements are accessed using getElementById and getElementByTagName, illustrate using HTML script. [5]
JavaScript provides built-in DOM (Document Object Model) methods to access and manipulate HTML elements: Method Description ------ getElementById("id") Accesses a single element by its unique id attribute getElementsByTagName("tag") Accesses a collection of...
Full solved answer →Event Handling and Form Validation
Create an HTML file containing form with textbox, select and radio button. Now write a javascript function for validating the form elements. Validate textbox for required, select field should have some value selected and radio button should be checked.[10]
--- - The <form tag uses the onsubmit event handler to call validateForm(). - Returning false from the function prevents form submission if validation fails. - Checks that the textbox is not empty (required field). - The default option has value="", so if n...
Full solved answer →Write HTML script to create HTML form as below and perform form validation using JavaScript. The validation should be as; the username should be of length at least 4 and is required. The password should start with a character and end with # and is required. The country and gender should be checked.[10]
Create an HTML form with: - Username: required, minimum length 4 - Password: required, must start with a character (a-z/A-Z) and end with - Country: must be selected (dropdown) - Gender: must be selected (radio button) --- --- Field Validation Rule --------...
Full solved answer →Create an HTML file containing form elements textbox for username, password field and a checkbox for hobbies. Now write javascript function for the form validation. You should validate for username to be empty, password should be of length at least 5, and the check box should be checked.[10]
--- Element Type Purpose --------- <input type="text" Text box Accepts username input <input type="password" Password field Accepts password (masked) <input type="checkbox" Checkbox Allows hobby selection onsubmit="return validate()" Event handler Calls val...
Full solved answer →Create an HTML signup form with fields Name, Email, Password, and Age. Validate the form using JavaScript. Write functions for validating each of the elements. All of the fields should not be empty. The Email address should be a valid email, the password should be of length at least 6 and should start with the alphabet and end with a digit. The age should be between 8 and 60.[10]
--- - The <form tag's onsubmit="return validateForm()" calls validateForm() every time the user clicks Sign Up. If validateForm() returns false, the browser cancels the submission and the error messages stay visible next to each field. - Each field has its ...
Full solved answer →Arrays
How can you define array in javascript? Create an array Fruit with its elements 'apple', 'banana', 'mango', 'grape' and print the array. [5]
As per the notes, an array is a special variable which can hold more than one value at a time. We can access the values of an array by referring to an index number, and the index of an array starts with 0. Arrays are special types of objects in JavaScript. ...
Full solved answer →Events and Effects
What is chaining in jQuery? Write a script to illustrate concept of chaining using slideUp and slideDown method. [5]
Chaining allows us to run multiple jQuery commands, one after another, on the same element(s) in a single statement. To chain an action, we simply append the action to the previous action using the dot (.) operator. This makes the code shorter, cleaner, and...
Full solved answer →Describe the jQuery Animate() method. Write an html script to create a div with id 'mydiv'. The position of the div should be set to absolute. Now show the use of animate method to the div element to right by 300px. [5]
The jQuery animate() method is used to create custom animations on HTML elements by gradually changing CSS properties from one value to another. Syntax: Parameters: - {parameters} - Specifies the CSS properties to be animated (required) - speed - Optional. ...
Full solved answer →How jQuery animate can be used to create custom animation? Write syntax with sample script. [5]
With jQuery, the animate() method is used to create custom animations by gradually changing CSS properties of an element over a specified duration. It allows developers to animate numeric CSS properties such as width, height, opacity, left, top, margin, pad...
Full solved answer →Introduction to JSON
Discuss about different JSON data types. [5]
JSON (JavaScript Object Notation) supports the following six data types for values: --- A string is a sequence of characters written in double quotes. --- A number can be an integer or a floating-point value. It is written without quotes. --- A JSON object ...
Full solved answer →What is the use of JSON? How can you parse a JSON, illustrate with an example. [5]
JSON (JavaScript Object Notation) is a lightweight, text-based data interchange format used to store and exchange data between a server and a web application. - Used to exchange data between a client and a server in web applications. - Used to store structu...
Full solved answer →Objects and properties
How can you create objects in Javascript? Create a HTML page containing a division with image and its description in paragraph. Write a javascript function to change the value of description in the paragraph during onmouseover and mouseout event on the image.[10]
An object in JavaScript is a collection of key-value pairs (properties and methods).: "Objects are similar to variables but objects can contain many value of different types. The values are written as name:value pairs." --- The simplest and most common meth...
Full solved answer →Make Unit 4 stick
Practice CSC329 with flashcards & quizzes