JavaScript

JavaScript

Programavimo kalba, skirta HTML/CSS manipuliavimui vartotojo kompiuteryje.

Hello world

Įterpimas į HTML dokumentą

<script>
  document.write('<h1>Hello World!</h1>');
</script>

// arba

<script src="script.js"></script>

async

Paprastai JavaScript programa blokuoja tolimesnį svetainės užkrovimą. 

<script src="script.js"></script>

<script src="script.js" async></script>

jQuery

JavaScript biblioteka, supaprastinanti ir suvienodinanti JavaScript veikimą skirtingose naršyklėse

Parsisiųsti iš jQuery.com, arba naudoti CDN

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

Pradžia

Užtikrinti, kad skriptai bus paleisti tik pilnai užsikrovus tinklalapiui.

jQuery(document).ready(function($){
  // do something
});

// arba

jQuery(function($){
  // do something
});

jQuery() vs $()

$() naudojamas kaip jQuery() santrumpa

Globaliai geriau naudoti jQuery() - geresnis suderinamumas.

Bet ready() viduje galima drąsiai naudoti ir $().

jQuery(document) === $(document) // bet

// gerai
jQuery(function($){
  $('#id').hide();
});

//blogai
$(function($){
  $('#id').hide();
});

Įvykiai

• .click()
• .hover()
• .keyup()/.keydown()
• .keypress()
• .mouseover()
• .mouseout()

jQuery(function($){
  jQuery('#p1').click(function(e){
    alert('aaaa');
  });
});

Veiksmai

• .css()
• .html()
• .append()/.prepend()
• .val()
• .attr()
• .addClass()
• .removeClass()

http://tiny.lt/6f9ecx

jQuery(function($){
  jQuery('#p1').click(function(e){
    jQuery(this).css('color','red');
  });
});

preventDefault

Sustabdo natūralų elemento elgesį. Pavyzdžiui, nuoroda nebeveda ten kur turėtų, forma nebesiunčia duomenų ir pan.

jQuery(function($){

  jQuery('a').click(function(e){
    e.preventDefault();
  });

  jQuery('form').submit(function(e){
    e.preventDefault();
  });

});

Klaidų paieška

Klaidų ieškoti reikėtų per konsolę:

Ctrl+Shift+I (Google Chrome)

console.log('bla');