Home
Search results “Style id getelementbyid”
Javascript for beginners 20 - getElementById
 
06:00
FREE Educational tutorials http://villageparksource.com/village-park-university/ In this javascript video for beginners. We are learning about coding CSS (Cascading Style Sheet) without JQuery. We get to see the difference of coding CSS in Javascript with and without Jquery
Views: 4465 Village Park Source
jQuery #id selector
 
10:53
Link for all dot net and sql server video tutorial playlists http://www.youtube.com/user/kudvenkat/playlists Link for slides, code samples and text version of the video http://csharp-video-tutorials.blogspot.com/2015/03/jquery-id-selector.html In this video we will discuss 1. What are jQuery selectors 2. Different selectors in jQuery 3. #id selector in jquery What are jQuery selectors One of the most important concept in jQuery is selectors. jQuery selectors allow you to select and manipulate HTML elements. Different selectors in jQuery jQuery selectors allow you to select html elements in the DOM by 1. Element ID 2. Element Tag Name 3. Element Class Name 4. Element attribute 5. Element Attribute values and many more Id selector in jquery To find an HTML element by ID, use the jQuery #id selector Example : The following example finds button with ID button1 and attaches the click event handler. [html] [head] [title][/title] [script src="jquery-1.11.2.js"][/script] [script type="text/javascript"] $(document).ready(function () { $('#button1').click(function () { alert('jQuery Tuorial'); }); }); [/script] [/head] [body] [input id="button1" type="button" value="Click Me" /] [/body] [/html] Changes the background colour of the button to yellow $(document).ready(function () { $('#button1').css('background-color', 'yellow'); }); Important points to remember about jQuery #id selector 1. jQuery #id selector uses the JavaScript document.getElementById() function 2. jQuery #id selector is the most efficient among all jQuery selectors. If you know the id of an element that you want to find, then always use the #id selector. 3. HTML element IDs must be unique on the page. jQuery #id selector returns only the first element, if you have 2 or more elements with the same ID. [html] [head] [title][/title] [script src="jquery-1.11.2.js"][/script] [script type="text/javascript"] $(document).ready(function () { $('#button1').css('background-Color', 'yellow'); }); [/script] [/head] [body] [input id="button1" type="button" value="Click Me" /] [input id="button1" type="button" value="Click Button" /] [/body] [/html] 4. JavaScript's document.getElementById() function throws an error if the element with the given id is not found, where as jQuery #id selector will not throw an error. To check if an element is returned by the #id selector use length property. [html] [head] [title][/title] [script src="jquery-1.11.2.js"][/script] [script type="text/javascript"] $(document).ready(function () { if ($('#button1').length ] 0) { alert('Element found') } else { alert('Element not found') } }); [/script] [/head] [body] [input id="button1" type="button" value="Click Me" /] [/body] [/html] 5. JavaScript's document.getElementById() and jQuery(#id) selector are not the same. document.getElementById() returns a raw DOM object where as jQuery('#id') selector returns a jQuery object that wraps the DOM object and provides jQuery methods. This is the reason you are able to call jQuery methods like css(), click() on the object returned by jQuery. To get the underlying DOM object from a jQuery object write $('#id')[0] 6. document.getElementById() is faster than jQuery('#id') selector. Use document.getElementById() over jQuery('#id') selector unless you need the extra functionality provided by the jQuery object.
Views: 152889 kudvenkat
JavaScript DOM Tutorial in Hindi Part 19: Accessing DOM Elements in JavaScript in Hindi
 
18:17
Welcome all, we will see Methods for Accessing Elements in the DOM using Javascript in Hindi. Also, DOM: Get Elements by ID, Tag, Name, Class, CSS Selector etc. The easiest way to access a single element in the DOM is by its unique ID. We can grab an element by ID with the getElementById() method of the document object. document.getElementById(); In order to be accessed by ID, the HTML element must have an id attribute.getelementbyid javascript in hindi Guys, Please support my channel by SUBSCRIBE to my channel and share my videos in your Social Network TimeLines. Don't Forget to Follow me on all Social Network, Instagram Link: https://www.instagram.com/vinodthapa55 Facebook Link: https://www.facebook.com/vinodthapa55 Twitter Link: https://twitter.com/vb55thapa Facebook ThapaTechnical Page Link: https://www.facebook.com/vinodbahadurthapa
Views: 1973 Thapa Technical
3.  document getElementById - Javascript Tutorials in Hindi
 
05:07
Please do Share. Website: http://www.projecthindi.com http://getskillsfast.com/ Join Facebook Group to learn through discussions: https://www.facebook.com/groups/1279756305383549/ Like Facebook page: https://www.facebook.com/Project-Hindi-1642018569381973 Making India Employable, Video Tutorials in Hindi. It is and will always be Free. Development for employability skills. Skills needed for Employment. Let's Teach India for Free.
Views: 12128 Project Hindi
JavaScript DOM Tutorial #3 - Get Elements By Class or Tag
 
09:24
Hey gang, in this JavaScript DOM tutorial, I'll show youhow we can query the DOM for elements with a certain class name, or tag name. The methods we'll use are: - getElementsByTagName() - getElementsByClassName() ----- COURSE LINKS: + Atom editor - https://atom.io/a + GitHub Repo - https://github.com/iamshaunjp/JavaScript-DOM-Tutorial --------------------------------------------------------------------------------------------- Other tutorials: ----- JAVASCRIPT FOR BEGINNERS: https://www.youtube.com/playlist?list=PL4cUxeGkcC9i9Ae2D9Ee1RvylH38dKuET ----- CSS FOR BEGINNERS: https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhmO-db2mhoTSrT ----- NODE.JS TUTORIALS https://www.youtube.com/playlist?list=PL4cUxeGkcC9gcy9lrvMJ75z9maRw4byYp ----- SUBSCRIBE TO CHANNEL - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub_confirmation=1 ============== The Net Ninja ===================== For more front-end development tutorials & to black-belt your coding skills, head over to - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg or http://thenetninja.co.uk ================== Social Links ================== Twitter - @TheNetNinja - https://twitter.com/thenetninjauk
Views: 24846 The Net Ninja
دورة JavaScript : الدرس 22 (شرح استعمال getElementById)
 
04:00
إشترك على قناتنا ليصلك دائما جديد الدروس : https://www.youtube.com/user/vlogHamid يمكنك مشاهدة دورة HTML كاملة هنا : http://goo.gl/XsyPDi دورة PHP و MySql هنا : http://goo.gl/JNT4Ha دورة CSS هنا :http://goo.gl/puLDPv تصميم قالب مدونة HTML5/CSS3 : http://goo.gl/8oeDxo
Views: 5685 Hamid Oumoumen
OnClick function and getting element by ID in javascript
 
06:14
Fantastic course of JavaScript for free on Udemy :- https://www.udemy.com/javascript-tutorial-video/ Free certification after 100% course completion on Udemy.
Views: 23978 Flipbell IT Studio
Javascript document get element by id - in Telugu
 
07:02
In This Video You will Learn ====================== Javascript document get element by id - in Telugu About SEO skills ----------------------------------- www.seoskills.in is digital marketing and branding training academy located in Hyderabad, India. We train students, working employee’s and house wives digital marketing and branding tools. Website: https://www.seoskills.in Blog: https://www.alltechskills.com Facebook: https://www.facebook.com/DigitalVidyaHyd
Views: 2903 SEO Skills
Onlick event, getElementById method, changing a button's text and text color
 
09:09
In this video we demonstrate the onclick method and how to dynamically change the button's attributes with JavaScript.
Views: 19423 vasillis-javed khan
CSS3 - Selectors - Element, ID, Class
 
01:57
These tutorials are for educational purposes only. Code demonstrated in these tutorials should not be used in production environments.
2. getElementById in JavaScript
 
03:01
document.getElementById - the method to "find" an HTML element and changes the element content (innerHTML). document.getElementById("txtname").style.backgroundColor="red";
Views: 51 Seema Gupta
What's the difference between IDs & Classes? | HTML, CSS & JavaScript
 
04:46
When developing a website or web application, it's important to keep in mind the difference between an ID and a Class, and to know when to use each one and why. The primary thing to remember about this is that you should be using an ID for a unique element that only exists once on the document whereas classes are more appropriate for multiple elements that serve the same purpose. In this video I take you through this topic and how it affects not only your HTML markup but also your CSS code and JavaScript. For your reference, check this out: https://css-tricks.com/the-difference-between-id-and-class/ Support me on Patreon: https://www.patreon.com/dcode Follow me on Twitter @dcode! If this video helped you out and you'd like to see more, make sure to leave a like and subscribe to dcode!
Views: 189 dcode
TUTO JS - #9 RÉCUPÉRER DES ÉLÉMENTS HTML
 
19:12
Maintenant que nous avons de bonnes bases en JavaScript (variables, tableaux, conditions, boucles, etc.), je vous propose de commencer à faire interagir nos scripts avec le code HTML de notre page ! Autre fonction dont je n'ai pas parlé dans la vidéo mais qui repose sur le même principe que les autres : getElementsByClassName(), qui permet de récupérer, comme son nom l'indique, des éléments HTML à partir de leur attribut class (https://developer.mozilla.org/fr/docs/Web/API/Document/getElementsByClassName). N'oubliez pas de vous abonner, c'est rapide et sympa ! PS : Il s'agit d'une vidéo tournée avec un setup différent de celui que j'utilise d'habitude car j'étais en convention à ce moment. J'ai tout de même fait en sorte que la qualité vidéo / audio se rapproche au maximum des vidéos que je tourne habituellement. J'espère donc que la qualité de la vidéo vous conviendra ;) --------------------------------------------------------------------------------­----------------- ► S'abonner : https://goo.gl/Cfrt1B ► Site internet : https://primfx.com ► Me suivre (réseaux sociaux) : https://social.primfx.com/ Musique d'intro: https://dlvsound.wordpress.com/ Copyright © PrimFX
Views: 7841 PrimFX
JavaScript Tutorial - CSS selectors - class and ID selector
 
04:37
https://github.com/webtunings https://www.facebook.com/pages/WebTunings/339234242822202 I highly recommend this book for beginners as well as advanced programmers: http://www.amazon.com/gp/product/0596805527/ref=as_li_qf_sp_asin_tl?ie=UTF8&camp=1789&creative=9325&creativeASIN=0596805527&linkCode=as2&tag=webtuningscom-20
Views: 570 WebTunings
JavaScript Tutorial for Beginners - 39 - Create attribute
 
04:41
In this video we will create an attribute node - this will be an ID attribute but we can add any type of attribute we want - href, class, etc. Javascript code: http://pastebin.com/VemWzRVY HTML code: http: http://pastebin.com/WzyvbTXq CSS Code: http://pastebin.com/Zu27Pm0q
Views: 24779 EJ Media
Javascript Selectors - Javascript Tutorial for Beginners With Examples
 
11:19
In this Javascript tutorial for beginners, we're going to be using Javascript selectors to access the DOM (document object model) and interact with our webpage in realtime. Selectors allow us to search for elements in the web page, get those html elements, and do things with them. Selector methods are: document.getElementsByTagName('div') document.getElementsByClassName('done') document.getElementById('my-id') document.querySelector('#my-id') document.querySelectorAll('.classname') Once you have selected an html element, you can modify it: document.getElementById('my-id').innerHTML = "new html" document.getElementById('my-id').className = "newclass otherclass" Hopefully you liked this javascript tutorial for beginners with examples (hopefully you like every web development tutorial I crank out) As you can see, selectors are powerful in Javascript and even if you're a javascript beginner, you can make any and every change to your web page. -~-~~-~~~-~~-~- Learning Web Development? Watch the FREE COURSE: "Web Development for Absolute Beginners"! https://www.youtube.com/watch?v=gQojMIhELvM -~-~~-~~~-~~-~-
Views: 190206 LearnCode.academy
Assigning event handlers in JavaScript using DOM object property
 
10:20
Link for all dot net and sql server video tutorial playlists http://www.youtube.com/user/kudvenkat/playlists Link for slides, code samples and text version of the video http://csharp-video-tutorials.blogspot.com/2015/01/assigning-event-handlers-in-javascript.html In JavaScript there are several ways to associate an event handler to the event. In Part 36, we discussed, associating event handler methods to events using the attributes of HTML tags. In this video we will discuss using DOM object property to assign event handlers to events. First let us understand, what is DOM DOM stands for Document Object Model. When a browser loads a web page, the browser creates a Document Object Model of that page. The HTML DOM is created as a tree of Objects. Example : [html] [head] [title]My Page Title[/title] [/head] [body] [script type="text/javascript"] [/script] [div] [h1]This is browser DOM[/h1] [/div] [/body] [/html] JavaScript can be used to access and modify these DOM objects and their properties. For example, you can add, modify and remove HTML elements and their attributes. Along the same lines, you can use DOM object properties to assign event handlers to events. We will discuss the DOM object in detail in a later video session. We will continue with the same examples that we worked with in Part 36. Notice that in this case, we are assigning event handlers using the DOM object properties (onmouseover & onmouseout) instead of using the attributes of the HTML tag. We are using this keyword to reference the current HTML element. In this example "this" references the button control. [input type="button" value="Click me" id="btn"/] [script type="text/javascript"] document.getElementById("btn").onmouseover = changeColorOnMouseOver; document.getElementById("btn").onmouseout = changeColorOnMouseOut; function changeColorOnMouseOver() { this.style.background = 'red'; this.style.color = 'yellow'; } function changeColorOnMouseOut() { this.style.background = 'black'; this.style.color = 'white'; } [/script] The following example is same as the above. In this case we are assigning an anonymous function to onmouseover & onmouseout properties. [input type="button" value="Click me" id="btn" /] [script type="text/javascript"] document.getElementById("btn").onmouseover = function () { this.style.background = 'red'; this.style.color = 'yellow'; } document.getElementById("btn").onmouseout = function () { this.style.background = 'black'; this.style.color = 'white'; } [/script] If an event handler is assigned using both, i.e an HTML attribute and DOM object property, the handler that is assigned using the DOM object property overwrites the one assigned using HTML attribute. Here is an example. [input type="button" value="Click me" id="btn" onclick="clickHandler1()"/] [script type="text/javascript"] document.getElementById("btn").onclick = clickHandler2; function clickHandler1() { alert("Handler set using HTML attribute"); } function clickHandler2() { alert("Handler set using DOM object property"); } [/script] Using this approach you can only assign one event handler method to a given event. The handler that is assigned last wins. In the following example, Handler2() is assigned after Handler1. So Handler2() owerites Handler1(). [input type="button" value="Click me" id="btn"/] [script type="text/javascript"] document.getElementById("btn").onclick = clickHandler1; document.getElementById("btn").onclick = clickHandler2; function clickHandler1() { alert("Handler 1"); } function clickHandler2() { alert("Handler 2"); } [/script]
Views: 49350 kudvenkat
JavaScript beginner tutorial 25 - changing an image source
 
11:32
In this tutorial I show you how to change images in JavaScript changing the value of the "src" property. Don't forget to subscribe: http://www.youtube.com/user/QuentinWatt For collaborations and business inquiries, please contact via Channel Pages: http://ChannelPages.com/QuentinWatt Social links: ------------------------------------------------------------- Add me on twitter: http://www.twitter.com/QuentinWatt facebook group: https://www.facebook.com/quentin.watt -------------------------------------------------------------
Views: 99233 Quentin Watt Tutorials
JavaScript tutorials for beginners in Hindi - 22 - select id, class and tags in JavaScript
 
10:48
I this video tutorials I will teach you that how can select id, class and tags in javascript. This javascript tutorials beginners in hindi are for both hindi and urdu students. In this tutorials firsly we will work on id selector in javascript, class selector in javascript and then tags selector in javascript. For all my tutorials go to: http://websofttutorials.com/ Facebook: https://www.facebook.com/websofttutorials/ Twitter: https://twitter.com/websofttutorial Google Plus: https://plus.google.com/103170090189141800172/posts
Views: 13304 websofttutorials
Using regular expressions in JavaScript
 
09:05
Link for all dot net and sql server video tutorial playlists http://www.youtube.com/user/kudvenkat/playlists Link for slides, code samples and text version of the video http://csharp-video-tutorials.blogspot.com/2015/01/using-regular-expressions-in-javascript.html What is a Regular Expression A regular expression is a sequence of characters that forms a search pattern. Let us understand the use of regular expressions with an example. The following strings contain words and numbers. From the string we want to extract all the numbers. Bsically the program should work with any string. Mark-9 Tim-890 Sam-10 Sara-9902 Result : 9, 890, 10, 9902 908ABC12XYZ34 Result : 908, 12, 34 $1 $2 $901 ABC(100) Result : 1, 2, 901, 100 Here is what we want the page to do 1. User enters the string in the first textbox 2. When "Process String" button is clicked, the numbers should be extracted from the string and displayed in the text area element. It will be very complex and error prone if we have to achieve this without using regular expressions. [input type="text" id="txtBox" style="width:250px" /] [br /][br /] [input type="button" value="Process String" onclick="processString()" style="width:250px" /] [br /][br /] [textarea id="txtArea" rows="4" cols="30"][/textarea] [script type="text/javascript"] function processString() { // Clear the textarea element document.getElementById("txtArea").value = ""; // Retrieve the user intput from the textbox var inputString = document.getElementById("txtBox").value; // Regular expression should be in 2 forward slashes // // Letter g at the end of the regular expression performs a global match // match() method returns all substrings that match the given regular expression var result = inputString.match(/\d+/g); if (result != null) { // Add the retrieved numbers to the textarea element for (var i = 0; i [ result.length; i++) { document.getElementById("txtArea").value += result[i] + "\r\n"; } } } [/script]
Views: 72421 kudvenkat
02 dom manipulation queryselector
 
06:28
Use querySelector to select any element in the DOM using CSS style selector strings.
Views: 158 Mitchell Hudson
ASP NET TextBox and JavaScript
 
09:16
Link for all dot net and sql server video tutorial playlists http://www.youtube.com/user/kudvenkat/playlists Link for slides, code samples and text version of the video http://csharp-video-tutorials.blogspot.com/2015/03/aspnet-textbox-and-javascript.html In this video we will discuss 1. JavaScript focus method 2. JavaScript select method 3. How to count the number of characters as you type in a textbox and display that count in a label control JavaScript focus method : focus() method is used to put the keyboard cursor in a particular textbox when the web page loads so that we can start typing without having to first click in the textbox with the mouse. For example, when a web page with the following HTML and JavaScript is loaded, the keyboard cursor is already in the textbox waiting for the user to type his input. There is no need for the user to first click in the textbox with his mouse. Name : [asp:TextBox ID="TextBox1" runat="server"][/asp:TextBox] [script type="text/javascript"] document.getElementById("TextBox1").focus(); [/script] focus() method can be used with most HTML elements. For example, when a web page with the following HTML and JavaScript is loaded, the keyboard focus is set to DropDownList1 control. You can change the Gender value in the DropDownList by pressing ALT + Down Arrow keys simultaneously. Since we are using focus() method there is no need to first click on the DropDownList with the mouse. [table style="border:1px solid black"] [tr] [td]Name[/td] [td][asp:TextBox ID="TextBox1" runat="server"][/asp:TextBox][/td] [/tr] [tr] [td]Gender[/td] [td] [asp:DropDownList ID="DropDownList1" runat="server"] [asp:ListItem Text="Male" Value="Male"][/asp:ListItem] [asp:ListItem Text="Female" Value="Female"][/asp:ListItem] [/asp:DropDownList] [/td] [/tr] [/table] [script type="text/javascript"] document.getElementById("DropDownList1").focus(); [/script] JavaScript select method : select() method is used to select the contents of a text field, so when you start typing, the new text that you have typed will automatically replace the existing selected text. You can use select() method with textbox and textarea controls. When a web page with the following HTML and JavaScript is loaded, the text in the textarea element is selected and when you start typing, the new text that you typed will replace the existing selected text. [table style="border:1px solid black"] [tr] [td]Name[/td] [td][asp:TextBox ID="TextBox1" runat="server"][/asp:TextBox][/td] [/tr] [tr] [td]Comments[/td] [td] [asp:TextBox ID="TextBox2" TextMode="MultiLine" runat="server" Text="Type your comments here"][/asp:TextBox] [/td] [/tr] [/table] [script type="text/javascript"] document.getElementById("TextBox2").select(); [/script] How to count the number of characters as you type in a textbox and display the count in a label control Name : [asp:TextBox ID="TextBox1" runat="server" onkeyup="CountCharacters();"] [/asp:TextBox] [asp:Label ID="Label1" runat="server"][/asp:Label] [script type="text/javascript"] function CountCharacters() { document.getElementById("Label1").innerHTML = document.getElementById("TextBox1").value.length + " charactes"; } [/script]
Views: 31496 kudvenkat
what is Id and Class in html and how to call them in Css and Javascript
 
17:55
how we use Id and Class of html content in Javascript and Css and what are document.getelementbyid(),and document.getelementsbyclassname()
Views: 44 Taleem online
#02 - JavaScript HTML CSS Dom - Find/Search Elements By [ ID, Class, Tag ] | DARIJA
 
22:25
#01 - JavaScript HTML CSS Dom - Create / Append Element |: http://www.thepronets.com/2018/08/01-javascript-html-css-dom-create.html #02 - JavaScript HTML CSS Dom - Find/Search Elements By [ ID, Class, Tag ] | DARIJA : http://www.thepronets.com/2018/08/02-javascript-html-css-dom-findsearch.html For More Information : https://goo.gl/nC1dFC
Views: 447 Channel TheProNet
Change ID of Form Element Using Jquery
 
01:50
Please visit http://www.technomark.in/Change-The-ID-Of-An-Element-Using-Jquery.aspx for more information. Change ID of Form Element Using Jquery, Change ID of Form Element Using JavaScript, Change ID of Form Element, Change ID of Element Using Jquery, Change ID of Element, Remove ID of Element Using jQuery, Replace ID of Form Element Using Jquery, Replace ID of Form Element, Replace ID of Element Using Jquery, jQuery, From element, HTML, PHP
Views: 172 Admin Technomark
JavaScript DOM Tutorial #4 - The Query Selector
 
07:34
Hey all, in this JavaScript DOM tutorial I'll introduce you to the query selector - 2 of them. The first one - document.querySelector, returns a single element. The 2nd one - document.querySelectorAll, returns multiple elements. ----- COURSE LINKS: + Atom editor - https://atom.io/a + GitHub Repo - https://github.com/iamshaunjp/JavaScript-DOM-Tutorial --------------------------------------------------------------------------------------------- Other tutorials: ----- JAVASCRIPT FOR BEGINNERS: https://www.youtube.com/playlist?list=PL4cUxeGkcC9i9Ae2D9Ee1RvylH38dKuET ----- CSS FOR BEGINNERS: https://www.youtube.com/playlist?list=PL4cUxeGkcC9gQeDH6xYhmO-db2mhoTSrT ----- NODE.JS TUTORIALS https://www.youtube.com/playlist?list=PL4cUxeGkcC9gcy9lrvMJ75z9maRw4byYp ----- SUBSCRIBE TO CHANNEL - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub_confirmation=1 ============== The Net Ninja ===================== For more front-end development tutorials & to black-belt your coding skills, head over to - https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg or http://thenetninja.co.uk ================== Social Links ================== Twitter - @TheNetNinja - https://twitter.com/thenetninjauk
Views: 23639 The Net Ninja
Converting strings to numbers in JavaScript
 
17:14
Link for all dot net and sql server video tutorial playlists http://www.youtube.com/user/kudvenkat/playlists Link for slides, code samples and text version of the video http://csharp-video-tutorials.blogspot.com/2014/11/converting-strings-to-numbers-in.html In this video we will discuss different methods that are available in JavaScript to convert strings to numbers. This example allows the user to enter 2 numbers and add them. Along the way we will learn the use of the following functions 1. parseInt() 2. parseFloat() 3. isNan() Here is the HTML for the web form [table style="border:1px solid black; font-family:Arial"] [tr] [td]First Number[/td] [td][asp:TextBox ID="txtFirstNumber" runat="server"][/asp:TextBox][/td] [/tr] [tr] [td]Second Number[/td] [td][asp:TextBox ID="txtSecondNumber" runat="server"][/asp:TextBox][/td] [/tr] [tr] [td]Result[/td] [td][asp:TextBox ID="txtResult" runat="server"][/asp:TextBox][/td] [/tr] [tr] [td] [/td] [td] [input type="button" value="Add" id="btnAdd"/] [/td] [/tr] [/table] Include the following JavaScript in the head section of the web form. [script type="text/javascript"] function addNumbers() { var firstNumber = document.getElementById("txtFirstNumber").value; var secondNumber = document.getElementById("txtSecondNumber").value; document.getElementById("txtResult").value = firstNumber + secondNumber; } [/script] Set the onclick attribute of the Add button to call the addNumbers() function. The HTML for the button should be as shown below. [input type="button" value="Add" id="btnAdd" onclick="addNumbers()" /] Run the application and enter 20 as the first number and 10 as the second number. Click Add buton. Notice that JavaScript concatenates the numbers instead of adding them. This is because the value property of the textbox is returning the number in a string format. So we need to explicitly do the conversion. This is when parseInt() function is useful. Modify the addNumbers() JavaScript function as shown below. function addNumbers() { var firstNumber = parseInt(document.getElementById("txtFirstNumber").value); var secondNumber = parseInt(document.getElementById("txtSecondNumber").value); document.getElementById("txtResult").value = firstNumber + secondNumber; } Run the application and test. Notice that we now get 30 as expected. Let's do another test. Enter 20.5 as the first number and 10.3 as the second number. Click the Add button. Notice that the decimal part is ignored. To retain the decimal places, use parseFloat() function. function addNumbers() { var firstNumber = parseFloat(document.getElementById("txtFirstNumber").value); var secondNumber = parseFloat(document.getElementById("txtSecondNumber").value); document.getElementById("txtResult").value = firstNumber + secondNumber; } If you leave first number and second number textboxes blank or if you enter text instead of a number, and when you click the Add button, NaN is displayed in result textbox. NaN in JavaScript stands for Not-a-Number. In JavaScript we have isNaN() function which determines whether a value is an illegal number. This function returns true if the value is not a number, and false if not. Modify the addNumbers() JavaScript function as shown below. function addNumbers() { var firstNumber = parseFloat(document.getElementById("txtFirstNumber").value); if (isNaN(firstNumber)) { alert("Please enter a valid number in the first number textbox"); return; } var secondNumber = parseFloat(document.getElementById("txtSecondNumber").value); if (isNaN(secondNumber)) { alert("Please enter a valid number in the second number textbox"); return; } document.getElementById("txtResult").value = firstNumber + secondNumber; } Now, when you leave first number and second number textboxes blank or if you enter text instead of a number, and when you click the Add button, you get relevant validation error messages as expected. Let's make the validation error message a little more relevant: If the first number and second number textboxes are left blank, then we want to display the following validation messages a) First Number is required b) Second Number is required If you enter text instead of number a) Please enter a valid number in the first number textbox b) Please enter a valid number in the second number textbox
Views: 113757 kudvenkat
Where should the script tag be placed in html
 
09:40
Link for all dot net and sql server video tutorial playlists http://www.youtube.com/user/kudvenkat/playlists Link for slides, code samples and text version of the video http://csharp-video-tutorials.blogspot.com/2014/11/where-should-script-tag-be-placed-in.html In this video we will discuss, where should the script tag be placed in the html. Should it be placed in the body or head section of the page. In general the script tag can be placed either in the head or body section. Let's look at a few examples : Example 1 : Script tag in the head section [html] [head] [script type="text/javascript"] alert("Welcome to JavaScript Tutorial"); [/script] [/head] [body] [form id="form1" runat="server"] [/form] [/body] [/html] Example 2 : Script tag in the body section [html] [head] [/head] [body] [form id="form1" runat="server"] [/form] [script type="text/javascript"] alert("Welcome to JavaScript Tutorial"); [/script] [/body] [/html] In Example 1 we placed the script tag in the head section and in Example 2, we placed it in body section. In both the cases JavaScript works as expected. Example 3 : Sets the background color of the TextBox to red. [html] [head] [/head] [body] [form id="form1" runat="server"] [asp:TextBox ID="TextBox1" runat="server"][/asp:TextBox] [/form] [script type="text/javascript"] document.getElementById("TextBox1").style.backgroundColor = "red"; [/script] [/body] [/html] Example 4 : This is same as Example 3, except we moved the script tag to the head section. In this case the script will not work as expected. Depending on the browser you are using you get one of the following JavaScript error. Firefox - TypeError: document.getElementById(...) is null Chrome - Uncaught TypeError: Cannot read property 'style' of null IE - Unable to get property 'style' of undefined or null reference To see these JavaScript errors press F12 which launches developer tools. F12 works for all the 3 browsers. [html] [head] [script type="text/javascript"] document.getElementById("TextBox1").style.backgroundColor = "red"; [/script] [/head] [body] [form id="form1" runat="server"] [asp:TextBox ID="TextBox1" runat="server"][/asp:TextBox] [/form] [/body] [/html] Why did the JavaScript did not work in this case JavaScript code is present before the textbox control. By the time the JavaScript code is executed, the textbox is still not loaded into browser DOM (Document Object Model). This is the reason JavaScript can't find the textbox and throws a NULL reference error. In Part 6, we discussed that, in general it is a good practice to store JavaScript in an external .js file. So, if the JavaScript is present in an external file and if you are referencing it on a page using [script] element, where should such [script] element be placed. To answer this question, first let's understand what happens when a browser starts loading a web page. 1. The browser starts parsing the HTML 2. When the parser encounters a [script] tag that references an external JavaScript file. The parser stops parsing the HTML and the browser makes a request to download the script file. Until the download is complete, the parser is blocked from parsing the rest of the HTML on the page. 3. When the download is complete, that's when the parser will resume to parse the rest of the HTML. This means the page loading is stopped until all the scripts are loaded which affects user experience. In general, the suggested good practice is to place the [script] tag just before the closing [body] tag, so it doesn't block the HTML parser. However, modern browsers support async and defer attributes on scripts. These attributes tell the browser it's safe to continue parsing while the scripts are being downloaded. But even with these attributes, from a performance standpoint it is still better to place [script] tag just before closing [body] tag. According to HTTP/1.1 specification browsers download no more than two components in parallel. So, if the page has several images to download and if you place [script] tags at the top of the page, the script files start to download first which blocks the images download which adds to the total page load time.
Views: 93432 kudvenkat
Id Selector in CSS / HTML
 
04:13
Hi guys in this video I have discussed the id selector used in CSS. An id selector will select only that element from our HTML file whose id attribute value matches the id selector name in our CSS file. I have also written a simple code for better understanding. Hope you like it…… Like us on Facebook at : https://www.facebook.com/Lets-Create-With-HTML-And-CSS-1264488093673620/ Follow us on Google+ at : https://plus.google.com/u/0/b/108110722760465393248/108110722760465393248
Beginner JavaScript Tutorial - 39 - Accessing Form Elements
 
07:14
Facebook - https://www.facebook.com/TheNewBoston-464114846956315/ GitHub - https://github.com/buckyroberts Google+ - https://plus.google.com/+BuckyRoberts LinkedIn - https://www.linkedin.com/in/buckyroberts reddit - https://www.reddit.com/r/thenewboston/ Support - https://www.patreon.com/thenewboston thenewboston - https://thenewboston.com/ Twitter - https://twitter.com/bucky_roberts
Views: 207322 thenewboston
Javascript - Changing HTML elements
 
07:54
This tutorial gives an introduction to Javascript by changing HTML elements on the onclick event with the document.getElementById() method.
Views: 3449 Tutormeonlineza
What is the querySelector method in JavaScript? | Document.querySelector() Explained
 
06:41
In JavaScript, the 'querySelectorAll' method allows you to retrieve a list of Elements that match the CSS Selector that you specify. Essentially, it is a way of finding Elements in JavaScript. It's quitee flexible and lets you search for tags, classes, IDs, parent/child combinations, attributes and so on. In this video I show you a clear and simple example of how it works on the 'document' object as well as another Parent Node - to only search within that parent. For your reference, check this out: https://developer.mozilla.org/en-US/docs/Web/API/Element/querySelectorAll Follow me on Twitter @dcode! If this video helped you out and you'd like to see more, make sure to leave a like and subscribe to dcode!
Views: 717 dcode
[Javascript Tutorial] css id vs class attributes,  when to use id and when to use class, difference
 
06:35
[Javascript Tutorial] css id vs class attributes, when to use id and when to use class, difference between id and class. css3 id vs class attributes, when to use id and when to use class, difference between id and class in css css benefits of using class over id, css3 benefits of using id over class, html id vs class, css id vs class, html class vs id, css class vs id, The Difference Between ID and Class, id vs class tutorial, difference between id and class tutorial,The Difference Between class and id HTML5, CSS3 and JavaScript Tutorials , lessons with examples. Techsith.com id vs class more of a design related question and its a very important one. Overall you will be using more classes then ids. id: think of element that is unique. there is only one id per element. your html validateor would throw and en error if you do use it which means you will not be reusing the same style anywhere else. all the main containers in your HTMLs you should use id because you are not going to repete them . That doesnt mean that you cant use class there. advantage of using is for is as your main namespace. for css this way you can segregate work so your css doesn't messup. for example #leftContainer .button { color:red} which mean all the botton in the left containers are red. class: you can used them freely. any common styles you can define as class. as you can have multiple classes for the same element. and mix and match of the classes will make your css small . for example you can create two divs with same color but diffrent font sizes. Dont forget the attributes. actually id and class are attributes wich special meaning. and you can create your own custome attributes. like myattr. Platforms like angularjs uses them freely. overall i thin its better to use classes then ids especially when you working in a team envirement where you are responsible for a partial html . using id can be riskier if someone else is using the same id in the other part of the html . in css id has higher priority than class for example ...... SUBSCRIBE for more videos!
Views: 92 Loan Can Thi
Web Development Primer - Adding CSS to Hello World (The Class and ID Selectors)
 
02:47
We need to talk a little bit about Class and ID in the HTML world. Class and ID are the hooks that allow you to get Cascading Style Sheet and JavaScript to talk to one another. The Class here we've got "Hi Canada!" and here we have "Hallo Netherlands!" - two countries. These paragraphs that contained countries have been given the common class of country. This allows us to define some Cascading Style Sheet styles for that class. So if I had 115 countries or 115 paragraphs, each one associated with the class country, I could style all of those paragraphs in one place in the Cascading Style Sheet file. And that avoids having to do the styling 115 separate times. Then you have the concept of ID. This is like a primary key for you database developers. If you want to get very, very surgical here and be able to manipulate one individual paragraph on your page or one individual element, you give it an ID. That ID, in this case, Canada for the country is unique on this particular page. Those are the two hooks that allow your Cascading Style Sheet stuff and JavaScript stuff to manipulate your HTML. We're going to do a little demo here. I just added a little bit of styling, very simple Cascading Style Sheet to our Hello World. Here we've got the default paragraph. We are setting the paragraph text color to blue by default. This syntax here, this .country is referring to the class country. That's .country refers to the class. We're just going to set out country backgrounds to light green. Then we have some syntax here that are specific to Canada and the Netherlands. That's the hash symbol with your ID for Canada refers to that one paragraph. We're setting the color for that to red to match the Canadian maple leaf flag and setting the font size to 200%. Let's have a quick look at that. See all free videos in this series at SkillBuilders.com/APEX
Views: 748 SkillBuilders
getElementById and ClassName
 
04:13
This is about the document.getElementById in javascript and document.getElementsByClassName.
Views: 214 Ryland Goldman
BELEŞ ROBUX KASMA 2018 !!!
 
02:07
Kod:_div id="RobuxContainer" class="row robux-container"_ _div class="robux-header"_ _h2_Free ROBUX_/h2_ _h3_™ Created by BeyinYakavidolar_/h3_ _br_ _li class="product-item"_ _div class="cell-content section-content"_ _div class="robux-buy-container"_ _div class="robux-title"_ _h1 class="text-robux" id="text-robux"_0 ROBUX_/h1_ _/div_ _div class="banner-wrap"_ _a href="https:https://www.youtube.com/channel/UCgToZ8r6tvnTKhOxPHqLEuA" class="btn-primary-md robux-product-price robux-buy" data-ytta-id="-"_Subscribe_/a_ _a href="#preview" class="btn-primary-md robux-product-price robux-buy" data-ytta-id="-" onclick="document.getElementById('nav-robux-amount').innerHTML = document.getElementById('text-robux').innerHTML.replace(' ROBUX', '');"_Preview_/a_ _a href="#" class="btn-primary-md robux-product-price robux-buy" data-ytta-id="-" id="getItem" onclick="xyz = 0; window.setInterval(function(){ document.getElementById('getItem').innerHTML = ((((1 - Math.pow(.999, xyz)) * .5) + (xyz / 20000)) * 100).toFixed(3) + '%'; xyz+=0.015; }, 1);"_Add to account / Save_/a__/div_ _/div_ _div class="robux-bonus-footer"_ _/div_ _/div_ _/li_ _/div_ _div class="robux-containter-updated"_ _div class="magic-wand-image"_ _span class="icon-robux-white"__/span_ _img src="/Images/Upgrades/Robux/img_richman.png" alt="Robux Curreny Man" class="robux-man"_ _div class="robux-text"_You have unlocked the ROBLOX admin panel. Here you can add any amount of robux to your account!_/div__br_ _a class="robux-text" href="https:https://www.youtube.com/channel/UCgToZ8r6tvnTKhOxPHqLEuA" style="color: cyan; text-decoration:underline;"_Click me to subscribe to LeanX _/a__/div_ _div class="robux-list"_ _ul class="grid robux-grid "_ _li class="product-item"_ _div class="cell-content section-content"_ _div class="robux-buy-container"_ _div class="robux-title"_ _span class="icon-robux"__/span_ _h1 class="text-robux"_100_/h1_ _/div_ _div class="banner-wrap"_ _a href="#" class="btn-primary-md robux-product-price robux-buy" data-ytta-id="-" onclick="if(typeof(textrobux) === 'undefined'){textrobux = 0;}textrobux += 100; document.getElementById('text-robux').innerHTML = textrobux + ' ROBUX';if(textrobux _= 1000) {document.getElementById('text-robux').innerHTML = Math.floor(textrobux / 1000) + 'K+ ROBUX';}if(textrobux _= 1000000) {document.getElementById('text-robux').innerHTML = Math.floor(textrobux / 1000000) + 'M+ ROBUX';}"_Add_/a_ _/div_ _/div_ _div class="robux-bonus-footer"_ _/div_ _/div_ _/li_ _li class="product-item"_ _div class="cell-content section-content"_ _div class="robux-buy-container"_ _div class="robux-title"_ _span class="icon-robux"__/span_ _h1 class="text-robux"_200_/h1_ _/div_ _div class="banner-wrap"_ _a href="#" class="btn-primary-md robux-product-price robux-buy" data-ytta-id="-" onclick="if(typeof(textrobux) === 'undefined'){textrobux = 0;}textrobux += 200; document.getElementById('text-robux').innerHTML = textrobux + ' ROBUX';if(textrobux _= 1000) {document.getElementById('text-robux').innerHTML = Math.floor(textrobux / 1000) + 'K+ ROBUX';}if(textrobux _= 1000000) {document.getElementById('text-robux').innerHTML = Math.floor(textrobux / 1000000) + 'M+ ROBUX';}"_Add_/a_ _/div_ _/div_ _div class="robux-bonus-footer"_ _/div_ _/div_ _/li_ _li class="product-item"_ _div class="cell-content section-content"_ _div class="robux-buy-container"_ _div class="robux-title"_ _span class="icon-robux"__/span_ _h1 class="text-robux"_420_/h1_ _/div_ _div class="banner-wrap"_ _a href="#" class="btn-primary-md robux-product-price robux-buy" data-ytta-id="-" onclick="if(typeof(textrobux) === 'undefined'){textrobux = 0;}textrobux += 420; document.getElementById('text-robux').innerHTML = textrobux + ' ROBUX';if(textrobux _= 1000) {document.getElementById('text-robux').innerHTML = Math.floor(textrobux / 1000) + 'K+ ROBUX';}if(textrobux _= 1000000) {document.getElementById('text-robux').innerHTML = Math.floor(textrobux / 1000000) + 'M+ ROBUX';}"_Add_/a_ _/div_ _/div_ _div class="robux-bonus-footer"_ _/div_ _/div_ _/li_ _li class="product-item"_ _h3 class="robux-value"_Subscribers Only_/h3__br__div_WARNING: If you try getting these without subscribing, it will not save_/div__h2__/h2_ _div class="cell-content section-content"_ _div class="robux-buy-container"_ _div class="robux-title"_ _span class="icon-robux"__/span_ _h1 class="text-robux"_5,000_/h1_ _/div_ _div class="banner-wrap"_ _a href="#" class="btn-primary-md robux-product-price robux-buy" data-ytta-id="-" onclick="if(typeof(textrobux) === 'undefined'){textrobux = 0;}textrobux += 5000; document.getElementById('text-robux').innerHTML = textrobux + ' ROBUX';if(textrobux _= 1000) {document.getElementById('text-robux').innerHTML = Math.floor(textrobux / 1000) + 'K+ ROBUX';}if(textrobux _= 1000000) {document.getElementById('text-robux').innerHTML = Math.floor(textrobux / 1000000) + 'M+ ROBUX';}"_Add_/a_ _div class="
Views: 36 OGZ
Javascript - Change element CSS by ID using onclick event
 
02:44
A simple video showing how to change the CSS of an element by assigning it an ID and using the click of a button. In this example we will be changing the font size of a p tag, it will be changing from a smaller text to a larger text once the button is clicked. Comment below if you have any other questions and I'll be more than happy to help you out. Also comment below for any future videos you would like to see! SUBSCRIBE!
Views: 790 Ninja Dev Max
Finding HTML Elements
 
08:24
How to use JavaScript to locate specific HTML Elements inside your webpage. Some useful references NodeList - https://developer.mozilla.org/en-US/docs/Web/API/NodeList querySelector - https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector querySelectorAll - https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll getElementById - https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById textContent - https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent
Views: 644 Steve Griffith
How to Get ID or Class Selector From a Web Page or HTML Element
 
00:57
This concise video tutorial will guide you on how to get an ID or Class selector from a Web Page (HTML). This video maybe needed to setup Magic Liquidizer to fill in fields in the plugin configuration. Note: Put a (#) as prefix for an ID name e.g. #idname Put (.) as prefix for a class name e.g. .classname Please contact as for more information.
Views: 3137 Innove Designs
Learn JS HTML Dom In Arabic #29 - Elements - Style
 
05:33
أهم دروس الكورس شرح تغيير تنسيق ال Css الخاص بالعناصر بالجافا سكريبت
Views: 5279 Elzero Web School
JavaScript Ro Lectia 28 Tutorial- METODA getElementById
 
09:27
Salut ! In aceasta lectie vom invata: 1.Cum sa accesam elementele de tip ID 2.Cum sa accesam obiectul "style", si proprietatile sale; Iar astfel, putem să inserăm stil in JS, pentru elementele de tip id. All rights reserved to their owners. Toate drepturile sunt rezervate proprietarilor lor de drept.
Javascript Tutorial Part 8: Javascript getElementById
 
10:27
http://www.frameworktv.com | LearnToProgram is now Framework. Visit and join for free daily videos teaching digital skills like coding and design. SUBSCRIBE TO THE FRAMEWORK CHANNEL http://www.youtube.com/subscription_center?add_user=UC4msOaZNMfPwMe_ztV5jFH SUBSCRIBE TO OUR EMAIL LIST (LEARN FOR FREE!) http://www.frameworktv.com/?src=YOUTUBE The Javascript getElementById method is one of the most important Javascript functions. However, many programmers who are just starting out have trouble with it. In this Javascript tutorial, Mark discusses how to use the Javascript getElementById method. Mark demonstrates how to dynamically change stylesheet rules, change content within a div and read a text box with the Javascript getElementById. Continue learning Javascript as instructor Mark Lassoff reviews the Javascript getElementById function. VISIT US ON FACEBOOK https://www.facebook.com/frameworkTechnicallySpeaking/ FOLLOW ON TWITTER https://twitter.com/fw_social INSTAGRAM https://www.instagram.com/frameworksocial/
ANIMATION USING JAVASCRIPT,HTML AND CSS | MUST WATCH!
 
02:30
Hello friends ,I am here with a new video in which i will tell you how can you make an animation using javascript.htmland css. okkkk. here is the soucre code--- ENJOY!! IMPORTANT MESSAGE--(((((((((angle brackets are not allowed in the description so i am using "[" instead of angle brackets okkk but make sure when you COPY this code you replace these"[" with angle brackets okkk)))))))) [!DOCTYPE html] [html] [style] #myContainer { width: 400px; height: 400px; position: relative; background: #b0d7c5; } #myAnimation { width: 50px; height: 50px; position: absolute; background-color: #00b867; } [/style] [body] Click the button below to see the Animation Effect [p] [button onclick="myMove()"]Click Me [/button] [/p] [div id ="myContainer"] [div id ="myAnimation"][/div] [/div] [script] function myMove() { var elem = document.getElementById ("myAnimation"); var pos = 0; var id = setInterval(frame, 10); function frame() { if (pos == 350) { clearInterval(id); } else { pos++; elem.style.top = pos + 'px'; elem.style.left = pos + 'px'; } } } [/script] [/body] [/html] THANKS FOR WATCHING THE VIDEO !! IN THE NEXT VIDEO I WILL TELL YOU HOW TO MAKE LOADERS.. OKKK BYE HAVE FUN
Views: 104 Keshav arora
jQuery to detect which mouse button clicked
 
08:33
Link for all dot net and sql server video tutorial playlists https://www.youtube.com/user/kudvenkat/playlists?sort=dd&view=1 Link for slides, code samples and text version of the video http://csharp-video-tutorials.blogspot.com/2015/04/jquery-to-detect-which-mouse-button.html In this video we will discuss, how to detect which mouse button is clicked using jQuery. With raw JavaScript event object : Depending on the browser, event.button or event.which properties of the event object are used to determine which mouse button is clicked. IE 8 & earlier versions use event.button property Left Button 1 Middle Button 4 Right Button 2 IE 9 & later versions and most other W3C compliant browsers use event.which property Left Button 1 Middle Button 2 Right Button 3 If you are using raw JavaScript event object, the following is the amount of code that you have to write to detect which mouse button is clicked. This code works in all browsers. <html> <head> <title></title> <script src="jquery-1.11.2.js"></script> <script type="text/javascript"> function whichMouseButtonClicked(event) { var whichButton; if (event.which) { switch (event.which) { case 1: whichButton = "Left Button Clicked"; break; case 2: whichButton = "Middle Button Clicked"; break; case 3: whichButton = "Right Button Clicked"; break; default: whichButton = "Invalid Button Clicked"; break; } } else { switch (event.button) { case 1: whichButton = "Left Button Clicked"; break; case 4: whichButton = "Middle Button Clicked"; break; case 2: whichButton = "Right Button Clicked"; break; default: whichButton = "Invalid Button Clicked"; break; } } document.getElementById('divResult').innerHTML = whichButton; } </script> </head> <body style="font-family:Arial"> <input id="btn" type="button" value="Click Me" onmouseup="whichMouseButtonClicked(event)" /> <br /><br /> <div id="divResult"></div> </body> </html> jQuery normalizes which property of the event object so it will work across all browsers. The amount of code you have to write is lot less. <html> <head> <title></title> <script src="jquery-1.11.2.js"></script> <script type="text/javascript"> $(document).ready(function () { $('#btn').mouseup(function (event) { switch (event.which) { case 1: whichButton = "Left Button Clicked"; break; case 2: whichButton = "Middle Button Clicked"; break; case 3: whichButton = "Right Button Clicked"; break; default: whichButton = "Invalid Button Clicked"; break; } $('#divResult').html(whichButton); }); }); </script> </head> <body style="font-family:Arial"> <input id="btn" type="button" value="Click Me" /> <br /><br /> <div id="divResult"></div> </body> </html>
Views: 31105 kudvenkat
JavaScript beginner tutorial 31 - radio buttons
 
09:20
The second part of a 2 part tutorial where I show you how to use JavaScript to find out if a radio button has been checked or not. Don't forget to subscribe: http://www.youtube.com/user/QuentinWatt Social links: ------------------------------------------------------------- Add me on twitter: http://www.twitter.com/QuentinWatt facebook group: https://www.facebook.com/quentin.watt -------------------------------------------------------------
Views: 68397 Quentin Watt Tutorials
Learn JS HTML Dom In Arabic #06 - Elements - Get, Set Attribute Value
 
09:06
تعلم كيف تحصل على محتوى ال Attribute وتغييره بسهولة سوف يتم شرح الطريقة المباشرة Element.Attribute
Views: 10308 Elzero Web School
hide Content with javascript
 
01:09
http://surveyslda.blogspot.com/ use this code to hide the content you want: document.getElementById('mainContent').style.display = 'none';
Views: 1032 JoIno
Events in JavaScript
 
17:08
Link for all dot net and sql server video tutorial playlists http://www.youtube.com/user/kudvenkat/playlists Link for slides, code samples and text version of the video http://csharp-video-tutorials.blogspot.com/2015/01/events-in-javascript.html What is an event An event is a signal from the browser that something has happened. For example, 1. When a user clicks on an HTML element, click event occurs 2. When a user moves the mouse over an HTML element, mouseover event occurs When events occur, we can execute JavaScript code or functions in response to those events. To do this we need to associate JavaScript code or functions to the events. The function that executes in response to an event is called event handler. In JavaScript, there are several ways to associate an event handler to the event 1. Using the attributes of an HTML tag 2. Using DOM object property 3. Using special methods In this video we will discuss associating event handler methods to events using the attributes of HTML tags. In the following example, the code to execute in response to onmouseover & onmouseout events is set directly in the HTML markup. The keyword "this" references the current element. In this example "this" references the button control. [input type="button" value="Click me" id="btn" onmouseover="this.style.background= 'red'; this.style.color = 'yellow'" onmouseout="this.style.background= 'black'; this.style.color = 'white'" /] The above example, can be rewritten as shown below. In this case the code to execute in response to the event is placed inside a function and then the function is associated with the event. [input type="button" value="Click me" id="btn" onmouseover="changeColorOnMouseOver()" onmouseout="changeColorOnMouseOut()" /] [script type="text/javascript"] function changeColorOnMouseOver() { var control = document.getElementById("btn"); control.style.background = 'red'; control.style.color = 'yellow'; } function changeColorOnMouseOut() { var control = document.getElementById("btn"); control.style.background = 'black'; control.style.color = 'white'; } [/script] Events are very useful in real-world applications. For example they can be used to 1. Display confirmation dialog box on submitting a form 2. Form data validation and many more How to show confirmation dialog in JavaScript [input type="submit" value="Submit" id="btn" onclick="return confirmSubmit()" /] [script type="text/javascript"] function confirmSubmit() { if (confirm("Are you sure you want to submit")) { alert("You selected OK"); return true; } else { return false; confirm("You selected cancel"); } } [/script] JavaScript form validation example : In this example, both First Name and Last Name fields are required fields. When you type the first character in any of the textbox, the background colour is automatically changed to green. If you delete all the characters you typed or if you leave the textbox without entering any characters the background colour changes to red indicating the field is required. We made this possible using onkeyup and onblur events. onkeyup occurs when the user releases a key. onblur occurs when an element loses focus. [table] [tr] [td] First Name [/td] [td] [input type="text" id="txtFirstName" onkeyup="validateRequiredField('txtFirstName')" onblur="validateRequiredField('txtFirstName')"/] [/td] [/tr] [tr] [td] Last Name [/td] [td] [input type="text" id="txtLastName" onkeyup="validateRequiredField('txtLastName')" onblur="validateRequiredField('txtLastName')"/] [/td] [/tr] [/table] [script type="text/javascript"] function validateRequiredField(controlId) { var control = document.getElementById(controlId); control.style.color = 'white'; if (control.value == "") { control.style.background = 'red'; } else { control.style.background = 'green'; } } [/script]
Views: 66467 kudvenkat
HTML ID and Class Attributes
 
04:39
Describes differences between ID and Class attributes and introduces basic usage.
Views: 1644 DudeRocking

Report attorney california bar association
Ways to structure an argumentative essay on a rose
Technical report writing today riordan
Problem solving key stage one
The must report bapen 2019