website series 4 - javascript

JavaScript5/7 - Website Series 4

[email protected]

mailto:[email protected]

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

DOM(Document Object Model) Tree<body>

.header

.logo .nav

.content

.article .article .article

jQuery MethodsjQuery

Utilities

DOM

Events

Ajax

Place to put jQuery

Place to put jQuery

Include the library

Place to put jQuery

Include the library

Bad Way!

Basic JavaScript Syntax

jQuery Syntax

$(function(){$(‘selector’).method().method()......…});

Select Related Methods$(‘someSelector’)……..

Select Related Methods$(‘someSelector’)…….. .find([selector]) & .children([selector])

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

Example$(‘.nav’)

Example$(‘.nav’) .find(‘li:nth-child(3)’)

Example$(‘.nav’) .find(‘li:nth-child(3)’) .children()

Example$(‘.nav’) .find(‘li:nth-child(3)’) .children() .parent()

Example$(‘.nav’) .find(‘li:nth-child(3)’) .children() .parent() .closest(‘.frame’)

Example$(‘.nav’) .find(‘li:nth-child(3)’) .children() .parent() .closest(‘.frame’) .siblings(‘.content’)

Element Modification$(‘someSelector’)

Element Modification$(‘someSelector’) .css({…})

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

Example

$(‘input[type=text]’).attr(‘name’); //name

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

DOM Tree Modification Create a new element

var newTag = $(‘<div>’)


var newTag = $(‘<div>’) Clone a existed element

var clone = $(‘.template’).clone(true,true);



var clone = $(‘.template’).clone(true,true); Remove an element (include its children)

$(‘.content’).remove(); $(‘.content’).remove(‘li.name’);



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’) );


newTag.insertAfter( $(‘.highlight’) );$(’.content:first-child’).append(newTag);newTag.appendTo( $(’.content:first-child’) );


newTag.insertAfter( $(‘.highlight’) );$(’.content:first-child’).append(newTag);newTag.appendTo( $(’.content:first-child’) );$(’.content:first-child’).prepend(newTag);newTag.prependTo( $(’.content:first-child’) );


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)…..});

Basic Animation .show() .hide() .fadeIn() .fadeOut() .animate(…)

DOM Events Click Hover Focus Change Keydown & Keypress Load … (Even custom events)

Event Model

Target

Capturing Bubbling

ExampleClick button!

bodydiv

Target : Button


Body: capture

bodydiv

Target : Button


Body: capture Div: capture

bodydiv

Target : Button


Body: capture Div: capture Button: capture

bodydiv

Target : Button


Body: capture Div: capture Button: capture Button: bubble

bodydiv

Target : Button


Body: capture Div: capture Button: capture Button: bubble Div: bubble

bodydiv

Target : Button


Body: capture Div: capture Button: capture Button: bubble Div: bubble Body: bubble

bodydiv

Target : Button

Event Handling(Listening)


keycode


keycode

http://www.asquare.net/javascript/tests/KeyCode.html

http://www.asquare.net/javascript/tests/KeyCode.html

Event Triggering(firing)

Example: @index.html

@layout_2_ex.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

http://getbootstrap.com/

http://getbootstrap.com/

http://pikock.github.io/bootstrap-magic/app/index.html#!/editor

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/

http://underscorejs.org/

http://underscorejs.org/

http://backbonejs.org/

http://backbonejs.org/

https://angularjs.org/

https://angularjs.org/



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

http://api.jquery.com/

http://api.jquery.com/



website series 4 - javascript

Engineering