Hello World i JS

Som en första övning i kursen javascript så görs ett program "Hello World" och JSFiddle används som ett verktyg som kan underlätta felsökning och test.

by Mikael Roos

HTML

<p class='red'>Hello World in a HTML paragraph!</p>

<p id='green' class='green'></p>
<script>
console.log('doing js in body-section');
document.getElementById('green').innerHTML = 'Hello World from JavaScript within a body-section in HTML!';
//document.writeln('<p class="green">Hello World from JavaScript within a body-section in HTML!<\/p>'); 
</script>

<p><a href='#' onclick='helloWorld();return false;'>Click me to see Hello World in an alert...</a></p> 

<p><a href='#' onclick='helloMyNumber();return false;'>Click me to see a prompt and enter your lucky number...</a></p> 

<p id='luckynumber' class='brown'>No lucky number yet...</p>

CSS

.red{color:red;}
.green{color:green;}
.blue{color:blue;}
.brown{color:brown;}

JavaScript

'use strict';
console.log('doing js in head-section');

function helloWorld() {
    console.log('called function helloWorld()');
    alert('Hello World from a JavaScript function showing an alert.');
}

function helloMyNumber() {
    console.log('called function helloMyNumber()');
    var max = 42,
        yourLuckyNumber = prompt('So, whats your lucky number today (enter a number between 1 and ' + max + ')?'),
        myLuckyNumber = Math.floor(Math.random() * (max + 1)),
        paragraph = document.getElementById('luckynumber');
    paragraph.innerHTML = paragraph.innerHTML + ' Your\'e lucky number is: ' + yourLuckyNumber + '. Mine is: ' + myLuckyNumber + '. They did ' + (yourLuckyNumber === myLuckyNumber ? 'indeed ' : 'NOT ') + 'match!';
}