website series 4 - javascript
TRANSCRIPT
Concept Work at user’s browsers Event-triggered Still based on DOM Work on things asynchronously(非同步 ), so we need callbacks. A lot of single-purposed functions, functions, functions!
Things will go through Simple Object-Oriented Programming concepts. JavaScript jQuery DOM Tree Operations Event Handling Bootstrap Framework Some other useful libraries (Ajax)
OOP(Object-Oriented Programming)Structure
{string name = “Eugene”;int gender = 1;
//1 for male, 0 for femaleint age = 22;double GPA = 4.3 // HAHA~
}
Object{string name = “Eugene”;int gender = 1; //1 for male, 0 for femaleint age = 22;double GPA = 4.3 // HAHA~function changeGender(value) {this.gender = value;}}
OOP(Object-Oriented Programming)Structure
{string name = “Eugene”;int gender = 1;
//1 for male, 0 for femaleint age = 22;double GPA = 4.3 // HAHA~
}
Object{string name = “Eugene”;int gender = 1; //1 for male, 0 for femaleint age = 22;double GPA = 4.3 // HAHA~function changeGender(value) {this.gender = value;}}
closure
What is jQuery A very powerful library for JavaScript
Like the icon man suit for Tony Stark It is still JavaScript
What is jQuery A very powerful library for JavaScript
Like the icon man suit for Tony Stark It is still JavaScript
Select Related Methods$(‘someSelector’)…….. .find([selector]) & .children([selector]) .parents([selector]) & .parent([selector])
& .closest([selector])
Select Related Methods$(‘someSelector’)…….. .find([selector]) & .children([selector]) .parents([selector]) & .parent([selector])
& .closest([selector]) .siblings([selector])
Example$(‘.nav’) .find(‘li:nth-child(3)’) .children() .parent() .closest(‘.frame’) .siblings(‘.content’)
Element Modification$(‘someSelector’) .css({…}) .addClass(‘someClassToAdd’) & .removeClass(‘someClassToRemove’)
Element Modification$(‘someSelector’) .css({…}) .addClass(‘someClassToAdd’) & .removeClass(‘someClassToRemove’) .attr(‘someAttribute’) & .attr(‘someAttribute’,’valueToSet’)
Element Modification$(‘someSelector’) .css({…}) .addClass(‘someClassToAdd’) & .removeClass(‘someClassToRemove’) .attr(‘someAttribute’) & .attr(‘someAttribute’,’valueToSet’) .prop(‘someProperty’) & .prop(‘someProperty’,’valueToSet’)
Element Modification$(‘someSelector’) .css({…}) .addClass(‘someClassToAdd’) & .removeClass(‘someClassToRemove’) .attr(‘someAttribute’) & .attr(‘someAttribute’,’valueToSet’) .prop(‘someProperty’) & .prop(‘someProperty’,’valueToSet’) .text() & .text(‘textToSet’)
Element Modification$(‘someSelector’) .css({…}) .addClass(‘someClassToAdd’) & .removeClass(‘someClassToRemove’) .attr(‘someAttribute’) & .attr(‘someAttribute’,’valueToSet’) .prop(‘someProperty’) & .prop(‘someProperty’,’valueToSet’) .text() & .text(‘textToSet’) .val() & .val(‘valueToSet’)
Element Modification$(‘someSelector’) .css({…}) .addClass(‘someClassToAdd’) & .removeClass(‘someClassToRemove’) .attr(‘someAttribute’) & .attr(‘someAttribute’,’valueToSet’) .prop(‘someProperty’) & .prop(‘someProperty’,’valueToSet’) .text() & .text(‘textToSet’) .val() & .val(‘valueToSet’) .data(‘dataName’) & .data(‘dataName’,’valueToSet’)
Example
$(‘input[type=text]’).attr(‘name’); //name $(‘input[type=radio]’).attr(‘name’,’sex’); //set name to sex
Example
$(‘input[type=text]’).attr(‘name’); //name $(‘input[type=radio]’).attr(‘name’,’sex’); //set name to sex $(‘input[type=text]’).val(); //this is my name
Example
$(‘input[type=text]’).attr(‘name’); //name $(‘input[type=radio]’).attr(‘name’,’sex’); //set name to sex $(‘input[type=text]’).val(); //this is my name $(‘input[type=radio]’).prop(‘checked’,false); //unchecked the box
Example
$(‘input[type=text]’).attr(‘name’); //name $(‘input[type=radio]’).attr(‘name’,’sex’); //set name to sex $(‘input[type=text]’).val(); //this is my name $(‘input[type=radio]’).prop(‘checked’,false); //unchecked the box $(‘div’).data(‘from’); //myDatabase
DOM Tree Modification Create a new element
var newTag = $(‘<div>’) Clone a existed element
var clone = $(‘.template’).clone(true,true);
DOM Tree Modification Create a new element
var newTag = $(‘<div>’) Clone a existed element
var clone = $(‘.template’).clone(true,true); Remove an element (include its children)
$(‘.content’).remove(); $(‘.content’).remove(‘li.name’);
DOM Tree Modification Create a new element
var newTag = $(‘<div>’) Clone a existed element
var clone = $(‘.template’).clone(true,true); Remove an element (include its children)
$(‘.content’).remove(); $(‘.content’).remove(‘li.name’);
Clear inside an element $(‘.container’).empty();
DOM Tree Modification(conti.)Var newTag = $(‘<span>’).text(‘GO~~’);
newTag.insertAfter( $(‘.highlight’) );
DOM Tree Modification(conti.)Var newTag = $(‘<span>’).text(‘GO~~’);
newTag.insertAfter( $(‘.highlight’) );
DOM Tree Modification(conti.)Var newTag = $(‘<span>’).text(‘GO~~’);
newTag.insertAfter( $(‘.highlight’) );
DOM Tree Modification(conti.)Var newTag = $(‘<span>’).text(‘GO~~’);
newTag.insertAfter( $(‘.highlight’) );$(’.content:first-child’).append(newTag);newTag.appendTo( $(’.content:first-child’) );
DOM Tree Modification(conti.)Var newTag = $(‘<span>’).text(‘GO~~’);
newTag.insertAfter( $(‘.highlight’) );$(’.content:first-child’).append(newTag);newTag.appendTo( $(’.content:first-child’) );
DOM Tree Modification(conti.)Var newTag = $(‘<span>’).text(‘GO~~’);
newTag.insertAfter( $(‘.highlight’) );$(’.content:first-child’).append(newTag);newTag.appendTo( $(’.content:first-child’) );
DOM Tree Modification(conti.)Var newTag = $(‘<span>’).text(‘GO~~’);
newTag.insertAfter( $(‘.highlight’) );$(’.content:first-child’).append(newTag);newTag.appendTo( $(’.content:first-child’) );$(’.content:first-child’).prepend(newTag);newTag.prependTo( $(’.content:first-child’) );
DOM Tree Modification(conti.)Var newTag = $(‘<span>’).text(‘GO~~’);
newTag.insertAfter( $(‘.highlight’) );$(’.content:first-child’).append(newTag);newTag.appendTo( $(’.content:first-child’) );$(’.content:first-child’).prepend(newTag);newTag.prependTo( $(’.content:first-child’) );
DOM Tree Modification(conti.)Var newTag = $(‘<span>’).text(‘GO~~’);
newTag.insertAfter( $(‘.highlight’) );$(’.content:first-child’).append(newTag);newTag.appendTo( $(’.content:first-child’) );$(’.content:first-child’).prepend(newTag);newTag.prependTo( $(’.content:first-child’) );
DOM Tree Modification(conti.)Var newTag = $(‘<span>’).text(‘GO~~’);
newTag.insertAfter( $(‘.highlight’) );$(’.content:first-child’).append(newTag);newTag.appendTo( $(’.content:first-child’) );$(’.content:first-child’).prepend(newTag);newTag.prependTo( $(’.content:first-child’) );newTag.insertBefore( $(‘.nav’) );
DOM Tree Modification(conti.)Var newTag = $(‘<span>’).text(‘GO~~’);
newTag.insertAfter( $(‘.highlight’) );$(’.content:first-child’).append(newTag);newTag.appendTo( $(’.content:first-child’) );$(’.content:first-child’).prepend(newTag);newTag.prependTo( $(’.content:first-child’) );newTag.insertBefore( $(‘.nav’) );
DOM Tree Modification(conti.)Var newTag = $(‘<span>’).text(‘GO~~’);
newTag.insertAfter( $(‘.highlight’) );$(’.content:first-child’).append(newTag);newTag.appendTo( $(’.content:first-child’) );$(’.content:first-child’).prepend(newTag);newTag.prependTo( $(’.content:first-child’) );newTag.insertBefore( $(‘.nav’) );
DOM Element Traversal
$(‘.content’).text(‘I change it~~’); $(‘.content’).each(function(index){
$(this)…..});
DOM Element Traversal
$(‘.content’).text(‘I change it~~’); $(‘.content’).each(function(index){
$(this)…..});
ExampleClick button!
Body: capture Div: capture Button: capture Button: bubble
bodydiv
Target : Button
ExampleClick button!
Body: capture Div: capture Button: capture Button: bubble Div: bubble
bodydiv
Target : Button
ExampleClick button!
Body: capture Div: capture Button: capture Button: bubble Div: bubble Body: bubble
bodydiv
Target : Button
Event Handling(Listening)
keycode
http://www.asquare.net/javascript/tests/KeyCode.html
Additional Topic: Delegation2 ways to bind event on buttons Bind event directly on buttons Bind event on <div>, and listen
events that target is button
The latter one is called “delegation”Syntaxes are almost the same but actually 2 different things
body
div
Target : Button
Target : Button
Target : Button
Target : Button
Target : Button
Target : Button
Delegation Syntaxbody
div
Target : Button
Target : Button
Target : Button
Target : Button
Target : Button
Target : Button
Bootstrap Framework
http://getbootstrap.com/http://pikock.github.io/bootstrap-magic/app/index.html#!/editor
Some Other Fabulous JS Libraries Underscore.js
http://underscorejs.org/ Backbone.js
http://backbonejs.org/ AngularJS
https://angularjs.org/ React.js
https://facebook.github.io/react/
Conclusion JavaScript is really magical. It is passive! Many libraries out there. Google it! Don’t do the same things again and again, find a simple way. JS is programming language! Don’t forget if else, for, while…
Reference jQuery API Documentation
http://api.jquery.com/ JavaScript Tutorial – Bubbling and Capturing
http://javascript.info/tutorial/bubbling-and-capturing