SlideShare a Scribd company logo

javascript networking

1 of 13
Download to read offline
S53

#4
4-1 Sync, ASync
4-2 Image
4-3 ajax
4-4 script

2012.11.07 20:30 ~ 22:30
Sync, OrderCycle                                            Async
a = 3;                    Order1                                         Order1
while( a++ < 100);
                     start - wait - end                             start - wait - end

alert( a );

                          Order2          a = 3;                         Order2
                     start - wait - end   run( end );               start - wait - end

                                          b = 3;

                          Order3          function end(){
                                            alert( a );
                                                                         Order3
                     start - wait - end   }                         start - wait - end



                                                                         Listener
                                                                    start - wait - end
Sync
        Order1          a = 3;                                  Order1
   start - wait - end   while( a++ < 100);                 start - wait - end

                        alert( a );


        Order2                                                  Order2
                                      a = 3;
   start - wait - end                                        loop - break
                                      while( 1 ){
                                        if( a++ == 100 )
                                            break;
        Order3                        }
                                                                Order3
   start - wait - end                 alert( a );          start - wait - end
Sync
a = 3;                                                  Order1
function loop(){
                                                   start - wait - end
  if( a++ == 100 ){
     next();
  }else{
     setTimeout( loop, 1 );
  }
                                                   Order function2
                              a = 3;
}                                                      timer
loop();                       while( 1 ){
                                if( a++ == 100 )
function next(){                    break;
  alert( a );                 }
}                                                  Order function3
                              alert( a );
Async
a = 3;                        a = 3;

function loop(){              function loop( $end ){
  if( a++ == 100 ){             if( a++ == 100 ){
     next();                       $end();
  }else{                        }else{
     setTimeout( loop, 1 );        setTimeout( loop, 1 );
  }                             }
}                             }
loop();                       loop( next );

function next(){              function next(){
  alert( a );                   alert( a );
}                             }
Image
Create Image Element
1. <img id="id"/> | var img = document.getElementById( 'id' );
2. var img = document.createElement( 'img' );
3. var img = new Image;

Start Networking
img.src = url

OnLoad
img.onload = function(){..};

complete
img.complete == true

Recommended

Javascrpt arale
Javascrpt araleJavascrpt arale
Javascrpt araleAlipay
 
Javascript i wydajność - czy to się spina?
Javascript i wydajność - czy to się spina?Javascript i wydajność - czy to się spina?
Javascript i wydajność - czy to się spina?Michał Kostrzyński
 
Comprendre la programmation fonctionnelle, Blend Web Mix le 02/11/2016
Comprendre la programmation fonctionnelle, Blend Web Mix le 02/11/2016Comprendre la programmation fonctionnelle, Blend Web Mix le 02/11/2016
Comprendre la programmation fonctionnelle, Blend Web Mix le 02/11/2016Loïc Knuchel
 
Visualizaciones gráficas con js
Visualizaciones gráficas con jsVisualizaciones gráficas con js
Visualizaciones gráficas con jsFacundo Ferrero
 
Java Thread Cronometro
Java Thread CronometroJava Thread Cronometro
Java Thread Cronometrojubacalo
 

More Related Content

What's hot

Bab 1 sistem kontrol
Bab 1 sistem kontrolBab 1 sistem kontrol
Bab 1 sistem kontroluli mufaiz
 
Java AWT Calculadora
Java AWT CalculadoraJava AWT Calculadora
Java AWT Calculadorajubacalo
 
I will be callback/JS同步與非同步
I will be callback/JS同步與非同步I will be callback/JS同步與非同步
I will be callback/JS同步與非同步ZenChou2
 
Most Common JavaScript Mistakes
Most Common JavaScript MistakesMost Common JavaScript Mistakes
Most Common JavaScript MistakesYoann Gotthilf
 
Тененёв Анатолий, Boost.Asio в алгоритмической торговле
Тененёв Анатолий, Boost.Asio в алгоритмической торговлеТененёв Анатолий, Boost.Asio в алгоритмической торговле
Тененёв Анатолий, Boost.Asio в алгоритмической торговлеPlatonov Sergey
 
Hyrje openmp
Hyrje openmpHyrje openmp
Hyrje openmpL Dr
 
openFrameworks基礎 動きを生みだす、アニメーション入門 - 芸大グラフィックスプログラミング演習B
openFrameworks基礎 動きを生みだす、アニメーション入門 - 芸大グラフィックスプログラミング演習BopenFrameworks基礎 動きを生みだす、アニメーション入門 - 芸大グラフィックスプログラミング演習B
openFrameworks基礎 動きを生みだす、アニメーション入門 - 芸大グラフィックスプログラミング演習BAtsushi Tadokoro
 
Trauma notes 2nd test
Trauma notes 2nd testTrauma notes 2nd test
Trauma notes 2nd testRbk Pña
 

What's hot (11)

Bab 1 sistem kontrol
Bab 1 sistem kontrolBab 1 sistem kontrol
Bab 1 sistem kontrol
 
Java AWT Calculadora
Java AWT CalculadoraJava AWT Calculadora
Java AWT Calculadora
 
I will be callback/JS同步與非同步
I will be callback/JS同步與非同步I will be callback/JS同步與非同步
I will be callback/JS同步與非同步
 
Most Common JavaScript Mistakes
Most Common JavaScript MistakesMost Common JavaScript Mistakes
Most Common JavaScript Mistakes
 
Тененёв Анатолий, Boost.Asio в алгоритмической торговле
Тененёв Анатолий, Boost.Asio в алгоритмической торговлеТененёв Анатолий, Boost.Asio в алгоритмической торговле
Тененёв Анатолий, Boost.Asio в алгоритмической торговле
 
Bpsc 1
Bpsc 1Bpsc 1
Bpsc 1
 
Rech. op. ch2
Rech. op. ch2Rech. op. ch2
Rech. op. ch2
 
Hyrje openmp
Hyrje openmpHyrje openmp
Hyrje openmp
 
Sbaw090630
Sbaw090630Sbaw090630
Sbaw090630
 
openFrameworks基礎 動きを生みだす、アニメーション入門 - 芸大グラフィックスプログラミング演習B
openFrameworks基礎 動きを生みだす、アニメーション入門 - 芸大グラフィックスプログラミング演習BopenFrameworks基礎 動きを生みだす、アニメーション入門 - 芸大グラフィックスプログラミング演習B
openFrameworks基礎 動きを生みだす、アニメーション入門 - 芸大グラフィックスプログラミング演習B
 
Trauma notes 2nd test
Trauma notes 2nd testTrauma notes 2nd test
Trauma notes 2nd test
 

Viewers also liked

Diapositivas correo institucional aula virtual
Diapositivas correo institucional aula virtualDiapositivas correo institucional aula virtual
Diapositivas correo institucional aula virtualncorre
 
Hollywood Lessons slides
Hollywood Lessons slidesHollywood Lessons slides
Hollywood Lessons slidesiamnickrobinson
 
Diapositivas correo institucional aula virtual uniminuto
Diapositivas correo institucional aula virtual uniminutoDiapositivas correo institucional aula virtual uniminuto
Diapositivas correo institucional aula virtual uniminutoncorre
 
Autobiography and plans 會計導論自傳
Autobiography and plans  會計導論自傳Autobiography and plans  會計導論自傳
Autobiography and plans 會計導論自傳WenTing Hu
 
Dobiotech executive summary - biofuels new technologies - BME-MAB
Dobiotech executive summary - biofuels new technologies - BME-MAB Dobiotech executive summary - biofuels new technologies - BME-MAB
Dobiotech executive summary - biofuels new technologies - BME-MAB dudito
 
Dalermehndi
DalermehndiDalermehndi
Dalermehndipopsongs
 
Dobiotech presentation & corporative Image
Dobiotech presentation & corporative ImageDobiotech presentation & corporative Image
Dobiotech presentation & corporative Imagedudito
 

Viewers also liked (9)

Diapositivas correo institucional aula virtual
Diapositivas correo institucional aula virtualDiapositivas correo institucional aula virtual
Diapositivas correo institucional aula virtual
 
Hollywood Lessons slides
Hollywood Lessons slidesHollywood Lessons slides
Hollywood Lessons slides
 
Diapositivas correo institucional aula virtual uniminuto
Diapositivas correo institucional aula virtual uniminutoDiapositivas correo institucional aula virtual uniminuto
Diapositivas correo institucional aula virtual uniminuto
 
Autobiography and plans 會計導論自傳
Autobiography and plans  會計導論自傳Autobiography and plans  會計導論自傳
Autobiography and plans 會計導論自傳
 
Dobiotech executive summary - biofuels new technologies - BME-MAB
Dobiotech executive summary - biofuels new technologies - BME-MAB Dobiotech executive summary - biofuels new technologies - BME-MAB
Dobiotech executive summary - biofuels new technologies - BME-MAB
 
The journey of life
The journey of lifeThe journey of life
The journey of life
 
SXSW Scripty panel
SXSW Scripty panelSXSW Scripty panel
SXSW Scripty panel
 
Dalermehndi
DalermehndiDalermehndi
Dalermehndi
 
Dobiotech presentation & corporative Image
Dobiotech presentation & corporative ImageDobiotech presentation & corporative Image
Dobiotech presentation & corporative Image
 

javascript networking

  • 1. S53 #4 4-1 Sync, ASync 4-2 Image 4-3 ajax 4-4 script 2012.11.07 20:30 ~ 22:30
  • 2. Sync, OrderCycle Async a = 3; Order1 Order1 while( a++ < 100); start - wait - end start - wait - end alert( a ); Order2 a = 3; Order2 start - wait - end run( end ); start - wait - end b = 3; Order3 function end(){ alert( a ); Order3 start - wait - end } start - wait - end Listener start - wait - end
  • 3. Sync Order1 a = 3; Order1 start - wait - end while( a++ < 100); start - wait - end alert( a ); Order2 Order2 a = 3; start - wait - end loop - break while( 1 ){ if( a++ == 100 ) break; Order3 } Order3 start - wait - end alert( a ); start - wait - end
  • 4. Sync a = 3; Order1 function loop(){ start - wait - end if( a++ == 100 ){ next(); }else{ setTimeout( loop, 1 ); } Order function2 a = 3; } timer loop(); while( 1 ){ if( a++ == 100 ) function next(){ break; alert( a ); } } Order function3 alert( a );
  • 5. Async a = 3; a = 3; function loop(){ function loop( $end ){ if( a++ == 100 ){ if( a++ == 100 ){ next(); $end(); }else{ }else{ setTimeout( loop, 1 ); setTimeout( loop, 1 ); } } } } loop(); loop( next ); function next(){ function next(){ alert( a ); alert( a ); } }
  • 6. Image Create Image Element 1. <img id="id"/> | var img = document.getElementById( 'id' ); 2. var img = document.createElement( 'img' ); 3. var img = new Image; Start Networking img.src = url OnLoad img.onload = function(){..}; complete img.complete == true
  • 7. Image if( window['HTMLCanvasElement'] ){ if( window['HTMLCanvasElement'] ){ function onload( img, complete ){ //onload img.onload = function(){ }else{ complete( img ); //img.complete }; } } }else{ function onload( img, complete ){ function check(){ if( img.complete ){ complete( img ); var img = new Image; }else{ setTimeout( check, 10 ); onload( img, function( $img ){ } alert( $img ); } } ); check(); } }
  • 8. Image function ImageLoader( $complete ){ if( window['HTMLCanvasElement'] ){ function loaded( $img ){ function onload( img, complete ){ arg[arg.indexOf( $img.src )] = $img; img.onload = function(){ if( ++count == arg.length ){ complete( img ); $complete( arg ); }; } } } }else{ function onload( img, complete ){ var i, j, img, arg, count; function check(){ arg = Array.prototype.slice.call( arguments, 1 ); if( img.complete ){ count = 0; complete( img ); for( i = 1, j = arguments.length ; i < j ; i++ ){ }else{ img = new Image; setTimeout( check, 10 ); onload( img, loaded ); } img.src = arguments[i]; } } check(); } } } ImageLoader( complete, 'a.jpg', 'b.jpg', 'c,jpg' ); function complete( $images ){ alert( $images.length ); }
  • 9. ajax Create xhr load var xhr; function onload( $xhr, $complete ){ if( $w['XMLHttpRequest'] ){ var timer; xhr = function(){ $xhr.onreadystatechange = function(){ return new XMLHttpRequest; if( $xhr.readyState != 4 ) return; }; if( timer < 0 ) return; }else{ clearTimeout( timer ), timer = -1; xhr = ( function(){ if( $xhr.status == 200 || $xhr.status == 0 ){ var temp, i, j; $complete( $xhr.responseText, $xhr ); temp = [ }else{ 'Microsoft.XMLHTTP', $complete( null, $xhr ); 'MSXML2.XMLHTTP', } 'MSXML2.XMLHTTP.3.0', }; 'MSXML2.XMLHTTP.4.0', timer = setTimeout( function(){ 'MSXML2.XMLHTTP.5.0' if( timer < 0 ) return; ]; timer = -1; i = temp.length; if( $ complete ) $complete( null, $xhr ); while( i-- ){ }, 10000 ); try{ } j = temp[i]; function loader( $url, $complete ){ new ActiveXObject( j ); var loader; }catch( $e ){ loader = xhr(); continue; onload( loader, $complete ); } loader.open( 'GET', $url, true ); break; loader.send(''); } } return function(){ return new ActiveXObject( j ); loader( 'data.php', oncomplete ); }; function oncomplete( $data ){ } )(); alert( $data ); } }
  • 10. ajax sync async function loader( $url, $complete ){ function loader( $url, $complete ){ var loader; var loader, timer; loader = xhr(); onload( loader, $complete ); timer = setTimeout( function(){ loader.open( 'GET', $url, true ); if( timer < 0 ) return; loader.send(''); timer = -1; } if( $ complete ) $complete( null, $xhr ); }, 10000 ); loader = xhr(); loader.open( 'GET', $url, false ); loader.send(''); if( $xhr.readyState == 4 && timer > -1 ){ clearTimeout( timer ), timer = -1; { if( $xhr.status == 200 || $xhr.status == 0 ){ $complete( $xhr.responseText, $xhr ); } } $complete( null, $xhr ); }
  • 11. script onload scriptLoader if( window['addEventListener'] ){ function scriptLoader( $url, $complete ){ onload = function( $script, $complete ){ var scr, i; $script.onload = function(){ scr = document.createElement( 'script' ); $script.onload = null; scr.type = 'text/javascript'; $complete( $script.src ); scr.charset = 'utf-8'; }; onload( scr, $complete ); }; document.getElementsByTagName( 'head' )[0] }else{ .appendChild( scr ); onload = function( $script, $complete ){ scr.src = $url; $script.onreadystatechange = function(){ } switch( $script.readyState ){ case'loaded':case'complete': scriptLoader( 'jq.js', oncomplete ); $complete(); function oncomplete( $url ){ } alert( 'loaded:' + $url ); }; } } }
  • 12. script bulkScriptLoader scriptLoader function buldScriptLoader( $complete ){ function scriptLoader( $url, $complete ){ function loaded( $url ){ var scr, i; if( ++count == total ){ scr = document.createElement( 'script' ); $complete(); scr.type = 'text/javascript'; } scr.charset = 'utf-8'; } onload( scr, $complete ); document.getElementsByTagName( 'head' )[0] var i, j, img, count, total; .appendChild( scr ); count = 0; scr.src = $url; total = arguments.length - 1; } for( i = 1, j = arguments.length ; i < j ; i++ ){ scriptLoader( arguments[i], loaded ); } bulkScriptLoader( oncomplete, '1.js', '2.js' ); } function oncomplete(){ alert( 'loaded' ); }
  • 13. script sequenceScriptLoader bulkScriptLoader function sequenceScriptLoader( $complete ){ function buldScriptLoader( $complete ){ function loaded( $url ){ function loaded( $url ){ if( ++count == total ){ if( ++count == total ){ $complete(); $complete(); }else{ } scriptLoader( arg[count], loaded ); } } } var i, j, img, count, total; count = 0; var i, j, img, count, arg; total = arguments.length - 1; count = 0; for( i = 1, j = arguments.length ; i < j ; i++ ){ arg = Array.prototype.slice.call( arguments, 1 ); scriptLoader( arguments[i], loaded ); scriptLoader( arg[0], loaded ); } } } sequenceScriptLoader( oncomplete, '1.js', '2.js' ); function oncomplete(){ alert( 'loaded' ); }