Daniele Scasciafratte - ConfSL
#confsl

JavaScript in 1 hour

Discover the language that rule the web!

Include comparison of JavaScript code and jQuery code!

Daniele Scasciafratte

  • Co Founder Codeat - Full Stack Developer
  • Mozillian & Mozilla Reps
  • Author for network AndMore, ChimeraRevo and TechEconomy
  • Debian Linux user since 2009
  • WordPress Contributor/Developer/Translator
  • Open Source Addicted
  • Industria Italiana Software Libero Vice President

The future!(?)

JS Vanilla vs jQuery

I still use jQuery

Easy to reconize

The cool part

Today the situation is complicated

How it is works?

What is NodeJS?

It's JavaScript?

Why JS vs jQuery?

Comparison

JavaScript jQuery
Scripting Language Framework for JavaScript
Superfast time execution Require to load the library
Difficult to write Simple to write
Every browser can have different APIs Support also for old browsers
Today is important to known JavaScript jQuery is the foundation for many webapps

Document Object Model

From Mozilla Developer Network
The Document Object Model (DOM) is a programming interface for HTML, XML and SVG documents. It provides a structured representation of the document (a tree) and it defines a way that the structure can be accessed from programs so that they can change the document structure, style and content. The DOM provides a representation of the document as a structured group of nodes and objects that have properties and methods. Nodes can also have event handlers attached to them, and once that event is triggered the event handlers get executed. Essentially, it connects web pages to scripts or programming languages.

Open the developer tools
Ctrl + Shift + i

Selectors

An example

Lorem Ipsum

HTML 

<p class="key" id="principal">Lorem Ipsum</p>

CSS

Selectors in JavaScript

Lorem Ipsum

<p class="lorem" id="ipsum">Lorem Ipsum</p>

JavaScript 


document.querySelector('.lorem').style.color = 'green';
document.querySelector('#ipsum').style.fontWeight = 'bolder';

jQuery 


jQuery('.lorem').css('color','green');
jQuery('#ipsum').css('font-weight','bolder');

Events

Click me

<p id="jsipsum">Click me</p>

JavaScript 


document.querySelector('#jsipsum').addEventListener('click', function () {
    this.style.color = 'green';
    this.style.fontWeight = 'bolder';
    console.log('Style changed');
});

jQuery 


jQuery('#jsipsum').click(function () {
    jQuery(this).css('color','green').css('font-weight','bolder');
    console.log('Style changed');
});

Ajax

The right way

JavaScript 


var httpRequest = new XMLHttpRequest()
httpRequest.onreadystatechange = function (data) {
    console.log(data);
}
httpRequest.open('GET', 'http://domain.tld/api')
httpRequest.send()

jQuery 


jQuery.get( 'http://domain.tld/api', function( data ) { 
    console.log(data);
}

Fetch API: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API

Link

Question Time