EN

Home Explore BCA121_Web Designing(Draft 2)

BCA121_Web Designing(Draft 2)

Published by Teamlease Edtech Ltd (Amita Chitroda), 2020-12-15 07:49:12

Description: BCA121_Web Designing(Draft 2)

Search

Read the Text Version

Pages:

document.write(\"(~b) => \"); result =(~b); document.write(result); document.write(linebreak); document.write(\"(a << b) => \"); result =(a << b); document.write(result); document.write(linebreak); document.write(\"(a >> b) => \"); result =(a >> b); document.write(result); document.write(linebreak); //--> </script> <p>Set the variables to different values and different operators and then try...</p> </body> </html> (a & b) => 2 (a | b) => 3 (a ^ b) => 1 (~b) => -4 .201 CU IDOL SELF LEARNING MATERIAL (SLM)

(a << b) => 16 (a >> b) => 0 Set the variables to different values and different operators and then try... Assignment Operators JavaScript supports the following assignment operators – Table 10.6 Assignment Operators Sr.No. Operator & Description 1 = (Simple Assignment ) Assigns values from the right side operand to the left side operand Ex: C = A + B will assign the value of A + B into C 2 += (Add and Assignment) It adds the right operand to the left operand and assigns the result to the left operand. Ex: C += A is equivalent to C = C + A 3 −= (Subtract and Assignment) It subtracts the right operand from the left operand and assigns the result to the left operand. Ex: C -= A is equivalent to C = C - A 4 *= (Multiply and Assignment) It multiplies the right operand with the left operand and assigns the result to the left operand. .202 CU IDOL SELF LEARNING MATERIAL (SLM)

Ex: C *= A is equivalent to C = C * A 5 /= (Divide and Assignment) It divides the left operand with the right operand and assigns the result to the left operand. Ex: C /= A is equivalent to C = C / A 6 %= (Modules and Assignment) It takes modulus using two operands and assigns the result to the left operand. Ex: C %= A is equivalent to C = C % A Note − Same logic applies to Bitwise operators so they will become like <<=, >>=, >>=, &=, |= and ^=. Example Try the following code to implement assignment operator in JavaScript. <html> <body> <scripttype=\"text/javascript\">  </script> <p>Set the variables to different values and different operators and then try...</p> </body> </html> Output Value of a => (a = b) => 10 Value of a => (a += b) => 20 Value of a => (a -= b) => 10 Value of a => (a *= b) => 100 Value of a => (a /= b) => 10 Value of a => (a %= b) => 0 Set the variables to different values and different operators and then try... Miscellaneous Operator We will discuss two operators here that are quite useful in JavaScript: the conditional operator (? :) and the typeof operator. Conditional Operator (? :) The conditional operator first evaluates an expression for a true or false value and then executes one of the two given statements depending upon the result of the evaluation. Table 10.7 Conditional Operator (? :) .205 CU IDOL SELF LEARNING MATERIAL (SLM)

Sr.No. Operator and Description 1 ? : (Conditional ) If Condition is true? Then value X : Otherwise value Y Example Try the following code to understand how the Conditional Operator works in JavaScript. <html> <body> <scripttype=\"text/javascript\">  </script> <p>Set the variables to different values and different operators and then try...</p> </body> </html> Output ((a > b) ? 100 : 200) => 200 ((a < b) ? 100 : 200) => 100 Set the variables to different values and different operators and then try... Typeof Operator The typeof operator is a unary operator that is placed before its single operand, which can be of any type. Its value is a string indicating the data type of theoperand. The typeof operator evaluates to \"number\", \"string\", or \"boolean\" if its operand is a number, string, or boolean value and returns true or false based on the evaluation. Here is a list of the return values for the typeof Operator. Table 10.8 typeof Operator Type String Returned by typeof Number \"number\" String \"string\" Boolean \"boolean\" Object \"object\" .207 CU IDOL SELF LEARNING MATERIAL (SLM)

Function \"function\" Undefined \"undefined\" Null \"object\" Example The following code shows how to implement typeof operator. <html> <body> <scripttype=\"text/javascript\">  </script> <p>Set the variables to different values and different operators and then try...</p> </body> </html> Output Result => B is String Result => A is Numeric Set the variables to different values and different operators and then try... Conditional checking- There are mainly three types of conditional statements in JavaScript.  If statement  If…Else statement  If…Else If…Else statement If statement Syntax: if (condition) { lines of code to be executed if condition is true } You can use If statement if you want to check only a specific condition. .209 CU IDOL SELF LEARNING MATERIAL (SLM)

If…Else statement Syntax: if (condition) { lines of code to be executed if the condition is true } else { lines of code to be executed if the condition is false } You can use If….Else statement if you have to check two conditions and execute a different set of codes. If…Else If…Else statement Syntax: if (condition1) { lines of code to be executed if condition1 is true } else if(condition2) { lines of code to be executed if condition2 is true } else { .210 CU IDOL SELF LEARNING MATERIAL (SLM)

lines of code to be executed if condition1 is false and condition2 is false } You can use If….Else If….Else statement if you want to check more than two conditions. Functions and dialog boxes-  A JavaScript function is a block of code designed to perform a particular task.  A JavaScript function is executed when \"something\" invokes it (calls it)xample function myFunction(p1, p2) { return p1 * p2; // The function returns the product of p1 and p2 } JavaScript Function Syntax A JavaScript function is defined with the function keyword, followed by a name, followed by parentheses ().Function names can contain letters, digits, underscores, and dollar signs (same rules as variables). The parentheses may include parameter names separated by commas: (parameter1, parameter2, ...) The code to be executed, by the function, is placed inside curly brackets: {} function name(parameter1, parameter2, parameter3) { // code to be executed }  Function parameters are listed inside the parentheses () in the function definition.  Function arguments are the values received by the function when it is invoked.  Inside the function, the arguments (the parameters) behave as local variables.  A Function is much the same as a Procedure or a Subroutine, in other programming languages. Function Invocation .211 CU IDOL SELF LEARNING MATERIAL (SLM)

 The code inside the function will execute when \"something\" invokes (calls) the function:  When an event occurs (when a user clicks a button)  When it is invoked (called) from JavaScript code  Automatically (self-invoked) dialog boxes- JavaScript supports three important types of dialog boxes. These dialog boxes can be used to raise and alert, or to get confirmation on any input or to have a kind of input from the users. Here we will discuss each dialog box one by one. Alert Dialog Box An alert dialog box is mostly used to give a warning message to the users. For example, if one input field requires entering some text but the user does not provide any input, then as a part of validation, you can use an alert box to give a warning message. Nonetheless, an alert box can still be used for friendlier messages. Alert box gives only one button \"OK\" to select and proceed. Example <html> <head> <scripttype=\"text/javascript\">  </script> </head> .212 CU IDOL SELF LEARNING MATERIAL (SLM)

<body> <p>Click the following button to see the result: </p> <form> <inputtype=\"button\"value=\"Click Me\"onclick=\"Warn();\"/> </form> </body> </html> Output Confirmation Dialog Box A confirmation dialog box is mostly used to take user's consent on any option. It displays a dialog box with two buttons: OK and Cancel. If the user clicks on the OK button, the window method confirm() will return true. If the user clicks on the Cancel button, then confirm () returns false. You can use a confirmation dialog box as follows. Example <html> <head> <scripttype=\"text/javascript\">  </script> </head> <body> <p>Click the following button to see the result: </p> <form> <inputtype=\"button\"value=\"Click Me\"onclick=\"getConfirmation();\"/> </form> </body> </html> Output 10.3 PROMPT DIALOG BOX .214 CU IDOL SELF LEARNING MATERIAL (SLM)

The prompt dialog box is very useful when you want to pop-up a text box to get user input. Thus, it enables you to interact with the user. The user needs to fill in the field and then click OK.This dialog box is displayed using a method called prompt() which takes two parameters: (i) a label which you want to display in the text box and (ii) a default string to display in the text box. This dialog box has two buttons: OK and Cancel. If the user clicks the OK button, the window method prompt() will return the entered value from the text box. If the user clicks the Cancel button, the window method prompt () returns null. Example The following example shows how to use a prompt dialog box −tml> <head> <scripttype=\"text/javascript\">  </script> </head> <body> <p>Click the following button to see the result: </p> <form> <inputtype=\"button\"value=\"Click Me\"onclick=\"getValue();\"/> </form> </body> .215 CU IDOL SELF LEARNING MATERIAL (SLM)

</html> Output 10.4 SUMMARY  JavaScript is a scripting or programming language that allows you to implement complex features on web pages — every time a web page does more than just sit there and display static information for you to look at — displaying timely content updates, interactive maps, animated 2D/3D graphics, scrolling video jukeboxes,  JavaScript (\"JS\" for short) is a full-fledged dynamic programming language that can add interactivity to a website. It was invented by Brendan Eich (co-founder of the Mozilla project), the Mozilla Foundation, and the Mozilla Corporation.  JavaScript is versatile and beginner-friendly. With more experience, you'll be able to create games, animated 2D and 3D graphics, comprehensive database-driven apps, and much more!  JavaScript itself is relatively compact, yet very flexible. Developers have written a variety of tools on top of the core JavaScript language, unlocking a vast amount of functionality with minimum effort. These include:  Browser Application Programming Interfaces (APIs) built into web browsers, providing functionality such as dynamically creating HTML and setting CSS styles; collecting and manipulating a video stream from a user's webcam, or generating 3D graphics and audio samples.  Third-party APIs that allow developers to incorporate functionality in sites from other content providers, such as Twitter or Facebook.  Third-party frameworks and libraries that you can apply to HTML to accelerate the work of building sites and applications.  Statements are used in JavaScript to control its program flow. Unlike properties, methods, and events, which are fundamentally tied to the object that owns them, statements are designed to work independently of any JavaScript object. That means you can use a statement whether you're working with the document object, the window object, the history object, or some other object. As a language, JavaScript supports relatively few .216 CU IDOL SELF LEARNING MATERIAL (SLM)

statements -- just enough to get by. It does, however, offer the bare minimum of statements that are needed to construct a fully-functional application.  The while statement will execute a block of code while a condition is true..  The do...while statement will execute a block of code once, and then it will repeat the loop while a condition is true 10.5 KEY WORDS/ABBREVIATIONS  Variables: Programming languages use variables to store values. Variables may have global or local function scope. Variable names are case sensitive and must start with a letter, underscore (_), or a dollar sign ($).  Postfix increment: variable1 is decremented (i.e. variable1 = variable1 - 1). When evaluated, the old value of variable1 is returned.  Prefix increment: variable2 is decremented (i.e. variable2 = variable2 - 1) and its new value is returned.  Replace: Returns a string with the first match substring replaced with a new substring.  Comments: A comment is generally used within code to explain how something works or to write necessary information about a section. Comments are very useful to make code more readable. 10.6 LEARNINGACTIVITY 1. WAP to Demonstrate Dialog Boxes in java script. __________________________________________________________________________ __________________________________________________________________________ 2. WAP to demonstrate logical operator java script. __________________________________________________________________________ __________________________________________________________________________ 10.7 UNIT END QUESTIONS (MCQ ANDDESCRIPTIVE) A. Descriptive Types Questions 1. Design a Web page that displays welcome message whenever the page isloaded and an Exit message whenever the page is unloaded. .217 CU IDOL SELF LEARNING MATERIAL (SLM)

2. Write and explain example will generate a simple alert box based on clicking either a link or a form button. 3. Write a JavaScript code block using arrays and generate the current date in words this should include the day the month and the year. 4. Create JavaScript code that converts the entered text to upper case. 5. Write JavaScript code to validate username and Password. Username and Password are stored in variables. B. Multiple Choice Questions 1. The word “document” mainly refers to ______________ (a) Dynamic Information (b) Static Information (c) Both Dynamic and Static Information (d) Temporary information 2. Which object is the main entry point to all client-side JavaScript features and APIs? (a) Standard (b) Location (c) Window (d) Position 3. Which identifier is used to represent a web browser window or frame? (a) frames (b) window (c) location (d) frame 4. Which property in the Window object is used to refer to a Location object? (a) position (b) area (c) window (d) location 5. Which Window object method is used to display a message in a dialog box? (a) alert () (b) prompt() (c) message() (d) console.log .218 CU IDOL SELF LEARNING MATERIAL (SLM)

Answers 1. (b), 2. (c), 3. (b), 4. (d), 5. (a) 10.8 REFRENCES  A Smarter Way to Learn JavaScript: The new tech-assisted approach that requires half the effort ,Mark Myers Latest Edition – 1st Edition Publisher – CreateSpace Independent Publishing Platform  Eloquent JavaScript: A Modern Introduction to ProgrammingMarjin Haverbeke Latest Edition – 3rd Edition ,No Starch Press publisher  JavaScript & JQuery: Interactive Front-End Web DevelopmentJon Duckett Latest Edition – 1st Edition Publisher – Wiley  http://egyankosh.ac.in/bitstream/123456789/11766/1/Unit-4.pdf  https://www.w3schools.com/js/DEFAULT.asp  https://www.javascript.com/  https://developer.mozilla.org/en-US/docs/Web/JavaScript  The Rise of JavaScript Publisher: IEEE Massimo DiPierro  JavaScript and Interactive Web Pages in Radiology Gurney, Jud W. M.D  Understanding JavaScript Fundamentals: Your Cheat Sheet Rachel Costello December 30, 2019 .219 CU IDOL SELF LEARNING MATERIAL (SLM)

UNIT 11 JAVA SCRIPT 2 Structure 11.0 LearningObjectives 11.1 Introduction 11.2 JavaScript DOM 11.3 Creating forms 11.4 Creating forms 11.5 Summary 11.6 KeyWords/Abbreviations 11.7 LearningActivity 11.8 Unit End Questions (MCQ andDescriptive) 11.9 References 11.0 LEARNINGOBJECTIVES After studying this unit, you will be able to:  Discuss JavaScript DOM  Discuss creating forms  Explain introduction to JQuery 11.1 INTRODUCTION JavaScript (\"JS\" for short) is a full-fledged dynamic programming language that can add interactivity to a website. It was invented by Brendan Eich (co-founder of the Mozilla project), the Mozilla Foundation, and the Mozilla Corporation. JavaScript is versatile and beginner-friendly. With more experience, you'll be able to create games, animated 2D and 3D graphics, comprehensive database-driven apps, and much more! JavaScript itself is relatively compact, yet very flexible. .220 CU IDOL SELF LEARNING MATERIAL (SLM)

11.2 JAVASCRIPT DOM Every web page resides inside a browser window which can be considered as an object. A Document object represents the HTML document that is displayed in that window. The Document object has various properties that refer to other objects which allow access to and modification of document content. The way document content is accessed and modified is called the Document Object Model, or DOM. The Objects are organized in a hierarchy. This hierarchical structure applies to the organization of objects in a Web document.  Window object − Top of the hierarchy. It is the outmost element of the object hierarchy.  Document object − Each HTML document that gets loaded into a window becomes a document object. The document contains the contents of the page.  Form object − everything enclosed in the <form>...</form> tags sets the form object.  Form control elements − the form object contains all the elements defined for that object such as text fields, buttons, radio buttons, and checkboxes. Here is a simple hierarchy of a few important objects − Fig 11.1 Hierarchy of a objects There are several DOMs in existence. The following sections explain each of these DOMs in detail and describe how you can use them to access and modify document content.  The Legacy DOM − This is the model which was introduced in early versions of .221 CU IDOL SELF LEARNING MATERIAL (SLM)

JavaScript language. It is well supported by all browsers, but allows access only to certain key portions of documents, such as forms, form elements, and images.  The W3C DOM − This document object model allows access and modification of all document content and is standardized by the World Wide Web Consortium (W3C). This model is supported by almost all the modern browsers.  The IE4 DOM − This document object model was introduced in Version 4 of Microsoft's Internet Explorer browser. IE 5 and later versions include support for most basic W3C DOM features. DOM compatibility If you want to write a script with the flexibility to use either W3C DOM or IE 4 DOM depending on their availability, then you can use a capability-testing approach that first checks for the existence of a method or property to determine whether the browser has the capability you desire. For example − if (document.getElementById) { // If the W3C method exists, use it } else if (document.all) { // If the all [] array exists, use it } else { // Otherwise use the legacy DOM } 11.3 CREATING FORMS The HTML Form object serves a number of purposes. It acts a container for all of the GUI objects that make up a form. It also acts as the mechanism for grouping together the information provided by the user and sending it back to the server for processing. The <form> takes a number of attributes of which the following are the most commonly used:  Name - the name of the form, which will be used when referencing objects within the form using JavaScript code.  Method - the method by which data is sent to the server. This will either be \"GET\" .222 CU IDOL SELF LEARNING MATERIAL (SLM)

or \"POST\" depending on the server-side configuration.  Action - the URL of the CGI script to which the data entered by the user will be sent. It is also possible to use mailto: to have the data sent to an email address.  on submit - an optional function to call, or inline script to execute before the form data is submitted to the server. This can be useful for validating user input. The following is an example of a Form object named register Form which submits the user data to a cgi script called register.cgi located in the /cgi-bin directory on the server which hosts the web site. The transfer is configured to use the GET method: <form name=\"registerForm\" method=\"GET\" action=\"/cgi- bin/register.cgi\"> Accessing Objects in a Form As we mentioned in the previous section, the Form object is really just a container which contains other objects (such as text fields and buttons). Later in the chapter we will learn how to create those objects inside the Form object. First, however, it is useful to explore how to access the objects in a Form. One way to access the elements in a Form is to use the Form object's elements property. This is an array containing all the objects in a Form (see JavaScript Arrays for details on arrays). We can, therefore, access any element in the array by using the index (note that the objects in the array are in the order in which they are specified in the Form). Suppose we have a text object which is the first object inside a Form called myForm: <form action=\"\" name=\"myForm\"> <input type=\"TEXT\" name=\"phoneNumber\" id=\"phoneNumber\" value=\"\" /> </form> We can access this object as follows: document.myForm.elements[0]; We can then extend this to get the current value entered into the text object: textValue = document.myForm.elements[0].value; A much easier approach is to access the object using the name that was assigned to it at creation. This is achieved using the getElementById () method. Assuming in our first .223 CU IDOL SELF LEARNING MATERIAL (SLM)

example the Text object was assigned a name of phone Number we could assign the object to a variable as follows: phone = document.getElementById(\"phoneNumber\"); We can then subsequently use the phone variable to access the current text value entered into the text field object: document.write ( \"The text is \" + phone.value ); 11.4 INTRODUCTION TO JQUERY jQuery is a fast and concise JavaScript Library created by John Resig in 2006 with a nice motto: Write less, do more. jQuery simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is a JavaScript toolkit designed to simplify various tasks by writing less code. Here is the list of important core features supported by jQuery −  DOM manipulation − The jQuery made it easy to select DOM elements, negotiate them and modifying their content by using cross-browser open source selector engine called Sizzle.  Event handling − The jQuery offers an elegant way to capture a wide variety of events, such as a user clicking on a link, without the need to clutter the HTML code itself with event handlers.  AJAX Support − The jQuery helps you a lot to develop a responsive and feature rich site using AJAX technology.  Animations − The jQuery comes with plenty of built-in animation effects which you can use in your websites.  Lightweight − The jQuery is very lightweight library - about 19KB in size (Minified and gzipped).  Cross Browser Support − The jQuery has cross-browser support, and works well in IE 6.0+, FF 2.0+, Safari 3.0+, Chrome and Opera 9.0+  Latest Technology − the jQuery supports CSS3 selectors and basic XPath syntax. How to use jQuery? There are two ways to use jQuery.  Local Installation − You can download jQuery library on your local machine and .224 CU IDOL SELF LEARNING MATERIAL (SLM)

include it in your HTML code.  CDN Based Version − You can include jQuery library into your HTML code directly from Content Delivery Network (CDN). Example Now you can include jquery library in your HTML file as follows − <html> <head> <title>The jQuery Example</title> <scripttype=\"text/javascript\"src=\"/jquery/jquery- 2.1.3.min.js\"> </script> <scripttype=\"text/javascript\"> $(document).ready(function(){ document. Write(\"Hello, World!\"); }); </script> </head> <body> <h1>Hello</h1> </body> </html> This will produce following result − .225 CU IDOL SELF LEARNING MATERIAL (SLM)

CDN Based Version You can include jQuery library into your HTML code directly from Content Delivery Network (CDN). Google and Microsoft provides content deliver for the latest version. Example Now let us rewrite above example using jQuery library from Google CDN. <html> <head> <title>The jQuery Example</title> <scripttype=\"text/javascript\" src=\"https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery .min.js\"> </script> <scripttype=\"text/javascript\"> $(document).ready(function(){ document.write(\"Hello, World!\"); }); </script> </head> <body> <h1>Hello</h1> .226 CU IDOL SELF LEARNING MATERIAL (SLM)

</body> </html> This will produce following result – How to call a jQuery Library Functions? As almost everything, we do when using jQuery reads or manipulates the document object model (DOM), we need to make sure that we start adding events etc. as soon as the DOM is ready.If you want an event to work on your page, you should call it inside the $(document).ready() function. Everything inside it will load as soon as the DOM is loaded and before the page contents are loaded. To do this, we register a ready event for the document as follows − $(document).ready(function() { // do stuff when DOM is ready }); To call upon any jQuery library function, use HTML script tags as shown below − <html> <head> <title>The jQuery Example</title> <scripttype=\"text/javascript\" src=\"https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery .min.js\"> </script> .227 CU IDOL SELF LEARNING MATERIAL (SLM)

<scripttype=\"text/javascript\"language=\"javascript\"> $(document).ready(function(){ $(\"div\").click(function(){alert(\"Hello, world!\");}); }); </script> </head> <body> <divid=\"mydiv\"> Click on this to see a dialogue box. </div> </body> </html> This will produce following result – How to Use Custom Scripts? It is better to write our custom code in the custom JavaScript file : custom.js, as follows − /* Filename: custom.js */ $(document).ready(function(){ $(\"div\").click(function(){ .228 CU IDOL SELF LEARNING MATERIAL (SLM)

alert(\"Hello, world!\"); }); }); Now we can include custom.js file in our HTML file as follows − <html> <head> <title>The jQuery Example</title> <scripttype=\"text/javascript\" src=\"https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery .min.js\"> </script> <scripttype=\"text/javascript\"src=\"/jquery/custom.js\"> </script> </head> <Body> <divid=\"mydiv\"> Click on this to see a dialogue box. </div> </body> </html> This will produce following result – .229 CU IDOL SELF LEARNING MATERIAL (SLM)

Using Multiple Libraries You can use multiple libraries all together without conflicting each other’s. For example, you can use jQuery and MooTool java script libraries together. You can check jQuery no Conflict Method for more detail. 11.5SUMMARY  JavaScript (JS) is a lightweight, interpreted, or just-in-time compiled programming language with first-class functions. While it is most well-known as the scripting language for Web pages, many non-browser environments also use it, such as Node.js, Apache CouchDB and Adobe Acrobat. JavaScript is a prototype-based, multi-paradigm, single-threaded, dynamic language, supporting object-oriented, imperative, and declarative (e.g. functional programming) styles. Read more about JavaScript.  When a web page is loaded, the browser creates a Document Object Model of the page.  JavaScript can change all the HTML elements in the page  JavaScript can change all the HTML attributes in the page  JavaScript can change all the CSS styles in the page  The HTML DOM can be accessed with JavaScript (and with other programming languages).  In the DOM, all HTML elements are defined as objects.  The programming interface is the properties and methods of each object.  A property is a value that you can get or set (like changing the content of an HTML element). .230 CU IDOL SELF LEARNING MATERIAL (SLM)

 A method is an action you can do (like add or deleting an HTML element).  The document object represents your web page.  If you want to access any element in an HTML page, you always start with accessing the document object.  jQuery is a lightweight, \"write less, do more\", JavaScript library.  The purpose of jQuery is to make it much easier to use JavaScript on your website.  jQuery takes a lot of common tasks that require many lines of JavaScript code to accomplish, and wraps them into methods that you can call with a single line of code.  jQuery also simplifies a lot of the complicated things from JavaScript, like AJAX calls and DOM manipulation 11.6KEY WORDS/ABBREVIATIONS  Document: This is an object name that refers specifically to the HTML document that contains the JavaScript  Errors: An error message box is displayed when something in the script's format or verbiage disallows it to run. The two type of errors you'll encounter are called Run- time and Syntax errors.  Run-Time Error: A Run-Time error is an error that is produced when incorrect terms are used in the JavaScript code. An incorrect command or out of sequence format will throw this type of error.  Syntax Error: A Syntax error is produced when a script's format or shape is incorrect, a misspelling is found, or text is not recognized. Syntax errors are also thrown when you have opened a command, but then do not close it.  Instance: The instance of a command is contained in parentheses immediately following the command. The Instance contains information about what an object is to do or how a method is to be carried out. 11.7LEARNINGACTIVITY 1. WAP to Demonstrate Cookies in JavaScript. .231 CU IDOL SELF LEARNING MATERIAL (SLM)

__________________________________________________________________________ __________________________________________________________________________ 2. WAP to Demonstrate forms in JavaScript. __________________________________________________________________________ _________________________________________________________________________ 11.8UNIT END QUESTIONS (MCQ ANDDESCRIPTIVE) A. Descriptive Types Questions 1. Write a program to print a page using jQuery. 2. Implement program to blink text using jQuery. 3. Write a program to underline all the words of a text using jQuery. 4. Write a JavaScript program to get the width and height of the window (any time the window is resized). 5. Write a JavaScript program to highlight the bold words of the following paragraph, on mouse over a certain link. B.Multiple Choice Questions 1. Which of the following is not the feature of jQuery? (a) Efficient query method for finding the set of document elements (b) Expressive syntax for referring to elements in the document (c) Useful set of methods for manipulating selected elements (d) Powerful functional programming techniques is not used for operating on sets of elements as a group. 2. which of the following is a single global function defined in the jQuery library? (a) jQuery () (b) $() (c) Query analysis() (d) global () 3. Which of the following is a factory function? .232 CU IDOL SELF LEARNING MATERIAL (SLM)

(a) $() (b) jQuery() (c) Query analysis() (d) on click () 4. Which is the method that operates on the return value of $()? (a) Show () (b) css() (c) click() (d) done () 5. Which of the following is a heavily overloaded function? (a) jQuery () (b) $() (c) script() (d) Both jQuery () and $ Answers 1. (d), 2. (a), 3. (b), 4. (b), 5. (d) 11.9REFERENCES  Learn JavaScript VISUALLY by Ivelin Demiro 1st Edition Publisher – Nai Inc.  JavaScript: The Definitive Guide David Flanagan6th EditionPublisher – O’Reilly  JavaScript for Kids: A Playful Introduction to Programming  JavaScript Allongé, the “Six” Editionby Reg “raganwald” Braithwaite– Sixth Edition Publisher – Leanpub Publisher  http://egyankosh.ac.in/bitstream/123456789/11766/1/Unit-4.pdf .233 CU IDOL SELF LEARNING MATERIAL (SLM)

 https://www.w3schools.com/jquery/jquery_intro.asp  https://www.tutorialspoint.com/jquery/jquery-overview.html  https://www.codecademy.com/learn/learn-jquery  https://www.tutorialspoint.com/javascript/javascript_html_dom.htm  https://www.guru99.com/how-to-use-dom-and-events-in-javascript.html  Which one is better - JavaScript or jQuery by Md. Zeeshan Ahmed  Performance Comparison and Evaluation of jQuery with AngularJS Navnath N. Chavare , A. V. Nadargi  Present Day Web-Development Using Reactjs Archana Bhalla, Shivangi Garg, Priyangi Singh3 .234 CU IDOL SELF LEARNING MATERIAL (SLM)

Pages:

Teamlease Edtech Ltd (Amita Chitroda)

BCA121_Web Designing(Draft 2)

Like this book? You can publish your book online for free in a few minutes!

Create your own flipbook

TOP SEARCH

business design fashion music health life sports home marketing children