Scribd
Upload
43 views

C4 Week3

Uploaded by

klxowqcyrxqebjibkg
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
43 views

C4 Week3

Uploaded by

klxowqcyrxqebjibkg
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 22

Table of Contents

This slide deck consists of slides used in 2 lecture videos in Week 4. Below
is a list of shortcut hyperlinks for you to jump into specific sections.

• (page 2) Week 4: jQuery and the Document Object Model

• (page 11) Week 4: Using jQuery


jQuery and the DOM
•Dr. Charles Severance
•www.dj4e.com

http://www.dj4e.com/code/jquery
http://www.dj4e.com/code/jquery.zip
Vanilla JavaScript (1995)
<script type="text/javascript">
document.write("<p>Hello World</p>")
</script>

https://www.dj4e.com/code/javascript/js-01.htm

http://en.wikipedia.org/wiki/Document_Object_Model
Browser Linux
settings.py Django

Click Routing urls.py

views.py

D
O
Parse
Response
DOM
Views Templates

M forms.py

Database
Shell
JavaScript Models

model.py
/admin
admin.py
Document Object Model

• JavaScript can manipulate the current HTML


document.
• The “Document Object Model” is how we access
various “bits” of the current screen to read and/or
manipulate.
• We can even find pieces of the model by id attribute
and change them.
• We can read and write the DOM from (Vanilla)
JavaScript.
Using getElementById()

In order not to have to traverse each unique DOM, we


use a function call that all browsers support. This
allows us to bypass the DOM structure and jump to a
particular tag within the DOM and manipulate that tag.
<p>
Hello <b><span id="person">Chuck</span></b> there.
</p> dom-01.htm
<script type="text/javascript">
console.dir(document.getElementById('person'));
var st = document.getElementById('person').innerHTML;
console.log("ST = "+st);
dom-01-htm
alert('Hi there ' + st);
document.getElementById('person').innerHTML = 'Joseph';
</script>
dom-01.htm

dom-01.htm

console.dir(document.getElementById('person'));
<a href="#"
onclick="document.getElementById('stuff').innerHTML='BACK';return false;">
Back</a>
<a href="#"
onclick="document.getElementById('stuff').innerHTML='FORTH';return false;">
Forth</a>
</p>
<p>
Hello <b><span id="stuff">Stuff</span></b> there.

Updating the dom-02.htm


Browser Document

This is one reason why you can


only have one id per document.
<p> dom-03.htm
<a href="#" onclick="add();return false;">More</a>
</p>
<ul id="the-list">
<li>First Item</li>
dom-03.htm
</ul>
<script>
counter = 1;
console.log(document.getElementById('the-list'))
function add() {
var x = document.createElement('li');
x.className = "list-item";
x.innerHTML = "The counter is "+counter;
document.getElementById('the-list').appendChild(x);
counter++;
}
</script>
jQuery (2005)
jQuery to the Rescue

• While the DOMs are not particularly portable, and direct


DOM manipulation is a little clunky, there are a number of
JavaScript frameworks that handle the myriad of subtle
differences between browsers.

• With jQuery, instead of manipulating the DOM, we use


jQuery functions and everything works much better...

http://jquery.org
John Resig
• Started jQuery in 2005 to make
his web development projects
easier

• Elegant way to select DOM elements

• Clean way to register events

• Released in 2006

• Works at Khan Academy as the


“Dean of Computer Science”
jQuery Documentation

• The web is a wonderful source of jQuery documentation.

•http://docs.jquery.com/Main_Page
•http://api.jquery.com/
•http://jqueryui.com/demos/
• This lecture will only cover the basic elements of low-
level jQuery.
<html>
jquery/jq-01.htm
<head>
</head>
<body>
<p>Here is some awesome page content</p>
<script type="text/javascript" src="jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function(){
alert("Hello jQuery World!");
console.log('Hello jQuery..');
});
</script>
</body> jquery/jq-01.htm
<html
jquery/jq-02.htm jquery/jq-02.htm
<head>
</head>
<body>
<script type="text/javascript" src="jquery.min.js">
</script>
<script type="text/javascript">
$(window).resize(function() {
console.log('.resize() called. width='+
$(window).width()+' height='+$(window).height());
});
</script>
<p>Here is some awesome page content</p>
</body>
http://api.jquery.com/resize/
<p id="para">Where is the spinner?
jquery/jq-03.htm
<imgjquery/jq-03.htm
id="spinner" src="spinner.gif" height="25"
style="vertical-align: middle; display:none;">
</p><p> Where is the spinner?
<a href="#" id="tog">Toggle</a> | Toggle | Red
<a href="#" id="red">Red</a>
</p>
<script type="text/javascript">
$(document).ready(function() { Where is the spinner?
$("#tog").on('click', function() { Toggle | Red
$('#spinner').toggle();
});
$("#red").on('click', function() {
$('#para').css('background-color', 'green');
});
Where is the spinner?
}); Toggle | Red
</script>
<p>
<a href="#" id="the-href">More</a> jq-04.htm
jq-04.htm
</p>
<ul id="the-list">
<li>First Item</li>
</ul>
<script type="text/javascript"
src="jquery.min.js"> </script>
<script>
counter = 1;
$(document).ready(function(){
$("#the-href").on('click', function() {
console.log('Clicked');
$('#the-list').append('<li>The counter is '+counter+'</li>');
counter++;
});
});

</script>
Improving Browsers…

• jQuery is now > 15 years old – many people assume it


is JavaScript

• The browsers have been extending the DOM in a


portable fashion and adding features equivalent to
jQuery
// jQuery: Hide all instances with class box
$(".box").hide();

// Vanilla: Iterate over the nodelist of elements to hide all instances of .box
document.querySelectorAll(".box").forEach(box => { box.style.display = "none" }

https://tobiasahlin.com/blog/move-from-jquery-to-vanilla-javascript/
Summary

• This focused on the mechanics of low-level jQuery.

• Initialization setup
• Event handling
• DOM selection
• DOM manipulation

• Vanilla JavaScript is catching up…


Acknowledgements / Contributions
These slides are Copyright 2010- Charles R. Severance (www.dr- Continue new Contributors and Translators here
chuck.com) as part of www.dj4e.com and made available under a
Creative Commons Attribution 4.0 License. Please maintain this
last slide in all copies of the document to comply with the
attribution requirements of the license. If you make a change, feel
free to add your name and organization to the list of contributors on
this page as you republish the materials.

Initial Development: Charles Severance, University of Michigan


School of Information

Insert new Contributors and Translators here including names and


dates
Additional Source Information
• Image of John Resig Copyright Charles R. Severance and licensed as CC-BY

You might also like