What can be done with JavaScript

June 14, 2017


Module1

First Example

HTML

<div id="myFunction"></div>
<!-- import external libraries -->
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://mauriciopoppe.github.io/function-plot/js/function-plot.js"></script>

JavaScript

var parameters = {
  target: '#myFunction',
  data: [{
    fn: 'sin(x)', 
    color: 'red'
    },
    {
    fn: 'cos(x)', 
    color: 'blue'
    }         
  ],
  grid: true,
  yAxis: {domain: [-1, 1]},
  xAxis: {domain: [0, 2*Math.PI]}
};
functionPlot(parameters); // a function call



What can be done with JavaScript

FIRST: interact with the HTML and CSS content of a document, respond to events

My home page

This is an example of interactivity between JavaScript and the HTML content of a document.

HTML

<h1 id="mainTitle">My home page</h1> 

<p>This is an example of interactivity between JavaScript and the HTML content of a document.</p>
<button onclick="changeTitle();">Click me to change the title of the page</button>

JavaScript

function changeTitle() {
  var title = document.querySelector("#mainTitle");
  title.innerHTML += "
This new title has been changed from JavaScript!"; }

selector API : to select a particular element in the document

1
var title = document.querySelector("#mainTitle");

DOM API : to modify the element’s content

1
title.innerHTML += "<br>This new <u>title</u> has been changed from JavaScript!";

event listener : click event to call the changeTitle() function

1
<button onclick="changeTitle();">Click me to change the title of the page</button>

My home page

This is an example of interactivity between JavaScript and the HTML content of a document.

HTML

<h1 id="mainTitle2">My home page</h1> 

<p>This is an example of interactivity between JavaScript and the HTML content of a document.</p>
<button onclick="changeTitleCSSStyle();">Click me to change the CSS colors of the title of the page</button>

JavaScript

  function changeTitleCSSStyle() {
    var title = document.querySelector("#mainTitle2");
    title.style.color = 'black';
    title.style.backgroundColor = "yellow";
    title.style.border = "5px dashed red";
  }

style property : to change the content look and feel. Using the style property is a way of altering the CSS property values of this HTML element.

1
2
3
4
5
6
  function changeTitleCSSStyle() {
    var title = document.querySelector("#mainTitle2");
    title.style.color = 'black';
    title.style.backgroundColor = "yellow";
    title.style.border = "5px dashed red";
  }

CamelCase : the CSS name background-color becomes backgroundColor, text-size becomes textSize, border-color becomes borderColor etc.


SECOND: use numerous APIs in addition to the DOM and selector APIs: multimedia, drawing, animating, geolocation, webcam, etc.

Click the button to get your coordinates:


THIRD: work with remote data / speak with a remote HTTP Web server

Type in the name of a Rock Band (ex: "The Rolling Stones", "Metallica", "The Who", "The Beatles", "Led Zeppelin", "Van Halen", "Grateful Dead").