jpetitcolas/01j-index.html

## 01j-index.html
<!DOCTYPE html>
<title>Testing query selectors</title>
<ul id="fruits">
  <li>Banana</li>
  <li>Peach</li>
  <li>Lemon</li>
  <li>Pineapple</li>
</ul>
<script>
  $("#fruits li:nth-child(3)").css("color", "green");
</script>

## 01v-index.html
<!DOCTYPE html>
<title>Testing query selectors</title>
<ul id="fruits">
  <li>Banana</li>
  <li>Peach</li>
  <li>Lemon</li>
  <li>Pineapple</li>
</ul>
<script>
  document.querySelector("#fruits li:nth-child(3)").style.color = "green";
</script>

## 02j-index.js
var myElement = $("#myElement");

// Add selected class if not already set. Remove otherwise.
if(!myElement.hasClass("selected")) {
  myElement.addClass("selected");
} else {
  myElement.removeClass("selected");
}

// Equivalent to above code
myElement.toggleClass("selected");

## 02v-index.js
var myElement = document.getElementById("myElement");

// Add selected class if not already set. Remove otherwise.
if(!myElement.classList.contains("selected")) {
  myElement.classList.add("selected");
} else {
  myElement.classList.remove("selected");
}

// Equivalent to above code
myElement.classList.toggle("selected");

## 03j-index.html
<div id="myDiv" class="fadable"></div>

<p>
  <button id="fadeButton">Fade</button>
</p>

<script>
  $("#fadeButton").click(function() {
    $("#myDiv").fadeToggle();
  });
</script>

## 03v-index.css
.fadable {
  opacity: 1;
  -webkit-transition: opacity 400ms ease;
     -moz-transition: opacity 400ms ease;
       -o-transition: opacity 400ms ease;
          transition: opacity 400ms ease;
}

.fadable.fadeout {
  opacity: 0;
}

## 03v-index.html
<div id="myDiv" class="fadable"></div>
<p>
  <button id="fadeButton">Fade</button>
</p>

## 03v-index.js
var div = document.getElementById("myDiv");

var fadeMeButton = document.getElementById("fadeButton");
fadeMeButton.addEventListener("click", function(e) {
  div.classList.toggle("fadeout");
}, true);

## 04j-index.js
var div = $("#myDiv");

div.position().top;
div.position().left;
div.width();
div.height();

## 04v-index.js
document.getElementById("myDiv").getClientRects();

/*
[{
  bottom: 104,
  height: 22,
  left: 10,
  right: 81,
  top: 82,
  width: 71
}]
*/

## 05j-index.js
$.ajax({
  url: WEBSERVICE_URL,
  dataType: "json",
  type: "GET",
  success: function(response) {
    var response = JSON.parse(response);
    console.log(response.time);
  },
  error: function() {
    // Error handler
  }
});

## 05v-index.js
var xhr = new XMLHttpRequest();
xhr.open("GET", WEBSERVICE_URL, true);

xhr.onreadystatechange = function() {
  if(xhr.readyState == 4 && xhr.status == 200) {
    var response = JSON.parse(xhr.response);
    console.log(response.time);
  } else {
    // Error handler
  }
}

xhr.send();

## 06v-index.js
function myCallback(response) {
  console.log(response.time);
}

var url = "http://webservice/time.php?callback=myCallback";
var button = document.getElementById("purejs_time_btn");

button.addEventListener("click", function(e) {
  var script = document.createElement("script");
  script.setAttribute("src", url);
  document.getElementsByTagName("body")[0].appendChild(script);
}, true);

## 07j-index.js
$("#mylist").delegate("li", "click", function(e) {
  console.log($(this).text());
});

## 07v-index.js
var list = document.getElementById(“mylist”);
list.addEventListener("click", function(e) {
  if(e.target.nodeName == "LI") {
    console.log(e.target.innerText);
  }
}, true);
	<!DOCTYPE html>
	<title>Testing query selectors</title>
	<ul id="fruits">
	<li>Banana</li>
	<li>Peach</li>
	<li>Lemon</li>
	<li>Pineapple</li>
	</ul>
	<script>
	$("#fruits li:nth-child(3)").css("color", "green");
	</script>
	var myElement = $("#myElement");

	// Add selected class if not already set. Remove otherwise.
	if(!myElement.hasClass("selected")) {
	myElement.addClass("selected");
	} else {
	myElement.removeClass("selected");
	}

	// Equivalent to above code
	myElement.toggleClass("selected");
	var myElement = document.getElementById("myElement");

	// Add selected class if not already set. Remove otherwise.
	if(!myElement.classList.contains("selected")) {
	myElement.classList.add("selected");
	} else {
	myElement.classList.remove("selected");
	}

	// Equivalent to above code
	myElement.classList.toggle("selected");
	<div id="myDiv" class="fadable"></div>

	<p>
	<button id="fadeButton">Fade</button>
	</p>

	<script>
	$("#fadeButton").click(function() {
	$("#myDiv").fadeToggle();
	});
	</script>
	.fadable {
	opacity: 1;
	-webkit-transition: opacity 400ms ease;
	-moz-transition: opacity 400ms ease;
	-o-transition: opacity 400ms ease;
	transition: opacity 400ms ease;
	}

	.fadable.fadeout {
	opacity: 0;
	}
	var div = document.getElementById("myDiv");

	var fadeMeButton = document.getElementById("fadeButton");
	fadeMeButton.addEventListener("click", function(e) {
	div.classList.toggle("fadeout");
	}, true);
	var div = $("#myDiv");

	div.position().top;
	div.position().left;
	div.width();
	div.height();
	document.getElementById("myDiv").getClientRects();

	/*
	[{
	bottom: 104,
	height: 22,
	left: 10,
	right: 81,
	top: 82,
	width: 71
	}]
	*/
	$.ajax({
	url: WEBSERVICE_URL,
	dataType: "json",
	type: "GET",
	success: function(response) {
	var response = JSON.parse(response);
	console.log(response.time);
	},
	error: function() {
	// Error handler
	}
	});
	var xhr = new XMLHttpRequest();
	xhr.open("GET", WEBSERVICE_URL, true);

	xhr.onreadystatechange = function() {
	if(xhr.readyState == 4 && xhr.status == 200) {
	var response = JSON.parse(xhr.response);
	console.log(response.time);
	} else {
	// Error handler
	}
	}

	xhr.send();