INTERESTING THINGS: - …



JAVASCRIPT-javascript reads the script whenever you have a postback or a intial get request. Its part of the html.-string line breaking with the slash sign (\)-this keyword can reffer to the function,html element, or objectHISTORY OF JAVASCRIPTECMA-262 is the official name of the JavaScript standard.JavaScript was invented by Brendan Eich. It appeared in Netscape (a no longer existing browser) in 1995, and has been adopted by ECMA (a standard association) since 1997.-before we start this is the main html code for starting building webistes:WHAT JAVASCRIPT CAN ACTUALLY DO:Write into html outputReact to eventsChange html contentChanging html imagesChanging html stylesValidate inputIT CAN ALSO GET DATA AND MODIFY:Browser windowBrowser screenCurrent location (urls)Change browser historyModify coockies…<!DOCTYPE html> <html><body></body></html>About javascript in shortJavaScript statements are "commands" to the browser.The purpose of the statements is to tell the browser what to do.-javascript is casesensitive.-javascript ignores white spaces.-javascipt comments are the same as c# comments.-write the script inside the <head> or <body> tags ,, it doesn't matter.-one javascript operator that blowed my mind === it means that the type and the variable value must be equal to somehting , for instance: int a=5; if(a===5) evaluates to true.- for a external javascript file just write the following code:<!DOCTYPE html><html><body><script src="myScript.js"></script></body></html>INTERESTING THINGS:The Lifetime of JavaScript VariablesThe lifetime of JavaScript variables starts when they are declared.Local variables are deleted when the function is completed.Global variables are deleted when you close the page.JAVASCRIPT INSTRUCTIONS(CODE SYNTAX)Variables declaration var variable_name=value;(value can be of any type, script variables are objects…)Object declaration var object_name=new Object(); (object has methods and properties…, they are accessed same as C#)Function declaration (void) function function_name(arg/norarg){code to be executed}Function declaration (return) function function_name(arg/noarg{code return variable;}Ternary if condition variablename=(condition)?value1:value2?Switch condition switch(variable) {case _value:codeblock break;… default:}For loop syntax for array handling for(;array;){increment index manually}Try and catch syntax block try{some code} catch(err){some_code}Throw syntax trhow exceptionArray declaration var array_name=new Array(); ORvar array_name=[?“,““,““]//same as python// now populate the array,,, propertyarray_name.length, methods .indexof(?“);array functions.concat(array…) // concatenates a number of sep. Arrays..join()// joins array elements to strings.pop() // removing last element of the array.push(?variable_name“)// creates a elm. On the end of array..reverse()// reverses the elements in the array..shift()//removes the first elm. Of the array.slice(int,int)// gets the elements between the intervals.sort()// sorts an array alphabetically.sort(function(a,b){return a-b});//sorts integers to TOP..sort(function(a,b){return b-a});//srots integers to BOTTOM..splice(index,array_order,“elm.1“elm.2“); inserts elm. To arr..toString(); Converts array to string..unshift(arg,arg…arg); inserts number of elements at begining.Javascript numbersJavaScript is not a typed language. Unlike many other programming languages, it does not define different types of numbers, like integers, short, long, floating-point etc.JavaScript numbers are always stored as double precision floating point numbers, following the international IEEE 754 standard.?This format stores numbers in 64 bits, where the number (the fraction) is stored in bits 0 to 51, the exponent in bits 52 to 62, and the sign in bit 63:Number methods (operations with numbers not included here just representation)toExponential();toFixed();toPrecision();toString(select_base/empty_string)valueOf()String methods and propertys.length property.match(?string“); see if a word matches a word, if not return null.replace(?source“,“replacement“);replaces a word with another..toUpperCase()/to.LowerCase() straightforward.split(?,“)splits the string at given character..trim()removes leading and trailing white spaces.substring() gets a sub of a complete stringJavascript math operationsMath Object MethodsMethodDescriptionabs(x)Returns the absolute value of xacos(x)Returns the arccosine of x, in radiansasin(x)Returns the arcsine of x, in radianstan(x)/atan(x)Returns the arctangent of x as a numeric value between -PI/2 and PI/2 radiansatan2(y,x)Returns the arctangent of the quotient of its argumentsceil(x)Returns x, rounded upwards to the nearest integercos(x)Returns the cosine of x (x is in radians)exp(x)Returns the value of Exfloor(x)Returns x, rounded downwards to the nearest integerlog(x)Returns the natural logarithm (base E) of xmax(x,y,z,...,n)Returns the number with the highest valuemin(x,y,z,...,n)Returns the number with the lowest valuepow(x,y)Returns the value of x to the power of yrandom()Returns a random number between 0 and 1round(x)Rounds x to the nearest integersin(x)Returns the sine of x (x is in radians)sqrt(x)Returns the square root of xJavascript boolean operatorsOperatorDescriptionExample&&and(x < 10 && y > 1) is true||or(x == 5 || y == 5) is false!not!(x == y) is true-the same as in c#Javascript conditional operatorJavaScript also contains a conditional operator that assigns a value to a variable based on some condition.Syntaxvariablename=(condition)?value1:value2?ExampleIf the variable?age?is a value below 18, the value of the variable?voteable?will be "Too young", otherwise the value of?voteable?will be "Old enough":voteable = (age < 18) ? "Too young":"Old enough";Javascript DATESFirst of all create an object var date=new Date();When you create an instace of date then you can use the built in properties and methods.Dates also upon the instance have a constructor which asks for parameters usually.Methods(most common):getDate()getDay()getFullYear()getHours()getMinutes()getMonth()getSeconds()setDate(int month)setFullYear(int year,month,day)setHours(hour,min,sec,milisec)setMinutes(min,sec,millisec)setMonth(month,day)setTime(milisec)Date.toDateString()Date.toString()Date.toTimeString()Date.valueOf() // returns the primitive value of date object,,number of miliseconds since january 1.1970All the ohter methods,properties with above includedDate Object PropertiesPropertyDescriptionconstructorReturns the function that created the Date object's prototypeprototypeAllows you to add properties and methods to an objectDate Object MethodsMethodDescriptiongetDate()Returns the day of the month (from 1-31)getDay()Returns the day of the week (from 0-6)getFullYear()Returns the year (four digits)getHours()Returns the hour (from 0-23)getMilliseconds()Returns the milliseconds (from 0-999)getMinutes()Returns the minutes (from 0-59)getMonth()Returns the month (from 0-11)getSeconds()Returns the seconds (from 0-59)getTime()Returns the number of milliseconds since midnight Jan 1, 1970getTimezoneOffset()Returns the time difference between UTC time and local time, in minutesgetUTCDate()Returns the day of the month, according to universal time (from 1-31)getUTCDay()Returns the day of the week, according to universal time (from 0-6)getUTCFullYear()Returns the year, according to universal time (four digits)getUTCHours()Returns the hour, according to universal time (from 0-23)getUTCMilliseconds()Returns the milliseconds, according to universal time (from 0-999)getUTCMinutes()Returns the minutes, according to universal time (from 0-59)getUTCMonth()Returns the month, according to universal time (from 0-11)getUTCSeconds()Returns the seconds, according to universal time (from 0-59)getYear()Deprecated.?Use the?getFullYear()?method insteadparse()Parses a date string and returns the number of milliseconds since midnight of January 1, 1970setDate()Sets the day of the month of a date objectsetFullYear()Sets the year (four digits) of a date objectsetHours()Sets the hour of a date objectsetMilliseconds()Sets the milliseconds of a date objectsetMinutes()Set the minutes of a date objectsetMonth()Sets the month of a date objectsetSeconds()Sets the seconds of a date objectsetTime()Sets a date and time by adding or subtracting a specified number of milliseconds to/from midnight January 1, 1970setUTCDate()Sets the day of the month of a date object, according to universal timesetUTCFullYear()Sets the year of a date object, according to universal time (four digits)setUTCHours()Sets the hour of a date object, according to universal timesetUTCMilliseconds()Sets the milliseconds of a date object, according to universal timesetUTCMinutes()Set the minutes of a date object, according to universal timesetUTCMonth()Sets the month of a date object, according to universal timesetUTCSeconds()Set the seconds of a date object, according to universal timesetYear()Deprecated.?Use the?setFullYear()?method insteadtoDateString()Converts the date portion of a Date object into a readable stringtoGMTString()Deprecated.?Use the?toUTCString()?method insteadtoISOString()Returns the date as a string, using the ISO standardtoJSON()Returns the date as a string, formatted as a JSON datetoLocaleDateString()Returns the date portion of a Date object as a string, using locale conventionstoLocaleTimeString()Returns the time portion of a Date object as a string, using locale conventionstoLocaleString()Converts a Date object to a string, using locale conventionstoString()Converts a Date object to a stringtoTimeString()Converts the time portion of a Date object to a stringtoUTCString()Converts a Date object to a string, according to universal timeUTC()Returns the number of milliseconds in a date string since midnight of January 1, 1970, according to universal timevalueOf()Returns the primitive value of a Date objectPrototype functions (see arrays on w3c then delete this)For making new functions for strings,arrays,numbers you just have to write an appropriate syntax.For example if you want to access a new modified function which is modified from your side you have to write a piece of code.Example:<button onclick="myFunction()">Try it</button><script>Array.prototype.myUcase=function() //syntax for building function for array{for (i=0;i<this.length;i++) // this reffers to the actuall created array { this[i]=this[i].toUpperCase(); // this refferes to the array itself }}function myFunction(){var fruits = ["Banana", "Orange", "Apple", "Mango"];fruits.myUcase();var x=document.getElementById("demo");x.innerHTML=fruits;}function Funkcija(){var fruits=["bannana","apple","kiwi"];fruits.myUcase();}</script>Syntax: Array/String.prototype.name_you_want=function(){}Calling the function like this: Array/String.name_you_want();Or store it is a return function like this: Var variable=Array/String.name_you_want()JS HTML DOMTHEORY ABOUT DOMThe HTML DOM is a standard?object?model and?programming interface?for HTML. It defines:The HTML elements as?objectsThe?properties?of all HTML elementsThe?methods?to access all HTML elementsThe?events?for all HTML elementsIn other words:?The HTML DOM is a standard for how to get, change, add, or delete HTML elements.The HTML DOM DocumentIn the HTML DOM object model, the document object represents your web page.The document object is the owner of all other objects in your web page.If you want to access objects in an HTML page, you always start with accessing the document object.Below are some examples of how you can use the document object to access and manipulate HTML.The next chapters demonstrate all the methods.Finding HTML ElementsMethodDescriptiondocument.getElementById() //most common . innerHTMLFinding an element by element iddocument.getElementsByTagName()//most commonFinding elements by tag namedocument.getElementsByClassName()Finding elements by class namedocument.forms[]Finding elements by HTML element objectsChanging HTML ElementsMethodDescriptionelement.innerHTML=Changing the inner HTML of an elementelement.attribute=Changing the attribute of an HTML elementelement.setAttribute(attribute,value)Changing the attribute of an HTML elementelement.style.property=Changing the style of an HTML elementAdding and Deleting ElementsMethodDescriptiondocument.createElement()Create an HTML elementdocument.removeChild()Remove an HTML elementdocument.appendChild()Add an HTML elementdocument.replaceChild()replace an HTML elementdocument.write(text)Writing into the HTML output streamAdding Events HandlersMethodDescriptiondocument.getElementById(id).onclick=function(){code}Adding event handler code to an onclick?The eventHandler<!DOCTYPE html><html><head></head><body><p id="first">Click "Try it" to execute the displayDate() function.</p><p id="demo"></p><script>document.getElementById("first").onclick = displayDate;function displayDate() { document.getElementById("demo").innerHTML = Date();}</script></body></html>IN THE ABOVE TABLE THERE IS EVERYTHING THAT YOU NEED TO MANIPULATE WITH THE HTML ELEMENTS!!JavaScritp this keyword(this)This always reffers to the OWNER of the function we are executing. For example if you want to change the color of a window(window is considered as a object) Than you would specify the this keyword.function doSomething() { this.style.color = '#cc0000'; // will throw an error}Here in the example above no one is the owner of the function so it is assumed that the ?owner“ is the window object since it is the hightest in hierarchy.You can also assing this to a html element by doing the folowing thingelement.onclick = doSomething;alert(element.onclick)function doSomething(){this.style.color = '#cc0000';}In the code above you added a method to the onclik event wich belongs to a html element. Therefor the ?this.style.color“ syntax will change the colour of the html element. In other words this will go down in the hieararchy and will reffer to the html element.Another example of this<div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:#D94A38;width:120px;height:20px;padding:40px;">Mouse Over Me</div><script>function mOver(obj) { obj.innerHTML = "Thank You"}function mOut(obj) { obj.innerHTML = "Mouse Over Me"}JavaScript?HTML DOM EventsReacting to EventsA JavaScript can be executed when an event occurs, like when a user clicks on an HTML element.To execute code when a user clicks on an element, add JavaScript code to an HTML event attribute:onclick=JavaScriptExamples of HTML events:When a user clicks the mouseWhen a web page has loadedWhen an image has been loadedWhen the mouse moves over an elementWhen an input field is changedWhen an HTML form is submittedWhen a user strokes a keySO in other words you can add keywords(Events) inside a html tag for instance<h1 onclick=“this.innerHTML='OOPS'“>CLICK ON THIS TEST</h1>OR You can call a function inside the event keyword name in the html elementFor example:<!DOCTYPE html><html><head><script>function changetext(id) // this is the function, after call logic it is called.{id.innerHTML="Ooops!";}</script></head><body><h1 onclick="changetext(this)">Click on this text!</h1> //function called</body></html>ANOTHER GOOD EXAMPLES ON ADDING EVENTHANDLERSSyntax taken from the table above: document.getElementById(id).onclick=function(){code}Adding event handler code to an onclick?<!DOCTYPE html><html><head></head><body><p>Click the button to execute the <em>displayDate()</em> function.</p><button id="myBtn">Try it</button><script>document.getElementById("myBtn").onclick=function(){displayDate()};//self made function down belowfunction displayDate(){document.getElementById("demo").innerHTML=Date();}</script><p id="demo"></p></body></html>EXAMPLE onmouseoever<!DOCTYPE html><html><body><div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:#D94A38;width:120px;height:20px;padding:40px;">Mouse Over Me</div>//this reffers to the html object in this case div<script>function mOver(obj) {obj.innerHTML="Thank You"}function mOut(obj){obj.innerHTML="Mouse Over Me"}</script></body></html>BOM(Browser object model)The Browser Object Model (BOM)There are no official standards for the?Browser?Object?Model (BOM).Since modern browsers have implemented (almost) the same methods and properties for JavaScript interactivity, it is often referred to, as methods and properties of the BOM.The Window ObjectThe?window?object is supported by all browsers. It represent the browser's window.All global JavaScript objects, functions, and variables automatically become members of the window object.Global variables are properties of the window object.Global functions are methods of the window object.Even the document object (of the HTML DOM) is a property of the window object:window.document.getElementById("header");is the same as:document.getElementById("header");Window SizeThree different properties can be used to determine the size of the browser window (the browser viewport, NOT including toolbars and scrollbars).For Internet Explorer, Chrome, Firefox, Opera, and Safari:window.innerHeight - the inner height of the browser windowwindow.innerWidth - the inner width of the browser windowFor Internet Explorer 8, 7, 6, 5:document.documentElement.clientHeightdocument.documentElement.clientWidthordocument.body.clientHeightdocument.body.clientWidthSome other methods:window.open() - open a new windowwindow.close() - close the current windowwindow.moveTo() -move the current windowwindow.resizeTo() -resize the current windowThe window.screen object contains information about the user's screen.Window ScreenThe window.screen object contains information about the user's screen.The?window.screen?object can be written without the window prefix.Some properties:screen.availWidth - available screen widthscreen.availHeight - available screen heightColor properties:screen.pixelDepthscreen.colorDepthWindow LocationThe window.location object can be used to get the current page address (URL) and to redirect the browser to a new page.The?window.location?object can be written without the window prefix.Some examples:location.hostname returns the domain name of the web hostlocation.pathname returns the path and filename of the current pagelocation.port returns the port of the web host (80 or 443)location.protocol returns the web protocol used (http:// or https://)Window HistoryThe window.history object contains the browsers history.The?window.history?object can be written without the window prefix.To protect the privacy of the users, there are limitations to how JavaScript can access this object.Some methods:history.back() - same as clicking back in the browserhistory.forward() - same as clicking forward in the browserThe window.navigator object contains information about the visitor's browser.Window NavigatorThe window.navigator object contains information about the visitor's browserThe window.navigator object can be written without the window prefix.JavaScript?Popup BoxesWindow prefix doesn't need to be used it's built in already.alert(?string“);confirm(?string“);prompt(?string“,“string“);HTML5JavaScript?Timing EventsWith JavaScript, it is possible to execute some code at specified time-intervals. This is called timing events.It's very easy to time events in JavaScript. The two key methods that are used are:setInterval() - executes a function, over and over again, at specified time intervalssetTimeout() - executes a function, once, after waiting a specified number of millisecondsNote:?The setInterval() and setTimeout() are both methods of the HTML DOM Window object.Syntaxwindow.setInterval("javascript function",milliseconds);How to Stop the Execution?The clearInterval() method is used to stop further executions of the function specified in the setInterval() method.Syntax:window.clearInterval(intervalVariable)The setTimeout() MethodSyntax:window.setTimeout("javascript function",milliseconds);// represents the delay of a function, if you enter 3 seconds the function parameter will start in 3 seconds after a event happens.Javascript communication wit c#(use the html id)the script must be placed inside the body tag <body></body><script> function myFunction() { var variaba = document.getElementById("Label1").innerText;//gets label txt alert(variaba); //displays text in a popup window } </script><asp:Label ID="Label1" runat="server" style="z-index: 1; left: 250px; top: 165px; position: absolute; margin-top: 0px" Text="Label" ></asp:Label>J-QUERYjQuery is a JavaScript Library.jQuery greatly simplifies JavaScript programming.jQuery is easy to learn.What is jQuery?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.The jQuery library contains the following features:HTML/DOM manipulationCSS manipulationHTML event methodsEffects and animationsAJAXUtilitiesTip:?In addition, jQuery has plugins for almost any task out there.Why jQuery?There are lots of other JavaScript frameworks out there, but jQuery seems to be the most popular, and also the most extendable.Many of the biggest companies on the Web use jQuery, such as:GoogleMicrosoftIBMNetflixDownloading jQueryThere are two versions of jQuery available for downloading:Production version - this is for your live website because it has been minified and compressedDevelopment version - this is for testing and development (uncompressed and readable code)Both versions can be downloaded from?.The jQuery library is a single JavaScript file, and you reference it with the HTML <script> tag (notice that the <script> tag should be inside the <head> section):<head><script src="jquery-1.11.0.min.js"></script></head>Tip:?Place the downloaded file in the same directory as the pages where you wish to use it.Do you wonder why we do not have type="text/javascript" inside the <script> tag?This is not required in HTML5. JavaScript is the default scripting language in HTML5 and in all modern browsers!jQuery SyntaxThe jQuery syntax is tailor made for?selecting?HTML elements and performing some?action?on the element(s).Basic syntax is:?$(selector).action()A $ sign to define/access jQueryA (selector) to "query (or find)" HTML elementsA jQuery?action() to be performed on the element(s)The Document Ready EventYou might have noticed that all jQuery methods in our examples, are inside a document ready event:$(document).ready(function(){???// jQuery methods go here...});This is to prevent any jQuery code from running before the document is finished loading (is ready).It is good practice to wait for the document to be fully loaded and ready before working with it. This also allows you to have your JavaScript code before the body of your document, in the head section.Here are some examples of actions that can fail if methods are run before the document is fully loaded:Trying to hide an element that is not created yetTrying to get the size of an image that is not loaded yetSELECTORS (VERY IMPORTANT!!)The #id Selector (MOST OFTEN USAGE)The jQuery #id selector uses the id attribute of an HTML tag to find the specific element.An id should be unique within a page, so you should use the #id selector when you want to find a single, unique element.To find an element with a specific id, write a hash character, followed by the id of the HTML element:$("#test")The .class SelectorThe jQuery class selector finds elements with a specific class.To find elements with a specific class, write a period character, followed by the name of the class:$(".test")jQuery is tailor-made to respond to events in an HTML page.What are Events?All the different visitor's actions that a web page can respond to are called events.An event represents the precise moment when something happens.Examples:moving a mouse over an elementselecting a radio buttonclicking on an elementThe term?"fires"?is often used with events. Example: "The keypress event fires the moment you press a key".jQuery Syntax For Event MethodsIn jQuery, most DOM events have an equivalent jQuery method.To assign a click event to all paragraphs on a page, you can do this:$("p").click();The next step is to define what should happen when the event fires. You must pass a function to the event:$("p").click(function(){? // action goes here!!});Commonly Used jQuery Event Methods$(document).ready()The $(document).ready() method allows us to execute a function when the document is fully loaded. This event is already explained in the?jQuery Syntax?chapter.click()The click() method attaches an event handler function to an HTML element.The function is executed when the user clicks on the HTML element.The following example says: When a click event fires on a <p> element; hide the current <p> element:Example$("p").click(function(){? $(this).hide();});dblclick()The dblclick() method attaches an event handler function to an HTML element.The function is executed when the user double-clicks on the HTML element:Example$("p").dblclick(function(){? $(this).hide();});mouseenter()The mouseenter() method attaches an event handler function to an HTML element.The function is executed when the mouse pointer enters the HTML element:Example$("#p1").mouseenter(function(){? alert("You entered p1!");});mouseleave()The mouseleave() method attaches an event handler function to an HTML element.The function is executed when the mouse pointer leaves the HTML element:Example$("#p1").mouseleave(function(){? alert("Bye! You now leave p1!");});mousedown()The mousedown() method attaches an event handler function to an HTML element.The function is executed, when the left mouse button is pressed down, while the mouse is over the HTML element:Example$("#p1").mousedown(function(){? alert("Mouse down over p1!");});mouseup()The mouseup() method attaches an event handler function to an HTML element.The function is executed, when the left mouse button is released, while the mouse is over the HTML element:Example$("#p1").mouseup(function(){? alert("Mouse up over p1!");});hover()The hover() method takes two functions and is a combination of the mouseenter() and mouseleave() methods.The first function is executed when the mouse enters the HTML element, and the second function is executed when the mouse leaves the HTML element:Example$("#p1").hover(function(){? alert("You entered p1!");? },? function(){? alert("Bye! You now leave p1!");});focus()The focus() method attaches an event handler function to an HTML form field.The function is executed when the form field gets focus:Example$("input").focus(function(){? $(this).css("background-color","#cccccc");});JQUERY EFFECTSjQuery hide() and show()With jQuery, you can hide and show HTML elements with the hide() and show() methods:Example$("#hide").click(function(){? $("p").hide();});$("#show").click(function(){? $("p").show();});jQuery Fading MethodsWith jQuery you can fade an element in and out of visibility.jQuery has the following fade methods:fadeIn()fadeOut()fadeToggle()fadeTo()jQuery fadeIn() Method The jQuery fadeIn() method is used to fade in a hidden element.Syntax:$(selector).fadeIn(speed,callback);-The callback and speed parameters are optional.The optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds.The optional callback parameter is a function to be executed after the fading completes.The following example demonstrates the fadeIn() method with different parameters:Example$("button").click(function(){? $("#div1").fadeIn();? $("#div2").fadeIn("slow");? $("#div3").fadeIn(3000);});Query fadeOut() MethodThe jQuery fadeOut() method is used to fade out a visible element.Syntax:$(selector).fadeOut(speed,callback);-The callback and speed parameters are optionalThe optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds.The optional callback parameter is a function to be executed after the fading completes.The following example demonstrates the fadeOut() method with different parameters:Example$("button").click(function(){? $("#div1").fadeOut();? $("#div2").fadeOut("slow");? $("#div3").fadeOut(3000);});jQuery fadeToggle() MethodThe jQuery fadeToggle() method toggles between the fadeIn() and fadeOut() methods.If the elements are faded out, fadeToggle() will fade them in.If the elements are faded in, fadeToggle() will fade them out.Syntax:$(selector).fadeToggle(speed,callback);jQuery Sliding MethodsWith jQuery you can create a sliding effect on elements.jQuery has the following slide methods:slideDown()slideUp()slideToggle()jQuery slideDown() MethodThe jQuery slideDown() method is used to slide down an element.Syntax:$(selector).slideDown(speed,callback);The optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds.The optional callback parameter is a function to be executed after the sliding completes.The following example demonstrates the slideDown() method:Example$("#flip").click(function(){? $("#panel").slideDown();});jQuery slideUp() MethodThe jQuery slideUp() method is used to slide up an element.Syntax:$(selector).slideUp(speed,callback);The optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds.The optional callback parameter is a function to be executed after the sliding completes.The following example demonstrates the slideUp() method:Example$("#flip").click(function(){? $("#panel").slideUp();});jQuery Animations - The animate() MethodThe jQuery animate() method is used to create custom animations.Syntax:$(selector).animate({params},speed,callback);-use css coding to provide params.-see css positioning.The required params parameter defines the CSS properties to be animated.The optional speed parameter specifies the duration of the effect. It can take the following values: "slow", "fast", or milliseconds.The optional callback parameter is a function to be executed after the animation completes.jQuery animate() - Uses Queue FunctionalityBy default, jQuery comes with queue functionality for animations.-this means that you are actually storing the html into a javascirpt variable.This means that if you write multiple animate() calls after each other, jQuery creates an "internal" queue with these method calls. Then it runs the animate calls ONE by ONE.So, if you want to perform different animations after each other, we take advantage of the queue functionality:Example 1$("button").click(function(){? var div=$("div");? div.animate({height:'300px',opacity:'0.4'},"slow");? div.animate({width:'300px',opacity:'0.8'},"slow");? div.animate({height:'100px',opacity:'0.4'},"slow");? div.animate({width:'100px',opacity:'0.8'},"slow");});?Examples (javascript, jquery,ajax…)Javascript example progressbar increment.<!DOCTYPE html><html><body><p>Click the button to create a PROGRESS element with a maximum value of "100" and a current value of "22".</p><button onclick="myFunction()">Try it</button><script>var value=22;var x = document.createElement("PROGRESS");setInterval(myFunction,1000);function myFunction(){value=value+1;x.setAttribute("value", value.toString());x.setAttribute("max", "100");document.body.appendChild(x);}</script></body></html> ................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download

To fulfill the demand for quickly locating and searching documents.

It is intelligent file search solution for home and business.

Literature Lottery

Related download
Related searches

©2024 5y1.org, Inc. All rights reserved.