Javascript Day 01

Tip #1: Coding equals constantly googling for answers.

What is JavaScript

In spite of their similar name, JavaScript has very little to do with Java, they still have the same roots in the family of programming languages and so the syntax looks a bit similar.

JavaScript was invented to add some dynamic functionality to web pages. Initially you could add some JS to straight into an HTML element to do some thing when a user clicks it. It was extremely limited, buggy and had huge cross browser issues.

You would load HTML and JavaScript from the server (e.g. PHP) and the browser would execute JavaScript to add increasingly complex dynamic functionality onto the web page. It was like this for many years.

A web page consists of JS, HTML, and CSS

The traditional separation of content and logic goes as follows:

  • HTML: contains  page structure
  • CSS: What the page looks like (Styling and layout)
  • Javascript (JS): contains logic of the website (adding or removing elements dynamically)
  • JS or CSS: can be used for animation

 

JavaScript and Processing

Many things in JavaScript work exactly the same as in Processing. There are however some differences that you should know that you will bump into.

JavaScript is a dynamically typed language. That means you don’t need to explicitly say what kind of type each variable is.

var numba = 5
var muumi = "pikkumyy"
var car = [10, 3, "wheels"]

Semicolons are optional in JavaScript. The two examples below are both valid JavaScript.

function sayPlusOne(number) {
    number = number + 1;
    console.log('Hello ' + number);
}
sayHello(5);
function sayPlusOne(number) {
    number = number + 1
    console.log('Hello ' + number)
}
sayHello(5)

Exercise 1: Hello world

This exercise consisted of an 3 files:

  • index.html
  • style.css
  • an image (in my case: wave.jpg)

INDEX.HTML

<html>
<head>
<meta charset="utf-8">
<title>hello world!</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>

</div>
<div class="content">
<h1 id="title">Hello world!</h1>
<img src="wave.jpg">
<p>this is my website text.</p>
<div id="dynamic"></div>
</div>
<script type="text/javascript">
//alert("hello world!");
console.log("hello console!");

var myVariable="hello world!";
var mySecondVariable=20;
var myThirdVariable= 3.6*10/8;

console.log(myVariable);
console.log(mySecondVariable);
console.log(myThirdVariable);

myVariable=93223;
console.log(myVariable);

var element = document.getElementById("dynamic");
//console.log(element);
element.innerHTML="this is a dynamic text";
</script>
</body>
</html>

STYLE.CSS

body{
    font-family: Arial;
}
p{
    font-size: 16px;
}
img{
    width: 100%;
}
.content{
    width: 400px;
    background-color: #d3d3d3;
    margin-left: auto;
    margin-right: auto;                

    padding-left: 10px;
    padding-right: 10px;
    padding-top: 10px;
    padding-bottom: 30px;
}
#title{
    text-align: center;
}

Remember that the CSS syntax can be part of the index.html file, however to keep things more clean it is good practice to separate CSS from HTML code. For simple projects it is also valid to keep the css inline by using

<style>
   body{
      background: grey;   
   }
</style>

The styling should always be part of the head section of an html document, while Javascript should be the last thing in the body-tag
tag of the html.

Exercise 2: Drawing on Canvas (exercise still in process after Day 1)

In this exercise we used the canvas-element to draw different things in our html webpage. We then added a onmousemove function in javascript to track mouse movement.

Here is the code we ended up with in the end of Day1. We will continue this exercise  in our next session:

INDEX.HTML

<html>
<head>
<meta charset="utf-8">
<title>canvas exercise</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>

</div>
<div class="content">
 <canvas id="myCanvas"></canvas>
</div>
<script type="text/javascript">
//get the element from our html document
 var canvas=document.getElementById("myCanvas");
 //console.log(canvas);
 
 //this is a comment
 /*
 now you can write
 many lines of code
 they are all comments
 */
 
 //get drawing context for the canvas
 var ctx = canvas.getContext('2d');
 
 //set the canvas width and height to the same as it's displayed width and height
 ctx.canvas.width = 400;
 ctx.canvas.height = 400;
 
 //draw a rectangle
 ctx.fillStyle="#FF0000";
 ctx.fillRect(20,20,100,50); // (upperLeftCornerX, upperLeftCornerY, with, height)
 
 //draw a line
 ctx.strokeStyle="#00FF00";
 ctx.moveTo(50,100); //start the line from here
 ctx.lineTo(250, 70); //end point of the line

 ctx.stroke();
 
 //draw some text
 ctx.font= "48px Helvetica";
 ctx.fillText("hello canvas!",100,120);
 ctx.strokeText("hello canvas!", 100,180);
 
 
 //if mouse moves on canvas draw a circle around the mouse
 canvas.onmousemove = function(){
 //draw my movement
 drawMovement(event);
 }
 
 //our first own function in JS
 function drawMovement(event){
 //here goes our function code;
 ctx.strokeStyle="#00FFFF";
 var x = event.clientX;
 var y = event.clientY;
 ctx.beginPath();
 ctx.arc(x,y,10,0,2*Math.PI);
 ctx.stroke();
 }
</script>
</body>
</html>

STYLE.CSS

canvas{
    width: 400px;
    height: 400px;
    border: 1px solid black;
}

NEXT STEPS:

  • change the color of the circles drawn when you move your mouse depending on weather mouse button is down or up
  • draw mouse movement only if mouse button is down
  • make the canvas full screen on your browser window, no matter what is it’s size
This entry was posted in Uncategorized. Bookmark the permalink.