JavaScript: Ajax & DOM Manipulation

JavaScript Ajax & DOM Manipulation Matthew Batchelder

Agenda ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Before We Start! ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

JS: What it is and isn’t ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

JavaScript Sandbox ,[object Object],[object Object],[object Object]

JS: Usage ,[object Object],<html> <head> <title>Example JS Page</title> <script type=“text/javascript”> // javascript code goes here </script> </head> <body> … </body> </html>

JS: Literals ,[object Object],<script type=“text/javascript”> var myNumber = 123; var myString = ‘Bork!’; var myBoolean = true; var myFunction = function(){ return ‘hello’;} var myRegExp = /bork/gi; var myArray = [1, 2, 3]; var myCarObject = { color: ‘red’, tires: 4, windows: 6 } </script>

JS: Objects ,[object Object],[object Object],<script type=“text/javascript”> var myNumber = new Number(123); var myString = new String(‘Bork!’); var myBoolean = new Boolean(true); var myFunction = new Function(‘’, “return ‘hello’”);} var myRegExp = new RegExp(‘bork’); var myArray = new Array(); myArray[0] = 1; myArray[1] = 2; myArray[2] = 3; var myCarObject = new Object(); myCarObject.color = ‘red’; myCarObject.tires = 4; myCarObject.windows = 6; </script>

JS: Objects ,[object Object],[object Object],<html> <head> <title>Examples</title> <script type="text/javascript"> var bork = 'Bork!'; var w00t = { hello: 'Greetings', yo: function(){ alert(bork + ' ' + this.hello); } }; var zomg = { nested: { iMeanReallyNested: { seriously: { out: function(){ alert('whee!'); } } } } }; w00t.yo(); zomg.nested.iMeanReallyNested.seriously.out(); </script> </head> <body> ... </body> </html>

JS: Control Structures if (bork) { //... } else { //... } while (bork) { //... } for (var i = 0; i< 10; i++) { //... } for (var element in array_of_elements) { //... } do { //... } while (bork); switch (bork) { case 1: // if bork == 1... case 'whee': // if bork == 'whee'... case false: // if bork == false... default : // otherwise ... } try { //... } catch (err) { //... }

What is the DOM? ,[object Object],[object Object],<html> <head> <title>Example JS Page</title> </head> <body> <form id=“some_form”> <input type=“text” name=“bork”/> <input type=“submit” value=“Go”/> </form> </body> </html>

Finding DOM Elements ,[object Object],[object Object],[object Object],[object Object]

DOM Element Attributes ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],DOM Attributes Node Types Here’s a good article that uses these.

Manipulating the DOM ,[object Object],[object Object],[object Object],[object Object]

innerHTML ,[object Object],[object Object],[object Object],[object Object]

Events ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Mouse Keyboard Frame/Object Form

Simple Alert Box <html> <head> <title>Example Message Box Page</title> <script type=“text/javascript”> alert(‘I like butter’); </script> </head> <body> … </body> </html>

Confirm Box Bound to an Event <html> <head> <title>Example Message Box Page</title> <script type="text/javascript"> function doLoad() { document.getElementById('sweet-link').addEventListener(‘click’, confirmClick, false); }//end doLoad function confirmClick() { return confirm(‘Are you sure you wish to go to that link?’); }//end confirmClick window.addEventListener(‘load’, doLoad, false); </script> </head> <body> <a id="sweet-link" href="http://borkweb.com">BorkWeb</a> </body> </html> example

Hiding/Displaying Elements ,[object Object],[object Object]

AJAX ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Ajax: XMLHttpRequest ,[object Object],[object Object]

WAIT!!!!!!!!!!!!! Things can actually be a bit easier. How much? Well most of the above.

WTF? jQuery. That’s what we use on campus. Its hawt.

What is jQuery? ,[object Object],[object Object],[object Object],[object Object],[object Object]

Finding Elements ,[object Object],[object Object],[object Object]

Finding Elements With $ $(‘a’) $(‘.class’) $(‘#id’) $(‘.content div’) $(‘input[name=bork]’) $(‘input:first’) Here’s an example . Check out the selector syntax for more info.

Lets do some of the stuff we already did… ,[object Object],[object Object],[object Object]

jQuery Coolness ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

jQuery Plugins ,[object Object]

jQuery in myPlymouth ,[object Object],[object Object],[object Object],[object Object],[object Object]

The End. ,[object Object],[object Object],[object Object],[object Object],[object Object]

JavaScript: Ajax & DOM Manipulation

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à JavaScript: Ajax & DOM Manipulation

Similaire à JavaScript: Ajax & DOM Manipulation (20)

Dernier

Dernier (20)

JavaScript: Ajax & DOM Manipulation