SlideShare a Scribd company logo
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],[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=&quot;text/javascript&quot;> 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=&quot;text/javascript&quot;> 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=&quot;sweet-link&quot; href=&quot;http://borkweb.com&quot;>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],[object Object]
Ajax: XMLHttpRequest ,[object Object],<script type=&quot;text/javascript&quot;> function ajax(url, vars, callbackFunction){  var request = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject(&quot;MSXML2.XMLHTTP.3.0&quot;);  request.open(&quot;GET&quot;, url, true); request.setRequestHeader(&quot;Content-Type&quot;, &quot;application/x-www-form-urlencoded&quot;);  request.onreadystatechange = function(){ if (request.readyState == 4 && request.status == 200){ if (request.responseText){ callbackFunction(request.responseText); } } }; request.send(vars); }//end ajax function out(text){ document.getElementById('content').innerHTML = text; }//end out function ajaxCall(){ ajax('http://borkweb.com/examples/js_workshop/dynamic_content1.html','',out);return false; }//end ajaxCall  function doLoad(){ document.getElementById('sweet-link').addEventListener('click', ajaxCall, false); }//doLoad  window.addEventListener('load', doLoad, false);  </script> ,[object Object]
Things can actually be a bit easier. How much?  Well most of the above.
jQuery.  That’s what we use on campus.  It is awesome.
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]
Resources:  Slide Examples ,  jQuery ,  Image Sprites ,  Mega Man !

More Related Content

What's hot

Introduction to Prototype JS Framework
Introduction to Prototype JS FrameworkIntroduction to Prototype JS Framework
Introduction to Prototype JS Framework
Mohd Imran
 
JavaScript and jQuery Basics
JavaScript and jQuery BasicsJavaScript and jQuery Basics
JavaScript and jQuery Basics
Kaloyan Kosev
 
jQuery PPT
jQuery PPTjQuery PPT
jQuery PPT
Dominic Arrojado
 
jQuery Presentation
jQuery PresentationjQuery Presentation
jQuery Presentation
Rod Johnson
 
Devoxx 2014-webComponents
Devoxx 2014-webComponentsDevoxx 2014-webComponents
Devoxx 2014-webComponents
Cyril Balit
 
jQuery basics
jQuery basicsjQuery basics
jQuery basics
Stijn Van Minnebruggen
 
JavaScript DOM & event
JavaScript DOM & eventJavaScript DOM & event
JavaScript DOM & eventBorey Lim
 
J Query Public
J Query PublicJ Query Public
J Query Public
pradeepsilamkoti
 
Introduction to jQuery
Introduction to jQueryIntroduction to jQuery
Introduction to jQuery
Gunjan Kumar
 
jQuery
jQueryjQuery
Learn javascript easy steps
Learn javascript easy stepsLearn javascript easy steps
Learn javascript easy steps
prince Loffar
 
Html, CSS, Javascript, Jquery, Meteor應用
Html, CSS, Javascript, Jquery, Meteor應用Html, CSS, Javascript, Jquery, Meteor應用
Html, CSS, Javascript, Jquery, Meteor應用
LearningTech
 
jQuery
jQueryjQuery
jQuery
jQueryjQuery
Java Script
Java ScriptJava Script
Java Script
SURBHI SAROHA
 
jQuery from the very beginning
jQuery from the very beginningjQuery from the very beginning
jQuery from the very beginning
Anis Ahmad
 
FYBSC IT Web Programming Unit III Document Object
FYBSC IT Web Programming Unit III  Document ObjectFYBSC IT Web Programming Unit III  Document Object
FYBSC IT Web Programming Unit III Document Object
Arti Parab Academics
 
Internet and Web Technology (CLASS-9) [React.js] | NIC/NIELIT Web Technology
Internet and Web Technology (CLASS-9) [React.js] | NIC/NIELIT Web TechnologyInternet and Web Technology (CLASS-9) [React.js] | NIC/NIELIT Web Technology
Internet and Web Technology (CLASS-9) [React.js] | NIC/NIELIT Web Technology
Ayes Chinmay
 
Java script
Java scriptJava script
Java script
vishal choudhary
 
1. java script language fundamentals
1. java script language fundamentals1. java script language fundamentals
1. java script language fundamentals
Rajiv Gupta
 

What's hot (20)

Introduction to Prototype JS Framework
Introduction to Prototype JS FrameworkIntroduction to Prototype JS Framework
Introduction to Prototype JS Framework
 
JavaScript and jQuery Basics
JavaScript and jQuery BasicsJavaScript and jQuery Basics
JavaScript and jQuery Basics
 
jQuery PPT
jQuery PPTjQuery PPT
jQuery PPT
 
jQuery Presentation
jQuery PresentationjQuery Presentation
jQuery Presentation
 
Devoxx 2014-webComponents
Devoxx 2014-webComponentsDevoxx 2014-webComponents
Devoxx 2014-webComponents
 
jQuery basics
jQuery basicsjQuery basics
jQuery basics
 
JavaScript DOM & event
JavaScript DOM & eventJavaScript DOM & event
JavaScript DOM & event
 
J Query Public
J Query PublicJ Query Public
J Query Public
 
Introduction to jQuery
Introduction to jQueryIntroduction to jQuery
Introduction to jQuery
 
jQuery
jQueryjQuery
jQuery
 
Learn javascript easy steps
Learn javascript easy stepsLearn javascript easy steps
Learn javascript easy steps
 
Html, CSS, Javascript, Jquery, Meteor應用
Html, CSS, Javascript, Jquery, Meteor應用Html, CSS, Javascript, Jquery, Meteor應用
Html, CSS, Javascript, Jquery, Meteor應用
 
jQuery
jQueryjQuery
jQuery
 
jQuery
jQueryjQuery
jQuery
 
Java Script
Java ScriptJava Script
Java Script
 
jQuery from the very beginning
jQuery from the very beginningjQuery from the very beginning
jQuery from the very beginning
 
FYBSC IT Web Programming Unit III Document Object
FYBSC IT Web Programming Unit III  Document ObjectFYBSC IT Web Programming Unit III  Document Object
FYBSC IT Web Programming Unit III Document Object
 
Internet and Web Technology (CLASS-9) [React.js] | NIC/NIELIT Web Technology
Internet and Web Technology (CLASS-9) [React.js] | NIC/NIELIT Web TechnologyInternet and Web Technology (CLASS-9) [React.js] | NIC/NIELIT Web Technology
Internet and Web Technology (CLASS-9) [React.js] | NIC/NIELIT Web Technology
 
Java script
Java scriptJava script
Java script
 
1. java script language fundamentals
1. java script language fundamentals1. java script language fundamentals
1. java script language fundamentals
 

Viewers also liked

JavaScript Basics And DOM Manipulation
JavaScript Basics And DOM ManipulationJavaScript Basics And DOM Manipulation
JavaScript Basics And DOM Manipulation
Siarhei Barysiuk
 
Document Object Model
Document Object ModelDocument Object Model
Document Object Model
Mayur Mudgal
 
DOM ( Document Object Model )
DOM ( Document Object Model )DOM ( Document Object Model )
DOM ( Document Object Model )ITSTB
 
Document object model(dom)
Document object model(dom)Document object model(dom)
Document object model(dom)
rahul kundu
 
Document Object Model
Document Object ModelDocument Object Model
Document Object Modelchomas kandar
 

Viewers also liked (6)

JavaScript Basics And DOM Manipulation
JavaScript Basics And DOM ManipulationJavaScript Basics And DOM Manipulation
JavaScript Basics And DOM Manipulation
 
Document Object Model
Document Object ModelDocument Object Model
Document Object Model
 
DOM ( Document Object Model )
DOM ( Document Object Model )DOM ( Document Object Model )
DOM ( Document Object Model )
 
Document Object Model
Document Object ModelDocument Object Model
Document Object Model
 
Document object model(dom)
Document object model(dom)Document object model(dom)
Document object model(dom)
 
Document Object Model
Document Object ModelDocument Object Model
Document Object Model
 

Similar to Javascript: Ajax & DOM Manipulation v1.2

Developing and testing ajax components
Developing and testing ajax componentsDeveloping and testing ajax components
Developing and testing ajax components
Ignacio Coloma
 
Java Script
Java ScriptJava Script
Java Script
siddaram
 
Javascript 2009
Javascript 2009Javascript 2009
Javascript 2009
borkweb
 
Javascript
JavascriptJavascript
Javascript
mussawir20
 
Ajax
AjaxAjax
Ajax
AjaxAjax
AJAX Workshop Notes
AJAX Workshop NotesAJAX Workshop Notes
AJAX Workshop Notes
Pamela Fox
 
Introduction to JQuery
Introduction to JQueryIntroduction to JQuery
Introduction to JQuery
MobME Technical
 
jQuery introduction
jQuery introductionjQuery introduction
jQuery introduction
Tomi Juhola
 
ActiveWeb: Chicago Java User Group Presentation
ActiveWeb: Chicago Java User Group PresentationActiveWeb: Chicago Java User Group Presentation
ActiveWeb: Chicago Java User Group Presentation
ipolevoy
 
JWU Guest Talk: JavaScript and AJAX
JWU Guest Talk: JavaScript and AJAXJWU Guest Talk: JavaScript and AJAX
JWU Guest Talk: JavaScript and AJAX
Hilary Mason
 
Javascript Templating
Javascript TemplatingJavascript Templating
Javascript Templating
bcruhl
 
Microsoft and jQuery
Microsoft and jQueryMicrosoft and jQuery
Microsoft and jQuery
Eric ShangKuan
 
my test
my testmy test
my test
lu jimmy
 

Similar to Javascript: Ajax & DOM Manipulation v1.2 (20)

Developing and testing ajax components
Developing and testing ajax componentsDeveloping and testing ajax components
Developing and testing ajax components
 
Java Script
Java ScriptJava Script
Java Script
 
Javascript 2009
Javascript 2009Javascript 2009
Javascript 2009
 
Javascript
JavascriptJavascript
Javascript
 
Ajax
AjaxAjax
Ajax
 
Ajax
AjaxAjax
Ajax
 
Ajaxppt
AjaxpptAjaxppt
Ajaxppt
 
Ajaxppt
AjaxpptAjaxppt
Ajaxppt
 
AJAX Workshop Notes
AJAX Workshop NotesAJAX Workshop Notes
AJAX Workshop Notes
 
Ajax
AjaxAjax
Ajax
 
Introduction to JQuery
Introduction to JQueryIntroduction to JQuery
Introduction to JQuery
 
Ajax Ppt
Ajax PptAjax Ppt
Ajax Ppt
 
Ajax ppt
Ajax pptAjax ppt
Ajax ppt
 
jQuery introduction
jQuery introductionjQuery introduction
jQuery introduction
 
Vb.Net Web Forms
Vb.Net  Web FormsVb.Net  Web Forms
Vb.Net Web Forms
 
ActiveWeb: Chicago Java User Group Presentation
ActiveWeb: Chicago Java User Group PresentationActiveWeb: Chicago Java User Group Presentation
ActiveWeb: Chicago Java User Group Presentation
 
JWU Guest Talk: JavaScript and AJAX
JWU Guest Talk: JavaScript and AJAXJWU Guest Talk: JavaScript and AJAX
JWU Guest Talk: JavaScript and AJAX
 
Javascript Templating
Javascript TemplatingJavascript Templating
Javascript Templating
 
Microsoft and jQuery
Microsoft and jQueryMicrosoft and jQuery
Microsoft and jQuery
 
my test
my testmy test
my test
 

Recently uploaded

State of ICS and IoT Cyber Threat Landscape Report 2024 preview
State of ICS and IoT Cyber Threat Landscape Report 2024 previewState of ICS and IoT Cyber Threat Landscape Report 2024 preview
State of ICS and IoT Cyber Threat Landscape Report 2024 preview
Prayukth K V
 
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdfFIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance
 
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdfFIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance
 
Bits & Pixels using AI for Good.........
Bits & Pixels using AI for Good.........Bits & Pixels using AI for Good.........
Bits & Pixels using AI for Good.........
Alison B. Lowndes
 
From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...
From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...
From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...
Product School
 
Leading Change strategies and insights for effective change management pdf 1.pdf
Leading Change strategies and insights for effective change management pdf 1.pdfLeading Change strategies and insights for effective change management pdf 1.pdf
Leading Change strategies and insights for effective change management pdf 1.pdf
OnBoard
 
PHP Frameworks: I want to break free (IPC Berlin 2024)
PHP Frameworks: I want to break free (IPC Berlin 2024)PHP Frameworks: I want to break free (IPC Berlin 2024)
PHP Frameworks: I want to break free (IPC Berlin 2024)
Ralf Eggert
 
UiPath Test Automation using UiPath Test Suite series, part 4
UiPath Test Automation using UiPath Test Suite series, part 4UiPath Test Automation using UiPath Test Suite series, part 4
UiPath Test Automation using UiPath Test Suite series, part 4
DianaGray10
 
DevOps and Testing slides at DASA Connect
DevOps and Testing slides at DASA ConnectDevOps and Testing slides at DASA Connect
DevOps and Testing slides at DASA Connect
Kari Kakkonen
 
JMeter webinar - integration with InfluxDB and Grafana
JMeter webinar - integration with InfluxDB and GrafanaJMeter webinar - integration with InfluxDB and Grafana
JMeter webinar - integration with InfluxDB and Grafana
RTTS
 
ODC, Data Fabric and Architecture User Group
ODC, Data Fabric and Architecture User GroupODC, Data Fabric and Architecture User Group
ODC, Data Fabric and Architecture User Group
CatarinaPereira64715
 
Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...
Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...
Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...
Ramesh Iyer
 
Search and Society: Reimagining Information Access for Radical Futures
Search and Society: Reimagining Information Access for Radical FuturesSearch and Society: Reimagining Information Access for Radical Futures
Search and Society: Reimagining Information Access for Radical Futures
Bhaskar Mitra
 
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
DanBrown980551
 
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
Tobias Schneck
 
IOS-PENTESTING-BEGINNERS-PRACTICAL-GUIDE-.pptx
IOS-PENTESTING-BEGINNERS-PRACTICAL-GUIDE-.pptxIOS-PENTESTING-BEGINNERS-PRACTICAL-GUIDE-.pptx
IOS-PENTESTING-BEGINNERS-PRACTICAL-GUIDE-.pptx
Abida Shariff
 
Knowledge engineering: from people to machines and back
Knowledge engineering: from people to machines and backKnowledge engineering: from people to machines and back
Knowledge engineering: from people to machines and back
Elena Simperl
 
The Future of Platform Engineering
The Future of Platform EngineeringThe Future of Platform Engineering
The Future of Platform Engineering
Jemma Hussein Allen
 
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
Product School
 
UiPath Test Automation using UiPath Test Suite series, part 3
UiPath Test Automation using UiPath Test Suite series, part 3UiPath Test Automation using UiPath Test Suite series, part 3
UiPath Test Automation using UiPath Test Suite series, part 3
DianaGray10
 

Recently uploaded (20)

State of ICS and IoT Cyber Threat Landscape Report 2024 preview
State of ICS and IoT Cyber Threat Landscape Report 2024 previewState of ICS and IoT Cyber Threat Landscape Report 2024 preview
State of ICS and IoT Cyber Threat Landscape Report 2024 preview
 
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdfFIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
FIDO Alliance Osaka Seminar: Passkeys at Amazon.pdf
 
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdfFIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
 
Bits & Pixels using AI for Good.........
Bits & Pixels using AI for Good.........Bits & Pixels using AI for Good.........
Bits & Pixels using AI for Good.........
 
From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...
From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...
From Siloed Products to Connected Ecosystem: Building a Sustainable and Scala...
 
Leading Change strategies and insights for effective change management pdf 1.pdf
Leading Change strategies and insights for effective change management pdf 1.pdfLeading Change strategies and insights for effective change management pdf 1.pdf
Leading Change strategies and insights for effective change management pdf 1.pdf
 
PHP Frameworks: I want to break free (IPC Berlin 2024)
PHP Frameworks: I want to break free (IPC Berlin 2024)PHP Frameworks: I want to break free (IPC Berlin 2024)
PHP Frameworks: I want to break free (IPC Berlin 2024)
 
UiPath Test Automation using UiPath Test Suite series, part 4
UiPath Test Automation using UiPath Test Suite series, part 4UiPath Test Automation using UiPath Test Suite series, part 4
UiPath Test Automation using UiPath Test Suite series, part 4
 
DevOps and Testing slides at DASA Connect
DevOps and Testing slides at DASA ConnectDevOps and Testing slides at DASA Connect
DevOps and Testing slides at DASA Connect
 
JMeter webinar - integration with InfluxDB and Grafana
JMeter webinar - integration with InfluxDB and GrafanaJMeter webinar - integration with InfluxDB and Grafana
JMeter webinar - integration with InfluxDB and Grafana
 
ODC, Data Fabric and Architecture User Group
ODC, Data Fabric and Architecture User GroupODC, Data Fabric and Architecture User Group
ODC, Data Fabric and Architecture User Group
 
Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...
Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...
Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...
 
Search and Society: Reimagining Information Access for Radical Futures
Search and Society: Reimagining Information Access for Radical FuturesSearch and Society: Reimagining Information Access for Radical Futures
Search and Society: Reimagining Information Access for Radical Futures
 
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
 
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
 
IOS-PENTESTING-BEGINNERS-PRACTICAL-GUIDE-.pptx
IOS-PENTESTING-BEGINNERS-PRACTICAL-GUIDE-.pptxIOS-PENTESTING-BEGINNERS-PRACTICAL-GUIDE-.pptx
IOS-PENTESTING-BEGINNERS-PRACTICAL-GUIDE-.pptx
 
Knowledge engineering: from people to machines and back
Knowledge engineering: from people to machines and backKnowledge engineering: from people to machines and back
Knowledge engineering: from people to machines and back
 
The Future of Platform Engineering
The Future of Platform EngineeringThe Future of Platform Engineering
The Future of Platform Engineering
 
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
 
UiPath Test Automation using UiPath Test Suite series, part 3
UiPath Test Automation using UiPath Test Suite series, part 3UiPath Test Automation using UiPath Test Suite series, part 3
UiPath Test Automation using UiPath Test Suite series, part 3
 

Javascript: Ajax & DOM Manipulation v1.2

  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10. 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) { //... }
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17. Simple Alert Box <html> <head> <title>Example Message Box Page</title> <script type=“text/javascript”> alert(‘I like butter’); </script> </head> <body> … </body> </html>
  • 18. Confirm Box Bound to an Event <html> <head> <title>Example Message Box Page</title> <script type=&quot;text/javascript&quot;> 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=&quot;sweet-link&quot; href=&quot;http://borkweb.com&quot;>BorkWeb</a> </body> </html> example
  • 19.
  • 20.
  • 21.
  • 22. Things can actually be a bit easier. How much? Well most of the above.
  • 23. jQuery. That’s what we use on campus. It is awesome.
  • 24.
  • 25.
  • 26. 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.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31. Resources: Slide Examples , jQuery , Image Sprites , Mega Man !